/* Böhmer Hautästhetik — Stylesheet
   Gestaltung nach Variante B (Nähe). Farben und Schriften aus dem Corporate Design.
   Alle Textfarben auf mindestens 4,5:1 Kontrast geprüft. */

/* ---------- Schriften, lokal eingebunden ---------- */
@font-face{font-family:'Literata';src:url('schriften/literata-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Literata';src:url('schriften/literata-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('schriften/karla-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('schriften/karla-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --leinen:#F8F4EE;
  --sepia:#2B2320;
  --ton:#7B5D4A;          /* Akzent auf hellem Grund, 5,5:1 */
  --ton-hell:#C4A48C;     /* Akzent auf dunklem Grund, 6,6:1 */
  --karte:#F1EBE3;
  --linie-dunkel:#453A34;
  --linie-hell:#E0D8CE;
  --text-hell:#3A322E;    /* 11,4:1 auf Leinen */
  --text-leise:#655A52;   /* 6,1:1 auf Leinen, 5,7:1 auf Karte */
  --mass:78rem;
  --schmal:44rem;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  background:var(--sepia);color:var(--leinen);
  font-family:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.0625rem;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Literata',Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.015em;line-height:1.22}
img{display:block;max-width:100%}
a{color:inherit}
strong,b{font-weight:500}

.wrap{max-width:var(--mass);margin:0 auto;padding:0 3rem}
.wrap.eng{max-width:var(--mass)}
.wrap.eng>*{max-width:calc(var(--schmal) + 8rem)}

/* ---------- Sprungmarke für Tastatur und Screenreader ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--leinen);color:var(--sepia);padding:.8rem 1.4rem;z-index:200}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--ton-hell);outline-offset:3px}

/* ---------- Kopf ---------- */
.kopfleiste{position:sticky;top:0;z-index:60;background:var(--sepia);border-bottom:1px solid var(--linie-dunkel)}
.kopfleiste.transparent{position:absolute;left:0;right:0;background:transparent;border:0}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:2rem;
      padding:1.1rem 3rem;max-width:var(--mass);margin:0 auto}
.marke{text-decoration:none;flex-shrink:0;display:block}
.marke img{height:3.6rem;width:auto;display:block}
nav.haupt{display:flex;gap:1.7rem;font-size:.94rem}
nav.haupt a{color:rgba(248,244,238,.82);text-decoration:none;white-space:nowrap;padding:.2rem 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
nav.haupt a:hover,nav.haupt a[aria-current="page"]{color:var(--leinen);border-color:var(--ton-hell)}
.kopf-rechts{display:flex;align-items:center;gap:1.2rem}
.tel{color:var(--leinen);text-decoration:none;font-size:.94rem;white-space:nowrap}
.tel:hover{text-decoration:underline}

.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
     white-space:nowrap;background:var(--leinen);color:var(--sepia);text-align:center;
     padding:.72rem 1.5rem;text-decoration:none;font-size:.92rem;border:1px solid var(--leinen);
     transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:transparent;color:var(--leinen)}
.btn-leer{background:transparent;color:var(--leinen);border-color:rgba(248,244,238,.45)}
.btn-leer:hover{background:var(--leinen);color:var(--sepia)}
.btn-dunkel{background:var(--sepia);color:var(--leinen);border-color:var(--sepia)}
.btn-dunkel:hover{background:transparent;color:var(--sepia)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(100vh,52rem);display:flex;align-items:flex-end;overflow:hidden}
.hero picture,.hero .bild{position:absolute;inset:0}
.hero img{width:100%;height:100%;object-fit:cover;object-position:58% 42%}
.hero .bild::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,35,32,.72) 0%,rgba(43,35,32,.3) 32%,rgba(43,35,32,.94) 100%)}
.hero-inhalt{position:relative;z-index:2;padding-bottom:5.5rem;padding-top:11rem;width:100%}
.praxisname{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(248,244,238,.92);margin-bottom:1.1rem;font-weight:500}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.06;max-width:16ch;margin-bottom:1.5rem}
.hero .lead{font-size:1.2rem;max-width:48ch;color:rgba(248,244,238,.92);margin-bottom:2.4rem;line-height:1.62}
.aktionen{display:flex;gap:1rem;align-items:stretch;flex-wrap:wrap}
.aktionen .info{font-size:.9rem;color:rgba(248,244,238,.78)}

