/* MIRAN DRIVE — Gestaltungsebene. Farben und Masse kommen aus tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--lesetext);font-size:var(--text-l);line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{
  font-family:var(--anzeige);font-style:normal;font-weight:600;
  line-height:1.1;letter-spacing:-.012em;margin:0;
  overflow-wrap:anywhere;min-width:0;
}
/* Bei grossen Graden traegt die Serife sich selbst; weniger Gewicht wirkt
   ruhiger und teurer als ein fetter Schnitt. */
.h-gross,.hero h1,.seitenkopf h1{font-weight:500;letter-spacing:-.018em;line-height:1.04}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}
::selection{background:var(--indigo);color:#fff}

.breite{width:min(100% - 2.5rem, var(--breite));margin-inline:auto}
.eng{width:min(100% - 2.5rem, 820px);margin-inline:auto}
@media (max-width:520px){.breite,.eng{width:calc(100% - 2rem)}}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nacht);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--rund-s) 0;
}
.sprung:focus{left:0}

/* ---------- Kopfleiste (Utility) ---------- */
.leiste{background:var(--papier);border-bottom:1px solid var(--linie);font-size:var(--text-s)}
.leiste__reihe{
  display:flex;align-items:center;gap:var(--raum-5);
  min-height:56px;padding-block:.45rem;flex-wrap:wrap;
}
.leiste__zeit{color:var(--grau);display:flex;align-items:center;gap:.5rem}
.leiste__punkt{width:7px;height:7px;border-radius:50%;background:var(--indigo);flex:none}
.leiste__luecke{flex:1 1 2rem}
.leiste__kontakt{
  font-family:var(--ui);font-weight:700;font-size:1.05rem;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
}
.leiste__kontakt:hover{color:var(--indigo)}
.leiste__platz{color:var(--grau-hell)}
.leiste__ikonen{display:flex;gap:.4rem}
.rundknopf{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand);color:var(--tinte);flex:none;
  transition:background var(--dauer-s) var(--weich-aus),color var(--dauer-s) var(--weich-aus);
}
.rundknopf svg{width:17px;height:17px}
.rundknopf:hover{background:var(--indigo);color:#fff}
@media (max-width:860px){
  .leiste__zeit{order:3;flex-basis:100%}
  .leiste__luecke{display:none}
}

/* ---------- Navigationskarte ---------- */
.kopf{position:relative;z-index:60}
.kopf__karte{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-l);
  box-shadow:var(--schatten-2);
  display:flex;align-items:center;gap:var(--raum-6);
  padding:.7rem .8rem .7rem 1.3rem;margin-top:var(--raum-6);
}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.marke__zeichen{width:38px;height:38px;flex:none}
.marke__text b{
  display:block;font-family:var(--ui);font-weight:700;font-size:1.08rem;
  letter-spacing:.02em;line-height:1;
}
.marke__text i{
  display:block;font-style:normal;font-size:.68rem;color:var(--grau);
  letter-spacing:.14em;text-transform:uppercase;margin-top:.22rem;
}
.nav{display:flex;align-items:center;gap:.15rem;flex:1;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;
  padding:.55rem .7rem;border-radius:var(--rund-s);white-space:nowrap;
  transition:background var(--dauer-s) var(--weich-aus),color var(--dauer-s) var(--weich-aus);
}
.nav a:hover{background:var(--sand)}
.nav a[aria-current="page"]{color:var(--indigo);font-weight:600}
.kopf__knopf{flex:none}
.klapp{position:relative}
.klapp__knopf{
  display:flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-size:.95rem;font-weight:500;padding:.55rem .7rem;border-radius:var(--rund-s);
}
.klapp__knopf:hover{background:var(--sand)}
.klapp__knopf svg{width:11px;height:11px;transition:transform var(--dauer-m) var(--weich-aus)}
.klapp[data-offen="ja"] .klapp__knopf svg{transform:rotate(180deg)}
.klapp__feld{
  position:absolute;top:calc(100% + .5rem);left:0;min-width:250px;
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-m);
  box-shadow:var(--schatten-2);padding:.4rem;display:none;
}
.klapp[data-offen="ja"] .klapp__feld{display:block}
.klapp__feld a{display:block;padding:.55rem .7rem;font-size:.93rem}

