/* ============================================================
   THE STYLE ATELIER — Hannover
   Gestaltung: Novera Studio
   Farbwelt aus der Angebots-PDF, Aufbau nach Salon-Vorbildern.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:        #14100C;
  --espresso:   #241A12;
  --ink-2:      #3E2E20;
  --ink-3:      #6B5340;
  --taupe:      #9C8875;
  --gold-tief:  #9C7B40;
  --gold:       #C4A265;
  --gold-hell:  #E0C48F;
  --champagne:  #E9DCCB;
  --sand-tief:  #DFCFB9;
  --sand:       #F7F2EA;
  --creme:      #FBF7F0;
  --warm:       #F2E9DC;
  --line:       rgba(62,46,32,.14);
  --line-gold:  rgba(196,162,101,.42);
  --dunkel:     radial-gradient(120% 90% at 50% 10%,#2C2018 0%,#170F0A 55%,#0C0806 100%);

  --display: "Cormorant Garamond", Didot, Georgia, serif;
  --sans:    "Jost", "Avenir Next", Futura, "Helvetica Neue", sans-serif;

  --wrap: 1280px;
  --pad: clamp(1.15rem, 4.5vw, 3.5rem);
  --r:    22px;      /* weiche Ecke   */
  --r-s:  14px;      /* kleine Ecke   */
  --pill: 999px;
  --schatten:   0 18px 44px rgba(36,26,18,.10);
  --schatten-l: 0 30px 80px rgba(36,26,18,.16);
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:6rem }
body{
  font-family:var(--sans); font-weight:300; color:var(--ink-2); background:var(--sand);
  line-height:1.75; font-size:clamp(15px,1.02vw,16.5px); overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
a,button,summary,[role=button]{ cursor:pointer }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.eyebrow{ font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; font-weight:500; color:var(--gold-tief) }
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.1; color:var(--ink); letter-spacing:.005em }
h1{ font-size:clamp(2.9rem,6.4vw,5.4rem) }
h2{ font-size:clamp(2.1rem,4.2vw,3.5rem) }
h3{ font-size:clamp(1.2rem,1.9vw,1.55rem) }
em.gold{ font-style:italic; color:var(--gold) }
.lead{ font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.85; color:var(--ink-3) }

.sprung{ position:absolute; left:-9999px; z-index:300; background:var(--ink); color:#fff; padding:.9rem 1.4rem }
.sprung:focus{ left:1rem; top:1rem }
.nur-vorleser{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:3.3rem; padding:0 2rem; border-radius:var(--pill);
  font-size:.71rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  background:var(--gold); color:#fff; border:1px solid var(--gold);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             color .4s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn:hover{ background:var(--espresso); border-color:var(--espresso); transform:translateY(-2px);
            box-shadow:0 12px 28px rgba(36,26,18,.22) }
.btn.rand{ background:transparent; color:var(--ink) }
.btn.rand:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.btn.hell{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff;
           backdrop-filter:blur(6px) }
.btn.hell:hover{ background:#fff; border-color:#fff; color:var(--ink) }
.btn.klein{ min-height:2.7rem; padding:0 1.4rem; font-size:.64rem }

.kreis{
  width:2.9rem; height:2.9rem; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2); flex:none;
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease-out);
}
.kreis:hover{ background:var(--gold); border-color:var(--gold); color:#fff; transform:scale(1.06) }
.kreis svg{ width:1.05rem; height:1.05rem; fill:none; stroke:currentColor; stroke-width:1.6;
            stroke-linecap:round; stroke-linejoin:round }
.kreis[disabled]{ opacity:.32; pointer-events:none }

/* ---------- Kopfzeile: schwebende Pille ---------- */
.kopf{ position:fixed; inset:1rem 0 auto; z-index:100; transition:top .45s var(--ease) }
.kopf .pille{
  display:flex; align-items:center; gap:1.6rem;
  padding:.55rem .55rem .55rem 1.6rem; border-radius:var(--pill);
  background:rgba(28,20,14,.34); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  transition:background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.kopf.fest{ inset-block-start:.5rem }
.kopf.fest .pille{
  background:rgba(251,247,240,.92); border-color:var(--line); box-shadow:var(--schatten);
}
.menue{ display:flex; gap:1.9rem; align-items:center }
.menue a{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.9);
          position:relative; padding:.35rem 0; transition:color .4s var(--ease) }
.menue a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold);
                 transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease-out) }
