@import url("fonts/fonts.css");

/* ==========================================================================
   PERLMUTT — Zahnästhetik Hannover
   Farbwelt: Creme, Sandbeige, gedecktes Gold, Altrosa, dunkles Olivgrün
   ========================================================================== */

:root{
  --creme:#FAF5ED;
  --creme-tief:#F4ECDF;
  --sand:#EFE4D2;
  --sand-tief:#E4D5BC;
  --rose:#F5E7E1;
  --rose-tief:#EDD8D0;
  --gold:#B08A54;          /* nur Flächen und Zierrat */
  --gold-satt:#8E6C3C;     /* Flächen mit weißer Schrift  (4,8:1) */
  --gold-text:#7C5C30;     /* Gold als Schrift, auch auf Sandbeige (4,9:1) */
  --sonne:#EFC75E;
  --oliv:#3A3B31;
  --oliv-hell:#4C4E41;
  --tinte:#2E241C;
  --grau:#6B5C4E;
  --linie:#E0D3BF;
  --weiss:#fff;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --rand:clamp(1.15rem,4.4vw,3.5rem);
  --breit:1280px;
  --schmal:900px;
  --rund:22px;
  --schatten:0 18px 46px -28px rgba(46,36,28,.42);
  --schatten-tief:0 30px 70px -34px rgba(46,36,28,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font:400 17px/1.72 var(--sans);
  overflow-x:clip;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.6rem,6.1vw,4.5rem);font-weight:400}