.burger{
  display:none;width:44px;height:44px;border:1px solid var(--linie);background:var(--papier);
  border-radius:var(--rund-s);cursor:pointer;place-items:center;flex:none;
}
.burger span{display:block;width:18px;height:2px;background:var(--tinte);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--tinte);
}
.burger span::before{top:-6px}.burger span::after{top:6px}

@media (max-width:1080px){
  .burger{display:grid}
  .nav{
    position:absolute;top:calc(100% + .6rem);left:0;right:0;
    background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-l);
    box-shadow:var(--schatten-2);padding:.6rem;flex-direction:column;align-items:stretch;
    display:none;
  }
  .kopf__karte[data-nav="offen"] .nav{display:flex}
  .nav a,.klapp__knopf{padding:.75rem .8rem;font-size:1rem;width:100%}
  .klapp__feld{position:static;box-shadow:none;border:0;border-left:2px solid var(--linie);
    border-radius:0;margin-left:.8rem;min-width:0}
  .kopf__karte .kopf__knopf{display:none}
}

/* ---------- Knoepfe ---------- */
.knopf{
  --k-bg:var(--indigo);--k-fg:#fff;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--k-bg);color:var(--k-fg);text-decoration:none;
  font-family:var(--ui);font-weight:600;font-size:.98rem;letter-spacing:-.008em;
  padding:.85rem 1.35rem;border-radius:var(--rund-voll);border:0;cursor:pointer;
  white-space:nowrap;
  transition:transform var(--dauer-s) var(--weich-aus),
             background var(--dauer-s) var(--weich-aus),
             box-shadow var(--dauer-m) var(--weich-aus);
}
.knopf:hover{background:var(--indigo-tief);transform:translateY(-2px);box-shadow:var(--schatten-2)}
.knopf:active{transform:translateY(0)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.5;pointer-events:none}
.knopf--still{--k-bg:transparent;--k-fg:var(--tinte);border:1.5px solid var(--linie)}
.knopf--still:hover{background:var(--sand);border-color:var(--tinte)}
.knopf--hell{--k-bg:#fff;--k-fg:var(--nacht)}
.knopf--hell:hover{background:var(--sand)}
.knopf--gross{padding:1.05rem 1.1rem 1.05rem 1.7rem;font-size:1.06rem}

.pfeil{
  width:36px;height:36px;border-radius:50%;background:#fff;color:var(--indigo);
  display:grid;place-items:center;flex:none;
  transition:transform var(--dauer-m) var(--weich-aus);
}
.pfeil svg{width:15px;height:15px}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf--hell .pfeil{background:var(--indigo);color:#fff}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:var(--raum-24)}
.abschnitt--sand{background:var(--sand)}
.abschnitt--hauch{background:var(--indigo-hauch)}
.abschnitt--eng{padding-block:var(--raum-16)}

.kopfzeile{max-width:42rem;margin-bottom:var(--raum-12)}
.kopfzeile--breit{max-width:56rem}
.strich-titel{display:flex;align-items:baseline;gap:.9rem}
.strich-titel::before{
  content:"";width:26px;height:3px;background:var(--indigo);flex:none;
  transform:translateY(-.35em);border-radius:2px;
}
.h-gross{font-size:var(--text-4xl)}
.h-mittel{font-size:var(--text-3xl)}
.h-klein{font-size:var(--text-2xl)}
.vorlauf{color:var(--grau);font-size:var(--text-l);margin-top:var(--raum-4);max-width:38rem}
.abschnitt--nacht .vorlauf{color:var(--grau-hell)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:var(--raum-16);padding-bottom:var(--raum-12);overflow:clip}
.hero__grund{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,var(--papier) 0%,var(--sand) 62%,var(--sand) 100%);
}
.hero__kreis{
  position:absolute;z-index:-1;border-radius:50%;
  width:min(78vw,760px);aspect-ratio:1;
  right:-14vw;top:6%;
  background:radial-gradient(circle at 34% 30%,var(--sand-2),var(--sand-2) 55%,transparent 72%);
}
.hero__bogen{position:absolute;z-index:-1;right:-6vw;top:2%;width:min(70vw,680px);opacity:.6}
.hero__raster{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:var(--raum-10);align-items:center;
}
.hero h1{font-size:var(--anzeige-m);letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--indigo)}
.hero__unter{margin-top:var(--raum-5);font-size:var(--text-xl);color:var(--tinte);max-width:31rem;line-height:1.45}
.marken{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--raum-6)}
.marke-chip{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--rund-voll);
  padding:.42rem .85rem;font-size:.85rem;font-weight:600;color:var(--tinte);
  box-shadow:var(--schatten-1);
}
.marke-chip svg{width:14px;height:14px;color:var(--indigo);flex:none}
.hero__punkte{display:flex;flex-wrap:wrap;gap:var(--raum-6);margin-top:var(--raum-6)}
.hero__punkte li{
  position:relative;padding-left:1.1rem;font-size:var(--text-m);
  max-width:15rem;line-height:1.45;color:var(--tinte);
}
.hero__punkte li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--indigo);border-radius:1px;
}
.hero__tat{margin-top:var(--raum-8);display:flex;flex-wrap:wrap;gap:var(--raum-3);align-items:center}
.hero__bild{position:relative}
.hero__bild img{
  width:100%;border-radius:var(--rund-xl);
  filter:drop-shadow(0 34px 44px oklch(15.6% .014 268 / .22));
}

