/* =========================================================
   Sprachschule Durlach – Gemeinsames Stylesheet
   Lernen mit allen Sinnen
   ========================================================= */

:root {
  --blau:      #1f3a93;   /* aus dem Auge im Logo */
  --blau-dark: #16285f;
  --rot:       #e2001a;   /* aus den Lippen im Logo */
  --schwarz:   #1a1a1a;
  --grau:      #5a5f6a;
  --hell:      #f6f7f9;
  --hell-2:    #eef1f6;
  --weiss:     #ffffff;
  --rand:      #e2e6ee;
  --schatten:  0 6px 24px rgba(20, 30, 60, .08);
  --schatten-2:0 12px 40px rgba(20, 30, 60, .14);
  --radius:    14px;
  --max:       1180px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--schwarz);
  line-height: 1.65;
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; color: var(--schwarz); margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

.section { padding: 72px 0; }
.section--hell { background: var(--hell); }
.section__lead { max-width: 720px; margin: 0 auto 48px; text-align: center; color: var(--grau); font-size: 1.08rem; }
.section__title { text-align: center; }
.section__title::after {
  content: ""; display: block; width: 64px; height: 4px; border-radius: 4px;
  background: var(--rot); margin: 16px auto 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-weight: 600; cursor: pointer; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--rot); color: #fff; box-shadow: 0 8px 20px rgba(226,0,26,.25); }
.btn--primary:hover { background: #c30016; }
.btn--ghost { border-color: #fff; color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.14); }
.btn--blau { background: var(--blau); color: #fff; }
.btn--blau:hover { background: var(--blau-dark); }
.btn--outline { border-color: var(--blau); color: var(--blau); background: #fff; }
.btn--outline:hover { background: var(--blau); color: #fff; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  border-bottom: 1px solid var(--rand); box-shadow: 0 1px 10px rgba(20,30,60,.05);
}
.nav { display: flex; align-items: center; gap: 18px; min-height: 124px; }
.brand { flex-shrink: 0; display: flex; align-items: center; }
/* leichter optischer Versatz: gleicht den oberen Weißraum der Logo-Datei aus */
.brand img { height: 104px; width: auto; display: block; transform: translateY(-3px); }

.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.menu > li { position: relative; }
.menu > li > a {
  display: flex; align-items: center; gap: 5px; line-height: 1;
  padding: 12px 13px; color: var(--schwarz); font-weight: 500;
  border-radius: 8px; white-space: nowrap;
}
.menu > li > a:hover { background: var(--hell-2); text-decoration: none; }
.menu > li.has-sub > a::after { content: "▾"; color: var(--grau); font-size: .75em; }

/* Banner – volle Breite, etwas höher (Hand kommt stärker zur Geltung) */
.banner-strip { width: 100%; height: 205px; object-fit: cover; display: block; }

.submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  box-shadow: var(--schatten); padding: 8px; margin-top: 0;
  list-style: none; display: none; flex-direction: column; gap: 2px; z-index: 60;
}
/* Unsichtbare Hover-Brücke: schließt den 8px-Abstand zwischen Menüpunkt und
   Dropdown, damit der Hover beim Hinüberfahren nicht abreißt. */
.menu > li.has-sub > .submenu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px;
}
/* Dropdown öffnen: Hover (nur Geräte mit echtem Hover), Tastatur-Fokus oder Tap-Klasse */
@media (hover: hover) {
  .menu > li.has-sub:hover > .submenu { display: flex; }
}
.menu > li.has-sub:focus-within > .submenu { display: flex; }
.menu > li.has-sub.open > .submenu { display: flex; }
/* Pfeil dreht sich beim Öffnen per Tap */
.menu > li.has-sub > a::after { display: inline-block; transition: transform .2s ease; }
.menu > li.has-sub.open > a::after { transform: rotate(180deg); }
/* größere, bequem klickbare Flächen */
.submenu a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--schwarz); font-size: .95rem; }
.submenu a:hover, .submenu a:focus-visible { background: var(--hell); color: var(--blau); text-decoration: none; }

.nav__cta { flex-shrink: 0; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; font-size: 1.6rem; line-height: 1; color: var(--schwarz);
}

