/* ==========================================================================
   responsive.css — Anpassungen nach Breakpoint
   Zuletzt geladen, damit die Überschreibungen ohne !important greifen.

   Breakpoints folgen dem Inhalt, nicht Gerätenamen:
   1200px — Hero-Graph braucht mehr Luft
    900px — Navigation wird zum Overlay, zweispaltige Blöcke brechen um
    600px — Einspaltig, Typografie und Abstände enger
   ========================================================================== */

/* --- ≤ 1200px ------------------------------------------------------------ */

@media (max-width: 1200px) {
  .hero__canvas { width: 78%; }

  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }

  .index-row {
    grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
    row-gap: var(--space-4);
  }

  .index-row__body { grid-column: 2 / 3; }

  .step { grid-template-columns: 3.5rem minmax(0, 1fr) auto 1.75rem; row-gap: var(--space-3); }
  .step__body { grid-column: 2 / -1; }
}

/* --- ≤ 900px: Navigation und Umbrüche ------------------------------------ */

@media (max-width: 900px) {
  :root { --bar-h: 60px; }

  /* Navigation als Overlay unter der Leiste. Es verdeckt keinen Inhalt
     dauerhaft und schließt bei Auswahl, Escape und Größenänderung. */
  .nav {
    position: fixed;
    z-index: var(--z-menu);
    top: var(--bar-h);
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: rgba(8, 8, 10, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rule);
    /* Aus dem Fluss nehmen statt display:none — sonst springt der Fokus */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-state) var(--ease-mid),
                transform var(--dur-state) var(--ease-out),
                visibility var(--dur-state);
  }

  .nav[data-open] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav__link {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule);
    font-size: var(--step-1);
    letter-spacing: 0.04em;
  }

  .nav__link::after { display: none; }

  .menu-toggle { display: flex; }
  .bar__cta { display: none; }

  body[data-menu-open] { overflow: hidden; }

  /* Hero: Graph wandert hinter den Text und wird ruhiger */
  .hero {
    min-height: auto;
    padding-bottom: var(--space-8);
    gap: var(--space-7);
  }

  .hero__canvas {
    width: 100%;
    height: 76%;
    top: auto;
    bottom: 0;
    opacity: 0.75;
  }

  .hero__title { max-width: 100%; }

  .hero__bottom { grid-template-columns: minmax(0, 1fr); }

  .readout { min-width: 0; }

  /* Zweispaltige Blöcke werden einspaltig */
  .section-head,
  .diagnosis,
  .contact__grid,
  .build__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .direction { grid-template-columns: minmax(0, 1fr); }
  .direction--flip .direction__info { order: 0; }

  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }

  /* Scroll-Story: kürzere Strecke, kompaktere Bühne */
  .build__track { height: 340vh; }

  .build__stage { gap: var(--space-4); }

  /* Auch hier die Höhe begrenzen — sonst wächst der Entwurf auf schmalen,
     flachen Fenstern wieder über die Bühne hinaus. */
  .mock { width: min(100%, 160cqh); }

  .build__caption { min-height: 4.6em; }
}

/* --- ≤ 600px: einspaltig -------------------------------------------------- */