h2{font-size:clamp(2.05rem,4.3vw,3.3rem);font-weight:400}
h3{font-size:clamp(1.35rem,2.1vw,1.72rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.springmarke{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--oliv);color:#fff;padding:.7rem 1.15rem;border-radius:0 0 12px 12px;
  text-decoration:none;font-weight:600;font-size:.95rem;
}
.springmarke:focus{top:0}

:focus-visible{outline:3px solid var(--gold-satt);outline-offset:3px;border-radius:6px}

.hof{width:min(100% - var(--rand)*2,var(--breit));margin-inline:auto}
.hof--schmal{width:min(100% - var(--rand)*2,var(--schmal))}

.abschnitt{padding:clamp(3.6rem,7.4vw,6.6rem) 0}
.abschnitt--eng{padding:clamp(2.8rem,5vw,4.4rem) 0}

/* ---------- Bausteine -------------------------------------------------- */

.marke{
  display:inline-flex;align-items:center;gap:.62rem;
  font-family:var(--sans);font-weight:700;font-size:.86rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text);
}
.marke::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.marke--mitte{justify-content:center}
.marke--hell{color:#E4CFA8}
.marke--hell::before{background:#C6A46E}

.blei{font-size:clamp(1.02rem,1.35vw,1.12rem);color:var(--grau);max-width:60ch}
.blei--hell{color:#DDD8CC}

.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.02rem 1.85rem;border-radius:999px;border:1px solid transparent;
  font:700 .8rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease;
}
.knopf svg{width:16px;height:16px;flex:none}
.knopf--gold{background:var(--gold-satt);color:#fff;box-shadow:0 14px 28px -18px rgba(142,108,60,.9)}
.knopf--gold:hover{background:#795A31;transform:translateY(-2px)}
.knopf--tinte{background:var(--oliv);color:#fff}
.knopf--tinte:hover{background:#2C2D25;transform:translateY(-2px)}
.knopf--rand{border-color:var(--gold);color:var(--gold-text);background:transparent}
.knopf--rand:hover{background:var(--gold-satt);color:#fff;border-color:var(--gold-satt)}
.knopf--hell{background:#fff;color:var(--tinte)}
.knopf--hell:hover{background:var(--sand);transform:translateY(-2px)}
.knopf--breit{width:100%}

.symbolfeld{
  width:52px;height:52px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--sand);color:var(--gold-text);
}
.symbolfeld svg{width:23px;height:23px}
.symbolfeld--gold{background:var(--gold-satt);color:#fff}
.symbolfeld--rose{background:var(--rose-tief);color:#8B5B4C}

/* Sanftes Einblenden --------------------------------------------------- */
.zeigen{opacity:0;transform:translateY(22px);transition:opacity .78s ease,transform .78s ease}
.zeigen.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zeigen{opacity:1;transform:none;transition:none}}

/* ---------- Servicebalken ---------------------------------------------- */

.balken{background:var(--oliv);color:#EDE7DA;font-size:.83rem}
.balken__hof{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;padding:.62rem 0;min-height:46px}
.balken__stueck{display:flex;align-items:center;gap:.55rem}
.balken__stueck svg{width:15px;height:15px;color:#C6A46E;flex:none}
.balken a{color:inherit;text-decoration:none}
.balken a:hover{text-decoration:underline;text-underline-offset:3px}
.balken__trenner{width:1px;height:16px;background:rgba(237,231,218,.28)}
.balken__rechts{margin-left:auto;display:flex;align-items:center;gap:1.15rem}
.balken__sozial{display:flex;gap:.72rem}
.balken__sozial a{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(237,231,218,.12);transition:background .25s ease;
}
.balken__sozial a:hover{background:var(--gold-satt)}
.balken__sozial svg{width:14px;height:14px}

@media (max-width:1080px){
  .balken__hof{justify-content:center;text-align:center}
  .balken__rechts{margin-left:0}
  .balken__trenner{display:none}
}
@media (max-width:640px){.balken__stueck--adresse{display:none}}

/* ---------- Kopf -------------------------------------------------------- */

.kopf{position:sticky;top:0;z-index:90;background:var(--creme);transition:box-shadow .3s ease}
.kopf.geklebt{box-shadow:0 12px 34px -26px rgba(46,36,28,.6)}
.kopf__hof{display:flex;align-items:center;gap:1.6rem;padding:1.02rem 0}

.wortmarke{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.wortmarke__name{font:700 1.42rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tinte)}
.wortmarke__zusatz{
  margin-top:.34rem;font-size:.63rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;
}

.navi{margin-left:auto;display:flex;align-items:center;gap:2.1rem}
.navi a{
  text-decoration:none;font-size:.79rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte);position:relative;padding:.35rem 0;
}
.navi a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.6px;
  background:var(--gold);transition:right .3s ease;
}
.navi a:hover::after,.navi a[aria-current="page"]::after{right:0}
.navi a[aria-current="page"]{color:var(--gold-text)}

.kopf__tat{display:flex;align-items:center;gap:.75rem}
.kopf__tat .knopf{padding:.88rem 1.5rem;font-size:.74rem}

.klappe{
  display:none;width:46px;height:46px;border:1px solid var(--linie);background:var(--weiss);
  border-radius:14px;cursor:pointer;align-items:center;justify-content:center;
}
.klappe svg{width:20px;height:20px}
.klappe .kreuz{display:none}
.klappe[aria-expanded="true"] .striche{display:none}
.klappe[aria-expanded="true"] .kreuz{display:block}

.schub{display:none}

@media (max-width:1080px){
  .navi,.kopf__tat .knopf--rand{display:none}
  .klappe{display:flex}
  .kopf__tat{margin-left:auto}
  .schub{
    display:block;position:fixed;inset:0 0 0 auto;width:min(360px,86vw);z-index:120;
    background:var(--creme);padding:1.4rem var(--rand) 2.4rem;
    transform:translateX(102%);visibility:hidden;
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;
    overflow-y:auto;box-shadow:var(--schatten-tief);
  }
  .schub.offen{
    transform:none;visibility:visible;
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s;
  }
  .schub__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.9rem}
  .schub nav{display:flex;flex-direction:column;gap:.2rem}
  .schub nav a{
    text-decoration:none;padding:.92rem 0;border-bottom:1px solid var(--linie);
    font:700 .84rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  }
  .schub nav a[aria-current="page"]{color:var(--gold-text)}
  .schub__tat{margin-top:1.7rem;display:grid;gap:.7rem}
  .schleier{
    position:fixed;inset:0;background:rgba(46,36,28,.44);z-index:110;
    opacity:0;pointer-events:none;transition:opacity .35s ease;
  }
  .schleier.offen{opacity:1;pointer-events:auto}
}
@media (max-width:520px){
  .kopf__tat .knopf{padding:.8rem 1.05rem;font-size:.68rem}
  .wortmarke__name{font-size:1.2rem}
}

/* ---------- Held -------------------------------------------------------- */

.held{position:relative;padding:clamp(2.4rem,5vw,4.2rem) 0 clamp(3.4rem,6vw,5.4rem)}
.held__hof{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
.held__text h1{margin:1.35rem 0 1.5rem;max-width:14ch}
.held__text h1 em{font-style:italic;color:var(--gold-text)}
.held__tat{margin-top:2.1rem;display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}

.held__marken{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--linie);display:flex;gap:2.4rem;flex-wrap:wrap}
.held__marke b{display:block;font:400 1.9rem/1 var(--serif);color:var(--gold-text)}
.held__marke span{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}

.held__bild{position:relative;justify-self:end;width:100%;max-width:520px}
.held__bild::before{
  content:"";position:absolute;inset:-26px -26px 42px 30px;
  background:var(--gold);border-radius:280px 280px 26px 280px;z-index:0;
}
.held__bild::after{
  content:"";position:absolute;right:-14px;bottom:8px;width:118px;height:118px;
  border-radius:50%;background:var(--sonne);z-index:0;
}
.held__rahmen{position:relative;z-index:1;overflow:hidden;border-radius:260px 260px 20px 260px;box-shadow:var(--schatten-tief)}
.held__rahmen img{width:100%;aspect-ratio:4/5;object-fit:cover}

.held__notiz{
  position:absolute;z-index:2;left:-34px;bottom:34px;
  background:var(--weiss);border-radius:18px;padding:.92rem 1.15rem;
  box-shadow:var(--schatten);display:flex;align-items:center;gap:.75rem;max-width:250px;
}
.held__notiz b{display:block;font:700 .88rem/1.3 var(--sans)}
.held__notiz span:not(.symbolfeld){font-size:.76rem;color:var(--grau);line-height:1.35;display:block}

@media (max-width:980px){
  .held__hof{grid-template-columns:1fr;gap:2.8rem}
  .held__bild{justify-self:center;max-width:420px}
  .held__notiz{left:-14px}
}
@media (max-width:520px){
  /* Nicht static: sonst verliert die Notiz ihren z-index und die
     absolut gesetzten Zierflächen des Helds malen sich darüber. */
  .held__notiz{position:relative;left:auto;bottom:auto;z-index:3;
               margin-top:1.1rem;max-width:none}
  .held__bild::after{width:78px;height:78px;right:-6px}
}

/* ---------- Warum ------------------------------------------------------- */

.warum__hof{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2.2rem,5vw,4.6rem);align-items:center}
.warum__bild{position:relative;width:100%;max-width:430px}
.warum__bild::before{content:"";position:absolute;left:-30px;top:-24px;width:150px;height:150px;border-radius:50%;background:var(--sonne)}
.warum__bild::after{content:"";position:absolute;right:-18px;bottom:-18px;width:96px;height:96px;border-radius:50%;border:1px solid var(--gold)}
.warum__scheibe{position:relative;z-index:1;border-radius:50%;overflow:hidden;box-shadow:var(--schatten-tief)}
.warum__scheibe img{width:100%;aspect-ratio:1;object-fit:cover}
.warum h2{margin:1.2rem 0 1.25rem}

.merkmale{margin-top:2.2rem;display:grid;gap:1.5rem}
.merkmal{display:flex;gap:1.15rem;align-items:flex-start}
.merkmal h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;margin-bottom:.32rem}
.merkmal p{font-size:.96rem;color:var(--grau);margin:0}

@media (max-width:900px){
  .warum__hof{grid-template-columns:1fr}
  .warum__bild{max-width:340px;margin-inline:auto}
}

/* ---------- Leistungsraster --------------------------------------------- */

.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.9vw,1.55rem)}
.karte{
  position:relative;display:block;border-radius:var(--rund);overflow:hidden;
  text-decoration:none;color:inherit;background:var(--sand);box-shadow:var(--schatten);
}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.karte:hover img{transform:scale(1.055)}
.karte__band{
  position:absolute;left:1rem;right:1rem;bottom:1rem;
  background:var(--gold-satt);color:#fff;border-radius:12px;
  padding:.82rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font:700 .81rem/1.25 var(--sans);letter-spacing:.06em;transition:background .3s ease;
}
.karte:hover .karte__band{background:#6F5330}
.karte__band svg{width:15px;height:15px;flex:none;opacity:.85}

@media (max-width:900px){.raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .raster{grid-template-columns:1fr}
  .karte img{aspect-ratio:16/10}
}

/* ---------- Wandel ------------------------------------------------------- */

.wandel__hof{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2.2rem,5vw,4.6rem);align-items:center}
.wandel h2{margin:1.2rem 0 1.3rem}
.wandel__liste{margin:1.7rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}
.wandel__liste li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;color:var(--grau)}
.wandel__liste svg{width:19px;height:19px;flex:none;margin-top:.2rem;color:var(--gold-text)}

.geraet{position:relative;justify-self:center;width:100%;max-width:420px}
.geraet::before{content:"";position:absolute;inset:auto -30px -30px 40px;height:74%;background:var(--sand);border-radius:26px 26px 26px 180px}
.geraet__schirm{position:relative;z-index:1;border-radius:34px;overflow:hidden;border:9px solid var(--oliv);box-shadow:var(--schatten-tief);background:var(--oliv)}
.geraet__schirm img{width:100%;aspect-ratio:3/4;object-fit:cover}
.plakette{
  position:absolute;z-index:2;background:var(--weiss);border-radius:14px;
  padding:.7rem .9rem;box-shadow:var(--schatten);font-size:.79rem;line-height:1.35;
  display:flex;align-items:center;gap:.6rem;
}
.plakette b{font-weight:700;display:block}
.plakette--oben{top:8%;right:-34px;max-width:190px}
.plakette--unten{bottom:11%;left:-40px;max-width:200px}
.plakette__punkt{width:9px;height:9px;border-radius:50%;background:var(--gold-satt);flex:none}

@media (max-width:900px){
  .wandel__hof{grid-template-columns:1fr}
  .geraet{max-width:330px}
  .plakette--oben{right:-16px}
  .plakette--unten{left:-16px}
}
@media (max-width:480px){
  .plakette{position:static;margin-top:.7rem;max-width:none;box-shadow:none;border:1px solid var(--linie)}
  .geraet::before{display:none}
}

/* ---------- Ratenrechner ------------------------------------------------- */

.rechner{background:var(--creme-tief)}
.rechner__hof{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4.4vw,3.8rem);align-items:center}
.rechner__bild{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-tief)}
.rechner__bild img{width:100%;aspect-ratio:4/3;object-fit:cover}

