/* ==========================================================================
   Olaf's Bakery — olafs-bakery.ch
   Version „Weiss" · Stylesheet v0.7 · 2. Oktober 2026 · Versuch

   Weiss ist der Hintergrund. Creme und Sand kommen in Elementen und Formen
   vor (Karten, Knöpfe, Rahmen, Ringe). Hellblau und Schiefer dürfen Flächen
   sein, aber Weiss dominiert. Schlicht, ehrlich, hochwertig, geradlinig.

   Zwei Schriften statt vier: Inter für alles (Titel leicht und gross, kleine
   Zeilen in Versalien gesperrt) und Caveat für die handschriftlichen Notizen
   in Hellblau oder Schiefer — die bleiben als persönliche Note.

   Lesezeichen oben rechts: das „O" der Bildmarke (Logo-Symbol, als Vektor
   nachgezeichnet). Beim Scrollen färbt sich nur der Strich des Logos ein,
   von Sand zu Schiefer, entlang der Linie bis in die Rolle (main.js).
   Darunter liegt weiterhin das Sternmenü. Dieselbe Bildmarke steht klein
   über jedem Kapitel.

   Schriftgrössen v0.6: eine feste Treppe (Tokens --gr-*), jede Grösse hat
   eine Aufgabe. Hervorgehoben wird nicht mit Grösse, sondern grafisch:
   Hellblau-Markierung hinter dem Wort, Hellblau-Linie vor dem Zitat.

   Weggelassen gegenüber v0.4: die wandernde Schnecke, die Strichzeichnungen
   in den Kapitelköpfen, Kritzel. Behalten: Notizen, QR-Kleber (gerade
   gestellt), die Hütte bei Wo & Wann, die Kamera beim Instagram-Hinweis,
   Hellblau-Zeiger, Kacheln mit Handschrift beim Überfahren.
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --weiss:        #FFFFFF;
  --creme:        #F4EEDF;
  --creme-tief:   #EBE3CF;
  --sand:         #DCC898;
  --sand-tief:    #C9B37E;
  --schiefer:     #414C4A;
  --schiefer-tief:#2F3937;
  --nacht:        #1F2624;
  --akzent:       #414C4A;   /* war Zimt #AF6A43 - 06.10.2026 auf Schiefer umgestellt */
  --akzent-tief:  #2F3937;   /* war Zimt-dunkel #94572F */
  --blau:         #AFD2DC;
  --blau-text:    #3F7684;
  --linie:        rgba(65, 76, 74, .16);
  --linie-stark:  rgba(65, 76, 74, .4);
  --linie-hell:   rgba(255, 255, 255, .25);

  /* Schrifttreppe — sieben Stufen, mehr gibt es nicht */
  --gr-etikett: .72rem;                                         /* Versalien, gesperrt */
  --gr-klein:   .875rem;                                        /* Hinweise, Zeiten */
  --gr-text:    1.0625rem;                                      /* Fliesstext 17 px */
  --gr-lead:    clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);    /* Vorspann 18–21 px */
  --gr-h3:      clamp(1.25rem, 1.1rem + .5vw, 1.5rem);          /* 20–24 px */
  --gr-h2:      clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);        /* 28–40 px */
  --gr-h1:      clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);        /* 36–60 px */
  --gr-hand:    clamp(1.35rem, 1.2rem + .5vw, 1.6rem);          /* Caveat wirkt kleiner */

  --text:  'Inter', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
  --hand:  'Caveat', 'Segoe Print', cursive;

  --mass: 1200px;
  --mass-eng: 720px;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --luft: clamp(4.5rem, 10vw, 9rem);
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --ecke: 4px;
}

/* --------------------------------------------------------------------------
   2. Grundlagen
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--schiefer); font-family: var(--text); font-size: var(--gr-text); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

h1, h2, h3, .serif { font-family: var(--text); font-weight: 300; line-height: 1.18; letter-spacing: -.012em; margin: 0 0 .5em; color: var(--schiefer-tief); text-wrap: balance; }
h1 { font-size: var(--gr-h1); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); font-weight: 400; line-height: 1.3; }
em { font-style: normal; color: var(--blau-text); }
.dunkel em, .buehne em { color: var(--blau); }

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--sand-tief); transition: color .25s ease; }
a:hover { color: var(--akzent-tief); text-decoration-color: currentColor; }
img, video, svg { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
::selection { background: var(--sand); }

/* Etikett: kleine Zeile in Versalien, gesperrt */
.etikett { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .26em; text-transform: uppercase; color: var(--akzent-tief); margin: 0 0 1rem; }
.dunkel .etikett { color: var(--sand); }
.nr { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .24em; text-transform: uppercase; color: var(--akzent-tief); }

