/* Fenomen Friseur (26.10.2026). Abgeleitet vom Ladenschild: oben Weiss mit Marine-Schrift, goldene Linie, unten
   Marine mit Goldzeile "MIT ODER OHNE TERMIN"; das Blau des Hemdkragens als kleiner Akzent; runde Spiegel mit
   schwarzem Metallring und warmes Holz aus dem Salon als Motiv (runde Bildausschnitte).
   Schriften: Montserrat (Titel, Zahlen, Knoepfe; wie die Schildschrift) und Barlow (Text; wie die Angaben unten auf dem Schild).
   Kontraste (WCAG): Creme auf Marine 15,6:1, Gold auf Marine 7,6:1, Marine auf Gold 7,6:1, Grau-hell auf Marine 9,0:1,
   Tinte-2 auf Papier 7,4:1, Gold-Text auf Papier 5,6:1, Blau-Text auf Papier 5,7:1. */

@font-face { font-family: "Montserrat"; src: url("schriften/montserrat-latin.woff2?v=1") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("schriften/barlow-400.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext nur fuer Namen wie "Doğan" im Bildnachweis (laedt nur, wenn ein solches Zeichen vorkommt) */
@font-face { font-family: "Barlow"; src: url("schriften/barlow-400-ext.woff2?v=1") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; src: url("schriften/barlow-600.woff2?v=1") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --marine: #141A2E;
  --marine-2: #1C2440;
  --marine-3: #262F52;
  --nacht: #0D111E;
  --ring: #0B0F1A;
  --gold: #C9A55C;
  --gold-hell: #E2C88E;
  --gold-text: #75561F;
  --creme: #F6F1E7;
  --papier: #FBF8F2;
  --weiss: #FFFFFF;
  --tinte: #141A2E;
  --tinte-2: #474D63;
  --grau-hell: #BCC0CE;
  --linie: #E4DCCB;
  --linie-dunkel: #343D60;
  --blau: #2F7FC8;
  --blau-text: #1D5E9E;
  --holz: #8B5A3C;
  --gruen: #74D9A0;
  --ocker: #F0C46C;
  --rot: #F2A39A;

  --schrift-titel: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Barlow", "Segoe UI", system-ui, sans-serif;
  --huelle: 76rem;
  --rand-seite: 1rem;
  --abstand: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 1.25rem;
  --schatten: 0 1.2rem 2.4rem -1.4rem rgba(13, 17, 30, .45);
}
@media (min-width: 46rem) { :root { --rand-seite: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--schrift-text); font-size: 1.125rem; line-height: 1.55; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--schrift-titel); line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.huelle { width: 100%; max-width: calc(var(--huelle) + 2 * var(--rand-seite)); margin: 0 auto; padding: 0 var(--rand-seite); }
.nur-mit-js { display: none !important; }
html.js .nur-mit-js { display: revert !important; }
html.js .nur-ohne-js { display: none !important; }
html.js .status.nur-mit-js { display: flex !important; }
html.js .menue-knopf.nur-mit-js { display: inline-flex !important; }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: .3rem; }
.abschnitt-dunkel :focus-visible, .buehne :focus-visible, .fuss :focus-visible, .handy-leiste :focus-visible { outline-color: var(--gold-hell); }

.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--marine); color: var(--creme); padding: .75rem 1.1rem; border-radius: .5rem; font-weight: 600; text-decoration: none; }
.sprung:focus { top: 1rem; }

