@charset "utf-8"; /* Zeichensatz-Definition */

/* ========================= */
/* CSS Variablen (Farben etc.) */
/* ========================= */
:root{ /* Globale CSS-Variablen */
  --fit-yellow: #F2B705; /* Haupt-Hintergrundfarbe (Gelb) */
} /* Ende :root */

/* ========================= */
/* Basis / Layout */
/* ========================= */
html, body{ /* Grundlayout für gesamte Seite */
  margin: 0; /* Entfernt Browser-Standardabstände */
  padding: 0; /* Entfernt Browser-Standard-Innenabstände */
  min-height: 100%; /* Seite mindestens volle Höhe */
  overflow-x: hidden; /* Verhindert horizontales Scrollen durch Überstände */
  background: var(--fit-yellow); /* Seitenhintergrund (Gelb) */
} /* Ende html, body */

body{ /* Body-spezifische Regeln */
  padding-top: 56px; /* Platz für fixed-top Navbar (Bootstrap Standardhöhe) */
} /* Ende body */

/* ========================= */
/* HERO (Startseite) */
/* ========================= */
.hero{ /* Container des Hero-Bereichs */
  position: relative; /* Referenz für absolut positionierten Hintergrund */
  overflow: hidden; /* Schneidet Hintergrund-Form (clip-path) sauber ab */
  height: 34vh; /* Höhe relativ zur Viewport-Höhe */
  min-height: 220px; /* Mindesthöhe für kleine Displays */
  color: #ffffff; /* Standard-Textfarbe im Hero */
} /* Ende .hero */

.hero-bg{ /* Hintergrund-Layer (Grafik/Verlauf) */
  position: absolute; /* Liegt hinter dem Inhalt */
  inset: 0; /* Top/Right/Bottom/Left = 0 (füllt Container) */

  background: /* Mehrfach-Hintergrund: Verlauf + Bild */
    linear-gradient(135deg, #5a5a5a 0%, #4a4a4a 70%), /* dunkler Verlauf als Basis */
    url("/images/Hero_Background.webp"); /* Sketch/Background aus /public/images */

  background-repeat: no-repeat; /* Keine Kachel-Wiederholung */

  background-position: center, 12% 0%; /* Verlauf zentriert, Bild leicht links & oben */

  background-size: cover, 105% auto; /* Verlauf füllt, Bild minimal größer für Pan-Effekt */

  background-blend-mode: overlay; /* Bild wird dezent in den Verlauf gemischt */

  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); /* Schräge Kante unten */

  animation: heroPan 18s ease-in-out infinite alternate; /* Vertikales Panning des Bildes */
} /* Ende .hero-bg */

@keyframes heroPan{ /* Animation für Background-Pan */
  0%   { background-position: center, 12% 0%; } /* Start: oben */
  40%  { background-position: center, 12% 50%; } /* bis Mitte */
  60%  { background-position: center, 12% 50%; } /* Pause in der Mitte */
  100% { background-position: center, 12% 100%; } /* Ende: unten */
} /* Ende keyframes */

@media (prefers-reduced-motion: reduce){ /* Barrierefreiheit: reduzierte Bewegung */
  .hero-bg{ animation: none; } /* Animation deaktivieren */
} /* Ende prefers-reduced-motion */

.hero-content{ /* Inhalt im Hero (Text/Logo-Wasserzeichen) */
  max-width: 992px; /* Max-Breite wie Bootstrap Container */
  position: relative; /* Grundlage für ::before Logo */
  z-index: 2; /* Über dem Hintergrund */
  padding: 80px 0 110px 0; /* Oben/Links/…/Unten Abstand */

  margin-left: 0; /* Links am Rand vom Container beginnen */
  margin-right: auto; /* Rechts flexibel */
  padding-left: 72px; /* Abstand vom linken Rand */
  padding-right: 16px; /* Etwas Luft rechts */
} /* Ende .hero-content */

.hero-content::before{ /* Wasserzeichen-Logo hinter Text */
  content:""; /* Pseudoelement aktivieren */
  position: absolute; /* Frei positioniert */
  left: 72px; /* Ausrichtung passend zum Text-Padding */
  top: 40px; /* Abstand nach oben */
  width: 200px; /* Größe Wasserzeichen */
  height: 200px; /* Größe Wasserzeichen */

  background: url("../images/logo-z.png") no-repeat center; /* Relativ zu /css/style.css -> /images/... */
  background-size: contain; /* Logo vollständig sichtbar */
  opacity: 0.20; /* Dezent transparent */
  filter: grayscale(100%); /* Graustufen */
  z-index: -1; /* Hinter dem Text */
  pointer-events: none; /* Klicks gehen durch */
} /* Ende ::before */