/* Kapitelkopf: eine kurze Sandlinie, dann Etikett, Titel, Text */
.kapitel__kopf { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.kapitel__kopf h2, .kapitel__kopf p { margin-inline: auto; }
.kapitel__kopf > p:not(.etikett) { font-size: var(--gr-lead); line-height: 1.55; max-width: 40em; }
/* Ornament: die Bildmarke klein in Sand, mit Abstand über dem Etikett */
.ornament { display: block; width: 1.5rem; height: auto; aspect-ratio: 700 / 741; margin: 0 auto 1.6rem; fill: var(--sand-tief); overflow: visible; }
.dunkel .ornament { fill: var(--sand); }

/* Knöpfe: gerade Kanten, Creme oder Zimt */
.knopf { display: inline-block; font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 1em 2.1em; border: 1px solid var(--sand-tief); color: var(--schiefer-tief); background: var(--creme); border-radius: var(--ecke); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.knopf:hover { background: var(--schiefer-tief); border-color: var(--schiefer-tief); color: var(--weiss); }
.knopf--voll { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.knopf--voll:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); color: var(--weiss); }
.dunkel .knopf { background: transparent; border-color: rgba(255, 255, 255, .6); color: var(--weiss); }
.dunkel .knopf:hover { background: var(--weiss); color: var(--schiefer-tief); }

/* Strichzeichnungen (Hütte, Kamera, Pfeil, Häkchen, Herz) */
svg.strich { stroke: var(--schiefer); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.dunkel svg.strich { stroke: var(--sand); }
.zeichnung { fill: none; stroke-width: var(--strich, 3); stroke-linecap: round; stroke-linejoin: round; }
.zeichnet { stroke-dasharray: 1; stroke-dashoffset: 1; }
.zeichnet.ist-sichtbar { animation: zeichnen 1.6s var(--kurve) forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* Handschrift — die persönliche Note, in Hellblau oder Schiefer */
.notiz { font-family: var(--hand); font-weight: 500; font-size: var(--gr-hand); line-height: 1.1; color: var(--blau-text); display: inline-block; transform: rotate(var(--dreh, -2deg)); margin: 0; max-width: 24ch; }
.notiz.zeigt.ist-sichtbar { transform: rotate(var(--dreh, -2deg)); }
.notiz--schiefer { color: var(--schiefer); }
.dunkel .notiz, .buehne .notiz { color: var(--blau); }
.notiz__symbol { display: inline-block; width: 1.1em; height: 1em; vertical-align: -.1em; stroke-width: 6; }
.notiz--kleber { position: absolute; z-index: 2; background: var(--creme); color: var(--blau-text); padding: .15em .65em; border: 1px solid var(--sand); border-radius: var(--ecke); }
.notiz--pfeil { position: relative; padding-left: 3.4rem; }
.notiz--pfeil svg { position: absolute; left: 0; top: -.4rem; width: 3rem; stroke-width: 4; }
/* Hervorhebung: eine gerade Hellblau-Markierung hinter dem Wort, keine grössere Schrift */
.markiert, .zitat b { background: linear-gradient(180deg, transparent 55%, rgba(175, 210, 220, .7) 55%, rgba(175, 210, 220, .7) 88%, transparent 88%); padding-inline: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.markiert::after { content: none; }

/* Der Zeiger: Hellblau-Punkt, nur mit Maus */
html.hat-zeiger, html.hat-zeiger * { cursor: none !important; }
.zeiger { position: fixed; left: 0; top: 0; z-index: 200; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(175, 210, 220, .45); box-shadow: inset 0 0 0 1px rgba(63, 118, 132, .5); pointer-events: none; opacity: 0; transition: opacity .3s ease, width .35s var(--kurve), height .35s var(--kurve), margin .35s var(--kurve), background .35s ease; will-change: transform; }
.zeiger.ist-da { opacity: 1; }
.zeiger.ist-gross { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(175, 210, 220, .3); }
.zeiger.ist-klein { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: rgba(63, 118, 132, .8); }
.zeiger-punkt { position: fixed; left: 0; top: 0; z-index: 201; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--blau-text); pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.zeiger-punkt.ist-da { opacity: .95; }

/* --------------------------------------------------------------------------
   3. Bewegung
   -------------------------------------------------------------------------- */
.zeigt { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
.zeigt.ist-sichtbar { opacity: 1; transform: none; }
.staffel > * { transition-delay: calc(var(--i, 0) * 110ms); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigt { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zeichnet { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
}

/* --------------------------------------------------------------------------
   4. Kopf — Marke zentriert, darunter die Navigation auf einer Haarlinie
   -------------------------------------------------------------------------- */
.mass { width: 100%; max-width: var(--mass); margin-inline: auto; padding-inline: var(--rand); }
.mass--eng { max-width: var(--mass-eng); }

.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: rgba(255, 255, 255, .96); transition: box-shadow .4s ease; }
.kopf__innen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 1rem; padding-block: 1.2rem .1rem; transition: padding .4s var(--kurve); }
.kopf__marke { grid-column: 2; justify-self: center; }
.kopf__marke img { height: clamp(3.2rem, 5.5vw, 4.6rem); width: auto; transition: height .4s var(--kurve); }
.kopf__navi { grid-column: 1 / -1; border-top: 1px solid var(--linie); margin-top: 1rem; }
.kopf__navi ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(1.2rem, 2.6vw, 2.6rem); margin: 0; padding: .9rem 0 .8rem; }
.kopf__navi a { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--schiefer); white-space: nowrap; }
.kopf__navi a:hover, .kopf__navi a[aria-current="page"] { color: var(--akzent-tief); }
.navi-insta { display: inline-flex; align-items: center; gap: .45em; }
.navi-insta svg { flex: none; width: 1.3em; height: 1.1em; stroke: currentColor; --strich: 7; }

/* Lesezeichen: das „O" — Umriss Schiefer, Füllung Hellblau steigt mit dem Lesen */
.lesezeichen { width: 2.1rem; height: auto; aspect-ratio: 700 / 741; overflow: visible; }
.lesezeichen .grund { fill: var(--sand); transition: fill .3s ease; }
.lesezeichen .strich-fuellung { fill: none; stroke: var(--schiefer); stroke-width: 120; stroke-linecap: square; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.stern { grid-column: 3; grid-row: 1; justify-self: end; position: relative; z-index: 5; }
.stern__nabe { display: grid; justify-items: center; gap: .2rem; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--schiefer); }
.stern__wort { font-family: var(--text); font-weight: 500; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.stern__nabe:hover .lesezeichen .grund, .stern.ist-offen .lesezeichen .grund { fill: var(--blau); }
.stern__strahlen { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.stern__strahlen li { position: absolute; left: 0; top: 0; --x: 0px; --y: 0px; --winkel: 0deg; --laenge: 0px; transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i, 0) * 45ms), opacity .3s ease calc(var(--i, 0) * 45ms); }
.stern__strahlen li::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--laenge); height: 1px; background: var(--linie-stark); transform-origin: 0 50%; transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y))) rotate(var(--winkel)) scaleX(0); transition: transform .45s var(--kurve) calc(var(--i, 0) * 45ms); }
.stern__strahlen a { display: block; white-space: nowrap; font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--schiefer-tief); background: var(--creme); border: 1px solid var(--sand); padding: .55em 1.1em; border-radius: var(--ecke); box-shadow: 0 6px 20px rgba(31, 38, 36, .12); }
.stern__strahlen a:hover, .stern__strahlen a:focus-visible { background: var(--blau); border-color: var(--blau); }
.stern.ist-offen .stern__strahlen { pointer-events: auto; }
.stern.ist-offen .stern__strahlen li { transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1); opacity: 1; }
.stern.ist-offen .stern__strahlen li::before { transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y))) rotate(var(--winkel)) scaleX(1); }
.navi-knopf { display: none; grid-column: 3; grid-row: 1; justify-self: end; background: none; border: 0; padding: .5rem 0; font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .22em; text-transform: uppercase; color: var(--schiefer); cursor: pointer; }

