/* Matrix Marketing – Startseite als Magazin-Geschichte (Prototyp, Fassung 3 «Kino», 12.10.2026 abends; 14.10.2026: ohne Reihe
   der Regionalausgaben und ohne Landeflug – das Heft bleibt neben den Preisen bzw. blendet unter 1024 px aus, fünf Blätter).
   Ablauf beim Scrollen: Die Regionalausgaben fliegen aus der Tiefe heran, das Heft Zürich kommt nach vorn und füllt die
   Bühne; es wird Seite für Seite durchgeblättert (sechs Blätter, Titelseite bis Rückseite) mit Untertiteln wie in einem Film;
   dann schliesst es sich, wird klein neben der Preistabelle und landet in der Reihe der Regionalausgaben (Computer ab 1024 px).
   Handy unter 600 px: das Heft in Lesegrösse, die Kamera fährt über jede Doppelseite (links, dann rechts), das Blatt wendet
   erst, wenn sie rechts steht. Unter 1024 px blendet das Heft vor den Preisen aus (kein Band über der Tabelle), und die
   Zürcher Titelseite blendet in der Reihe an ihrem Platz ein (ohne Flug).
   Bewegung nur mit transform/opacity, Fortschritt aus scrollY (assets/js/start-story.js). Ohne JavaScript und bei
   «weniger Bewegung»: Einleitung, ein ruhiges Bild mit Titelseite, Doppelseite, Geschäftsempfehlung und Rückseite, die
   Preistabelle und die Reihe der Regionalausgaben stehen einfach untereinander. */

/* ------------------------------------------------------------------ Grundgerüst */
.reise { --band: calc(100vh - var(--kopf-h)); }          /* Höhe der Bühne unter der Kopfzeile */
@supports (height: 1svh) { .reise { --band: calc(100svh - var(--kopf-h)); } }
.reise__lauf { position: relative; }
.reise__kapitel { position: relative; z-index: 1; }

/* Einleitung über der Bühne */
.reise__kopf { margin-top: 8px; }
.reise__fakten { margin-top: 28px; display: grid; border-top: 1px solid var(--linie); }
.reise__fakten div { display: grid; gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--linie); }
.reise__fakten dt { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.reise__fakten dd { font-size: 15.5px; line-height: 1.5; color: var(--elfenbein); text-wrap: pretty; }
@media (min-width: 600px) { .reise__fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); } }
@media (min-width: 1024px) { .reise__fakten { max-width: 62em; } }