.hero h1{ /* Hero Headline */
  font-family: Helvetica, Arial, sans-serif; /* Schrift */
  font-size: clamp(1.9rem, 5.8vw, 3rem); /* Responsive Schriftgröße */
  font-weight: 700; /* Fett */
  margin: 0; /* Kein Standard-Margin */
  color: var(--fit-yellow); /* Gelb als Akzent */
  line-height: 1.05; /* Enger Zeilenabstand */
  letter-spacing: 0.02em; /* Minimaler Zeichenabstand */
} /* Ende .hero h1 */

.hero p{ /* Hero Text */
  font-size: clamp(1.05rem, 3.6vw, 1.25rem); /* Responsive Größe */
  line-height: 1.35; /* Lesbar */
  max-width: 50ch; /* Zeilenlänge begrenzen */
  text-wrap: balance; /* Schönere Zeilenumbrüche (wo unterstützt) */
  margin-top: 0.9rem; /* Abstand zur Headline */
} /* Ende .hero p */

/* ========================= */
/* Mail / Info Strip */
/* ========================= */
.mail-strip{ /* Gelber Streifen mit Mail/Info */
  background: var(--fit-yellow); /* Hintergrund */
  text-align: center; /* Zentrieren */
  padding: 50px 0; /* Vertikaler Abstand */
  letter-spacing: 0.06em; /* Tracking */
  font-weight: 600; /* Halbfett */
} /* Ende .mail-strip */

/* ========================= */
/* SERVICES Bereich (Startseite) */
/* ========================= */
.services{ /* Container Services */
  background: var(--fit-yellow); /* Hintergrund */
  padding-bottom: 60px; /* Abstand nach unten */
} /* Ende .services */

/* Überschriften: gleiche Startlinie/Optik */
.service-title{
  text-align: center;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 16px;
  min-height: 3.6em; /* sorgt dafür, dass alle 3 Cards oben gleich „stehen“ */
}
/* Nur auf der 3-Spalten-Seite */
.services-3col .service-title{
  font-size: clamp(1.3rem, 1.6vw, 1.65rem);
}
/* WICHTIG: In deinem HTML ist .service-lead direkt am <p> */
.service-lead{ /* Lead-Text (zentriert & begrenzt) */
  max-width: 520px; /* Breite begrenzen */
  margin-left: auto; /* Zentriert */
  margin-right: auto; /* Zentriert */
  margin-bottom: 12px; /* Abstand nach unten */
  text-align: justify; /* Blocksatz */
  text-justify: inter-word; /* Wortweise Justierung */
} /* Ende .service-lead */

/* Listen nicht künstlich einschnüren */
.service-points{
  max-width: none;
  margin: 14px 0 0 0;
  padding-left: 1.8rem;
}

/* Highlight: volle Kartenbreite */
.service-highlight{
  max-width: none;
  /*text-align: left;*/
  margin: 14px 0 0 0;
  text-align: center;
  font-weight: 600;
  margin-top: 1.5rem;
}

/* Button-Container: du hattest teils service-cta, teils service-action -> wir unterstützen beides */
.service-action,
.service-cta{ /* CTA-Wrapper (Button-Breite = Textbereich) */
  width: 100%; /* Füllt Breite des Elterncontainers */
  max-width: 520px; /* Max wie Text */
  margin-left: auto; /* Zentriert */
  margin-right: auto; /* Zentriert */
  margin-top: auto; /* Falls in Flex-Layout: nach unten drücken */
  padding-top: 32px; /* Abstand nach oben */
} /* Ende CTA Wrapper */

/* SERVICES: Karten-Design */
.service-card{
  background:var(--fit-yellow);
  /*background: rgba(255,255,255,0.35);*/
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  height: 100%;
}

/* optional: “narrow” wirklich schmaler machen (oder weglassen) */
.service-narrow{
  padding: 22px 18px;
}

