/* desktop.css — Breitensystem für große Viewports (ab 1280 px).
   Refinement der bestehenden Welt: gleiche Farben, Fonts, Kicker, Kapitelnummern.
   Ändert nur, wie viel Breite der Inhalt auf Desktop-Monitoren bekommt und
   dass Überschrift und Inhalt auf derselben Achse sitzen.

   Rollen (statt Deckel pro Sektion):
     prose    48rem   Lesespalte (ca. 70–75 Zeichen)
     content  76rem   Text + Karten, Kurz-Boxen, FAQ
     wide     88vw/96rem   Galerien, Kartenreihen, Container
     full     100%    Heros

   Lädt nach polish.css und film-nav.css. Kein Build-Step: bei jeder Änderung
   den ?v=-Parameter in allen HTML-Dateien bumpen (180-Tage-Cache). */

:root {
  --hf-prose: 48rem;
  --hf-content: 76rem;
  --hf-wide: min(96rem, 88vw);
  --hf-bar: 80px;            /* Höhe der fixierten Film-Navbar (Desktop) */
}

/* 1) Wurzelskalierung: Große Monitore bekommen etwas größere Type.
   Alle rem-Maße (Abstände, max-w-*, Kartenbreiten) wachsen proportional mit,
   die Proportionen der Seite bleiben erhalten. */
@media (min-width: 1680px) { html { font-size: 17px; } }
@media (min-width: 1920px) { html { font-size: 18px; } }
@media (min-width: 2400px) { html { font-size: 19px; } }

/* 2) Container: Ab 1536 px nicht mehr fest bei 1400 px, sondern 88 % der Breite. */
@media (min-width: 1536px) {
  .container { max-width: var(--hf-wide); }
}

/* 3) Innere Deckel nach Rolle statt nach Tailwind-Stufe. */
@media (min-width: 1280px) {
  /* Kurz-Boxen, Checklisten, Bild-Text-Karten: content-Rolle */
  #main-content .container.max-w-3xl { max-width: 56rem; }
  #main-content .container.max-w-4xl { max-width: 64rem; }
  /* Reine Lesespalten (FAQ-Akkordeons, Vergleichstexte) */
  #main-content .container.max-w-2xl { max-width: var(--hf-prose); }
  /* Textabsatz in einer verbreiterten Box bleibt lesbar */
  #main-content .container.max-w-3xl > .text-center > p { max-width: 46rem; margin-left: auto; margin-right: auto; }

  /* FAQ-Kartenliste auf der Startseite: zwei Spalten statt eine schmale */
  #main-content .container.max-w-4xl > .space-y-6 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
  #main-content .container.max-w-4xl > .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
  /* ungerade letzte Karte über beide Spalten statt als Waise links */
  #main-content .container.max-w-4xl > .space-y-6 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1440px) {
  #main-content figure.max-w-4xl,
  #main-content .grid.max-w-4xl { max-width: 64rem; }
  #main-content .max-w-5xl.mx-auto { max-width: 76rem; }
  #main-content .max-w-6xl.mx-auto { max-width: 80rem; }
}

/* 3b) Kundenstimmen: Karten nach Inhalt hoch statt auf die längste Rezension gestreckt */
@media (min-width: 768px) {
  #reviews-grid { align-items: start; }
}

/* 4) Achse: Startseite Kapitel 01 — Überschriftenzeile auf dieselbe Breite wie
   die Bild-Text-Blöcke darunter (max-w-6xl), statt an der Containerkante. */
@media (min-width: 1024px) {
  #portfolio > div > div:first-child { max-width: 72rem; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1440px) {
  #portfolio > div > div:first-child { max-width: 80rem; }
}

/* 5) Über mich: Kurz-Box unter der linken Hero-Spalte statt zentriert im Nichts */
@media (min-width: 1024px) {
  #main-content .container.max-w-3xl.hf-left { max-width: 1400px; }   /* Containerbreite, Box linksbündig darin */
  #main-content .container.hf-left > div { max-width: 56rem; }
}

/* 6) Portfolio-Galerie: mehr Spalten, engere Stege, wide-Rolle */
@media (min-width: 1280px) {
  #main-content .hf-gallery { gap: 1.25rem; }
}
@media (min-width: 1536px) {
  #main-content .hf-gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 2200px) {
  #main-content .hf-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 7) Fotobox-Hero: Text + Bild statt Text allein */
.hf-hero-split { display: grid; gap: 2.5rem; align-items: center; }
.hf-hero-figure { position: relative; margin: 0; width: 100%; max-width: 22rem; justify-self: center; }
.hf-hero-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-0.75rem, -0.75rem);
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 1rem;
  pointer-events: none;
}
.hf-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px hsl(30 20% 20% / 0.25);
}
@media (min-width: 1024px) {
  .hf-hero-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .hf-hero-figure { max-width: 30rem; justify-self: end; }
}
@media (min-width: 1440px) {
  .hf-hero-figure { max-width: 34rem; }
}
/* Showcase weiter unten nutzt einen echten Detailausschnitt (fotobox-detail-eukalyptus.*) statt desselben Ganzkörperbilds. */