/* Kopf der Unterseiten */
.seitenkopf{padding:9.5rem 0 3.5rem;border-bottom:1px solid var(--linie-dunkel)}
.seitenkopf h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:20ch;margin-bottom:1.2rem}
.seitenkopf .lead{font-size:1.15rem;color:rgba(248,244,238,.86);max-width:52ch}
.krumen{font-size:.84rem;color:rgba(248,244,238,.72);margin-bottom:1.6rem;letter-spacing:.02em}
.krumen a{color:rgba(248,244,238,.85)}
.krumen span[aria-current]{color:rgba(248,244,238,.72)}

/* ---------- Flächen ---------- */
.hell{background:var(--leinen);color:var(--text-hell);padding:6rem 0}
.hell h2,.hell h3{color:var(--sepia)}
.dunkel{padding:6rem 0}
.blockkopf{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ton-hell);margin-bottom:1.1rem;font-weight:500}
.hell .blockkopf,.cta .blockkopf,.paar.aufhell .blockkopf{color:var(--ton)}
h2{font-size:clamp(1.65rem,3.2vw,2.4rem);margin-bottom:1rem}
h3{font-size:1.3rem;margin-bottom:.6rem}
.unterzeile{color:var(--text-leise);max-width:54ch;margin-bottom:3rem}
.dunkel .unterzeile{color:rgba(248,244,238,.82)}
p+p{margin-top:1.1rem}

/* ---------- Auswahlkarten ---------- */
.karten{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.karte{background:var(--karte);padding:2.2rem 2.1rem;text-decoration:none;color:inherit;
       display:flex;flex-direction:column;gap:.8rem;border-bottom:2px solid transparent;
       transition:border-color .25s,transform .25s}
.karte:hover,.karte:focus-visible{border-color:var(--ton);transform:translateY(-3px)}
.karte h3{font-size:1.1rem;line-height:1.42;color:var(--sepia)}
.karte p{font-size:.97rem;color:var(--text-leise);flex:1;line-height:1.6}
.karte .pfeil{font-size:.86rem;color:var(--ton)}
.nachsatz{margin-top:2.2rem;color:var(--text-leise);max-width:58ch}

/* ---------- Bild-Text-Paar ---------- */
.paar{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.paar>picture{display:block;position:relative;min-height:32rem}
.paar picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paar .inhalt{padding:4.5rem 3.5rem;display:flex;flex-direction:column;justify-content:center}
.paar.aufhell{background:var(--leinen);color:var(--text-hell)}
.paar.aufhell h2{color:var(--sepia)}
.paar.aufhell p{color:var(--text-leise)}
.paar.aufhell .gross{color:var(--text-hell)}

/* ---------- Leistungsblöcke ---------- */
.leistung{border-top:1px solid var(--linie-dunkel);padding:3.2rem 0;display:grid;grid-template-columns:1.15fr 1fr;gap:4rem}
.leistung:last-of-type{border-bottom:1px solid var(--linie-dunkel)}
.leistung h3{font-size:1.55rem;margin-bottom:.9rem}
.leistung .beschr{color:rgba(248,244,238,.86);margin-bottom:1.6rem}
.leistung .weiter{display:inline-block;margin-top:1.4rem;color:var(--ton-hell);font-size:.95rem}
.nicht{background:rgba(196,164,140,.13);border-left:2px solid var(--ton-hell);padding:1.4rem 1.6rem;
       font-size:.97rem;line-height:1.62;color:rgba(248,244,238,.9)}
.nicht strong{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
              color:var(--ton-hell);margin-bottom:.5rem;font-weight:500}
.hell .nicht,.cta .nicht,.paar.aufhell .nicht{background:rgba(123,93,74,.09);border-left-color:var(--ton);color:var(--text-hell)}
.hell .nicht strong,.cta .nicht strong,.paar.aufhell .nicht strong{color:var(--ton)}
.daten dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ton-hell);margin-bottom:.28rem}
.daten dd{margin-bottom:1.25rem;color:rgba(248,244,238,.9);font-size:1rem;line-height:1.55}
.hell .daten dt,.paar.aufhell .daten dt{color:var(--ton)}
.hell .daten dd,.paar.aufhell .daten dd{color:var(--text-hell)}

