/* =========================================================================
   Änderungsschneiderei — Stylesheet
   Visuelle Welt: weißes Papier, Schnittmuster-Raster, Auftragszettel.
   Angelehnt an das Referenz-Designsystem (Pill-Radien, ultraflache Schatten,
   system-ui-Typografie), umgesetzt in Weiß mit grünen und grauen Akzenten.
   ========================================================================= */

/* ---------- Schrift ---------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-latin-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Flächen */
  --weiss:      #ffffff;
  --leinen:     #faf8f7;
  --dunst:      #f4f6f4;

  /* Grün — die einzige chromatische Familie */
  --gruen-50:   #f1f7f3;
  --gruen-100:  #e0efe6;
  --gruen-200:  #bfdccb;
  --gruen-250:  #a8e2c4;
  --gruen-300:  #8ad3ac;
  --gruen-400:  #58a37c;
  --gruen-500:  #3f8f68;
  --gruen-600:  #2c7a56;
  --gruen-700:  #1f5c40;
  --gruen-800:  #1a4b38;
  --gruen-900:  #12362a;

  /* Grau — alles Zweite */
  --tinte:      #000000;
  --karbon:     #333333;
  --schiefer:   #595959;
  --stahl:      #737373;
  --nebel:      #808080;
  --silber:     #cfcfcf;
  --haarlinie:  #e6e6e3;

  --rot:        #d92d20;
  --rot-tief:   #b8241a;   /* Daten in der Urlaubszeile — 6,35:1 auf Weiß */
  --rot-dunkel: #8f1a12;   /* Tiefpunkt des Info-Pulses — 9,03:1 auf Weiß */

  /* Radien */
  --r-pill:  999px;
  --r-float: 20px;
  --r-card:  16px;
  --r-input: 12px;

  /* Schatten: ultraflach, mehrlagig */
  --sh-1: 0 1px 1px rgba(0,0,0,.02), 0 2px 4px rgba(0,0,0,.02), 0 5px 9px rgba(0,0,0,.02);
  --sh-2: 0 1px 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.03), 0 8px 16px rgba(0,0,0,.03), 0 18px 32px rgba(0,0,0,.02);
  --sh-3: 0 1px 2px rgba(0,0,0,.04), 0 4px 10px rgba(0,0,0,.04), 0 14px 28px rgba(0,0,0,.05), 0 28px 52px rgba(0,0,0,.03);
  --sh-hair: 0 0 0 1px var(--haarlinie);

  /* Raster */
  --wrap: 1200px;
  --luft: clamp(20px, 5vw, 40px);
  --abschnitt: clamp(64px, 8vw, 96px);

  /* Übergänge */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --weich: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset & Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--tinte);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--gruen-700); text-decoration-color: var(--gruen-200); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gruen-600); }

/* Browser-Oberflächen mit ins Design nehmen */
::selection { background: var(--gruen-100); color: var(--gruen-900); }
:root { accent-color: var(--gruen-600); caret-color: var(--gruen-600); scrollbar-color: var(--silber) var(--leinen); }
:focus-visible { outline: 2px solid var(--gruen-600); outline-offset: 3px; }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--leinen); }
  ::-webkit-scrollbar-thumb { background: var(--silber); border: 3px solid var(--leinen); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--stahl); }
}

/* ---------- Typografie-Rollen ---------- */
.display {
  font-size: clamp(2.125rem, 1.15rem + 3.9vw, 3.5rem);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
  /* „Datenschutzerklärung" ist auf 320 px breiter als die Spalte. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.h3 {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lead {
  font-size: clamp(1rem, .95rem + .3vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--karbon);
  max-width: 46ch;
}
.fliess { color: var(--karbon); max-width: 68ch; }
.fliess + .fliess { margin-top: 16px; }
.klein { font-size: .9375rem; line-height: 1.55; color: var(--schiefer); }
.mini {
  font-size: .8125rem; line-height: 1.25; color: var(--stahl);
}
.notiz {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.38;
  color: var(--gruen-900);
  letter-spacing: 0;
  max-width: 30ch;
}
.zahl { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Platzhalter, die vor dem Onlinegang ersetzt werden müssen */
.ph {
  background: linear-gradient(to bottom, transparent 82%, var(--gruen-100) 82%);
  box-shadow: inset 0 -1px 0 var(--gruen-200);
  padding: 0 1px;
  white-space: nowrap;
}
/* Platzhalter, die ein ganzer Satz sind, müssen umbrechen dürfen — sonst schiebt
   ein einziger von ihnen die Seite quer aus dem Fenster. */
.ph--satz { white-space: normal; }

.ph-text {
  background: var(--gruen-50);
  border: 1px dashed var(--gruen-200);
  border-radius: var(--r-input);
  padding: 18px 20px 14px;
  color: var(--karbon);
}
.ph-text > p + p { margin-top: 12px; }
.ph-text::after {
  content: "Platzhaltertext — bitte ersetzen";
  display: block; margin-top: 12px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gruen-600);
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--luft); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--dunst { background: var(--dunst); }
.abschnitt--leinen { background: var(--leinen); }
.abschnitt--gruen { background: var(--gruen-50); }

.abschnitt__kopf { max-width: 62ch; margin-bottom: 40px; }
.abschnitt__kopf .fliess { margin-top: 14px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gruen-800); color: #fff; padding: 12px 20px;
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- Icons ---------- */
.ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ikon--gross { width: 26px; height: 26px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--voll { background: var(--gruen-700); color: #fff; box-shadow: var(--sh-1); }
.btn--voll:hover { background: var(--gruen-800); box-shadow: var(--sh-2); }

.btn--geist { background: transparent; color: var(--tinte); border-color: var(--silber); }
.btn--geist:hover { border-color: var(--tinte); background: var(--weiss); }

.btn--hell { background: var(--weiss); color: var(--gruen-900); box-shadow: var(--sh-1); }
.btn--hell:hover { background: var(--gruen-50); }

.btn--klein { min-height: 38px; padding: 8px 16px; font-size: .875rem; }

.btn--auf-foto { background: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
.btn--auf-foto:hover { background: var(--weiss); }
.btn .ikon { width: 18px; height: 18px; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.kopf.ist-gescrollt { border-bottom-color: var(--haarlinie); box-shadow: 0 1px 2px rgba(0,0,0,.02); }
.kopf__innen { display: flex; align-items: center; gap: 20px; min-height: 108px; }

.marke { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--tinte); margin-right: auto; }
.marke__zeichen { width: 84px; height: 84px; flex: none; display: block; }
/* Senkrechte Haarlinie zwischen Zeichen und Namenszug — dasselbe Trennzeichen
   wie in der Öffnungsanzeige und im Zeitenblock. */
.marke__strich { width: 1px; align-self: stretch; margin-block: 14px; background: var(--haarlinie); flex: none; }
/* Der Namenszug ist ein freigestelltes PNG aus dem eigenen Canva-Entwurf,
   1356 × 244 px. Gesteuert wird nur die Höhe, die Breite folgt. */
.marke__schrift { display: block; width: auto; height: 32px; flex: none; }

.nav { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--dunst); border-radius: var(--r-pill); }
.nav a {
  display: block; padding: 8px 12px; border-radius: var(--r-pill); font-size: .875rem;
  font-size: .9375rem; font-weight: 500; color: var(--karbon); text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: rgba(255,255,255,.75); color: var(--tinte); }
.nav a[aria-current="page"] { background: var(--weiss); color: var(--gruen-800); font-weight: 600; box-shadow: var(--sh-1); }

/* Der Telefonknopf zeigt nur das Zeichen. Die Nummer bleibt für Vorleseprogramme
   im Text stehen, damit der Knopf einen Namen hat. */
.kopf__tel { display: inline-flex; padding: 11px; }
.kopf__tel .ikon { width: 22px; height: 22px; }
.kopf__tel .nummer {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.nav .nav__tel { display: none; }
.nav-schalter {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--dunst); border: none; color: var(--tinte); cursor: pointer;
}
.nav-schalter .ikon--schliessen { display: none; }
.nav-schalter[aria-expanded="true"] .ikon--schliessen { display: block; }
.nav-schalter[aria-expanded="true"] .ikon--menue { display: none; }

/* ---------- Hinweisleiste (Vorschau) ---------- */
.vorschau-leiste {
  background: var(--gruen-900); color: #fff;
  font-size: .8125rem; line-height: 1.4;
}
.vorschau-leiste__innen { display: flex; align-items: center; gap: 14px; padding-block: 9px; }
.vorschau-leiste p { margin-right: auto; }
.vorschau-leiste strong { font-weight: 600; }
.vorschau-leiste button {
  flex: none; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--r-pill); font: inherit; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.vorschau-leiste button:hover { background: rgba(255,255,255,.22); }

/* ---------- Auftragszettel ---------- */
.zettel {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--haarlinie);
  border-radius: var(--r-card);
  padding: 18px 20px 20px;
  box-shadow: var(--sh-2);
}
.zettel__lochung {
  position: absolute; top: 16px; left: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dunst);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14), 0 0 0 1px var(--haarlinie);
}
.zettel__faden { position: absolute; top: -16px; left: 11px; width: 16px; height: 36px; color: var(--gruen-200); pointer-events: none; }
.zettel__kopf { display: flex; align-items: center; gap: 10px; padding-left: 24px; min-height: 20px; }
.zettel__teil {
  font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--stahl);
}
.zettel__perfo {
  height: 1px; margin: 12px -20px;
  background-image: repeating-linear-gradient(to right, var(--silber) 0 4px, transparent 4px 9px);
}
.zettel__arbeit { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.zettel__fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-top: 12px; }
.zettel__preis { font-size: 1.0625rem; font-weight: 600; color: var(--gruen-700); letter-spacing: -.02em; }
.zettel__preis .ab { font-size: .75rem; font-weight: 500; color: var(--stahl); letter-spacing: 0; }
.zettel__dauer { font-size: .8125rem; color: var(--stahl); display: inline-flex; align-items: center; gap: 5px; }
.zettel__dauer .ikon { width: 14px; height: 14px; }

/* ---------- Erster Blick: Foto der Schneiderei ---------- */
.buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.buehne__bild {
  order: 2;
  margin: 26px var(--luft) 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-float);
  background: var(--leinen);
  box-shadow: var(--sh-hair);
  overflow: hidden;
}

/* Das Foto liegt als echtes <img> im Rahmen, nicht als Hintergrund. So wählt
   der Browser selbst zwischen AVIF und JPEG, und es zählt als Ladepunkt. */
.buehne__bild picture { display: contents; }
.buehne__bild img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 50%;
}

.buehne__innen { order: 1; padding-block: clamp(32px, 5vw, 48px) 4px; }
.buehne__text { position: relative; }
.buehne .display { max-width: 26ch; font-size: clamp(1.875rem, 1.1rem + 3.1vw, 3.125rem); }
.buehne .lead {
  margin-top: 22px;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.25rem, 1.06rem + .78vw, 1.4375rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--karbon);
  /* Keine eigene Begrenzung: Der Satz soll in einer Zeile stehen und rechts
     unter dem Punkt von „Heimtextilien." enden. Die Spalte begrenzt ohnehin. */
  max-width: none;
}
.buehne .knopfreihe { margin-top: 28px; }

/* ---------- Live-Anzeige der Öffnungszeiten ----------
   Weiße Kapsel, schwarze Schrift. Farbe trägt einzig der Punkt:
   grün wenn geöffnet, rot wenn geschlossen. */
.status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 22px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 1px 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.03);
  color: var(--tinte);
  font-size: .8125rem;
  line-height: 1.25;
}

.status__punkt {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  flex: none; background: var(--stahl); color: var(--stahl);
}
/* Der Ring, der alle 2,4 Sekunden nach außen läuft: das Lebenszeichen */
.status__punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: puls-ring 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes puls-ring {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}

.status__wort { font-weight: 600; letter-spacing: -.005em; }
/* Das Vorwort steht hier und nicht im JavaScript, damit es sich über eine
   Klasse am <body> umschalten lässt. */
.status__wort::before { content: "Derzeit "; }
.status__trenner {
  width: 1px; height: 11px; flex: none;
  background: rgba(0, 0, 0, .14);
  margin-inline: 1px;
}
.status__rest { font-weight: 400; color: var(--karbon); }
.status__rest strong { font-weight: 700; color: var(--tinte); }