/* ---------- Knoepfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 999px; font-family: var(--schrift-titel); font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; }
.knopf-klein { min-height: 2.75rem; padding: .55rem 1.05rem; font-size: .95rem; }
.knopf-gold { background: var(--gold); color: var(--marine); }
.knopf-gold:hover { background: var(--gold-hell); }
.knopf-rand-hell { border-color: var(--creme); color: var(--creme); background: transparent; }
.knopf-rand-hell:hover { background: var(--creme); color: var(--marine); }
.knopf-marine { background: var(--marine); color: var(--creme); }
.knopf-marine:hover { background: var(--marine-3); }
.knopf-rand-marine { border-color: var(--marine); color: var(--marine); background: transparent; }
.knopf-rand-marine:hover { background: var(--marine); color: var(--creme); }
/* WhatsApp im Markengruen mit Nacht-Schrift (10,4:1), damit man ihn sofort erkennt */
.knopf-whatsapp { background: #25D366; color: var(--nacht); }
.knopf-whatsapp:hover { background: #4ADE84; }
button.knopf { font: inherit; font-family: var(--schrift-titel); font-weight: 700; font-size: 1rem; }

/* ---------- Kopf: weisses Feld wie das Schild, goldene Linie darunter ---------- */
.kopf { position: relative; z-index: 50; background: var(--weiss); border-bottom: 3px solid var(--gold); }
html.js .kopf { position: sticky; top: 0; }
.kopf.gerollt { box-shadow: 0 .4rem 1.2rem -.6rem rgba(13, 17, 30, .35); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; flex-wrap: wrap; }
.marke { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem 0; }
.marke img { height: 2.6rem; width: auto; }
.menue-knopf { align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 2px solid var(--marine); border-radius: 50%; background: var(--weiss); color: var(--marine); cursor: pointer; }
.hauptnav { width: 100%; padding: 0 0 1rem; }
.hauptnav ul { display: grid; gap: .1rem; margin-bottom: .9rem; }
.hauptnav ul a { display: flex; align-items: center; min-height: 2.75rem; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.05rem; text-decoration: none; border-bottom: 1px solid var(--linie); }
.hauptnav ul a { justify-content: space-between; gap: .35rem; }
.nav-pfeil { width: 1em; height: 1em; color: var(--gold-text); transition: transform .2s; }
.hauptnav ul a:hover .nav-pfeil, .hauptnav ul a:focus-visible .nav-pfeil { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .nav-pfeil { transition: none; } }
html.js .hauptnav { display: none; }
html.js .kopf.offen .hauptnav { display: block; }
@media (min-width: 64rem) {
  .kopf-innen { flex-wrap: nowrap; min-height: 5.25rem; }
  .marke img { height: 3.9rem; }
  html.js .menue-knopf.nur-mit-js { display: none !important; }
  .hauptnav, html.js .hauptnav { display: flex; align-items: center; gap: 1.6rem; width: auto; padding: 0; }
  .hauptnav ul { display: flex; gap: 1.4rem; margin: 0; }
  .hauptnav ul a { border: 0; font-size: .98rem; position: relative; justify-content: flex-start; gap: .3rem; }
  .nav-pfeil { width: 1em; height: 1em; }
  .hauptnav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .hauptnav ul a:hover::after { transform: scaleX(1); }
}

/* ---------- Buehne: aufgebaut wie das Ladenschild ----------
   Am Schild steht die Zeichnung zwischen FENOMEN und FRISEUR; hier steht der runde Spiegel (Symbolvideo) zwischen
   "Mit oder" und "ohne Termin". .buehne-text ist display: contents, damit Titel, Satz, Status und Knoepfe mit dem
   Spiegel in einem Raster stehen (DOM-Reihenfolge bleibt: der Pause-Knopf folgt in der Tab-Reihenfolge auf "Route planen"). */
.buehne { position: relative; background: var(--marine); color: var(--creme); overflow: hidden; padding: 1.6rem 0 0; text-align: center; }
.buehne::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50rem 30rem at 50% 30%, rgba(201, 165, 92, .14), transparent 65%), radial-gradient(40rem 26rem at 0% 100%, rgba(47, 127, 200, .1), transparent 70%); pointer-events: none; }
.buehne-raster { --spiegel-b: min(52vw, 15rem, 30svh); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.buehne-text { display: contents; }
.buehne-spiegel { grid-row: 1; position: relative; width: var(--spiegel-b); margin: .62rem 0 1.6rem; }
.buehne h1 { grid-row: 2; font-size: clamp(2.05rem, 8.6vw, 3.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--gold); line-height: 1.04; text-wrap: balance; }
.buehne-satz { grid-row: 3; margin-top: .9rem; font-size: clamp(1.1rem, 2.6vw, 1.3rem); max-width: 36rem; color: var(--creme); text-wrap: pretty; }
.status { grid-row: 4; display: flex; align-items: flex-start; justify-content: center; gap: .6rem; margin-top: 1rem; font-size: 1.02rem; color: var(--grau-hell); text-align: left; }
.status b { color: var(--creme); font-weight: 600; }
.status-punkt { width: .7rem; height: .7rem; margin: .45rem .1rem 0 .3rem; border-radius: 50%; background: var(--grau-hell); flex: none; box-shadow: 0 0 0 .25rem rgba(188, 192, 206, .15); }
.status.offen .status-punkt { background: var(--gruen); box-shadow: 0 0 0 .25rem rgba(116, 217, 160, .18); }
.status.bald .status-punkt, .status.feiertag .status-punkt { background: var(--ocker); box-shadow: 0 0 0 .25rem rgba(240, 196, 108, .18); }
.status.geschlossen .status-punkt { background: var(--rot); box-shadow: 0 0 0 .25rem rgba(242, 163, 154, .16); }
.buehne-knoepfe { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.2rem; }

/* Der Spiegel: schwarzer Metallring, feiner Goldring, Video bzw. Standbild rund */
.spiegel { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--nacht); box-shadow: 0 0 0 .45rem var(--ring), 0 0 0 .62rem var(--gold), 0 2rem 3rem -1.5rem rgba(0, 0, 0, .7); }
.spiegel-bild, .spiegel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spiegel-video { opacity: 0; transition: opacity .6s; }
.spiegel-video.laeuft { opacity: 1; }
.kennzeichen { position: absolute; left: 50%; bottom: -.35rem; transform: translateX(-50%); background: var(--nacht); color: var(--grau-hell); font-size: .8rem; letter-spacing: .04em; padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--linie-dunkel); white-space: nowrap; }
.video-knopf { position: absolute; right: -.6rem; bottom: .2rem; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--gold); background: var(--nacht); color: var(--creme); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.video-knopf[hidden] { display: none; }
.video-knopf:hover { background: var(--marine-3); }

