/*
  HAIR & BEAUTY by Othman: Stil der Seite (22.10.2026).
  Schwarz, Weiss und Gold wie im Salon: weisse Waende (--wand), helle Fliesen (--fliese), schwarzes Leder und
  der Lack am Empfang (--lack), goldene Spiegelrahmen (--gold). Gold gibt es als Linie, Akzent und grosse Schrift
  auf Schwarz; auf Weiss steht Gold als Text nur in der dunklen Fassung --gold-tief (5,3:1).
  Das eine laute Element ist der Bogen: das Salonfoto in der Buehne sitzt darin wie in einem der Spiegel,
  die Portraets im Team wiederholen ihn leise. Sonst: ruhige Flaechen, klare Linien, viel Luft.
  Schriften (selbst gehostet, fontsource, OFL): Cormorant Garamond fuer Ueberschriften, Jost fuer Text.
*/
@font-face { font-family: "Cormorant Garamond"; src: url("schriften/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("schriften/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --wand: #ffffff;
  --fliese: #f3f3f1;
  --linie: #e2e0db;
  --rand-feld: #8a847b;      /* Rahmen von Eingabefeldern: 3,6:1 auf Weiss */
  --lack: #141311;
  --leder: #1e1c19;
  --grau: #5e5a54;           /* 6,8:1 auf Weiss, 6,2:1 auf --fliese */
  --gold: #cda95e;           /* nur auf Schwarz als Text (8,3:1) oder als Linie */
  --gold-tief: #86662a;      /* Gold als Text auf Weiss (5,3:1) */
  --gruen-haken: #1e7a3c;    /* Haken der Buchungsbestaetigung (5,4:1 auf Weiss, 4,8:1 auf #eaf5ee) */
  --gold-hell: #e9d9b4;
  --auf-lack: #e6e1d7;       /* Fliesstext auf Schwarz */
  --gruen: #2e7d4f;
  --rot: #a3261d;

  --schrift: "Jost", "Helvetica Neue", Arial, sans-serif;
  --titel: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  /* Groessen in Stufen je Breite (600, 900, 1200) statt vw: rechnet in jedem Browser und jeder
     Bildschirmaufnahme gleich (Ganzseitenfotos mit captureBeyondViewport rechneten vw zeitweise falsch) */
  --t-klein: .9375rem;
  --t-text: 1.0625rem;
  --t-gross: 1.125rem;
  --t-zitat: 1.25rem;
  --t-h3: 1.5rem;
  --t-schritt: 1.75rem;
  --t-erfolg: 2rem;
  --t-h2: 2.375rem;
  --t-h1: 3rem;

  --rand: 16px;
  --breite: 1200px;
  --abstand: 72px;
  --luft-s: 14px;
  --luft-m: 24px;
  --luft-l: 36px;
  --spalt: 48px;
  --karte-pad: 20px;
  --karte-rund: 18px;
  --zitat-pad: 22px;
  --kopf-h: 76px;
  --bogen: 999px 999px 0 0;
}
@media (min-width: 600px) {
  :root { --t-gross: 1.1875rem; --t-zitat: 1.3rem; --t-h3: 1.625rem; --t-schritt: 2rem; --t-erfolg: 2.25rem; --t-h2: 2.75rem; --t-h1: 3.75rem;
    --rand: 24px; --abstand: 96px; --luft-s: 16px; --luft-m: 28px; --luft-l: 44px; --spalt: 56px; --karte-pad: 28px; --karte-rund: 22px; --zitat-pad: 26px; }
}
@media (min-width: 900px) {
  :root { --t-gross: 1.25rem; --t-zitat: 1.35rem; --t-h3: 1.75rem; --t-schritt: 2.25rem; --t-erfolg: 2.5rem; --t-h2: 3.125rem; --t-h1: 3.9rem;
    --rand: 40px; --abstand: 120px; --luft-s: 20px; --luft-m: 32px; --luft-l: 56px; --spalt: 80px; --karte-pad: 40px; --karte-rund: 26px; --zitat-pad: 30px; }
}
/* Bis 1023 px ist die Textspalte der Buehne schmal: "in der Steinstraße" passt erst ab hier in 4.5rem */
@media (min-width: 1024px) { :root { --t-h1: 4.5rem; } }
@media (min-width: 1200px) {
  :root { --t-gross: 1.3125rem; --t-zitat: 1.4rem; --t-h3: 1.875rem; --t-schritt: 2.375rem; --t-erfolg: 2.75rem; --t-h2: 3.625rem; --t-h1: 5.125rem;
    --rand: 48px; --abstand: 136px; --luft-s: 22px; --luft-m: 36px; --luft-l: 64px; --spalt: 104px; --karte-pad: 52px; --karte-rund: 28px; --zitat-pad: 32px; }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (min-width: 1100px) { html { scroll-padding-top: calc(var(--kopf-h) + 20px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body { margin: 0; background: var(--wand); color: var(--leder); font-family: var(--schrift); font-size: var(--t-text); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--titel); font-weight: 600; line-height: 1.06; letter-spacing: -.005em; color: var(--lack); text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold-tief); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-hell); color: var(--lack); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }   /* "U-Bahn", "Make-up": nicht am Bindestrich umbrechen */
.zeichensatz { position: absolute; width: 0; height: 0; overflow: hidden; }
.huelle { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.ico { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sprung { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 12px 18px; background: var(--lack); color: #fff; border-radius: 10px; text-decoration: none; }
.sprung:focus { left: 8px; }

/* Knoepfe: Pillenform, Lack mit Weiss oder Rand; auf Schwarz Gold */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: .7em 1.45em; border: 1.5px solid transparent; border-radius: 999px; font: 500 1rem/1.2 var(--schrift); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.knopf.gross { min-height: 56px; padding: .85em 1.8em; font-size: 1.0625rem; }
.knopf-voll { background: var(--lack); border-color: var(--lack); color: #fff; }
.knopf-rand { background: transparent; border-color: var(--lack); color: var(--lack); }
.knopf-gold { background: var(--gold); border-color: var(--gold); color: var(--lack); }
.knopf-hell { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
/* Hover nur mit Maus: auf Touch-Geraeten bliebe er nach dem Tippen haengen ("Weiter" ist in allen Schritten
   derselbe Knopf). Schwarze Knoepfe bekommen Gold wie die Spiegelrahmen (8,3:1 auf Lack). */
@media (hover: hover) {
  .knopf-voll:hover { border-color: var(--gold); color: var(--gold); }
  .knopf-rand:hover { background: var(--lack); color: #fff; }
  .knopf-gold:hover { background: var(--gold-hell); border-color: var(--gold-hell); }
  .knopf-hell:hover { background: #fff; color: var(--lack); }
}
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .55; cursor: progress; }
/* Was ohne JavaScript nichts tun wuerde, steht nur mit (seite.js setzt html.js), und umgekehrt */
.js .nur-ohne-js, html:not(.js) .nur-mit-js { display: none !important; }

/* Kopf: voll deckend (sonst scheinen grosse Ueberschriften beim Scrollen durch); klebt erst ab 1100 px, darunter
   scrollt er mit. Drei Spalten auf allen Breiten: links der Menueknopf, Mitte die Wortmarke, rechts Anrufen und
   Termin buchen. Die Aussenspalten sind gleich breit (minmax(0, 1fr)), damit steht die Marke genau in der Mitte der
   Seite. Was in den Aussenspalten steht, richtet sich nach ihrer eigenen Breite (Container-Abfragen in em, also auch
   nach der Schriftgroesse): "Termin buchen" erst, wenn mindestens 40 px Luft zur Marke bleiben, Nummer und das Wort
   "Menü" (beide ohne Rahmen) erst, wenn dazu auch die Nummer passt. Bei grosser Schrift bleiben es runde Knoepfe. */
.kopf { --kopf-knopf: 48px; --kopf-luecke: 10px; --kopf-rand: var(--rand); position: relative; z-index: 30; background: var(--wand); border-bottom: 1px solid var(--linie); }
@media (max-width: 359px) { .kopf { --kopf-knopf: 44px; --kopf-rand: 12px; } }
@media (min-width: 600px) { .kopf { --kopf-luecke: 12px; } }
@media (min-width: 900px) { .kopf { --kopf-luecke: 20px; } }
@media (min-width: 1100px) { .kopf { position: sticky; top: 0; } }
.kopf .huelle { width: min(100% - 2 * var(--kopf-rand), var(--breite)); }
.kopf-reihe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--kopf-luecke); min-height: 68px; }
@media (min-width: 1024px) { .kopf-reihe { min-height: var(--kopf-h); } }
.kopf-links, .kopf-rechts { display: flex; align-items: center; min-width: 0; container-type: inline-size; }
.kopf-rechts { justify-content: flex-end; gap: var(--kopf-luecke); }
/* Wortmarke 216 / 248 / 288 px breit (bis 30.10.2026: 176 / 200 / 232); darunter so breit, wie zwischen den beiden
   Knoepfen mit 10 px Luft Platz ist (320 px: 188, unter 360 px rueckt der Kopf dafuer 12 px an den Rand). Der
   Fokusring (3 px, Abstand 3 px) liegt mit dem schmalen Innenabstand ganz im Kopf. */
.marke { display: block; padding: 3px 0; border-radius: 6px; }
.marke img { display: block; width: min(216px, 100vw - 2 * var(--kopf-rand) - 2 * var(--kopf-knopf) - 2 * var(--kopf-luecke)); height: auto; }
@media (min-width: 600px) { .marke img { width: 248px; } }
@media (min-width: 1200px) { .marke img { width: 288px; } }
/* Anrufen und Menue: runde Knoepfe; mit Nummer bzw. dem Wort "Menü" beide ohne Rahmen (Rahmen bei Hover) */
.kopf-anruf { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: .5em; width: var(--kopf-knopf); height: var(--kopf-knopf); border: 1.5px solid var(--linie); border-radius: 999px; color: var(--lack); font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .2s; }
.kopf-anruf .ico { width: 1.15em; height: 1.15em; color: var(--gold-tief); }
.kopf-anruf .kopf-nummer { display: none; }
.kopf-buchen { display: none; flex: none; white-space: nowrap; }
.menue-knopf { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 12px; width: var(--kopf-knopf); height: var(--kopf-knopf); padding: 0; border: 1.5px solid var(--linie); border-radius: 999px; background: var(--wand); color: var(--lack); font: 500 1rem/1 var(--schrift); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .2s; }
.menue-wort { display: none; }
@media (hover: hover) { .menue-knopf:hover, .kopf-anruf:hover { border-color: var(--gold); } }
/* Ohne JavaScript ein gleich aussehender Link auf die Navigation im Fuss statt des Knopfs */
html:not(.js) .menue-mit-js, .js .menue-ohne-js { display: none; }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 18px; height: 1.8px; background: var(--lack); border-radius: 2px; transition: transform .25s, background-color .25s; }
.menue-striche { position: relative; flex: none; }
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }
/* Spaltenbreite in em (Schrift im Kopf 17 px): 14.5em = rund 246 px fuer Anrufen, Luecke und "Termin buchen" mit
   40 px Luft zur Marke, 21.75em = rund 370 px dazu fuer die Nummer */
@container (min-width: 14.5em) { .kopf-buchen { display: inline-flex; } }
@container (min-width: 21.75em) {
  .kopf-anruf { width: auto; padding: 0 12px; border-color: transparent; }
  .kopf-anruf .kopf-nummer { display: inline; }
  .menue-knopf { width: auto; margin-left: -14px; padding: 0 16px 0 14px; border-color: transparent; }   /* Striche buendig mit dem Inhalt */
  .menue-wort { display: inline; }
}
/* Alte Browser ohne Container-Abfragen: Termin buchen ab 900 px, sonst runde Knoepfe */
@supports not (container-type: inline-size) { @media (min-width: 900px) { .kopf-buchen { display: inline-flex; } } }
/* Menue: am Handy im Fluss unter dem Kopf (schiebt den Inhalt, deckt nichts zu), ab 768 px ein Paneel ueber dem
   Inhalt, das bei Klick daneben, Escape oder einem Punkt wieder zugeht (seite.js). Zwei Spalten auf allen
   breiten Fenstern, bei drei bricht "Anfahrt und Öffnungszeiten" um */
.kopf-menue { border-top: 1px solid var(--linie); background: var(--wand); }
.kopf-menue[hidden] { display: none; }
.kopf-menue-innen { display: grid; padding: 4px 0 20px; }
.kopf-menue a { display: flex; align-items: center; min-height: 52px; color: var(--lack); font-size: 1.125rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--linie); }
.kopf-menue a:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .kopf-menue { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--kopf-h)); overflow-y: auto; border-bottom: 1px solid var(--linie); box-shadow: 0 28px 48px -28px rgba(20, 19, 17, .35); }
  .kopf-menue-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); padding: 16px 0 36px; }
  .kopf-menue a, .kopf-menue a:last-child { min-height: 68px; border-bottom: 1px solid var(--linie); font-family: var(--titel); font-size: var(--t-h3); font-weight: 600; line-height: 1.15; }
  @media (hover: hover) { .kopf-menue a:hover { color: var(--gold-tief); } }
}