.kopf.ist-gescrollt, .kopf--fest { box-shadow: 0 1px 0 var(--linie); }
@media (min-width: 900px) {
  .kopf.ist-gescrollt .kopf__innen, .kopf--fest .kopf__innen { padding-block: .55rem; }
  .kopf.ist-gescrollt .kopf__marke, .kopf--fest .kopf__marke { grid-column: 1; justify-self: start; }
  .kopf.ist-gescrollt .kopf__marke img, .kopf--fest .kopf__marke img { height: 2.5rem; }
  .kopf.ist-gescrollt .kopf__navi, .kopf--fest .kopf__navi { grid-column: 2 / 3; grid-row: 1; border: 0; margin: 0; justify-self: end; }
  .kopf.ist-gescrollt .kopf__navi ul, .kopf--fest .kopf__navi ul { padding: 0; justify-content: flex-end; gap: 0 1.5rem; flex-wrap: nowrap; }
  .kopf.ist-gescrollt .kopf__navi a, .kopf--fest .kopf__navi a { font-size: .68rem; letter-spacing: .16em; }
}
@media (max-width: 899px) {
  .kopf__innen { grid-template-columns: auto 1fr auto; padding-block: .8rem; }
  .kopf__marke { grid-column: 1; justify-self: start; }
  .kopf__marke img { height: 2.8rem; }
  .stern { display: none; }
  .navi-knopf { display: block; }
  .kopf__navi { position: absolute; left: 0; right: 0; top: 100%; background: var(--weiss); margin: 0; border: 0; padding: 0 var(--rand); max-height: 0; overflow: hidden; transition: max-height .4s var(--kurve); box-shadow: 0 1px 0 var(--linie); }
  .kopf__navi.ist-offen { max-height: 32rem; padding-block: .5rem 1.5rem; }
  .kopf__navi ul { flex-direction: column; gap: 0; padding: 0; }
  .kopf__navi a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
  .kopf__navi .navi-insta { display: flex; }
}
.sprungmarke { position: absolute; left: -9999px; background: var(--schiefer); color: var(--weiss); padding: .75rem 1.25rem; z-index: 100; }
.sprungmarke:focus { left: 1rem; top: .5rem; }