.status__wort, .status__trenner, .status__rest {
  animation: status-ein .55s var(--ease) .25s backwards;
}
.status__rest { animation-delay: .38s; }
@keyframes status-ein {
  from { opacity: 0; transform: translateX(-6px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.status--offen .status__punkt {
  background: var(--gruen-500); color: var(--gruen-500);
  box-shadow: 0 0 5px rgba(63, 143, 104, .75);
}
.status--zu .status__punkt {
  background: var(--rot); color: var(--rot);
  box-shadow: 0 0 5px rgba(217, 45, 32, .6);
}

/* Auf sehr schmalen Schirmen darf die Kapsel umbrechen */
@media (max-width: 430px) {
  .status { flex-wrap: wrap; row-gap: 2px; border-radius: 14px; }
  .status__trenner { display: none; }
  .status__rest { flex-basis: 100%; padding-left: 16px; }
}

/* Am Handy liegt das Foto ebenfalls hinter dem Text — nur mit senkrechtem
   Schleier statt seitlichem. Für links hell / rechts Bild ist auf 375 Pixeln
   kein Platz; oben deckend hinter der Schrift, nach unten auslaufend.
   Gemessen an den echten Bildpunkten: Überschrift 19,5:1, Untertitel 11,7:1,
   Knopf 10,3:1 — auch an der ungünstigsten Stelle. */
@media (max-width: 719px) {
  .buehne { display: block; min-height: 540px; position: relative; }
  .buehne__bild {
    position: absolute; inset: 0; z-index: -1; margin: 0;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  .buehne__bild img { object-position: 62% 46%; }
  .buehne__bild::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(255,255,255,.96) 0,
      rgba(255,255,255,.93) 46%,
      rgba(255,255,255,.62) 68%,
      rgba(255,255,255,.18) 86%,
      rgba(255,255,255,0)  100%);
  }
  .buehne__innen { padding-block: clamp(26px,7vw,40px) clamp(150px,34vw,200px); }
  .buehne__text { max-width: 30rem; }
}

/* Ab Tablet liegt das Foto hinter dem Text */
@media (min-width: 720px) {
  .buehne { display: block; min-height: 560px; }
  .buehne__bild {
    position: absolute; inset: 0; z-index: -1;
    margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  .buehne__bild img { object-position: 72% 42%; }
  /* Schleier, damit die Schrift auf jedem Stoffmuster sicher lesbar bleibt.
     Die Stufen hängen an der Textkante, nicht an der Fensterbreite: sonst
     wächst der weiße Streifen links mit jedem Zentimeter Fenster mit und das
     Foto rutscht immer weiter nach rechts. So bleibt der Schleier bei jeder
     Breite gleich breit und endet dort, wo der Text endet. */
  .buehne__bild::after {
    --kante: max(var(--luft), calc((100vw - var(--wrap)) / 2 + var(--luft)));
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(96deg,
      rgba(255,255,255,.94) 0,
      rgba(255,255,255,.90) var(--kante),
      rgba(255,255,255,.60) calc(var(--kante) + 250px),
      rgba(255,255,255,.10) calc(var(--kante) + 390px),
      rgba(255,255,255,0)   calc(var(--kante) + 500px));
  }
  .buehne__innen { padding-block: clamp(48px, 6vw, 104px) clamp(64px, 7vw, 96px); }
  .buehne__text { max-width: 30rem; }
}

@media (min-width: 1120px) {
  .buehne { min-height: 620px; }
  .buehne__text { max-width: 43rem; }
  .buehne__bild::after {
    background: linear-gradient(96deg,
      rgba(255,255,255,.94) 0,
      rgba(255,255,255,.90) var(--kante),
      rgba(255,255,255,.62) calc(var(--kante) + 330px),
      rgba(255,255,255,.12) calc(var(--kante) + 560px),
      rgba(255,255,255,0)   calc(var(--kante) + 740px));
  }
}

@media (min-width: 1440px) {
  .buehne { min-height: 660px; }
}

/* ---------- Wegweiser: die vier Bereiche als Etikettenfächer ---------- */
/* Die Reihe sitzt im grauen Abschnitt und wird auf die Kante des Fotos
   hochgezogen: obere Hälfte im Bild, untere Hälfte im Grau. */
.abschnitt--wegweiser { padding-top: 0; }

.wegweiser__reihe {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: clamp(40px, 5vw, 56px);
  padding-top: clamp(40px, 5vw, 56px);
}
.wegweiser__halter { position: relative; transition: transform .5s var(--ease); }

/* Lange und kurze Beschriftung der Wegweiser-Felder. Im Markup stehen beide;
   normal ist nur die lange zu sehen. Fassungen mit schmalen Feldern blenden
   stattdessen die kurze ein. Diese Grundregel muss in style.css stehen — sie
   lag einmal in varianten.css, die die echten Seiten nicht laden, und dann
   stand auf der Startseite „Leistungen & PreisePreise". */
.ww-lang { display: inline; }
.ww-kurz { display: none; }

.wegweiser__karte {
  position: relative; display: block;
  text-decoration: none; color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--haarlinie);
  border-radius: var(--r-card);
  padding: 14px 16px 16px;
  min-height: 84px;
  box-shadow: var(--sh-2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease);
  will-change: transform;
}

/* Die gestanzte Lochung und die Nadel, die darin steckt */
.wegweiser__lochung {
  display: block; position: absolute; top: 14px; left: 13px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dunst);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--haarlinie);
}
.wegweiser__nadel {
  position: absolute; top: 9.3px; left: 9.8px;
  width: 18px; height: 18px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.16));
}

.wegweiser__kopf { display: flex; align-items: center; gap: 6px; padding-left: 23px; min-height: 19px; }
.wegweiser__kopf .ikon { width: 19px; height: 19px; color: var(--gruen-700); }
.wegweiser__wort { font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; }
.wegweiser__pfeil {
  width: 14px; height: 14px; flex: none; margin-left: 1px;
  color: var(--gruen-500);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.wegweiser__perfo {
  display: block; height: 1px; margin: 9px -16px;
  background-image: repeating-linear-gradient(to right, var(--silber) 0 4px, transparent 4px 9px);
}
.wegweiser__dazu { display: block; font-size: .75rem; line-height: 1.4; color: var(--tinte); }

.wegweiser__karte:hover, .wegweiser__karte:focus-visible {
  border-color: var(--gruen-200); box-shadow: var(--sh-3);
}
.wegweiser__karte:hover .wegweiser__pfeil,
.wegweiser__karte:focus-visible .wegweiser__pfeil { transform: translateX(4px); color: var(--gruen-700); }

@media (min-width: 620px) {
  .wegweiser__reihe { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .wegweiser__halter:nth-child(1) .wegweiser__karte { transform: rotate(-1.8deg); }
  .wegweiser__halter:nth-child(2) .wegweiser__karte { transform: rotate(1.4deg); }
  .wegweiser__halter:nth-child(3) .wegweiser__karte { transform: rotate(-1deg); }
  .wegweiser__halter:nth-child(4) .wegweiser__karte { transform: rotate(2deg); }
  .wegweiser__karte:hover, .wegweiser__karte:focus-visible { transform: rotate(0deg) translateY(-6px); }
}

/* Ab hier liegt das Foto hinter dem Text, die Reihe rutscht auf seine Kante */
@media (min-width: 720px) {
  .wegweiser__reihe { padding-top: 0; margin-top: -50px; }
}

/* Ab hier liegen die vier Etiketten als Fächer übereinander und spreizen sich */
@media (min-width: 1120px) {
  .wegweiser__reihe { display: flex; gap: 0; padding-left: calc(var(--luft) + 6px); }
  .wegweiser__halter { flex: 1 1 0; min-width: 0; margin-left: -24px; }
  .wegweiser__halter:first-child { margin-left: 0; }
  .wegweiser__halter:nth-child(1) { z-index: 1; }
  .wegweiser__halter:nth-child(2) { z-index: 2; }
  .wegweiser__halter:nth-child(3) { z-index: 3; }
  .wegweiser__halter:nth-child(4) { z-index: 4; }
  .wegweiser__halter:nth-child(1) .wegweiser__karte { transform: rotate(-2.4deg); }
  .wegweiser__halter:nth-child(2) .wegweiser__karte { transform: rotate(-.8deg); }
  .wegweiser__halter:nth-child(3) .wegweiser__karte { transform: rotate(.8deg); }
  .wegweiser__halter:nth-child(4) .wegweiser__karte { transform: rotate(2.4deg); }
  /* Der Fächer geht auf: verschoben wird über transform, nicht über margin,
     sonst rechnet der Browser bei jedem Bild das ganze Layout neu. */
  .wegweiser__reihe:hover .wegweiser__halter:nth-child(2),
  .wegweiser__reihe:focus-within .wegweiser__halter:nth-child(2) { transform: translateX(11px); }
  .wegweiser__reihe:hover .wegweiser__halter:nth-child(3),
  .wegweiser__reihe:focus-within .wegweiser__halter:nth-child(3) { transform: translateX(22px); }
  .wegweiser__reihe:hover .wegweiser__halter:nth-child(4),
  .wegweiser__reihe:focus-within .wegweiser__halter:nth-child(4) { transform: translateX(33px); }
  .wegweiser__halter:hover, .wegweiser__halter:focus-within { z-index: 9; }
  .wegweiser__halter:hover .wegweiser__karte,
  .wegweiser__halter:focus-within .wegweiser__karte {
    transform: rotate(0deg) translateY(-10px) scale(1.03);
  }
}

/* Der eine inszenierte Moment: die Etiketten legen sich beim Laden auf den Tisch */
@keyframes zettel-legen {
  from { opacity: 0; transform: translateY(-18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.js .wegweiser__halter { animation: zettel-legen .9s var(--ease) backwards; }
.js .wegweiser__halter:nth-child(1) { animation-delay: .10s; }
.js .wegweiser__halter:nth-child(2) { animation-delay: .22s; }
.js .wegweiser__halter:nth-child(3) { animation-delay: .34s; }
.js .wegweiser__halter:nth-child(4) { animation-delay: .46s; }

/* ---------- Teile-Auswahl: Zeilen mit Maßband ----------
   Beim Zeigen legt sich über 1,6 Sekunden ein Maßband unter die Zeile.
   Beim Verlassen ist es ohne Übergang wieder weg: Eine Rückwärtsbewegung
   beim Wandern von Zeile zu Zeile wäre unruhig. */
.teile { border-top: 1px solid var(--haarlinie); }

.teile__zeile {
  position: relative; display: flex; align-items: center; gap: 20px;
  padding: 22px 8px 22px 4px;
  border-bottom: 1px solid var(--haarlinie);
  text-decoration: none; color: var(--karbon);
  transition: color 1.2s var(--weich);
}
.teile__ikon {
  width: 30px; height: 30px; flex: none;
  color: var(--silber); fill: none;
  transition: color 1.2s var(--weich);
}
.teile__name { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; color: var(--tinte); }
.teile__dazu {
  /* War --nebel (3,95:1 auf Weiß), dann --stahl. Auf dem hellgrauen Grund
     der Karte liegt --stahl aber bei 4,37:1 und damit immer noch unter dem
     Grenzwert — gemessen auf dem Handy. Jetzt --schiefer: 7,0:1. */
  margin-left: auto; font-size: .8125rem; color: var(--schiefer);
  transition: color 1.2s var(--weich);
}
.teile__pf {
  width: 16px; height: 16px; flex: none; fill: none;
  color: var(--silber);
  transition: color 1.2s var(--weich), transform 1.2s var(--weich);
}

.teile__zeile:hover, .teile__zeile:focus-visible { color: var(--gruen-900); }
.teile__zeile:hover .teile__ikon,
.teile__zeile:hover .teile__dazu,
.teile__zeile:hover .teile__pf,
.teile__zeile:focus-visible .teile__ikon,
.teile__zeile:focus-visible .teile__dazu,
.teile__zeile:focus-visible .teile__pf { color: var(--gruen-700); }
.teile__zeile:hover .teile__pf,
.teile__zeile:focus-visible .teile__pf { transform: translateX(5px); }

/* Das Maßband: feine Striche alle 15 px, längere alle 45, darunter die Kante */
.teile__zeile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 11px; opacity: .85;
  background:
    repeating-linear-gradient(to right, var(--gruen-500) 0 1px, transparent 1px 15px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(to right, var(--gruen-500) 0 1px, transparent 1px 45px) bottom / 100% 10px no-repeat,
    linear-gradient(var(--gruen-500), var(--gruen-500)) bottom / 100% 1px no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: none;
}
.teile__zeile:hover::after, .teile__zeile:focus-visible::after {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s var(--weich);
}

@media (max-width: 620px) {
  .teile__zeile { flex-wrap: wrap; gap: 0 14px; padding: 18px 4px; }
  .teile__ikon { width: 24px; height: 24px; }
  .teile__name { font-size: 1rem; }
  .teile__dazu { flex-basis: 100%; margin-left: 0; padding-left: 38px; margin-top: 3px; }
  .teile__pf { margin-left: auto; }
}

/* ---------- Leistungslisten ---------- */
.bretter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
.liste {
  background: var(--weiss); border: 1px solid var(--haarlinie);
  border-radius: var(--r-float); padding: 8px 24px 12px; box-shadow: var(--sh-1);
}
.liste__kopf { display: flex; align-items: center; gap: 12px; padding: 20px 0 16px; }
.liste__kopf .ikon { color: var(--gruen-700); }
.liste__kopf h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.liste li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--haarlinie); }
.liste li > span:first-child { flex: 1; }
.liste li b { font-weight: 500; }
.liste li .preis { font-weight: 600; color: var(--gruen-700); white-space: nowrap; }
.liste li .dauer { font-size: .8125rem; color: var(--stahl); white-space: nowrap; min-width: 84px; text-align: right; }
.liste__fuss { padding: 14px 0 10px; border-top: 1px solid var(--haarlinie); }

/* ---------- Warum ändern: Farbfeld links, Liste rechts ----------
   Der Abschnitt läuft randlos über die volle Breite, der Text sitzt trotzdem
   auf derselben Kante wie der Rest der Seite. Beim Zeigen auf einen Eintrag
   treten die anderen zurück — Scheinwerfer statt Farbwechsel. */
.warum {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  min-height: min(78vh, 680px);
}

.warum__farbe {
  background: var(--gruen-900); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(48px, 6vw, 88px)
           max(var(--luft), calc((232.5581% - var(--wrap)) / 2 + var(--luft)));
}
.warum__label {
  font-size: .9375rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8ad3ac;
}
.warum__gross {
  margin-top: 20px;
  font-size: clamp(2rem, .9rem + 4.6vw, 4rem);
  font-weight: 700; letter-spacing: -.055em; line-height: 1.04;
  text-wrap: balance;
}
.warum__unter {
  margin-top: 24px; max-width: 32ch;
  font-size: 1.0625rem; color: #fff; line-height: 1.6;
}

.warum__weiss {
  background: var(--weiss);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 4vw, 56px)
           max(var(--luft), calc((175.4386% - var(--wrap)) / 2 + var(--luft)))
           clamp(34px, 4vw, 56px) clamp(28px, 4vw, 64px);
}
.warum__zeile {
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--haarlinie);
  transition: opacity .8s var(--weich), filter .8s var(--weich), transform .8s var(--weich);
}
.warum__zeile:last-child { border-bottom: none; }
.warum__marke {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinte);
}
.warum__titel {
  margin-top: 10px;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.warum__text {
  margin-top: 10px; font-size: .9375rem; color: var(--tinte);
  line-height: 1.65; max-width: 52ch;
}

/* Scheinwerfer: der berührte Eintrag bleibt scharf, die anderen treten zurück */
.warum__weiss:has(.warum__zeile:hover) .warum__zeile:not(:hover) {
  opacity: .26; filter: blur(1.2px);
}
.warum__zeile:hover { transform: scale(1.015); }

@media (max-width: 900px) {
  .warum { grid-template-columns: 1fr; min-height: 0; }
  .warum__farbe { padding: clamp(44px, 7vw, 64px) var(--luft); }
  .warum__weiss { padding: clamp(30px, 5vw, 48px) var(--luft); }
}

/* ---------- Ablauf: fünf Schritte, der Rahmen leuchtet beim Zeigen auf ---------- */
.ablauf { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.schritt { position: relative; background: var(--weiss); border-radius: var(--r-card); }

/* Rahmen und Licht liegen als zwei Konturen desselben Rechtecks übereinander */
.schritt__rahmen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.schritt__rahmen rect {
  fill: none; x: .5px; y: .5px;
  width: calc(100% - 1px); height: calc(100% - 1px); rx: 15.5px;
}
.schritt__linie { stroke: var(--haarlinie); stroke-width: 1; }
.schritt__licht {
  stroke: var(--gruen-600); stroke-width: 1.6; opacity: 0;
  filter: drop-shadow(0 0 0 rgba(44, 122, 86, 0));
  transition: opacity 1.8s var(--weich), filter 1.8s var(--weich);
}
.schritt:hover .schritt__licht,
.schritt:focus-within .schritt__licht {
  opacity: 1; filter: drop-shadow(0 0 6px rgba(44, 122, 86, .5));
}

.schritt__innen {
  position: relative; z-index: 1;
  padding: clamp(22px, 2.2vw, 30px) clamp(16px, 1.6vw, 24px) clamp(26px, 2.6vw, 34px);
  min-height: clamp(215px, 21vw, 262px);
}
/* Nummer und Zuordnung stehen nebeneinander mit festem Abstand. Mit
   space-between hing die Lücke an der Wortlänge: nach „Schneiderei" klaffte sie,
   nach „Maß & Markierung" nicht. */
.schritt__kopf { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; }
.schritt__nr {
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em;
  color: var(--tinte); font-variant-numeric: tabular-nums;
}
.schritt__marke {
  font-size: .625rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinte);
}
.schritt__titel {
  margin-top: 22px; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  font-weight: 500; letter-spacing: -.025em; color: var(--tinte); line-height: 1.25;
}
.schritt__satz {
  margin-top: 12px; font-size: .9375rem; line-height: 1.72;
  color: var(--tinte); max-width: 24ch;
}
.schritt__strich {
  display: block; height: 1px; background: var(--gruen-600); margin-top: 18px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--weich);
}
.schritt:hover .schritt__strich,
.schritt:focus-within .schritt__strich { transform: scaleX(1); }