.pult{background:var(--weiss);border-radius:var(--rund);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--schatten)}
.pult h2{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:.35rem}
.pult__zeile{margin-top:1.55rem}
.pult__frage{font:700 .82rem/1.4 var(--sans);letter-spacing:.06em;color:var(--tinte);margin-bottom:.7rem;display:block}
.pult__wert{font:400 2.4rem/1 var(--serif);color:var(--gold-text);display:block;margin-bottom:.55rem}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(to right,var(--gold-satt) var(--fuell,40%),var(--sand-tief) var(--fuell,40%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--weiss);border:6px solid var(--gold-satt);cursor:pointer;
  box-shadow:0 4px 10px rgba(46,36,28,.28);
}
input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--weiss);
  border:6px solid var(--gold-satt);cursor:pointer;
}
.pult__spanne{display:flex;justify-content:space-between;font-size:.78rem;color:var(--grau);margin-top:.5rem}

.laufzeiten{display:flex;gap:.5rem;flex-wrap:wrap}
.laufzeit{
  min-width:52px;padding:.62rem .55rem;border-radius:12px;border:1px solid var(--linie);
  background:var(--weiss);font:700 .88rem/1 var(--sans);color:var(--tinte);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.laufzeit:hover{border-color:var(--gold)}
.laufzeit[aria-pressed="true"]{background:var(--gold-satt);border-color:var(--gold-satt);color:#fff}

.pult__ergebnis{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.pult__rate{font:400 clamp(2.4rem,5vw,3.1rem)/1 var(--serif);color:var(--tinte)}
.pult__rate small{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--grau)}
.pult__zahlen{margin-top:1.15rem;display:grid;gap:.45rem}
.pult__zahlen div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.pult__zahlen span:first-child{color:var(--grau)}
.pult__zahlen b{font-weight:700}
.pult__fein{margin-top:1.2rem;font-size:.78rem;color:var(--grau);line-height:1.55}

@media (max-width:900px){.rechner__hof{grid-template-columns:1fr}}

/* ---------- Zahnplan ----------------------------------------------------- */

.plan{background:var(--rose)}
.plan__kopf{text-align:center;max-width:64ch;margin:0 auto clamp(2.2rem,4vw,3.2rem)}
.plan__kopf .blei{margin-inline:auto}
.plan__streifen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.plan__streifen figure{margin:0;border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten)}
.plan__streifen img{width:100%;aspect-ratio:4/5;object-fit:cover}

.tarife{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.tarif{background:var(--weiss);border-radius:var(--rund);padding:1.8rem 1.55rem;display:flex;flex-direction:column;box-shadow:var(--schatten);position:relative}
.tarif--beliebt{outline:2px solid var(--gold);outline-offset:-2px}
.tarif__fahne{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold-satt);color:#fff;border-radius:99px;padding:.34rem .95rem;
  font:700 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.tarif h3{font-family:var(--sans);font-size:1.06rem;font-weight:700}
.tarif__preis{margin:.55rem 0 1.1rem;font:400 3rem/1 var(--serif);color:var(--gold-text)}
.tarif__preis small{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--grau)}
.tarif ul{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.72rem;font-size:.94rem;color:var(--grau)}
.tarif li{display:flex;gap:.62rem;align-items:flex-start}
.tarif li svg{width:17px;height:17px;flex:none;margin-top:.22rem;color:var(--gold-text)}
.tarif .knopf{margin-top:auto}

@media (max-width:900px){
  .plan__streifen{grid-template-columns:repeat(3,1fr);gap:.7rem}
  .tarife{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .tarif--beliebt{margin-top:.6rem}
}
@media (max-width:560px){
  .plan__streifen{grid-template-columns:1fr 1fr}
  .plan__streifen figure:last-child{display:none}
}

/* ---------- Stimmen ------------------------------------------------------ */

.stimmen{background:var(--oliv);color:#F1ECE0}
.stimmen__hof{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
.stimmen__bild{position:relative;max-width:380px;justify-self:center;width:100%}
.stimmen__bogen{border-radius:220px 220px 20px 20px;overflow:hidden;box-shadow:var(--schatten-tief)}
.stimmen__bogen img{width:100%;aspect-ratio:3/4;object-fit:cover}
.stimmen__kringel{
  position:absolute;left:-26px;bottom:-22px;width:104px;height:104px;border-radius:50%;
  background:var(--gold-satt);display:grid;place-items:center;color:#fff;
  font:400 4.4rem/1 var(--serif);padding-top:1.6rem;
}
.stimmen h2{color:#fff;margin:1.15rem 0 1.5rem;font-size:clamp(1.75rem,3.3vw,2.7rem)}
.stimme{display:none}
.stimme.aktiv{display:block;animation:sanft .55s ease}
@keyframes sanft{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stimme__wer{margin-top:1.5rem;display:flex;align-items:center;gap:.8rem}
.stimme__wer b{display:block;font-size:.98rem}
.stimme__wer span{font-size:.85rem;color:#C8C2B2}
.stimme__sterne{display:flex;gap:.18rem;margin-bottom:.9rem}
.stimme__sterne svg{width:17px;height:17px;color:var(--sonne)}

.wechsler{margin-top:2rem;display:flex;gap:.7rem;align-items:center}
.punkt{
  width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(241,236,224,.35);transition:background .25s ease,width .25s ease;
}
.punkt[aria-selected="true"]{background:var(--sonne);width:26px;border-radius:99px}

@media (max-width:900px){
  .stimmen__hof{grid-template-columns:1fr}
  .stimmen__bild{max-width:300px}
}

/* ---------- Team --------------------------------------------------------- */

.team__kopf{text-align:center;max-width:62ch;margin:0 auto clamp(2.2rem,4vw,3.2rem)}
.team__kopf .blei{margin-inline:auto}
.leute{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.person{
  background:var(--creme-tief);border-radius:var(--rund);padding:2rem 1.2rem 1.7rem;
  text-align:center;border:1px solid var(--linie);
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.person:hover{transform:translateY(-5px);box-shadow:var(--schatten);background:var(--weiss)}
.person__scheibe{
  width:112px;height:112px;margin:0 auto 1.15rem;border-radius:50%;overflow:hidden;
  border:3px solid var(--weiss);box-shadow:0 10px 24px -16px rgba(46,36,28,.7);
}
.person__scheibe img{width:100%;height:100%;object-fit:cover}
.person__name{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:.3rem}
.person__rolle{font-size:.85rem;color:var(--grau)}

@media (max-width:900px){.leute{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.leute{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}

/* ---------- Fragen ------------------------------------------------------- */

.fragen__kopf{text-align:center;margin-bottom:clamp(2rem,3.6vw,2.8rem)}
.fragen__liste{max-width:840px;margin-inline:auto;display:grid;gap:.7rem}
.frage{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:0 1.35rem;transition:border-color .3s ease,box-shadow .3s ease}
.frage[open]{border-color:var(--gold);box-shadow:var(--schatten)}
.frage summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font:600 1rem/1.45 var(--sans);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";width:11px;height:11px;flex:none;
  border-right:2px solid var(--gold-text);border-bottom:2px solid var(--gold-text);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s ease;
}
.frage[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.frage__text{padding:0 0 1.3rem;color:var(--grau);font-size:.98rem;max-width:72ch}
.frage__text p{margin-bottom:.8rem}

/* ---------- Ruf-Band ----------------------------------------------------- */

.ruf{background:var(--sand)}
.ruf__hof{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:clamp(2.2rem,4.4vw,3.4rem) 0}
.ruf h2{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:22ch}
.ruf p{color:var(--grau);margin-top:.7rem;max-width:48ch}
.ruf__tat{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- Seitenkopf --------------------------------------------------- */

.seitenkopf{background:var(--creme-tief);padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(2.6rem,5vw,4rem)}
.seitenkopf h1{margin:1.1rem 0 1.1rem;max-width:18ch}
.krume{font-size:.8rem;color:var(--grau);letter-spacing:.05em}
.krume a{text-decoration:none;color:var(--gold-text)}
.krume a:hover{text-decoration:underline}
.seitenkopf__bild{margin-top:clamp(2rem,4vw,3rem);border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-tief)}
.seitenkopf__bild img{width:100%;aspect-ratio:7/5;object-fit:cover}

/* ---------- Zweispalter -------------------------------------------------- */

.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.6vw,4rem);align-items:center}
.paar--eng{grid-template-columns:1.08fr .92fr}
.paar__bild{border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten-tief)}
.paar__bild img{width:100%;object-fit:cover}
.paar--dreh .paar__bild{order:-1}
@media (max-width:880px){
  .paar,.paar--eng{grid-template-columns:1fr}
  .paar--dreh .paar__bild{order:0}
}

.werte{margin-top:2rem;display:grid;gap:1.3rem}
.wert{display:flex;gap:1rem;align-items:flex-start}
.wert b{display:block;font-family:var(--sans);font-weight:700;margin-bottom:.25rem}
.wert p{font-size:.95rem;color:var(--grau);margin:0}

/* ---------- Ablauf-Schritte ---------------------------------------------- */

.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.schritt{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rund);padding:1.7rem 1.4rem;counter-increment:s}
.schritt::before{content:counter(s,decimal-leading-zero);display:block;font:400 2.1rem/1 var(--serif);color:var(--gold);margin-bottom:.8rem}
.schritt h3{font-family:var(--sans);font-size:1rem;font-weight:700;margin-bottom:.42rem}
.schritt p{font-size:.93rem;color:var(--grau);margin:0}
@media (max-width:900px){.schritte{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.schritte{grid-template-columns:1fr}}

/* ---------- Preistabelle -------------------------------------------------- */

.preise{width:100%;border-collapse:collapse;background:var(--weiss);box-shadow:var(--schatten)}
.preise caption{text-align:left;padding:1.2rem 1.4rem .6rem;font-size:.86rem;color:var(--grau)}
.preise th,.preise td{padding:1rem 1.4rem;text-align:left;border-bottom:1px solid var(--linie);font-size:.95rem}
.preise th{font:700 .76rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);background:var(--creme-tief)}
.preise td:last-child,.preise th:last-child{text-align:right;white-space:nowrap}
.preise td:last-child{font-weight:700}
.preise tr:last-child td{border-bottom:0}
.tabellenhuelle{overflow-x:auto;border-radius:var(--rund);box-shadow:var(--schatten)}

/* ---------- Formular ------------------------------------------------------ */

.formular{background:var(--weiss);border-radius:var(--rund);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--schatten)}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld{margin-bottom:1.05rem;display:block}
.feld > span{display:block;font:600 .82rem/1.4 var(--sans);margin-bottom:.42rem}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--linie);border-radius:12px;
  background:var(--creme);font:400 .96rem/1.5 var(--sans);color:var(--tinte);
}
.feld textarea{min-height:132px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(176,138,84,.2)}
.haken{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--grau);margin-bottom:1.2rem}
.haken input{margin-top:.24rem;width:17px;height:17px;accent-color:var(--gold-satt);flex:none}
.feldfehler{color:#8F2F21;font-size:.83rem;margin-top:.35rem;display:none}
.feld.fehler input,.feld.fehler textarea,.feld.fehler select{border-color:#8F2F21}
.feld.fehler .feldfehler{display:block}
.dank{display:none;background:var(--sand);border-radius:14px;padding:1.1rem 1.25rem;font-size:.95rem;margin-bottom:1.1rem}
.dank.da{display:block}
@media (max-width:620px){.feldpaar{grid-template-columns:1fr}}

.kontaktliste{list-style:none;margin:0;padding:0;display:grid;gap:1.3rem}
.kontaktliste li{display:flex;gap:1rem;align-items:flex-start}
.kontaktliste b{display:block;font-family:var(--sans);font-weight:700;margin-bottom:.2rem}
.kontaktliste a{color:var(--gold-text);text-decoration:none}
.kontaktliste a:hover{text-decoration:underline}
.kontaktliste span:not(.symbolfeld){color:var(--grau);font-size:.95rem}

/* ---------- Sprechzeiten -------------------------------------------------- */

.zeiten{background:var(--weiss);border-radius:var(--rund);padding:1.7rem 1.6rem;box-shadow:var(--schatten)}
.zeiten h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;margin-bottom:1.1rem}
.zeiten dl{margin:0;display:grid;gap:.05rem}
.zeiten__zeile{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-bottom:1px solid var(--linie);font-size:.93rem}
.zeiten__zeile:last-of-type{border-bottom:0}
.zeiten__zeile dt{color:var(--grau)}
.zeiten__zeile dd{margin:0;font-weight:600}
.zeiten__zeile--zu dd{color:var(--grau);font-weight:400}
.zeiten .knopf{margin-top:1.3rem}

/* ---------- Fuß ---------------------------------------------------------- */

.fuss{background:var(--rose);padding:clamp(3rem,6vw,4.6rem) 0 0}
.fuss__hof{display:grid;grid-template-columns:1.45fr .8fr .8fr 1.25fr;gap:clamp(1.6rem,3.4vw,3rem)}
.fuss__marke .wortmarke__name{font-size:1.32rem}
.fuss__text{margin-top:1.1rem;font-size:.94rem;color:var(--grau);max-width:38ch}
.fuss__daten{margin-top:1.5rem;display:grid;gap:.8rem;font-size:.93rem}
.fuss__daten div{display:flex;gap:.7rem;align-items:flex-start}
.fuss__daten svg{width:16px;height:16px;color:var(--gold-text);flex:none;margin-top:.28rem}
.fuss__daten a{color:inherit;text-decoration:none}
.fuss__daten a:hover{color:var(--gold-text)}
.fuss h4{font:700 .78rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:1.05rem}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem;font-size:.94rem}
.fuss ul a{text-decoration:none;color:var(--grau)}
.fuss ul a:hover{color:var(--tinte)}
.fuss__riegel{
  margin-top:clamp(2.4rem,4vw,3.4rem);border-top:1px solid var(--rose-tief);
  padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.83rem;color:var(--grau);
}
.fuss__riegel nav{display:flex;gap:1.3rem}
.fuss__riegel a{text-decoration:none}
.fuss__riegel a:hover{text-decoration:underline}

@media (max-width:980px){
  .fuss__hof{grid-template-columns:1fr 1fr}
  .fuss__marke{grid-column:1/-1}
  .fuss__zeiten{grid-column:1/-1}
}
@media (max-width:520px){
  .fuss__hof{grid-template-columns:1fr}
  .fuss__riegel{justify-content:flex-start}
}

/* ---------- Nach oben ----------------------------------------------------- */

.hoch{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:80;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--oliv);color:#fff;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,background .3s ease;
}
.hoch.da{opacity:1;pointer-events:auto;transform:none}
.hoch:hover{background:var(--gold-satt)}
.hoch svg{width:19px;height:19px}

/* ---------- Rechtstexte ---------------------------------------------------- */

.recht h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin:2.4rem 0 .9rem}
.recht h3{font-size:1.12rem;margin:1.6rem 0 .55rem;font-family:var(--sans);font-weight:700}
.recht p,.recht li{color:var(--grau);font-size:.98rem}
.recht ul{padding-left:1.15rem;display:grid;gap:.4rem;margin:0 0 1.1rem}
.recht a{color:var(--gold-text)}

/* ---------- 404 ------------------------------------------------------------ */

.leer{text-align:center;padding:clamp(4rem,10vw,8rem) 0}
.leer__zahl{font:400 clamp(5rem,16vw,10rem)/1 var(--serif);color:var(--gold-text);display:block}
.leer h1{margin:.8rem 0 1rem}
.leer .blei{margin-inline:auto}
.leer .knopf{margin-top:2rem}

/* ---------- Nachjustierung: Abstände und Zierrat ------------------------- */

.team__kopf h2,.plan__kopf h2,.fragen__kopf h2{margin:1.05rem 0 1rem}
.pult h2{margin-top:.9rem}
.seitenkopf .marke + h1{margin-top:1.1rem}

#stimmenfeld{margin-top:1.35rem}
.stimmen__kringel{
  font-size:4rem;line-height:1;padding-top:2.2rem;font-family:var(--serif);
}
.held__bild::after{right:-40px;bottom:-26px}

/* ---------- Enger Kopf auf kleinen Geräten ------------------------------- */

@media (max-width:640px){
  .balken__rechts{flex-direction:column;gap:.5rem}
  .balken__stueck{justify-content:center;text-align:center}
}
@media (max-width:560px){
  .kopf__hof{gap:.7rem}
  .kopf__tat .knopf{white-space:nowrap}
  .nur-gross{display:none}
  .wortmarke__name{font-size:1.14rem;letter-spacing:.16em}
  .wortmarke__zusatz{font-size:.55rem;letter-spacing:.2em;white-space:nowrap}
}
@media (max-width:360px){
  .wortmarke__zusatz{display:none}
}

/* Flex-Abstand im Kopfknopf ausgleichen, damit "Termin vereinbaren"
   wie ein Wortpaar sitzt und nicht wie zwei Knöpfe. */
.nur-gross{margin-left:-.55rem}

/* Überschriften in den Zweispaltern brauchen Luft nach oben und unten. */
.paar h2{margin:.9rem 0 1.05rem}
.paar .marke + h2{margin-top:1rem}

/* Die Tabellenüberschrift gehört optisch auf die weiße Karte, nicht daneben. */
.preise caption{background:var(--weiss)}