/* Buehne */
.buehne { padding: calc(var(--abstand) * .6) 0 calc(var(--abstand) * .92); overflow: hidden; }
.buehne-raster { display: grid; gap: var(--spalt); align-items: center; }
.buehne h1 { font-size: var(--t-h1); line-height: .98; font-weight: 600; letter-spacing: -.012em; }
.h1-zeile { display: block; }
@media (min-width: 900px) { .h1-zeile { white-space: nowrap; } }   /* nie "in der" allein in einer Zeile */
.buehne-satz { max-width: 33em; margin: var(--luft-m) 0 0; font-size: var(--t-gross); line-height: 1.55; color: var(--grau); }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--luft-m); }
.buehne-knoepfe .ico { color: var(--gold-tief); }
@media (max-width: 599px) { .buehne-knoepfe .knopf { width: 100%; } }
@media (min-width: 900px) and (max-width: 1023px) { .buehne-knoepfe .knopf.gross { padding-inline: 1.4em; } }   /* beide Knoepfe in einer Reihe */
@media (hover: hover) { .buehne-knoepfe .knopf-rand:hover .ico { color: var(--gold); } }
.buehne-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 28px; margin: var(--luft-m) 0 0; padding: 0; }
.wertung { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; margin: 0; color: var(--leder); font-size: .95rem; text-decoration: none; }
@media (hover: hover) { a.wertung:hover span:last-child { text-decoration: underline; } }
.wertung b { font-size: 1.06rem; font-weight: 600; }
/* Google-G und ein gleich breiter leerer Platz bei Treatwell: Zahlen und Sterne stehen buendig untereinander */
.wertung-g, .wertung-platz { width: 20px; height: 20px; flex: none; }
.abschnitt-kopf .wertung { margin: 0; color: var(--leder); font-size: .95rem; line-height: 1.4; }
.sterne { display: inline-flex; gap: 1px; }
.sterne svg { width: 15px; height: 15px; fill: var(--gold); }
/* 360 px: "111 Bewertungen auf Google" bleibt mit kleineren Sternen in einer Zeile */
@media (max-width: 399px) { .buehne-fakten .wertung { gap: .45em; } .buehne-fakten .sterne svg { width: 12px; height: 12px; } }
@media (max-width: 359px) { .buehne-fakten .sterne { display: none; } }
.status { display: flex; align-items: center; gap: .65em; margin: 14px 0 0; color: var(--grau); font-size: var(--t-klein); }
.punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #b4aea4; }
.punkt.offen { background: var(--gruen); box-shadow: 0 0 0 4px rgba(46, 125, 79, .16); }

/* Der Bogen: Foto wie im Spiegel, goldener Rahmen mit Abstand */
.buehne-bild { position: relative; width: calc(100% - 64px); max-width: 220px; aspect-ratio: 592 / 800; margin: 14px auto 0; }
@media (min-width: 600px) { .buehne-bild { max-width: 340px; } }
/* Bis 899 px eine Spalte: das Foto rueckt direkt hinter die Knoepfe und damit in den ersten Bildschirm,
   Bewertungen und Tagesstatus folgen darunter (.buehne-text gibt seine Kinder dafuer ans Raster ab;
   das Foto ist nicht fokussierbar, die Tab-Reihenfolge bleibt gleich) */
