@media(max-width:900px) {
  .hamburger { display: flex; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(247,247,245,.98); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-sm); padding: 8px 0; }
  .menu.open { display: flex; }
  .menu a:not(.btn) { padding: 14px 20px; }
  /* Keep the Kontakt button a normal-sized pill at every width instead of
     letting the generic mobile .btn{width:100%} rule (below, ≤600px) stretch
     it to the menu's full width — combined with the margin here that made it
     wider than the menu itself and pushed it off-screen. */
  .menu a.btn { margin: 10px 20px; width: auto; align-self: center; }
  .hero-grid, .split, .content-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-media img { height: 420px; }
  .cards, .steps { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .cta { flex-direction: column; }
  .badge { left: 12px; }
  h1 { font-size: 3.5rem; }
  .proofbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .proofbar>div+div { border-left: 0; border-top: 1px solid #deded9; padding-left: 0; padding-top: 14px; }
  .proofbar span { max-width: none; }
}

@media(max-width:520px) {
  .wrap { width: min(100% - 26px,1180px); }
  .navin { height: 72px; }
  .logo { width: 165px; }
  .hero { padding-top: 48px; }
  .hero-media img { height: 330px; }
  .cta { padding: 30px 24px; }
}

@media(max-width:900px) {
  .path-grid, .outcomes, .testimonial-placeholders { grid-template-columns: 1fr; }
  .float-card { right: 10px; }
  .editorial-split { gap: 50px; }
  .premium-hero { padding-top: 60px; }
}

@media(max-width:900px) {
  .trust-grid { grid-template-columns: 1fr; gap: 35px; }
  .trust-facts>div { grid-template-columns: 1fr; gap: 5px; }
}

@media(max-width:1000px) {
  .subhero-grid, .intro-band .wrap { grid-template-columns: 1fr; }
  .subhero-media img { height: 410px; }
  .value-grid.four { grid-template-columns: repeat(2,1fr); }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { min-height: 260px; }
  .process-row { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  /* Once the label/heading/copy row stacks into one column, center it
     too, same as the hero/split sections above. */
  .intro-band .wrap { text-align: center; }
  .intro-band .wrap > .section-label { justify-self: center; }
}

@media(max-width:760px) {
  .value-grid, .value-grid.two, .value-grid.four, .compare-grid, .fact-strip { grid-template-columns: 1fr; }
  .fact-strip>div+div { border-left: 0; border-top: 1px solid #deded9; }
  .subhero { padding-top: 58px; }
  .subhero-chip { left: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .premium-panel { padding: 32px 26px; }
}

/* Responsive spacing */
@media(max-width:1100px) {
  .hero-grid, .subhero-grid { gap: 52px; }
  .path-card { padding: 36px; }
  .value-card { padding: 34px; }
}

@media(max-width:900px) {
  body { line-height: 1.62; }
  h1 { line-height: 1.03; margin-bottom: 24px; }
  h2 { line-height: 1.12; margin-bottom: 20px; }
  h3 { line-height: 1.18; }
  section { padding: 72px 0; }
  .premium-hero, .hero, .subhero { padding-top: 64px; padding-bottom: 64px; }
  .hero-grid, .subhero-grid, .split { gap: 46px; }
  .section-intro { margin-bottom: 34px; text-align: center;}
  .intro-band { padding: 44px 0; }
  .intro-band .wrap { gap: 24px; }
  .path-card, .audience-card { min-height: auto; }
  .value-card, .process-step, .outcomes article { min-height: auto; }
  .premium-panel, .cta { padding: 38px 30px; }
  .trust-grid { gap: 42px; }
  .sub-cta { padding-bottom: 72px; }
}

@media(max-width:600px) {
  .wrap { width: min(100% - 30px,1180px); }
  h1 { font-size: clamp(2.9rem,15vw,4.1rem); line-height: 1.04; }
  h2 { font-size: clamp(2rem,10vw,3rem); line-height: 1.13; }
  h3 { font-size: 1.55rem; line-height: 1.2; }
  p { line-height: 1.62; margin-bottom: 16px; }
  section { padding: 60px 0; }
  .premium-hero, .hero, .subhero { padding-top: 52px; padding-bottom: 56px; }
  .hero-grid, .subhero-grid, .split { gap: 36px; }
  .card, .feature, .value-card, .compare-card, .process-step, .audience-card, .contact-card, .course-card { padding: 28px 24px; }
  .path-card { padding: 30px 24px; }
  .path-card h3, .audience-card h3 { margin-top: 28px; }
  .premium-panel, .cta, .form-card { padding: 30px 24px; }
  .hero-actions { gap: 10px; }
  .btn { width: 100%; padding: 14px 18px; }
  .text-link { width: auto; }
  .footer-grid { gap: 30px; }
  .legal-content h2 { gap: 10px; margin: 36px 0 14px; padding-top: 24px; }
  .legal-content .legal-num { width: 28px; height: 28px; font-size: .85rem; }
}

@media(max-width:1180px) {
  .subhero-grid, .split, .editorial-split, body:has(.active-nav[href="ueber-uns.html"]) .subhero-grid, body:has(.active-nav[href="ueber-uns.html"]) .editorial-split { grid-template-columns: 1fr; gap: 46px; }
  /* max-width alone leaves the box flush left in the now full-width
     single column (same box-vs-text-align issue as .hero-lead below) —
     margin:auto centers the box itself, matching the now-centered h1/p. */
  .subhero-media { width: 100%; max-width: 820px; margin: 0 auto; }
  body:has(.active-nav[href="ueber-uns.html"]) .subhero h1 { font-size: clamp(3rem,8vw,5.5rem); }
  /* Non-hero split/editorial images (hero/subhero images already have
     their own height steps): once the grid stacks to one column, cap
     height AND width and center the image instead of stretching it
     full-bleed across the whole (now much wider) single column. */
  .split img { width: 100%; max-width: 640px; max-height: 380px; margin: 0 auto; object-fit: cover; display: block; }
  .split img:hover, .portrait-panel img:hover, .image-stack img:hover { transform: none; }
}

@media(max-width:1180px) {
  .premium-hero .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .premium-hero h1 { max-width: 820px; font-size: clamp(3.6rem,8vw,5.6rem); }
  /* Same box-centering fix as .subhero-media: cap and center the hero
     image, and center the "Aktuelle Kurse" button above it instead of
     leaving it flush right now that the column below it is centered. */
  .hero-media-col { align-items: center; }
  .hero-media { max-width: 820px; margin: 0 auto; }
}

/* Once a two-column hero/split section stacks into one column, center its
   text side instead of leaving it left-aligned against the now full-width
   column — headline, eyebrow and lead copy all follow (text-align
   inherits), flex rows need justify-content explicitly. Caption chips
   over images keep their original left-aligned look. */
@media(max-width:1180px) {
  .hero-grid > div:first-child, .subhero-grid > div:first-child, .split > div, .editorial-split > div { text-align: center; }
  .hero-actions, .mini-proof, .proofbar, .proofbar > div { justify-content: center; }
  .split .checklist, .editorial-split .checklist { text-align: left; width: fit-content; margin: 0 auto; }
  .subhero-chip, .float-card { text-align: left; }
  /* text-align only centers the text inside a heading/paragraph — a
     narrower max-width still leaves the box itself flush left. Center
     the box too so short lead copy doesn't read as off-center. */
  .hero-grid > div:first-child h1, .hero-grid > div:first-child p,
  .subhero-grid > div:first-child h1, .subhero-grid > div:first-child p,
  .split > div h2, .split > div p, .editorial-split > div h2, .editorial-split > div p {
    margin-left: auto;
    margin-right: auto;
  }
}

@media(max-width:700px) {
  .premium-hero h1 { font-size: clamp(2.8rem,13vw,4rem); line-height: 1.1; }
  .premium-hero h1 .hero-title-line { line-height: 1.1; }
  .premium-hero h1 .hero-title-line + .hero-title-line { margin-top: .12em; }
}

@media (min-width:1100px) {
  .subhero-grid, .editorial-split, .split { align-items: center; }
  .subhero-grid>*, .editorial-split>*, .split>* { min-width: 0; }
}

@media (max-width:1099px) {
  .subhero-grid, .editorial-split, .split { grid-template-columns: 1fr!important; }
  .subhero-media { max-width: 760px; }
}

@media(max-width:900px) {
  .split img { max-width: 540px; max-height: 320px; }
}

@media(max-width:700px) {
  .split img { max-width: 460px; max-height: 280px; }
}

@media(max-width:520px) {
  .split img { max-width: 100%; max-height: 240px; }
}

@media (max-width:700px) {
  .premium-section, .path-section, section { scroll-margin-top: 80px; }
  .hero-title-line { line-height: 1.06; }
  .subhero h1 { line-height: 1.07; }
  .cta { gap: 28px; }
  .fact-strip, .process-row, .value-grid, .audience-grid, .testimonial-grid, .contact-cards { grid-template-columns: 1fr!important; }
}

@media(max-width:900px) {
  .path-grid-secondary, .testimonial-grid { grid-template-columns: 1fr; }
}

@media(prefers-reduced-motion:reduce) {
  .reveal, .reveal-group>* { transition: none; opacity: 1; transform: none; }
  .text-link, .menu a:after, .menu a:not(.btn):after { transition: none; }
}

@media(prefers-reduced-motion:reduce) {
  [data-parallax] { transform: none; }
  .subhero-media img, .image-stack img, .split img, .portrait-panel img { transition: none; }
}

@media(prefers-reduced-motion:reduce) {
  .orb-a, .orb-b { animation: none; }
  .btn-primary:after { transition: none; display: none; }
  .path-card b { transition: none; }
}

@media(prefers-reduced-motion:reduce) {
  .premium-hero h1, .subhero h1 { animation: none; }
  .btn, .path-card, .path-card b, .audience-card .link, .compare-card .link, .logo, a:has(> .logo):before { transition: none; }
}

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

/* Stronger, continuous type scaling down to 320px. Overrides the fixed/
   under-scaled sizes above for headings (incl. component-specific ones
   like .subhero h1 or .value-card h3, which otherwise outrank the plain
   h1/h2/h3 rules) and the larger lead-paragraph variants, so long German
   compound words keep fitting their line as whole words instead of
   forcing a mid-word break. */
@media(max-width:900px) {
  h1, .subhero h1, body:has(.active-nav[href="ueber-uns.html"]) .subhero h1 { font-size: clamp(2.1rem,calc(1.39rem + 4.31vw),3.9rem); }
  h2, .premium-cta h2, .intro-band h2 { font-size: clamp(1.6rem,calc(1.47rem + 1.4vw),2.6rem); }
  h3 { font-size: clamp(1.3rem,calc(1.1rem + .9vw),1.6rem); }
  .value-card h3, .audience-card h3, .compare-card h3, .path-card h3, .path-card-medium h3 { font-size: clamp(1.4rem,calc(1.19rem + 1.55vw),2.1rem); }
  .hero p, .subhero p, .pagehero p, .largecopy, .editorial-copy { font-size: clamp(1rem,calc(.9rem + .7vw),1.28rem); }
  .section-intro p, .intro-band p { font-size: clamp(.98rem,calc(.9rem + .4vw),1.18rem); }
}

/* =========================================================
   Einheitlicher Umbruch- und Zentrierpunkt: 1180px
   ---------------------------------------------------------
   Vorher lagen die Umbruchpunkte der Module verstreut zwischen 1180px
   und 760px. Dadurch stand z. B. eine bereits einspaltige, zentrierte
   .split-Sektion direkt über einem noch dreispaltigen .value-grid, das
   weiterhin die volle Fensterbreite einnahm — die Seite wirkte dadurch
   unruhig. Ab hier brechen alle Module gemeinsam bei 1180px um und alle
   Inhaltsbereiche werden zentriert. Der Footer ist bewusst ausgenommen
   (weder <header> noch <section>) und behält sein bisheriges Layout.
   ========================================================= */
@media(max-width:1180px) {
  .hero-grid, .premium-hero .hero-grid, .subhero-grid, .split, .editorial-split,
  .content-grid, .cards, .steps, .feature-grid, .path-grid, .path-grid-secondary,
  .outcomes, .testimonial-placeholders, .testimonial-grid, .trust-grid, .fit-grid,
  .value-grid, .value-grid.two, .value-grid.four, .audience-grid, .process-row,
  .contact-cards, .compare-grid, .fact-strip, .form-grid, .course-grid,
  .intro-band .wrap { grid-template-columns: 1fr; }
  .trust-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .form-grid .full { grid-column: auto; }
  /* Trennlinien der Faktenleiste folgen der neuen Stapelrichtung */
  .fact-strip > div + div { border-left: 0; border-top: 1px solid #deded9; }
  .cta { flex-direction: column; align-items: center; }
  /* In der Spaltenrichtung wirkt die flex-basis als Mindesthöhe — der
     Textblock des Abschluss-CTAs würde sonst 320px hoch aufgezogen. */
  .sub-cta .cta > div:first-child { flex: 0 0 auto; }
}

/* .wrap deckelt bei jeder Fensterbreite auf max. 1180px (siehe style.css)
   — .value-grid.four (4 Spalten) und .compare-grid (2fr/1fr, pages/lernen.html)
   werden dadurch NIE breiter als jetzt, sobald sie ab 1181px wieder
   mehrspaltig sind, egal wie breit der Monitor ist. Die Standard-Headline-
   größe (2rem/2.25rem) ist für diese schmalen Spalten zu groß und lange
   Komposita ("konzentrierter", "Einzel-Lerncoaching") brechen mitten im
   Wort um. Nur in diesem Breitenbereich (ab 901px, oberhalb des mobilen
   clamp() weiter unten) verkleinert, damit es bei jeder Fensterbreite passt. */
@media(min-width:901px) {
  .value-grid.four .value-card h3, .compare-grid .compare-card h3 { font-size: 1.8rem; }
}

@media(max-width:1180px) {
  header .wrap, section .wrap { text-align: center; }
  /* text-align zentriert nur den Text. Blöcke mit eigener max-width
     (Headlines, Lead-Absätze, .section-intro …) kleben ohne auto-Margins
     trotzdem am linken Rand. */
  header .wrap :is(h1,h2,h3,p,ul,.section-intro,.megaquote,.quote,.editorial-copy,.largecopy),
  section .wrap :is(h1,h2,h3,p,ul,.section-intro,.megaquote,.quote,.editorial-copy,.largecopy) { margin-left: auto; margin-right: auto; }
  /* Flex-Reihen richten sich nicht nach text-align */
  .hero-actions, .mini-proof, .proofbar, .proofbar > div, .trust,
  .cta-buttons, .btn-stack, .status-legend, .course-top { justify-content: center; }
  /* Flex-Spalten: Kinder mittig statt auf volle Breite gestreckt */
  .path-card, .audience-card, .compare-card, .course-card, .portrait-caption { align-items: center; }
  .intro-band .wrap > .section-label { justify-self: center; }
  /* Aufzählungen und Label/Wert-Zeilen bleiben intern linksbündig lesbar,
     nur der Block selbst rückt in die Mitte. */
  .checklist, .course-meta { text-align: left; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
  /* Rechtstexte: langer Fließtext bleibt linksbündig, zentriert wird
     ausschließlich der Textblock. */
  .legal-content { text-align: left; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------
   index.html, "Was sich verändert": .image-note lag absolut am linken
   Rand von .image-stack. Unter 1180px begrenzt .split img das Bild aber
   auf eine zentrierte Maximalbreite, während .image-stack die volle
   Spaltenbreite behielt — die Notiz stand dadurch sichtbar versetzt
   neben statt auf dem Bild. Sie verlässt hier deshalb die Overlay-
   Position und wird zum zentrierten Beschriftungsband direkt unter dem
   Bild; Radius und Schatten wandern auf .image-stack, damit Bild und
   Band als eine Karte gelesen werden.
   --------------------------------------------------------- */
@media(max-width:1180px) {
  .image-stack { width: 100%; max-width: 640px; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .image-stack img { border-radius: 0; box-shadow: none; }
  .image-note { position: static; max-width: none; padding: 20px 24px; text-align: center; }
}

/* .image-stack folgt den Breitenstufen von .split img (siehe oben),
   damit Bild und Beschriftungsband immer bündig abschließen. */
@media(max-width:900px) { .image-stack { max-width: 540px; } }

@media(max-width:700px) { .image-stack { max-width: 460px; } }

@media(max-width:520px) { .image-stack { max-width: 100%; } }

/* ---------------------------------------------------------
   ueber-uns.html, "Die Menschen hinter Rein Campus": team.jpg ist ein
   Hochformat (1010x1280). Das Bild liegt in einem .editorial-split, also
   greifen die .split-img-Stufen weiter oben auch hier — und die geben
   eine Querformat-Box vor (640x380, darunter 540x320 / 460x280 / 240px
   Höhe). Gleiche Spezifität wie .portrait-panel img, aber später in der
   Datei, also gewinnen sie. object-fit:cover füllt die Box dann über die
   Breite und beschneidet die Höhe von unten: sichtbar blieb nur knapp
   die obere Hälfte des Bildes, wodurch das mittlere Gesicht mittendurch
   abgeschnitten wurde. Die Bildspalte wird deshalb auf Portraitbreite
   begrenzt und zentriert, und die Höhenbegrenzung entfällt — bei
   height:auto entspricht die Box exakt dem Seitenverhältnis des Bildes,
   cover hat nichts mehr zu beschneiden.
   --------------------------------------------------------- */
@media(max-width:1180px) {
  .portrait-panel { width: 100%; max-width: 440px; margin: 0 auto; }
  .portrait-panel img { height: auto; max-height: none; }
}

/* ---------------------------------------------------------
   ueber-uns.html, "Wofür wir stehen": .value-card unterscheidet sich rein
   optisch nur über eine 1px-Trennlinie von der weißen .premium-section-
   Fläche dahinter (kein eigener Rand, kein Radius, kein Schatten – die
   Abgrenzung entsteht ausschließlich dadurch, dass .value-grid eine graue
   1px-Lücke zwischen den Karten durchscheinen lässt). Das funktioniert nur
   im mehrspaltigen Grid, wo die Lücke als klar erkennbare Fuge zwischen
   Karten wirkt. Unter 1180px kollabiert .value-grid (siehe weiter oben) auf
   eine Spalte, aus der Fuge wird eine einzelne, kaum sichtbare Haarlinie
   zwischen gestapelten Karten, die auf Weiß praktisch verschwindet. Scoped
   auf ueber-uns.html (andere Seiten mit .value-grid behalten ihr
   bisheriges Aussehen), .value-card bekommt hier denselben Rand+Radius+
   Schatten wie das allgemeine .card-Komponentenmuster (css/components.css),
   .value-grid einen echten Abstand statt der 1px-Fugentechnik und keinen
   eigenen Hintergrund mehr (der sonst als graue Fläche hinter dem jetzt
   sichtbaren Kartenrand durchscheinen würde). */
@media(max-width:1180px) {
  body:has(.active-nav[href="ueber-uns.html"]) .value-grid { gap: 20px; background: none; }
  body:has(.active-nav[href="ueber-uns.html"]) .value-card { border: 1px solid #e2e2dd; border-radius: var(--r); box-shadow: var(--shadow-sm); }
}