.menue a:hover::after{ transform:scaleX(1); transform-origin:left }
.kopf.fest .menue a{ color:var(--ink-2) }
.kopf .btn{ min-height:2.8rem; padding:0 1.5rem; font-size:.64rem }

.burger{ display:none; width:2.8rem; height:2.8rem; border-radius:50%; position:relative; z-index:120 }
.burger span{ position:absolute; left:.7rem; right:.7rem; height:1.4px; border-radius:2px; background:#fff;
              transition:transform .4s var(--ease), background .4s }
.burger span:nth-child(1){ top:1rem } .burger span:nth-child(2){ bottom:1rem }
.kopf.fest .burger span{ background:var(--ink) }
body.menue-auf .burger span{ background:var(--ink) }
body.menue-auf .burger span:nth-child(1){ transform:translateY(.31rem) rotate(45deg) }
body.menue-auf .burger span:nth-child(2){ transform:translateY(-.31rem) rotate(-45deg) }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:min(100svh,940px); display:flex; align-items:center; overflow:hidden }
.hero .bild{ position:absolute; inset:0; z-index:0 }
.hero .bild img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1) }
.hero .schleier{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(18,13,9,.82) 0%,rgba(18,13,9,.55) 45%,rgba(18,13,9,.34) 100%),
             linear-gradient(180deg,rgba(18,13,9,.5),transparent 30%,rgba(18,13,9,.6)) }
.hero .inhalt{ position:relative; z-index:2; color:#fff; padding:9.5rem 0 12rem; max-width:44rem }
.hero h1{ color:#fff; margin:1.5rem 0 0 }
.hero .lead{ color:rgba(255,255,255,.86); max-width:30rem; margin-top:1.6rem }
.hero .knoepfe{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.4rem }
.hero .eyebrow{ color:var(--gold-hell) }

/* Buchungsleiste, die in den Hero ragt */
.buchen{ position:relative; z-index:5; margin-top:-5.5rem }
.buchen .kasten{
  background:var(--creme); border-radius:var(--r); box-shadow:var(--schatten-l);
  padding:1rem; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto; gap:.6rem; align-items:center;
  border:1px solid rgba(255,255,255,.6);
}
.buchen .feld{ padding:.55rem .95rem; border-radius:var(--r-s); transition:background .35s var(--ease) }
.buchen .feld:hover{ background:var(--warm) }
.buchen label{ display:flex; align-items:center; gap:.5rem; font-size:.6rem; letter-spacing:.24em;
               text-transform:uppercase; color:var(--gold-tief); margin-bottom:.25rem }
.buchen label svg{ width:.9rem; height:.9rem; fill:none; stroke:currentColor; stroke-width:1.6 }
.buchen select,.buchen input{
  width:100%; font:inherit; font-size:.94rem; color:var(--ink); background:transparent;
  border:0; padding:.1rem 0; appearance:none; cursor:pointer;
}
.buchen select:focus,.buchen input:focus{ outline:none }
.buchen .trenner{ width:1px; background:var(--line); align-self:stretch; margin:.4rem 0 }
.buchen .btn{ width:100% }

/* ---------- Abschnitte ---------- */
.abschnitt{ padding:clamp(4.5rem,9vw,8rem) 0 }
.abschnitt.warm{ background:var(--warm) }
.abschnitt.champagner{ background:linear-gradient(180deg,var(--champagne),#E3D3BE) }
.abschnitt.creme{ background:var(--creme) }
.abschnitt.dunkel{ background:var(--dunkel); color:rgba(240,233,222,.8) }
.abschnitt.dunkel h2,.abschnitt.dunkel h3{ color:#fff }
.abschnitt.dunkel .lead{ color:rgba(240,233,222,.72) }
.abschnitt.dunkel .eyebrow{ color:var(--gold-hell) }
.kopfzeile{ text-align:center; max-width:44rem; margin:0 auto clamp(2.8rem,5vw,4.2rem) }
.kopfzeile h2{ margin-top:.9rem }
.kopfzeile .lead{ margin-top:1.1rem }

.teiler{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin:1.3rem auto; max-width:13rem }
.teiler i{ height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold),transparent) }
.teiler b{ width:5px; height:5px; border:1px solid var(--gold); transform:rotate(45deg); display:block }
.teiler.links{ margin-inline:0; justify-content:flex-start; max-width:8rem }

/* ---------- Vorteilsreihe ---------- */
.vorteile{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.6rem) }
.vorteil{ display:grid; grid-template-columns:2.9rem 1fr; gap:1rem; align-items:start }
.vorteil .ic{ width:2.9rem; height:2.9rem; border-radius:50%; background:var(--warm);
              display:grid; place-items:center; color:var(--gold-tief);
              transition:background .4s var(--ease), color .4s, transform .4s var(--ease-out) }
.vorteil:hover .ic{ background:var(--gold); color:#fff; transform:translateY(-3px) }
.vorteil .ic svg{ width:1.25rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.4;
                  stroke-linecap:round; stroke-linejoin:round }
.vorteil h4{ font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
             font-weight:500; color:var(--ink); margin-bottom:.35rem }
.vorteil p{ font-size:.88rem; line-height:1.7; color:var(--ink-3) }

/* ---------- Karussell ---------- */
.karussell-kopf{ display:flex; align-items:flex-end; gap:2rem; margin-bottom:2.2rem; flex-wrap:wrap }
.karussell-kopf .text{ max-width:26rem; margin-right:auto }
.karussell-kopf .steuer{ display:flex; gap:.6rem }
.bahn{ display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
       scrollbar-width:none; padding-bottom:.5rem }
.bahn::-webkit-scrollbar{ display:none }
.bahn > article{
  flex:0 0 clamp(220px,25vw,290px); scroll-snap-align:start; position:relative;
  border-radius:var(--r); overflow:hidden; background:var(--sand-tief);
  aspect-ratio:3/4; transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.bahn > article:hover{ transform:translateY(-6px); box-shadow:var(--schatten-l) }
.bahn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
           transition:transform 1.1s var(--ease-out) }
.bahn > article:hover img{ transform:scale(1.07) }
.bahn .schild{
  position:absolute; inset:auto .8rem .8rem; padding:.85rem 1rem; border-radius:var(--r-s);
  background:rgba(251,247,240,.93); backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:.8rem;
}
.bahn .schild .t{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); font-weight:500 }
.bahn .schild .u{ font-size:.78rem; color:var(--ink-3); margin-top:.1rem }
.bahn .schild .pfeil{ margin-left:auto; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--gold); color:#fff; display:grid; place-items:center; flex:none }
.bahn .schild .pfeil svg{ width:.8rem; height:.8rem; fill:none; stroke:currentColor; stroke-width:2 }

/* ---------- Leistungskarten mit Bild ---------- */
.lraster{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem) }
.lkarte{
  background:var(--creme); border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s;
}
.lkarte:hover{ transform:translateY(-8px); box-shadow:var(--schatten-l); border-color:var(--line-gold) }
.lkarte .bild{ aspect-ratio:16/10; overflow:hidden; background:var(--sand-tief) }
.lkarte .bild img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out) }
.lkarte:hover .bild img{ transform:scale(1.08) }
.lkarte .txt{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1 }
.lkarte h3{ margin-bottom:.5rem }
.lkarte p{ font-size:.9rem; line-height:1.72; color:var(--ink-3) }