/* Schildleiste: wie unten auf dem Schild, goldene Linie, darunter Zeiten, Telefon, Adresse */
.schildleiste { position: relative; margin-top: 2.2rem; background: var(--nacht); border-top: 3px solid var(--gold); }
.schild-angaben { display: grid; }
.schild-angaben li + li { border-top: 1px solid var(--linie-dunkel); }
.schild-angaben a { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: .65rem; min-height: 3.3rem; padding: .7rem 0; color: var(--creme); text-decoration: none; font-family: var(--schrift-titel); font-weight: 600; font-size: 1rem; letter-spacing: .01em; }
.schild-angaben a:hover span { text-decoration: underline; text-underline-offset: .2em; }
.schild-angaben .ico { color: var(--gold); }

@media (min-width: 46rem) {
  .buehne { padding-top: clamp(2rem, 5svh, 4rem); }
  /* Spiegel in der Mitte zwischen den beiden Titelhaelften, beide in derselben Rasterzelle */
  .buehne-raster { --spiegel-b: min(clamp(12rem, 25vw, 20rem), 34svh); }
  .buehne-spiegel { grid-row: 1; grid-column: 1; align-self: center; margin: .62rem 0; }
  .buehne h1 { grid-row: 1; grid-column: 1; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) var(--spiegel-b) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; font-size: clamp(2.3rem, 5.4vw, 5.4rem); line-height: 1; }
  .titel-links { grid-column: 1; text-align: right; }
  .titel-rechts { grid-column: 3; text-align: left; }
  .titel-links > span, .titel-rechts > span { display: block; }
  .buehne-satz { grid-row: 2; margin-top: 1.7rem; }
  .status { grid-row: 3; }
  .buehne-knoepfe { grid-row: 4; }
}
@media (min-width: 64rem) {
  .schild-angaben { grid-template-columns: repeat(3, auto); justify-content: center; }
  .schild-angaben li + li { border-top: 0; border-left: 1px solid var(--gold); }
  .schild-angaben a { justify-content: center; padding: .9rem clamp(1.5rem, 3vw, 2.6rem); min-height: 3.6rem; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt-hell { background: var(--papier); }
.abschnitt-dunkel { background: var(--marine); color: var(--creme); }
.abschnitt h2 { font-size: clamp(1.9rem, 5.2vw, 3rem); font-weight: 800; }
.abschnitt-dunkel h2 { color: var(--creme); }
.abschnitt-kopf { display: grid; gap: .8rem; margin-bottom: 2.4rem; }
.einleitung { font-size: 1.2rem; color: var(--tinte-2); max-width: 40rem; }
.hinweis-klein { margin-top: 2rem; font-size: .98rem; color: var(--tinte-2); }
@media (min-width: 64rem) { .abschnitt-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem; } }

/* Rund wie die Spiegel: schwarzer Metallring */
.rund { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--linie); box-shadow: 0 0 0 .3rem var(--ring), var(--schatten); }
.rund img { width: 100%; height: 100%; object-fit: cover; }