@media (min-width: 992px){
  .service-title{
    font-size: 1.6rem;
  }
}
/* ========================= */
/* UNDER CONSTRUCTION / Trenner */
/* ========================= */
.under-construction{ /* Bereich "under construction" */
  background: var(--fit-yellow); /* Hintergrund */
  text-align: center; /* Zentriert */
  padding: 60px 0 80px; /* Abstände */
  font-weight: 600; /* Halbfett */
  letter-spacing: 0.08em; /* Tracking */
} /* Ende .under-construction */

/* ========================= */
/* Allgemein: Teaser / Listen (Unterseiten) */
/* ========================= */
.tech-teaser{ /* Kurzer Teasertext */
  font-weight: 600; /* Halbfett */
  max-width: 60ch; /* Lesbare Zeilenlänge */
} /* Ende .tech-teaser */

.app-list{ /* Liste auf Unterseiten */
  max-width: 60ch; /* Lesbare Zeilenlänge */
  margin-top: 12px; /* Abstand nach oben */
  padding-left: 1.2rem; /* Bullet-Einzug */
} /* Ende .app-list */

.app-list li{ /* Bullet Abstände */
  margin: 6px 0; /* Abstand zwischen Punkten */
} /* Ende .app-list li */

/* ========================= */
/* Trainingsseite: Media-Karten (Bilder gleich groß) */
/* ========================= */
.media-card{                          /* Rahmen um das große Bild */
  border-radius: 16px;                /* runde Ecken */
  overflow: hidden;                   /* Ecken sauber */
  box-shadow: 0 10px 24px rgba(0,0,0,0.10); /* Schatten */
  background: rgba(255,255,255,0.35); /* Hintergrund */
  border: 1px solid rgba(0,0,0,0.08); /* Rand */
}

.media-card img{                      /* Bild selbst */
  width: 100%;                        /* volle Breite */
  height: auto;                       /* Portrait bleibt Portrait */
  display: block;                     /* keine Lücken */
  object-fit: contain;                /* kein Abschneiden */
  aspect-ratio: auto;                 /* WICHTIG: keinen Querformat-Zwang */
  max-height: none;                   /* WICHTIG: nicht künstlich begrenzen */
}  /* Ende .media-card img */

/* ========================= */
/* COURSE CARDS + PREVIEW (bereinigt, EINE Version) */
/* - Desktop: Preview erscheint beim Hover */
/* - Mobile: Preview wird normal angezeigt */
/* ========================= */
.course-card{ /* Kurs-Karte */
  position: relative; /* Referenz für absolutes Preview */
  background: rgba(255,255,255,0.38); /* Kartenhintergrund */
  border: 1px solid rgba(0,0,0,0.10); /* Rand */
  border-radius: 16px; /* Runde Ecken */
  padding: 18px; /* Innenabstand */
  box-shadow: 0 10px 24px rgba(0,0,0,0.08); /* Schatten */
  overflow: visible; /* Wichtig: Preview darf rausstehen */
  height: 100%; /* Gleiche Höhe im Grid */
} /* Ende .course-card */

.course-preview{ /* Preview-Box (Thumbnail) */
  position: absolute; /* Frei auf Karte */
  right: 14px; /* Abstand rechts */
  bottom: 14px; /* Abstand unten */
  width: 170px; /* Fixe Breite (Stellschraube) */
  max-width: 170px; /* Sicherheit */
  border-radius: 14px; /* Runde Ecken */
  overflow: hidden; /* Bild innerhalb abrunden */
  border: 1px solid rgba(0,0,0,0.12); /* Rand */
  box-shadow: 0 12px 26px rgba(0,0,0,0.18); /* Schatten */
  background: rgba(255,255,255,1); /* Hintergrund, falls Bild transparent */
  z-index: 20; /* Über Inhalt */

  opacity: 0; /* Standard: unsichtbar */
  transform: translateY(10px); /* Leicht nach unten verschoben */
  pointer-events: none; /* Keine Maus-Interaktion (nur Anzeige) */
  transition: opacity 0.15s ease, transform 0.15s ease; /* Smooth Einblendung */
} /* Ende .course-preview */

.course-preview img{ /* Bild im Preview */
  width: 100%; /* Volle Breite */
  height: auto; /* Höhe folgt Bild -> KEIN Crop */
  display: block; /* Keine Inline-Lücken */
  object-fit: contain; /* Ganzes Bild sichtbar (kein Abschneiden) */
  object-position: center; /* Zentrierung */
} /* Ende .course-preview img */