/* ---------- Promo-Band ---------- */
.band{ position:relative; min-height:clamp(320px,42vw,460px); display:flex; align-items:center; overflow:hidden }
.band .bild{ position:absolute; inset:0 }
.band .bild img{ width:100%; height:100%; object-fit:cover }
.band .schleier{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,14,10,.55),rgba(20,14,10,.15)) }
.band .karte{
  position:relative; z-index:2; background:var(--creme); border-radius:var(--r);
  padding:clamp(1.8rem,3.5vw,2.8rem); max-width:26rem; box-shadow:var(--schatten-l);
}
.band .karte h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin:.7rem 0 .9rem; line-height:1.2 }
.band .karte p{ font-size:.95rem; color:var(--ink-3); margin-bottom:1.4rem }

/* ---------- Preise ---------- */
.reiter{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:clamp(1.8rem,3.5vw,2.6rem) }
.reiter button{ min-height:2.8rem; padding:0 1.5rem; border-radius:var(--pill); border:1px solid var(--line);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink-3);
  transition:all .35s var(--ease) }
.reiter button:hover{ color:var(--ink); border-color:var(--gold) }
.reiter button[aria-selected=true]{ background:var(--espresso); border-color:var(--espresso); color:var(--champagne) }
.tafel[hidden]{ display:none }
.tafel{ animation:tafelAuf .5s var(--ease-out) both }
@keyframes tafelAuf{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.preisliste{ max-width:52rem; margin-inline:auto; background:var(--creme); border-radius:var(--r);
             padding:clamp(1.2rem,3vw,2.2rem); border:1px solid var(--line) }
.preisliste .zeile{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1.8rem; align-items:baseline;
  padding:1.05rem .8rem; border-radius:var(--r-s); border-bottom:1px solid var(--line);
  transition:background .35s var(--ease) }
.preisliste .zeile:last-child{ border-bottom:0 }
.preisliste .zeile:hover{ background:var(--warm) }
.preisliste .name{ color:var(--ink); font-size:1.02rem }
.preisliste .info{ display:block; font-size:.85rem; color:var(--ink-3); margin-top:.2rem }
.preisliste .preis{ font-family:var(--display); font-size:1.3rem; color:var(--gold-tief); white-space:nowrap }
.preisliste .preis .ab{ font-family:var(--sans); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-right:.35rem }

/* ---------- Inhaber ---------- */
.inhaber{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.inhaber .rahmen{ border-radius:var(--r); overflow:hidden; box-shadow:var(--schatten) }
.inhaber .rahmen img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.merkmale{ display:grid; gap:1.3rem; margin-top:2rem }
.merkmal{ display:grid; grid-template-columns:2rem 1fr; gap:.9rem; align-items:start }
.merkmal .zahl{ font-family:var(--display); font-size:1.05rem; color:var(--gold); line-height:1.7 }
.merkmal h4{ font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--ink); margin-bottom:.2rem }
.merkmal p{ font-size:.9rem; line-height:1.72; color:var(--ink-3) }

/* ---------- Bewertungen ---------- */
.note{ font-family:var(--display); font-size:clamp(3.6rem,8vw,6rem); line-height:1; color:#fff }
.sterne{ color:var(--gold-hell); letter-spacing:.28em; font-size:1.3rem; margin-top:.5rem }
.stimmen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem);
          margin-top:clamp(2.4rem,5vw,3.6rem) }