/* =========================================================
   Hero
   ========================================================= */
.hero { background: #fff; padding: 50px 0 46px; text-align: center; }
.hero__inner { max-width: 780px; margin: 0 auto; }
.hero h1 { color: var(--schwarz); }
.hero p { font-size: 1.15rem; color: var(--grau); margin: 0 0 26px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* =========================================================
   Sinne-Band ("Lernen mit allen Sinnen")
   ========================================================= */
.sinne { background: var(--blau); color: #fff; padding: 30px 0; }
.sinne__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px; }
.sinne__item { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.02rem; }
.sinne__item span:first-child { font-size: 1.5rem; }

/* =========================================================
   Karten / Grids
   ========================================================= */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--schatten); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.card__icon { font-size: 1.9rem; margin-bottom: 12px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--grau); margin: 0; }
.card--link { display: flex; flex-direction: column; }
.card--link .card__more { margin-top: 14px; color: var(--rot); font-weight: 600; }
.card--link:hover { text-decoration: none; }

/* Vorteile mit Häkchen */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.checks li { position: relative; padding-left: 34px; color: var(--schwarz); }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--rot); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

/* Sprach-Pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pill {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rand); font-weight: 500; color: var(--schwarz);
}
.pill:hover { border-color: var(--blau); color: var(--blau); text-decoration: none; }

/* =========================================================
   Kontakt
   ========================================================= */
.kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.kontakt__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.kontakt__list li { display: flex; gap: 14px; align-items: flex-start; }
.kontakt__ic { font-size: 1.4rem; flex-shrink: 0; }
.kontakt__list strong { display: block; }
.map { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: var(--radius); box-shadow: var(--schatten); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--schwarz); color: #cfd4df; padding: 56px 0 28px; }
.site-footer a { color: #cfd4df; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
.footer-grid h4 { color: #fff; margin: 0 0 14px; font-size: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .9rem; color: #9aa1b0; }

/* Inhaltsseiten – schmaler Textblock */
.page-hero { background: var(--blau); color: #fff; padding: 54px 0; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #dfe6ff; margin: 0; max-width: 720px; }
.prose { max-width: 820px; }
.prose p { color: #33373f; }

/* aktiver Menüpunkt */
.menu > li.current > a { color: var(--rot); }

/* =========================================================
   Firmenkurse (B2B-Flaggschiff)
   ========================================================= */
.eyebrow { display: inline-block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--rot); margin-bottom: 14px; }

.fk-hero { background: linear-gradient(115deg, var(--blau-dark) 0%, var(--blau) 55%, #2f57c4 100%); color: #fff; padding: 76px 0; }
.fk-hero .eyebrow { color: #ffd2d6; }
.fk-hero h1 { color: #fff; font-size: clamp(1.85rem, 3.9vw, 2.9rem); max-width: 20ch; }
.fk-hero .lead { font-size: 1.2rem; color: #e7ecff; max-width: 60ch; margin: 0 0 28px; }
.fk-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.fk-hero__points { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 0; }
.fk-hero__points li { display: flex; align-items: center; gap: 8px; color: #eaf0ff; font-weight: 500; }
.fk-hero__points li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .75rem; }

/* Faktenband */
.fk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.fk-stat .num { font-size: 2.3rem; font-weight: 800; color: var(--blau); line-height: 1; }
.fk-stat .lbl { color: var(--grau); margin-top: 8px; font-size: .98rem; }

/* Prozess-Schritte */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--schatten); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--rot); color: #fff; font-weight: 800; margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; }
.step p { color: var(--grau); margin: 0; }

.focus-ic { font-size: 1.7rem; margin-bottom: 10px; }

/* Branchen-Tags */
.tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tag { background: var(--hell-2); color: #2a3242; border-radius: 8px; padding: 9px 16px; font-weight: 500; }

/* Zitat / Kundenstimme */
.quote { max-width: 820px; margin: 0 auto; text-align: center; }
.quote blockquote { font-size: 1.4rem; line-height: 1.5; color: var(--schwarz); font-weight: 500; margin: 0 0 18px; }
.quote blockquote::before { content: "„"; color: var(--rot); font-size: 1.6em; line-height: 0; vertical-align: -.3em; margin-right: .05em; }
.quote cite { color: var(--grau); font-style: normal; font-weight: 600; }
.platzhalter { background: #fff7d6; border: 1px dashed #d9b400; color: #6b5600; border-radius: 8px; padding: 2px 8px; font-size: .92em; }

/* FAQ */
.faq { max-width: 840px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--schatten); }
.faq summary { cursor: pointer; font-weight: 600; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rot); font-size: 1.5rem; font-weight: 700; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--grau); margin: 0 0 16px; }

/* Lead-CTA */
.lead-cta { background: linear-gradient(120deg, var(--blau-dark), var(--blau)); color: #fff; border-radius: 18px; padding: 50px; text-align: center; box-shadow: var(--schatten-2); }
.lead-cta h2 { color: #fff; }
.lead-cta p { color: #dfe6ff; max-width: 60ch; margin: 0 auto 28px; }
.lead-cta .btn--ghost { border-color: #fff; color: #fff; }
.lead-cta .btn--ghost:hover { background: rgba(255,255,255,.14); }

/* =========================================================
   Formular (Lehrer-Bewerbung / Kontakt)
   ========================================================= */
.form-card { max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 36px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .95rem; }
.req { color: var(--rot); }
.form-field input, .form-field select, .form-field textarea {
  font: inherit; padding: 11px 13px; border: 1px solid var(--rand);
  border-radius: 8px; background: #fff; color: var(--schwarz); width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.form-field textarea { min-height: 120px; resize: vertical; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.checkbox-row label { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: .95rem; }
.checkbox-row input { width: auto; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--grau); }
.consent input { width: auto; margin-top: 4px; }
.form-hint { color: var(--grau); font-size: .92rem; margin: 0; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-card { padding: 24px; } }

/* =========================================================
   Sprach-Galerie (Bildkarten)
   ========================================================= */
.lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lang-card {
  display: block; background: #fff; border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lang-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); text-decoration: none; }
.lang-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lang-card__body { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lang-card__name { font-weight: 700; color: var(--schwarz); }
.lang-card__arrow { color: var(--rot); font-weight: 700; }

/* Foto-Hero mit Overlay (z. B. Firmenkurse) */
.fk-hero--foto { background-size: cover; background-position: center; }

/* Hero mit Foto NEBEN dem Text (volle Farbe, nicht abgedunkelt) */
.hero-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: center; }
.hero-split h1 { margin-top: 6px; }
.hero-photo { border-radius: 16px; overflow: hidden; box-shadow: var(--schatten-2); }
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Premium-Hero (z. B. kurs-deutsch): größeres Bild rechts, vertikal zentriert,
   dezenter Schatten – nur für Elemente mit .hero-split--premium */
.fk-hero:has(.hero-split--premium) { padding-top: 92px; padding-bottom: 92px; }
/* Bild nimmt ca. 45 % der Hero-Breite ein (Text ~55 %). */
.hero-split--premium { grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center; }
.hero-split--premium .hero-photo {
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
}
/* Breites 16:9-Format = das vollstaendige Foto wird gezeigt (kein seitlicher
   Zuschnitt). Dadurch kommt die Umgebung/das Wahrzeichen jedes Landes voll zur
   Geltung, das Bild wirkt natuerlicher und weniger eingezoomt, und es kann kein
   Koerperteil abgeschnitten werden. Personen bleiben rechts im Bild, die
   Umgebung links sorgt fuer Balance (wie auf der Deutschland-Seite). */
.hero-split--premium .hero-photo img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
}

/* Englisch-Hero: zwei Personen, der Mann sitzt ganz am rechten Bildrand.
   Gleiche 4:3-Proportion wie Deutschland (Zwilling), aber Framing fest auf
   rechts gepinnt und von der Deutschland-Regel entkoppelt: So bleibt der Mann
   rechts immer vollstaendig sichtbar, die Frau und die Tower Bridge bleiben im
   Bild, und nur der linke Vorplatz/Himmel wird beschnitten. Keine Verzerrung. */
.hero-split--en .hero-photo img { object-position: right center; }

/* Mittiger Bildausschnitt: fuer Hero-Bilder, deren Personen/Gruppe zentral
   stehen (z. B. Spanisch, Griechisch, Einzelunterricht). Gleiche 4:3-Box und
   Proportion wie Deutschland, aber zentriert beschnitten, damit links und
   rechts gleichmaessig Hintergrund wegfaellt und niemand am Rand abschneidet. */
.hero-split--center .hero-photo img { object-position: center center; }

/* ===========================================================
   Showcase-Hero (alle Sprach-/Hero-Seiten, Deutschland = Referenz)
   Bild groesser und praesenter, ragt mit weicher Verlaufskante
   leicht nach links. Text liegt per z-index immer ueber dem Bild
   und genau dort, wo sich Text und Bild treffen, ist das Bild
   bereits ausgeblendet -> Ueberschrift und Text bleiben voll
   lesbar. Ruhig, ohne Animation/Gimmick.
   EINHEITLICHE Box auf allen Seiten (Deutschland = Referenz): gleiche
   Breite, Hoehe (6:5), Abstand, Position, Border-Radius, Schatten und
   Verlauf. Pro Bild variiert NUR der Ausschnitt via object-position
   (.hero-split--cc = mittig), damit niemand abgeschnitten wird.
   =========================================================== */
.hero-split--showcase {
  grid-template-columns: 1.15fr 0.85fr;  /* Text ~57 %, mehr Raum fuer Text */
  gap: 64px;                             /* deutlich mehr Luft zwischen Text und Bild */
  align-items: center;
}
.hero-split--showcase > div:first-child {
  position: relative;
  z-index: 2;                 /* Text immer ueber dem Bild */
}
.hero-split--showcase .hero-photo {
  margin-left: -40px;             /* nur noch leichte Ueberlappung -> Bild startet weiter rechts */
  width: calc(100% + 40px);      /* nur nach links verbreitern, rechte Kante bleibt */
  z-index: 1;
  border-radius: 0;
  box-shadow: none;              /* kein Karten-Look, echtes Hero-Motiv */
  overflow: visible;
}
.hero-split--showcase .hero-photo img {
  aspect-ratio: 6 / 5;             /* ~11% hoeher = groesser/praesenter, Breite/Abstand bleiben gleich */
  object-fit: cover;
  object-position: right center;   /* Frau rechts vollstaendig, Tor sichtbar */
  border-radius: 18px;
  /* Fast unsichtbarer Verlauf: nur die aeusserste Bildkante (~8 %) laeuft weich
     ins Hero-Blau aus, damit keine harte Kante entsteht. Kein sichtbarer
     Verlaufsstreifen, kein Schleier. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%);
  /* drop-shadow folgt der ausgeblendeten Kante -> kein harter Schatten links */
  filter: drop-shadow(0 22px 45px rgba(0, 0, 0, .22));
}
/* --- Einheitliche Box fuer ALLE Seiten; nur der Bildausschnitt variiert --- */
/* Standard = rechtsbuendig (Person rechts). Ausnahme: Motive mit Personen auf
   beiden Seiten (Firmen-Meeting, Einzelunterricht) -> Ausschnitt mittig, damit
   niemand am Rand abgeschnitten wird. Boxgroesse/Format bleiben identisch. */
.hero-split--cc .hero-photo img { object-position: center center; }

/* =========================================================
   Responsive
   ========================================================= */
/* Showcase-Variante auf Mobile/Tablet sauber zuruecksetzen */
@media (max-width: 920px) {
  .hero-split--showcase .hero-photo { margin-left: 0; }
  .hero-split--showcase .hero-photo img {
    aspect-ratio: 16 / 9;
    -webkit-mask-image: none; mask-image: none;
    filter: none;
  }
}
@media (max-width: 920px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .kontakt-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .fk-stats { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .lang-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-split { grid-template-columns: 1fr; gap: 28px; }
  .hero-photo { order: -1; max-width: 520px; }

  /* Premium-Hero auf Tablet: Bild UNTER dem Text, zentriert */
  .hero-split--premium { gap: 32px; }
  .hero-split--premium .hero-photo { order: 0; max-width: 560px; margin: 0 auto; }
}

/* Premium-Hero auf Mobile: Bild volle Breite, weiterhin ungeschnitten */
@media (max-width: 560px) {
  .hero-split--premium .hero-photo { max-width: none; }
}

/* Menü klappt zum Hamburger, sobald es nicht mehr in eine Zeile passt */
@media (max-width: 1024px) {
  .nav-toggle { display: inline-block; margin-left: auto; }
  .nav__cta { display: none; }
  .menu {
    position: absolute; top: 124px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rand);
    box-shadow: var(--schatten); padding: 8px; display: none;
  }
  .menu.open { display: flex; }
  .menu > li > a { padding: 14px; border-radius: 8px; }
  /* Accordion: Untermenü erst per Tap sichtbar (.open), nicht dauerhaft offen */
  .menu > li.has-sub > .submenu {
    position: static; box-shadow: none; border: 0;
    border-left: 2px solid var(--rand); border-radius: 0;
    margin: 2px 0 8px 14px; padding: 2px 0; min-width: 0;
  }
  .menu > li.has-sub > .submenu::before { display: none; }  /* keine Brücke auf Mobile nötig */
  .submenu a { padding: 13px 14px; }                        /* großzügige Tap-Flächen */
}

@media (max-width: 760px) {
  .checks { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .brand img { height: 78px; }
  .fk-stats, .steps { grid-template-columns: 1fr; }
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
  .lead-cta { padding: 34px 22px; }
}

/* =========================================================
   ACAMINDO THEME (Dachmarke) — NAVY-basiert, bunte Akzente.
   Grundfarbe Blau (vertrauenswuerdig, geschlechtsneutral, verwandt
   mit der Sprachschule), buntes Logo + bunte Akzente fuer Vielfalt/
   Community. Magenta NICHT mehr dominant. Nur HIER Farben aendern.
   ========================================================= */
:root {
  --blau:      #1b2a63;   /* Navy — Hauptfarbe */
  --blau-dark: #14204d;
  --rot:       #f7941e;   /* Orange aus dem Logo — CTA-Akzent (warm, neutral) */
  --acc-orange: #f7941e;
  --acc-teal:   #16a394;
  --acc-purple: #7b2ff7;
  --acc-blue:   #2f80ed;
  --acc-pink:   #e0218a;
}

/* Logo-Bild im Header */
.nav { min-height: 118px; }
.brand img { height: 96px; width: auto; display: block; }
@media (max-width: 560px) { .brand img { height: 72px; } .nav { min-height: 92px; } }

/* Hero: selbstbewusster Blau-Verlauf (Navy -> Royalblau -> helles Blau) */
.fk-hero { background: linear-gradient(115deg, #14204d 0%, #1b3a8f 55%, #2f80ed 100%); }
.fk-hero .eyebrow { color: #bcd2ff; }
.page-hero { background: linear-gradient(115deg, #14204d 0%, #1b3a8f 55%, #2f80ed 100%); }

/* CTA-Buttons: Orange (hoher Kontrast auf Blau, geschlechtsneutral) */
.btn--primary { background: var(--rot); color: #fff; box-shadow: 0 8px 22px rgba(247, 148, 30, .32); }
.btn--primary:hover { background: #e07d10; }
.btn--blau { background: var(--blau); }
.btn--blau:hover { background: var(--blau-dark); }

/* Section-Titel-Unterstrich: bunter Verlauf als Echo des Logos */
.section__title::after { background: linear-gradient(90deg, var(--acc-orange), var(--acc-pink), var(--acc-purple)); }

/* Kurskarten / Badges (blau getoent, cohaerent) */
.kurs-ic { font-size: 1.9rem; margin-bottom: 8px; }
.badge { display: inline-block; background: #e8f0ff; color: var(--acc-blue); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; margin-bottom: 10px; }
.card__icon { font-size: 2rem; }

/* Wartelisten-/Formular-Stil */
.form { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.form label { font-weight: 600; font-size: .95rem; }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 10px;
  font-family: var(--font); font-size: 1rem; background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Verbindungsleiste "Teil von Acamindo" (fuer angedockte Bereiche) */
.dachbar { background: var(--blau-dark); color: #fff; font-size: .85rem; }
.dachbar a { color: #bcd2ff; font-weight: 600; }
.dachbar .container { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 22px; flex-wrap: wrap; }