/* Leistungen */
.leistungen { display: grid; gap: 1.6rem; }
.leistung { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.3rem; row-gap: .3rem; align-items: center; }
.leistung .rund { grid-row: span 2; width: 6.5rem; margin-left: .3rem; }
.leistung h3 { font-size: 1.25rem; font-weight: 700; align-self: end; }
.leistung p { color: var(--tinte-2); align-self: start; }
@media (min-width: 46rem) {
  .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8rem 2rem; }
  /* oben ausrichten: Kreise und Titel einer Reihe stehen auf einer Linie, egal wie lang der Text ist */
  .leistung { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: .5rem; align-content: start; align-items: start; }
  .leistung h3, .leistung p { align-self: auto; }
  .leistung .rund { grid-row: auto; width: min(13rem, 100%); margin: 0 0 1rem; }
  .leistung p { max-width: 20rem; }
}
@media (min-width: 64rem) { .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Weitere Leistungen ohne Foto (seit 27.10.2026): Karte mit Gruppen, Leistungen als Pillen */
.mehr-leistungen { margin-top: 3rem; padding: 1.6rem 1.3rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.mehr-titel { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.3rem; }
.mehr-gruppen { display: grid; gap: 1.6rem; }
.mehr-gruppe h4 { margin: 0 0 .7rem; font-family: var(--schrift-titel); font-size: 1rem; font-weight: 700; color: var(--gold-text); }
.mehr-gruppe ul { display: flex; flex-wrap: wrap; gap: .55rem; }
.mehr-gruppe li { padding: .4rem .95rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); }
@media (min-width: 46rem) {
  .mehr-leistungen { padding: 2rem 2.2rem; }
  .mehr-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

/* Bewertungen: Kopf als Band (Titel, Note, Knopf), darunter die Karten im Raster (Handy: Wischleiste) */
.bewertungen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.note { display: grid; gap: 1.2rem; justify-items: start; align-items: center; padding-bottom: 1.8rem; border-bottom: 1px solid var(--linie); }
.note-kopf { display: grid; gap: .7rem; }
.note-wert { display: grid; gap: .2rem; }
.note-zeile { display: flex; align-items: center; gap: .9rem; }
.note-zahl { font-family: var(--schrift-titel); font-weight: 800; font-size: 3.4rem; line-height: 1; }
.sterne { width: 6.6rem; height: 1.2rem; color: var(--gold); fill: currentColor; }
.sterne-gross { width: 9rem; height: 1.64rem; }
.sterne .stern-leer { color: #D9CFB8; }
.note-angabe { font-weight: 600; }
.note-satz { color: var(--tinte-2); max-width: 30rem; }
.note .knopf { max-width: 100%; white-space: normal; text-align: center; }
.stimmen-feld { min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: var(--radius); }
.stimmen-feld:focus-visible { outline-offset: 6px; }
.stimmen { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); gap: 1rem; align-items: stretch; padding: .4rem .2rem 1.2rem; }
.stimme { position: relative; scroll-snap-align: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.3rem 1.3rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: 0 .6rem 1.4rem -1rem rgba(13, 17, 30, .3); }
.stimme blockquote { margin: 0; flex: 1; }
.stimme blockquote p { font-size: 1.08rem; overflow-wrap: break-word; hyphens: auto; }
.stimme blockquote p::before { content: "„"; }
.stimme blockquote p::after { content: "“"; }
.stimme-wer { display: grid; gap: .05rem; border-top: 1px solid var(--linie); padding-top: .75rem; }
.stimme-name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1rem; }
.stimme-wann { font-size: .95rem; color: var(--tinte-2); }
.stimmen-wisch { order: 1; font-size: .95rem; color: var(--tinte-2); margin: -.6rem 0 -1.2rem; }
.stimmen-feld { order: 2; }
@media (min-width: 46rem) {
  .stimmen-feld { overflow: visible; }
  .stimmen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; padding: 0; }
  .stimmen-wisch { display: none; }
}
@media (min-width: 64rem) {
  .note { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(2rem, 4vw, 4rem); padding-bottom: 2.2rem; }
  .bewertungen-raster { gap: 2.6rem; }
}
@media (min-width: 72rem) {
  /* drei Spalten; die lange Karte von Crazy Nico steht doppelt breit, so enden alle Reihen gleich */
  .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stimme-breit { grid-column: span 2; }
}
/* Mit JavaScript: keine Wischleiste, sondern drei Bewertungen untereinander, der Rest auf Klick (seite.js) */
html.js .stimmen-feld { overflow: visible; }
html.js .stimmen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); padding: 0; }
html.js .stimmen-wisch { display: none; }
html.js .stimmen:not(.offen) > .stimme:nth-child(n+4) { display: none; }
html.js .stimmen-mehr.nur-mit-js { display: inline-flex !important; }
.stimmen-mehr { order: 3; justify-self: center; max-width: 100%; white-space: normal; text-align: center; }
.stimmen-pfeil { transition: transform .2s; }
.stimmen-mehr[aria-expanded="true"] .stimmen-pfeil { transform: rotate(180deg); }
@media (min-width: 46rem) {
  html.js .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* zugeklappt bei zwei Spalten: die dritte Karte ganz breit, damit keine Luecke bleibt */
  html.js .stimmen:not(.offen) > .stimme:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  html.js .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.js .stimmen:not(.offen) > .stimme:nth-child(3) { grid-column: auto; }
}