.stimme{ border-radius:var(--r); padding:clamp(1.5rem,2.6vw,2.1rem); background:rgba(255,255,255,.045);
         border:1px solid rgba(224,196,143,.2); transition:transform .5s var(--ease-out), background .4s }
.stimme:hover{ transform:translateY(-5px); background:rgba(255,255,255,.075) }
.stimme .st{ color:var(--gold-hell); letter-spacing:.2em; font-size:.8rem }
.stimme p{ font-family:var(--display); font-size:1.15rem; line-height:1.6; color:rgba(255,255,255,.92); margin:.9rem 0 1.1rem }
.stimme .wer{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.45) }

/* ---------- Galerie ---------- */
.galerie{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(160px,auto); gap:.9rem }
.galerie figure{ position:relative; overflow:hidden; border-radius:var(--r-s); cursor:zoom-in; background:var(--sand-tief) }
.galerie img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out) }
.galerie figure:hover img{ transform:scale(1.07) }
.galerie figure::after{ content:""; position:absolute; inset:0; background:rgba(28,20,14,.16);
  opacity:0; transition:opacity .45s var(--ease) }
.galerie figure:hover::after{ opacity:1 }
.galerie .gross{ grid-column:span 2; grid-row:span 2 }
.galerie .breit{ grid-column:span 2 }

.lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  /* align-content, damit Bild und Unterschrift zusammen in der Mitte sitzen.
     Ohne das dehnen sich die beiden Zeilen ueber die ganze Hoehe. */
  align-content:center;
  background:rgba(12,8,6,.97); backdrop-filter:blur(6px);
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s }
.lightbox.offen{ opacity:1; visibility:visible }
.lightbox img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:var(--r-s);
  transform:scale(.96); transition:transform .5s var(--ease-out) }
.lightbox.offen img{ transform:scale(1) }
.lightbox .zu{ position:absolute; top:1.4rem; right:1.6rem; font-size:2rem; color:#fff; line-height:1; opacity:.8 }
.lightbox .pfeil{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.2rem; color:#fff;
  opacity:.6; padding:1rem } .lightbox .pfeil:hover{ opacity:1 }
.lightbox .vor{ right:1rem } .lightbox .zurueck{ left:1rem }
.lb-fuss{ text-align:center; color:#F4EBE0; margin-top:1.3rem; padding:0 3.5rem;
  opacity:0; transition:opacity .5s var(--ease) .15s }
.lightbox.offen .lb-fuss{ opacity:1 }
.lb-fuss .t{ font-family:var(--display); font-size:1.15rem; letter-spacing:.02em }
.lb-fuss .z{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-top:.35rem }
@media (max-width:640px){ .lightbox .pfeil{ font-size:1.8rem; padding:.7rem }
  .lb-fuss{ padding:0 2.6rem; margin-top:1rem } .lb-fuss .t{ font-size:.98rem } }

/* ---------- Inhaberangabe im Impressum ---------- */
.anbieter{ margin-top:3.4rem; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--creme) }
.anbieter summary{ list-style:none; cursor:pointer; padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-2) }
.anbieter summary::-webkit-details-marker{ display:none }
.anbieter summary::after{ content:""; margin-left:auto; width:.5rem; height:.5rem;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease) }
.anbieter[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px) }
.anbieter summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
.anbieter .inhalt{ padding:0 1.4rem 1.4rem }
.anbieter .inhalt p{ margin:0 }