/* ---------- Preiszeile, hervorgehoben ---------- */
.preis{border-top:1px solid var(--linie-dunkel);border-bottom:1px solid var(--linie-dunkel);
       padding:1.6rem 0;margin:2rem 0;display:flex;flex-wrap:wrap;gap:2.5rem}
.hell .preis,.paar.aufhell .preis{border-color:var(--linie-hell)}
.preis .posten .wert{font-family:'Literata',serif;font-size:1.45rem;display:block}
.preis .posten .was{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ton-hell)}
.hell .preis .posten .was,.paar.aufhell .preis .posten .was{color:var(--ton)}

/* ---------- Fragen ---------- */
.fragen{max-width:52rem}
.frage:not(details){border-top:1px solid var(--linie-dunkel);padding:1.9rem 0}
.hell .frage,.paar.aufhell .frage{border-color:var(--linie-hell)}
.frage:not(details):last-child{border-bottom:1px solid var(--linie-dunkel)}
.hell .frage:last-child{border-bottom-color:var(--linie-hell)}
.frage h3{font-size:1.12rem;margin-bottom:.55rem;font-family:'Karla',sans-serif;font-weight:500;letter-spacing:0}
.frage p{color:rgba(248,244,238,.88);font-size:1rem}
.hell .frage p{color:var(--text-leise)}
.gruppe{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ton-hell);margin:3rem 0 .6rem}
.hell .gruppe{color:var(--ton)}
.gruppe:first-of-type{margin-top:0}

/* ---------- Ablaufschritte ---------- */
.schritte{counter-reset:schritt;max-width:52rem}
.schritt{border-top:1px solid var(--linie-dunkel);padding:2.4rem 0;display:grid;grid-template-columns:4rem 1fr;gap:1.5rem}
.schritt::before{counter-increment:schritt;content:counter(schritt);font-family:'Literata',serif;
                 font-size:1.6rem;color:var(--ton-hell);line-height:1.2}
.hell .schritt{border-color:var(--linie-hell)}
.hell .schritt::before{color:var(--ton)}
.schritt h3{font-size:1.25rem;margin-bottom:.7rem}
.hinweiszeile{font-weight:500;color:var(--leinen)}
.hell .hinweiszeile,.paar.aufhell .hinweiszeile{color:var(--sepia)}

/* ---------- Listen ---------- */
ul.punkte{list-style:none;margin:1.2rem 0}
ul.punkte li{padding-left:1.4rem;position:relative;margin-bottom:.55rem}
ul.punkte li::before{content:'';position:absolute;left:0;top:.72em;width:.42rem;height:1px;background:var(--ton-hell)}
.hell ul.punkte li::before,.paar.aufhell ul.punkte li::before{background:var(--ton)}

/* ---------- Zitat über Bild ---------- */
.zitat{position:relative;min-height:24rem;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.zitat picture{position:absolute;inset:0}
.zitat img{width:100%;height:100%;object-fit:cover;filter:brightness(.42)}
.zitat .inner{position:relative;z-index:2;padding:3rem 1.5rem}
.zitat blockquote{font-family:'Literata',serif;font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.4;max-width:26ch;margin:0 auto}
.zitat cite{display:block;margin-top:1.6rem;font-family:'Karla',sans-serif;font-style:normal;font-size:.76rem;
            letter-spacing:.16em;text-transform:uppercase;color:rgba(248,244,238,.85)}

/* ---------- Tabelle ---------- */
table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.98rem}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linie-dunkel)}
.hell th,.hell td,.paar.aufhell th,.paar.aufhell td{border-color:var(--linie-hell)}
th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ton-hell);font-weight:500}
.hell th,.paar.aufhell th{color:var(--ton)}
td:last-child,th:last-child{text-align:right}

/* ---------- Abschluss ---------- */
.cta{background:var(--leinen);color:var(--text-hell);padding:6rem 0;text-align:center}
.cta h2{color:var(--sepia);margin-bottom:1rem}
.cta p{color:var(--text-leise);max-width:46ch;margin:0 auto 2.4rem}
.cta-wege{margin-top:3.2rem;padding-top:2.4rem;border-top:1px solid var(--linie-hell);
          display:flex;justify-content:center;gap:4rem;flex-wrap:wrap;font-size:.97rem;color:var(--text-leise);text-align:left}