@media (max-width: 1080px) {
  .ablauf { grid-template-columns: 1fr 1fr; }
  .schritt__satz { max-width: 34ch; }
}
@media (max-width: 620px) {
  .ablauf { grid-template-columns: 1fr; }
  .schritt__innen { min-height: 0; }
  .schritt__titel { margin-top: 16px; }
}


/* ---------- Aktuelles: Urlaub und Weiteres ---------- */
.urlaub__kopf { text-align: center; margin-bottom: clamp(28px, 3.2vw, 44px); }

/* ---------- Der übernächste Urlaub: Zeile zum Aufklappen ----------
   Zwischen zwei Haarlinien sitzt eine Kapsel. Ein Klick fährt darunter
   dasselbe Kalenderblatt heraus wie oben — nicht ein zweites Design,
   sondern dasselbe. Das Blatt oben gehört dem Urlaub, der als Nächstes
   ansteht; alles Weitere bleibt eingeklappt. */
.danach { margin-bottom: clamp(34px, 4vw, 56px); }
.danach[hidden] { display: none; }

/* Steht die Zeile darunter, rückt das Blatt näher heran. */
[data-urlaubsblock] > .urlaub__blatt { margin-bottom: clamp(34px, 4vw, 56px); }
[data-urlaubsblock]:has(.danach:not([hidden])) > .urlaub__blatt {
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.danach__reihe {
  display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px);
  max-width: 620px; margin-inline: auto;
}
.danach__strich { flex: 1 1 0; height: 1px; background: var(--haarlinie); }

.danach__knopf {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 11px;
  border: 0; min-height: 42px; padding: 0 19px; border-radius: var(--r-pill);
  background: var(--weiss); font: inherit; cursor: pointer; color: inherit;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.danach__knopf:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }

/* Der Rand liegt als SVG über dem Knopf: eine ruhende Haarlinie und darüber
   der grüne Ring, der auf- und abhellt.
   Das SVG wird um die halbe Strichbreite eingerückt. Maße und Radien des
   Rechtecks stehen als Attribute im HTML und brauchen kein CSS. Grund: die
   SVG-Geometrie als CSS-Eigenschaft (`x`, `width`, `rx` …) kennt nicht jeder
   Browser, und ohne sie wäre aus der Kapsel ein schwarzer Kasten geworden.

   Zu rx und ry: beide müssen der halben Höhe entsprechen. Mit rx allein
   klemmt der Browser ry auf die halbe Höhe und rx auf die halbe Breite —
   daraus wird eine Ellipse. Darum die feste Mindesthöhe von 42 px am Knopf:
   42 − 1,5 = 40,5, halb also 20,25. */
.danach__rahmen {
  position: absolute; left: .75px; top: .75px;
  /* Ein <svg> ist ein ersetztes Element: `inset` allein bemisst es nicht,
     es fiele auf seine Eigengröße von 300 × 150 zurück. Breite und Höhe
     müssen also gesetzt werden — beides ganz gewöhnliche CSS-Eigenschaften. */
  width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  overflow: visible; pointer-events: none;
}
.danach__spur { stroke: var(--haarlinie); stroke-width: 1.5; }
/* Der ganze Rand atmet — kein Lichtstück, das herumläuft. Fünf Sekunden je
   Zug, weich ein und aus: langsam genug, um nicht zu zappeln, deutlich genug,
   dass man den Knopf als Knopf erkennt. Der Schein wächst mit der Helligkeit. */
.danach__licht {
  stroke: var(--gruen-500); stroke-width: 1.5;
  opacity: .18;
  animation: danach-puls 5s ease-in-out infinite;
}
@keyframes danach-puls {
  0%, 100% { opacity: .16; filter: drop-shadow(0 0 0   rgba(63, 143, 104, 0)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 6px rgba(63, 143, 104, .42)); }
}

/* Beim Zeigen bleibt der Rand ruhig stehen und leuchtet ganz. */
.danach__knopf:hover .danach__licht,
.danach__knopf:focus-visible .danach__licht {
  animation: none; opacity: 1;
  filter: drop-shadow(0 0 6px rgba(63, 143, 104, .42));
}

.danach__wort {
  font-size: .875rem; font-weight: 600; color: var(--karbon); white-space: nowrap;
}
/* Das Kreuz wird beim Aufklappen zum Minus. */
.danach__kreis { position: relative; width: 17px; height: 17px; flex: none;
  border-radius: 50%; background: var(--gruen-50); }
.danach__kreis::before, .danach__kreis::after {
  content: ''; position: absolute; left: 50%; top: 50%; border-radius: 1px;
  background: var(--gruen-700); transform: translate(-50%, -50%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.danach__kreis::before { width: 7px; height: 1.6px; }
.danach__kreis::after  { width: 1.6px; height: 7px; }
.danach__knopf[aria-expanded="true"] .danach__kreis::after {
  opacity: 0; transform: translate(-50%, -50%) rotate(90deg);
}

/* Von 0fr auf 1fr — der einzige Weg, echte Höhe weich zu animieren. */
.danach__klappe { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .62s var(--ease); }
.danach__klappe.ist-auf { grid-template-rows: 1fr; }
.danach__innen { overflow: hidden; }
.danach__blatt { margin-bottom: 0; margin-top: clamp(16px, 2vw, 24px); }

/* Unter 420 px bleiben von den Haarlinien nur 5-px-Stummel übrig.
   Dann steht die Kapsel besser allein in der Mitte. */
@media (max-width: 420px) {
  .danach__strich { display: none; }
  .danach__reihe { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .danach__klappe { transition-duration: .01ms; }
  .danach__licht { animation: none; opacity: .4; filter: none; }
}
.urlaub__titel {
  display: inline-block; padding: 13px 30px 15px; border-radius: var(--r-card);
  background: var(--gruen-800);
  transition: background .6s var(--ease), transform .6s var(--ease);
}
.urlaub__titel:hover { background: var(--gruen-700); transform: translateY(-2px); }
.urlaub__titelwort {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.06; color: #fff;
}
.urlaub__live {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; font-size: 1rem; color: var(--karbon);
}
.urlaub__live[hidden] { display: none; }
.urlaub__live strong { font-weight: 700; color: var(--tinte); }
.urlaub__punkt {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gruen-600); flex: none;
}
.urlaub__punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gruen-600); animation: urlaub-puls 2.4s var(--ease) infinite;
}
@keyframes urlaub-puls {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}

.urlaub__blatt {
  max-width: 620px; margin: 0 auto clamp(34px, 4vw, 56px);
  background: var(--weiss); border-radius: var(--r-float);
  box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-2);
}
.urlaub__innen { padding: clamp(28px, 3.4vw, 44px); text-align: center; }
/* „Geschlossen" ist die Warnung, nicht die Auskunft — deshalb rot.
   Die Marken im Fuß („Letzter Tag davor", „Wieder da") bleiben grün. */
.urlaub__art {
  font-size: .9375rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rot-tief);
}
/* Datum im selben Stil wie der Monat: gleiches Gewicht, gleiche Laufweite */
.urlaub__spanne {
  display: flex; align-items: baseline; justify-content: center; gap: clamp(10px, 1.6vw, 18px);
  margin-top: 16px; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--tinte);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.urlaub__bis { font-size: .9375rem; font-weight: 500; letter-spacing: .02em; color: var(--stahl); }
.urlaub__monat {
  margin-top: 14px; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--tinte);
}
.urlaub__fuss {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(14px, 2.4vw, 30px);
  margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--haarlinie);
}
.urlaub__achse { background: var(--haarlinie); }
.urlaub__halb { display: flex; flex-direction: column; gap: 9px; }
.urlaub__wann {
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700);
}
.urlaub__datum { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); }