/* ---------- Termin ---------- */
.termin{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem) }
.formkarte{ background:var(--creme); border-radius:var(--r); padding:clamp(1.6rem,3.2vw,2.6rem);
            border:1px solid var(--line); box-shadow:var(--schatten) }
.feld{ margin-bottom:1.15rem }
.feld label{ display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
             color:var(--ink-3); margin-bottom:.45rem }
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-s); padding:.85rem 1rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease) }
.feld textarea{ min-height:6.5rem; resize:vertical }
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(196,162,101,.16) }
.feld-paar{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem }
.hinweis{ font-size:.78rem; color:var(--ink-3); line-height:1.65; margin-top:.5rem }
.kein-bot{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden }

.kontaktliste{ display:grid; gap:1.3rem }
.kontaktzeile{ display:grid; grid-template-columns:2.7rem 1fr; gap:1rem; align-items:start }
.kontaktzeile .sym{ width:2.7rem; height:2.7rem; border-radius:50%; background:var(--warm);
  display:grid; place-items:center; color:var(--gold-tief) }
.kontaktzeile .sym svg{ width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.5 }
.kontaktzeile .k{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3) }
.kontaktzeile .v{ color:var(--ink); font-size:1rem; margin-top:.15rem }
.kontaktzeile .v a:hover{ color:var(--gold-tief) }
.zeiten{ display:grid; grid-template-columns:auto 1fr; gap:.25rem 1.2rem; font-size:.97rem; margin-top:.2rem }
.zeiten dt{ color:var(--ink-3) } .zeiten dd{ color:var(--ink) }
.karte-box{ margin-top:1.8rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10 }
.karte-box iframe{ width:100%; height:100%; border:0; filter:grayscale(.3) }
.karte-platz{ display:grid; place-items:center; text-align:center; gap:.9rem; height:100%; padding:2rem 1.5rem;
  background:linear-gradient(150deg,var(--champagne),var(--sand-tief)) }
.karte-platz p{ font-size:.84rem; color:var(--ink-3); max-width:25rem; line-height:1.7 }

/* ---------- Fußzeile ---------- */
.fuss{ background:var(--dunkel); color:rgba(240,233,222,.6); padding:clamp(3rem,6vw,4.5rem) 0 1.8rem }
.fuss-oben{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.6rem,4vw,3rem);
            padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.09) }
.fuss h4{ font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
          color:var(--gold-hell); font-weight:500; margin-bottom:1rem }