/* 8) Lese-Seiten (City, Ratgeber, Blog): Lesespalte + Seitenleiste */
/* style.css setzt html,body,#root auf overflow-x:hidden (gegen horizontales Wackeln).
   Auf #root macht das jede position:sticky darunter wirkungslos. clip hält den
   Schutz vor horizontalem Scrollen, erzeugt aber keinen Scroll-Container. */
#root, body { overflow-x: clip; }
.hf-read-aside { font-size: 0.875rem; }
.hf-read-label {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  font-weight: 400;
}
.hf-read-nav ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid hsl(var(--border)); }
.hf-read-nav a {
  display: block;
  margin-left: -1px;
  padding: 0.35rem 0 0.35rem 1rem;
  border-left: 1px solid transparent;
  color: hsl(var(--foreground) / 0.65);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.hf-read-nav a:hover { color: hsl(var(--foreground)); }
.hf-read-nav a[aria-current] { color: hsl(var(--primary)); border-left-color: hsl(var(--primary)); }
.hf-read-nav a:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: 2px; }
.hf-read-cta { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.hf-read-cta p { margin: 0 0 0.9rem; color: hsl(var(--foreground) / 0.7); line-height: 1.5; }
.hf-read-cta .hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.25rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.hf-read-cta .hf-btn:hover { background: hsl(var(--primary) / 0.9); }
.hf-read-cta .hf-btn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }
.hf-read-cta .hf-link {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  color: hsl(var(--foreground) / 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hf-read-cta .hf-link:hover { color: hsl(var(--primary)); }
h2[id] { scroll-margin-top: calc(var(--hf-bar) + 1.5rem); }

@media (max-width: 1279px) {
  .hf-read-aside { display: none; }
}
@media (min-width: 1280px) {
  /* City: Wrapper um die Textsektionen, linksbündig am Hero ausgerichtet */
  .hf-read {
    display: grid;
    grid-template-columns: minmax(0, var(--hf-prose)) 17rem;
    column-gap: clamp(4rem, 6vw, 8rem);
    justify-content: start;
    max-width: 1400px;          /* wie .container, damit Lesespalte und Hero-H1 eine Kante teilen */
    margin-left: auto;
    margin-right: auto;
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .hf-read > section { grid-column: 1; }
  .hf-read > section > .container { max-width: none; margin-left: 0; padding-left: 0; padding-right: 0; }
  /* City-Template zentriert Kicker + H2 über linksbündigem Text; in der Lesespalte
     mit Seitenleiste teilt alles eine linke Kante */
  .hf-read > section > .container > .text-center { text-align: left; }
  .hf-read > section > .container > .text-center .mx-auto { margin-left: 0; }
  /* Ratgeber/Blog: der Artikel selbst ist das Raster, Kopf und Text teilen eine Achse */
  article.hf-read { max-width: var(--hf-content); justify-content: center; }
  article.hf-read > :not(.hf-read-aside) { grid-column: 1; max-width: var(--hf-prose); }
  .hf-read-aside {
    grid-column: 2;
    grid-row: 1 / span 80;
    position: sticky;
    top: calc(var(--hf-bar) + 1.5rem);
    align-self: start;
    max-height: calc(100vh - var(--hf-bar) - 3rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    padding-right: 0.25rem;
  }
  .hf-toc-inline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-read-nav a, .hf-read-cta .hf-btn { transition: none; }
}

/* Nach dem 1280er-Block, damit die breitere Rolle gewinnt */
@media (min-width: 1536px) {
  .hf-read { max-width: var(--hf-wide); }
}
@media (min-width: 1536px) {
  #main-content .container.max-w-3xl.hf-left { max-width: var(--hf-wide); }
}

/* 9) Trefferflächen: Breadcrumb-Home-Icon und Karussell-Steuerung auf mindestens 24 px,
   ohne die sichtbare Größe zu ändern (Pseudo-Element vergrößert nur die Klickfläche). */
nav[aria-label="Breadcrumb"] a[aria-label="Zur Startseite"],
#slider-dots button { position: relative; }
nav[aria-label="Breadcrumb"] a[aria-label="Zur Startseite"]::after,
#slider-dots button::after { content: ""; position: absolute; inset: -8px; }
#slider-dots { gap: 1rem; }
#slider-prev, #slider-next { min-width: 2.75rem; min-height: 2.75rem; }

/* 10) Kundenstimmen: Bewertungssumme (Sterne, 5,0, Rezensionszahl) auf die Achse der
   Kapitelüberschrift statt zentriert im Nichts */
@media (min-width: 768px) {
  section:has(#reviews-grid) .text-center.mb-10 { text-align: left; }
}

/* 11) Kostenrechner: interaktiver Bereich auf großen Monitoren breiter, Lesebereiche moderat */
@media (min-width: 1280px) {
  .mt-seo-section, .mt-share-section { max-width: 52rem; }
  .mt-trust-banner { max-width: 48rem; }
}
@media (min-width: 1536px) {
  .mt-page-container { max-width: 84rem; }
}