.weiter__marke {
  text-align: center; font-size: .9375rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stahl); margin-bottom: clamp(20px, 2.4vw, 30px);
}
.weiter__reihe {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3.4vw, 54px); max-width: 920px; margin-inline: auto;
}
.weiter__reihe::before {
  content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
  width: 1px; background: var(--haarlinie);
}
.weiter__feld {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(20px, 2.4vw, 30px) clamp(14px, 1.8vw, 22px);
}
.weiter__art {
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700);
}
.weiter__datum { margin-top: 12px; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.03em; color: var(--tinte); }
.weiter__strich {
  display: block; width: 26px; height: 1px; background: var(--silber); margin: 15px 0;
  transition: width .8s var(--ease), background .8s var(--ease);
}
.weiter__feld:hover .weiter__strich { width: 70px; background: var(--gruen-600); }
/* schwarz und größer, damit der Text gut lesbar ist */
.weiter__text { font-size: 1.0625rem; line-height: 1.62; color: var(--tinte); max-width: 36ch; }

@media (max-width: 820px) {
  .weiter__reihe { grid-template-columns: 1fr; }
  .weiter__reihe::before { display: none; }
  .urlaub__fuss { grid-template-columns: 1fr; }
  .urlaub__achse { display: none; }
}

/* Hinweisleiste über der Kopfzeile — nur bei Bedarf ins HTML einsetzen,
   der fertige Block steht in PLATZHALTER.md. Danach wieder entfernen. */
.hinweisleiste { background: var(--gruen-900); color: #fff; }
.hinweisleiste[hidden] { display: none; }
.hinweisleiste__innen { display: flex; align-items: center; gap: 14px; padding-block: 13px; }
.hinweisleiste__punkt {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gruen-300); flex: none;
}
.hinweisleiste__punkt::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gruen-300);
  animation: hinweis-puls 2.4s var(--ease) infinite;
}
@keyframes hinweis-puls {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.hinweisleiste__text { flex: 1; font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.hinweisleiste__text b { color: #fff; font-weight: 700; }
.hinweisleiste__zu {
  appearance: none; border: none; background: transparent; cursor: pointer; flex: none;
  width: 30px; height: 30px; border-radius: 50%; color: rgba(255,255,255,.7);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.hinweisleiste__zu svg { width: 15px; height: 15px; }
.hinweisleiste__zu:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Gut zu wissen: Aktendeckel mit Reiter ---------- */
.akte { margin-bottom: clamp(56px, 6.4vw, 104px); scroll-margin-top: 140px; }
.akte:last-of-type { margin-bottom: 0; }
.akte__reiter {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--weiss); border: 1px solid var(--haarlinie); border-bottom: none;
  border-radius: 14px 14px 0 0; padding: 14px 28px 13px; margin-left: clamp(16px, 3vw, 44px);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.025em; color: var(--tinte);
  position: relative; z-index: 3; transform: translateY(1px);
  box-shadow: 0 -10px 22px rgba(0,0,0,.045);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.akte:hover .akte__reiter { transform: translateY(-7px); border-color: var(--gruen-200); }
.akte__nr {
  font-size: .625rem; font-weight: 700; letter-spacing: .2em;
  color: var(--gruen-700); font-variant-numeric: tabular-nums;
}
.akte__deckel {
  position: relative; background: var(--weiss);
  border-radius: var(--r-float); box-shadow: var(--sh-3);
  transition: transform .5s var(--ease);
}
.akte:hover .akte__deckel { transform: translateY(-4px); }

/* Der Rahmen liegt als zweite Kontur über der ruhenden Haarlinie */
.akte__rahmen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.akte__rahmen rect {
  fill: none; x: .5px; y: .5px;
  width: calc(100% - 1px); height: calc(100% - 1px); rx: 19.5px;
}
.akte__linie { stroke: var(--haarlinie); stroke-width: 1; }
.akte__licht {
  stroke: var(--gruen-600); stroke-width: 1.6; opacity: 0;
  filter: drop-shadow(0 0 0 rgba(44,122,86,0));
  transition: opacity 1.8s var(--weich), filter 1.8s var(--weich);
}
.akte:hover .akte__licht { opacity: 1; filter: drop-shadow(0 0 6px rgba(44,122,86,.5)); }

.akte__innen {
  position: relative; z-index: 1;
  padding: clamp(26px, 3.2vw, 44px) clamp(24px, 3.2vw, 44px) clamp(30px, 3.6vw, 48px);
}
.akte__unterzeile { font-size: .9375rem; color: var(--schiefer); margin-bottom: clamp(24px, 2.8vw, 34px); }
.akte__unterkopf {
  font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gruen-700); padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--haarlinie);
}
.hinweis__reihe + .akte__unterkopf { margin-top: clamp(30px, 3.4vw, 46px); }

/* drei gleich breite Hinweise */
.hinweis__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.hinweis {
  padding: 18px 20px; background: var(--dunst); border-radius: var(--r-card);
  font-size: 1rem; line-height: 1.55; color: var(--tinte);
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.hinweis:hover { background: var(--gruen-50); transform: translateY(-3px); }

/* ---------- Bringen Sie mit: ein Bild, drei Punkte darin ----------
   Ersetzt auf „Gut zu wissen" die drei grauen Textkästen. Die Punkte im Bild
   sind prozentual gesetzt und gehören zu genau diesem Foto — wird das Foto
   getauscht, müssen die drei Werte im HTML neu bestimmt werden. */
.mitbringen {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(20px, 3vw, 40px); align-items: center;
}
.mitbringen__bild { position: relative; border-radius: var(--r-card); overflow: hidden; }
.mitbringen__bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mitbringen__punkt {
  position: absolute; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), var(--sh-1);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: var(--gruen-800);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}
/* Der Ring wächst nach außen, damit der Punkt selbst seine Größe behält. */
.mitbringen__punkt::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--gruen-300); opacity: 0; transition: opacity .45s var(--ease);
}
.mitbringen__punkt.ist-an {
  background: var(--gruen-700); color: var(--weiss);
  transform: translate(-50%, -50%) scale(1.12);
}
.mitbringen__punkt.ist-an::before { opacity: 1; }

.mitbringen__zeile {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--haarlinie);
}
.mitbringen__zeile:last-of-type { border-bottom: none; }
.mitbringen__nr {
  width: 24px; height: 24px; border-radius: 50%; background: var(--dunst);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: var(--karbon);
  font-variant-numeric: tabular-nums;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.mitbringen__zeile.ist-an .mitbringen__nr { background: var(--gruen-700); color: var(--weiss); }
.mitbringen__name { font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); }
.mitbringen__satz { margin-top: 4px; font-size: .9375rem; line-height: 1.6; color: var(--schiefer); }
/* Herkunftshinweis zum Motivbild. Muss stehen bleiben, solange das Bild eines ist. */
.mitbringen__quelle { margin-top: 12px; font-size: .75rem; color: var(--nebel); }

.mitbringen + .akte__unterkopf { margin-top: clamp(30px, 3.4vw, 46px); }

/* vier Schritte auf einer durchgehenden Haarlinie */
.kette { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 26px); }
.kette::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px;
  height: 1px; background: var(--silber); z-index: 0;
}
.messschritt { position: relative; z-index: 1; text-align: center; }
.messschritt__kreis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: var(--weiss);
  box-shadow: 0 0 0 1px var(--haarlinie);
  font-size: 1rem; font-weight: 600; color: var(--gruen-700); font-variant-numeric: tabular-nums;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.messschritt:hover .messschritt__kreis {
  background: var(--gruen-700); color: #fff;
  box-shadow: 0 0 0 7px var(--gruen-50); transform: translateY(-4px);
}
.messschritt__name { margin-top: 16px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); }
.messschritt__text { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--schiefer); }

@media (max-width: 900px) { .hinweis__reihe { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .mitbringen { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .kette { grid-template-columns: 1fr 1fr; }
  .kette::before { display: none; }
}
@media (max-width: 560px) { .kette { grid-template-columns: 1fr; } }

/* ---------- Preisseite: Bereichswahl und Preisliste ---------- */
.preiswahl {
  position: relative; display: flex; flex-wrap: nowrap; gap: 2px; padding: 5px;
  background: var(--dunst); border-radius: 20px; width: fit-content; max-width: 100%;
  margin-bottom: clamp(30px, 3.6vw, 50px);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.preiswahl::-webkit-scrollbar { display: none; }
.preiswahl__gleiter {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  background: var(--weiss); border-radius: 15px; box-shadow: var(--sh-1); pointer-events: none;
  transition: transform .55s var(--ease), width .55s var(--ease);
}
.preiswahl button {
  position: relative; z-index: 1; appearance: none; border: none; background: transparent;
  font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  padding: 11px 13px; border-radius: 15px; font-size: .875rem; color: var(--schiefer);
  white-space: nowrap; transition: color .4s var(--ease);
}
.preiswahl button:hover { color: var(--tinte); }
.preiswahl button.ist-aktiv { color: var(--tinte); font-weight: 600; }
.preiswahl button > span {
  /* Der Zähler liegt auf getöntem Grund, dort reichte --stahl mit 4,24:1 nicht. */
  font-size: .625rem; font-weight: 600; color: var(--schiefer); font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.05); padding: 2px 5px; border-radius: var(--r-pill);
}
.preiswahl button.ist-aktiv > span { background: var(--gruen-100); color: var(--gruen-800); }

.preisblock { margin-bottom: clamp(30px, 3.6vw, 52px); scroll-margin-top: 140px; }
.preisblock[hidden] { display: none; }
.preisblock__kopf { padding-left: 18px; border-left: 5px solid var(--gruen-600); margin-bottom: 20px; }
.preisblock__name {
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.12; color: var(--tinte);
}
.preisblock__hinweis { margin-top: 16px; font-size: .9375rem; color: var(--schiefer); max-width: 62ch; }

.preisliste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 4vw, 64px); }
.preiszeile {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px; margin-inline: -16px; border-radius: var(--r-input);
  border-bottom: 1px solid var(--haarlinie);
  transition: background .4s var(--ease);
  scroll-margin-top: 150px;
}
.preiszeile:hover { background: var(--gruen-50); }
.preiszeile--leer { border-bottom-color: transparent; min-height: 60px; background: none; }
.preiszeile--leer:hover { background: none; }
.preiszeile__was { font-size: 1.125rem; color: var(--tinte); flex: none; }
.preiszeile__luft { flex: 1 1 auto; min-width: 14px; }
.preiszeile__preis {
  font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; color: var(--tinte);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
  transition: color .4s var(--ease);
}
.preiszeile:hover .preiszeile__preis { color: var(--gruen-700); }
.preiszeile__preis--frage {
  font-size: 1rem; color: var(--gruen-700); letter-spacing: 0; font-variant-numeric: normal;
}

/* Maßeinheit hinter dem Betrag — klein und grau, damit die Zahl die Zeile führt. */
.preiszeile__einheit {
  margin-left: 2px; font-size: .8125rem; font-weight: 500;
  letter-spacing: 0; color: var(--stahl); font-variant-numeric: normal;
}

@media (max-width: 900px) { .preisliste { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .preiszeile__was { font-size: 1rem; }
  .preiszeile__preis { font-size: 1.125rem; }
}

/* ---------- Preistafel ---------- */
.tafel { width: 100%; border-collapse: collapse; text-align: left; }
.tafel caption { text-align: left; padding-bottom: 14px; color: var(--schiefer); font-size: .9375rem; }
.tafel th, .tafel td { padding: 14px 12px; border-bottom: 1px solid var(--haarlinie); vertical-align: baseline; }
.tafel th { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stahl); border-bottom-color: var(--silber); }
.tafel td:first-child, .tafel th:first-child { padding-left: 0; }
.tafel td:last-child, .tafel th:last-child { padding-right: 0; text-align: right; }
.tafel .preis { font-weight: 600; color: var(--gruen-700); white-space: nowrap; }
.tafel tbody tr:hover { background: var(--gruen-50); }
.tafel tr.tafel__gruppe td { padding-top: 34px; padding-left: 0; text-align: left; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; border-bottom-color: var(--silber); }
.tafel-rolle { overflow-x: auto; }

/* ---------- Kontakt: Aktendeckel „So erreichen Sie uns" ---------- */
/* Eigene Zeile mit Luft darunter: Die Öffnungszeiten-Aussage steht für sich,
   der Satz darunter ist die Einladung. Vorher trennte sie nur ein <br>,
   da klebten beide aneinander. */
.lead__stark { font-weight: 700; color: var(--tinte);
  display: block; margin-bottom: .62em; }