/* Ruhiges Bild (nur ohne Bewegung): vier Seiten in einer Reihe, exakt gleich hoch */
.reise__still { margin-top: clamp(32px, 4vw, 56px); }
.reise__still-reihe { display: flex; gap: 2px; align-items: stretch; height: clamp(120px, 20.6vw, 300px); }   /* zwei Doppelseiten, zwei Einzelseiten: passt so bis 1024 px in die Spalte */
.reise__still-reihe img { height: 100%; width: auto; max-width: none; background: #151515; }
.reise__still .legende { margin-top: 12px; }
@media (max-width: 599px) { .reise__still-reihe { height: auto; flex-wrap: wrap; } .reise__still-reihe img { height: 150px; } }

/* Stationen (Text links, nur noch die Preise) */
.kapitel { padding-block: clamp(32px, 6vw, 56px); }
.kapitel__text { container-type: inline-size; }
.kapitel__text > .kicker { margin-bottom: 18px; }
.kapitel__intro { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 30em; text-wrap: pretty; }
.kapitel__aktion { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (max-width: 599px) { .kapitel__aktion .knopf { flex: 1 1 100%; } }
.kapitel .formate { margin-top: 28px; max-width: 36em; }
.format { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.format__icon { flex: none; width: 22px; height: 30px; }
.format__icon .blatt { fill: none; stroke: var(--linie-stark); stroke-width: 1; }
.format__icon .flaeche { fill: var(--gold); opacity: .5; }
.format__icon .band { fill: var(--gold); }
.formate .preise__tabelle tbody th { font-size: 16px; }
.formate .preise__tabelle th, .formate .preise__tabelle td { padding: 16px 0 15px; vertical-align: top; }
.formate .preise__tabelle td { font-size: 16px; padding-top: 18px; }   /* Preis auf der Höhe der Formatzeile (Symbol 30 px), nicht zwischen Format und Notiz */
.formate .preise__tabelle tbody th { padding-right: 16px; }             /* Abstand der Notiz zum Preis */

/* ------------------------------------------------------------------ Computer: Preise links (7 Spalten), Heft rechts (5 Spalten) */
@media (min-width: 1024px) {
  .reise__kapitel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
  .kapitel { grid-column: 1 / span 7; }
  .kapitel__intro { font-size: 17.5px; }
}

/* ------------------------------------------------------------------ Ohne Bewegung: alles steht untereinander */
.reise__buehne, .reise__kino { display: none; }
.reise:not(.reise--bewegt) .reise__kapitel { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--linie); }

/* ------------------------------------------------------------------ Mit Bewegung: Bühne, Wolke, Heft, Untertitel */
.reise--bewegt .reise__still { display: none; }
.reise--bewegt .reise__buehne {
  display: block; position: sticky; top: 0; z-index: 5;
  height: 100vh; height: 100svh;
  pointer-events: none; overflow: visible;
}
.reise--bewegt .reise__kino { display: block; height: calc(var(--band) * 3.73); }   /* 3,73 Bandhöhen (14.10.2026: ein Blatt weniger; vorher 4): der Zeitplan rechnet weiter mit 4 Bandhöhen (start-story.js), endet aber um ein Blatt früher – der Fächer und jedes Blatt behalten ihren Weg */
@media (min-width: 600px) and (max-width: 1023px) { .reise--bewegt .reise__kino { height: calc(var(--band) * 3); } }   /* Tablet: die Preise kommen, sobald das Heft geschlossen ist und ausblendet (vorher stand es rund 900 px allein auf Schwarz; 14.10.2026, Runde 8: 3 statt 3,28 – die erste Preiszeile kommt beim Schliessen ins Bild und schiebt das Heft hinauf, vorher blieben rund 400 px Schwarz) */
/* Ebene über die ganze Bühne (Staub, Wolke, Heft, Untertitel). Unter 1024 px gibt es kein schwarzes Band mehr über den
   Preisen: das Heft blendet vorher aus, Überschrift und Tabelle bleiben frei. Vor dem Anschlag verschiebt das Skript die
   Ebene auf den geglätteten Scrollweg (kein Gummiband beim Mausrad). */
.reise__deck { position: absolute; inset: 0; pointer-events: none; }
.reise--bewegt .reise__deck { will-change: transform; }
.reise--bewegt .reise__kapitel { margin-top: 0; }   /* der Text zieht unter der Bühne durch */
.reise--bewegt .reise__kapitel .kapitel:first-child { padding-top: 24px; }
@media (max-width: 1023px) { .reise--bewegt .reise__lauf { margin-top: 24px; } .buch { top: 44%; } }
.reise--bewegt .kapitel { padding-block: clamp(28px, 5vw, 48px); }
@media (min-width: 1024px) {
  .reise--bewegt .reise__buehne { top: var(--kopf-h); height: var(--band); }
  .reise--bewegt .reise__kapitel { margin-top: calc(var(--band) * -.4); }   /* 14.10.2026 (Gutachten Runde 5): die Preise kommen, während das Heft nach rechts zieht – vorher blieb links rund ein halber Bildschirm leer */
  .reise--bewegt .reise__kapitel .kapitel:first-child { padding-top: 0; }
  .reise--bewegt .kapitel { min-height: var(--band); display: grid; align-content: center; padding-block: 0; }
}

/* Goldstaub (Canvas, nur solange die Bühne im Bild ist; verglimmt zur Landung) */
.reise__staub { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--staub-a, 1); }

/* Wolke (Fassung 7, 13.10.2026 abends): die Regionalausgaben kommen aus der Tiefe, öffnen sich hinter dem Heft zu einem
   weiten Fächer und schliessen sich von aussen nach innen (Lage je Heft aus dem Skript, nur transform/opacity). Ein echter
   3D-Raum (preserve-3d): die Tiefe (translateZ) ordnet die Hefte untereinander, Grösse und Dunkelheit zeigen die
   Entfernung – kein Filter. Jedes Heft ist so breit wie das MEISTERWERK (--b), damit es am Fächer scharf bleibt; weit hinten
   wird es nur verkleinert gezeichnet. Die Entfernung ist eine schwarze Ebene im Heft (::after, --dunkel aus dem Skript),
   nicht die Deckkraft des Hefts: Papier bleibt deckend, nichts scheint durch, wo sich Hefte überlappen. */
.reise__wolke { position: absolute; inset: 0; z-index: 1; perspective: 2200px; perspective-origin: 50% 50%; transform-style: preserve-3d; pointer-events: none; }
.wolke__heft { position: absolute; left: 50%; top: 50%; width: var(--b); margin: 0; opacity: 0; transform: translate3d(-50%, -50%, -40000px); will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wolke__heft img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1698; object-fit: cover; background: #151515; }
.wolke__heft::after { content: ""; position: absolute; inset: 0 -3px 0 0; background: #000; opacity: var(--dunkel, 0); will-change: opacity; pointer-events: none; }   /* die Ferne dunkelt auch die Papierkante */
/* Papierkante rechts (3 px, wie die Seitenkante des MEISTERWERK) und ein weicher Kontaktschatten nach aussen: auf dem schwarzen
   Grund unsichtbar, sichtbar nur, wo das Heft ein anderes überdeckt (je mehr es überdeckt, desto länger der Schatten) – so
   liegen die Hefte aufeinander statt wie eine Collage. Einmal gezeichnet, nur transform/opacity bewegen sie. */
.wolke__heft { box-shadow: 1px 0 0 rgba(232, 225, 210, .5), 2px 0 0 rgba(26, 24, 21, .9), 3px 0 0 rgba(212, 204, 188, .42), -10px 0 18px -6px rgba(0, 0, 0, .72); }
.wolke__heft:nth-child(even) { box-shadow: 1px 0 0 rgba(232, 225, 210, .5), 2px 0 0 rgba(26, 24, 21, .9), 3px 0 0 rgba(212, 204, 188, .42), 10px 0 18px -6px rgba(0, 0, 0, .72); }
@media (max-width: 599px) {   /* Handy: Graubünden liegt vorn in der Mitte – Schatten nach beiden Seiten */
  .wolke__heft[data-heft="2"] { box-shadow: 1px 0 0 rgba(232, 225, 210, .5), 2px 0 0 rgba(26, 24, 21, .9), 3px 0 0 rgba(212, 204, 188, .42), 0 0 18px 0 rgba(0, 0, 0, .7); }
}
/* Lichtzug: ein leiser Glanzstreifen gleitet über den Umschlag, während sich das Heft eindreht (und beim Einordnen zurück);
   das Skript verschiebt nur den Streifen (eigene Ebene), die Dunkelheit der Ferne liegt darüber */
.wolke__glanz, .buch__glanz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wolke__glanz i, .buch__glanz i {
  position: absolute; top: -6%; bottom: -6%; left: 0; width: 56%; transform: translate3d(-100%, 0, 0); will-change: transform;
  background: linear-gradient(104deg, rgba(255, 244, 222, 0) 20%, rgba(255, 244, 222, .08) 38%, rgba(255, 248, 234, .17) 50%, rgba(255, 244, 222, .08) 62%, rgba(255, 244, 222, 0) 80%);
}
/* Kontaktschatten des MEISTERWERK auf die Hefte neben und hinter ihm (nur solange sie da sind; Skript) */
.buch__kontakt { position: absolute; inset: 0; pointer-events: none; transform: translateZ(-4px); box-shadow: 0 0 26px 3px rgba(0, 0, 0, .74); opacity: 0; will-change: opacity; }
/* Name der Region (13.10.2026 abends): fein über der Oberkante und mit dem Heft gedreht, über dem Teil, der neben dem
   inneren Heft zu sehen ist (--name-x aus dem Skript, je nach Fächerweite). Das Skript blendet ihn ein, wenn der Fächer
   steht, und aus, bevor er sich schliesst. Die Schrift ist grösser gesetzt, weil das Heft verkleinert gezeichnet wird (am
   Fächer rund 12–14 px). Handy: unter dem Heft. */
.wolke__name {
  position: absolute; bottom: 100%; left: var(--name-x, 30%); margin-bottom: calc(12px * var(--name-s, 1)); transform: translateX(-50%);
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: calc(17px * var(--name-s, 1)); line-height: 1; letter-spacing: .2em;
  padding-left: .2em; text-transform: uppercase; white-space: nowrap; color: var(--gold); opacity: 0; pointer-events: none;
  will-change: opacity;   /* eigene Ebene: das Ein- und Ausblenden kostet kein Neuzeichnen des Hefts */
}
.wolke__heft:nth-child(even) .wolke__name { left: var(--name-x, 70%); }
/* «Zürich» über dem MEISTERWERK (Computer, Tablet): gleiche Schrift, so gross, wie die anderen Namen im Bild erscheinen */
.buch__name {
  position: absolute; left: 0; top: 0; z-index: 3; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600;   /* über dem Heft (Runde 8: vorher z-index 2 wie das Heft, das danach kommt) */
  font-size: 14px; line-height: 1; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold); opacity: 0; pointer-events: none; will-change: transform, opacity;
}
@media (min-width: 600px) and (max-width: 1023px) { .buch__name { font-size: 12px; letter-spacing: .04em; padding-left: .04em; } }
@media (max-width: 599px) { .buch__name { display: none; } }
@media (min-width: 600px) and (max-width: 1023px) { .wolke__name { font-size: calc(15px * var(--name-s, 1)); letter-spacing: .04em; padding-left: .04em; } }   /* Tablet: der Fächer ist enger (rund 12 px im Bild, eng gesperrt; reicht der Platz neben dem Nachbarn nicht, setzt das Skript den Namen kleiner) */
@media (max-width: 599px) {   /* unter dem sichtbaren Teil jedes Hefts (Lage aus dem Skript), das vordere mittig */
  .wolke__name, .wolke__heft:nth-child(even) .wolke__name { bottom: auto; top: 100%; left: var(--name-x, 36%); margin: 1.15em 0 0; font-size: var(--name-fs, 30px); letter-spacing: .05em; padding-left: .05em; }   /* Grösse aus dem Skript: 12 px im Bild */
  .wolke__heft:nth-child(even) .wolke__name { left: var(--name-x, 64%); }
  .wolke__heft[data-heft="2"] .wolke__name { left: var(--name-x, 50%); }
}

/* Das Heft: Kante des Rückens genau in der Bühnenmitte (das Skript verschiebt zu/offen, klein, Landung).
   --b (Breite des Hefts) steht auf der Bühne: Heft und Wolken-Hefte rechnen damit. */
.reise__buehne { --b: min(44vw, calc(var(--band) * .5 / 1.41421)); }
.buch-spalte { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; }
.buch {
  position: absolute; left: 0; top: 0; width: var(--b); aspect-ratio: 1200 / 1697;
  transform: translateY(-50%); perspective: 2200px; perspective-origin: 50% 42%;
}
@media (min-width: 1024px) { .reise__buehne { --b: min(36vw, calc(var(--band) * .72 / 1.41421)); } }
/* Ziel für die Station Preise: unsichtbare Fläche in den rechten Spalten, dorthin schrumpft das Heft (nur Computer) */
.buch-ziel { position: absolute; z-index: 0; visibility: hidden; }
@media (min-width: 1024px) {
  .buch-ziel { left: calc(58.334% + .584 * var(--spalt)); right: 0; top: 50%; height: calc(var(--band) * .64); transform: translateY(-50%); }   /* ab Spalte 8 des Rasters (die Preise belegen 1–7); das Skript begrenzt die Zielhöhe auch an dieser Breite */
}

/* Untertitel: unten links (Computer) bzw. unten über der Kontaktleiste (Handy); wechseln mit Überblenden */
.reise__untertitel { position: absolute; z-index: 3; left: var(--rand); right: var(--rand); bottom: 84px; min-height: 96px; pointer-events: none; }
@media (min-width: 1024px) { .reise__untertitel { bottom: 8%; right: auto; width: min(34%, 460px); min-height: 120px; } }
.untertitel { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.untertitel.is-aktiv { opacity: 1; transform: none; }
.untertitel--legende .legende__link { white-space: nowrap; min-height: 0; vertical-align: baseline; }
@media (pointer: coarse) { .untertitel--legende .legende__link { padding-block: 12px; margin-block: -12px; } }
.untertitel--legende.is-aktiv .legende__link { pointer-events: auto; }   /* nur solange die Legende steht */
.untertitel .kicker { margin-bottom: 8px; }
.untertitel__text { font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; max-width: 34em; }
.untertitel__preis { margin-top: 8px; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--elfenbein); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .untertitel__text { font-size: 16px; } .untertitel__preis { font-size: 21px; } }
@media (max-width: 1023px) { .untertitel { text-align: center; } .untertitel__text { margin-inline: auto; } }

.reise + .zahlen { padding-top: var(--abstand); }

/* ------------------------------------------------------------------ Das Heft (Fassung 4): sechs Blätter am Rücken links, jedes mit
   genau einer Fläche vorn und einer hinten (vorher zwei Hälften je Seite: das gab eine Naht mitten auf jeder Seite). Bund und
   Aussenkante sind Verläufe auf der ganzen Fläche. Winkel, Tiefe und Licht je Blatt setzt das Skript (--licht: Abdunkeln im
   Profil). Darunter fest die letzte rechte Seite (Rückseite). Seitenbilder als Hintergründe (Klassen bild-*), geladen mit
   «is-geladen»; Lage im Bild: .lage-einzel (ganze Seite), .lage-links / .lage-rechts (Hälfte einer Doppelseite). */
.buch__block { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
/* Goldener Schein unter dem Heft: wird beim Aufschlagen nach links breiter (--offen auf dem Element selbst, nur transform) */
.buch__schein {
  position: absolute; left: -112%; width: 224%; top: 98%; height: 12%; pointer-events: none; transform-origin: 100% 50%;
  background: radial-gradient(closest-side, rgba(194, 181, 155, .17), rgba(194, 181, 155, 0));
  transform: translateZ(-3px) scaleX(calc((1.24 + var(--offen, 0)) / 2.24));
}
.buch__fest { position: absolute; inset: 0; transform-style: preserve-3d; }
.seite--fest { position: absolute; inset: 0; background-color: #151515; background-repeat: no-repeat; }
.seite--fest::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 14%); }
.seite--aussen {
  position: absolute; inset: 0; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #1d1b18, #121110 70%);
}
.seite--aussen::after {
  content: "MEISTERWERK"; position: absolute; left: 0; right: 0; bottom: 7%; text-align: center;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 7px; letter-spacing: .32em; color: var(--gold); opacity: .8;
}
.blatt { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.flaeche { position: absolute; inset: 0; background-color: #151515; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flaeche--hinten { transform: rotateY(180deg); }
.blatt > .flaeche, .blatt > .buch__licht { opacity: var(--kante, 1); }   /* um 90° durchsichtig (Skript): keine Haarlinie über und unter dem Heft */
/* Landung (14.10.2026): im letzten Teil des Flugs wird das Heft flach wie die Titelseite in der Reihe (--flach 0…1, Skript) */
.blatt > .buch__licht { opacity: calc(var(--kante, 1) * (1 - var(--flach, 0))); }
.flaeche::after { content: ""; position: absolute; inset: 0; opacity: var(--licht, 0); pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .34) 28%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .07) 86%,
                              rgba(255, 238, 210, .12) 95%, rgba(0, 0, 0, .14)); }
.flaeche--hinten::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .34) 28%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .07) 86%,
                              rgba(255, 238, 210, .12) 95%, rgba(0, 0, 0, .14)); }