.cta-wege a{color:var(--sepia)}
.cta-wege strong{display:block;color:var(--sepia);margin-bottom:.2rem}

/* ---------- Fuß ---------- */
footer{padding:3.5rem 0 2.5rem;font-size:.92rem;color:rgba(248,244,238,.8);border-top:1px solid var(--linie-dunkel)}
.fuss{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.fuss a{color:rgba(248,244,238,.88)}
.fuss .name{color:var(--leinen);font-size:1.1rem;letter-spacing:.05em;display:block;margin-bottom:.4rem}
.fussnav{display:flex;flex-direction:column;gap:.4rem}
.fussrand{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--linie-dunkel);
          display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.85rem;color:rgba(248,244,238,.72)}

/* ---------- Porträt ------------------------------------------------------
   Das Bild wird formatfüllend in die Zelle gesetzt. Der Bildausschnitt ist
   nach links verschoben, weil Jeannine dort im Bild sitzt — bei mittiger
   Ausrichtung würde in schmalen Zellen das Klavier die Hälfte einnehmen. */
picture.portraetbild img{object-position:42% 26%}

/* ---------- Kleine Bildschirme ---------- */
@media(max-width:900px){
  body{font-size:1.02rem}
  .wrap{padding:0 1.4rem}
  .kopf{padding:.9rem 1.4rem;gap:1rem}
  nav.haupt,.kopf-rechts .tel{display:none}
  .marke img{height:2.2rem}
  .hero-inhalt{padding-top:7rem;padding-bottom:3.5rem}
  .seitenkopf{padding:6.5rem 0 2.5rem}
  .karten{grid-template-columns:1fr}
  .paar{grid-template-columns:1fr}
  .paar>picture{min-height:20rem}
  /* Einspaltig wird die Zelle flacher — der Ausschnitt muss weiter nach oben,
     sonst schneidet die Oberkante den Kopf an. */
  .paar>picture.portraetbild{min-height:28rem}
  picture.portraetbild img{object-position:42% 18%}
  .paar .inhalt{padding:3rem 1.4rem}
  .leistung{grid-template-columns:1fr;gap:1.8rem}
  .hell,.dunkel,.cta{padding:4rem 0}
  .cta-wege{gap:2rem}
  .fuss{grid-template-columns:1fr;gap:2rem}
  .schritt{grid-template-columns:2.5rem 1fr;gap:1rem}
  .preis{gap:1.5rem}
}
@media(max-width:520px){
  .btn{padding:.68rem 1.1rem;font-size:.88rem}
  .aktionen{gap:.7rem}
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .kopfleiste,.cta,.hero .bild::after,nav{display:none}
  .hell,.dunkel{padding:1rem 0;background:#fff;color:#000}
}

/* ---------- Mobilmenü, ohne JavaScript ---------- */
.mobilnav{display:none;position:relative}
.mobilnav>summary{list-style:none;cursor:pointer;font-size:.9rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.62rem 1rem;border:1px solid rgba(248,244,238,.45);color:var(--leinen)}
.mobilnav>summary::-webkit-details-marker{display:none}
.mobilnav[open]>summary{background:var(--leinen);color:var(--sepia);border-color:var(--leinen)}
.mobilnav>nav{position:absolute;right:0;top:calc(100% + .6rem);min-width:15rem;background:var(--sepia);
  border:1px solid var(--linie-dunkel);display:flex;flex-direction:column;z-index:80}
.mobilnav>nav a{padding:.85rem 1.2rem;text-decoration:none;color:var(--leinen);
  border-bottom:1px solid var(--linie-dunkel);font-size:1rem}
.mobilnav>nav a:last-child{border-bottom:0}
.kopfleiste.transparent .mobilnav>nav{background:var(--sepia)}

/* Tabellen auf schmalen Bildschirmen */
@media(max-width:900px){
  .mobilnav{display:block}
  table{font-size:.9rem}
  th,td{padding:.7rem .5rem}
  td:not(:first-child),th:not(:first-child){white-space:nowrap}
  .kopf-rechts .btn{display:none}
}

/* ---------- Nur für Screenreader ---------- */
.nurlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.extern{font-size:.85em;margin-left:.3em;opacity:.75}
.leise{color:rgba(248,244,238,.72)}
.hell .leise,.cta .leise{color:var(--text-leise)}

/* ---------- Buchungsknopf mit Zielangabe ---------- */
.btn-buchen{gap:.15rem;line-height:1.3;padding-top:.6rem;padding-bottom:.6rem}
.btn-buchen .btn-zusatz{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.72}
.btn-breit{width:100%;text-align:center}
.knopfzeile{margin-top:1.8rem}
.ort{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ---------- Kontaktbereich ---------- */
.kontaktbereich{padding:6rem 0}
.kontaktgitter{display:grid;grid-template-columns:22rem 1fr;gap:3.5rem;align-items:start}
.kontaktwege{display:flex;flex-direction:column;gap:1rem}
.weg{display:block;text-decoration:none;border:1px solid var(--linie-dunkel);padding:1.1rem 1.3rem;
  transition:border-color .2s,background .2s}
.weg:hover{border-color:var(--ton-hell);background:rgba(196,164,140,.07)}
.hell .weg,.cta .weg{border-color:var(--linie-hell)}
.hell .weg:hover{border-color:var(--ton);background:rgba(123,93,74,.06)}
.weg-was{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ton-hell);margin-bottom:.3rem}
.hell .weg-was{color:var(--ton)}
.weg-wie{display:block;font-size:1.05rem;margin-bottom:.15rem}
.weg-wann{display:block;font-size:.87rem;color:rgba(248,244,238,.78)}
.hell .weg-wann{color:var(--text-leise)}
.weg-ort{margin-top:.6rem;font-size:.95rem;line-height:1.6}

/* ---------- Formular ---------- */
.formular fieldset{border:0;margin-bottom:2rem}
.formular legend{font-family:'Literata',serif;font-size:1.25rem;margin-bottom:.4rem;padding:0}
.wahl{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .9rem;margin-bottom:.4rem;
  border:1px solid var(--linie-dunkel);cursor:pointer;transition:border-color .2s,background .2s}
.wahl:hover{border-color:var(--ton-hell)}
.wahl input{margin-top:.35rem;accent-color:var(--ton-hell);flex-shrink:0;width:1rem;height:1rem}
.wahl:has(input:checked){border-color:var(--ton-hell);background:rgba(196,164,140,.1)}
.wahl-text strong{display:block;font-weight:500;font-size:1rem}
.wahl-text em{display:block;font-style:normal;font-size:.86rem;color:rgba(248,244,238,.75);margin-top:.1rem}
.hell .wahl{border-color:var(--linie-hell)}
.hell .wahl:has(input:checked){border-color:var(--ton);background:rgba(123,93,74,.07)}
.hell .wahl-text em{color:var(--text-leise)}

.feld{margin-bottom:1.3rem}
.feld label{display:block;font-size:.93rem;margin-bottom:.35rem}
.feld input,.feld textarea{width:100%;background:transparent;color:inherit;font:inherit;
  border:1px solid var(--linie-dunkel);padding:.7rem .85rem;border-radius:0}
.feld input:focus,.feld textarea:focus{border-color:var(--ton-hell);outline:none;
  box-shadow:0 0 0 1px var(--ton-hell)}
.hell .feld input,.hell .feld textarea{border-color:var(--linie-hell)}
.feldhilfe{display:block;font-size:.84rem;color:rgba(248,244,238,.78);margin-top:.3rem;line-height:1.5}
.hell .feldhilfe{color:var(--text-leise)}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.55;
  margin:1.4rem 0 1.6rem}