.erreichen { max-width: 680px; margin-inline: auto; text-align: center; }
.erreichen__reiter {
  display: inline-flex; align-items: center;
  background: var(--weiss); border: 1px solid var(--haarlinie); border-bottom: none;
  border-radius: 14px 14px 0 0; padding: 14px 30px 13px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.025em; color: var(--tinte);
  position: relative; z-index: 4; transform: translateY(1px);
  box-shadow: 0 -10px 22px rgba(0, 0, 0, .045);
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
/* Die Mappe hebt sich als GANZES. Vorher bewegten sich Reiter (-7 px) und
   Deckel (-4 px) verschieden weit — dabei riss zwischen beiden eine 4 px hohe
   Lücke auf und der Reiter sah aus, als gehöre er nicht dazu. Deshalb sitzt die
   Bewegung jetzt auf der Mappe selbst, nicht auf ihren Teilen. */
.erreichen { transition: transform .5s var(--ease); }
.erreichen:hover { transform: translateY(-4px); }
/* Der Reiter bekommt beim Zeigen dieselbe Randfarbe wie das Licht um den Deckel,
   damit die Umrandung durchläuft und nicht am Deckelrand aufhört. */
.erreichen:hover .erreichen__reiter { border-color: var(--gruen-600); }
.erreichen__deckel {
  position: relative; background: var(--weiss); border-radius: var(--r-float);
  box-shadow: var(--sh-3); text-align: left;
}
.erreichen__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.erreichen__rahmen rect { fill: none; x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 19.5px; }
.erreichen__linie { stroke: var(--haarlinie); stroke-width: 1; }
.erreichen__licht {
  stroke: var(--gruen-600); stroke-width: 1.6; opacity: 0;
  filter: drop-shadow(0 0 0 rgba(44, 122, 86, 0));
  transition: opacity 1.8s var(--ease), filter 1.8s var(--ease);
}
.erreichen:hover .erreichen__licht { opacity: 1; filter: drop-shadow(0 0 6px rgba(44, 122, 86, .5)); }
.erreichen__innen { position: relative; z-index: 1; padding: clamp(24px, 2.8vw, 36px) clamp(26px, 3.2vw, 42px); }

.erreichen__weg {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 6px 20px;
  padding: 17px 16px; margin-inline: -16px; border-radius: var(--r-input);
  border-bottom: 1px solid var(--haarlinie); color: inherit; text-decoration: none;
  transition: background .4s var(--ease);
}
.erreichen__weg:last-of-type { border-bottom: none; }
/* Keine grüne Markierung mehr: beim Zeigen hebt sich der Deckel, die Zeile
   selbst bekommt nur die grüne Linie unter der Marke und den Pfeil. */
.erreichen__weg:hover { background: transparent; }
.erreichen__marke {
  position: relative; font-size: .75rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700); min-width: 13ch;
}
.erreichen__wert {
  /* Größe bleibt bei 18 px, Schriftbild wie bei den Uhrzeiten: Gewicht 500 statt
     600 und Ziffern gleicher Breite. Sonst wirkt die Telefonnummer fetter und
     unruhiger als „09:00 – 13:00" in der Mappe daneben. */
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.025em; color: var(--tinte);
  font-variant-numeric: tabular-nums;
  transition: transform .5s var(--ease);
}
.erreichen__weg:hover .erreichen__wert { transform: translateX(3px); }
.erreichen__pfeil {
  width: 9px; height: 9px; border-right: 1.5px solid var(--silber); border-top: 1.5px solid var(--silber);
  transform: rotate(45deg); align-self: center;
  transition: transform .5s var(--ease);
}
.erreichen__weg:hover .erreichen__pfeil { transform: rotate(45deg) translate(3px, -3px); }

/* Zwei Deckel nebeneinander, gleich breit und gleich hoch. `stretch` allein
   genügt nicht — der Deckel muss die Höhe der Mappe auch annehmen, sonst bleibt
   der kürzere oben kleben. */
.paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 34px);
  align-items: stretch; max-width: 1000px; margin-inline: auto;
}
/* Steht nur noch ein Block im Paar, darf er nicht in der linken Hälfte
   kleben — eine Spalte, mittig, in lesbarer Breite. */
.paar--einzeln { grid-template-columns: minmax(0, 560px); justify-content: center; }
/* Der Deckel muss die volle Breite haben, der Reiter nur die seines Wortes.
   In einer Flex-Spalte greift `text-align: center` nicht mehr — ohne
   `align-items: center` wird der Reiter auf Deckelbreite gedehnt und die Mappe
   sieht aus wie zwei gestapelte Kästen. */
.paar .erreichen {
  max-width: none; margin-inline: 0;
  display: flex; flex-direction: column; align-items: center;
}
/* Beide Reiter gleich breit. Ohne das ist „Kontakt" 121 px und
   „Öffnungszeiten" 179 px — das Paar sitzt dann sichtbar schief über den
   Deckeln. Wird eine Beschriftung länger als 180 px, muss der Wert hoch. */
.paar .erreichen__reiter { min-width: 11.25rem; justify-content: center; }
.paar .erreichen__deckel { flex: 1; align-self: stretch; }
.paar .erreichen__innen {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
  height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.erreichen--zeiten .zeitplan { max-width: none; margin: 0; }
.erreichen--zeiten .zeitplan__tag:first-of-type { border-top: none; padding-top: 0; }
.erreichen--zeiten .zeitplan__zu { justify-content: center; }

/* Zwei senkrechte Haarlinien führen vom Fuß der Mappen zur Anfahrt — dasselbe
   Motiv wie die Kette in der Messanleitung auf „Gut zu wissen". */
.stege {
  max-width: 1000px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 34px);
  height: clamp(20px, 2.4vw, 30px);
}
.stege span { width: 1px; height: 100%; background: var(--haarlinie); justify-self: center; }

/* ---------- Kontakt: Anfahrt ----------
   Zwei Hälften mit senkrechter Haarlinie dazwischen, dieselbe Form wie der Fuß
   des Kalenderblatts auf „Aktuelles". Steht unter dem Aktendeckel, damit der
   Kasten schlank bleibt und die Anfahrt ganze Sätze bekommt. */
.anfahrt {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(16px, 2.6vw, 32px);
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3vw, 34px);
  background: var(--weiss); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--haarlinie);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Hebt sich beim Zeigen genauso wie der Deckel darüber. */
.anfahrt:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-3); }
.anfahrt__achse { background: var(--haarlinie); }
.anfahrt__halb { display: flex; flex-direction: column; gap: 8px; }
.anfahrt__marke {
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700);
}
.anfahrt__text { font-size: .9375rem; line-height: 1.55; color: var(--karbon); }
.anfahrt__text b { font-weight: 700; color: var(--tinte); }

/* ---------- Kontakt: Öffnungszeiten ---------- */
/* Ausklappbare Öffnungszeiten. Ohne die Variante koz--klapp verhält sich
   das <details> genau wie vorher: immer offen, Kopfzeile unsichtbar.
   Das Dreieck der Browser blenden wir aus, wir zeichnen einen eigenen Pfeil. */
.zeitklapp > summary { display: none; }
.zeitklapp > summary::-webkit-details-marker { display: none; }
.zeitklapp > summary::marker { content: ""; }
/* Grundaussehen der Infozeile. Sie ist normalerweise unsichtbar; die
   Regeln stehen hier und nicht in varianten.css, damit die Seite auch
   dann stimmt, wenn die Zeile einmal sichtbar wird. */
.zeitklapp__kurz { font-size: .9375rem; color: var(--tinte);
  font-variant-numeric: tabular-nums; }
.zeitklapp__pfeil { flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid var(--silber); border-bottom: 1.5px solid var(--silber); }

.zeitplan { max-width: 660px; margin: clamp(58px, 6.6vw, 100px) auto 0; }
.zeitplan__marke {
  text-align: center; font-size: .9375rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700); margin-bottom: clamp(18px, 2.2vw, 26px);
}
.zeitplan__tag { padding: 18px 0; border-bottom: 1px solid var(--haarlinie); }
.zeitplan__tag:first-of-type { border-top: 1px solid var(--haarlinie); }
.zeitplan__name {
  display: block; font-size: .875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte); margin-bottom: 12px;
}
.zeitplan__tag[data-heute] .zeitplan__name::after {
  content: "heute"; margin-left: 10px; font-size: .625rem; letter-spacing: .14em; color: var(--gruen-600);
}
.zeitplan__spannen { display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(14px, 2.2vw, 28px); }
.zeitplan__paar { display: flex; flex-direction: column; gap: 6px; }
.zeitplan__achse { background: var(--haarlinie); }
.zeitplan__wann { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); }
.zeitplan__uhr {
  /* 18 px wie die Werte in der Mappe daneben — beide Kästen lesen sich damit
     als dieselbe Schrift, nur der Inhalt unterscheidet sich. */
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.025em; color: var(--tinte);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.zeitplan__zu { margin-top: 20px; font-size: .9375rem; line-height: 1.5; color: var(--tinte); }
.zeitplan__zu b { font-weight: 600; }
/* Der Punkt läuft im Text mit, damit er auf jeder Breite an der ersten Zeile klebt. */
.zeitplan__punkt {
  display: inline-block; width: 6px; height: 6px; margin-right: 13px; vertical-align: middle;
  border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 3px rgba(217, 45, 32, .16);
}

/* ---------- Urlaubszeile ----------
   Steht statisch im HTML, damit sie auch ohne Skript zu sehen ist. Das Skript
   frischt die Daten aus URLAUB auf und nimmt die Zeile heraus, sobald der
   Urlaub vorbei ist. Siehe urlaubszeile() in main.js. */
.urlaubsinfo {
  position: relative; display: block; max-width: 1000px;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  background: var(--weiss); border-radius: var(--r-card); color: inherit; text-decoration: none;
  transition: transform .5s var(--ease);
}
.urlaubsinfo[hidden] { display: none; }
.urlaubsinfo:hover { transform: translateY(-2px); }
.urlaubsinfo__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.urlaubsinfo__rahmen rect { fill: none; x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 15.5px; }
.urlaubsinfo__linie { stroke: var(--haarlinie); stroke-width: 1; }
.urlaubsinfo__puls {
  stroke: var(--rot); stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(217, 45, 32, .32));
  animation: urlaubspuls 5.5s ease-in-out infinite;
}
@keyframes urlaubspuls { 0%, 100% { opacity: .42 } 50% { opacity: 1 } }
.urlaubsinfo__innen {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 18px 24px;
}
.urlaubsinfo__text { font-size: 1.0625rem; color: var(--karbon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urlaubsinfo__marke {
  font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  vertical-align: 1px; color: var(--rot);
  animation: urlaubsmarke 3s ease-in-out infinite;
}
@keyframes urlaubsmarke { 0%, 100% { color: var(--rot) } 50% { color: var(--rot-dunkel) } }
.urlaubsinfo__abstand { display: inline-block; width: 18px; }
.urlaubsinfo__stark { font-weight: 700; color: var(--tinte); }
.urlaubsinfo__datum { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rot-tief); }
.urlaubsinfo__pfeil {
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--silber); border-top: 1.5px solid var(--silber);
  transform: rotate(45deg); flex: none;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.urlaubsinfo:hover .urlaubsinfo__pfeil { transform: rotate(45deg) translate(3px, -3px); border-color: var(--rot); }

/* Erst ab 1101 px nebeneinander. Darunter ist die Wertspalte im Kontaktkasten
   schmaler als „Guntherstr. 137 · Braunschweig" (216 px) und die Anschrift
   bricht um — bei 861 px stehen dort nur 162 px zur Verfügung. */
@media (max-width: 1100px) {
  .paar { grid-template-columns: 1fr; }
  .stege { grid-template-columns: 1fr; }
  .stege span:last-child { display: none; }
}

@media (max-width: 640px) {
  .anfahrt { grid-template-columns: 1fr; gap: 18px; }
  .anfahrt__achse { display: none; }
}

@media (max-width: 760px) {
  .erreichen__weg { grid-template-columns: 1fr; gap: 6px; }
  .erreichen__pfeil { display: none; }
  .zeitplan__spannen { grid-template-columns: 1fr; }
  .zeitplan__achse { display: none; }
  .urlaubsinfo__text { font-size: .9375rem; white-space: normal; }
}

/* ---------- Kontaktkarten ---------- */
.kontaktgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.karte {
  background: var(--weiss); border: 1px solid var(--haarlinie);
  border-radius: var(--r-float); padding: 26px; box-shadow: var(--sh-1);
}
.karte h3 { margin-bottom: 12px; }
.karte .ikon { color: var(--gruen-700); margin-bottom: 14px; }
.karte a { font-weight: 500; }

.kontaktzeile { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.kontaktzeile .ikon { color: var(--gruen-700); margin-top: 3px; }

/* ---------- Bildplatz ---------- */
.bildplatz {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 32px;
  aspect-ratio: 4 / 3; border-radius: var(--r-float);
  background:
    repeating-linear-gradient(-45deg, var(--gruen-50) 0 12px, var(--weiss) 12px 24px);
  border: 1px dashed var(--gruen-200);
  color: var(--stahl);
}
.bildplatz .ikon { width: 28px; height: 28px; color: var(--gruen-400); }
.bildplatz b { display: block; color: var(--karbon); font-weight: 600; font-size: .9375rem; }

/* Das Foto vom Laden — sitzt an der Stelle, an der vorher der Bildplatz war,
   und übernimmt dessen Maße: Querformat 4:3 und derselbe Radius. */
.ladenbild { display: block; }
.ladenbild img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-float);
  box-shadow: var(--sh-hair);
}