/* Bund (Schatten am Rücken, 11 % der Seite) und Aussenkante (feines Licht) – vorn liegt der Rücken links, hinten rechts */
.flaeche::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--flach, 0)); }
.flaeche--vorn::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, .06) 5%, rgba(0, 0, 0, 0) 11%),
              linear-gradient(270deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12) .6%, rgba(0, 0, 0, 0) 2%);
}
.flaeche--hinten::before {
  background: linear-gradient(270deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, .06) 5%, rgba(0, 0, 0, 0) 11%),
              linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12) .6%, rgba(0, 0, 0, 0) 2%);
}
.lage-einzel { background-size: 100% 100%; background-position: 0 0; }
.lage-links { background-size: 200% 100%; background-position: 0 0; }
.lage-rechts { background-size: 200% 100%; background-position: 100% 0; }
.is-geladen .bild-titel { background-image: url("/assets/img/titel/titel-ausgabe-zuerich-1200.webp?v=8b3f52cf40"); }   /* Runde 10: 1200 statt 900 px – die Titelseite war neben den Preisen weicher als die Hero-Titel (1440 @2, Handy quer) */
.is-geladen .bild-stierli { background-image: url("/assets/img/magazin/portraet-stierli-holzbau-1376.webp?v=7b3d236937"); }
.is-geladen .bild-wasescha { background-image: url("/assets/img/magazin/portraet-maura-wasescha-1376.webp?v=1c78131b04"); }
.is-geladen .bild-tinner { background-image: url("/assets/img/referenzen/inserat-tinner-heizungen-960.webp?v=7475a0c82d"); }
.is-geladen .bild-tiptop { background-image: url("/assets/img/referenzen/inserat-tip-top-gipser-960.webp?v=8e28dde7e0"); }
.is-geladen .bild-fors { background-image: url("/assets/img/magazin/portraet-fors-1376.webp?v=47a95568b1"); }
.is-geladen .bild-homes { background-image: url("/assets/img/magazin/portraet-homes-styles-1376.webp?v=d229a03d20"); }
.is-geladen .bild-grottoria { background-image: url("/assets/img/referenzen/inserat-grottoria-weine-960.webp?v=24ab4bc3e8"); }
.buch__licht { position: absolute; inset: 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(.4px);
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .1) 1.4%, rgba(0, 0, 0, .07) 2.8%, rgba(0, 0, 0, 0) 5%,
                              rgba(0, 0, 0, 0) calc(100% - 2px), rgba(0, 0, 0, .18)); }