.zustimmung input{margin-top:.28rem;accent-color:var(--ton-hell);width:1rem;height:1rem;flex-shrink:0}
.honig{position:absolute;left:-9999px}
.formular button{font-family:inherit}

@media(max-width:900px){
  .kontaktgitter{grid-template-columns:1fr;gap:2.5rem}
  .kontaktbereich{padding:4rem 0}
}

/* ---------- Umschaltpunkt der Navigation ----------
   Sieben Menüpunkte brauchen mehr Platz als das Logo und der Buchungsknopf übrig lassen.
   Deshalb wechselt die Navigation schon bei 1080 px auf das Menüfeld. */
@media(max-width:1080px){
  nav.haupt{display:none}
  .mobilnav{display:block}
}

/* --- Rechtstexte (Impressum, Datenschutz) ------------------------------- */
/* Die Texte kommen unformatiert aus dem Generator. Hier bekommen sie den
   Rhythmus der übrigen Seiten, ohne dass am Wortlaut etwas geändert wird. */
.rechtstext h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin:3.2rem 0 .2rem}
.rechtstext>h2:first-child{margin-top:0}
.rechtstext h3{font-size:1.2rem;margin:2.2rem 0 .2rem}
.rechtstext h4{font-family:'Karla',sans-serif;font-weight:600;font-size:1rem;
  letter-spacing:0;margin:1.6rem 0 .1rem}