/* --------------------------------------------------------------------------
   5. Bühne — zwei Bilder, die ineinander übergehen, wenig Text
   -------------------------------------------------------------------------- */
.buehne { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; color: var(--weiss); overflow: hidden; background: var(--nacht); padding: 9rem var(--rand) 5rem; }
.buehne__bilder { position: absolute; inset: 0; }
.buehne__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; animation: ueberblenden 24s ease-in-out infinite, langsam 24s ease-in-out infinite; }
.buehne__bild--zwei { animation-delay: 12s, 12s; opacity: 0; }
@keyframes ueberblenden { 0% { opacity: 0; } 17% { opacity: .92; } 50% { opacity: .92; } 67% { opacity: 0; } 100% { opacity: 0; } }
@keyframes langsam { 0% { transform: scale(1); } 67% { transform: scale(1.07); } 100% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .buehne__bild { animation: none; opacity: .92; } .buehne__bild--zwei { display: none; } }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 38, 36, .5) 0%, rgba(31, 38, 36, .2) 45%, rgba(31, 38, 36, .65) 100%); }
.buehne__rahmen { display: none; }
.buehne__innen { position: relative; z-index: 1; max-width: 52rem; }
.buehne .etikett { color: var(--sand); max-width: none; }
.buehne h1 { color: var(--weiss); margin-bottom: .3em; font-weight: 300; }
/* v0.7: Das H1 trägt die Suchbegriffe (klein, als Etikett), der Leitsatz bleibt gross */
.buehne h1.etikett { color: var(--sand); font-weight: 500; line-height: 1.7; margin: 0 0 1rem; }
.buehne p.buehne__titel { font-family: var(--text); font-size: var(--gr-h1); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--weiss); margin: 0 auto .3em; max-width: none !important; text-wrap: balance; }
.buehne__linie { width: 3rem; height: 2px; background: var(--sand); margin: 1.6rem auto; }
.buehne p { margin-inline: auto; max-width: 40ch; color: rgba(255, 255, 255, .92); font-size: var(--gr-lead); line-height: 1.55; }
.buehne .notiz { margin-top: 1rem; }
.buehne .knopf { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--weiss); }
.buehne .knopf:hover { background: var(--weiss); color: var(--schiefer-tief); }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.buehne__hinweis { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--text); font-weight: 500; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .7); display: grid; justify-items: center; gap: .5rem; }
.buehne__hinweis::after { content: ""; width: 1px; height: 2.4rem; background: linear-gradient(rgba(255, 255, 255, .8), transparent); animation: tropfen 2.4s ease-in-out infinite; }
@keyframes tropfen { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .buehne__hinweis::after { animation: none; } }

/* --------------------------------------------------------------------------
   6. Kapitel auf Weiss
   -------------------------------------------------------------------------- */
.kapitel { position: relative; padding-block: var(--luft); }
.kapitel > .mass { position: relative; z-index: 1; }
.kapitel--band { background: var(--blau); color: var(--schiefer-tief); }
.kapitel--band .etikett { color: var(--schiefer-tief); opacity: .8; }
.kapitel--band .ornament { fill: var(--schiefer-tief); opacity: .55; }
.kapitel--band .notiz { color: var(--schiefer-tief); }
.kapitel--band .knopf { background: var(--weiss); border-color: var(--weiss); color: var(--schiefer-tief); }
.kapitel--band .knopf:hover { background: var(--schiefer-tief); border-color: var(--schiefer-tief); color: var(--weiss); }
.kapitel--band .knopf--voll { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.kapitel--band .knopf--voll:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.kapitel--creme { background: var(--creme); }
.zwei { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .zwei { grid-template-columns: 1fr 1fr; } .zwei--schmal { grid-template-columns: .9fr 1.1fr; } }

/* Geschichte */
.bildrahmen { position: relative; padding: 10px; background: var(--creme); }
.bildrahmen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }
.bildrahmen::before { display: none; }
.bildrahmen .notiz--kleber { right: -1rem; bottom: 2.2rem; }
/* Zitat: gleiche Schrift, eine Stufe grösser (Vorspann), abgesetzt durch eine
   Hellblau-Linie und Luft — der Kern des Satzes bekommt die Markierung. */