.buch__kanten { position: absolute; top: .8%; bottom: .8%; width: 5px; pointer-events: none; transform-style: preserve-3d;
  background: repeating-linear-gradient(90deg, rgba(236, 231, 220, .26) 0 1px, rgba(0, 0, 0, 0) 1px 2px); }
.buch__kanten--rechts { left: 100%; transform-origin: 0 50%; transform: translateZ(1px) scaleX(var(--rest, 1)); }
.buch__kanten--links { right: 100%; transform-origin: 100% 50%; transform: translateZ(1px) scaleX(var(--gedreht, 0)); }
.buch__wurf { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 35%, rgba(0, 0, 0, 0) 70%); }

/* ------------------------------------------------------------------ In drei Schritten: Goldlinie, die sich zeichnet; Goldpunkte statt Nummern */
.schritte--linie { position: relative; }
.schritte--linie::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gold);
  transform: scaleY(0); transform-origin: top center; transition: transform 1.6s var(--ease) .2s;
}
.schritte--linie.is-linie::before { transform: scaleY(1); }
@media (min-width: 900px) {
  .schritte--linie::before { right: 0; bottom: auto; width: auto; height: 1px; transform: scaleX(0); transform-origin: left center; }
  .schritte--linie.is-linie::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { .schritte--linie::before { transition: none; transform: none; } }
.ablauf__mehr { margin-top: clamp(28px, 3.5vw, 44px); }
.schritte--linie .schritt__nr { position: relative; font-size: 0; color: transparent; width: 11px; height: 11px; margin-bottom: 28px; }
.schritte--linie .schritt__nr::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
@media (min-width: 900px) { .schritte--linie .schritt__nr { margin-top: -37px; margin-bottom: 36px; } }
@media (max-width: 899px) { .schritte--linie .schritt__nr { margin-left: -5px; } }

/* ------------------------------------------------------------------ Dazu aus unserem Grafikstudio: vier Leistungen in einer Reihe, exakt bündig */
.studio { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spalt); }
/* Jede Karte belegt vier Zeilen des Rasters (Bild, Name, Text, Preis); li und Link reichen sie als Subgrid durch: Namen und
   Preiszeilen einer Kartenreihe stehen exakt bündig (vorher lag das Subgrid auf dem Link, Rasterkind war aber das li).
   Abstand zwischen den Kartenreihen als margin, ein row-gap gälte auch innerhalb der Karten. */