.fuss ul{ list-style:none; display:grid; gap:.5rem; font-size:.92rem }
.fuss a:hover{ color:#fff }
.fuss .marke-fuss .n{ font-family:var(--display); font-size:1.4rem; letter-spacing:.18em; color:#fff }
.fuss .marke-fuss .s{ font-size:.54rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-hell); margin-top:.4rem }
.fuss-unten{ display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
             padding-top:1.5rem; font-size:.7rem; letter-spacing:.05em }
.fuss-unten a:hover{ color:var(--gold-hell) }

/* ---------- Bewegung ----------
   Wichtig: Inhalte werden NUR versteckt, wenn JavaScript läuft und die
   Einblendung auch wieder aufheben kann. Ohne JS ist alles sofort sichtbar.
   Zusätzlich hebt seite.js nach 2,5 s pauschal alles auf — falls der
   Beobachter aus irgendeinem Grund nicht auslöst, bleibt nichts unsichtbar. */
.js .auf{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.js .auf.sichtbar{ opacity:1; transform:none }
.js .auf.v1{ transition-delay:.07s } .js .auf.v2{ transition-delay:.14s }
.js .auf.v3{ transition-delay:.21s } .js .auf.v4{ transition-delay:.28s }
.js .auf.v5{ transition-delay:.35s } .js .auf.v6{ transition-delay:.42s }

.js .wort-auf{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em }
.js .wort-auf > span{ display:inline-block; transform:translateY(110%);
  transition:transform .95s var(--ease-out) }
.js .wort-auf.sichtbar > span{ transform:none }

.js .enthuellen{ position:relative; overflow:hidden }
.js .enthuellen::after{ content:""; position:absolute; inset:0; background:var(--sand); z-index:2;
  transform-origin:right; transition:transform 1s var(--ease-out) }
.js .enthuellen.sichtbar::after{ transform:scaleX(0) }
.js .enthuellen img{ transform:scale(1.12); transition:transform 1.4s var(--ease-out) }
.js .enthuellen.sichtbar img{ transform:none }

.laufband{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent) }
.laufband .spur{ display:flex; width:max-content; animation:laufen 42s linear infinite }
.laufband .spur > span{ display:flex; align-items:center; gap:.9rem; padding:0 2rem; white-space:nowrap }
.laufband .spur > span::after{ content:"\25C6"; color:var(--gold); font-size:.45rem }
@keyframes laufen{ to{ transform:translateX(-50%) } }
.zaehler{ font-variant-numeric:tabular-nums }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .js .auf{ opacity:1; transform:none }
  .js .wort-auf > span{ transform:none }
  .js .enthuellen::after{ transform:scaleX(0) } .js .enthuellen img{ transform:none }
  .laufband .spur{ animation:none }
}

/* ---------- Rechtstexte ---------- */
.rechtstext{ padding:clamp(8rem,13vw,10rem) 0 clamp(3.5rem,7vw,6rem); max-width:52rem }
.rechtstext h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:.5rem }
.rechtstext h2{ font-size:clamp(1.15rem,2vw,1.45rem); margin:2.4rem 0 .7rem }
.rechtstext p,.rechtstext li{ font-size:.96rem; line-height:1.85 }
.rechtstext ul{ margin:.5rem 0 .5rem 1.2rem }
.rechtstext dl{ display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.4rem; margin:.7rem 0 }
.rechtstext dt{ color:var(--ink-3) }
.rechtstext .platzhalter{ background:rgba(196,162,101,.18); border-bottom:1px solid var(--gold);
  padding:0 .3rem; font-style:italic }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:1080px){
  .vorteile{ grid-template-columns:1fr 1fr }
  .lraster{ grid-template-columns:1fr 1fr }
  .fuss-oben{ grid-template-columns:1fr 1fr }
  .buchen .kasten{ grid-template-columns:1fr 1fr }
  .buchen .trenner{ display:none }
}
@media (max-width:860px){
  .inhaber,.termin{ grid-template-columns:1fr }
  .stimmen{ grid-template-columns:1fr }
  .galerie{ grid-template-columns:repeat(2,1fr) }
  .galerie .gross{ grid-column:span 2; grid-row:span 1 }
}

/* ---------- Logo in der Kopfzeile: Emblem + Wortmarke ---------- */
.marke{ display:flex; align-items:center; gap:.85rem; margin-right:auto; text-decoration:none }
.marke .emblem{ width:clamp(40px,3.6vw,50px); height:auto; flex:none;
  transition:transform .6s var(--ease-out) }