.zitat { font-family: var(--text); font-weight: 400; font-size: var(--gr-lead); line-height: 1.55; color: var(--schiefer-tief); margin: 2.2rem 0; padding: .15rem 0 .15rem 1.5rem; border-left: 3px solid var(--blau); max-width: 34ch; }
.zitat b { font-weight: 500; }
.geschichte__text .hand-schluss { margin-top: 1.4rem; }

/* --------------------------------------------------------------------------
   7. Dunkle Flächen — Schiefer als Hintergrund, Bild abgedunkelt
   -------------------------------------------------------------------------- */
.dunkel { position: relative; color: var(--weiss); background: var(--schiefer-tief); overflow: hidden; }
.dunkel h2, .dunkel h3 { color: var(--weiss); }
.dunkel p { color: rgba(255, 255, 255, .88); }
.dunkel a { text-decoration-color: rgba(255, 255, 255, .45); }
.dunkel a:hover { color: var(--sand); }
.flaeche { min-height: 76svh; display: grid; place-items: center; text-align: center; padding: var(--luft) var(--rand); }
.flaeche__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.flaeche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47, 57, 55, .75) 0%, rgba(47, 57, 55, .35) 100%); }
.flaeche__innen { position: relative; z-index: 1; max-width: 46rem; }
.flaeche__innen h2 { margin-inline: auto; }
.flaeche__innen p { margin-inline: auto; }
.flaeche__innen--zwei { max-width: var(--mass); width: 100%; display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; text-align: left; }
@media (min-width: 900px) { .flaeche__innen--zwei { grid-template-columns: 1.15fr .85fr; } }
.flaeche__innen--zwei h2, .flaeche__innen--zwei p { margin-inline: 0; }
.drei { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2.4rem; }
.drei > div { padding: .6rem clamp(1.2rem, 3vw, 2.4rem) .6rem 0; margin-right: clamp(1.2rem, 3vw, 2.4rem); border-right: 1px solid var(--linie-hell); }
.drei > div:last-child { border-right: 0; }
.drei .serif { font-size: var(--gr-h3); color: var(--weiss); font-weight: 300; margin: 0; line-height: 1.2; }
.drei .etikett { margin: .4rem 0 0; }
.clipbox { margin: 0; max-width: 380px; justify-self: center; width: 100%; }
.clipbox video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; background: var(--nacht); }
.clipbox figcaption { display: grid; gap: .3rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie-hell); }
.clipbox .nr { color: var(--sand); }
.clipbox .serif { font-size: var(--gr-text); color: var(--weiss); font-weight: 400; }

/* --------------------------------------------------------------------------
   8. Von Hand — vier Hochformate, Creme-Unterzeile
   -------------------------------------------------------------------------- */
.reihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 800px) { .reihe { grid-template-columns: repeat(4, 1fr); } }
.reihe figure { margin: 0; }
.reihe img, .reihe video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--creme); }
.reihe figcaption { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .8rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--linie); }
.reihe figcaption .serif { font-size: var(--gr-text); margin: 0; font-weight: 500; }
.reihe__fuss { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   9. Keine gleich — sechs Kreise mit Sand-Ring, auf Weiss
   -------------------------------------------------------------------------- */
.sechs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 720px) { .sechs { grid-template-columns: repeat(6, 1fr); } }
.sechs figure { margin: 0; text-align: center; }
.sechs .kreis { position: relative; padding: 6px; border: 2px solid var(--sand); border-radius: 50%; outline: 0; }
.sechs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.sechs figcaption { font-family: var(--hand); font-size: var(--gr-hand); color: var(--blau-text); margin-top: .6rem; }

/* --------------------------------------------------------------------------
   10. Kacheln — Schiefer, Beschriftung, Handschrift beim Überfahren
   -------------------------------------------------------------------------- */
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 6px; }
@media (min-width: 800px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
.kachel { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--nacht); }
.kachel img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transform: scale(1.02); transition: opacity .6s ease, transform 1.2s var(--kurve); }
.kachel:hover img { opacity: .9; transform: scale(1.06); }
.kachel::after { display: none; }
.kachel figcaption { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; text-align: center; row-gap: .6rem; padding: 0 .6rem; color: var(--weiss); pointer-events: none; }
/* Titel endet immer knapp ueber der Mitte, der Strich sitzt genau in der Mitte, der Untertitel beginnt darunter:
   so stehen alle Titel auf derselben Hoehe, egal wie lang die Untertitel sind (v0.9.2). */