.studio > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; min-width: 0; }
.studio > li:nth-child(n+3) { margin-top: 40px; }
.studio__link { position: relative; display: grid; grid-row: span 4; grid-template-rows: auto auto 1fr auto; grid-template-rows: subgrid; row-gap: 0; min-width: 0; }
.studio__bild { width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; background: #151515; }
.studio__name { margin-top: 18px; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: clamp(16px, .8rem + .55vw, 20px); line-height: 1.2; letter-spacing: -.015em; color: var(--elfenbein); text-wrap: balance; transition: color .35s var(--ease); }
.studio__text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--grau); text-wrap: pretty; }
.studio__preis { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; color: var(--elfenbein); font-variant-numeric: tabular-nums; }
.studio__preis .pfeil { width: 28px; height: 12px; color: var(--gold); flex: none; transition: transform .35s var(--ease); }
.studio__link:hover .studio__name { color: var(--gold); }
.studio__link:hover .studio__preis .pfeil { transform: translateX(5px); }
/* Runde 9 (nach-start): Kachel Webdesign mit leisem Link auf den Partner Lucravis (wie /arbeiten). Ein Link im Link wäre ungültig:
   Die Kachel ist hier ein div, der Name ist der Link und deckt mit ::after die ganze Kachel ab, «Lucravis» liegt darüber.
   Aussehen, Hover und Fokusrahmen wie bei den anderen drei Kacheln. */