.marke:hover .emblem{ transform:rotate(-8deg) scale(1.06) }
.marke .wortmarke{ display:flex; flex-direction:column; line-height:1 }
.marke .n{ font-family:var(--display); font-size:clamp(.92rem,1.2vw,1.14rem); letter-spacing:.2em;
  color:#fff; white-space:nowrap; transition:color .5s var(--ease) }
.marke .s{ font-family:var(--display); font-size:.58rem; letter-spacing:.16em;
  color:rgba(224,196,143,.85); margin-top:.34rem; white-space:nowrap;
  transition:color .5s var(--ease) }
.kopf.fest .marke .n{ color:var(--ink) }
.kopf.fest .marke .s{ color:var(--gold-tief) }

/* ---------- Sterne im Hero ---------- */
.hero-sterne{ display:inline-flex; align-items:center; gap:.8rem; margin-top:1.7rem;
  padding:.6rem 1.2rem .6rem .95rem; border-radius:var(--pill);
  background:rgba(255,255,255,.1); border:1px solid rgba(224,196,143,.42);
  backdrop-filter:blur(8px); font-size:.82rem; color:rgba(255,255,255,.9) }
.hero-sterne .st{ color:var(--gold-hell); letter-spacing:.14em; font-size:.9rem }
.hero-sterne b{ color:#fff; font-weight:500 }

/* ---------- Abschnittsfarben im Wechsel ---------- */
.abschnitt.sand{ background:var(--sand) }
.abschnitt.braun{
  background:linear-gradient(170deg,#2E2219 0%,#20170F 48%,#171009 100%);
  color:rgba(240,233,222,.78);
}
.abschnitt.braun h2,.abschnitt.braun h3{ color:#fff }
.abschnitt.braun .eyebrow{ color:var(--gold-hell) }
.abschnitt.braun .lead,.abschnitt.braun .hinweis{ color:rgba(240,233,222,.68) }
.abschnitt.braun .reiter button{ border-color:rgba(224,196,143,.28); color:rgba(240,233,222,.72) }
.abschnitt.braun .reiter button:hover{ color:#fff; border-color:var(--gold) }
.abschnitt.braun .reiter button[aria-selected=true]{
  background:var(--gold); border-color:var(--gold); color:#1A120C }
.abschnitt.braun .preisliste{
  background:rgba(255,255,255,.045); border-color:rgba(224,196,143,.22) }
.abschnitt.braun .preisliste .zeile{ border-bottom-color:rgba(224,196,143,.16) }
.abschnitt.braun .preisliste .zeile:hover{ background:rgba(224,196,143,.09) }
.abschnitt.braun .preisliste .name{ color:#F2E9DB }
.abschnitt.braun .preisliste .info{ color:rgba(240,233,222,.55) }
.abschnitt.braun .preisliste .preis{ color:var(--gold-hell) }
.abschnitt.braun .preisliste .preis .ab{ color:rgba(240,233,222,.5) }

/* Bewertungen auf hellem Grund */
.abschnitt.warm .note{ color:var(--ink) }
.abschnitt.warm .sterne{ color:var(--gold) }
.abschnitt.warm .stimme{ background:var(--creme); border-color:var(--line-gold) }
.abschnitt.warm .stimme:hover{ background:#fff }
.abschnitt.warm .stimme p{ color:var(--ink) }
.abschnitt.warm .stimme .st{ color:var(--gold) }
.abschnitt.warm .stimme .wer{ color:var(--ink-3) }

/* ---------- Markentafel statt Foto beim Inhaber ---------- */
.markentafel{ border-radius:var(--r); overflow:hidden; box-shadow:var(--schatten-l);
  position:relative; isolation:isolate }
.markentafel svg{ width:100%; height:auto; display:block }
.markentafel::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(224,196,143,.14),transparent 60%) }
.js .markentafel{ opacity:0; transform:translateY(26px) scale(.98);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out) }
.js .markentafel.sichtbar{ opacity:1; transform:none }

/* Aufbau-Animation der Markentafel */
.js .markentafel svg .rahmen{ stroke-dasharray:1296; stroke-dashoffset:1296 }
.js .markentafel svg .siegel{ opacity:0; transform:scale(.9);
  transform-box:view-box; transform-origin:160px 196px }
.js .markentafel svg text{ opacity:0 }
.markentafel svg .glanz{ opacity:0 }

.js .markentafel.sichtbar svg .rahmen{ animation:zeichnen 1.6s var(--ease-out) .2s forwards }
.js .markentafel.sichtbar svg .siegel{
  animation:siegelAuf 1.1s var(--ease-out) .5s forwards,
            neigen 10s ease-in-out 1.9s infinite }
.js .markentafel.sichtbar svg text{ animation:einblenden .8s ease 1.3s forwards }
.js .markentafel.sichtbar svg .glanz{ animation:glanzLauf 7s ease-in-out 2s infinite }

@keyframes siegelAuf{ to{ opacity:1; transform:none } }
/* Das Siegel neigt sich langsam nach links und rechts, wie eine
   Medaille, die man in der Hand dreht. Die Perspektive steckt in der
   Transformation selbst — so bleibt sie an das Siegel gebunden. */
@keyframes neigen{
  0%,100%{ transform:perspective(700px) rotateY(0)     rotateX(0) }
  25%    { transform:perspective(700px) rotateY(7deg)  rotateX(-1.4deg) }
  75%    { transform:perspective(700px) rotateY(-7deg) rotateX(1.4deg) }
}
@keyframes zeichnen   { to{ stroke-dashoffset:0 } }
@keyframes einblenden { to{ opacity:1 } }
@keyframes glanzLauf  {
  0%   { transform:translateX(0);     opacity:0 }
  8%   { opacity:1 }
  38%  { transform:translateX(640px); opacity:1 }
  46%  { transform:translateX(640px); opacity:0 }
  100% { transform:translateX(640px); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .js .markentafel svg .rahmen{ stroke-dashoffset:0 }
  .js .markentafel svg .siegel,.js .markentafel svg text{ opacity:1; transform:none }
  .js .markentafel.sichtbar svg .siegel{ animation:none }
  .markentafel svg .glanz{ display:none }
}

@media (max-width:900px){
  .burger{ display:block }
  .kopf .pille{ padding-left:1.2rem }
  .kopf > .wrap > .pille > .btn{ display:none }

  /* Wichtig: backdrop-filter auf der Pille macht sie zum Bezugsrahmen für
     position:fixed. Solange das Menü offen ist, wird der Filter deshalb
     abgeschaltet — sonst spannt sich das Menü nur über die Pille.        */
  body.menue-auf .kopf .pille{ backdrop-filter:none; background:transparent; border-color:transparent }
  body.menue-auf .kopf.fest .pille{ box-shadow:none }

  .menue{
    position:fixed; inset:0; z-index:110;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
    background:linear-gradient(165deg,var(--creme) 0%,var(--warm) 55%,var(--champagne) 100%);
    clip-path:circle(0% at calc(100% - 2.8rem) 2.6rem);
    transition:clip-path .8s var(--ease-out);
    padding:6rem 1.5rem 3rem; overflow-y:auto;
  }
  body.menue-auf .menue{ clip-path:circle(150% at calc(100% - 2.8rem) 2.6rem) }
  .menue a{
    color:var(--ink) !important; font-family:var(--display); font-size:1.75rem;
    letter-spacing:.1em; text-transform:none; font-weight:400;
    padding:.85rem 0; opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
  }
  .menue a::after{ left:50%; right:50%; transition:left .4s var(--ease), right .4s var(--ease) }
  .menue a:hover::after{ left:0; right:0; transform:none }
  body.menue-auf .menue a{ opacity:1; transform:none }
  body.menue-auf .menue a:nth-child(1){ transition-delay:.22s }
  body.menue-auf .menue a:nth-child(2){ transition-delay:.29s }
  body.menue-auf .menue a:nth-child(3){ transition-delay:.36s }
  body.menue-auf .menue a:nth-child(4){ transition-delay:.43s }
  body.menue-auf .menue a:nth-child(5){ transition-delay:.50s }

  /* Anruf und WhatsApp unten im offenen Menü */
  .menue .menue-kontakt{
    display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
    font-family:var(--sans);
    margin-top:2.2rem; opacity:0; transform:translateY(14px);
    transition:opacity .5s var(--ease-out) .58s, transform .5s var(--ease-out) .58s;
  }
  body.menue-auf .menue .menue-kontakt{ opacity:1; transform:none }
  /* Knöpfe behalten ihre eigene Schrift, nicht die der Menülinks */
  .menue .menue-kontakt .btn{
    font-family:var(--sans); font-size:.68rem; letter-spacing:.2em;
    text-transform:uppercase; font-weight:500; padding:0 1.7rem;
    opacity:1; transform:none;
  }
  .menue .menue-kontakt .btn::after{ display:none }
  body.menue-auf{ overflow:hidden }
}
@media (min-width:901px){ .menue .menue-kontakt{ display:none } }

@media (max-width:1080px){
  .vorteile{ grid-template-columns:1fr 1fr }
  .lraster{ grid-template-columns:1fr 1fr }
  .fuss-oben{ grid-template-columns:1fr 1fr }
  .buchen .kasten{ grid-template-columns:1fr 1fr }
  .buchen .trenner{ display:none }
}
@media (max-width:860px){
  .inhaber,.termin{ grid-template-columns:1fr }
  .stimmen{ grid-template-columns:1fr }
}
@media (max-width:720px){
  /* Vier schmale Spalten waren auf dem Handy nur noch zwei bis drei Woerter
     pro Zeile — untereinander liest es sich als Liste. */
  .vorteile{ grid-template-columns:1fr; gap:1.6rem }
  .lraster{ grid-template-columns:1fr }
  .buchen{ margin-top:-2.5rem }
  .buchen .kasten{ grid-template-columns:1fr }
  .buchen .btn{ margin-top:.4rem }
  .fuss-oben{ grid-template-columns:1fr }
  .hero .inhalt{ padding:8rem 0 7rem }
}
@media (max-width:520px){ .marke .wortmarke{ display:none } }