/* Hover nur auf Geräten, die echtes Hover unterstützen */
@media (hover:hover){ /* Desktop/Laptop typischerweise */
  .course-card:hover .course-preview{ /* Preview beim Hover zeigen */
    opacity: 1; /* Sichtbar */
    transform: translateY(0); /* In Position */
  } /* Ende hover preview */
} /* Ende @media hover */

/* Mobile: kein zuverlässiges Hover -> Preview als normales Element zeigen */
@media (max-width: 576px){ /* Bootstrap xs */
  .course-preview{ /* Preview “inline” im Flow */
    position: static; /* Nicht absolut */
    width: 100%; /* Volle Breite */
    max-width: 100%; /* Keine Limitierung */
    margin-top: 12px; /* Abstand nach oben */
    opacity: 1; /* Immer sichtbar */
    transform: none; /* Keine Animation */
    pointer-events: auto; /* Normal */
    box-shadow: none; /* Ruhiger */
  } /* Ende mobile preview */

  .course-preview img{ /* Bild auf Mobile */
    width: 100%; /* Volle Breite */
    height: auto; /* Auto */
  } /* Ende mobile img */
} /* Ende @media max-width */

/* ========================= */
/* FOOTER / KONTAKT */
/* ========================= */
.site-footer{ /* Footer Container */
  background: var(--fit-yellow); /* Hintergrund */
  color: #1f1f1f; /* Textfarbe */
} /* Ende .site-footer */

.site-footer a{ /* Footer Links */
  color: #1f1f1f; /* Linkfarbe */
  text-decoration: underline; /* Unterstreichung */
  text-underline-offset: 3px; /* Abstand Unterstreichung */
} /* Ende .site-footer a */

.site-footer a:hover{ /* Hover Footer Links */
  opacity: 0.85; /* leicht ausblenden */
} /* Ende hover */

.footer-title{ /* Footer Überschrift */
  font-size: 1.8rem; /* Größe */
  font-weight: 800; /* Sehr fett */
  margin-bottom: 14px; /* Abstand */
} /* Ende .footer-title */

.footer-subtitle{ /* Footer Unterüberschrift */
  font-size: 1.1rem; /* Größe */
  font-weight: 700; /* Fett */
  margin: 16px 0 10px; /* Abstände */
} /* Ende .footer-subtitle */

.footer-address{ /* Adressblock */
  font-style: normal; /* Kein kursiv (address ist sonst oft italic) */
  line-height: 1.45; /* Lesbar */
  margin: 0; /* Kein Standard-Margin */
} /* Ende .footer-address */

/* Kontaktzeilen: Icon + Wert sauber ausgerichtet */
.contact-lines{ /* Grid Container */
  display: grid; /* Grid Layout */
  gap: 8px; /* Abstand zwischen Zeilen */
  margin-top: 10px; /* Abstand nach oben */
} /* Ende .contact-lines */

.contact-line{ /* Eine Zeile: Icon + Text */
  display: grid; /* Grid */
  grid-template-columns: 28px 1fr; /* Spalten: Icon / Text */
  column-gap: 10px; /* Spaltenabstand */
  align-items: baseline; /* Text baseline ausrichten */
} /* Ende .contact-line */

.contact-icon{ /* Icon-Größe */
  font-size: 1.1rem; /* Icon-Skalierung */
  vertical-align: middle; /* Align */
} /* Ende .contact-icon */