.studio__ziel::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.studio__ziel:focus-visible { outline: none; }
.studio__ziel:focus-visible::after { outline: 2px solid var(--gold); outline-offset: 3px; }
.studio__partner .partner__link { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .studio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .studio > li:nth-child(n+3) { margin-top: 0; }
  .studio__text { font-size: 15px; }
}
@media (max-width: 359px) {   /* sehr schmale Handys: eine Karte je Reihe (zwei Spalten wären je 130 px) */
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio > li:nth-child(n+2) { margin-top: 40px; }
}
@media (hover: hover) and (pointer: fine) {
  .studio__bild { transition: transform .6s var(--ease), filter .6s var(--ease); }
  .studio__link:hover .studio__bild { transform: translate3d(0, -4px, 0); filter: brightness(1.07); }
}
.js [data-reveal] .studio__bild { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .15s, scale 1.6s var(--ease) .15s, transform .6s var(--ease), filter .6s var(--ease); }
.js [data-reveal].is-sichtbar .studio__bild { clip-path: inset(0); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .studio__bild { scale: 1.06; }
  .js [data-reveal].is-sichtbar .studio__bild { scale: 1; }
}
.studio__mehr { margin-top: clamp(28px, 3.5vw, 44px); }

/* Feinschliff Kino: Heft etwas kleiner, Untertitel mittig unter dem Heft (Computer), Kicker und Preis in einer Zeile */
@media (min-width: 1024px) {
  /* Fluchtpunkt tiefer und das Heft etwas höher (13.10.2026): das umschlagende Blatt kommt auf uns zu und wuchs vorher bis zu
     26 px über die Kickerzeile der Legende; jetzt wächst es vor allem nach oben, wo unter dem Kopf Platz ist */
  .reise__buehne { --b: min(34vw, calc(var(--band) * .66 / 1.41421)); }
  .buch { perspective-origin: 50% 72%; }
  .buch-spalte { top: calc(50% - 10px); }
  .reise__untertitel { left: 50%; right: auto; bottom: 22px; width: min(60%, 640px); min-height: 84px; transform: translateX(-50%); text-align: center; }
  .untertitel__text { margin-inline: auto; font-size: 15.5px; max-width: 40em; }
}
/* Grosse Bildschirme (1920 × 1080 und höher): das Heft füllt die Bühne besser (70 statt 66 % der Bandhöhe; Unterkante bleibt
   über der Legende, auch wenn das umschlagende Blatt nach unten wächst) */
@media (min-width: 1600px) and (min-height: 1000px) {
  .reise__buehne { --b: min(34vw, calc(var(--band) * .67 / 1.41421)); }   /* 14.10.2026 (Gutachten Runde 6): 67 statt 78 % und 10 px tiefer – bei 78 % stiess jedes kippende Blatt (Stierli, Deckelschluss) an die Kopfleiste und unten an den Untertitel; gemessen in 20-px-Schritten bleiben jetzt oben und unten mindestens 12 px frei */
  .buch-spalte { top: 50%; }
}
.untertitel .kicker { display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.untertitel__preis { display: inline; margin: 0 0 0 14px; font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--elfenbein); vertical-align: baseline; }
@media (min-width: 1024px) { .untertitel__preis { font-size: 14px; } }

/* Untertitel: Kicker und Preis dürfen umbrechen (320 px: «Geschäftsempfehlung» + Preis passten nicht in eine Zeile) */
.untertitel .kicker { flex-wrap: wrap; justify-content: center; row-gap: 2px; max-width: 100%; }
@media (min-width: 1024px) { .untertitel .kicker { justify-content: center; } }

/* Untertitel: der alte verschwindet schnell, der neue kommt danach (keine zwei Texte uebereinander) */
.untertitel { transition: opacity .18s var(--ease), transform .4s var(--ease); }
.untertitel.is-aktiv { transition: opacity .4s var(--ease) .2s, transform .5s var(--ease) .2s; }
.reise__sprung { margin-top: 18px; }
@media (min-width: 1024px) { .reise__kopf .abschnitt__kopf > .reise__sprung { grid-column: 1 / -1; } }   /* vorher eine Rasterspalte: ein Wort je Zeile */

/* Handy unter 600 px: das Heft in Lesegrösse. Eine Seite ist so breit wie der Bildschirm (ohne Rand) und steht zwischen
   Kopfzeile und Untertitel; die Kamera fährt über die Doppelseite, die andere Seite liegt ausserhalb des Bildes. Das Kino ist
   seit 14.10.2026 kürzer (rund ein Daumenwisch je Doppelseite), die Bühne schneidet seitlich ab (kein seitliches Scrollen). */