@media (max-width: 600px) {
  :root {
    --section-y: 4.5rem;
    --measure: 100%;
  }

  .hero { padding-top: calc(var(--bar-h) + 3rem); }

  .hero__title { font-size: clamp(3rem, 15vw, 4.5rem); }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: space-between; }

  .readout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .readout__value { font-size: var(--step-1); }
  .readout__note { grid-column: 1 / -1; }

  .display { font-size: clamp(2.5rem, 11vw, 3.75rem); }
  .display--lg { font-size: clamp(2.75rem, 13vw, 4.25rem); }

  /* Ausnahme von „Überschriften nie trennen": Deutsche Komposita wie
     „Erklärungsbedarf" sind bei 390 px breiter als der Bildschirm und
     schieben sonst die ganze Seite horizontal auf. Silbentrennung ist
     hier das kleinere Übel — `break-word` fängt den Rest ab. */
  .display,
  .build__title,
  .direction__title,
  .index-row__title,
  .pager__title,
  .stage__title {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Touch-Ziele vergrößern, ohne die Optik zu ändern */
  .logo { min-height: 44px; align-items: center; }

  .footer__list a,
  .footer__legal a,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .channel__value { min-height: 44px; display: inline-flex; align-items: center; }

  /* Editorial-Zeilen: Nummer über den Titel, danach der Text */
  .index-row {
    grid-template-columns: minmax(0, 1fr) 1.75rem;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }

  .index-row__num { grid-column: 1 / -1; padding-top: 0; }
  .index-row__title { grid-column: 1 / -1; }
  .index-row__body { grid-column: 1 / -1; }
  .index-row__mark { grid-row: 1; grid-column: 2; align-self: start; }

  .step {
    grid-template-columns: minmax(0, 1fr) auto 1.5rem;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-5);
  }

  /* Nummer und Pfeil teilen sich die erste Zeile, darunter Titel und Dauer */
  .step__num { grid-column: 1 / 3; }
  .step__mark { grid-row: 1; grid-column: 3; align-self: start; }
  .step__title { grid-column: 1 / 2; }
  .step__span { grid-column: 2 / -1; justify-self: end; }
  .step__body { grid-column: 1 / -1; margin-top: var(--space-2); }

  .direction__specs { grid-template-columns: minmax(0, 1fr); }

  .statement { padding: var(--space-5); }

  .pledge { min-height: 0; padding: var(--space-5); }

  .footer__grid { grid-template-columns: minmax(0, 1fr); }

  .footer__legal { gap: var(--space-2); }
  .footer__legal-end { margin-left: 0; }

  /* Der Aufbau bleibt lesbar: Bühne ohne Kopfzeilen-Konkurrenz,
     Phasenleiste zweizeilig statt gequetscht. */
  .build__track { height: 300vh; }

  .build__title { font-size: var(--step-2); }

  .build__caption {
    min-height: 6em;
    font-size: var(--step--2);
  }

  .build__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .phase__label { font-size: 0.625rem; letter-spacing: 0.06em; }

  .mock__page { gap: 2.4%; padding: 3% 3.2%; }

  /* Zwei Spalten im Mock sind bei dieser Breite nicht mehr lesbar */
  .mock__page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; }
  .mock__visual { min-height: 22%; }
  .mock__lede { display: none; }
}

/* --- Sehr schmal (≤ 380px) ------------------------------------------------ */

@media (max-width: 380px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__item { font-size: var(--step--2); }
}

/* --- Zeigergeräte ohne Hover ---------------------------------------------- */

@media (hover: none) {
  /* Hover-abhängige Hinweise dürfen auf Touch nicht die einzige
     Rückmeldung sein — deshalb sind die Marker dort dauerhaft sichtbar. */
  .index-row__mark { color: var(--fg-dim); }
  .index-row::before { transform: scaleX(1); opacity: 0.25; }
}

/* --- Querformat auf niedrigen Displays ------------------------------------ */

@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--bar-h) + 2rem) var(--space-7); }
  .build__stage { padding-block: calc(var(--bar-h) + 0.75rem) var(--space-4); }
  .build__head { display: none; }
}

/* --- Druck ---------------------------------------------------------------- */

@media print {
  .grain, .bar, .strip, .hero__canvas, .hero__light,
  .contact__light, .build__rail, .scroll-cue { display: none; }

  body { background: #fff; color: #000; }
  .build__track { height: auto; }
  .build__stage { position: static; height: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* --- Detailseiten --------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }

  /* Die Faktenspalte rutscht unter den Text — als klebender Block würde
     sie auf kleinen Höhen mehr verdecken als sie nützt. */
  .facts { position: static; margin-top: var(--space-7); }
}

@media (max-width: 600px) {
  .page-hero { padding-top: calc(var(--bar-h) + var(--space-7)); }

  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__item--next { text-align: left; align-items: flex-start; }

  .stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

  .facts__row { flex-direction: column; gap: var(--space-1); }
  .facts__value { text-align: left; }

  .preview--wide { aspect-ratio: 4 / 3; }
}

/* --- Kontaktwege und Konfigurator ----------------------------------------- */

@media (max-width: 900px) {
  .channels { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  /* Auf dem Telefon ist der Konfigurator eine eigene Ansicht, kein Fenster */
  .wizard {
    width: 100%;
    max-width: none;
    max-height: 100svh;
    height: 100svh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .wizard__head { padding: var(--space-4); }
  .wizard__body { padding: var(--space-5) var(--space-4); }
  .wizard__foot { padding: var(--space-4); }

  /* Beide Schaltflächen gleich breit — Daumen treffen sonst daneben */
  .wizard__foot .btn { flex: 1; justify-content: center; gap: var(--space-3); }

  .result-grid { grid-template-columns: minmax(0, 1fr); }

  .sitecheck__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sitecheck__summary { grid-template-columns: minmax(0, 1fr); }

  .sitecheck__score { width: 96px; }

  .sitecheck__finding-top { display: grid; gap: var(--space-2); }

  .sitecheck__finding-top span { white-space: normal; }

  .channel-card__mark { top: var(--space-5); }
}

@media (max-width: 600px) {
  /* Zwei Felder nebeneinander sind auf dem Telefon zu schmal */
  .field-row { grid-template-columns: minmax(0, 1fr); }
}