.hell .rechtstext h4{color:var(--sepia)}
.rechtstext p{margin-top:1.05rem;max-width:72ch}
.rechtstext ul{margin:1.05rem 0 0 1.3rem;max-width:72ch}
.rechtstext li{margin-bottom:.5rem}
.rechtstext a{color:var(--ton);text-decoration:underline;text-underline-offset:.2em;
  text-decoration-thickness:1px;word-break:break-word}
.rechtstext a:hover{color:var(--sepia)}
.rechtstext hr{border:0;border-top:1px solid var(--linie-hell);margin:3rem 0}

/* --- Instagram im Fußbereich -------------------------------------------- */
.sozialzeile{margin-top:.9rem}
.sozial{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  color:rgba(248,244,238,.88);transition:color .2s}
.sozial:hover{color:var(--leinen)}
.sozial-icon{flex-shrink:0}

/* Der Ablauf ist eine echte geordnete Liste. Gezählt wird weiterhin über den
   CSS-Zähler, damit die Ziffer gestaltet werden kann — die native Nummerierung
   wird deshalb ausgeblendet, die Reihenfolge bleibt für Vorlesesoftware und
   Suchmaschinen aber im Markup erhalten. */
ol.schritte{list-style:none}

/* Die Hauptüberschrift trägt den Claim und darunter, deutlich kleiner, die
   sachliche Einordnung mit Leistung und Ort. Beides steht bewusst in derselben
   h1: Der Claim bleibt das, was man zuerst liest, aber die Überschrift enthält
   damit auch den Begriff, nach dem tatsächlich gesucht wird. */
.hero h1 .h1-fach{display:block;margin-top:1rem;font-family:'Karla',sans-serif;
  font-weight:400;letter-spacing:.01em;line-height:1.4;
  font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(248,244,238,.9);max-width:34ch}

/* Querverweise unter den Fragen: leiser als der Fließtext, aber anklickbar
   beschriftet — „Vitiligo und helle Stellen" sagt mehr als „hier". */
.verwandt{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linie-dunkel);
  font-size:.94rem;line-height:2;color:rgba(248,244,238,.82);max-width:60rem}
.hell .verwandt,.paar.aufhell .verwandt{border-top-color:var(--linie-hell);color:var(--text-leise)}
.verwandt strong{color:var(--ton-hell);font-weight:500}
.hell .verwandt strong{color:var(--ton)}
.verwandt a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.verwandt span{opacity:.5;margin:0 .3rem}

/* Autor- und Standzeile am Fuß der inhaltlichen Seiten. Leise gesetzt — sie
   soll belegen, nicht ablenken. */
.standzeile{padding:1.8rem 0 2.2rem;border-top:1px solid var(--linie-hell)}
.standzeile p{font-size:.88rem;color:var(--text-leise)}
.standzeile strong{color:var(--sepia);font-weight:500}

/* „Was gilt, bevor ich anfange" sieht aus wie der Fragenblock, ist aber keiner:
   Das sind Aussagen, keine Fragen. Eigene Klasse, damit sie nicht versehentlich
   als Frage-Antwort-Paar ausgezeichnet werden. Gestaltung identisch. */
.merksaetze{max-width:52rem}
.merksatz{border-bottom:1px solid var(--linie-dunkel);padding:1.6rem 0}
.merksatz:first-child{border-top:1px solid var(--linie-dunkel)}
.hell .merksatz,.paar.aufhell .merksatz{border-color:var(--linie-hell)}
.merksatz h3{font-size:1.12rem;margin-bottom:.55rem;font-family:'Karla',sans-serif;
  font-weight:500;letter-spacing:0}

/* ---------- Fragen zum Aufklappen ---------------------------------------
   Zwanzig Fragen am Stück sind eine Wand, durch die niemand liest. Als
   Aufklapper wird daraus eine Liste, die man in Sekunden überfliegt — der
   Text bleibt vollständig im Quelltext, also auch für Suchmaschinen und
   Vorlesesoftware. Gebaut mit dem details-Element: kein JavaScript nötig,
   Tastaturbedienung von Haus aus. */