@media (max-width: 599px) {
  .reise--bewegt .reise__kino { height: calc(var(--band) * 1.8); }   /* 1,8 Bandhöhen (14.10.2026, Runde 9: die Show wieder so ausführlich wie in Runde 6 – Runde 8 hatte 1,1; davor 2,75 und 5,9): der Zeitplan am Handy rechnet mit der Länge des Kinos (start-story.js); der Fächer steht schon beim Anschlag, jede Doppelseite liegt ganz im Bild (keine Kamerafahrt) */
  .reise--bewegt .reise__buehne { overflow-x: clip; margin-inline: calc(-1 * var(--rand)); }   /* Runde 8: die Bühne reicht bis an den Bildrand – die Doppelseite steht auf der ganzen Breite (vorher im Satzspiegel, rund 345 px) */
  .buch-spalte { top: calc(var(--kopf-h) + 12px + (var(--band) - 214px) / 2); }
  .reise__buehne { --b: min(calc(100vw - 2 * var(--rand)), calc((var(--band) - 214px) / 1.41421)); }
  .buch { perspective-origin: 0 42%; }   /* Fluchtpunkt in der Bildmitte (die Kamera zeigt immer eine Seite mittig) */
}
/* Handy quer (600–1023 px breit, höchstens 560 px hoch): das Heft lag über dem Untertitel. Heft kleiner und höher, Untertitel
   an den unteren Rand (unten gibt es hier keine Kontaktleiste) */
@media (min-width: 600px) and (max-width: 1023px) and (max-height: 560px) {
  .reise__buehne { --b: calc((100vh - 190px) / 1.41421); }
  .reise--bewegt .buch-spalte { top: calc((100vh - 100px) / 2); }
  .reise__untertitel { bottom: 12px; min-height: 0; }
  .untertitel__text { font-size: 14px; line-height: 1.45; }
}
@supports (height: 1svh) {
  @media (min-width: 600px) and (max-width: 1023px) and (max-height: 560px) {
    .reise__buehne { --b: calc((100svh - 190px) / 1.41421); }
    .reise--bewegt .buch-spalte { top: calc((100svh - 100px) / 2); }
  }
}
/* Kurze Handys (320 × 568 bis 360 × 740): Untertitel etwas kleiner, damit auch der längste (zwei Zeilen Kicker) unter dem Heft bleibt */
@media (max-width: 599px) and (max-height: 760px) {
  .untertitel__text { font-size: 13.5px; line-height: 1.4; }
  .untertitel .kicker { margin-bottom: 4px; }
}
/* Tablet hochkant (13.10.2026 nachts): Heft und Fächer mittig zwischen Kopf und Legende statt in der Bühnenmitte – vorher
   blieben über dem Fächer rund 330 px leer (820 × 1180). --leg-u: Abstand der Legende vom unteren Rand, 112 px ihre Höhe.
   (14.10.2026: die Regeln für den offenen Cookie-Hinweis sind entfernt – die Website hat keinen mehr.) */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 700px) {
  .reise { --leg-u: 84px; }
  .reise--bewegt .buch-spalte { top: calc((var(--kopf-h) + 100% - var(--leg-u) - 112px) / 2); }
}

/* R8-stimmen */
/* 14.10.2026 (Gutachten Runde 7): Kundenstimmen – am Handy das grosse Zitat kleiner (vorher 27 px kursiv, neun Zeilen);
   am Computer steht der Titel über die ganze Breite und das Siegel neben dem Zitat (vorher oben rechts eine Leerfläche) */
@media (max-width: 599px) { .stimme--gross blockquote p { font-size: 1.3rem; line-height: 1.3; } }
@media (min-width: 1024px) {
  .stimmen__titel { grid-column: 1 / -1; }
  .siegel { grid-row: 2; align-self: center; }
}
/* Schluss: nach «Lieber direkt» kein leeres Band mehr vor dem Fuss (vorher 104–176 px) */
.schluss { padding-bottom: clamp(56px, 5vw, 80px); }

/* R8-szene */
/* 14.10.2026 (Gutachten Runde 7): Magazin-Szene am Handy straffer – der Fächer kommt näher an «Direkt zu den Formaten und
   Preisen» (vorher rund 230 px Schwarz dazwischen), Heft etwas tiefer und Legende etwas höher (Abstand dazwischen rund halb
   so gross), die Preise kommen gleich nach dem Deckelschluss (start-story.js: das Heft zieht mit ihnen hinauf) */