/* ---------- Abschluss-Band ---------- */
/* Das Band war dunkelgrün und saß als Insel zwischen zwei weißen Flächen —
   oben der Google-Teil, unten die Fußzeile. Jetzt ist es weiß und nur durch eine
   Haarlinie nach oben abgesetzt. Nach unten keine Linie: dort schließt die
   Fußzeile mit ihrer eigenen Figur an. */
.band {
  background: var(--weiss);
  color: var(--tinte);
  border-top: 1px solid var(--haarlinie);
  border-radius: 0;
}
.band .h2 { color: var(--tinte); }
.band p { color: var(--karbon); }
.band p.fliess { max-width: 46ch; color: var(--karbon); }
.band a:not(.btn) { color: var(--tinte); text-decoration-color: var(--silber); }
.band__innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.band .knopfreihe { margin-top: 28px; }

/* Knöpfe auf dunklem Grund: nichts Weißes, beim Zeigen geprüft lesbar */
.btn--ruf {
  background: var(--gruen-800); color: #fff; border-color: var(--gruen-800);
  font-weight: 600; min-height: 48px; justify-content: center;
}
.btn--ruf:hover { background: var(--gruen-900); border-color: var(--gruen-900); color: #fff; }
.btn--weg {
  background: transparent; color: var(--tinte); border: 1px solid var(--silber);
  min-height: 48px; justify-content: center;
}
.btn--weg:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); color: #fff; }

/* Die Live-Anzeige im Band: keine Kapsel, Farbe trägt einzig der Punkt */
.band .status {
  background: transparent; border: none; box-shadow: none; padding: 0;
  backdrop-filter: none; margin-bottom: 18px; gap: 10px;
}
.band .status__wort { color: var(--tinte); }
.band .status__wort::after { content: ","; }
.band .status__trenner { display: none; }
.band .status__rest { color: var(--karbon); }
.band .status__rest strong { color: var(--tinte); }
.band .status--zu .status__punkt { color: var(--rot); }
.band .status--offen .status__punkt { color: var(--gruen-600); }

/* Der Ortsbereich: eigener Rahmen, der beim Zeigen aufleuchtet */
/* Der Ortsbereich ist ein Verweis auf die Route. An der Optik ändert das nichts:
   Die Bandregel .band a:not(.btn) würde sonst Farbe und Unterstreichung setzen. */
.ort {
  position: relative; display: block; margin-top: 30px;
  border-radius: var(--r-card); background: var(--gruen-50);
}
.band a.ort:not(.btn) { color: inherit; text-decoration: none; }
.ort__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.ort__rahmen rect { fill: none; x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: 15.5px; }
.ort__linie { stroke: var(--gruen-200); stroke-width: 1; }
.ort__licht {
  stroke: var(--gruen-600); stroke-width: 1.6; opacity: 0;
  filter: drop-shadow(0 0 0 rgba(44,122,86,0));
  transition: opacity 1.8s var(--weich), filter 1.8s var(--weich);
}
.ort:hover .ort__licht { opacity: 1; filter: drop-shadow(0 0 6px rgba(44,122,86,.45)); }
.ort__innen { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 18px 22px 20px; }
.ort__nadel { width: 26px; height: 26px; color: var(--gruen-600); flex: none; }
.ort__marke {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gruen-700); margin-bottom: 6px;
}
.ort__anschrift {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.02em;
  color: var(--tinte); line-height: 1.45;
}

/* Die Öffnungszeiten: die Zahl ist das Motiv, dazwischen nur Haarlinien */
.zeitblock__titel {
  font-size: clamp(1.1875rem, 1.05rem + .35vw, 1.3125rem); font-weight: 500;
  letter-spacing: -.03em; color: var(--tinte); margin-bottom: clamp(14px, 1.6vw, 20px);
}
.zeitblock__tag { padding: 22px 0; border-bottom: 1px solid var(--haarlinie); }
.zeitblock__tag:first-child { border-top: 1px solid var(--haarlinie); }
.zeitblock__name {
  display: flex; align-items: center; gap: 9px;
  font-size: .875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte); margin-bottom: 13px;
}
.zeitblock__tag[data-heute] .zeitblock__name::after {
  content: "heute"; font-size: .625rem; letter-spacing: .14em; color: var(--gruen-600);
}
.zeitblock__spannen { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 26px); }
.zeitblock__paar { display: flex; flex-direction: column; gap: 6px; }
.zeitblock__strich { width: 1px; background: var(--haarlinie); flex: none; }
.zeitblock__wann {
  font-size: .6875rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tinte);
}
.zeitblock__uhr {
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); font-weight: 500;
  letter-spacing: -.025em; color: var(--tinte); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.zeitblock__tag[data-heute] .zeitblock__uhr { color: var(--gruen-700); }
.zeitblock__zu {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 20px; font-size: .9375rem; color: var(--karbon);
}
.zeitblock__rotpunkt {
  width: 6px; height: 6px; border-radius: 50%; background: #ff6a5c; flex: none;
  box-shadow: 0 0 0 3px rgba(255,106,92,.2);
}
.zeitblock__zuwort { font-weight: 600; color: var(--tinte); }

/* ---------- Google: Karte und Bewertungen ----------
   Die Karte ist bis zum Klick nur eine Vorschau im Design der Seite. Erst dann
   wird der Google-Rahmen geladen — sonst ginge bei jedem Seitenaufruf die
   IP-Adresse jedes Besuchers an Google und die Seite bräuchte ein
   Einwilligungsbanner. Siehe karte() in main.js. */
.goo__kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 30px);
}
.goo__marke {
  font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700);
}
.goo__note {
  display: flex; align-items: center; gap: 11px; margin-top: 9px;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.goo__anzahl { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--schiefer); }
.goo__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .9375rem; font-weight: 600; color: var(--gruen-700); text-decoration: none;
}
.goo__link:hover { color: var(--gruen-800); }
.goo__pfeil {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .4s var(--ease);
}
.goo__link:hover .goo__pfeil { transform: rotate(45deg) translate(3px, -3px); }

.sterne { display: inline-flex; gap: 3px; }
.stern { width: 17px; height: 17px; color: #e8a33d; }
.sterne--klein .stern { width: 13px; height: 13px; }
.stern--leer { color: var(--silber); }   /* für Bewertungen unter fünf Sternen */

.gmap {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  background: var(--gruen-50); box-shadow: 0 0 0 1px var(--haarlinie);
  min-height: clamp(260px, 30vw, 360px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.gmap__gitter {
  position: absolute; inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(to right, var(--gruen-200) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--gruen-200) 0 1px, transparent 1px 46px);
}
.gmap__nadel {
  position: absolute; left: 50%; top: 24%; width: 30px; height: 30px; margin-left: -15px;
  color: var(--gruen-700); opacity: .35;
}
.gmap__karte {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: clamp(20px, 2.4vw, 28px); background: rgba(255, 255, 255, .93);
  border-radius: var(--r-input); margin: clamp(16px, 2vw, 24px); box-shadow: var(--sh-1);
}
.gmap__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.gmap__adr { font-size: .9375rem; color: var(--schiefer); }
.gmap__hinweis { font-size: .75rem; color: var(--stahl); line-height: 1.45; max-width: 34ch; }
.gmap__hinweis b { color: var(--karbon); }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Die Bewertungen stehen in der Schrift der Seite, nicht in der Serife. */
.bkarte {
  flex: 0 0 auto; width: clamp(250px, 24vw, 310px);
  display: flex; flex-direction: column; gap: 13px;
  padding: clamp(20px, 2.2vw, 26px); background: var(--weiss);
  border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--haarlinie);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bkarte:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-3); }
/* Eine lange Bewertung darf nicht alle Karten in die Höhe zwingen — im Band
   sind alle gleich hoch. Sie bekommt dafür die doppelte Breite. */
.bkarte--breit { width: clamp(340px, 58vw, 600px); }
/* Unter 820 px reicht auch die breite Karte nicht: die lange Bewertung würde
   das Band auf über 500 px treiben. Dort bleibt sie weg — die übrigen sechs und
   der Link auf alle stehen weiterhin da. */
@media (max-width: 820px) { .bkarte--breit { display: none; } }
.bkarte__text { font-size: 1rem; line-height: 1.6; color: var(--tinte); letter-spacing: -.01em; }
/* Kopf der Karte: Kürzel im Kreis, daneben Name und Zeitangabe — dieselbe
   Anordnung, die Google selbst zeigt. Die Kreise ersetzen die Profilbilder;
   die liegen auf Googles Servern und würden bei jedem Seitenaufruf von dort
   geladen. */