/* Oeffnungszeiten + Termin: zwei Spalten mit goldener Mittellinie (ab 46rem) */
.zeiten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.zeiten { width: 100%; max-width: 30rem; border-collapse: collapse; margin-top: 1.6rem; font-size: 1.12rem; }
.zeiten th, .zeiten td { padding: .72rem 0; border-bottom: 1px solid var(--linie-dunkel); text-align: left; font-weight: 400; vertical-align: baseline; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeiten .bis { color: var(--grau-hell); padding: 0 .2rem; }
.zeiten tr.zu td { color: var(--grau-hell); }
.zeiten tr.heute th, .zeiten tr.heute td { color: var(--gold); font-weight: 600; }
.zeiten tr.heute .bis { color: var(--gold); }
.heute-marke { display: inline-block; margin-left: .6rem; padding: .05rem .55rem; border-radius: 999px; background: var(--gold); color: var(--marine); font-size: .8rem; font-weight: 600; vertical-align: .1em; }
.zeiten-hinweis { margin-top: 1.1rem; color: var(--grau-hell); max-width: 30rem; }
.termin { display: grid; gap: 1.6rem; align-content: start; }
.termin h2 { margin-bottom: .2rem; }
.weg { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--linie-dunkel); }
.weg-ico { width: 2.2rem; height: 2.2rem; color: var(--gold); }
.weg-text { display: grid; gap: .45rem; justify-items: start; min-width: 0; }
.weg h3 { font-size: 1.3rem; color: var(--gold); text-transform: uppercase; letter-spacing: .03em; }
.weg p { color: var(--creme); max-width: 28rem; }
.telefon-gross { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; margin-top: .4rem; font-family: var(--schrift-titel); font-weight: 800; font-size: clamp(1.45rem, 6.4vw, 2.3rem); color: var(--gold); text-decoration: none; white-space: nowrap; max-width: 100%; }
.telefon-gross .ico { width: .85em; height: .85em; }
.telefon-gross:hover { color: var(--gold-hell); }
@media (min-width: 46rem) {
  .zeiten-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .zeiten-spalte { padding-right: clamp(1.5rem, 5vw, 5rem); border-right: 1px solid var(--gold); }
  .termin { padding-left: clamp(1.5rem, 5vw, 5rem); }
  .zeiten-raster h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
  .telefon-gross { font-size: clamp(1.35rem, 3vw, 2.3rem); }
}

/* Anfahrt */
.anfahrt-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.anfahrt-text { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.anfahrt-titel { font-size: clamp(1.9rem, 6vw, 3rem) !important; }
.anfahrt-ort { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.2rem; color: var(--tinte-2); margin-top: -.5rem; }
.anfahrt-satz { max-width: 30rem; }
.anfahrt-zitat { margin: .4rem 0; padding-left: 1rem; border-left: 3px solid var(--gold); }
.anfahrt-zitat blockquote { margin: 0; font-size: 1.1rem; }
.anfahrt-zitat blockquote p::before { content: "„"; }
.anfahrt-zitat blockquote p::after { content: "“"; }
.anfahrt-zitat figcaption { font-size: .95rem; color: var(--tinte-2); margin-top: .2rem; }
.karte-feld { min-width: 0; }
.karte { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--creme); border: 1px solid var(--linie); min-height: 17rem; display: grid; place-items: center; }
.karte.geladen { min-height: 0; aspect-ratio: 1; background: var(--linie); }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte-hinweis { display: grid; gap: 1rem; justify-items: center; text-align: center; padding: 1.6rem; max-width: 30rem; }
.karte-ico { width: 2.4rem; height: 2.4rem; color: var(--gold-text); }
.karte-hinweis p { color: var(--tinte-2); font-size: 1rem; }
.karte-quelle { margin-top: .6rem; font-size: .9rem; color: var(--tinte-2); }
@media (min-width: 46rem) { .karte.geladen { aspect-ratio: 4 / 3; } }
@media (min-width: 64rem) {
  .anfahrt-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
  .karte { min-height: 21rem; }
}