@media (max-width: 599px) {
  .reise--bewegt .reise__lauf { margin-top: -96px; }
  /* 14.10.2026 (Gutachten Runde 8): Legende höher (Unterkante 84 px + 10 % der Bandhöhe über dem Rand), Heft mittig
     zwischen Kopf und Legende – über und unter der Doppelseite je rund 120 px statt 250 bzw. 180 px; die Preise kommen
     mit dem Deckelschluss */
  .buch-spalte { top: calc(var(--kopf-h) + (var(--band) * .9 - 184px) / 2); }
  .reise__untertitel { bottom: calc(84px + var(--band) * .1); }
  .reise--bewegt .reise__kapitel { margin-top: -106px; }   /* Runde 9: mit dem längeren Kino kommt die erste Preiszeile wie in Runde 8 genau beim Deckelschluss ins Bild */
}
/* Tablet hochkant (Runde 8): die Bühne beginnt näher am Text darüber (vorher rund 280 px Schwarz vor dem Fächer) */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 700px) {
  .reise--bewegt .reise__lauf { margin-top: -110px; }
}
/* Grosse Bildschirme ab 1600 px (Runde 8): die Preise erreichen ihren Platz, wenn das Heft rechts ankommt; bis dahin stehen
   sie an ihrem Platz und blenden ein (start-story.js) – vorher kam die Überschrift allein unten links herauf */
@media (min-width: 1600px) {
  .reise--bewegt .reise__kapitel { margin-top: calc(var(--band) * -.78); }
}

/* 17.10.2026 (Gutachten Runde 9): Magazin-Szene auf grossen Bildschirmen – das Heft stand klein in der Mitte (links und
   rechts je ein Drittel leer), die Legende war sehr klein. Ab 1600 × 1000 px: Heft 76 statt 67 % der Bandhöhe (1920 × 1080:
   535 statt 472 px breit); die Perspektive ist flacher (4200 statt 2200 px, das Skript liest sie), damit das kippende Blatt
   trotz grösserem Heft oben unter dem Kopf und unten über der Legende bleibt. Legende grösser und breiter; ab 1280 px etwas
   grösser. Ablauf und Schritte der Szene bleiben gleich. */
@media (min-width: 1280px) {
  .untertitel__text { font-size: 17px; }
  .untertitel .kicker { font-size: 13px; }
  .untertitel__preis { font-size: 15px; }
}
@media (min-width: 1600px) and (min-height: 1000px) {
  .reise__buehne { --b: min(34vw, calc(var(--band) * .76 / 1.41421)); }
  .buch { perspective: 4200px; }
  .buch-spalte { top: calc(50% - 20px); }
  .reise__untertitel { bottom: 18px; width: min(60%, 820px); }
  .untertitel__text { font-size: 19px; line-height: 1.45; }
  .untertitel .kicker { font-size: 14px; }
  .untertitel__preis { font-size: 16px; }
}

/* 17.10.2026 (Gutachten Runde 10) ------------------------------------------------------------------ */
/* Magazin-Szene, Computer 1280–1599 px: die Preise liegen so hoch wie ab 1600 px und blenden mit dem Heft ein, während es nach
   rechts zieht (start-story.js: M.blende) – vorher blieb oben links rund 540 px Schwarz und «Jedes Format …» stand allein unten
   links. Kino, Blätter und Heft bleiben gleich (nichts gekürzt). 1024–1279 px wie bisher: dort ist die Preisspalte so breit,
   dass das gleitende Heft sie lange überdecken würde. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .reise--bewegt .reise__kapitel { margin-top: calc(var(--band) * -.78); }
}
/* Legende «Regionalausgaben»: der Link «Ihre Region fehlt? Platz sichern» in der Grösse des Satzes (vorher 14 px neben 17–19 px
   in derselben Zeile). Ab 1600 × 1000 px darf der Satz breiter laufen: zwei statt drei Zeilen, die Legende beginnt tiefer und
   hält mehr Abstand zum Fächer. */
.untertitel--legende .legende__link { font-size: inherit; }
@media (min-width: 1600px) and (min-height: 1000px) {
  .reise__untertitel { width: min(64%, 960px); }
  .untertitel--legende .untertitel__text { max-width: 48em; }
}
/* Startseite, Hauptüberschrift: der Doppelpunkt nach «Sirnach bei Wil» ist nur für Screenreader und Suchmaschinen da. Er bleibt
   im Textfluss (eingebettet statt eigener Block wie .sr) – sonst lasen Google und Screenreader «Sirnach bei Wil : Wir machen …» */
.sr-zeichen { display: inline-block; width: 1px; height: 1px; margin-right: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Handy quer (bis 560 px hoch): der Hero ist straffer, der Hauptknopf steht im ersten Bild (vorher erst nach dem Scrollen,
   844 × 390: Unterkante 465 px). Titel etwas kleiner und in drei Zeilen («in ihrer Region sichtbar.» in einer), Abstände enger. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 640px) {
  .hero { padding-top: calc(var(--kopf-h) + 14px); }
  .hero__h1 > .kicker { row-gap: 2px; }
  .hero__titel { font-size: clamp(1.6rem, .35rem + 2.9vw, 2.1rem); margin-top: 12px; }
  .hero__titel .zeile { display: inline; white-space: nowrap; }
  .hero__lead { margin-top: 12px; line-height: 1.5; }
  .hero__aktion { margin-top: 16px; }
}
@media (orientation: landscape) and (max-height: 400px) and (min-width: 640px) {   /* 667 × 375: Knopf sonst 9 px unter dem Rand */
  .hero { padding-top: calc(var(--kopf-h) + 8px); }
  .hero__lead { font-size: 14px; }
}