/* Vertrauensreihe */
.stuetzen{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--raum-8);
  margin-top:var(--raum-16);padding-top:var(--raum-8);
}
.stuetze{display:flex;gap:var(--raum-4);align-items:flex-start;padding-left:var(--raum-5);
  border-left:1px solid var(--sand-2)}
.stuetze__ikon{width:30px;height:30px;color:var(--indigo);flex:none}
.stuetze b{display:block;font-family:var(--anzeige);font-weight:700;font-size:1.02rem;line-height:1.25}
.stuetze span{display:block;color:var(--grau);font-size:var(--text-s);margin-top:.25rem;line-height:1.5}

/* ---------- Leistungskarten ---------- */
.karten{display:grid;gap:var(--raum-6);grid-template-columns:repeat(3,minmax(0,1fr))}
.karten--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.karte{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-l);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dauer-m) var(--weich-aus),
             box-shadow var(--dauer-m) var(--weich-aus),
             border-color var(--dauer-m) var(--weich-aus);
}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-2);border-color:var(--indigo)}
.karte__bild{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.karte__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--dauer-l) var(--weich-aus)}
.karte:hover .karte__bild img{transform:scale(1.045)}
.karte__leib{padding:var(--raum-6);display:flex;flex-direction:column;gap:.6rem;flex:1}
.karte__leib h3{font-size:var(--text-xl)}
.karte__leib p{color:var(--grau);font-size:var(--text-m);line-height:1.6}
.karte__fuss{margin-top:auto;padding-top:var(--raum-4)}
.textlink{
  display:inline-flex;align-items:center;gap:.45rem;color:var(--indigo);
  font-weight:600;font-size:.95rem;text-decoration:none;
}
.textlink svg{width:14px;height:14px;transition:transform var(--dauer-s) var(--weich-aus)}
.textlink:hover{text-decoration:underline;text-underline-offset:4px}
.textlink:hover svg{transform:translateX(3px)}