/* ---------- Fuss ---------- */
.fuss { background: var(--nacht); color: var(--grau-hell); border-top: 3px solid var(--gold); padding: 3rem 0 6.5rem; }
.fuss-oben { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.fuss-marke { width: min(100%, 26rem); height: auto; }
.fuss-zeile { font-family: var(--schrift-titel); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-size: .95rem; }
.fuss-innen { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; margin-top: 2.2rem; padding-top: 1.4rem; }
/* Linie nur so breit wie der Inhalt (nicht ueber den Innenabstand der Huelle) */
.fuss-innen::before { content: ""; position: absolute; top: 0; left: var(--rand-seite); right: var(--rand-seite); border-top: 1px solid var(--linie-dunkel); }
.fuss-nav { display: flex; gap: 1.2rem; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--creme); }
.fuss-nav a[aria-current="page"] { color: var(--gold); }
@media (min-width: 64rem) { .fuss { padding-bottom: 2.5rem; } }

/* ---------- WhatsApp (eigener Abschnitt) ----------
   Seit 28.10.2026 schmal: keine Buehne, sondern eine ruhige Zeile im Inhaltsraster zwischen zwei feinen Goldlinien
   (wie die Goldlinie auf dem Schild). Kleiner Spiegel mit Kalender und schwarzem Ring, Frage als kleiner Titel,
   Knopf im Hausstil (Marine-Rand) statt WhatsApp-Gruen. Ab 46rem eine Zeile: Text links, Knopf rechts.
   Die Nachbarn sind ebenfalls Papier, deshalb ruecken sie per negativem Rand je 40 % des Abschnittsabstands heran.
   Kontraste auf Papier: Titel Marine 16,3:1, Satz und Hinweis Tinte-2 7,9:1, Knopf Marine 16,3:1 (Hover Creme auf Marine 15,3:1). */
.abschnitt-whatsapp { position: relative; background: var(--papier); margin: calc(var(--abstand) * -.4) 0; }
.whatsapp-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1.1rem; padding: 1.4rem 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.whatsapp-spiegel { width: 3.25rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--marine); color: var(--gold); border: 3px solid var(--ring); }
.whatsapp-spiegel .ico { width: 55%; height: 55%; }
.whatsapp-text { display: grid; gap: .25rem; }
.whatsapp-text h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--tinte); text-wrap: balance; }
.whatsapp-text p { color: var(--tinte-2); font-size: 1.05rem; line-height: 1.5; text-wrap: pretty; }
.whatsapp-handlung { grid-column: 1 / -1; display: grid; gap: .45rem; justify-items: stretch; }
.whatsapp-handlung .knopf { white-space: normal; text-align: center; }
.whatsapp-hinweis { font-size: .875rem; color: var(--tinte-2); text-align: center; }
.whatsapp-hinweis a { color: var(--tinte); text-underline-offset: .15em; }
@media (max-width: 45.99rem) {
  /* Handy mittig wie die anderen Abschnitte: Spiegel und Titel in einer Reihe, Satz und Knopf darunter */
  .whatsapp-zeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: .7rem; padding: 1.25rem 0 1.2rem; }
  .whatsapp-text { display: contents; }
  .whatsapp-spiegel { width: 2.5rem; border-width: 2px; }
  .whatsapp-text h2 { max-width: calc(100% - 3.2rem); font-size: 1.1rem; text-align: left; }
  .whatsapp-text p { flex: 0 0 100%; max-width: 24rem; margin-inline: auto; }
  .whatsapp-handlung { flex: 0 0 100%; max-width: 22rem; margin-inline: auto; }
  .whatsapp-handlung .knopf { padding-inline: .9rem; }
}
@media (min-width: 46rem) {
  .whatsapp-zeile { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.6rem; padding: 1.5rem 0; }
  .whatsapp-handlung { grid-column: auto; justify-items: end; }
  .whatsapp-hinweis { text-align: right; }
}