.kachel figcaption .serif { align-self: end; }
.kachel figcaption .strichlein { align-self: center; }
.kachel figcaption .hand { align-self: start; }
.kachel figcaption .serif { font-size: var(--gr-h3); color: var(--weiss); margin: 0; font-weight: 400; letter-spacing: 0; text-shadow: 0 1px 10px rgba(31, 38, 36, .5); }
.kachel figcaption .strichlein { width: 2rem; height: 2px; background: var(--sand); margin: 0 auto; transition: width .5s var(--kurve); }
.kachel:hover figcaption .strichlein { width: 3.4rem; }
.kachel figcaption .hand { font-family: var(--hand); font-weight: 600; font-size: var(--gr-hand); line-height: 1.2; max-width: 90%; color: var(--blau-text); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--kurve); padding: .3em 1.6em; margin-top: .4rem; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .94) 16%, rgba(255, 255, 255, .94) 84%, rgba(255, 255, 255, 0) 100%); }
.kachel:hover figcaption .hand { opacity: 1; transform: none; }
/* Touch-Geraete kennen kein Hover: Untertitel dort immer zeigen, etwas kleiner (v0.9.2) */
@media (hover: none) {
  .kachel img { opacity: .75; }
  .kachel figcaption .hand { opacity: 1; transform: none; font-size: clamp(1rem, 4.2vw, 1.35rem); line-height: 1.15; padding: .25em .9em; margin-top: .2rem; }
}
@media (max-width: 799px) {
  .kachel figcaption .serif { font-size: clamp(1.05rem, 4.6vw, 1.45rem); line-height: 1.15; }
}
.kacheln__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; padding: 2.4rem var(--rand) 0; text-align: center; }
.kacheln__fuss svg { width: 2.6rem; }
.kacheln__fuss .serif { margin: 0; font-size: var(--gr-text); color: var(--weiss); font-weight: 400; }
.kacheln__fuss .serif a { text-decoration: none; color: var(--sand); font-weight: 500; }
.kacheln__fuss .serif a:hover { color: var(--weiss); }

/* --------------------------------------------------------------------------
   11. Wo es uns gibt — Tabelle, Hütte, Karten in Creme
   -------------------------------------------------------------------------- */
.stand svg { width: min(100%, 520px); margin-inline: auto; }
.tabelle-haar { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.tabelle-haar th, .tabelle-haar td { text-align: left; vertical-align: top; padding: .95rem 0; border-bottom: 1px solid var(--linie); }
.tabelle-haar tr:first-child th, .tabelle-haar tr:first-child td { border-top: 1px solid var(--linie); }
.tabelle-haar th { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .24em; text-transform: uppercase; color: var(--akzent-tief); width: 6.5rem; padding-top: 1.2rem; }
.tabelle-haar td { font-size: var(--gr-text); line-height: 1.55; color: var(--schiefer-tief); }
.wann__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.8rem; }
.partner { margin-top: clamp(3rem, 6vw, 5rem); }
.partner__vorzeile { text-align: center; margin: 0 0 1.6rem; display: flex; align-items: center; gap: 1.2rem; }
.partner__vorzeile::before, .partner__vorzeile::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.partner__reihe { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 800px) { .partner__reihe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 800px) { .partner__reihe--zwei { grid-template-columns: repeat(2, 1fr); } }
.partnerkarte { background: var(--creme); border: 1px solid transparent; border-radius: var(--ecke); padding: clamp(1.4rem, 2.6vw, 2.2rem); position: relative; display: grid; gap: .5rem; align-content: start; transition: border-color .4s ease; }
.partnerkarte::after { display: none; }
.partnerkarte:hover { border-color: var(--sand-tief); }
.partnerkarte h3 { margin: .2rem 0 .3rem; font-size: var(--gr-h3); font-weight: 400; }
.partnerkarte__was { font-size: var(--gr-text); margin: 0 0 .6rem; }
.partnerkarte__adresse { font-size: var(--gr-text); font-weight: 500; margin: 0; color: var(--schiefer-tief); }
.partnerkarte__zeit { font-size: var(--gr-klein); opacity: .75; margin: 0; }
.partnerkarte__link { display: inline-block; margin-top: .8rem; font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--akzent); padding-bottom: .25em; justify-self: start; }
.partnerkarte__link:hover { color: var(--akzent-tief); }
.partnerkarte--offen { background: var(--weiss); border: 1px dashed var(--sand-tief); }

/* --------------------------------------------------------------------------
   11b. Fragen — aufklappbar, Haarlinien, ein Plus als Zeichen
   -------------------------------------------------------------------------- */