.bkarte__kopf { display: flex; align-items: center; gap: 12px; }
.bkarte__bild {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 600; color: #fff; letter-spacing: 0;
}
.bkarte__bild[data-farbe="0"] { background: #4a7c8c; }
.bkarte__bild[data-farbe="1"] { background: #a8556b; }
.bkarte__bild[data-farbe="2"] { background: #6a7a4d; }
.bkarte__bild[data-farbe="3"] { background: #8a6a4a; }
.bkarte__bild[data-farbe="4"] { background: #5f6b8c; }
.bkarte__bild[data-farbe="5"] { background: #7a5a86; }
.bkarte__wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkarte__name {
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; color: var(--tinte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bkarte__wann { font-size: .75rem; color: var(--stahl); }

/* Endloses Band: die Reihe steht doppelt im HTML, deshalb bricht der Lauf nicht ab. */
.laufband {
  overflow: hidden; padding-block: 6px;
  margin-top: clamp(34px, 4vw, 56px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.laufband__spur {
  display: flex; gap: clamp(16px, 2vw, 24px); width: max-content;
  animation: laufen 46s linear infinite;
}
.laufband:hover .laufband__spur, .laufband:focus-within .laufband__spur { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0) } to { transform: translateX(-50%) } }

@media (max-width: 620px) {
  .goo__kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Fußzeile ----------
   Alles sitzt auf einer Mittelachse. Die Haarlinie läuft von links und rechts
   auf die Marke zu und hört an ihr auf — dasselbe Motiv wie der Reiter auf dem
   Aktendeckel, nur liegend. Darunter drei gleich breite Spalten, getrennt durch
   senkrechte Haarlinien wie im Zeitenblock und im Anfahrtsblock.
   Die Marke ist hier genauso groß wie in der Kopfzeile; eigene Maße braucht sie
   nicht mehr, seit der Satz darunter entfallen ist. */
/* Wo ein Band steht, trennt dessen Oberkante schon — eine zweite Linie
   unmittelbar darunter wäre eine zu viel. */
body:has(.band) .fuss { border-top: none; }
.fuss {
  background: var(--weiss); border-top: 1px solid var(--haarlinie);
  padding-block: clamp(38px, 4.4vw, 58px) clamp(24px, 2.8vw, 34px);
}
.fuss__kopf { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px); }
.fuss__kopf .marke { margin-right: 0; }
/* In der Fußzeile steht nur das Zeichen, ohne Namenszug. Der Name steht in
   der Kopfzeile und im Abschlussband — unten genügt die Marke als Anker.
   Der senkrechte Strich entfällt mit: er trennte Zeichen und Namenszug.
   Weil der Name als Bildbeschreibung am Namenszug hing, trägt der Verweis
   jetzt ein eigenes aria-label — sonst hätte er für Vorleseprogramme
   keinen Namen mehr. */
.fuss__kopf .marke__strich,
.fuss__kopf .marke__schrift { display: none; }
.fuss__linie { flex: 1 1 0; height: 1px; background: var(--haarlinie); }

.fuss a { color: var(--karbon); text-decoration: none; font-size: .9375rem; transition: color .3s var(--ease); }
.fuss a:hover { color: var(--gruen-700); }

.fuss__unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: clamp(30px, 3.6vw, 46px); padding-top: 22px;
  border-top: 1px solid var(--haarlinie);
  font-size: .8125rem; color: var(--stahl);
}
.fuss__unten a { font-size: .8125rem; color: var(--stahl); }
.fuss__punkt { width: 3px; height: 3px; border-radius: 50%; background: var(--silber); flex: none; }

@media (max-width: 820px) {
  .fuss__kopf { flex-direction: column; }
  .fuss__linie { width: 100%; flex: none; }
}



/* ---------- Inhaltsseiten ---------- */
.seitenkopf { padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px); }
.seitenkopf .display { max-width: 16ch; }
.seitenkopf .lead { margin-top: 18px; }
/* Mittig gesetzter Seitenkopf (Kontakt). Muss NACH .seitenkopf stehen — gleiche
   Spezifität, sonst gewinnt dort das max-width von 16ch und die Überschrift
   klebt links. */
.seitenkopf--mitte { text-align: center; }
.seitenkopf--mitte .brotkrume { justify-content: center; }
.seitenkopf--mitte .display { max-width: none; }
.seitenkopf--mitte .lead { max-width: 60ch; margin-inline: auto; }
.brotkrume { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--stahl); margin-bottom: 20px; }
.brotkrume a { color: var(--stahl); text-decoration: none; }
.brotkrume a:hover { color: var(--gruen-700); text-decoration: underline; }
.brotkrume .ikon { width: 14px; height: 14px; color: var(--silber); }

.text-seite { max-width: 70ch; }
.text-seite h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; margin-top: 44px; margin-bottom: 12px; }
.text-seite h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 28px; margin-bottom: 8px; }
.text-seite p, .text-seite li { color: var(--karbon); }
.text-seite p + p { margin-top: 14px; }
.text-seite ul { margin: 12px 0; }
.text-seite ul li { padding-left: 20px; position: relative; padding-block: 4px; }
.text-seite ul li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 1px; background: var(--gruen-400); }
.text-seite .anschrift { margin-top: 10px; line-height: 1.7; color: var(--karbon); }

.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

/* ---------- Reaktion auf kleine Schirme ---------- */
@media (max-width: 1000px) {
  /* 18ch waren bei 375 px enger als die Spalte selbst: die Überschrift
     brach dadurch in drei Zeilen mit nur 16 Zeichen. Unter 720 px darf
     sie die volle Breite nutzen, der <br> im Markup setzt den Umbruch. */
  .buehne .display { max-width: 18ch; }
}
@media (max-width: 719px) {
  .buehne .display { max-width: none; }
  .band__innen { grid-template-columns: 1fr; }
  .zeitblock__spannen { flex-wrap: wrap; }
}

/* Sechs Einträge brauchen Breite. Reicht sie nicht, wandert die Navigation
   ins Klappmenü, statt in der Kopfzeile umzubrechen. */
@media (max-width: 1060px) {
  .nav-schalter { display: inline-flex; }
  .nav {
    position: absolute; left: var(--luft); right: var(--luft); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px; border-radius: var(--r-float);
    background: var(--weiss); box-shadow: var(--sh-3), var(--sh-hair);
    display: none;
  }
  .nav.ist-offen { display: flex; }
  .nav a { padding: 13px 16px; border-radius: var(--r-input); font-size: 1rem; }
  .nav .nav__tel { display: block; background: var(--gruen-700); color: #fff; text-align: center; font-weight: 600; margin-top: 4px; }
  .nav .nav__tel:hover { background: var(--gruen-800); color: #fff; }
  .kopf__innen { position: relative; }
}

@media (max-width: 860px) {
  .kopf__innen { min-height: 94px; gap: 12px; }
  .marke__zeichen { width: 72px; height: 72px; }
  .marke__schrift { height: 27px; }
  .marke__strich { margin-block: 12px; }
}

@media (max-width: 760px) {
  .zwei-spalten { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* Zeilen der Leistungslisten stapeln, sonst bricht die Bezeichnung um */
  .liste li { flex-wrap: wrap; row-gap: 4px; }
  .liste li > span:first-child { flex: 1 0 100%; }
  .liste li .preis { margin-right: auto; }
  .liste li .dauer { min-width: 0; text-align: right; }
}

@media (max-width: 560px) {
  .kopf__innen { min-height: 84px; gap: 10px; }
  .marke { min-width: 0; }
  .marke__zeichen { width: 62px; height: 62px; }
  .marke__schrift { height: 22px; }
  .marke__strich { margin-block: 10px; }
  .knopfreihe .btn { flex: 1 1 auto; justify-content: center; }
}

/* Sehr schmale Geräte (ab iPhone SE abwärts). Ohne diese Stufe ragt die
   Kopfzeile bei 320 px um 26 px über den rechten Rand hinaus. */
@media (max-width: 400px) {
  /* Die Zeilen ragen um 16 px über ihre Spalte hinaus, damit der Hoverstreifen
     breiter ist als der Text. Bei 320 px passt das nicht mehr neben die Luft. */
  .preiszeile, .erreichen__weg { padding-inline: 0; margin-inline: 0; }
  /* Auf 320 px zählt jedes Pixel: „Mo · Mi · Fr · Sa · So geschlossen" braucht
     232 px, die Anschrift 216. Mit 18 px Innenpolster bleiben nur 244 minus
     Punkt — zu knapp. Deshalb hier 12 px. */
  .paar .erreichen__innen { padding-inline: 12px; }
  /* Bezeichnung und Betrag gehören auf eine Zeile — sonst kann man am Handy
     nicht auf einen Blick zuordnen, was wie viel kostet.
     `flex: 1 1 auto` mit `min-width: 0` lässt die Bezeichnung schrumpfen und
     bei Bedarf innerhalb ihrer Zelle umbrechen; der Betrag bleibt rechts
     daneben stehen. Erst wenn selbst das nicht reicht — bei „Preis nach
     Ansicht" mit langer Bezeichnung — rutscht der Betrag eine Zeile tiefer.
     Vorher stand hier `flex: 1 1 100%`: das hat den Betrag ausnahmslos in die
     zweite Zeile gedrückt, auch bei „Kürzen 15 €". */
  .preiszeile { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
  .preiszeile__was { flex: 1 1 auto; min-width: 0; }
  .preiszeile__luft { display: none; }
  .preiszeile__preis { margin-left: auto; flex: none; }
  .kopf__innen { gap: 8px; }
  .marke { gap: 10px; }
  .marke__zeichen { width: 52px; height: 52px; }
  .marke__schrift { height: 19px; }
  .marke__strich { margin-block: 8px; }
  .kopf__tel { padding: 9px; }
  .nav-schalter { padding: 9px; }
}

/* ---------- Einwilligung ----------
   Kleine Karte unten links, 330 px. Sie verdeckt nur eine Ecke und liest sich
   als Hinweis, nicht als Sperre. Der Satz nennt Anbieter und Art des Inhalts —
   ohne das wäre die Einwilligung nicht wirksam, denn man muss vor dem Klick
   wissen, wem man etwas erlaubt. Alles Weitere steht hinter „Details".
   Unten rechts sitzt der Knopf „nach oben", deshalb links. */
.zustimmung {
  position: fixed; left: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px); z-index: 90;
  width: min(330px, calc(100vw - 28px));
  background: var(--weiss); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-3);
  padding: 16px;
  display: grid; gap: 10px; justify-items: start;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.zustimmung[hidden] { display: none; }
.zustimmung.ist-da { opacity: 1; transform: none; }
.zustimmung__marke {
  font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gruen-700);
}
.zustimmung__satz { font-size: .875rem; line-height: 1.5; color: var(--karbon); }
.zustimmung__satz b { color: var(--tinte); font-weight: 600; }

/* Beide Knöpfe gleich breit — Ablehnen muss genauso leicht sein wie Zulassen,
   sonst ist die Einwilligung nicht wirksam. */
.zustimmung__reihe { display: flex; gap: 8px; width: 100%; }
.zustimmung__reihe .btn { flex: 1 1 0; justify-content: center; padding: 9px 12px; font-size: .8125rem; }

.zustimmung__mehr {
  appearance: none; border: none; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: .8125rem; color: var(--gruen-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.zustimmung__mehr:hover { color: var(--gruen-800); }
.zustimmung__detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.zustimmung__detail[hidden] { display: none; }
.zustimmung__detail.ist-auf { grid-template-rows: 1fr; }
.zustimmung__detail > p {
  overflow: hidden; min-height: 0;
  font-size: .75rem; line-height: 1.55; color: var(--stahl);
}
.zustimmung__detail b { color: var(--karbon); }
.zustimmung__detail a { color: var(--gruen-700); }

/* Der Knopf, mit dem man die Entscheidung zurücknimmt. */
.zurueck-knopf {
  appearance: none; border: none; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: .8125rem; color: var(--stahl); text-decoration: underline;
  text-underline-offset: 3px;
}
.zurueck-knopf:hover { color: var(--gruen-700); }

/* ---------- Nach oben ----------
   Blendet sich erst nach 600 px Scrollen ein. Der Ring zeigt über
   stroke-dashoffset, wie weit die Seite gelesen ist; der Umfang beträgt bei
   r = 21,5 genau 2πr = 135,1 — daher die 135 in dasharray. */
.hoch {
  position: fixed; right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); z-index: 60;
  width: 52px; height: 52px; border: none; border-radius: 50%; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--weiss); box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-2);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hoch[hidden] { display: none; }
.hoch.ist-da { opacity: 1; transform: none; pointer-events: auto; }
.hoch:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gruen-200), var(--sh-3); }
.hoch__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hoch__ring circle { fill: none; stroke-width: 2; }
.hoch__bahn { stroke: var(--haarlinie); }
.hoch__fort {
  stroke: var(--gruen-600); stroke-linecap: round;
  stroke-dasharray: 135; stroke-dashoffset: 135;
  transition: stroke-dashoffset .2s linear;
}
/* Die Beschriftung des Nach-oben-Knopfs. Steht im Markup aller Seiten und ist
   normal ausgeblendet — nur die Pillen-Fassungen blenden sie ein. Diese Regel
   muss hier stehen und nicht in service.css: Impressum, Datenschutz und die
   404-Seite laden service.css nicht, dort stand das Wort sonst roh im Knopf. */
.hoch__wort { display: none; white-space: nowrap; font-size: .875rem;
  font-weight: 600; letter-spacing: -.01em; color: var(--karbon); }

.hoch__pfeil {
  width: 9px; height: 9px;
  border-left: 1.7px solid var(--karbon); border-top: 1.7px solid var(--karbon);
  transform: rotate(45deg) translate(1px, 1px);
  transition: border-color .4s var(--ease);
}
.hoch:hover .hoch__pfeil { border-color: var(--gruen-700); }

/* ---------- Aktionsleiste am Handy ----------
   Anrufen · Route · Zeiten. Nur unter 720 px, und erst nachdem ein Stück
   gescrollt wurde — davor steht sie nur im Weg. „Zeiten" klappt die
   Öffnungszeiten darüber auf, ohne die Seite zu wechseln. */
.aleiste {
  position: fixed; z-index: 70;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(430px, calc(100vw - 24px));
  display: none;
  opacity: 0; transform: translate(-50%, 130%); pointer-events: none;
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}
@media (max-width: 719px) { .aleiste { display: block; } }
.aleiste[hidden] { display: none; }
.aleiste.ist-da { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Milchiger Deckel hinter den aufgeklappten Öffnungszeiten.
   Ohne ihn liest man die Seite direkt hinter der Karte weiter mit; die
   Zeiten gehen darin unter. Dieselbe Wirkung wie beim Fragen-Fenster
   (.svblatt__deckel), damit sich beide Klappen gleich anfühlen.

   Warum body::after und kein Kind von .aleiste: .aleiste hat ein transform,
   und ein transform macht das Element zum Bezugsrahmen für position: fixed.
   Ein Deckel darin könnte den Bildschirm also gar nicht füllen.

   z-index 69 liegt knapp unter der Leiste (70) — die bleibt bedienbar,
   alles darunter wird abgedeckt. visibility statt nur opacity, damit im
   geschlossenen Zustand gar keine Fläche gezeichnet wird. */
@media (max-width: 719px) {
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 69;
    background: rgba(8, 20, 15, .74);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
  }
  body:has(.aleiste__klappe.ist-auf)::after {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .35s var(--ease), visibility 0s;
  }
}
@supports (backdrop-filter: blur(3px)) {
  @media (max-width: 719px) {
    body::after {
      background: rgba(8, 20, 15, .62);
      -webkit-backdrop-filter: blur(3px);
              backdrop-filter: blur(3px);
    }
  }
}

/* Die Klappe wächst von 0fr auf 1fr — der einzige Weg, echte Höhe zu animieren. */
.aleiste__klappe { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease); }
.aleiste__klappe.ist-auf { grid-template-rows: 1fr; }
.aleiste__innen { overflow: hidden; }
.aleiste__blatt {
  margin-bottom: 10px; padding: 16px 18px 14px;
  border-radius: var(--r-card); background: var(--weiss);
  box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-2);
}
.aleiste__titel {
  font-size: .625rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700);
}
.aleiste__tag {
  display: flex; align-items: baseline; gap: 10px; margin-top: 9px;
  font-size: .875rem; font-variant-numeric: tabular-nums;
}
.aleiste__tag span { color: var(--schiefer); min-width: 5.5rem; }
.aleiste__tag b { margin-left: auto; font-weight: 600; color: var(--tinte); }
.aleiste__tag--heute span { color: var(--gruen-700); font-weight: 600; }
.aleiste__zu {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--haarlinie); font-size: .8125rem; color: var(--stahl);
}
.aleiste__punkt { width: 5px; height: 5px; border-radius: 50%; background: var(--silber); flex: none; }
.aleiste__mehr { display: block; margin-top: 11px; font-size: .8125rem; font-weight: 600;
  color: var(--gruen-700); text-decoration: none; }