/* ---------- Ablaufband ---------- */
.abschnitt--indigo{background:var(--indigo);color:#fff}
.abschnitt--indigo .vorlauf{color:oklch(93% .04 278)}
.abschnitt--indigo .strich-titel::before{background:#fff}
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--raum-8)}
.schritt{padding-top:var(--raum-5);border-top:2px solid oklch(100% 0 0 / .4)}
.schritt__nr{
  font-family:var(--ui);font-weight:800;font-size:.82rem;letter-spacing:.16em;
  color:oklch(100% 0 0 / .72);display:block;margin-bottom:var(--raum-4);
}
.schritt h3{font-size:var(--text-xl);color:#fff}
.schritt p{margin-top:.6rem;color:oklch(94% .03 278);font-size:var(--text-m);line-height:1.6}

/* ---------- Dunkles Band ---------- */
.band{position:relative;background:var(--nacht);color:#fff;overflow:clip;
  border-radius:var(--rund-xl);padding:var(--raum-16) var(--raum-12)}
.band__bild{position:absolute;inset:0;z-index:0}
.band__bild img{width:100%;height:100%;object-fit:cover;opacity:.4}
.band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--nacht) 8%,oklch(15.6% .014 268 / .82) 58%,oklch(15.6% .014 268 / .55) 100%);
}
.band__leib{position:relative;z-index:2;display:flex;gap:var(--raum-10);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.band__leib h2{font-size:var(--text-3xl);color:#fff;max-width:22ch}
.band__leib p{color:var(--grau-hell);margin-top:var(--raum-4);max-width:38ch}
.band__tat{display:flex;gap:var(--raum-3);align-items:center;flex-wrap:wrap}

/* ---------- Bild + Text ---------- */
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-12);align-items:center}
.paar--kehr .paar__bild{order:2}
.paar__bild img{width:100%;border-radius:var(--rund-l);box-shadow:var(--schatten-2)}
.paar__text h2{margin-bottom:var(--raum-5)}

/* Merkmalsliste mit Haken */
.merkmale{display:flex;flex-direction:column;gap:.1rem;margin-top:var(--raum-6)}
.merkmal{display:flex;align-items:center;gap:var(--raum-4);
  padding:.95rem 0;border-bottom:1px solid var(--linie)}
.merkmal:last-child{border-bottom:0}
.merkmal__haken{
  width:22px;height:22px;border-radius:6px;background:var(--indigo-hauch);color:var(--indigo);
  display:grid;place-items:center;flex:none;
}
.merkmal__haken svg{width:12px;height:12px}
.merkmal__text{flex:1;min-width:0;font-size:var(--text-m)}
.merkmal__wert{font-family:var(--ui);font-weight:700;color:var(--indigo);
  white-space:nowrap;font-size:var(--text-m)}
.merkmal__wert--still{color:var(--grau);font-weight:600}

.tafel{background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-l);
  padding:var(--raum-8) var(--raum-8);box-shadow:var(--schatten-1)}

/* ---------- Ziele mit Farbfuss ---------- */
.ziele{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--raum-5)}
.ziel{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-m);
  padding:var(--raum-6);position:relative;overflow:hidden;
  transition:transform var(--dauer-m) var(--weich-aus),box-shadow var(--dauer-m) var(--weich-aus);
}
.ziel:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}
.ziel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--f,var(--indigo))}
.ziel__ikon{width:22px;height:22px;color:var(--grau);margin-bottom:var(--raum-4)}
.ziel h3{font-size:var(--text-l);line-height:1.25}
.ziel p{color:var(--grau);font-size:var(--text-s);margin-top:.5rem;line-height:1.55}
.ziel dl{margin:var(--raum-4) 0 0;font-size:var(--text-s);color:var(--grau)}
.ziel dt{font-weight:600;color:var(--tinte)}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-4) var(--raum-8)}
.faq details{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-m);
  padding:0 var(--raum-6);height:max-content;
}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:var(--raum-4);align-items:flex-start;
  padding:var(--raum-5) 0;font-family:var(--anzeige);font-weight:600;font-size:var(--text-l);
  line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:20px;height:20px;flex:none;margin-left:auto;margin-top:.15rem;
  background:currentColor;
  -webkit-mask:var(--plus) center/contain no-repeat;mask:var(--plus) center/contain no-repeat;
  color:var(--indigo);transition:transform var(--dauer-m) var(--weich-aus);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--raum-6);color:var(--grau);font-size:var(--text-m);line-height:1.65}