.kapitel--fragen { padding-top: calc(var(--luft) * .6); }
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.15rem 0; font-size: var(--gr-text); font-weight: 500; color: var(--schiefer-tief); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--akzent-tief); transition: transform .3s var(--kurve); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen summary:hover { color: var(--akzent-tief); }
.fragen details p { margin: 0 0 1.3rem; max-width: 60ch; }
.fragen strong { font-weight: 500; }

/* --------------------------------------------------------------------------
   12. Newsletter + Instagram — auf Hellblau
   -------------------------------------------------------------------------- */
.liste { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (min-width: 900px) { .liste { grid-template-columns: 1.1fr .9fr; } }
.formular { display: grid; gap: 1.1rem; max-width: 30rem; margin-top: 1.4rem; }
.formular label { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .24em; text-transform: uppercase; color: var(--schiefer-tief); opacity: .8; }
.formular input[type="email"], .formular input[type="text"] { font: inherit; font-size: var(--gr-text); padding: .8em 1em; width: 100%; border: 1px solid transparent; border-radius: var(--ecke); background: var(--weiss); color: var(--schiefer-tief); }
.formular input::placeholder { color: rgba(65, 76, 74, .45); }
.formular input:focus { outline: 0; border-color: var(--schiefer); }
.formular__zeile { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .formular__zeile { grid-template-columns: 1fr 1fr; } }
.formular__zeile label { display: block; margin-bottom: .3rem; }
.formular .honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; }
.formular__hinweis { font-size: var(--gr-klein); opacity: .8; }
.formular__meldung { font-size: var(--gr-text); padding: .3em 0; }
.formular__meldung[data-art="fehler"] { color: var(--akzent-tief); }
.formular__meldung[data-art="ok"] { color: var(--schiefer-tief); font-weight: 500; }
.formular__meldung[hidden] { display: none; }
.formular.ist-gesendet button { opacity: .5; pointer-events: none; }
.insta { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.handle { font-family: var(--text); font-weight: 400; font-size: var(--gr-h3); color: var(--schiefer-tief); text-decoration: none; line-height: 1.2; display: inline-block; }
.handle:hover { color: var(--akzent-tief); }
.qr { flex: none; display: block; width: clamp(130px, 14vw, 170px); background: var(--weiss); border-radius: var(--ecke); padding: .55rem .55rem .25rem; text-decoration: none; text-align: center; transform: none; transition: transform .45s var(--kurve); }
.qr:hover { transform: scale(1.03); }
.qr img { width: 100%; }
.qr__text { display: block; font-family: var(--hand); font-weight: 600; font-size: var(--gr-hand); color: var(--blau-text); margin-top: .15rem; }
.ausgabe-hinweis { margin: 0 0 clamp(2.5rem, 5vw, 4rem); background: var(--weiss); border-radius: var(--ecke); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1.2rem 2.5rem; align-items: center; }
@media (min-width: 800px) { .ausgabe-hinweis { grid-template-columns: 1fr auto; } }
.ausgabe-hinweis h3 { margin: 0 0 .4rem; }
.ausgabe-hinweis p:not(.etikett) { margin: 0; }
.ausgabe-hinweis .etikett { color: var(--akzent-tief); opacity: 1; margin-bottom: .6rem; }
.kapitel--band .ausgabe-hinweis .knopf { background: var(--creme); border-color: var(--sand-tief); }
.kapitel--band .ausgabe-hinweis .knopf:hover { background: var(--schiefer-tief); border-color: var(--schiefer-tief); color: var(--weiss); }
.gruss { font-family: var(--text); font-weight: 400; font-size: var(--gr-lead); color: var(--schiefer-tief); margin-top: 2.4rem; line-height: 1.4; }
.gruss .hand { font-family: var(--hand); font-weight: 600; color: var(--blau-text); font-size: var(--gr-hand); display: block; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   13. Fuss — Schiefer-Tief
   -------------------------------------------------------------------------- */
.fuss { background: var(--schiefer-tief); color: rgba(255, 255, 255, .8); padding-block: 4rem 2rem; text-align: center; font-size: var(--gr-klein); }
.fuss__marke { width: 140px; margin: 0 auto 1.4rem; }
.fuss__satz { font-family: var(--hand); font-size: var(--gr-hand); color: var(--blau); margin: 0 auto 2rem; }
.fuss__navi { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; margin: 0 auto; padding: 1.2rem 0; border-top: 1px solid var(--linie-hell); border-bottom: 1px solid var(--linie-hell); max-width: 60rem; }
.fuss__navi a { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, .8); }
.fuss__navi a:hover { color: var(--sand); }
.fuss__kontakt { margin: 1.6rem auto .4rem; }
.fuss__kontakt a { text-decoration-color: rgba(255, 255, 255, .35); }
.fuss__unten { margin-top: 1.6rem; font-size: .76rem; color: rgba(255, 255, 255, .5); display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; }
.fuss__qr { display: inline-block; width: 160px; background: var(--weiss); padding: .6rem; border-radius: var(--ecke); margin-top: 1.4rem; }  /* v0.9.3: gross genug zum Scannen */
.fuss__qr img { width: 100%; }

/* --------------------------------------------------------------------------
   14. Unterseiten, Newsletter-Archiv
   -------------------------------------------------------------------------- */
.seitenkopf { background: var(--weiss); padding: 8.5rem 0 calc(var(--luft) * .3); text-align: center; }
.seitenkopf h1 { font-size: var(--gr-h2); margin-inline: auto; }
.seitenkopf p:not(.etikett) { font-size: var(--gr-lead); line-height: 1.55; }
.seitenkopf p { margin: 0 auto; max-width: 42rem; }
@media (max-width: 899px) { .seitenkopf { padding-top: 6.5rem; } }
.inhalt { padding-block: calc(var(--luft) * .5) var(--luft); }
.inhalt h2 { margin-top: 2.4em; margin-bottom: .7em; font-family: var(--text); font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--akzent); }
/* v0.9.3: Impressum/Datenschutz im Stil der Hauptseite: Zwischentitel als kleine Etiketten, Fliesstext etwas ruhiger */
.inhalt p, .inhalt li { font-size: 1rem; line-height: 1.65; }
.seitenkopf--recht p:not(.etikett) { font-size: var(--gr-text); }
.inhalt h2:first-child { margin-top: 0; }
.inhalt ul, .inhalt ol { padding-left: 1.2rem; }
.inhalt li { margin-bottom: .45rem; }
.tabelle { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: var(--gr-klein); }
.tabelle th, .tabelle td { text-align: left; padding: .7rem .6rem .7rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-family: var(--text); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: var(--gr-etikett); }
.tabellen-huelle { overflow-x: auto; }
.knopf--linie { background: transparent; }
.ausgabe .vorspann { font-weight: 400; font-size: var(--gr-lead); line-height: 1.55; color: var(--schiefer-tief); }
.ausgabe h2 { font-size: var(--gr-h2); }
.ausgabe h3 { font-family: var(--text); font-weight: 500; font-size: var(--gr-etikett); letter-spacing: .28em; text-transform: uppercase; color: var(--akzent-tief); margin: 2.2rem 0 .5rem; }
.ausgabe__bild { margin: 0 0 2.4rem; }
.ausgabe__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ausgabe__bild figcaption { display: grid; gap: .2rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--linie); }
.ausgabe__bild .serif { font-size: var(--gr-klein); font-weight: 400; }