.fragengruppe{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ton-hell);font-weight:500;margin:2.6rem 0 .2rem}
.fragengruppe:first-child{margin-top:0}
.hell .fragengruppe,.paar.aufhell .fragengruppe{color:var(--ton)}

details.frage{border-bottom:1px solid var(--linie-dunkel);padding:0}
.fragengruppe+details.frage,.fragen>details.frage:first-child{border-top:1px solid var(--linie-dunkel)}
.hell .fragengruppe+details.frage,.hell .fragen>details.frage:first-child,
.paar.aufhell .fragengruppe+details.frage{border-top-color:var(--linie-hell)}
.hell details.frage,.paar.aufhell details.frage{border-color:var(--linie-hell)}
details.frage summary{list-style:none;cursor:pointer;padding:1.15rem 2.4rem 1.15rem 0;
  position:relative;transition:color .2s}
details.frage summary::-webkit-details-marker{display:none}
details.frage summary h3{display:inline;font-size:1.12rem;font-family:'Karla',sans-serif;
  font-weight:500;letter-spacing:0;line-height:1.5}
/* Das Pluszeichen ist aus zwei Strichen gebaut; beim Öffnen dreht sich der
   senkrechte weg, aus dem Plus wird ein Minus. */
details.frage summary::after,details.frage summary::before{content:'';position:absolute;
  right:.35rem;top:calc(1.15rem + .74em);width:.85rem;height:1px;background:var(--ton-hell);
  transition:transform .25s}
details.frage summary::before{transform:rotate(90deg)}
details.frage[open] summary::before{transform:rotate(0deg)}
.hell details.frage summary::after,.hell details.frage summary::before,
.paar.aufhell details.frage summary::after,.paar.aufhell details.frage summary::before{background:var(--ton)}
details.frage summary:hover h3{color:var(--ton-hell)}
.hell details.frage summary:hover h3{color:var(--ton)}
details.frage>p{padding-right:2.4rem;padding-bottom:.4rem;max-width:62ch}
details.frage>p:last-child{padding-bottom:1.4rem}
details.frage summary:focus-visible{outline:2px solid var(--ton-hell);outline-offset:2px}
@media(max-width:900px){
  details.frage summary{padding-right:2rem}
  details.frage>p{padding-right:0}
}

/* ---------- Stimmen ----------
   Der Abschnitt erscheint nur, wenn freigegebene Stimmen vorliegen; erzeugt
   wird er von stimmen-block.php aus daten/stimmen.json. */
.stimmenraster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-bottom:2.6rem}
.stimmenraster.n1{grid-template-columns:minmax(0,34rem)}
.stimmenraster.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:58rem}
figure.stimme{background:var(--karte);padding:2.2rem 2.1rem;display:flex;flex-direction:column;
  gap:1.4rem;border-bottom:2px solid var(--linie-hell)}
figure.stimme blockquote{font-family:'Literata',Georgia,serif;font-size:1.08rem;line-height:1.58;
  color:var(--sepia);flex:1}
figure.stimme figcaption{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ton);line-height:1.6}
.namenskasten{background:rgba(123,93,74,.09);border-left:2px solid var(--ton);padding:1.6rem 1.8rem;
  max-width:62ch;color:var(--text-hell);font-size:.99rem;line-height:1.62}
.namenskasten strong{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ton);margin-bottom:.6rem;font-weight:500}
.zuweiser{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;max-width:64rem}
figure.fach{border-top:1px solid var(--linie-hell);padding-top:1.6rem}
figure.fach blockquote{font-family:'Literata',Georgia,serif;font-size:1.02rem;line-height:1.6;
  color:var(--text-hell);margin-bottom:1rem}
figure.fach figcaption{font-size:.88rem;color:var(--text-leise);line-height:1.55}
figure.fach figcaption .wer{display:block;font-weight:500;color:var(--sepia)}
@media(max-width:900px){
  .stimmenraster{grid-template-columns:1fr;gap:1rem;margin-bottom:2.2rem}
  .zuweiser{grid-template-columns:1fr;gap:2rem}
  figure.stimme{padding:1.8rem 1.6rem}
}