.contact-icon.phone{ color: #1f1f1f; } /* Telefon-Icon Farbe */
.contact-icon.mail{ color: #0A66C2; } /* Mail-Icon Farbe (LinkedIn-Blau) */

.contact-lines a{ /* Links in Kontaktbereich */
  color: #1f1f1f; /* Farbe */
  text-decoration: none; /* Keine Unterstreichung */
} /* Ende .contact-lines a */

.contact-lines a:hover{ /* Hover */
  text-decoration: underline; /* Unterstreichen */
} /* Ende hover */

/* LinkedIn: nur Icon blau */
.footer-social-link{ /* Social Link Grundstil */
  font-weight: 700; /* Fett */
  text-decoration: none; /* Keine Unterstreichung */
  padding: 6px 10px; /* Innenabstand */
  border-radius: 10px; /* Rund */
  background: rgba(0,0,0,0.08); /* Dezenter Hintergrund */
  display: inline-flex; /* Icon + Text */
  align-items: center; /* Vertikal zentrieren */
  gap: 8px; /* Abstand Icon/Text */
} /* Ende .footer-social-link */

.footer-social-link:hover{ /* Hover Social */
  background: rgba(0,0,0,0.12); /* Etwas stärker */
} /* Ende hover */

.footer-social-link.linkedin{ /* Spezial für LinkedIn */
  background: transparent !important; /* Kein Hintergrund */
  padding: 0; /* Kein Padding */
  border-radius: 0; /* Kein Radius */
} /* Ende LinkedIn */

.footer-social-link.linkedin i{ /* LinkedIn Icon */
  color: #0A66C2 !important; /* LinkedIn Blau */
  font-size: 1.4rem; /* Größer */
} /* Ende LinkedIn icon */

.footer-social-link.linkedin:hover i{ /* Hover LinkedIn Icon */
  color: #004182 !important; /* Dunkleres Blau */
} /* Ende hover */

/* Button im "O nás" Bereich */
.about-action{ /* Wrapper */
  text-align: center; /* Zentrieren */
} /* Ende .about-action */

.about-action .btn{ /* Button Style */
  border-width: 2px; /* Dicker Rand */
  font-weight: 600; /* Halbfett */
  letter-spacing: 0.03em; /* Tracking */
} /* Ende .about-action .btn */

.footer-copyright{ /* Copyright Zeile */
  text-align: center; /* Zentriert */
  margin-top: 36px; /* Abstand nach oben */
  font-size: 0.85rem; /* Klein */
  opacity: 0.75; /* Leicht transparent */
  letter-spacing: 0.03em; /* Tracking */
} /* Ende copyright */

/* ========================= */
/* NAVBAR Dropdown (Bootstrap dark dropdown) */
/* ========================= */
.navbar .dropdown-menu{ /* Dropdown-Menü */
  background: #212529; /* Dunkler Hintergrund */
  border: 1px solid rgba(255,255,255,0.12); /* Heller Rand */
} /* Ende dropdown-menu */

.navbar .dropdown-item{ /* Dropdown-Item */
  color: rgba(255,255,255,0.85); /* Textfarbe */
} /* Ende dropdown-item */

.navbar .dropdown-item:hover{ /* Hover */
  background: rgba(255,255,255,0.12); /* Hover-Hintergrund */
  color: #fff; /* Weiß */
} /* Ende hover */

/* ========================= */
/* MOBILE Anpassungen (Hero) */
/* ========================= */
@media (max-width: 576px){ /* Mobile Breakpoint */
  .hero{ /* Hero auf Mobile */
    height: 28vh; /* Etwas kleiner */
    min-height: 220px; /* Minimum beibehalten */
  } /* Ende .hero mobile */

  .hero-content{ /* Padding Mobile */
    padding-left: 22px; /* Weniger links */
    padding-right: 22px; /* Weniger rechts */
    padding-top: 48px; /* Textposition */
    padding-bottom: 70px; /* Abstand unten */
  } /* Ende .hero-content mobile */

  .hero h1{ /* Headline Mobile */
    font-size: 2rem; /* Fixe Größe */
    color: #FFD24A; /* Hellere Gelb-Variante */
  } /* Ende h1 mobile */

  .hero p{ /* Text Mobile */
    font-size: clamp(0.98rem, 3.2vw, 1.12rem); /* Responsive */
    line-height: 1.45; /* Mehr Luft */
    max-width: 100%; /* Keine Begrenzung */
    overflow-wrap: anywhere; /* Bricht lange Strings (URLs etc.) */
    text-wrap: balance; /* Schönerer Umbruch */
    margin-top: 0.7rem; /* Abstand */
  } /* Ende p mobile */

  .hero-content::before{ /* Wasserzeichen Mobile */
    left: 22px; /* Links passend zum Text */
    top: 30px; /* Oben */
    width: clamp(72px, 28vw, 140px); /* Responsive Größe */
    height: clamp(72px, 28vw, 140px); /* Responsive Größe */
    opacity: 0.14; /* Noch dezenter */
  } /* Ende before mobile */

  .hero-bg{ /* Form bleibt */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); /* gleiche Schräge */
  } /* Ende hero-bg mobile */

  .mail-strip{ /* Strip Mobile */
    padding: 35px 0; /* Weniger Höhe */
  } /* Ende mail-strip mobile */
} /* Ende @media mobile */

@media (max-width:576px){
  .media-card{
    height:auto !important;
  }

  .media-card img{
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
  }
}