/* ---------- Handy-Leiste ---------- */
.handy-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .65rem var(--rand-seite) calc(.65rem + env(safe-area-inset-bottom)); background: rgba(13, 17, 30, .97); border-top: 2px solid var(--gold); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility .25s; }
.handy-leiste.zeigen { transform: none; visibility: visible; }
.handy-leiste .knopf { padding-inline: .5rem; gap: .4rem; font-size: .95rem; }
/* schmale Handys: Zeichen ueber dem Wort, damit drei Knoepfe nebeneinander passen */
@media (max-width: 26rem) { .handy-leiste .knopf { flex-direction: column; gap: .15rem; min-height: 3.5rem; padding: .4rem .3rem; border-radius: 1rem; font-size: .85rem; } }
html.js .kopf.offen ~ .handy-leiste { visibility: hidden; }
@media (min-width: 64rem) { .handy-leiste { display: none; } }

/* ---------- Rechtsseiten ---------- */
.kopf-einfach .kopf-innen { flex-wrap: nowrap; }
.zurueck { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-family: var(--schrift-titel); font-weight: 600; font-size: .98rem; text-decoration: none; }
.zurueck .ico { transform: rotate(180deg); }
.recht { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.recht .huelle { max-width: calc(46rem + 2 * var(--rand-seite)); }
.recht h1 { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; }
.recht h2 { font-size: 1.3rem; font-weight: 700; margin: 2.2rem 0 .6rem; }
.recht p { margin: 0 0 .8rem; overflow-wrap: break-word; }
.recht .stand { margin-top: 1rem; padding: 1rem 1.2rem; background: var(--creme); border-left: 3px solid var(--gold); border-radius: .4rem; color: var(--tinte-2); }
.recht a { color: var(--blau-text); }
.recht + .fuss { padding-bottom: 2.5rem; }
@media (max-width: 23.99rem) {
  .marke img { height: 2.2rem; }
  .zurueck { white-space: nowrap; font-size: .9rem; }
  .leistung { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1rem; }
  .leistung .rund { width: 5rem; }
  .leistung h3 { font-size: 1.08rem; }
}

/* ---------- Handy: alle Abschnitte mittig (seit 27.10.2026 auf Ansage) ---------- */
@media (max-width: 45.99rem) {
  /* Symbol im Textfluss, damit es auch bei umbrechender Adresse direkt vor dem Text steht */
  .schild-angaben a { display: block; text-align: center; padding: .85rem 0; }
  .schild-angaben .ico { display: inline-block; vertical-align: -.28em; margin-right: .55rem; }

  .abschnitt-kopf { justify-items: center; text-align: center; }
  .leistung { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: .45rem; }
  .leistung .rund { grid-row: auto; width: 8.5rem; margin: 0 0 .7rem; }
  .leistung h3, .leistung p { align-self: auto; }
  .leistung p { max-width: 20rem; }
  .leistungen { gap: 2.4rem; }
  .mehr-leistungen, .hinweis-klein { text-align: center; }
  .mehr-gruppe ul { justify-content: center; }

  .note { justify-items: center; text-align: center; }
  .note-zeile { justify-content: center; }
  .stimmen-wisch { text-align: center; }
  .stimme { align-items: center; text-align: center; }
  .stimme-wer { width: 100%; }

  .zeiten-spalte, .termin { text-align: center; }
  .zeiten, .zeiten-hinweis { margin-left: auto; margin-right: auto; }
  .weg { grid-template-columns: 1fr; justify-items: center; gap: .7rem; }
  .weg-text { justify-items: center; }
  .weg p { margin: 0 auto; }

  .anfahrt-text { justify-items: center; text-align: center; }
  .anfahrt-zitat { padding: 1rem 0 0; border-left: 0; position: relative; }
  .anfahrt-zitat::before { content: ""; position: absolute; top: 0; left: 50%; width: 3rem; height: 3px; margin-left: -1.5rem; background: var(--gold); border-radius: 2px; }

  .fuss-innen { justify-content: center; text-align: center; }
  .fuss-nav { justify-content: center; }
}