.aleiste__reihe {
  display: flex; align-items: stretch; padding: 6px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 0 0 1px var(--haarlinie), var(--sh-2);
}
.aleiste__k {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px 7px; border: 0; background: none; cursor: pointer;
  border-radius: 16px; text-decoration: none; color: var(--karbon);
  font: inherit; transition: background .3s var(--ease);
}
.aleiste__k .ikon { width: 19px; height: 19px; color: var(--gruen-600); }
.aleiste__k span { font-size: .6875rem; font-weight: 600; letter-spacing: .005em; }
.aleiste__k:active { background: var(--gruen-50); }
.aleiste__k[aria-expanded="true"] { background: var(--gruen-50); }
.aleiste__k[aria-expanded="true"] span { color: var(--gruen-900); }
.aleiste__achse { width: 1px; align-self: center; height: 26px; background: var(--haarlinie); flex: none; }

/* Solange der Einwilligungshinweis steht, bleibt die Leiste unten. */
body:has(.zustimmung:not([hidden])) .aleiste { transform: translate(-50%, 130%); opacity: 0; }

/* Ist das Zeitenblatt offen, tritt der Knopf nach oben zurück — sonst blitzt
   sein Ring hinter der Ecke des Blatts hervor. */
body:has(.aleiste__klappe.ist-auf) .hoch { opacity: 0; pointer-events: none; }

@media (max-width: 719px) {
  /* Der Knopf nach oben rutscht über die Leiste, sonst liegt er darunter. */
  .hoch { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* Platz, damit die Leiste am Seitenende nichts vom Impressum verdeckt. */
  .fuss { padding-bottom: calc(clamp(24px, 2.8vw, 34px) + 78px); }
}

@media (prefers-reduced-motion: reduce) {
  .aleiste, .aleiste__klappe { transition-duration: .01ms; }
}


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

/* ---------- Druck ---------- */
@media print {
  .kopf, .vorschau-leiste, .band, .nav-schalter { display: none !important; }
  body { color: #000; }
  .zettel, .karte, .liste { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Die Schneiderei: Bild ganz, Titel darunter ----------
   Das Foto läuft ungeschnitten über die volle Fensterbreite; auf ihm
   liegt nichts. Der Titel steht darunter auf Weiß, ohne trennende Linie
   — die Bildunterkante ist selbst die Kante.

   Der Weg dorthin, damit ihn niemand noch einmal gehen muss: Erst lag
   ein weißer Verlauf über 62 % der Bildhöhe, damit der Titel im Bild
   stehen konnte. Der nahm dem Foto die Tiefe. Ohne Verlauf trägt es
   aber nicht: gemessen fällt der Kontrast im ungünstigsten Zwanzigstel
   auf 3,8:1 links und 1,4:1 rechts über dem Terrazzoboden, nötig sind
   4,5:1. Deshalb steht der Titel jetzt außerhalb des Bildes.

   Ein Bild über die volle Breite kostet Auflösung: bei 1240 px Fenster
   auf einem Retina-Schirm braucht es 2480 Bildpunkte. Die Vorlage hat
   1448, daher liegen die Dateien in drei Größen (700, 1100, 1448) mit
   sizes="100vw". Eine größere Vorlage steht in PLATZHALTER.md aus.
   ---------------------------------------------------------------- */
/* ---------- Das Bild auf der Schneiderei-Seite ----------
   Vier feine Winkel an den Ecken — Schnittmarken, wie sie auf jedem
   Schnittmusterbogen und jedem Druckbogen stehen. Sie berühren das Bild
   nicht, sie zeigen nur, wo es anfängt und wo es aufhört. Beim Zeigen
   rücken alle vier um 4 px nach außen; sonst bewegt sich nichts.

   Warum so und nicht anders — damit diese Runde niemand noch einmal dreht:
   Erprobt und verworfen wurden Rundung mit Schatten, ein getöntes Band
   dahinter, eine versetzte grüne Fläche, eine weiße Karte im Bild und ein
   weißer Verlauf über der unteren Bildhälfte. Alle diese Mittel *decken
   das Bild zu*, statt es zu fassen — genau daran lag der billige Eindruck.
   Hier gilt deshalb: keine Rundung, kein Schatten, keine Farbfläche.
   Nur Linien und Abstände.

   Ebenfalls verworfen: der Titel im Bild. Gemessen fällt der Kontrast
   schwarzer Schrift auf dem Foto im ungünstigsten Zwanzigstel auf 3,8:1
   links und 1,4:1 rechts über dem Terrazzoboden — nötig sind 4,5:1.
   ---------------------------------------------------------------- */

/* Seitenraster: Rand — Inhalt (höchstens --wrap) — Rand. */
.sr { display: grid;
  grid-template-columns:
    [rand-l] minmax(var(--luft), 1fr)
    [inhalt-l] minmax(0, calc(var(--wrap) - 2 * var(--luft)))
    [inhalt-r] minmax(var(--luft), 1fr) [rand-r]; }
.sr > * { grid-column: inhalt-l / inhalt-r; }

.l2 { margin-top: clamp(22px, 3vw, 40px); }
.l2__feld { position: relative; padding: clamp(10px, 1.4vw, 18px); }
.lbild { display: block; width: 100%; }
.lbild img { display: block; width: 100%; height: auto; }

.l2__marke { position: absolute; width: clamp(14px, 1.8vw, 22px); height: clamp(14px, 1.8vw, 22px);
  transition: transform .7s var(--ease); }
.l2__marke::before, .l2__marke::after { content: ''; position: absolute; background: var(--karbon); }
.l2__marke::before { width: 100%; height: 1px; }
.l2__marke::after  { width: 1px; height: 100%; }
.l2__marke--lo { left: 0; top: 0; }
.l2__marke--ro { right: 0; top: 0; }
.l2__marke--ro::before { right: 0; } .l2__marke--ro::after { right: 0; }
.l2__marke--lu { left: 0; bottom: 0; }
.l2__marke--lu::before { bottom: 0; } .l2__marke--lu::after { bottom: 0; }
.l2__marke--ru { right: 0; bottom: 0; }
.l2__marke--ru::before { right: 0; bottom: 0; }
.l2__marke--ru::after  { right: 0; bottom: 0; }
.l2__feld:hover .l2__marke--lo { transform: translate(-4px, -4px); }
.l2__feld:hover .l2__marke--ro { transform: translate( 4px, -4px); }
.l2__feld:hover .l2__marke--lu { transform: translate(-4px,  4px); }
.l2__feld:hover .l2__marke--ru { transform: translate( 4px,  4px); }

.l2__unter { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(14px, 1.8vw, 20px); padding-left: clamp(10px, 1.4vw, 18px);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.l2__unter b { font-weight: 700; color: var(--karbon); letter-spacing: .04em; }
.l2__unter span { color: var(--stahl); font-weight: 600; }
.l2__unter em { margin-left: auto; font-style: normal; color: var(--nebel);
  padding-right: clamp(10px, 1.4vw, 18px); }
@media (max-width: 620px) { .l2__unter em { display: none; } }

.l2__kopf { margin-top: clamp(34px, 4.4vw, 60px);
  padding-inline: clamp(10px, 1.4vw, 18px); }
/* Keine Breitenbegrenzung: Der Satz ist eine Zeile unter der Überschrift,
   kein Fließtext. Mit 46ch (= 493 px) brach er um, obwohl die Spalte
   1120 px breit ist und der Satz nur 706 px braucht. Länger als der
   Satz selbst wird die Zeile nie. */
.l2__kopf .lead { margin-top: clamp(14px, 1.8vw, 22px); max-width: none; }

@media (prefers-reduced-motion: reduce) { .l2__marke { transition: none; } }


.at__kopf { max-width: var(--wrap); margin-inline: auto; padding: clamp(34px,4.5vw,64px) var(--luft) 0;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(24px,4vw,64px); align-items: end; }
@media (max-width: 820px) { .at__kopf { grid-template-columns: 1fr; align-items: start; } }
/* Der Kopf der Schneiderei-Seite hatte eigene Werte: eigener clamp, -.04em
   statt -.03em, Zeilenhöhe 1.08 statt 1.02 und ein Lead in EB Garamond
   statt in der Grundschrift. Dadurch sah dieser eine Seitenanfang anders aus
   als alle übrigen. Er benutzt jetzt .display und .lead wie jede andere
   Unterseite — die einzige bewusste Ausnahme im ganzen Haus bleibt der
   erste Blick der Startseite (.buehne .lead). */
.at__strich { max-width: var(--wrap); margin: clamp(30px,3.6vw,46px) auto 0; padding-inline: var(--luft); }
.at__strich span { display: block; height: 1px; background: var(--haarlinie); }
.at__galerie { margin-top: clamp(52px,6.5vw,88px); }
.at__gkopf { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--luft);
  display: flex; align-items: baseline; gap: 14px; }
.at__marke { font-size: .6875rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gruen-700); }
.at__hinweis { margin-left: auto; font-size: .8125rem; color: var(--stahl); }
/* Der Streifen lief ueber die ganze Fensterbreite, waehrend die Trennlinie
   darueber und die Beschriftung in der Spalte sitzen — die Fotos standen
   deshalb 40 px weiter links als die Linie. Jetzt teilt er sich die Spalte
   mit beiden. 'safe center' rueckt die Fotos mittig, solange sie
   hineinpassen, und faellt auf linksbuendig zurueck, sobald der Streifen
   ueberlaeuft — sonst waere der linke Teil nicht mehr erreichbar. */
.at__spur { margin-top: 16px; display: flex; gap: clamp(12px,1.6vw,18px);
  max-width: var(--wrap); margin-inline: auto;
  justify-content: flex-start; justify-content: safe center;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--luft);
  padding-bottom: 8px; scrollbar-width: none; }
.at__spur::-webkit-scrollbar { display: none; }
/* Ab 800 px passen die drei Fotos vollstaendig in die Spalte. Dann steht
   auch die Beschriftung mittig darueber — und der Wischhinweis entfaellt,
   weil es nichts mehr zu wischen gibt. */
@media (min-width: 800px) {
  .at__gkopf { justify-content: center; }
  .at__hinweis { display: none; }
}
/* Echte Fotos im Streifen. Dieselbe Breite und dasselbe Seitenverhältnis wie
   die früheren Platzhalterfelder — die Aufnahmen sind 1500 × 2000, also
   genau 3:4, und werden deshalb nicht beschnitten. */
.at__bild { flex: none; width: clamp(230px,26vw,330px); aspect-ratio: 3/4;
  scroll-snap-align: start; border-radius: var(--r-card); overflow: hidden;
  background: var(--dunst); display: block; }
.at__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------
   Tippflächen am Handy
   Auf dem Handy gemessen: Impressum, Datenschutz und „Einwilligung ändern"
   waren 20 px hoch, „Alle bei Google" 23, „Anfahrt und Kontakt" 20.
   Die Norm verlangt mindestens 24 px, für den Daumen sind 44 empfohlen.
   Innenabstand statt Mindesthöhe, damit die Zeilen im Fluss bleiben.
   --------------------------------------------------------------------- */
@media (max-width: 719px) {
  .fuss__unten a,
  .fuss__unten .zurueck-knopf { display: inline-block; padding-block: 12px; }
  .goo__link { padding-block: 11px; }
  .aleiste__mehr { padding-block: 12px; margin-top: 4px; }
}

/* ---------------------------------------------------------------------
   Handyfeinschliff — gemessen auf 375 px
   --------------------------------------------------------------------- */
@media (max-width: 719px) {

  /* Die Knöpfe im Titelbereich standen über 89 % der Breite untereinander.
     Nebeneinander wirken sie ruhiger und lassen das Foto atmen. */
  .buehne .knopfreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
    align-items: stretch; }
  .buehne .knopfreihe .btn { width: 100%; min-height: 48px; padding-inline: 10px;
    font-size: .9375rem; white-space: nowrap; }
  .buehne .knopfreihe .btn .ikon { width: 17px; height: 17px; }

  /* Die Bewertungskarten waren 430 px hoch — mehr als die halbe Bildschirmhöhe
     für eine einzelne Meinung. Schmaler, kürzerer Text, kleinere Schrift. */
  .bkarte { width: min(78vw, 268px); padding: 16px 17px; gap: 10px; }
  .bkarte__text { font-size: .875rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
    overflow: hidden; }
  .bkarte__kopf { gap: 9px; }
  .bkarte__bild, .bkarte__kreis { width: 36px; height: 36px; }
  .bkarte__name { font-size: .875rem; }
  .bkarte__wann { font-size: .75rem; }
  .laufband { --bkarte-luft: 12px; }

  /* Geschlossene Tage: erst das Wort, dann die Kürzel — und in eine Zeile. */
  .zeitblock__zu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
  .zeitblock__zu .zeitblock__zuwort { order: 1; font-weight: 600; }
  .zeitblock__zu .zeitblock__zutage { order: 2; }
}

/* Lange und kurze Schreibweise der geschlossenen Tage */
.nur-schmal { display: none; }
@media (max-width: 719px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
}