/* --------------------------------------------------------------------------
   15. Entwurfsmarkierungen
   -------------------------------------------------------------------------- */
.platzhalter { border-bottom: 1px dotted var(--akzent); }
body.zeigt-notizen .platzhalter { background: rgba(175, 106, 67, .18); }
.entwurfsnotiz { display: none; }
body.zeigt-notizen .entwurfsnotiz { display: block; font-size: var(--gr-klein); line-height: 1.5; color: var(--akzent-tief); background: var(--creme); border-left: 2px solid var(--akzent); padding: .6rem .9rem; margin: 1rem 0; max-width: 62ch; }
body.zeigt-notizen .entwurfsnotiz::before { content: "Entwurf: "; font-weight: 600; }
.entwurfsfahne { position: fixed; right: 0; bottom: 0; z-index: 90; display: flex; font-family: var(--text); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.entwurfsfahne span { background: var(--akzent); color: var(--weiss); padding: .5rem .9rem; }
.entwurfsfahne button { background: var(--schiefer); color: var(--weiss); border: 0; padding: .5rem .9rem; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }

@media print {
  .kopf, .entwurfsfahne, .formular, .navi-knopf, video, .buehne__hinweis, .zeiger, .zeiger-punkt { display: none !important; }
  .zeigt { opacity: 1 !important; transform: none !important; }
  .dunkel, .fuss, .buehne, .kapitel--band { background: #fff !important; color: #000 !important; }
}

/* v0.10.0: Sprachwahl DE/EN */
.kopf__navi .sprachwahl a { color: var(--akzent-tief); padding-left: clamp(.8rem, 1.6vw, 1.4rem); border-left: 1px solid var(--linie); }
.fuss__navi .sprachwahl a { font-weight: 600; }
@media (max-width: 899px) { .kopf__navi .sprachwahl a { border-left: 0; padding-left: 0; } }