/* ============================================================================
   Barfuß in Berlin — Stylesheet „Anatomische Tafel"

   Leitidee: Der Laden argumentiert anatomisch und mechanisch — Knochen,
   Sprengung, Zehenbox, Sohlenstärke. Also spricht die Seite die Sprache einer
   technischen Zeichnung: Haarlinien, nummerierte Bezugsfelder, Messraster,
   Monospace-Annotationen. Keine Verläufe, keine Schatten, keine runden Ecken.

   Aufbau: 1 Schriften · 2 Token · 3 Grundlagen · 4 Bausteine · 5 Kopfbereich
           6 Hero · 7 Abschnitte · 8 Fußzeile · 9 Sonderfälle · 10 Bewegung
           11 Responsive
   ========================================================================= */

/* ------------------------------------------------------------ 1 SCHRIFTEN */
/* Liegen im Projekt, werden nicht extern geladen. Siehe assets/fonts/LIZENZ.md */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 2 TOKEN */

:root {
  /* Farben. Die notierten Kontrastwerte gelten für genau diese Kombination —
     wer eine Farbe ändert, muss sie neu prüfen. Ziel: 4,5:1 für Fließtext. */
  --paper:       #E9E7E0;   /* Grundfläche, kühles Knochenweiß                 */
  --paper-2:     #DFDCD3;   /* Tafelfläche, abgesetzte Felder                  */
  --ink:         #22201C;   /* Text und invertierte Flächen  13,1:1 auf paper  */
  --ink-2:       #5A554C;   /* Nebentext                      6,0:1 auf paper  */
  --signal:      #C93B22;   /* Bezugslinien, Ziffern, Flächen — NICHT für
                               Fließtext: nur 4,1:1 auf paper. Weiß darauf 5,1:1 */
  --signal-ink:  #A82D18;   /* dieselbe Farbe für Text        5,2:1 auf paper  */
  --signal-lite: #E9724F;   /* Akzenttext auf Tinte           5,4:1 auf ink    */
  --chalk:       #C9C5BA;   /* Text auf Tinte                 9,4:1 auf ink    */

  /* Öffnungsstatus. Die Farbe ist nie die einzige Information — der Zustand
     steht immer auch im Text. */
  --live:        #146B42;   /* geöffnet                       5,3:1 auf paper  */
  --warn:        #8A5A00;   /* schließt bald                  4,8:1 auf paper  */

  --line:        rgba(34, 32, 28, .20);
  --line-2:      rgba(34, 32, 28, .38);
  --line-chalk:  rgba(201, 197, 186, .26);

  /* Typografie */
  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-3xs:  .6875rem;   /* 11 — Mikrolabel im Schriftfeld       */
  --t-2xs:  .75rem;     /* 12 — Annotation, Blattkopf, Ziffern  */
  --t-xs:   .8125rem;   /* 13 — Fußnote, Bildunterschrift       */
  --t-sm:   .9375rem;   /* 15 — UI-Text, Hinweis                */
  --t-base: 1.0625rem;  /* 17 — Fließtext                       */
  --t-md:   clamp(1.125rem, .95rem + .7vw, 1.3125rem);
  --t-lg:   clamp(1.25rem,  1.05rem + .9vw, 1.625rem);
  --t-xl:   clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --t-2xl:  clamp(2.625rem, 1.2rem + 6.2vw, 6rem);

  /* Raster und Abstände — Basis 4px */
  --wrap:   78rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;   --s-12: 3rem;   --s-16: 4rem;
  --section-y: clamp(4rem, 8vw, 7.5rem);

  --radius-xs: 2px;   /* nur Schaltflächen — sonst gibt es keine runde Ecke */

  /* Behandlung der Fotografien. Nah an den Originalfarben: Gemessen liegt der
     mittlere Abstand zum unbearbeiteten Bild bei 2,4 von 255 — sichtbar ist
     das kaum, es nimmt den warmen Holztönen nur die Spitze, damit sie nicht
     gegen das Signalrot arbeiten. Ein Wert für alle Fotos, damit sie
     zueinander passen — Hintergrund im Abschnitt 01 und das Bild darunter auf
     schmalen Geräten.

     Der Filter kostet hier keinen Kontrast: Nachgemessen bleiben Fließtext
     bei 12,65:1 und Nebentext bei 5,75:1, egal wie stark entsättigt wird.
     Unter dem Schleier ist die dunkelste Stelle ohnehin fast schwarz. */
  --foto-filter: grayscale(.12) saturate(1.02) contrast(1.01);

  /* Bewegung */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --d-1: 180ms;  --d-2: 320ms;  --d-3: 640ms;

  --topbar-h: 0px;    /* misst atlas.js */
}

/* ---------------------------------------------------------- 3 GRUNDLAGEN */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Papierkorn. Ein einziges SVG-Rauschen als Data-URI, damit die Fläche nicht
   wie eine leere Farbdose wirkt — es wird nichts nachgeladen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); font-stretch: 88%;  letter-spacing: -.04em; }
h2 { font-size: var(--t-xl);  font-stretch: 92%; }
h3 { font-size: var(--t-lg);  font-stretch: 96%; font-weight: 700; letter-spacing: -.02em; }
h4 { font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: var(--signal);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--signal-ink); }

:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-4);
  font-family: var(--mono); font-size: var(--t-2xs);
  text-transform: uppercase; letter-spacing: .1em;
}
.skip-link:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- 4 BAUSTEINE */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Annotation — das Monospace-Vokabular der technischen Zeichnung */
.anno {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.anno--signal { color: var(--signal-ink); }

/* Blattkopf: laufende Nummer, Titel, Linie bis zum Rand. Steht über jedem
   Abschnitt und macht die Seite als Tafelsammlung lesbar. */
.sheet-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: var(--s-12);
}
.sheet-head__no {
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .12em; color: var(--signal-ink);
}
.sheet-head__title {
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: .8125rem 1.375rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease),
              border-color var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.btn:hover  { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--sm { padding: .5rem .875rem; font-size: var(--t-2xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.prose { max-width: 62ch; }
.lede {
  max-width: 58ch;
  font-size: var(--t-md);
  line-height: 1.45;
  font-stretch: 96%;
  text-wrap: pretty;
}
.note {
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-left: 1px solid var(--line-2);
  padding-left: var(--s-4);
  max-width: 60ch;
}

/* -------------------------------------------------------- 5 KOPFBEREICH */

.topbar { position: sticky; top: 0; z-index: 100; background: var(--paper); }

/* Sale-Streifen — Tinte statt Buntfarbe, damit er als Aushang wirkt und nicht
   als Werbebanner. Markenname im hellen Signalton. */
.sale {
  background: var(--ink);
  color: var(--chalk);
}
.sale[hidden] { display: none; }
/* Flex statt Grid: die Bedienpunkte fügt das Skript erst zur Laufzeit
   zwischen Bühne und Fußnote ein. In einem festen Spaltenraster würde die
   Fußnote dadurch in die nächste Zeile rutschen. */
.sale__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: .5rem;
}
.sale__stage { flex: 1 1 auto; }
.sale__label, .sale__note, .sale__dots { flex: none; }
.sale__label {
  margin: 0;
  font-family: var(--mono); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--signal-lite);
  white-space: nowrap;
}
.sale__label::before { content: "\25AE\00A0"; color: var(--signal); }
.sale__stage { min-width: 0; }
.sale__offers { list-style: none; margin: 0; padding: 0; }
.sale__offer { font-size: var(--t-sm); line-height: 1.35; }
.sale__offer strong { color: #fff; font-weight: 700; font-stretch: 92%; margin-right: .5ch; }
.sale__offer sup { color: var(--signal-lite); }
.sale__note {
  margin: 0;
  font-family: var(--mono); font-size: var(--t-3xs);
  color: var(--chalk); opacity: .8; text-align: right;
}
.sale__dots { display: flex; gap: 4px; }
.sale__dot {
  width: 18px; height: 3px; padding: 0;
  border: 0; background: var(--line-chalk); cursor: pointer;
  transition: background var(--d-1) var(--ease);
}
.sale__dot[aria-current="true"] { background: var(--signal-lite); }
.sale__dot:hover { background: #fff; }

.site-header { border-bottom: 1px solid var(--line-2); background: var(--paper); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-3);
}
.wordmark { display: block; line-height: 0; }
.brand-logo { width: clamp(9rem, 22vw, 13.5rem); height: auto; }
.brand-logo--sm { width: 9.5rem; }
/* Das Logo ist eine PNG mit fest eingebackener dunkler Schriftfarbe. Auf den
   Tinte-Flächen wäre es unsichtbar — invert(1) dreht es um und lässt die
   ausgesparte Kreisfläche weiterhin den Hintergrund durchscheinen. Eine
   CSS-Maske täte dasselbe, wird aber beim Öffnen per file:// verworfen. */
.brand-logo--invert { filter: invert(1); }

.site-nav ul {
  display: flex; gap: clamp(.75rem, 1.6vw, 1.5rem);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2);
  padding-block: var(--s-1);
  border-bottom: 2px solid transparent;
  transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.site-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--signal); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------- 6 HERO */

.hero { border-bottom: 1px solid var(--line-2); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}
.hero__tag { margin-bottom: var(--s-6); }
.hero h1 { margin-bottom: var(--s-6); }
/* „seine Arbeit" steht bewusst leicht und normalbreit in der sonst schweren,
   schmalen Zeile — der Kontrast muss deutlich sein, sonst liest er sich wie
   ein Versehen statt wie eine Betonung. */
.hero h1 em {
  font-style: normal;
  font-stretch: 100%;
  font-weight: 300;
  letter-spacing: -.02em;
}
.hero .lede { margin-bottom: var(--s-8); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Schriftfeld — der Titelblock einer technischen Zeichnung: umrandet, Zellen
   durch Haarlinien getrennt, Feldnamen klein darüber. Beantwortet die drei
   Fragen, mit denen Leute auf eine Ladenseite kommen — offen? wo? wie
   erreichbar? — und die vierte: worum geht es hier eigentlich. */
.titleblock { border: 1px solid var(--ink); background: var(--paper-2); }
.tb__status {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0;                /* ist ein <p> — sonst klafft die Grundregel auf */
  min-height: 2.75rem;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .06em;
}
.tb__status[hidden] { display: none; }
.tb__status::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--chalk); }
.tb__status[data-state="open"]   { color: #8FE4B8; }
.tb__status[data-state="soon"]   { color: #F0D08A; }
.tb__status[data-state="closed"] { color: var(--signal-lite); }
.tb__status[data-state="open"]::before   { background: #3FBF7F; }
.tb__status[data-state="soon"]::before   { background: #E0A93A; }
.tb__status[data-state="closed"]::before { background: var(--signal); }

.tb__grid {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border-top: 1px solid var(--ink);
}
.tb__cell { background: var(--paper-2); padding: var(--s-4); min-width: 0; }
.tb__cell--wide { grid-column: 1 / -1; }
.tb__cell dt {
  font-family: var(--mono); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.tb__cell dd { margin: 0; font-size: var(--t-sm); line-height: 1.35; font-stretch: 96%; }
/* Die Werte laufen leicht schmal — das passt zur Zeichnungssprache und
   verschafft langen Angaben wie der E-Mail-Adresse den nötigen Platz. */
.tb__cell dd b {
  display: block;
  font-size: var(--t-md); font-weight: 700; font-stretch: 88%;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.tb__cell dd a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.tb__cell dd a:hover { border-bottom-color: var(--signal); }

/* ---------------------------------------------------------- 7 ABSCHNITTE */

.section { padding-block: var(--section-y); }
.section--rule { border-bottom: 1px solid var(--line-2); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--chalk); }
.section--ink h2, .section--ink h3, .section--ink b, .section--ink strong { color: var(--paper); }
.section--ink .sheet-head { border-bottom-color: var(--line-chalk); }
.section--ink .sheet-head__title { color: var(--chalk); }
.section--ink .sheet-head__no { color: var(--signal-lite); }
.section--ink .anno { color: var(--chalk); }
.section--ink .lede { color: var(--paper); }
.section--ink .note { color: var(--chalk); border-left-color: var(--line-chalk); }
.section--ink a { text-decoration-color: var(--signal-lite); }
.section--ink a:hover { color: var(--signal-lite); }
.section--ink .btn { border-color: var(--chalk); color: var(--paper); }
.section--ink .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---- Abschnitt auf einer Aufnahme ---- */

/* Das Foto liegt hinter dem ganzen Abschnitt. Darueber ein Schleier in
   Papierfarbe, der links deckt und nach rechts auslaeuft: Ueber dem Text ist
   das Bild nur zu ahnen und zusaetzlich unscharf, rechts steht es scharf.

   Der Schleier deckt ueber dem Text zu 94 %, nicht zu 100 % — das laesst den
   Laden durchscheinen und kostet beim Kontrast fast nichts: Fliesstext kommt
   damit noch auf rund 5,7:1 statt 6,0:1, bleibt also ueber den geforderten
   4,5:1. Wer den Wert senkt, muss den Kontrast neu pruefen. */
.section--foto { position: relative; overflow: hidden; }

.section-foto {
  position: absolute;
  inset: 0;
  /* EIGENE DATEI, nicht beratung.jpg: Sie endet knapp rechts neben dem
     aelteren Herrn, das Verkaufsgespraech bildet also die rechte Bildkante.

     Warum ein eigener Ausschnitt und kein background-position am vollen Bild:
     Bei `cover` haengt der sichtbare Bildausschnitt an der Hoehe des
     Abschnitts — und die aendert sich mit der Fensterbreite, weil der Text
     anders umbricht. Der noetige Prozentwert schwankte zwischen 5 und 54;
     ein fester Wert haette das Gespraech je nach Fenster aus dem Bild
     geschoben. Beschnittene Datei plus `right` haelt es bei jeder Breite.

     Wer den Ausschnitt aendert: Im vollen Bild steht der Verkaeufer in
     Schwarz bei 57-63 %, der aeltere Herr bei 64-70 % der Bildbreite.

     Diese Datei kommt NICHT aus beratung.jpg, sondern aus einem eigenen,
     hoeher aufgeloesten Original (3824 x 2160). Ausgeliefert mit 1992 x 1241
     — denn hier wird das Bild formatfuellend gezogen, waehrend beratung.jpg
     in seiner eigenen Spalte immer verkleinert wird.

     Der Ausschnitt: linke 73 % der Breite, obere 80,5 % der Hoehe. Die
     Hoehe ist so gewaehlt, dass die Fuesse des Verkaeufers in Schwarz
     wegfallen — sein vorderer Schuh beginnt bei 79,5 % und ist nur noch
     als schmaler Streifen zu sehen. */
  background-image: url("../img/beratung-hintergrund.jpg");
  background-size: cover;
  background-position: right center;
  filter: var(--foto-filter);
}
.section-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  /* 96 statt 94 Prozent. Seit das Foto Farbe behalten darf, ist es hinter dem
     Text deutlich praesenter — sechs Prozent eines bunten, detailreichen
     Bildes sieht man, auch wenn der gemessene Kontrast reicht. Vier Prozent
     lassen den Laden ahnen, ohne dass das Auge daran haengenbleibt. */
  opacity: .96;
  /* Weiche Kante nach rechts: dort verschwindet der Schleier und mit ihm die
     Unschaerfe. Die Maske steuert beides zugleich. */
  -webkit-mask-image: linear-gradient(100deg, #000 0 42%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.26) 76%, transparent 92%);
          mask-image: linear-gradient(100deg, #000 0 42%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.26) 76%, transparent 92%);
  /* HIER STAND EINMAL backdrop-filter: blur(). BITTE NICHT WIEDER EINBAUEN.
     Er zwingt den Browser, den Hintergrund als eigene Ebene zusammenzusetzen,
     und die Wortmasken der Ueberschriften darueber wurden dann nicht mehr
     sauber neu gezeichnet: Der Text blieb mitten in seiner Einblendung
     stehen, halb abgeschnitten. Die Zustaende im DOM waren dabei korrekt —
     nur die Pixel nicht.

     Die Deckkraft oben erledigt die Aufgabe ohnehin: Bei vier Prozent
     Restbild bleibt vom Detail so wenig uebrig, dass eine Unschaerfe nichts
     mehr hinzufuegen wuerde. */
}
/* Der Inhalt gehoert ueber das Bild. */
.section--foto > .wrap { position: relative; }

.media--nur-schmal { display: none; }
/* Die Ladenaufnahme ist quer. Der 4:5-Beschnitt der uebrigen Bildplaetze
   wuerde den Raum wegschneiden, auf den es hier ankommt.

   Doppelte Klasse mit Absicht: `.media--nur-schmal img` allein waere genauso
   gewichtet wie `.media img` weiter unten in dieser Datei — und die spaetere
   Regel gewaenne. Das `.media.media--nur-schmal` gibt den Ausschlag. */
.media.media--nur-schmal img {
  aspect-ratio: 16 / 9;
  filter: var(--foto-filter);
}

@media (prefers-reduced-motion: reduce) {
  .section-foto { background-attachment: scroll; }
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.section-grid--media { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.section-head h2 { margin-bottom: var(--s-4); }
.section-head .lede { margin-top: var(--s-4); }

/* Begründungsliste — nummeriert, wie Bezugsfelder an einer Zeichnung */
.reasons { list-style: none; margin: var(--s-12) 0 0; padding: 0; counter-reset: r; }
.reasons li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.reasons li:last-child { border-bottom: 1px solid var(--line); }
.reasons li::before {
  content: counter(r, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .1em; color: var(--signal-ink);
  padding-top: .35rem;
}
.reasons h3 { margin-bottom: var(--s-2); }
.reasons p { color: var(--ink-2); font-size: var(--t-sm); max-width: 56ch; }


/* ------------------------------------------------ DIE MERKMALE (PROBE) */

/* Zwei Zustände:

   1. Grundzustand — eine Liste, in der über jedem Merkmal seine Aufnahme
      steht. Das gilt auf schmalen Bildschirmen und immer dann, wenn das
      Skript nicht läuft. Nichts klebt, nichts überlagert sich.

   2. Geteilt (.is-split, von plate.js gesetzt, sobald zwei Spalten passen) —
      die Aufnahmen wandern in die Bühne links, der Text läuft rechts durch.
      Weil beide in eigenen Spalten stehen, kann Text nie hinter einem Bild
      verschwinden.

   Bewusst KEIN Messraster im Hintergrund: Ein gezeichnetes Gitter unter einer
   Fotografie liest sich wie zwei aufeinandergelegte Ebenen, nicht wie ein
   Bild. Stattdessen liegt die Aufnahme mit „multiply" direkt im Papierton –
   ihr heller Studiohintergrund verschwindet darin, der Schatten unter dem
   Schuh bleibt. Der Schuh steht dadurch in der Fläche und nicht auf ihr. */

.probe {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: var(--s-12);
}
.probe__rail { display: none; }

.probe.is-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
/* Der Rahmen muss die volle Höhe der Zeile einnehmen, sonst hat die klebende
   Bühne darin keinen Weg zum Kleben — sie wäre exakt so hoch wie er. */
.probe.is-split .probe__rail { display: block; align-self: stretch; }

.probe__stage {
  /* Streifen unten, den sich das Anzeigefeld nimmt. Die Aufnahme rechnet
     damit, sonst läge Schrift über dem Schuh. */
  --read-h: clamp(5rem, 9vh, 7rem);
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-6));
  aspect-ratio: 1 / 1;
  container-type: size;   /* damit sich die Aufnahme an der Bühnenhöhe messen kann */
  /* Derselbe Verlauf noch einmal in CSS. Er liegt unter der Leinwand und
     springt ein, falls WebGL nicht zur Verfügung steht.

     Der äußere Halt ist EXAKT der Ton des umgebenden Abschnitts (--paper-2,
     dieser Abschnitt ist getönt). Jeder andere Wert macht aus der Bühne
     wieder ein sichtbares Rechteck — sie soll aber gar keine Kante haben.
     Wandert der Abschnitt einmal auf den hellen Grund, gehört hier --paper
     hin, und im Shader in plate.js der passende Wert dazu. */
  background:
    radial-gradient(74% 64% at 50% 42%,
      #E7E4DC 0%, #E3E0D8 42%, var(--paper-2) 76%, var(--paper-2) 100%);
}

/* Die Fläche unter der Aufnahme: eine weiche Lichtinsel, die zum Rand hin
   exakt in den Abschnittston ausläuft. Deshalb ist keine Kante zu sehen. */
.probe__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Aufnahme ---- */

/* Im Grundzustand füllt die Aufnahme die Breite ihres Merkmals; in der Bühne
   passt sie sich so ein, dass sie nie über den Rand hinausläuft — die Kacheln
   sind teils hoch, teils quer. */
.probe__shot {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w) / var(--h);
  overflow: hidden;
  margin: 0 0 var(--s-6);
}
.probe.is-split .probe__shot {
  position: absolute;
  /* Der untere Streifen gehört dem Anzeigefeld. */
  inset: 0 0 var(--read-h) 0;
  margin: auto;
  width: min(100%, calc(100% * var(--w) / var(--h)));
  width: min(100cqw, calc((100cqh - var(--read-h)) * var(--w) / var(--h)));
  height: auto;
}

/* WICHTIG: Der Rahmen selbst bleibt reglos — kein opacity, kein transform,
   kein will-change. Jedes davon macht ihn zu einem eigenen Stapelkontext,
   und dann blendet die Aufnahme nur noch gegen Leere statt gegen die Fläche
   darunter. Der helle Studiohintergrund bliebe sichtbar und der Schuh stünde
   wieder auf einem Rechteck. Auf- und Abblenden passiert deshalb am Bild. */
.probe__shot img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(1536 / var(--w) * 100%);
  max-width: none;
  height: auto;
  /* Von hinten nach vorn gelesen: erst spiegeln, dann der Ausschnitt aus der
     Bilddatei, dann der Versatz für den Zeiger. Prozentwerte beziehen sich
     hier auf die Bilddatei.

     --flip: -1 spiegelt waagerecht. Gespiegelt wird um die Mitte der GANZEN
     Datei, nicht um den Ausschnitt — deshalb muss --x dann von der anderen
     Seite gezählt werden: --x = 1536 - (linke Kante + Breite). */
  transform:
    translate(var(--px, 0px), var(--py, 0px))
    translate(calc(var(--x) / 1536 * -100%), calc(var(--y) / 1024 * -100%))
    scaleX(var(--flip, 1));
  /* KEIN mix-blend-mode und KEIN filter mehr — beides steckt in der Datei.

     Die Aufnahmen sind Schwarz mit Alphakanal: alpha = 1 - Grauwert. Das ist
     rechnerisch dasselbe wie multiply mit dem Graubild (nachgemessen: mittlere
     Abweichung 0,002 von 255), kommt aber ohne Blendmodus aus.

     Der Grund: Blenden setzt voraus, dass der Browser die Fläche darunter in
     dieselbe Gruppe nimmt. Sobald irgendein Vorfahr — oder das Bild selbst
     über sein opacity beim Überblenden — einen eigenen Stapelkontext
     aufmacht, blendet Safari gegen Leere, und der helle Studiohintergrund
     stand wieder als Kasten unter dem Schuh. Auf dem iPad war genau das zu
     sehen. Mit Alpha gibt es das Problem nicht mehr.

     Wer die Anmutung ändern will, ändert die Datei, nicht das CSS. Gebacken
     ist: grayscale(1) brightness(1.16) contrast(1.06). */
}
/* Nur in der Bühne wird überblendet — im Grundzustand steht jede Aufnahme
   dauerhaft bei ihrem Merkmal. */
.probe.is-split .probe__shot img {
  opacity: 0;
  /* Die abgehende Aufnahme geht schnell, die kommende setzt verzögert ein.
     Liegen beide gleichzeitig da, multipliziert sich die Überlappung doppelt
     in die Fläche und es entsteht ein Schatten, der nirgends hingehört. */
  transition: opacity 220ms var(--ease);
}
.probe.is-split .probe__shot.is-on img {
  opacity: 1;
  transition: opacity 440ms var(--ease-out) 160ms;
}




/* ---- Anzeigefeld ---- */

/* Für alle Merkmale identisch aufgebaut: Linie, darunter Nummer und Begriff
   klein in Monospace, darunter der Wert groß. Dadurch springt beim Wechsel
   nichts herum — es ändert sich nur, was dasteht. */
.probe__read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}
.probe__read-rule {
  display: block;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}
.probe__read.is-on .probe__read-rule { transform: scaleX(1); }

.probe__read-meta {
  display: flex;
  gap: 1.25em;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 320ms var(--ease) 120ms;
}
.probe__read.is-on .probe__read-meta { opacity: 1; }
.probe__read-meta b { color: var(--signal-ink); font-weight: 500; }

/* Der Wert fährt aus einem Fenster herein — dasselbe Verhalten wie bei den
   Überschriften der Seite, damit der Abschnitt nicht aus der Reihe tanzt. */
.probe__read-val {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.probe__read-val > span {
  display: block;
  transform: translateY(110%);
  transition: transform 660ms var(--ease-out) 180ms;
}
.probe__read.is-on .probe__read-val > span { transform: none; }

/* ---- Die Schritte ---- */

.probe__steps { list-style: none; margin: 0; padding: 0; }
.probe__step { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.probe__step:first-child { border-top: 0; padding-top: 0; }

/* Erst geteilt bekommt der Takt eine Mindesthöhe: Jedes Merkmal erhält einen
   festen Anteil des Fensters, unabhängig davon, wie lang sein Text umbricht.
   Über die Textlänge zu takten hieße, dass das kürzeste vorbeihuscht. */
.probe.is-split .probe__step {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity var(--d-2) var(--ease);
}
.probe.is-split .probe__step:first-child { padding-top: var(--s-8); }

.probe__no {
  display: block;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .12em; color: var(--ink-2);
  margin-bottom: var(--s-3);
  transition: color var(--d-2) var(--ease);
}
.probe__step h3 {
  font-size: var(--t-lg); font-weight: 700; font-stretch: 92%;
  letter-spacing: -.02em;
  margin-bottom: var(--s-3);
}
.probe__step p { font-size: var(--t-base); color: var(--ink-2); max-width: 44ch; margin: 0; }

/* Nur wenn das Bild links wirklich mitläuft, treten die übrigen Merkmale
   zurück. Im Grundzustand stehen alle gleichwertig da. */
.probe.is-split .probe__step { opacity: .38; }
.probe.is-split .probe__step.is-on { opacity: 1; }
.probe.is-split .probe__step.is-on .probe__no { color: var(--signal-ink); }

.probe__cap {
  grid-column: 1 / -1;
  margin: var(--s-8) 0 0;
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
}


@media (prefers-reduced-motion: reduce) {
  .probe__stage { position: static; }
  .probe.is-split .probe__step { opacity: 1; }
}

/* Begründungsblock — Randspalte mit Marke, daneben der Fließtext */
.why {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: var(--s-12);
  border-top: 1px solid var(--line-2);
  margin-bottom: var(--s-12);
}
.why__head h3 { margin-top: var(--s-3); font-size: var(--t-xl); font-stretch: 88%; font-weight: 800; }

/* Hinweiskasten — umrandet, mit kräftiger Kopflinie statt Schatten */
.callout {
  margin-top: var(--s-16);
  border: 1px solid var(--ink);
  border-top-width: 3px;
  padding: var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.callout h3 { font-stretch: 88%; }
.callout__body { max-width: 62ch; font-size: var(--t-sm); }
.callout__body p { color: var(--ink-2); }
.callout__body strong { color: var(--ink); }

.brands { margin-top: var(--s-16); }

/* Sortiment: Kategorien als Registerzeilen statt als Karten */
.cats { list-style: none; margin: 0 0 var(--s-16); padding: 0; }
.cats li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s-1) var(--s-8);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.cats li:last-child { border-bottom: 1px solid var(--line); }
.cats h3 { font-size: var(--t-base); font-weight: 700; font-stretch: 100%; letter-spacing: -.01em; }
.cats p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* Marken */
.brands__title { margin-bottom: var(--s-6); }
.brand-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.brand {
  background: var(--paper);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.section--tint .brand { background: var(--paper-2); }
.brand__logo {
  min-height: 2.5rem;
  display: flex; align-items: center;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.brand__logo img { max-height: 2.5rem; width: auto; }
.brand__name {
  font-size: var(--t-lg); font-weight: 800; font-stretch: 78%;
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1;
}
.brand p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* Porträts und Bilder */
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.portrait, .media { margin: 0; }
.portrait img, .media img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-2);
  background: var(--paper-2);
}
/* Dieselbe Behandlung wie das Ladenfoto — damit echte Portraits spaeter von
   selbst dazu passen. Die Schuhaufnahmen bleiben aussen vor: Sie sind mit
   einer mittleren Saettigung von 0,01 ohnehin unbunt, und ihre Filterkette
   ist auf den Deckfleck bei Merkmal 04 abgestimmt. */
.portrait img { filter: var(--foto-filter); }
.portrait figcaption, .media figcaption {
  margin-top: var(--s-3);
  font-family: var(--mono); font-size: var(--t-3xs); line-height: 1.5;
  color: var(--ink-2);
}
.portrait figcaption b {
  display: block;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}

/* FAQ */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
/* Bewusst display:block und kein Raster: Die Frage wird beim Einblenden Wort
   für Wort gesetzt, und in einem Raster würde jedes dieser Wörter zu einer
   eigenen Zelle — die Frage stünde als Stufenleiter da. Das Pluszeichen sitzt
   deshalb absolut statt als zweite Spalte. */
.faq summary {
  position: relative;
  display: block;
  cursor: pointer; list-style: none;
  padding-block: var(--s-4);
  padding-right: 2.25rem;
  font-size: var(--t-md); font-weight: 600; font-stretch: 96%;
  letter-spacing: -.015em;
  transition: color var(--d-1) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--signal-ink); }
.faq summary::after {
  content: "+";
  position: absolute; right: 0; top: var(--s-4);
  font-family: var(--mono); font-size: var(--t-md); font-weight: 400;
  line-height: inherit;
  color: var(--signal-ink);
}
.faq details[open] summary::after { content: "\2212"; }
.faq__body { padding-bottom: var(--s-6); max-width: 62ch; }
.faq__body p { font-size: var(--t-sm); color: var(--ink-2); }

/* Besuch */
.visit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.visit-card { background: var(--paper); padding: var(--s-6); }
.section--tint .visit-card { background: var(--paper-2); }
.visit-card h3 {
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.visit-card address { font-style: normal; font-size: var(--t-md); line-height: 1.4; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.hours { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.hours th, .hours td { padding: .4375rem 0; text-align: left; font-weight: 400; }
.hours th { color: var(--ink-2); }
.hours td { font-family: var(--mono); font-size: var(--t-2xs); text-align: right; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line); }
.hours tr[data-today] th, .hours tr[data-today] td { font-weight: 700; color: var(--ink); }
.hours tr[data-today] th::before { content: "\25B8\00A0"; color: var(--signal); }
.hours .is-closed { color: var(--ink-2); }

.transit { margin: 0; font-size: var(--t-sm); }
.transit dt {
  font-family: var(--mono); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  margin-top: var(--s-4);
}
.transit dt:first-child { margin-top: 0; }
.transit dd { margin: var(--s-1) 0 0; }

/* Kontakt */
.contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--line-chalk);
  border: 1px solid var(--line-chalk);
  margin-bottom: var(--s-8);
}
.contact-card {
  background: var(--ink);
  padding: var(--s-6);
  text-decoration: none;
  display: flex; flex-direction: column; gap: var(--s-2);
  transition: background var(--d-1) var(--ease);
}
.contact-card:hover { background: #2E2B26; }
.contact-card__label {
  font-family: var(--mono); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--signal-lite);
}
.contact-card__value {
  font-size: var(--t-lg); font-weight: 700; font-stretch: 92%;
  letter-spacing: -.02em; color: var(--paper); word-break: break-word;
}
.contact-card__hint { font-family: var(--mono); font-size: var(--t-3xs); color: var(--chalk); }

.social-row { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: 0; }
.social-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--chalk);
}
.social-link:hover { color: var(--paper); }
.social-link__icon { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------- 8 FUSSZEILE */

.site-footer { background: var(--ink); color: var(--chalk); padding-block: var(--s-16) var(--s-8); }
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--line-chalk);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--paper); text-decoration-color: var(--line-chalk); }
.site-footer a:hover { color: var(--signal-lite); }
.footer-brand { margin-bottom: var(--s-4); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer-nav a {
  font-family: var(--mono); font-size: var(--t-2xs);
  letter-spacing: .08em; text-transform: uppercase;
}
.footer-legal {
  padding-top: var(--s-6);
  font-family: var(--mono); font-size: var(--t-3xs);
  color: var(--chalk); opacity: .75;
}

/* ------------------------------------------------------- 9 SONDERFÄLLE */

.legal { max-width: 46rem; padding-block: var(--section-y); }
.legal h1 { margin-bottom: var(--s-8); }
.legal h2 {
  font-size: var(--t-lg);
  margin: var(--s-12) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.legal address { font-style: normal; }
.back-link {
  display: inline-block; margin-bottom: var(--s-8);
  font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.back-link:hover { color: var(--signal-ink); }

/* Newsletter-Fenster */
.nl { border: 0; padding: 0; background: transparent; max-width: 30rem; width: calc(100% - 2rem); }
.nl::backdrop { background: rgba(34, 32, 28, .62); }
.nl__box { position: relative; background: var(--paper); border: 1px solid var(--ink); padding: var(--s-8); }
.nl__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.nl__close:hover { background: var(--ink); color: var(--paper); }
.nl__close svg { width: 12px; height: 12px; }
.nl h2 { font-size: var(--t-xl); margin: var(--s-3) 0 var(--s-4); }
.nl__text { font-size: var(--t-sm); color: var(--ink-2); }
.nl__form { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.nl__label {
  font-family: var(--mono); font-size: var(--t-3xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.nl__input {
  font: inherit; font-size: var(--t-sm);
  padding: .75rem; border: 1px solid var(--line-2); border-radius: 0;
  background: var(--paper-2); color: var(--ink);
}
.nl__input:focus { border-color: var(--ink); }
.nl__consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  font-size: var(--t-xs); color: var(--ink-2);
}
.nl__consent input { margin-top: .2rem; accent-color: var(--signal); }
.nl__hinweis { margin-top: var(--s-4); font-family: var(--mono); font-size: var(--t-3xs); color: var(--ink-2); }

/* --------------------------------------------------------- 10 BEWEGUNG */

/* Ein Vokabular, kein Sammelsurium: Die Seite verhält sich wie ein Plotter,
   der ein technisches Blatt zeichnet. Linien fahren aus, Text wird Wort für
   Wort gesetzt, Flächen werden von links nach rechts geplottet, Kürzel
   erscheinen Zeichen für Zeichen.

   Alle Startzustände hängen an .anim. Diese Klasse setzt atlas.js erst,
   NACHDEM die Beobachter stehen — bricht das Skript vorher ab, bleibt
   schlicht alles sichtbar. Bei „Bewegung reduzieren" wird sie nie gesetzt. */

/* Wortmaske: das Wort sitzt in einem Fenster und fährt von unten herein.
   Das Polster unten fängt Unterlängen ab, die sonst abgeschnitten würden. */
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.wm__i { display: inline-block; will-change: transform; }
.anim .wm__i { transform: translateY(112%); }
.anim .is-in .wm__i,
.anim .wm.is-in .wm__i {
  transform: none;
  transition: transform 680ms var(--ease-out) var(--wd, 0ms);
}

/* Zeichenweise: für die Monospace-Kürzel. Hartes Aufblitzen, kein Überblenden
   — ein Plotter setzt ein Zeichen oder eben nicht. */
.anim .tw__c { opacity: 0; }
.anim .is-in .tw__c { opacity: 1; transition: opacity 1ms linear var(--cd, 0ms); }

/* Linie fährt aus */
.anim .draw { position: relative; }
.anim .draw::after {
  content: "";
  position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.anim .draw--bottom::after { bottom: -1px; }
.anim .draw--top::after    { top: -1px; }
.anim .draw.is-in::after {
  transform: scaleX(1);
  transition: transform 760ms var(--ease-out) var(--rd, 40ms);
}
.section--ink .draw::after { background: var(--chalk); }

/* Fläche wird geplottet. „backwards" statt „forwards": nach dem Lauf gilt
   wieder die normale Regel, sonst würde der Beschnitt dauerhaft am Rand
   kleben und Fokusrahmen abschneiden. */
@keyframes plot-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.anim .plot { clip-path: inset(0 100% 0 0); }
.anim .plot.is-in {
  clip-path: none;
  animation: plot-wipe 820ms var(--ease-out) var(--wd, 0ms) backwards;
}

/* Fortschrittslinie unter dem Kopfbereich — das Blatt, das durchläuft. */
.progress {
  position: fixed;
  left: 0; right: 0;
  top: var(--topbar-h);
  height: 2px;
  z-index: 99;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  background: var(--signal);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

/* Blattregister am linken Rand. Nur dort, wo daneben wirklich Platz ist. */
.sheet-index {
  display: none;
  position: fixed;
  left: clamp(.75rem, 1.4vw, 1.5rem);
  top: 50%;
  z-index: 90;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: var(--t-3xs); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
  transition: opacity var(--d-2) var(--ease);
}
.sheet-index b { color: var(--signal-ink); font-weight: 500; }
.sheet-index[data-empty] { opacity: 0; }
@media (min-width: 92rem) { .anim .sheet-index { display: block; } }

/* Eckmarken beim Überfahren einer Markenkarte — Passermarken, keine Schatten */
.brand { position: relative; }
.brand::before, .brand::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--signal);
  opacity: 0;
  transition: opacity var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.brand::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; transform: translate(4px, 4px); }
.brand::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; transform: translate(-4px, -4px); }
.brand:hover::before, .brand:hover::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progress, .sheet-index { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------- 11 RESPONSIVE */

@media (max-width: 62rem) {
  .hero-inner { grid-template-columns: 1fr; align-items: start; }
  /* Einspaltig rutscht die Faktentafel sonst unter die Falz. Öffnungsstatus,
     Zeiten und Telefonnummer sind aber der Grund, warum die Seite auf dem
     Handy aufgerufen wird — also kommen sie zuerst. Die Reihenfolge im
     Quelltext bleibt unverändert, damit die Überschrift für Vorleseprogramme
     und Antwortmaschinen weiterhin den Anfang bildet. */
  .titleblock { order: -1; margin-bottom: var(--s-8); }
  .section-grid, .section-grid--media { grid-template-columns: 1fr; }
  .cats li { grid-template-columns: 1fr; }

  /* Einspaltig laeuft der Text ueber die ganze Breite — rechts bleibt kein
     Platz, an dem das Foto scharf stehen koennte. Der Schleier deckt deshalb
     durchgehend, und das Foto kommt als eigenes Bild darunter. */
  .section-foto::after {
    -webkit-mask-image: none;
            mask-image: none;
    opacity: .95;
  }
  .media--nur-schmal { display: block; margin-top: var(--s-8); }
  .why, .callout { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: .5rem .75rem;
    border: 1px solid var(--ink); background: transparent; color: var(--ink);
    font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
  .nav-toggle__bars { position: relative; width: 14px; height: 9px; }
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; right: 0;
    height: 1.5px; background: currentColor;
    transition: transform var(--d-2) var(--ease);
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars::after  { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-3.75px) rotate(-45deg); }

  .header-inner { position: relative; }
  .js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--ink);
    padding: var(--s-4) var(--gutter) var(--s-6);
    margin-inline: calc(var(--gutter) * -1);
  }
  .js .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    display: block; padding-block: var(--s-3); padding-left: var(--s-3);
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
  }
  .site-nav a[aria-current="true"] { border-left-color: var(--signal); border-bottom-color: var(--line); }

  /* Impressum und Datenschutz haben kein Burger-Menü, sondern nur zwei Links.
     Dort bleibt die Navigation eine gewöhnliche Zeile — die aufgeklappte
     Spalte oben ist die Darstellung im geöffneten Menü und passt hier nicht. */
  .site-nav[aria-label="Rechtliches"] ul { flex-direction: row; flex-wrap: wrap; gap: var(--s-4); }
  .site-nav[aria-label="Rechtliches"] a {
    display: inline-block;
    padding: var(--s-1) 0;
    border-bottom: 2px solid transparent;
    border-left: 0;
  }

  /* Auf schmalen Bildschirmen kostet der Streifen dauerhaft Platz, deshalb
     umbrechen statt quetschen: Marke und Angebot oben, Fußnote darunter. */
  .sale__inner { flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
  .sale__stage { flex: 1 1 60%; }
  .sale__note { flex: 1 1 100%; text-align: left; order: 3; }
  .sale__dots { order: 2; margin-left: auto; }

  .tb__grid { grid-template-columns: 1fr; }
}