:root{--plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 3h2v14H9z'/%3E%3Cpath d='M3 9h14v2H3z'/%3E%3C/svg%3E")}

/* ---------- Kontakt ---------- */
.kontaktkarte{
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--rund-xl);
  box-shadow:var(--schatten-2);padding:var(--raum-12);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--raum-10);
}
.kontaktkarte h2{margin-bottom:var(--raum-4)}
.kontaktzeile{display:flex;flex-wrap:wrap;gap:var(--raum-4);align-items:center;margin-top:var(--raum-8)}
.kontaktliste{display:flex;flex-direction:column;gap:var(--raum-5);margin-top:var(--raum-6)}
.kontaktliste div{display:flex;gap:var(--raum-4);align-items:flex-start}
.kontaktliste svg{width:20px;height:20px;color:var(--indigo);flex:none;margin-top:.2rem}
.kontaktliste b{display:block;font-family:var(--anzeige);font-size:1rem}
.kontaktliste span,.kontaktliste a{color:var(--grau);font-size:var(--text-m);text-decoration:none}
.kontaktliste a:hover{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.stadtplan{border-radius:var(--rund-l);overflow:hidden;background:var(--sand);
  border:1px solid var(--linie);min-height:280px;position:relative}
.stadtplan svg{width:100%;height:100%;display:block}

/* ---------- Formular ---------- */
.formular{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-5)}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld--voll{grid-column:1/-1}
.feld label{font-size:var(--text-s);font-weight:600}
.feld label .pflicht{color:var(--indigo)}
/* Achtung: NICHT auf jeden span im Label anwenden - sonst faerbt sich auch
   der Hinweis "(optional)" und der ganze Einwilligungstext indigo. */
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:var(--text-m);color:var(--tinte);background:var(--papier);
  border:1.5px solid var(--linie);border-radius:var(--rund-s);
  padding:.8rem .9rem;width:100%;
  transition:border-color var(--dauer-s) var(--weich-aus),box-shadow var(--dauer-s) var(--weich-aus);
}
.feld textarea{min-height:120px;resize:vertical}
.feld input:hover,.feld select:hover,.feld textarea:hover{border-color:var(--grau-hell)}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-hauch);
}
.feld input:disabled,.feld textarea:disabled{background:var(--sand);color:var(--grau);cursor:not-allowed}
.feld[data-fehler="ja"] input,.feld[data-fehler="ja"] select,.feld[data-fehler="ja"] textarea{
  border-color:oklch(52% .19 25)}
.feld__hinweis{font-size:var(--text-xs);color:var(--grau)}
.feld__fehler{font-size:var(--text-xs);color:oklch(46% .19 25);display:none}
.feld[data-fehler="ja"] .feld__fehler{display:block}
.formular__fuss{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--raum-5);
  align-items:center;justify-content:space-between;margin-top:var(--raum-2)}
.zustimmung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;
  align-items:start;font-size:var(--text-s);color:var(--grau)}
.zustimmung input{width:19px;height:19px;margin-top:.15rem;accent-color:var(--indigo)}
.meldung{
  grid-column:1/-1;border-radius:var(--rund-m);padding:var(--raum-5);
  font-size:var(--text-m);display:none;
}
.meldung[data-art="gut"]{display:block;background:var(--indigo-hauch);
  border:1px solid var(--indigo);color:var(--indigo-tief)}
.meldung[data-art="schlecht"]{display:block;background:oklch(96% .04 25);
  border:1px solid oklch(60% .18 25);color:oklch(42% .18 25)}