@media (max-width: 899px) {
  .buehne-raster { gap: 0; }
  .buehne-text { display: contents; }
  .buehne-bild { order: 1; margin-top: calc(var(--luft-l) + 14px); margin-bottom: 14px; }
  .buehne-fakten, .buehne .status { order: 2; }
}
.buehne-bild img { display: block; width: 100%; height: 100%; }
.buehne-bild img { object-fit: cover; border-radius: var(--bogen); background: var(--fliese); }
.buehne-bild::before { content: ""; position: absolute; inset: -14px; border: 1.5px solid var(--gold); border-radius: var(--bogen); pointer-events: none; }
@media (min-width: 900px) {
  .buehne-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .buehne-bild { width: calc(100% - 32px); max-width: 440px; margin: 16px 16px 16px auto; }
  .buehne-bild::before { inset: -16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .buehne-bild img { animation: bogen-auf 1.1s cubic-bezier(.2, .7, .1, 1) both; }
  .buehne-bild::before { animation: rahmen-auf 1.4s .25s cubic-bezier(.2, .7, .1, 1) both; }
}
@keyframes bogen-auf { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rahmen-auf { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt-kopf { max-width: 44rem; margin-bottom: var(--luft-l); }
.abschnitt-kopf h2 { font-size: var(--t-h2); }
.abschnitt-kopf p { margin: var(--luft-s) 0 0; font-size: var(--t-gross); line-height: 1.55; color: var(--grau); }

/* Zweispaltig ab 1100 px: Kopf links (klebt beim Scrollen), Inhalt rechts */
@media (min-width: 1100px) {
  .spalten { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: var(--spalt); align-items: start; }
  .spalten-kopf { position: sticky; top: calc(var(--kopf-h) + 40px); margin-bottom: 0; }
}

/* Leistungen und Preise */
.preise { border-top: 1px solid var(--linie); }
.preisliste { border-top: 1.5px solid var(--lack); }
.kategorie { border-bottom: 1px solid var(--linie); }
.kategorie summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 4px 24px; min-height: 48px; padding: 22px 0; cursor: pointer; list-style: none; border-radius: 6px; }
.kategorie summary::-webkit-details-marker { display: none; }
.kat-name { font-family: var(--titel); font-size: var(--t-h3); font-weight: 600; line-height: 1.15; color: var(--lack); }
.kat-info { color: var(--grau); font-size: var(--t-klein); white-space: nowrap; }
.kat-pfeil { width: 26px; height: 26px; fill: none; stroke: var(--lack); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.kategorie[open] .kat-pfeil { transform: rotate(180deg); }
@media (hover: hover) { .kategorie summary:hover .kat-name { color: var(--gold-tief); } }
.leistungen { list-style: none; margin: 0; padding: 0 0 22px; }
.leistung + .leistung { border-top: 1px solid var(--linie); }
.l-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name preis" "dauer buchen"; align-items: baseline; gap: 2px 18px; padding: 14px 0; }
.l-name { grid-area: name; font-weight: 500; color: var(--lack); }
.l-dauer { grid-area: dauer; color: var(--grau); font-size: var(--t-klein); white-space: nowrap; }
.l-preis { grid-area: preis; justify-self: end; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; color: var(--lack); }
.l-preis s { margin-left: .35em; color: var(--grau); font-weight: 400; }
.l-aktion { display: inline-block; margin-right: .4em; padding: 1px 9px; border-radius: 999px; background: var(--lack); color: var(--gold); font-size: .8rem; font-weight: 600; vertical-align: 1px; }
.l-buchen { grid-area: buchen; justify-self: end; display: inline-flex; align-items: center; min-height: 28px; padding: 0 2px; color: var(--gold-tief); font-size: var(--t-klein); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(134, 102, 42, .45); }
@media (hover: hover) { .l-buchen:hover { text-decoration-color: currentColor; } }
.varianten { list-style: none; margin: -6px 0 14px; padding: 0 0 0 18px; border-left: 1.5px solid var(--gold); }
.l-variante { padding: 8px 0; }
.l-variante .l-name { font-weight: 400; color: var(--leder); }
/* Zurzeit nicht angeboten (Panel > Leistungen & Preise): grau, aber lesbar (--grau 6,8:1), kein "Buchen" */
.leistung-aus .l-name, .leistung-aus .l-variante .l-name, .leistung-aus .l-preis, .leistung-aus .l-preis s, .kategorie-aus .kat-name { color: var(--grau); font-weight: 400; }
.l-aus { grid-area: buchen; justify-self: end; color: var(--grau); font-size: var(--t-klein); font-style: italic; }
/* Beschreibung des Salons unter einer Leistung (seit 22.10.2026, Brautstyling) */
.l-text { margin: -6px 0 14px; max-width: 60ch; font-size: .92rem; line-height: 1.5; color: var(--leder); }
@media (min-width: 700px) {
  .l-zeile { grid-template-columns: minmax(0, 1fr) 7.5em 10.5em 5.5em; grid-template-areas: "name dauer preis buchen"; gap: 4px 20px; }
  .l-dauer { justify-self: start; }
  .l-preis { text-align: right; }
  .l-aus { grid-area: auto; grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
@media (max-width: 599px) {
  .kategorie summary { grid-template-columns: minmax(0, 1fr) 28px; }
  .kat-info { grid-column: 1; grid-row: 2; }
  .kat-pfeil { grid-column: 2; grid-row: 1 / 3; }
}

/* Online-Buchung */
.buchen { background: var(--fliese); }
.buchung { position: relative; padding: var(--karte-pad); background: var(--wand); border: 1px solid var(--linie); border-radius: var(--karte-rund); box-shadow: 0 30px 60px -40px rgba(20, 19, 17, .3); }
.buchen-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.buchen-extra { margin-top: 32px; }
.buchen-punkte { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.buchen-punkte li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.buchen-punkte b { font-weight: 500; color: var(--lack); }
.buchen-punkte span { color: var(--grau); font-size: var(--t-klein); }
.buchen-punkte a { display: inline-flex; align-items: center; min-height: 24px; color: var(--lack); font-weight: 500; }
@media (min-width: 1100px) {
  .buchen-raster { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-areas: "kopf karte" "extra karte"; grid-template-rows: auto 1fr; column-gap: var(--spalt); align-items: start; }
  .buchen-kopf { grid-area: kopf; }
  .buchung { grid-area: karte; }
  /* Die Punkte laufen neben der langen Karte mit, statt links eine leere Flaeche zu lassen */
  .buchen-extra { grid-area: extra; margin-top: 0; position: sticky; top: calc(var(--kopf-h) + 40px); }
}
.js .buchung:not(.ohne-assistent) [data-ohne-js] { display: none; }
.js .buchung.laedt [data-kontakt] { display: none; }
.buchung-laden { margin: 0; color: var(--grau); }
.felder { display: grid; gap: 18px 20px; }
@media (min-width: 700px) { .felder { grid-template-columns: 1fr 1fr; } .felder .breit { grid-column: 1 / -1; } }
.ohne-js-satz { color: var(--grau); }
.ohne-js .felder { margin-bottom: 18px; }
.ohne-js-ende { margin-top: 24px; }
.ohne-js-ende p { margin: 14px 0 0; color: var(--grau); font-size: var(--t-klein); }
.feld { display: grid; gap: 8px; }
.feld-name { font-weight: 500; color: var(--lack); }
.optional { color: var(--grau); font-weight: 400; font-size: var(--t-klein); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--rand-feld); border-radius: 12px; background: var(--wand); color: var(--leder); font-size: 1rem; line-height: 1.4; }
.feld textarea { min-height: 96px; resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--gold-tief); outline-offset: 1px; border-color: var(--lack); }
.feld [aria-invalid="true"] { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.feld-fehler { display: block; margin: 0; color: var(--rot); font-size: var(--t-klein); font-weight: 500; }
.einwilligung .feld-fehler { grid-column: 2; }
.lockfeld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einwilligung { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: var(--t-klein); line-height: 1.5; color: var(--leder); cursor: pointer; }
.einwilligung input { width: 24px; height: 24px; margin: 0; accent-color: var(--lack); cursor: pointer; }
.einwilligung a { color: var(--lack); font-weight: 500; }

/* Assistent in fuenf Schritten */
.w-schritte { list-style: none; display: flex; gap: 6px; margin: 0 0 var(--luft-m); padding: 0 0 var(--luft-s); border-bottom: 1px solid var(--linie); }
.w-schritte li { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; color: var(--grau); font-size: var(--t-klein); }
.w-schritte li:first-child { flex: 0 0 auto; }
.w-schritte li + li::before { content: ""; flex: 1 1 12px; min-width: 8px; height: 1px; background: var(--linie); }
.w-nr { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 1.5px solid #b9b4ab; border-radius: 50%; font-size: .9rem; font-weight: 600; color: var(--grau); background: var(--wand); }
.w-schritte li[aria-current="step"] { color: var(--lack); font-weight: 500; }
.w-schritte li[aria-current="step"] .w-nr { background: var(--lack); border-color: var(--lack); color: #fff; }
.w-schritte li.erledigt .w-nr { background: var(--gold); border-color: var(--gold); color: var(--lack); }
.w-schritte button { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--lack); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(20, 19, 17, .3); text-underline-offset: .2em; }
.w-schritt-name { white-space: nowrap; }
@media (max-width: 419px) {
  .w-schritte { gap: 6px; justify-content: space-between; }
  .w-schritte li, .w-schritte li:first-child { flex: 0 0 auto; gap: 8px; }
  .w-schritte li + li::before { display: none; }
  .w-nr { width: 30px; height: 30px; }
}
@media (max-width: 699px) {
  .w-schritte li:not([aria-current="step"]) .w-schritt-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.w-schritt[hidden] { display: none; }
.w-titel { font-size: var(--t-schritt); outline: none; }
.w-titel:focus-visible { outline: 3px solid var(--gold-tief); outline-offset: 4px; }
.w-auswahl { margin: 12px 0 0; color: var(--grau); font-size: var(--t-klein); line-height: 1.5; }
.w-auswahl b { display: block; color: var(--lack); font-weight: 500; font-size: 1rem; }
.w-wunsch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; padding: 10px 16px; border-radius: 12px; background: var(--fliese); font-size: var(--t-klein); }
.w-link { display: inline-flex; align-items: center; min-height: 28px; padding: 0; border: 0; background: none; color: var(--gold-tief); font-weight: 500; text-decoration: underline; cursor: pointer; }
.w-gruppe { margin: var(--luft-m) 0 0; padding: 0; border: 0; min-width: 0; }
.w-frage { display: block; margin: 0 0 12px; padding: 0; font-weight: 500; color: var(--lack); }
.w-hinweis { margin: 10px 0 0; color: var(--grau); font-size: var(--t-klein); }

/* Auswahlflaechen: das Radio liegt unsichtbar ueber der ganzen Flaeche */
.w-wahl { position: relative; display: grid; align-items: center; border: 1.5px solid var(--linie); border-radius: 14px; background: var(--wand); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.w-wahl > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .w-wahl:hover { border-color: #a8a297; } }
.w-wahl.gewaehlt, .w-wahl:has(> input:checked) { border-color: var(--lack); box-shadow: inset 0 0 0 1px var(--lack); background: #fbfaf7; }
.w-wahl:has(> input:focus-visible) { outline: 3px solid var(--gold-tief); outline-offset: 2px; }
.w-wahl.gesperrt { cursor: not-allowed; background: var(--fliese); border-color: var(--fliese); color: #77726b; }
.w-wahl.gesperrt > input { cursor: not-allowed; }
.w-marke { width: 22px; height: 22px; border: 1.5px solid var(--rand-feld); border-radius: 50%; background: var(--wand); }
.w-wahl.gewaehlt .w-marke, .w-wahl:has(> input:checked) .w-marke { border: 7px solid var(--lack); }
.w-name { font-weight: 500; color: var(--lack); line-height: 1.35; }
.w-mehr { display: block; color: var(--grau); font-size: var(--t-klein); line-height: 1.4; margin-top: 2px; }
.w-preis { font-weight: 500; white-space: nowrap; text-align: right; color: var(--lack); font-variant-numeric: tabular-nums lining-nums; }
.w-preis s { display: block; color: var(--grau); font-weight: 400; font-size: var(--t-klein); }

.w-bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .w-bereiche { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
.w-kachel { min-height: 64px; padding: 10px 14px; }
/* Lange Bereichsnamen ("Hochsteckfrisuren,") brechen notfalls im Wort, statt aus der Kachel zu laufen
   (320 px mit vergroesserten Textabstaenden nach WCAG 1.4.12) */
.w-kachel .w-name { font-size: .95rem; overflow-wrap: anywhere; }
@media (max-width: 419px) { .w-kachel .w-name { hyphens: auto; } }
.w-liste { display: grid; gap: 8px; }
.w-option { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; min-height: 60px; padding: 12px 16px; }

.w-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.w-person { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; min-height: 84px; padding: 12px 16px; }
/* Bilder der Personenwahl: enge Kopfausschnitte (salon.json "kopf", 112 px), damit Gesichter im Kreis erkennbar sind */
.w-person img, .w-person .w-egal { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--fliese); }
.w-person .w-egal { position: relative; display: block; border: 1.5px solid var(--gold); background: var(--wand); }
/* "Egal": die Koepfe nebeneinander bzw. im Dreieck, ohne sich zu verdecken */
.w-egal img { position: absolute; width: 24px; height: 24px; border: 1.5px solid var(--wand); border-radius: 50%; object-fit: cover; }
.w-egal-2 img:nth-child(1) { left: 1.5px; top: 14.5px; } .w-egal-2 img:nth-child(2) { right: 1.5px; top: 14.5px; }
.w-egal-3 img:nth-child(1) { left: 14.5px; top: 1px; } .w-egal-3 img:nth-child(2) { left: 2.5px; top: 21.5px; } .w-egal-3 img:nth-child(3) { right: 2.5px; top: 21.5px; }

.w-tage-feld { min-width: 0; margin: 0; padding: 0; border: 0; }
.w-tage-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.w-zeitraum { margin: 0; font-weight: 500; color: var(--lack); text-align: center; }
.w-blaettern { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--linie); border-radius: 50%; background: var(--wand); color: var(--lack); cursor: pointer; }
.w-blaettern .ico { width: 22px; height: 22px; }
@media (hover: hover) { .w-blaettern:hover:not([disabled]) { border-color: var(--lack); } }
.w-blaettern[disabled] { opacity: .35; cursor: default; }
.w-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.w-tag { justify-items: center; align-content: center; gap: 0; min-height: 76px; padding: 8px 2px; text-align: center; border-radius: 12px; }
.w-tag-name { font-size: .82rem; color: var(--grau); line-height: 1.2; }
.w-tag-zahl { font-family: var(--titel); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--lack); font-variant-numeric: lining-nums; }
.w-tag-info { font-size: .74rem; line-height: 1.2; color: var(--grau); }
.w-tag.frei .w-tag-info { color: var(--gruen); font-weight: 500; }
.w-tag.gesperrt .w-tag-zahl { color: #77726b; }
.w-tag.gesperrt .w-tag-info, .w-tag.gesperrt .w-tag-name { color: #6f6a63; }
/* Schmal: kein Innenabstand an den Seiten, damit "vorbei" (heute nach Ladenschluss) in die Spalte passt */
@media (max-width: 419px) { .w-tag { padding-inline: 0; } }
@media (max-width: 359px) { .w-tag-info { font-size: .68rem; } }
@media (min-width: 700px) { .w-tage { gap: 8px; } .w-tag { min-height: 88px; } .w-tag-name { font-size: .9rem; } .w-tag-zahl { font-size: 1.85rem; } .w-tag-info { font-size: .8rem; } }

.w-zeiten { margin-top: var(--luft-m); }
.w-zeitgruppe { margin: 16px 0 8px; color: var(--grau); font-size: var(--t-klein); }
.w-zeitgruppe:first-of-type { margin-top: 0; }
.w-zeit-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.w-zeit { justify-items: center; min-height: 48px; padding: 8px; border-radius: 999px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--lack); }
.w-zeit.gewaehlt, .w-zeit:has(> input:checked) { background: var(--lack); color: #fff; }
.w-leer { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--fliese); }
.w-notiz { padding: 12px 16px; border-radius: 12px; background: var(--fliese); color: var(--lack); font-size: var(--t-klein); }   /* bisherige Uhrzeit nicht mehr frei */
.w-leer p { margin: 0 0 12px; }
.w-laden { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 0; color: var(--grau); }
.w-laden::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--linie); border-top-color: var(--gold-tief); border-radius: 50%; animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.w-kontakt { margin-top: var(--luft-m); }
.w-zusammenfassung { display: grid; gap: 0; margin: var(--luft-m) 0 0; border-top: 1px solid var(--linie); }
.w-zusammenfassung > div { display: grid; gap: 2px 24px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.w-zusammenfassung dt { color: var(--grau); font-size: var(--t-klein); }
.w-zusammenfassung dd { margin: 0; color: var(--lack); font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 700px) { .w-zusammenfassung > div { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; } }
.w-preis-gross { font-family: var(--titel); font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: lining-nums; }
.w-klein { margin: 16px 0 0; color: var(--grau); font-size: var(--t-klein); }
/* Serientermine: Wahl in Schritt 3, Liste aller Termine in Schritt 5 und nach dem Buchen */
.w-serie { margin-top: var(--luft-m); }
.w-serie-an { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--lack); cursor: pointer; }
.w-serie-an input { width: 24px; height: 24px; margin: 0; accent-color: var(--lack); cursor: pointer; }
.w-serie-felder { display: grid; gap: 12px; margin-top: 14px; }
.w-serie-felder[hidden] { display: none; }
@media (min-width: 560px) { .w-serie-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.w-serie-plan { margin-top: var(--luft-m); }
.w-serie-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); text-align: left; }
.w-serie-liste li { display: grid; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--lack); overflow-wrap: anywhere; }
.w-serie-liste li.nicht { color: var(--grau); }
.w-serie-liste li.nicht .w-serie-tag { text-decoration: line-through; }
.w-serie-tag { font-weight: 500; }

/* Meldung: Fliesstext mit Telefon-Link und geschuetzten Woertern, deshalb Block (kein Flex) */
.w-fehler { display: block; margin: 22px 0 0; padding: 14px 16px; border-radius: 12px; background: #fbeeec; color: var(--rot); font-weight: 500; }
.w-fehler:empty { margin: 0; padding: 0; }
.w-schritt > .w-fehler { margin: 16px 0 0; }
.w-fuss > .w-fehler:not(:empty) { margin: 0 0 var(--luft-s); }
.w-fehler a { color: inherit; }
.w-fuss { margin-top: var(--luft-m); }
.w-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: var(--luft-s); border-top: 1px solid var(--linie); }
.w-nav .knopf-voll { margin-left: auto; min-width: 9.5em; }
.w-nav [hidden] { display: none; }
@media (max-width: 599px) {
  .w-nav { flex-wrap: nowrap; gap: 10px; }
  .w-nav .knopf { padding-inline: 1.1em; }
  .w-nav .knopf.gross { min-height: 52px; font-size: 1rem; }
  .w-nav .knopf-voll { min-width: 0; }
}
/* Handy: Meldung und Knoepfe kleben unten im Bild, solange die Buchung zu sehen ist (nach der Wahl einer
   Uhrzeit laege "Weiter" sonst einen Bildschirm tiefer). scroll-padding-bottom (Fuss) haelt den Fokus frei. */
@media (max-width: 699px) {
  .w-fuss { position: sticky; bottom: 0; z-index: 3; margin-inline: calc(-1 * var(--karte-pad)); padding: 12px var(--karte-pad); background: var(--wand); border-top: 1px solid var(--linie); box-shadow: 0 -14px 24px -22px rgba(20, 19, 17, .5); }
  .w-nav { padding-top: 0; border-top: 0; }
  .w-fuss > .w-fehler:not(:empty) { margin: 0 0 12px; padding: 10px 14px; }
}

.w-erfolg { text-align: center; padding: calc(var(--luft-s) - 6px) 0; outline: none; }
.w-erfolg-zeichen { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border: 2px solid var(--gruen-haken); border-radius: 50%; color: var(--gruen-haken); background: #eaf5ee; }
.w-erfolg-zeichen .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.w-erfolg h3 { font-size: var(--t-erfolg); outline: none; }
.w-erfolg-termin { text-wrap: balance; margin: 18px auto 22px; max-width: 34rem; font-size: var(--t-gross); line-height: 1.5; color: var(--lack); }
.w-erfolg-termin b { font-weight: 600; }
.w-erfolg p { max-width: 34rem; margin-inline: auto; }
.w-erfolg .knopf { margin-top: 12px; }
.w-meldung:focus { outline: none; }
.w-meldung { margin: 0 0 24px; padding: 14px 18px; border-radius: 12px; background: var(--fliese); color: var(--lack); }
.w-meldung.fehler { background: #fbeeec; color: var(--rot); }

/* Team: schmal als Liste mit kleinem Bogen, ab 700 px immer drei nebeneinander (keine einzelne Person in Reihe 2) */
.team-liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; margin: 0; padding: 0; }
.person { text-align: center; }
.person-bild { position: relative; width: min(200px, 100% - 20px); aspect-ratio: 4 / 5; margin: 0 auto 24px; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: var(--bogen); background: var(--fliese); }
.person-bild::before { content: ""; position: absolute; inset: -9px; border: 1px solid var(--gold); border-radius: var(--bogen); pointer-events: none; }
.person h3 { font-size: var(--t-h3); }
.person p { margin: 6px 0 18px; color: var(--grau); }
@media (max-width: 699px) {
  .team-liste { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linie); }
  .person { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 22px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--linie); text-align: left; }
  .person-bild { grid-row: 1 / 4; width: calc(100% - 8px); margin: 8px 0 0 8px; }
  .person-bild::before { inset: -7px; }
  .person h3 { margin-top: 6px; }
  .person p { margin: 2px 0 12px; }
  .person .knopf { justify-self: start; min-height: 44px; padding: .6em 1.2em; }
}

/* Arbeiten im Team (aus dem Panel, seite.js): Reihe unter dem Termin-Knopf, immer vier gleiche Plaetze, weniger Bilder bleiben
   gleich gross. Am Handy die ganze Breite der Karte. Person ohne Arbeiten: das Element gibt es gar nicht. */
.arbeiten { max-width: 320px; margin: 18px auto 0; }
.arbeiten-liste { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.arbeiten-liste li { flex: 0 1 calc((100% - 18px) / 4); min-width: 0; }
.g-knopf.arbeit { position: relative; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
.g-knopf.arbeit img { aspect-ratio: auto; }
.arbeit .schnitt-zeichen { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.arbeit .schnitt-zeichen::after { left: 11px; top: 8px; border-width: 6px 0 6px 10px; }
.arbeiten-alle { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-tief); font-size: var(--t-klein); text-underline-offset: 3px; }
@media (max-width: 699px) {
  .arbeiten { grid-column: 1 / -1; width: 100%; max-width: none; margin-top: 16px; }
  .arbeiten-liste { justify-content: flex-start; }
}

/* Unsere Schnitte: Hochformat-Kacheln, Handy zwei, ab 900 px vier nebeneinander. Fotos und Videos gleich gross, das
   Bild wird wie in der Galerie zugeschnitten (object-fit), das gestartete Video zeigt sich ganz. */
.schnitte-liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin: 0; padding: 0; }
@media (min-width: 900px) { .schnitte-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; } }
.schnitt { min-width: 0; }
.schnitt figure { margin: 0; }
.schnitt .g-knopf { position: relative; height: auto; aspect-ratio: 4 / 5; }
.schnitt .g-knopf img { aspect-ratio: auto; }
.g-knopf.schnitt-start { cursor: pointer; font: inherit; }
.schnitt-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; object-fit: contain; background: #000; }
.schnitt-zeichen { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(13, 13, 13, .72); box-shadow: 0 0 0 1px var(--gold); pointer-events: none; }
.schnitt-zeichen::after { content: ""; position: absolute; left: 24px; top: 18px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.schnitt figcaption { margin-top: 10px; color: var(--grau); font-size: var(--t-klein, .9375rem); line-height: 1.4; overflow-wrap: anywhere; }

/* Salon: die eine dunkle Flaeche in der Mitte, Fotos leuchten darauf */
.salon { background: var(--lack); color: var(--auf-lack); }
.salon h2 { color: var(--gold); }
.salon .abschnitt-kopf p { color: var(--auf-lack); }
.salon :focus-visible { outline-color: var(--gold); }
.galerie { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.galerie .g-gross { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .galerie .g-gross { grid-column: span 2; grid-row: span 2; }
}
/* Fotos sind Links auf die grosse Fassung; seite.js oeffnet sie in der Bildansicht */
.g-knopf { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #26241f; color: inherit; text-decoration: none; cursor: zoom-in; }
.g-knopf img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .1, 1); }
.galerie .g-gross img { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 899px) { .galerie .g-gross img { aspect-ratio: 16 / 10; } }
@media (hover: hover) { .g-knopf:hover img { transform: scale(1.03); } }
/* Galerie aus dem Panel (seite.js, seit 31.10.2026): doppelt breite Bilder fuellen Luecken am Ende einer Reihe */
@media (max-width: 899px) { .galerie .g-breit-handy { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .galerie .g-breit { grid-column: span 2; }
  .galerie .g-breit img { aspect-ratio: 32 / 10; }
  .galerie-flach .g-gross { grid-row: auto; }
  .galerie-flach .g-gross img, .galerie-flach .g-breit img { aspect-ratio: 16 / 10; min-height: 0; }
  .galerie-allein .g-gross { grid-column: 1 / -1; grid-row: auto; }
  .galerie-allein .g-gross img { aspect-ratio: 2 / 1; min-height: 0; }
}

/* Bewertungen */
.stimmen-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; max-width: none; }
.stimmen-kopf h2 { max-width: 13em; }
.wertungen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.wertung-gross { padding: 8px 18px; border: 1px solid var(--linie); border-radius: 999px; background: var(--wand); }
@media (max-width: 419px) { .wertung-gross .sterne { display: none; } }
/* Raster mit Zeilen statt CSS-Spalten: beim Aufklappen haengen sich die neuen Karten unten an, schon
   gelesene Karten bleiben stehen */
.bewertungen { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; margin: 0; padding: 0; }
.bewertung { margin: 0; padding: var(--zitat-pad); border-radius: 20px; background: var(--fliese); }
.bewertung blockquote { margin: 0; font-family: var(--titel); font-size: var(--t-zitat); font-weight: 500; line-height: 1.42; color: var(--lack); }
.bewertung blockquote p { margin: 0; }
.quelle { margin: 16px 0 0; color: var(--grau); font-size: var(--t-klein); line-height: 1.45; }
.quelle b { display: block; color: var(--leder); font-weight: 600; }
.bewertungen.zu > li:nth-child(n + 7) { display: none; }
.mehr-knopf { margin-top: 28px; }
.mehr-knopf[hidden] { display: none; }

/* Besuch */
.besuch { background: var(--fliese); }
.besuch-raster { display: grid; gap: 48px; }
@media (min-width: 900px) { .besuch-raster { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--spalt); } }
.besuch h2 { font-size: var(--t-h2); }
.besuch address { margin: 28px 0 10px; font-style: normal; font-size: var(--t-gross); line-height: 1.55; color: var(--lack); }
.besuch-weg { color: var(--grau); }
.besuch-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.besuch-knoepfe .knopf-rand .ico, .besuch-knoepfe .knopf-voll .ico { color: var(--gold); }
.besuch-knoepfe .knopf-rand .ico { color: var(--gold-tief); }
.besuch .status { margin-top: 28px; }
.zeiten { width: 100%; max-width: 440px; margin-top: 16px; border-collapse: collapse; }
.zeiten caption { padding-bottom: 8px; text-align: left; font-family: var(--titel); font-size: var(--t-h3); font-weight: 600; color: var(--lack); }
.zeiten th, .zeiten td { padding: 11px 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; color: var(--leder); }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; color: var(--lack); }
.heute-marke { display: inline-block; margin-left: 10px; padding: 0 9px; border-radius: 999px; background: var(--lack); color: var(--gold); font-size: .78rem; font-weight: 600; line-height: 1.6; vertical-align: 2px; }
.ladenfront { margin: 0; }
.ladenfront .g-knopf { border-radius: 18px; }
.ladenfront img { aspect-ratio: 2 / 1; }
.ladenfront figcaption { margin-top: 10px; color: var(--grau); font-size: var(--t-klein); }
.karte { height: 280px; margin-top: 28px; overflow: hidden; border: 1px solid var(--linie); border-radius: 18px; background: var(--wand); }
@media (min-width: 900px) { .karte { height: 320px; } }
@media (min-width: 1200px) { .karte { height: 360px; } }
.karte iframe { display: block; width: 100%; height: 100%; border: 0; }
.karte-platz { display: grid; place-content: center; justify-items: center; gap: 16px; height: 100%; padding: 24px; text-align: center;
  background: linear-gradient(90deg, rgba(20, 19, 17, .045) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(rgba(20, 19, 17, .045) 1px, transparent 1px) 0 0 / 44px 44px, var(--wand); }
.karte-platz p { max-width: 30rem; margin: 0; color: var(--grau); font-size: var(--t-klein); }
.karte-platz b { color: var(--lack); font-family: var(--titel); font-size: 1.5rem; font-weight: 600; }
.karte-quelle { margin: 10px 0 0; color: var(--grau); font-size: .875rem; }
.karte-quelle a { display: inline-block; min-height: 24px; color: var(--lack); }

/* Fuss */
.fuss { padding: calc(var(--abstand) * .78) 0 40px; background: var(--lack); color: var(--auf-lack); }
.fuss-oben { display: grid; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(205, 169, 94, .35); }
@media (min-width: 900px) { .fuss-oben { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.fuss-marke { width: min(320px, 82%); height: auto; }
.fuss-nav { display: grid; gap: 2px; justify-items: start; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 36px; color: #fff; text-decoration: none; }
.fuss-adresse { margin: 0; line-height: 1.7; }
.fuss-adresse a { color: var(--gold); text-decoration: none; display: inline-block; min-height: 24px; }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 40px; padding-top: 24px; font-size: var(--t-klein); }
/* Impressum, Datenschutz und Panel untereinander: ein geoeffneter Text klappt direkt unter seiner Zeile auf,
   nichts springt unter dem Zeiger weg, Bild- und Tab-Reihenfolge bleiben gleich */
.fuss-recht { display: grid; justify-items: start; gap: 2px; flex: 1 1 22rem; }
.fuss-recht details { width: 100%; }
.fuss-recht summary { display: inline-flex; align-items: center; min-height: 36px; color: #fff; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .2em; }
.recht-text { max-width: 72ch; padding: 8px 0 16px; color: var(--auf-lack); line-height: 1.65; }
.recht-text a { color: var(--gold); }
.fuss-panel { display: inline-flex; align-items: center; gap: .45em; min-height: 36px; color: #fff; text-decoration: none; }
.fuss-panel .ico { color: var(--gold); width: 1.05em; height: 1.05em; }
@media (hover: hover) {
  .fuss-nav a:hover { color: var(--gold); text-decoration: underline; }
  .fuss-adresse a:hover { text-decoration: underline; }
  .fuss-recht summary:hover, .fuss-panel:hover { color: var(--gold); }
}
.fuss-recht-satz { margin: 0; padding-top: 6px; color: var(--auf-lack); }
.fuss :focus-visible { outline-color: var(--gold); }

/* Handy-Leiste */
.handy-leiste { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--lack); border-top: 1px solid rgba(205, 169, 94, .45); transition: transform .3s, visibility 0s; }
.handy-leiste .knopf { min-height: 50px; padding: .6em 1em; }
.handy-leiste .knopf-hell .ico { color: var(--gold); }
.handy-leiste.weg { transform: translateY(110%); visibility: hidden; transition: transform .3s, visibility 0s .3s; }
.handy-leiste.ohne-uebergang { transition: none; }   /* Startzustand ohne Hineinrutschen */
.handy-leiste :focus-visible { outline-color: var(--gold); }
/* 600 bis 767 px: nicht ueber die ganze Breite, sondern mittig wie eine Lasche */
@media (min-width: 600px) and (max-width: 767px) {
  .handy-leiste { left: 50%; right: auto; width: min(480px, 100% - 32px); border: 1px solid rgba(205, 169, 94, .45); border-bottom: 0; border-radius: 18px 18px 0 0; transform: translateX(-50%); }
  .handy-leiste.weg { transform: translate(-50%, 110%); }
}
/* Platz fuer die Leiste: im Fuss statt im body, damit unter dem Fuss kein weisser Streifen bleibt */
@media (max-width: 767px) { .fuss { padding-bottom: calc(40px + 72px + env(safe-area-inset-bottom)); } html { scroll-padding-bottom: 96px; } }
@media (min-width: 768px) { .handy-leiste { display: none; } }

/* Bildansicht */
.grossbild { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.grossbild[open] { display: grid; place-items: center; }
.grossbild::backdrop { background: #0e0d0b; }   /* voll deckend: Seite und Handy-Leiste scheinen nicht durch */
/* Reicht die Hoehe nicht, gibt das Bild nach, nie der Text: er ist bis zu 200 Zeichen lang und endet mit "(1 von 12)" */
.grossbild figure { --gb-rand: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100dvh; margin: 0; padding: 16px var(--gb-rand); }
.grossbild img, .grossbild video { flex: 0 1 auto; min-height: 0; width: auto; height: auto; max-width: min(92vw, 100vw - 2 * var(--gb-rand), 1280px); max-height: 80dvh; border-radius: 12px; object-fit: contain; }
.grossbild video { background: #000; }
.grossbild video.wartet { width: min(92vw, 100vw - 2 * var(--gb-rand), 1280px); }   /* Hoehe aus den Attributen width und height */
.grossbild figcaption { flex: none; max-width: 60ch; color: var(--auf-lack); font-size: var(--t-klein); text-align: center; }
.gb-zu, .gb-pfeil { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid rgba(205, 169, 94, .6); border-radius: 50%; background: var(--lack); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.gb-zu { top: 16px; right: 16px; }
.gb-pfeil { top: 50%; transform: translateY(-50%); }
.gb-pfeil .ico { width: 26px; height: 26px; }
.gb-zurueck { left: 16px; }
.gb-weiter { right: 16px; }
/* Handy hochkant: Pfeile unten, oben frei fuer das Schliessen. Handy quer: unten waere kein Platz, die Pfeile bleiben seitlich neben dem Bild */
@media (max-width: 599px) and (orientation: portrait) {
  .gb-pfeil { top: auto; bottom: 20px; transform: none; } .gb-zurueck { left: calc(50% - 64px); } .gb-weiter { right: calc(50% - 64px); }
  .grossbild figure { padding-top: 84px; padding-bottom: 92px; }
  .grossbild img, .grossbild video { max-height: none; }
}
@media (max-width: 599px) and (orientation: landscape) { .grossbild figure { --gb-rand: 76px; } }
.grossbild :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---- seit 26.10.2026: Team aus dem Panel (ohne Foto: Anfangsbuchstabe), Betriebsurlaub ---- */
.person-bild.ohne-bild { display: flex; align-items: center; justify-content: center; border-radius: var(--bogen); background: var(--fliese); }
.person-bild.ohne-bild span { font-family: var(--titel); font-size: 4rem; font-weight: 600; color: var(--gold-tief); line-height: 1; }
.w-ohne-bild { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fliese); border: 1.5px solid var(--gold); font-family: var(--titel); font-size: 1.6rem; font-weight: 600; color: var(--gold-tief); }
.w-egal-1 img { left: 14.5px; top: 14.5px; }
.urlaub-hinweis { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #faf6ec; color: var(--lack); font-size: var(--t-klein); font-weight: 500; line-height: 1.5; }
.urlaub-hinweis[hidden] { display: none; }

/* ── Aesthetics & Workspace (10.11.2026) ───────────────────────────────────────────────────────────────
   Vorlage HAIR & BEAUTY by Othman, Farben fuer ein helles Kosmetikstudio: warmes Weiss und Puder, Espresso statt
   Schwarz, Rose-Champagner statt Gold. Keine Fotos (Demo): die Buehne zeigt einen ruhigen Bogen mit feinen Lichtpunkten
   (die Lichterkette im Behandlungsraum), die Wortmarke ist Text, kein Logo. */
:root {
  --fliese: #f7f1ed;
  --linie: #eadfd7;
  --rand-feld: #8a7a71;
  --lack: #2e2522;
  --leder: #3a2f2b;
  --grau: #63574f;
  --gold: #dcbba6;
  --gold-tief: #8b5a47;
  --gold-hell: #f0e0d6;
  --auf-lack: #efe5df;
}
.marke-text { display: inline-flex; align-items: baseline; gap: .32em; color: var(--lack); text-decoration: none;
  font-family: var(--titel); font-weight: 600; font-size: 1.32rem; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.marke-text .marke-und { font-style: italic; font-weight: 500; color: var(--gold-tief); }
@media (min-width: 600px) { .marke-text { font-size: 1.6rem; } }
@media (min-width: 1200px) { .marke-text { font-size: 1.8rem; } }
.fuss-marke.marke-text { margin: 0; color: #fff; font-size: 1.9rem; }
.fuss-marke.marke-text .marke-und { color: var(--gold); }

.bogen-fuellung { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--bogen); overflow: hidden;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 244, 222, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 12%, rgba(255, 244, 222, .9) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 20%, rgba(255, 244, 222, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 30%, rgba(255, 244, 222, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 32%, rgba(255, 244, 222, .8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 38%, rgba(255, 244, 222, .7) 0 1.5px, transparent 2.5px),
    radial-gradient(120% 90% at 50% 0%, #f3e2d8 0%, #e7cfc2 45%, #d6b6a6 100%); }
.bogen-wort { font-family: var(--titel); font-style: italic; font-weight: 500; font-size: clamp(3rem, 9vw, 5.5rem); color: #6f4536; letter-spacing: .04em; }

.ueber-raster { display: grid; gap: 12px; }
@media (min-width: 900px) { .ueber-raster { grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; } }
.ueber-text p { margin: 0 0 16px; max-width: 42rem; font-size: var(--t-gross); line-height: 1.7; }
.ueber-text .knopf { margin-top: 8px; }

.anfrage-raster { display: grid; gap: 20px; }
@media (min-width: 900px) { .anfrage-raster { grid-template-columns: 1fr 1.4fr 1fr; align-items: start; } }
.anfrage-karte { padding: 24px; border: 1px solid var(--linie); border-radius: 18px; background: var(--wand); color: var(--lack); }
.anfrage-karte h3 { margin: 0 0 12px; font-family: var(--titel); font-size: var(--t-h3); font-weight: 600; }
.anfrage-karte p { margin: 0 0 12px; color: var(--grau); line-height: 1.65; }
.anfrage-liste { list-style: none; margin: 0 0 12px; padding: 0; }
.anfrage-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.anfrage-liste li:last-child { border-bottom: 0; }
.anfrage-liste b { white-space: nowrap; font-weight: 600; }
.anfrage-mehr summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--gold-tief); }
.anfrage-mehr p { font-size: var(--t-klein); }

.aspekte { list-style: none; display: grid; gap: 12px; margin: 8px 0 0; padding: 0; }
@media (min-width: 900px) { .aspekte { grid-template-columns: repeat(3, 1fr); } }
.aspekte li { position: relative; padding: 18px 20px 18px 48px; border: 1px solid var(--linie); border-radius: 14px; background: var(--wand); line-height: 1.5; }
.aspekte li::before { content: ""; position: absolute; left: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--gold); }

/* Rezensionen unter den Aspekten (seit 10.11.2026) */
.aspekte + .bewertungen { margin-top: 32px; }

/* ---------- Hero mit Hintergrundvideo (10.11.2026) ----------
   Standbild als <picture> (WebP, JPEG-Rueckfall, am Handy Hochkant-Ausschnitt), das Video blendet darueber ein,
   sobald es laeuft. Warme dunkle Ueberlagerung, damit der helle Text auf jedem Bild lesbar bleibt
   (gemessen mit kontrast-pixel.cjs). */
.buehne-film { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(80vh, 760px); background: #241b18; color: #fff; }
.buehne-hintergrund { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.buehne-hintergrund picture, .buehne-poster, .buehne-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.buehne-video { opacity: 0; transition: opacity .9s ease; }
.buehne-video.laeuft { opacity: 1; }
.buehne-hintergrund::after { content: ""; position: absolute; inset: 0; background: rgba(36, 27, 24, .74); }
@media (min-width: 900px) {
  .buehne-hintergrund::after { background: linear-gradient(90deg, rgba(36, 27, 24, .88) 0%, rgba(36, 27, 24, .76) 50%, rgba(36, 27, 24, .5) 100%); }
  .buehne-film .buehne-raster { grid-template-columns: minmax(0, 1fr); }
  .buehne-film .buehne-text { max-width: 46rem; }
}
.buehne-film h1 { color: #fff; }
.buehne-film .buehne-satz { color: #f3ebe6; }
.buehne-film .wertung, .buehne-film .status { color: #f3ebe6; }
.buehne-film .sterne svg { fill: var(--gold); }
.buehne-film .knopf-voll { background: #fff; border-color: #fff; color: var(--lack); }
.buehne-film .knopf-rand { border-color: rgba(255, 255, 255, .8); color: #fff; }
.buehne-film .buehne-knoepfe .ico { color: var(--gold); }
.buehne-film .knopf-voll .ico { color: var(--gold-tief); }
@media (hover: hover) {
  .buehne-film .knopf-voll:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--lack); }
  .buehne-film .knopf-rand:hover { background: #fff; color: var(--lack); }
  .buehne-film .buehne-knoepfe .knopf-rand:hover .ico { color: var(--gold-tief); }
}
.buehne-film :focus-visible { outline-color: #fff; }
.film-knopf { position: absolute; right: 16px; bottom: 16px; min-height: 44px; padding: 0 18px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(36, 27, 24, .6); color: #fff; font: 500 .875rem/1 var(--schrift); cursor: pointer; }
@media (hover: hover) { .film-knopf:hover { background: #fff; color: var(--lack); } }
@media (max-width: 899px) { .buehne-film { padding-bottom: calc(var(--abstand) * .92 + 52px); } }

/* ---------- Galerie "Das Studio": bis vier Fotos in einer Reihe in ihrem eigenen Format ----------
   Breiten im Verhaeltnis der Seitenformate (quer 4:3, hoch 3:4, quadratisch 1:1), damit alle gleich hoch stehen;
   am Handy steht das erste Foto allein in voller Breite. */
.galerie.galerie-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.galerie-reihe > li { min-width: 0; flex: 1.3333 1 0; }
.galerie-reihe > li.g-hoch { flex-grow: .75; }
.galerie-reihe > li.g-quadrat { flex-grow: 1; }
.galerie.galerie-reihe .g-knopf { height: auto; }
.galerie.galerie-reihe .g-knopf picture { display: block; }
.galerie.galerie-reihe .g-knopf img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.galerie.galerie-reihe .g-hoch img { aspect-ratio: 3 / 4; }
.galerie.galerie-reihe .g-quadrat img { aspect-ratio: 1 / 1; }
@media (max-width: 899px) { .galerie-reihe > li.g-gross { flex-basis: 100%; } }
@media (min-width: 900px) { .galerie.galerie-reihe { flex-wrap: nowrap; gap: 16px; } .galerie.galerie-reihe .g-gross { grid-column: auto; grid-row: auto; } }

/* ---------- Ansagen 10.11.2026 nachmittags ---------- */
/* Anrufen im Hero: braune Akzentfarbe (wie das "&" der Wortmarke), weisse Schrift 5,8:1 */
.knopf-braun { background: var(--gold-tief); border-color: var(--gold-tief); color: #fff; }
.buehne-film .buehne-knoepfe .knopf-braun .ico { color: #fff; }
@media (hover: hover) { .knopf-braun:hover { background: #6f4536; border-color: #fff; color: #fff; } }
.knopf-braun:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Termin online buchen: Ueberschrift oben, darunter die Karte in lesbarer Breite (auch die Punkte darunter) */
.huelle.buchen-untereinander { width: min(100% - 2 * var(--rand), 920px); }
@media (min-width: 1100px) {
  .buchen-untereinander { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "karte" "extra"; grid-template-rows: auto; }
  .buchen-untereinander .buchen-extra { position: static; margin-top: 32px; }
}

/* Fotos in den Abschnitten (WebP mit JPEG-Rueckfall, nie groesser als das Original) */
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--fliese); }

/* Ueber mich: Hochformat-Foto rechts (am Handy unter dem Text, hoechstens 382 px) */
.ueber-bild { max-width: 382px; margin-top: 16px; }
@media (min-width: 900px) {
  .ueber-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 340px); }
  .ueber-bild { margin-top: 0; }
}

/* Anfahrt: Foto ueber der Karte */
.besuch-foto { max-width: 680px; margin-bottom: 20px; }

/* Bewertungen: braun hinterlegt, direkt unter der Buchung; Foto neben den Aspekten */
.stimmen-braun { background: #6f4536; color: #fff; }
.stimmen-braun .abschnitt-kopf h2 { color: #fff; }
.stimmen-braun :focus-visible { outline-color: #fff; }
.stimmen-braun .wertung-gross { border-color: #fff; }
.stimmen-braun .aspekte li { border-color: #fff; color: var(--lack); }
.stimmen-braun .aspekte li::before { background: var(--gold-tief); }
.stimmen-braun .bewertung { background: var(--wand); }
.stimmen-raster { display: grid; gap: 20px; }
.stimmen-raster .aspekte { margin: 0; }
@media (min-width: 900px) {
  .stimmen-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .stimmen-raster .aspekte { grid-template-columns: minmax(0, 1fr); }
}
.stimmen-foto { max-width: 680px; }
/* (Foto und Aspekte seit 10.11.2026 abends entfernt: nur Ueberschrift, Google-Wert und Karten) */

/* Seit 10.11.2026 abends (Ansage): Bewertungen mittig, Kopf zentriert mit Sternen darunter, Text in den Karten zentriert */
.stimmen-kopf { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; margin-inline: auto; }
.stimmen-kopf h2 { max-width: none; }
.stimmen-kopf .wertungen { justify-content: center; }
.stimmen .bewertung { text-align: center; }

/* Ueber mich (seit 10.11.2026 abends): Ueberschrift linksbuendig ueber der Beschreibung, rechts runder Fotoplatzhalter */
.ueber-raster { max-width: 64rem; margin-inline: auto; justify-items: stretch; gap: 24px; }
.ueber-raster .abschnitt-kopf { text-align: left; margin: 0; }
.ueber-text { text-align: left; }
.ueber-platzhalter { width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%; background: var(--fliese); border: 2px solid var(--gold);
  display: grid; place-items: center; justify-self: center; }
.ueber-platzhalter svg { width: 42%; height: 42%; fill: none; stroke: var(--grau); stroke-width: 1.4; stroke-linecap: round; }
@media (min-width: 900px) {
  .ueber-raster { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 56px; align-items: start; }
  .ueber-raster .abschnitt-kopf { grid-column: 1; grid-row: 1; }
  .ueber-text { grid-column: 1; grid-row: 2; }
  .ueber-platzhalter { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 300px; }
}

/* Bewertungskarten im Stil der Google-Rezensionen (seit 10.11.2026): Initiale, Name, Quelle, Sterne mit Monat, Text linksbuendig */
.stimmen .bewertung { text-align: left; background: var(--wand); }
.bw-kopf { display: flex; align-items: center; gap: 12px; }
.bw-bild { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.15rem; font-weight: 500; line-height: 1; }
.bw-f1 { background: #8b5a47; } .bw-f2 { background: #3f5d4a; } .bw-f3 { background: #4a5a7a; } .bw-f4 { background: #6f4536; }
.bw-wer { margin: 0; line-height: 1.35; }
.bw-wer b { display: block; color: var(--leder); font-weight: 600; }
.bw-wer span { display: inline-flex; align-items: center; gap: 5px; color: var(--grau); font-size: var(--t-klein); }
.bw-g { width: 14px; height: 14px; }
.bw-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; color: var(--grau); font-size: var(--t-klein); }
.bw-note .sterne svg { width: 16px; height: 16px; }
.bewertung .bw-kopf + .bw-note + blockquote { font-family: var(--schrift); font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: var(--leder); }
.bw-note .sterne svg { fill: #e0a43a; }

/* Hero: Studiofoto rechts im Bogenfenster mit goldenem Rahmen (seit 10.11.2026); nie groesser als das Original (382 px) */
.buehne-film .buehne-bild { max-width: 220px; }
@media (min-width: 600px) { .buehne-film .buehne-bild { max-width: 300px; } }
@media (min-width: 900px) {
  .buehne-film .buehne-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .buehne-film .buehne-bild { max-width: 382px; }
}

/* Leistungen (seit 10.11.2026): Ueberschrift mittig, Hinweis klein unter der Preisliste */
.preise-kopf { text-align: center; margin-inline: auto; }
.preise-hinweis { margin: 20px 0 0; color: var(--grau); font-size: var(--t-klein); line-height: 1.5; text-align: center; }

/* Buchen (seit 10.11.2026): Ueberschrift mittig */
.buchen-untereinander .buchen-kopf { text-align: center; margin-inline: auto; justify-self: center; }

/* Buchungsschritte (seit 10.11.2026): Schrittueberschrift mittig */
.w-titel { text-align: center; }

/* Buchungshinweise klein im Footer (seit 10.11.2026) */
.fuss-hinweise { list-style: none; display: grid; gap: 6px; margin: 0; padding: 20px 0; border-bottom: 1px solid rgba(205, 169, 94, .35); color: var(--auf-lack); font-size: .8125rem; line-height: 1.55; }
.fuss-hinweise b { color: #fff; font-weight: 500; }
.fuss-hinweise li[hidden] { display: none; }

/* Buchung (seit 10.11.2026): "Bereich" nur fuer Vorleseprogramme, Knoepfe Weiter/Zurueck/Buchen mittig */
.w-frage.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w-nav { justify-content: center; }
.w-nav .knopf-voll { margin-left: 0; }

/* Knopf "Alle Bewertungen auf Google" unter den Karten (seit 10.11.2026): weisse Pille mit Google-Logo, ganz klickbar */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.google-knopf-zeile { margin: 40px 0 0; text-align: center; }
.google-knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 26px; border-radius: 999px; background: #fff; color: var(--leder); font-weight: 500; font-size: 1rem; text-decoration: none; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45); transition: transform .2s ease, box-shadow .2s ease; }
.google-knopf-g { width: 22px; height: 22px; flex: none; }
@media (hover: hover) { .google-knopf:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); text-decoration: underline; text-underline-offset: .2em; } }
@media (prefers-reduced-motion: reduce) { .google-knopf { transition: none; } .google-knopf:hover { transform: none; } }

/* Menue (seit 10.11.2026 neu gestaltet): Abschnitte als grosse Zeilen mit Pfeil, daneben eine braune Karte mit
   Adresse, Tagesstatus und den zwei Knoepfen. Die alten Regeln fuer ".kopf-menue a" werden hier zurueckgesetzt. */
.kopf-menue { background: #f6f1ed; }
.kopf-menue-innen { gap: 20px; padding: 8px 0 24px; }
.kopf-menue a, .kopf-menue a:last-child { min-height: 0; border-bottom: 0; font: inherit; }
.km-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.km-liste li[hidden] { display: none; }
.kopf-menue .km-liste a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 4px;
  border-bottom: 1px solid rgba(111, 69, 54, .16); color: var(--lack); font-family: var(--titel); font-size: 1.45rem; font-weight: 600; line-height: 1.15; text-decoration: none; }
.km-pfeil { width: 20px; height: 20px; color: #8b5a47; transition: transform .2s ease; }
@media (hover: hover) {
  .kopf-menue .km-liste a:hover { color: #8b5a47; }
  .kopf-menue .km-liste a:hover .km-pfeil { transform: translateX(4px); }
}
.km-karte { padding: 24px; border-radius: 22px; background: #6f4536; color: #f3ebe6; }
.km-marke { margin: 0; font-family: var(--titel); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: #fff; }
.km-adresse { margin: 8px 0 0; font-size: var(--t-klein); }
.km-karte .status { margin: 10px 0 0; color: #f3ebe6; }
.km-knoepfe { display: grid; gap: 10px; margin-top: 20px; }
.kopf-menue .km-knoepfe .knopf { display: inline-flex; min-height: 48px; border-width: 1.5px; border-style: solid; font: 500 1rem/1.2 var(--schrift); }
.kopf-menue .km-voll { background: #fff; border-color: #fff; color: var(--lack); }
.kopf-menue .km-rand { border-color: rgba(255, 255, 255, .8); color: #fff; }
.km-karte :focus-visible { outline-color: #fff; }
@media (hover: hover) {
  .kopf-menue .km-voll:hover { background: transparent; color: #fff; }
  .kopf-menue .km-rand:hover { background: #fff; color: var(--lack); }
}
@media (min-width: 768px) {
  .kopf-menue-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: var(--spalt); align-items: start; padding: 28px 0 40px; }
  .km-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .kopf-menue .km-liste a { min-height: 72px; font-size: var(--t-h3); }
  .km-karte { padding: 28px; }
}
/* Eine Spalte auf allen Breiten: bei zwei Spalten brechen die langen Punkte um */
@media (min-width: 768px) { .km-liste { grid-template-columns: minmax(0, 1fr); } .kopf-menue .km-liste a { min-height: 60px; } }
.km-liste li:has(> a[hidden]) { display: none; }
@media (prefers-reduced-motion: reduce) { .km-pfeil { transition: none; } }
.kopf-menue .km-liste a[hidden] { display: none; }

/* Buchung (seit 10.11.2026): keine Trennlinie ueber Weiter/Zurueck */
.w-nav { border-top: 0; }
.w-schritte { border-bottom: 0; }

/* Google-Knopf mit vollem Schriftzug statt G (seit 10.11.2026) */
.google-wort { height: 24px; width: auto; aspect-ratio: 272 / 92; flex: none; transform: translateY(3px); }
/* Google-Knopf 50 % groesser (seit 10.11.2026); am Handy so gross, wie es in eine Zeile passt */
.google-knopf { gap: 15px; min-height: 78px; padding: 18px 39px; font-size: 1.5rem; }
.google-wort { height: 36px; transform: translateY(4px); }
@media (max-width: 479px) {
  .google-knopf { gap: 10px; min-height: 64px; padding: 14px 24px; font-size: 1.1rem; }
  .google-wort { height: 28px; transform: translateY(3px); }
}

/* Schulungen und Liegenmiete (seit 10.11.2026): Ueberschrift mittig, Satz "Diese Angebote ..." entfernt */
.anfrage-kopf { text-align: center; margin-inline: auto; }
/* Schulungen und Liegenmiete: Termin buchen (weiss) und Anrufen (braun) mittig unter den Karten */
.anfrage-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.anfrage-voll { background: #fff; border-color: #fff; color: var(--lack); }
@media (hover: hover) { .anfrage-voll:hover { background: transparent; color: #fff; } }
.anfrage-knoepfe .knopf-braun .ico { color: #fff; }
.salon :focus-visible { outline-color: #fff; }
@media (max-width: 479px) { .anfrage-knoepfe .knopf { flex: 1 1 100%; } }

/* Schulungen und Liegenmiete (seit 10.11.2026 neu): eine grosse Karte links, rechts zwei gleich hohe Karten,
   alle mit gleichem Innenabstand, gleicher Ueberschrift und gleichem Rand */
.anfrage-raster { display: grid; gap: 20px; }
.anfrage-karte { display: flex; flex-direction: column; padding: 32px; border: 0; border-radius: 22px; }
.anfrage-karte h3 { margin: 0 0 16px; font-size: var(--t-h3); line-height: 1.1; }
.anfrage-karte p { margin: 0; }
.anfrage-seite { display: grid; gap: 20px; }
.anfrage-marke { align-self: flex-start; margin-top: auto !important; padding: 7px 14px; border-radius: 999px; background: #f6f1ed; color: #8b5a47 !important; font-size: var(--t-klein); font-weight: 500; line-height: 1.3; }
.anfrage-karte p:not(.anfrage-marke) { margin-bottom: 24px; }   /* Abstand zur Marke; die Marke selbst steht unten (margin-top: auto) */
.anfrage-liste { margin: 0; }
.anfrage-liste li { align-items: baseline; padding: 12px 0; }
.anfrage-liste li:last-child { border-bottom: 1px solid var(--linie); }
.anfrage-mehr { margin-top: 8px; }
@media (min-width: 900px) {
  .anfrage-raster { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: stretch; }
  .anfrage-seite { grid-template-rows: 1fr 1fr; }
  .anfrage-gross .anfrage-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .anfrage-gross .anfrage-liste li:last-child { border-bottom: 1px solid var(--linie); }
}
@media (max-width: 599px) { .anfrage-karte { padding: 24px; } }
/* Schulungsliste einspaltig: Name, Dauer (grau), Preis in festen Spalten */
@media (min-width: 900px) { .anfrage-gross .anfrage-liste { display: block; } }
.anfrage-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5em; gap: 16px; align-items: baseline; }
.anfrage-dauer { color: var(--grau); font-size: var(--t-klein); white-space: nowrap; }
.anfrage-liste b { text-align: right; }
@media (max-width: 479px) { .anfrage-liste li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .anfrage-dauer { grid-row: 2; } .anfrage-liste b { grid-row: 1 / span 2; grid-column: 2; align-self: center; } }

/* Anfahrt ohne Foto (seit 10.11.2026): die Karte ist ab 900 px so hoch wie Adresse und Oeffnungszeiten daneben */
@media (min-width: 900px) {
  .besuch-raster { align-items: stretch; }
  .besuch-raster > :last-child { display: flex; flex-direction: column; }
  .besuch-raster .karte { flex: 1 1 auto; height: auto; min-height: 420px; margin-top: 0; }
}

/* Footer (seit 10.11.2026 neu): braune Terminkarte oben, vier Spalten mit kleinen Spaltentiteln, Recht und Jahr unten */
.fuss { padding-top: calc(var(--abstand) * .6); }
.fuss-ruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-bottom: 56px; padding: 32px 36px; border-radius: 24px; background: #6f4536; }
.fuss-ruf-titel { margin: 0; max-width: 22em; font-family: var(--titel); font-size: var(--t-h3); font-weight: 600; line-height: 1.15; color: #fff; }
.fuss-ruf-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.fuss-voll { background: #fff; border-color: #fff; color: var(--lack); }
.fuss-rand { border-color: rgba(255, 255, 255, .8); color: #fff; }
.fuss-rand .ico { color: #fff; }
@media (hover: hover) { .fuss-voll:hover { background: transparent; color: #fff; } .fuss-rand:hover { background: #fff; color: var(--lack); } .fuss-rand:hover .ico { color: var(--lack); } }
.fuss-ruf :focus-visible { outline-color: #fff; }
.fuss-oben { display: grid; gap: 36px; padding-bottom: 40px; }
@media (min-width: 700px) { .fuss-oben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fuss-oben { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.25fr); gap: 40px; } }
.fuss-spalte { min-width: 0; }
.fuss-marke-spalte .fuss-marke { margin: 0; }
.fuss-leise { margin: 12px 0 0; color: var(--auf-lack); font-size: var(--t-klein); }
.fuss-titel { margin: 0 0 14px; font-family: var(--schrift); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--gold); line-height: 1.3; }
.fuss-nav { display: grid; gap: 0; justify-items: start; }
.fuss-nav a { min-height: 34px; font-size: .9375rem; }
.fuss-adresse { line-height: 1.6; color: #fff; font-size: .9375rem; }
.fuss-zeiten { margin: 10px 0 0; color: var(--auf-lack); font-size: .9375rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 34px; color: var(--gold); font-size: .9375rem; text-decoration: underline; text-decoration-color: rgba(205, 169, 94, .45); text-underline-offset: .2em; }
.fuss-hinweise { gap: 10px; padding: 0; border: 0; font-size: .875rem; }
.fuss-unten { align-items: flex-start; border-top: 1px solid rgba(205, 169, 94, .35); }
.fuss-recht { gap: 0; }
.fuss-recht summary, .fuss-panel { min-height: 32px; font-size: .875rem; }
.fuss-recht-satz { font-size: .875rem; }
@media (max-width: 599px) { .fuss-ruf { padding: 24px; margin-bottom: 44px; } .fuss-ruf-knoepfe, .fuss-ruf-knoepfe .knopf { width: 100%; } }

/* Footer minimal (seit 10.11.2026): keine Terminkarte, keine Spaltentitel; Marke links, Kontakt rechts in einer Zeile,
   darunter die Seiten als Zeile, die Buchungshinweise klein und Recht/Jahr */
.fuss { padding: 56px 0 32px; }
.fuss-oben { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(205, 169, 94, .25); }
.fuss-oben .fuss-marke { width: auto; margin: 0; font-size: 1.6rem; }
.fuss-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0; color: var(--auf-lack); font-size: .9375rem; }
.fuss-kontakt a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold); text-decoration: underline; text-decoration-color: rgba(205, 169, 94, .45); text-underline-offset: .2em; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 18px 0; }
.fuss-nav a { min-height: 32px; font-size: .875rem; color: var(--auf-lack); }
.fuss-nav a[hidden] { display: none; }
.fuss-hinweise { display: grid; gap: 4px; margin: 0; padding: 18px 0; border-top: 1px solid rgba(205, 169, 94, .25); border-bottom: 1px solid rgba(205, 169, 94, .25); font-size: .8125rem; color: var(--auf-lack); }
.fuss-hinweise:focus { outline: none; }
.fuss-hinweise:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.fuss-unten { border-top: 0; padding-top: 18px; }
@media (max-width: 599px) { .fuss-oben { flex-direction: column; gap: 12px; } .fuss-kontakt { gap: 2px 18px; } }
/* Verweise auf den Footer */
.buchen-verweis { margin: 20px 0 0; text-align: center; font-size: var(--t-klein); }
.buchen-verweis a { display: inline-flex; align-items: center; min-height: 32px; color: var(--grau); text-underline-offset: .2em; }
.karte-platz p a { color: var(--lack); }
/* Google-Knopf 25 % kleiner als die 50-%-Fassung (seit 10.11.2026), auf allen Breiten gleich */
.google-knopf { gap: 11px; min-height: 58px; padding: 13px 29px; font-size: 1.125rem; }
.google-wort { height: 27px; transform: translateY(3px); }
@media (max-width: 479px) { .google-knopf { gap: 10px; min-height: 56px; padding: 12px 24px; font-size: 1.0625rem; } .google-wort { height: 26px; } }

/* Leistungen als runde Bildkacheln (seit 10.11.2026, Vorbild Speisekarten-Kreise): Kreis mit Symbolbild, Name darunter,
   gewaehlte Kategorie mit braunem Ring und fettem Namen; die gewaehlte Liste steht als Karte darunter */
.kat-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 10px; margin: 0 auto 36px; max-width: 64rem; }
.kat-kacheln[hidden] { display: none; }
@media (min-width: 900px) { .kat-kacheln { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 16px; } }
.kat-kachel { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: var(--lack); font: 500 .875rem/1.25 var(--schrift); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kat-bild { display: block; width: min(100%, 96px); aspect-ratio: 1; padding: 3px; border-radius: 50%; border: 2px solid transparent; transition: border-color .2s ease, transform .2s ease; }
@media (min-width: 900px) { .kat-bild { width: min(100%, 104px); } }
.kat-bild img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--fliese); }
.kat-titel { hyphens: manual; overflow-wrap: normal; }
.kat-kachel[aria-expanded="true"] .kat-bild { border-color: #8b5a47; }
.kat-kachel[aria-expanded="true"] .kat-titel { font-weight: 700; color: #6f4536; }
@media (hover: hover) { .kat-kachel:hover .kat-bild { transform: translateY(-2px); border-color: rgba(139, 90, 71, .45); } .kat-kachel[aria-expanded="true"]:hover .kat-bild { border-color: #8b5a47; } }
.kat-kachel:focus-visible { outline: none; }
.kat-kachel:focus-visible .kat-bild { outline: 3px solid var(--gold-tief); outline-offset: 3px; }
.kat-kachel-aus .kat-bild img { filter: grayscale(1); opacity: .55; }
@media (prefers-reduced-motion: reduce) { .kat-bild { transition: none; } .kat-kachel:hover .kat-bild { transform: none; } }
.preisliste.mit-kacheln > details.kategorie > summary { display: none; }
.preisliste.mit-kacheln > details.kategorie { border: 0; }
.preisliste.mit-kacheln { border-top: 0; }
@media (max-width: 599px) { .kat-kacheln { gap: 20px 6px; } .kat-kachel { font-size: .8125rem; } }
.preisliste.mit-kacheln > details.kategorie[open] { max-width: 56rem; margin: 0 auto; padding: 8px 28px 16px; border-radius: 22px; background: var(--wand); box-shadow: 0 18px 40px -30px rgba(20, 19, 17, .45); }
@media (max-width: 599px) { .preisliste.mit-kacheln > details.kategorie[open] { padding: 4px 16px 10px; } }
.kat-bild img { box-shadow: 0 0 0 1px rgba(111, 69, 54, .18); }

/* Anfahrt (seit 10.11.2026): Oeffnungszeiten oben, Adresse darunter */
.besuch-text .zeiten { margin-top: 28px; }
.besuch-text .zeiten + address { margin-top: 32px; }

/* Hero am Handy (seit 10.11.2026): Knoepfe nicht ueber die volle Breite, sondern rund halb so breit, beide gleich breit,
   untereinander und linksbuendig wie der Text (so breit wie der laengere Knopf, mindestens 50 %) */
@media (max-width: 599px) {
  .buehne-knoepfe { display: grid; grid-template-columns: minmax(50%, max-content); justify-content: start; }
  .buehne-knoepfe .knopf { width: 100%; }
}
/* Hero am Handy (seit 10.11.2026): Studiofoto im Bogenfenster erst ab 900 px */
@media (max-width: 899px) { .buehne-film .buehne-bild { display: none; } }
/* Hero am Handy: Google-Wertung und Tagesstatus mittig */
@media (max-width: 599px) { .buehne-film .buehne-fakten { justify-content: center; } .buehne-film .buehne-text > .status, .buehne-film .status { justify-content: center; } }

/* Seit 10.11.2026: Ueberschriften aller Abschnitte mittig */
.abschnitt-kopf { text-align: center; margin-inline: auto; }
.abschnitt-kopf p { margin-inline: auto; }
.ueber-raster .abschnitt-kopf { text-align: center; margin-inline: auto; justify-self: center; }
.besuch-kopf { grid-column: 1 / -1; margin-bottom: 0; }
/* Ueber mich: Knopf mittig unter dem runden Foto */
.ueber-foto { display: grid; justify-items: center; gap: 20px; }
.ueber-foto .ueber-platzhalter { justify-self: center; }
@media (min-width: 900px) { .ueber-foto { grid-column: 2; grid-row: 2; } .ueber-raster .ueber-text { align-self: center; } .ueber-foto .ueber-platzhalter { grid-column: auto; grid-row: auto; } }
/* Bewertungen am Handy: nur drei, dann aufklappen */
@media (max-width: 599px) { .bewertungen.zu > li:nth-child(n + 4) { display: none; } }
.mehr-zeile { margin: 28px 0 0; text-align: center; }
.mehr-zeile .mehr-knopf { margin-top: 0; border-color: rgba(255, 255, 255, .8); color: #fff; background: transparent; }
@media (hover: hover) { .mehr-zeile .mehr-knopf:hover { background: #fff; color: var(--lack); } }
.mehr-zeile:has(> .mehr-knopf[hidden]) { display: none; }
.mehr-zeile + .google-knopf-zeile { margin-top: 20px; }
/* Hero am Handy: Knoepfe mittig (seit 10.11.2026) */
@media (max-width: 599px) { .buehne-knoepfe { justify-content: center; } }
@media (min-width: 900px) { .ueber-raster .abschnitt-kopf { grid-column: 1 / -1; grid-row: 1; } .ueber-raster .ueber-text { grid-column: 1; grid-row: 2; } }

/* Ueber mich: Foto aus dem Panel > Webseite (seit 10.11.2026): seite.js setzt es an die Stelle des runden Platzhalters, rund wie der
   Platzhalter, darunter der Knopf. Ohne Foto bleibt der Platzhalter; leere zweite Zeile der Ueberschrift ausblenden */
.ueber-bild { display: block; width: min(260px, 70vw); height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%;
  border-radius: 50%; border: 2px solid var(--gold); background: var(--fliese); justify-self: center; }
@media (min-width: 900px) { .ueber-bild { width: 300px; } }
.ueber-platzhalter[hidden], .h1-zeile[hidden] { display: none; }
/* Ueber mich bleibt am Desktop zweispaltig (Ansage: links Text, rechts rundes Foto, Knopf mittig darunter) */
/* Eigene Texte oben (Panel > Webseite): ein langes Wort bricht um statt die Knoepfe aus dem Bild zu schieben; eine eigene
   zweite Zeile (seite.js setzt .frei) darf ab 900 px umbrechen, nur der Ort aus index.html bleibt in einer Zeile */
#buehne-titel { overflow-wrap: anywhere; hyphens: auto; }
.h1-zeile.frei { white-space: normal; }

/* Hero (seit 10.11.2026, Ansage "schriften im hero zentriert"): Ueberschrift, Satz, Knoepfe, Wertung und Status mittig */
.buehne-film .buehne-text { text-align: center; }
.buehne-film .buehne-satz { margin-inline: auto; }
.buehne-film .buehne-knoepfe, .buehne-film .buehne-fakten { justify-content: center; }
.buehne-film .status { justify-content: center; }
@media (max-width: 599px) { .buehne-film .buehne-knoepfe { justify-content: center; } }
@media (min-width: 900px) { .buehne-film .buehne-text { justify-self: center; } }
/* Tagesstatus im Hero: Punkt bleibt beim Umbruch vor dem Text */
.buehne-film .status { display: block; text-align: center; }
.buehne-film .status .punkt { display: inline-block; vertical-align: .05em; margin-right: .55em; }