/* ---------- Zeitachse ---------- */
.abschnitt--nacht{background:var(--nacht);color:#fff}
.abschnitt--nacht h2,.abschnitt--nacht h3{color:#fff}
.abschnitt--nacht .strich-titel::before{background:var(--indigo-hell)}
.achse{position:relative;max-width:760px;margin-inline:auto;padding-left:var(--raum-12)}
.achse::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;
  background:var(--linie-dunkel)}
.achse li{position:relative;padding-bottom:var(--raum-10)}
.achse li:last-child{padding-bottom:0}
.achse__nr{
  position:absolute;left:calc(-1 * var(--raum-12));top:0;
  width:40px;height:40px;border-radius:50%;background:var(--indigo);color:#fff;
  display:grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:1rem;
}
.achse h3{font-size:var(--text-xl)}
.achse p{color:var(--grau-hell);margin-top:.5rem;line-height:1.65}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);color:var(--grau-hell);position:relative;overflow:clip}
.fuss__oben{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--raum-10);padding-block:var(--raum-16) var(--raum-12)}
.fuss .marke__text b{color:#fff}
.fuss .marke__text i{color:var(--grau-fuss)}
.fuss__wort{margin-top:var(--raum-5);max-width:30ch;font-size:var(--text-m);line-height:1.65}
.fuss h4{font-family:var(--ui);color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin-bottom:var(--raum-5)}
.fuss li{margin-bottom:.7rem}
.fuss a{color:var(--grau-hell);text-decoration:none;font-size:var(--text-m)}
.fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.fuss__unten{border-top:1px solid var(--linie-dunkel);padding-block:var(--raum-6);
  display:flex;flex-wrap:wrap;gap:var(--raum-5);justify-content:space-between;
  font-size:var(--text-s)}
.fuss__unten p{color:var(--grau-fuss)}

/* ---------- Einblenden ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .zeig{opacity:0;transform:translateY(18px);
    transition:opacity var(--dauer-l) var(--weich-aus),transform var(--dauer-l) var(--weich-aus)}
  .js .zeig[data-da="ja"]{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ---------- Kleinere Schirme ---------- */
@media (max-width:1000px){
  .hero__raster{grid-template-columns:minmax(0,1fr);gap:var(--raum-10)}
  .hero__bild{max-width:640px}
  .karten,.ziele{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-6)}
  .paar,.kontaktkarte,.faq{grid-template-columns:minmax(0,1fr);gap:var(--raum-8)}
  .paar--kehr .paar__bild{order:0}
  .kontaktkarte{padding:var(--raum-8)}
  .stuetzen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--raum-5)}
  .band{padding:var(--raum-12) var(--raum-8)}
}
@media (max-width:720px){
  .stuetzen{grid-template-columns:minmax(0,1fr);gap:var(--raum-5);margin-top:var(--raum-12)}
  .karten,.karten--zwei,.ziele,.formular{grid-template-columns:minmax(0,1fr)}
  .schritte{grid-template-columns:minmax(0,1fr)}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--raum-8)}
  .band{border-radius:var(--rund-l);padding:var(--raum-10) var(--raum-6)}
  /* Der Sandkreis schnitt auf schmalen Schirmen quer durch den Fließtext. */
  .hero__kreis{width:min(86vw,420px);right:-34vw;top:-2%}
  .hero__bogen{display:none}
  .hero__punkte{gap:var(--raum-4)}
  .hero__punkte li{max-width:none;flex-basis:100%}
}
@media (max-width:480px){
  .fuss__oben{grid-template-columns:minmax(0,1fr)}
  .kopf__karte{padding:.6rem .6rem .6rem 1rem;border-radius:var(--rund-m)}
  .hero__tat .knopf,.band__tat .knopf,.formular .knopf,
  .paar__text > div > .knopf,.kontaktzeile .knopf{width:100%;justify-content:center}
  .achse{padding-left:56px}
  .achse__nr{left:-56px;width:36px;height:36px}
  .achse::before{left:17px}
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf{background:var(--sand);padding-block:var(--raum-16);position:relative;overflow:clip}
.seitenkopf::after{
  content:"";position:absolute;right:-8%;top:-40%;width:min(60vw,520px);aspect-ratio:1;
  border-radius:50%;background:var(--sand-2);z-index:0;
}
.seitenkopf > *{position:relative;z-index:1}
.seitenkopf h1{font-size:var(--anzeige-s);max-width:18ch}
.seitenkopf .vorlauf{max-width:44ch;font-size:var(--text-xl);color:var(--tinte);line-height:1.5}
.weg{font-size:var(--text-s);color:var(--grau);margin-bottom:var(--raum-5);
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.weg a{text-decoration:none}
.weg a:hover{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.weg span{color:var(--grau-hell)}
.anker{scroll-margin-top:110px}
.paar + .paar{margin-top:var(--raum-24)}
.marker{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.1rem;height:2.1rem;padding-inline:.5rem;border-radius:var(--rund-s);
  background:var(--indigo-hauch);color:var(--indigo);
  font-family:var(--ui);font-weight:800;font-size:.9rem;margin-bottom:var(--raum-4);
  /* .karte__leib ist eine Flex-Spalte; ohne das hier zieht sich die
     Kennzeichnung ueber die volle Kartenbreite. */
  align-self:flex-start;
}
.punkte{display:flex;flex-direction:column;gap:var(--raum-4);margin-top:var(--raum-6)}
.punkte li{position:relative;padding-left:1.9rem;color:var(--grau);line-height:1.6}
.punkte li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:3px;
  border:2.5px solid var(--indigo);
}
.punkte b{color:var(--tinte);font-weight:600}
.notiz{
  border-left:3px solid var(--indigo);background:var(--indigo-hauch);
  padding:var(--raum-5) var(--raum-6);border-radius:0 var(--rund-m) var(--rund-m) 0;
  color:var(--tinte);font-size:var(--text-m);line-height:1.6;margin-top:var(--raum-8);
}
.zwei-spalten{columns:2;column-gap:var(--raum-10)}
@media (max-width:820px){.zwei-spalten{columns:1}}

/* Markenzeichen im dunklen Fuss sichtbar halten: die schwarze Kachel
   verschwindet sonst im Untergrund. */
.fuss .marke__zeichen rect{fill:oklch(24% .016 268)}

/* Beschreibungslisten in den Zielkarten: der Vorgabewert von <dd> ruecht
   den Wert um 40 px ein und reisst ihn vom Begriff los. */
.ziel dl{display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline}
.ziel dd{margin:0;color:var(--grau)}
.zustimmung a{color:var(--indigo)}

/* Merkmalzeilen auf sehr schmalen Schirmen umbrechen. Der Wert steht sonst mit
   white-space:nowrap ueber dem rechten Rand und wird abgeschnitten. */
@media (max-width:560px){
  .merkmal{align-items:flex-start;flex-wrap:wrap;gap:var(--raum-2) var(--raum-4)}
  .merkmal__text{flex:1 1 100%;font-weight:600}
  .merkmal__wert{white-space:normal;flex:1 1 100%;
    padding-left:calc(22px + var(--raum-4));font-weight:600}
}

/* Halteplatz fuer die noch fehlende Telefonnummer. --grau-hell reicht auf
   Weiss nur fuer 2,6:1, deshalb der dunklere Ton. */
.leiste__platz{color:var(--grau);font-weight:500;font-family:var(--ui)}
.fuss__platz{color:var(--grau-fuss);font-size:var(--text-m)}

/* Kopfleiste auf schmalen Schirmen: seit dem Telefon-Halteplatz stehen dort zwei
   Eintraege nebeneinander. Mit white-space:nowrap laufen sie sonst aus dem Bild. */
@media (max-width:620px){
  .leiste__ikonen{flex-wrap:wrap;gap:.1rem .9rem;min-width:0;margin-right:.4rem}
  .leiste__kontakt{white-space:normal;overflow-wrap:anywhere;font-size:.95rem}
  .leiste__reihe{gap:var(--raum-3)}
}