/* ==================================================================
   Bolten Health Relations, Fassung 2
   Aenderungen nach dem Feedback vom 08.08.2026:
   runde Formen, Leistungen als Bildkarten, Nutzen als Info-Boxen,
   Hover ueberall, Scroll-Reveals, deutlich mehr Bild, scanbare
   Kernaussagen. Grundhaltung bleibt hell und ruhig, weil Christine
   einen dunklen Entwurf ausdruecklich abgelehnt hat.
   ================================================================== */
:root{
  --weiss:#ffffff;
  --sand:#faf6f0;
  --sand-tief:#f3ebe0;
  --gold:#bf7e3e;
  --gold-warm:#d99a52;
  --gold-hell:#e8c9a0;
  --petrol:#2e3a38;
  --petrol-weich:#5f6d6a;
  --linie:rgba(46,58,56,.10);
  --schatten:0 18px 50px rgba(46,58,56,.09);
  --schatten-hoch:0 26px 70px rgba(191,126,62,.20);
  --r-gross:26px;
  --r-mittel:20px;
  --rand:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Sicherheitsnetz gegen seitliches Verschieben am Handy.
   overflow-x am body allein reicht NICHT — dann scrollt html weiter und die Seite
   laesst sich trotzdem hin und her ziehen. Deshalb beides, und "clip" statt
   "hidden": clip erzeugt keinen Scroll-Container und laesst den klebenden Kopf
   (position:sticky) funktionieren, hidden wuerde ihn brechen. */
html{overflow-x:clip}
body{
  background:var(--weiss);color:var(--petrol);
  font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
  overflow-x:clip;max-width:100%;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Typografie ------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  padding:.4rem .95rem;border:1px solid var(--gold-hell);border-radius:999px;
  background:rgba(232,201,160,.14);
}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:500;
  letter-spacing:.04em;line-height:1.24;color:var(--petrol)}
h1{font-size:clamp(1.55rem,2.45vw,1.95rem);text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(1.42rem,2.7vw,2rem);text-transform:uppercase;letter-spacing:.025em}
h3{font-size:1.1rem;font-weight:500;letter-spacing:0}
h4{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
p{margin-bottom:1.05rem}
p:last-child{margin-bottom:0}
strong{font-weight:600}
.lead{font-size:1.14rem;color:var(--petrol-weich)}
/* Zentriert heisst: der Block selbst sitzt in der Mitte, nicht nur sein Text.
   Ohne die auto-Raender klebte ein .schmal.mitte-Block (max-width 730px) links
   am Raster, waehrend der Text darin zentriert war — das sieht schief aus, und
   man sieht lange nicht, warum. */
.mitte{text-align:center;margin-left:auto;margin-right:auto}
.mitte .lead{max-width:38em;margin-left:auto;margin-right:auto}

/* Raster ----------------------------------------------------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:730px}
section{padding:104px 0}
.sand{background:var(--sand)}

/* Knoepfe: rund, mit Fuell-Effekt beim Hovern --------------------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Outfit',sans-serif;font-size:.78rem;letter-spacing:.13em;
  /* line-height:1 ist noetig: Der Fliesstext vererbt 1.72, dadurch sass die
     Grossbuchstaben-Zeile sichtbar zu tief im Knopf. */
  line-height:1;
  text-transform:uppercase;text-decoration:none;
  padding:.95rem 2rem;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold);background:transparent;
  position:relative;overflow:hidden;transition:color .35s,box-shadow .35s,transform .35s;
}
.knopf::before{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:-1;
}
.knopf:hover{color:var(--weiss);transform:translateY(-2px);box-shadow:var(--schatten-hoch)}
.knopf:hover::before{transform:scaleX(1)}
.knopf.voll{background:var(--gold);color:var(--weiss);border-color:var(--gold)}
.knopf.voll::before{background:var(--petrol)}
.knopf.voll:hover{border-color:var(--petrol)}
.knopf .pfeil{transition:transform .35s}
.knopf:hover .pfeil{transform:translateX(4px)}
.knopf:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

/* Kopfzeile -------------------------------------------------------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:13px var(--rand)}
.logo{display:flex;align-items:center;gap:.8rem;text-decoration:none}
/* Die Logodatei enthaelt Symbol und Schriftzug uebereinander. In
   Kopfzeilenhoehe waere der Schriftzug unleserlich, deshalb Ausschnitt
   auf das Symbol. multiply loescht den Creme-Hintergrund optisch. */
.logo-zeichen{width:48px;height:48px;overflow:hidden;flex:none;position:relative;
  border-radius:50%;transition:transform .4s}
.logo-zeichen img{position:absolute;width:210%;left:-55%;top:-14%;max-width:none;mix-blend-mode:multiply}
.logo:hover .logo-zeichen{transform:rotate(-6deg) scale(1.06)}
.logo-name b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:.9rem;
  letter-spacing:.2em;text-transform:uppercase}
.logo-name span{display:block;font-family:'Jost',sans-serif;font-size:.58rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold)}
nav{display:flex;align-items:center;gap:2rem}
/* Der Hamburger erscheint erst unter 760px — siehe Media Query weiter unten. */
.menue-knopf{display:none;flex-direction:column;align-items:center;justify-content:center;
  flex:none;gap:5px;
  width:44px;height:44px;padding:0;border:1px solid var(--gold-hell);border-radius:12px;
  background:transparent;cursor:pointer;z-index:75;position:relative}
.menue-knopf span{display:block;width:19px;height:1.5px;background:var(--gold);
  border-radius:2px;transition:transform .3s,opacity .2s}
.menue-knopf[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-knopf[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menue-knopf:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.menue-schleier{display:none}
/* Das X und die Überschrift im Panel gibt es nur am Handy. */
.menue-zu,.menue-titel,.menue-aktion{display:none}
nav a{font-family:'Outfit',sans-serif;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--petrol-weich);
  position:relative;padding:.3rem 0;transition:color .3s}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s}
nav a:hover{color:var(--gold)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* Hero ------------------------------------------------------------- */
/* overflow:hidden ist Pflicht: Der Farbschimmer unten ragt bewusst ueber den rechten
   Rand hinaus. Ohne Abschneiden zieht er die ganze Seite auf 550px auf, und am Handy
   laesst sich alles seitlich verschieben. */
.hero{padding:72px 0 90px;position:relative;overflow:hidden}
/* Weicher Farbschimmer im Hintergrund, damit die Seite oben nicht
   wie ein leeres Blatt Papier wirkt. */
.hero::before{
  content:"";position:absolute;top:-180px;right:-160px;width:720px;height:720px;
  background:radial-gradient(circle,rgba(217,154,82,.16) 0%,rgba(217,154,82,0) 68%);
  pointer-events:none;
}
.hero-raster{display:grid;grid-template-columns:1.32fr .68fr;gap:3.4rem;align-items:center;position:relative}
.hero h1{margin:1.3rem 0 .8rem}
.hero .h1-zusatz{font-family:'Outfit',sans-serif;font-weight:400;
  font-size:clamp(.92rem,1.3vw,1.08rem);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.7rem}
.hero .lead{max-width:33em}
.hero-aktion{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}

/* Hero-Punkte: schlichte Liste, ein kurzer Satz je Zeile. Bewusst ohne
   Kacheln und ohne Zwischenueberschriften, damit man sie im Vorbeigehen
   liest statt sie zu lesen. */
.hero-punkte{list-style:none;margin:1.6rem 0 .4rem;display:grid;gap:.85rem}
.hero-punkte li{position:relative;padding-left:2rem;font-size:1rem;color:var(--petrol)}
.hero-punkte li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;border-radius:50%;
  border:3px solid var(--gold);background:var(--weiss);
}

.hero-bild{position:relative}
.hero-bild .rahmen{
  border-radius:var(--r-gross) var(--r-gross) 190px 190px;overflow:hidden;
  box-shadow:var(--schatten);
}
.hero-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 15%;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.hero-bild:hover img{transform:scale(1.04)}
/* Freistehende Karte auf dem Bild: greift den wichtigsten Vorteil heraus */
.hero-karte{
  position:absolute;left:-46px;bottom:44px;background:var(--weiss);
  border-radius:var(--r-mittel);padding:1.15rem 1.5rem;box-shadow:var(--schatten);
  display:flex;align-items:center;gap:.9rem;max-width:280px;
}
.hero-karte .punkt{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 5px rgba(191,126,62,.16)}
.hero-karte span{font-family:'Outfit',sans-serif;font-size:.82rem;letter-spacing:.02em;
  line-height:1.45;color:var(--petrol)}

/* Kernaussagen-Band: das Erste, was beim Scannen haengen bleibt ---- */
.band{background:var(--petrol);padding:0}
.band-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.band-feld{background:var(--petrol);padding:2.3rem 1.8rem;transition:background .35s}
.band-feld:hover{background:#374542}
.band-feld b{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:1.42rem;
  letter-spacing:.03em;color:var(--gold-warm);margin-bottom:.4rem}
.band-feld span{font-size:.93rem;color:rgba(255,255,255,.72);line-height:1.5}

/* Wiedererkennen: Problem in den Worten der Zielgruppe ------------ */
.erkennen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3.2rem}
.erk{display:flex;gap:.95rem;background:var(--sand);border-radius:var(--r-mittel);
  padding:1.5rem 1.5rem;transition:transform .4s,box-shadow .4s,background .4s}
.erk:hover{transform:translateY(-5px);box-shadow:var(--schatten);background:var(--weiss)}
.erk .haken{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold);
  color:var(--weiss);display:flex;align-items:center;justify-content:center;
  font-size:.72rem;margin-top:.15rem}
.erk p{font-size:.96rem;color:var(--petrol-weich);margin:0}

/* Online-USP ------------------------------------------------------- */
.usp{position:relative;overflow:hidden}
.usp-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:4.5rem;align-items:center}
.usp-bild{border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--schatten)}
.usp-bild img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.usp-bild:hover img{transform:scale(1.05)}
.fuer-wen{list-style:none;margin-top:1.8rem}
.fuer-wen li{display:flex;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--linie);
  font-size:.98rem}
.fuer-wen li:last-child{border-bottom:none}
.fuer-wen .zahl{font-family:'Outfit',sans-serif;font-size:.72rem;letter-spacing:.1em;
  color:var(--gold);flex:none;padding-top:.2rem}

/* Nutzen-Bloecke mit grossem Bild, Seiten wechseln sich ab -------- */
.nutzen-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem;align-items:center}
.nutzen-block.gedreht{grid-template-columns:1.15fr .85fr}
.nutzen-block.gedreht .nutzen-bild{order:2}
.nutzen-bild{position:relative;border-radius:var(--r-gross);overflow:hidden;
  box-shadow:var(--schatten)}
.nutzen-bild img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.nutzen-bild:hover img{transform:scale(1.05)}

/* Einspaltig neben dem Bild. Zweispaltig wurde der Text so schmal,
   dass "Fuehrungskraefte werden entlastet" auf acht Zeilen umbrach. */
.boxen.eng{grid-template-columns:1fr;gap:1rem}
/* Icon links, Titel und Text rechts daneben, ohne Aenderung am HTML. */
.boxen.eng .box{padding:1.4rem 1.6rem;display:grid;
  grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start}
.boxen.eng .box .zeichen{grid-row:1/3;margin-bottom:0;width:40px;height:40px}
.boxen.eng .box h3,.boxen.eng .box p{grid-column:2}
.boxen.eng .box h3{font-size:1rem}
.boxen.eng .box p{font-size:.92rem}

/* Prozess als vertikale Zeitleiste -------------------------------- */
.timeline{position:relative;max-width:940px;margin:0 auto}
.tl-linie{position:absolute;left:27px;top:34px;width:2px;background:var(--sand-tief);
  height:calc(100% - 68px)}
/* Der goldene Balken waechst mit dem Scrollfortschritt der Leiste.
   Skaliert statt in der Hoehe animiert: Das laeuft bei jedem Scroll-Bild neu, und
   transform kostet dabei keine Layout-Neuberechnung. */
.tl-fortschritt{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .25s linear}
.schritt{position:relative;padding-left:86px;margin-bottom:2.4rem}
.schritt:last-child{margin-bottom:0}
.s-punkt{position:absolute;left:0;top:6px;width:56px;height:56px;border-radius:50%;
  background:var(--weiss);border:2px solid var(--sand-tief);display:flex;align-items:center;
  justify-content:center;font-family:'Outfit',sans-serif;font-size:1.1rem;color:var(--petrol-weich);
  transition:border-color .5s,color .5s,transform .5s,background .5s;z-index:2}
.schritt.sichtbar .s-punkt{border-color:var(--gold);color:var(--gold)}
.s-punkt.gold{background:var(--gold);border-color:var(--gold);color:var(--weiss)}
.schritt.sichtbar .s-punkt.gold{color:var(--weiss)}
.schritt:hover .s-punkt{transform:scale(1.07)}
.s-inhalt{display:grid;grid-template-columns:1.35fr .65fr;gap:1.8rem;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:1.7rem 1.8rem;transition:transform .4s,box-shadow .4s,border-color .4s}
.schritt:hover .s-inhalt{transform:translateY(-4px);box-shadow:var(--schatten);
  border-color:var(--gold-hell)}
.schritt.hervor .s-inhalt{border-color:var(--gold);background:linear-gradient(180deg,#fffaf3 0%,var(--weiss) 100%)}
.s-text h3{margin-bottom:.5rem}
.s-text p{font-size:.96rem;color:var(--petrol-weich)}
.s-marke{display:inline-block;font-family:'Outfit',sans-serif;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--weiss);background:var(--gold);
  padding:.3rem .8rem;border-radius:999px;margin-bottom:.6rem}
.s-bild{border-radius:var(--r-mittel);overflow:hidden;aspect-ratio:4/3}
.s-bild img{width:100%;height:100%;object-fit:cover;object-position:center 25%;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.schritt:hover .s-bild img{transform:scale(1.06)}

/* Karussell: eine Schiene, die zur Seite gleitet und einrastet.
   Bewusst KEIN Ein- und Ausblenden per display — das wirkte wie Blinken, gab keinen
   Hinweis auf weitere Karten und liess sich am Handy nicht wischen. So gleitet es,
   das Wischen kommt vom Browser selbst, und am Handy schaut die naechste Karte ein
   Stueck hervor: der beste Hinweis, dass es weitergeht. */
.karussell{position:relative}
.k-spur{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * 1.6rem) / 3);
  gap:1.6rem;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.4rem;
}
.k-spur::-webkit-scrollbar{display:none}
.k-folie{display:flex;flex-direction:column;scroll-snap-align:start;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:2rem 1.9rem 1.7rem;
  transition:border-color .35s,box-shadow .35s}
.k-folie:hover{border-color:var(--gold-hell);box-shadow:var(--schatten)}
.k-folie .anfuehrung{font-family:'Outfit',sans-serif;font-size:2.6rem;line-height:.7;
  color:var(--gold-hell);margin-bottom:.9rem}
.k-folie blockquote{font-size:1rem;line-height:1.6;color:var(--petrol);flex:1;margin-bottom:1.4rem}
.k-folie figcaption{display:flex;align-items:center;gap:.8rem;padding-top:1.1rem;
  border-top:1px solid var(--linie)}
.k-folie .kreis{width:38px;height:38px;border-radius:50%;background:var(--sand-tief);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:'Outfit',sans-serif;font-size:.74rem;color:var(--gold)}
.k-folie figcaption b{display:block;font-family:'Outfit',sans-serif;font-weight:400;
  font-size:.86rem;letter-spacing:.02em}
.k-folie figcaption span span{font-size:.82rem;color:var(--petrol-weich)}
.k-steuerung{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.5rem}
/* Die Pfeile sitzen seitlich neben den Karten statt nur unten — dort sieht man
   auf einen Blick, dass es weitergeht, ohne bis ans Ende scrollen zu muessen. */
.k-pfeil{position:absolute;top:34%;z-index:5;/* top wird vom Skript auf die Bildmitte gesetzt */
  width:44px;height:44px;border-radius:50%;border:1px solid var(--gold-hell);
  background:var(--weiss);color:var(--gold);font-size:1.05rem;cursor:pointer;
  box-shadow:0 6px 20px rgba(46,58,56,.16);
  transition:background .3s,color .3s,transform .3s,opacity .3s}
.k-pfeil[data-zurueck]{left:-21px}
.k-pfeil[data-vor]{right:-21px}
/* Am Ende der Schiene ausgrauen, damit niemand ins Leere klickt. */
.k-pfeil[disabled]{opacity:.25;cursor:default;box-shadow:none}
.k-pfeil[disabled]:hover{background:var(--weiss);color:var(--gold);transform:none}
.k-pfeil:hover{background:var(--gold);color:var(--weiss);transform:scale(1.06)}
.k-pfeil:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.k-punkte{display:flex;gap:.55rem}
/* Jeder Punkt belegt dieselbe Flaeche; gewechselt wird nur die Deckkraft zwischen
   dem kleinen Kreis und der goldenen Pille. Vorher wuchs die Breite von 8px auf 22px
   — das laesst bei jedem Wechsel die ganze Punktreihe neu umbrechen. */
.k-punkt{position:relative;width:22px;height:8px;padding:0;border:none;
  background:none;cursor:pointer}
.k-punkt::before{content:"";position:absolute;top:0;left:7px;width:8px;height:8px;
  border-radius:50%;background:var(--sand-tief);transition:opacity .3s}
.k-punkt::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:999px;background:var(--gold);opacity:0;transition:opacity .3s}
.k-punkt.an::before{opacity:0}
.k-punkt.an::after{opacity:1}

/* Drei Kernpunkte zu Christine ------------------------------------ */
.cb-punkte{list-style:none;margin:1.7rem 0 2rem;display:grid;gap:.85rem}
.cb-punkte li{position:relative;padding-left:2rem;font-size:1rem;color:var(--petrol)}
.cb-punkte li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;
  border-radius:50%;border:3px solid var(--gold);background:var(--weiss)}

/* Team-Karten ------------------------------------------------------ */
/* Nutzen die Karussell-Mechanik der Stimmen (.k-folie), brauchen aber ein
   randloses Foto oben — deshalb kein Innenabstand an der Folie selbst. */
.team-folie{padding:0;overflow:hidden}
/* Querformat statt Portraet: So passen Ueberschrift und Karten zusammen auf einen
   Bildschirm. Der Bildausschnitt sitzt weit oben, damit die Gesichter drin bleiben. */
.team-folie .karte-bild{position:relative;overflow:hidden;background:var(--sand-tief);
  aspect-ratio:4/3}
.team-folie .karte-bild img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block}
.team-folie .karte-text{padding:1.2rem 1.4rem 1.35rem;flex:1;display:flex;flex-direction:column}
.team-folie .karte-text h3{margin:0 0 .1rem;font-size:1.02rem}
.team-rolle{color:var(--gold);font-size:.82rem;letter-spacing:.03em;margin:0 0 .7rem}
.team-liste{list-style:none;margin:0 0 .85rem;padding:0;display:grid;gap:.3rem}
.team-liste li{position:relative;padding-left:.95rem;font-size:.87rem;line-height:1.38;
  color:var(--petrol-weich)}
.team-liste li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--gold-hell)}
.team-schwerpunkt{font-size:.87rem;line-height:1.4;margin:auto 0 0;padding-top:.7rem;
  border-top:1px solid var(--linie);color:var(--petrol)}
.team-schwerpunkt strong{font-family:'Outfit',sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.15rem}
/* Die vier Merkpunkte unter dem Karussell in zwei Spalten — untereinander
   kosteten sie mehr Hoehe als die Karten selbst. */
.team-merkmale{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 2rem;text-align:left;
  max-width:none;margin:2.2rem 0 0}
.team-merkmale li{font-size:.92rem}
@media(max-width:760px){ .team-merkmale{grid-template-columns:1fr} }

/* Info-Boxen fuer den Nutzen -------------------------------------- */
.nutzen-kopf{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:3.2rem}
.boxen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.box{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:2rem 1.9rem;transition:transform .4s,box-shadow .4s,border-color .4s;
}
.box:hover{transform:translateY(-6px);box-shadow:var(--schatten);border-color:var(--gold-hell)}
.box .zeichen{
  width:44px;height:44px;border-radius:50%;background:var(--sand-tief);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
  transition:background .4s,transform .4s;
}
.box:hover .zeichen{background:var(--gold);transform:scale(1.08)}
.box .zeichen svg{width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.box:hover .zeichen svg{stroke:var(--weiss)}
.box h3{margin-bottom:.5rem;font-size:1.04rem}
.box p{font-size:.95rem;color:var(--petrol-weich)}
.gruppe-titel{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.gruppe-titel h4{color:var(--gold);white-space:nowrap}
.gruppe-titel .strich{height:1px;background:var(--linie);flex:1}

/* Leistungskarten mit Bild ---------------------------------------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:3.4rem}
.karte{
  background:var(--weiss);border-radius:var(--r-gross);overflow:hidden;
  border:1px solid var(--linie);text-decoration:none;display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s;
}
.karte:hover{transform:translateY(-8px);box-shadow:var(--schatten);border-color:var(--gold-hell)}
.karte-bild{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--sand-tief)}
.karte-bild img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.karte:hover .karte-bild img{transform:scale(1.07)}
.karte-marke{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);
  font-family:'Outfit',sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);padding:.4rem .85rem;border-radius:999px;
}
.karte-text{padding:1.7rem 1.7rem 1.9rem;flex:1;display:flex;flex-direction:column}
.karte-text h3{margin-bottom:.6rem}
.karte-text p{font-size:.95rem;color:var(--petrol-weich);margin-bottom:1.3rem;flex:1}
.karte-mehr{font-family:'Outfit',sans-serif;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.45rem}
.karte-mehr .pfeil{transition:transform .35s}
.karte:hover .karte-mehr .pfeil{transform:translateX(5px)}

/* Systemgedanke ---------------------------------------------------- */
.system-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}
/* Die Grafik braucht eine eigene Flaeche, sonst verliert sie sich im
   Weissraum und wirkt wie ein vergessenes Detail. */
.konstellation{position:relative;max-width:430px;margin:0 auto;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--sand) 0%,var(--sand-tief) 100%);
  display:flex;align-items:center;justify-content:center;padding:14%}
.konstellation::after{content:"";position:absolute;inset:26px;border:1px solid rgba(191,126,62,.16);
  border-radius:50%}
.konstellation svg{width:100%;height:auto;display:block;overflow:visible;position:relative;z-index:1}
.k-linie{stroke:var(--gold-warm);stroke-width:1.2;fill:none;opacity:.75}
.k-punkt{fill:var(--gold)}
.k-ring{fill:none;stroke:var(--gold);stroke-width:1.2}
.k-text{font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;fill:var(--petrol-weich)}
.k-puls{fill:var(--gold);opacity:.22;animation:pulsieren 3.4s ease-in-out infinite}
@keyframes pulsieren{0%,100%{r:14;opacity:.22}50%{r:19;opacity:.07}}
/* Erst zeichnen, wenn die Grafik im Bild ist */
.sichtbar .k-linie{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:zeichnen 1.4s ease forwards}
.sichtbar .k-punkt,.sichtbar .k-ring,.sichtbar .k-text{opacity:0;animation:auf .6s ease forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes auf{to{opacity:1}}

/* Longevity Code --------------------------------------------------- */
.code-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:5rem;align-items:center}
.siegel{
  aspect-ratio:1;max-width:300px;margin:0 auto;position:relative;
  border-radius:50%;background:var(--weiss);box-shadow:var(--schatten);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2.2rem;transition:transform .5s;
}
.siegel:hover{transform:scale(1.03) rotate(-2deg)}
.siegel::before{content:"";position:absolute;inset:14px;border:1px solid var(--gold-hell);border-radius:50%}
.siegel .marke{font-family:'Outfit',sans-serif;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--petrol-weich)}
.siegel .titel{font-family:'Outfit',sans-serif;font-weight:500;font-size:1.4rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);margin:.85rem 0;line-height:1.2}
.siegel .strich{width:36px;height:1px;background:var(--gold-hell)}
.siegel .jahr{font-family:'Outfit',sans-serif;font-size:.6rem;letter-spacing:.18em;
  color:var(--petrol-weich);margin-top:.85rem}

/* Person ----------------------------------------------------------- */
.person{display:grid;grid-template-columns:.85fr 1.15fr;gap:4.5rem;align-items:center}
.person-bild{border-radius:190px 190px var(--r-gross) var(--r-gross);overflow:hidden;
  box-shadow:var(--schatten)}
.person-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.person-bild:hover img{transform:scale(1.04)}

/* Abschluss -------------------------------------------------------- */
.abschluss{position:relative;overflow:hidden}
.abschluss::before{content:"";position:absolute;bottom:-260px;left:50%;transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(circle,rgba(217,154,82,.20) 0%,rgba(217,154,82,0) 66%);pointer-events:none}

/* Abschluss mit Portraet ------------------------------------------ */
.cta-raster{display:grid;grid-template-columns:.78fr 1.22fr;gap:3.5rem;align-items:center;
  position:relative;z-index:1}
.cta-aktion{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.cta-kontakt{margin-top:2rem;display:grid;gap:.7rem}
.ck-zeile{display:flex;align-items:center;gap:.9rem;text-decoration:none;
  background:var(--weiss);border:1px solid var(--linie);border-radius:999px;
  padding:.75rem 1.4rem .75rem .8rem;transition:border-color .3s,transform .3s,box-shadow .3s}
/* Alle drei Wege sehen gleich aus. Der Termin steht oben und ist damit
   als erster Schritt erkennbar, ohne aus der Reihe zu fallen. */
.ck-zeile.haupt .ck-icon{background:var(--gold)}
.ck-zeile.haupt .ck-icon svg{stroke:var(--weiss)}
.ck-zeile:hover{border-color:var(--gold);transform:translateX(3px);box-shadow:var(--schatten)}
.ck-icon{width:38px;height:38px;border-radius:50%;background:var(--sand-tief);flex:none;
  display:flex;align-items:center;justify-content:center;transition:background .3s}
.ck-zeile:hover .ck-icon{background:var(--gold)}
.ck-icon svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ck-zeile:hover .ck-icon svg{stroke:var(--weiss)}
.ck-zeile b{display:block;font-family:'Outfit',sans-serif;font-weight:400;font-size:1rem;
  letter-spacing:.02em;color:var(--petrol)}
.ck-zeile span span{font-size:.82rem;color:var(--petrol-weich)}
.cta-bild{position:relative;display:flex;justify-content:center;align-items:center}
/* Kreisflaeche hinter der Person, damit das Foto freigestellt wirkt,
   ohne dass die Datei wirklich freigestellt werden muss. */
.cb-kreis{position:absolute;top:-26px;left:-26px;width:min(76%,300px);aspect-ratio:1;
  border-radius:50%;border:1px solid var(--gold-hell);opacity:.7}
.cta-bild img{position:relative;width:min(100%,330px);aspect-ratio:4/5;object-fit:cover;
  /* 26% statt Mitte: Sie telefoniert im linken Bilddrittel, mittig zentriert
     schnitt der Ausschnitt genau das Telefon weg. */
  object-position:26% center;border-radius:var(--r-gross);box-shadow:var(--schatten);
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.cta-bild:hover img{transform:translateY(-6px)}

/* Fusszeile -------------------------------------------------------- */
.fuss-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
/* Auf dunklem Grund wuerde multiply das Logo verschlucken. Stattdessen
   eine helle Kreisflaeche als Traeger, wie im Kopfbereich. */
.fuss-logo .logo-zeichen{width:52px;height:52px;background:var(--sand);flex:none}
.fuss-logo .logo-name b{color:var(--weiss);font-size:.95rem}
.fuss-logo .logo-name span{color:var(--gold-warm)}
footer{background:var(--petrol);color:rgba(255,255,255,.74);padding:70px 0 36px;font-size:.92rem}
.fuss-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;padding-bottom:2.6rem;
  border-bottom:1px solid rgba(255,255,255,.14)}
footer h4{color:var(--weiss);margin-bottom:1.1rem}
footer ul{list-style:none}
footer li{margin-bottom:.55rem}
footer a{color:rgba(255,255,255,.74);text-decoration:none;transition:color .3s}
footer a:hover{color:var(--gold-warm)}
.fuss-hinweis{margin-top:2.2rem;font-size:.85rem;color:rgba(255,255,255,.55);max-width:62em}
.fuss-unten{margin-top:1.8rem;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-family:'Outfit',sans-serif;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

/* FAQ als aufklappbare Fragen ------------------------------------- */
.frage{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-mittel);
  margin-bottom:.9rem;overflow:hidden;transition:border-color .35s,box-shadow .35s}
.frage:hover{border-color:var(--gold-hell);box-shadow:var(--schatten)}
.frage summary{
  cursor:pointer;list-style:none;padding:1.3rem 3.4rem 1.3rem 1.6rem;position:relative;
  font-family:'Outfit',sans-serif;font-size:1.02rem;letter-spacing:.01em;color:var(--petrol);
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{
  content:"";position:absolute;right:1.6rem;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s;
}
.frage[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.frage summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.frage p{padding:0 1.6rem 1.5rem;font-size:.97rem;color:var(--petrol-weich);margin:0}

/* Die Klasse ".offen" fuer Entwurfs-Hinweiskaesten ist am 16.08.2026 entfallen:
   Sie wurde im HTML nirgends mehr verwendet und hatte sich zur Falle entwickelt —
   das Handy-Menue erbte ueber denselben Namen still ihren Hintergrund und den
   goldenen Balken. Das Menue heisst seitdem "menue-offen". */

/* Scroll-Reveal ---------------------------------------------------- */
/* Nur unter .js unsichtbar starten. Das Flag setzt ein Einzeiler im <head>.
   Ohne diese Bedingung bliebe die halbe Seite dauerhaft leer, sobald
   JavaScript nicht laeuft — und niemand faende den Grund. */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.js .reveal.sichtbar{opacity:1;transform:none}

/* Mobil ------------------------------------------------------------ */
@media(max-width:1020px){
  :root{--rand:40px}
  .karten{grid-template-columns:repeat(2,1fr)}
  .band-raster{grid-template-columns:repeat(2,1fr)}
  .erkennen{grid-template-columns:repeat(2,1fr)}
  .k-spur{grid-auto-columns:calc((100% - 1.6rem) / 2)}
}
@media(max-width:860px){
  .hero-raster,.code-raster,.person,.system-raster,.nutzen-kopf,.usp-raster,
  .nutzen-block,.nutzen-block.gedreht,.cta-raster{grid-template-columns:1fr;gap:3rem}
  .nutzen-block.gedreht .nutzen-bild{order:0}
  .nutzen-bild img{aspect-ratio:16/10}
  .s-inhalt{grid-template-columns:1fr;gap:1.3rem}
  .s-bild{order:-1;aspect-ratio:16/9}
  .cta-bild{margin-top:1rem}
  /* Bild vor die Aufzaehlung, sonst steht es ganz unten und geht unter. */
  .usp-raster .usp-bild{order:-1}
  .system-raster .konstellation{order:2;max-width:330px}
  .hero-bild{max-width:430px;margin:0 auto}
  .hero h1 br{display:none}
  .hero-karte{left:0;bottom:-22px}
  .boxen{grid-template-columns:1fr}
  .nutzen-kopf{margin-bottom:2.4rem}
  .fuss-raster{grid-template-columns:1fr;gap:2.2rem}
}
@media(max-width:760px){
  :root{--rand:22px}
  body{font-size:17px}
  section{padding:74px 0}
  /* Am Handy klappt das Menue hinter den Hamburger. Als umgebrochene Liste frass es
     zwei Zeilen im Kopf — mit den geplanten Unterseiten wuerden es noch mehr. */
  /* ZWINGEND: backdrop-filter hier abschalten. Es erzeugt einen eigenen Bezugsrahmen
     fuer position:fixed — das Menue richtete sich sonst am Kopf aus statt am
     Bildschirm und war nur 36px hoch. Deckendes Weiss sieht am Handy ohnehin ruhiger
     aus als der Weichzeichner. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--weiss)}
  .kopf{flex-wrap:nowrap;gap:.7rem}
  .menue-knopf{display:flex}
  /* Bei offenem Menue verschwindet der Hamburger — sonst stehen zwei Schliessen-
     Zeichen uebereinander, seins im Kopf und das X im Panel. */
  .menue-knopf[aria-expanded="true"]{opacity:0;pointer-events:none}
  /* Der Termin-Knopf sass im Kopf zwischen Logo und Hamburger eingequetscht und
     brach den Text um. Er steht jetzt unten im Menue, wo er Platz hat. */
  .kopf > .knopf{display:none}
  .kopf{padding:11px var(--rand)}
  .logo-name b{font-size:.86rem;letter-spacing:.17em}
  .logo-name span{font-size:.53rem}
  /* Geschoben wird ueber "right", nicht ueber transform: Auf der Seite wird transform
     an mehreren Stellen animiert (Einblendungen, Karussell), und ein haengender
     Transform-Wert liess das Menue draussen stehen. "right" kann damit nicht kollidieren. */
  nav{
    position:fixed;top:0;bottom:0;right:-360px;width:min(84vw,340px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:1.15rem 1.6rem 2rem;
    background:#ffffff;border-left:0;
    box-shadow:-24px 0 60px rgba(46,58,56,.18);
    transition:right .34s cubic-bezier(.4,0,.2,1);
    z-index:70;overflow-y:auto;
  }
  nav.menue-offen{right:0}

  /* Kopfzeile im Panel: Titel links, X rechts. */
  .menue-titel{display:block;order:-1;
    font-family:'Outfit',sans-serif;font-size:.66rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--petrol-weich);
    padding:.55rem 0 1.5rem;margin-bottom:.35rem;border-bottom:1px solid var(--linie)}
  .menue-zu{display:flex;position:absolute;top:.9rem;right:1.15rem;
    align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;border:0;border-radius:50%;
    background:var(--sand);cursor:pointer;transition:background .25s}
  .menue-zu:hover{background:var(--sand-tief)}
  .menue-zu:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
  .menue-zu span{position:absolute;width:15px;height:1.5px;background:var(--petrol);
    border-radius:2px}
  .menue-zu span:first-child{transform:rotate(45deg)}
  .menue-zu span:last-child{transform:rotate(-45deg)}

  nav a{font-size:1.02rem;letter-spacing:.01em;text-transform:none;
    font-family:'Outfit',sans-serif;color:var(--petrol);
    padding:1.05rem .2rem;border-bottom:1px solid var(--linie)}
  nav a::after{display:none}
  nav a:active{color:var(--gold)}

  /* Die Hauptaktion schliesst das Menue ab, statt oben im Kopf zu draengeln. */
  .menue-aktion{display:inline-flex;margin-top:1.8rem;border-bottom:0;
    justify-content:center;font-size:.72rem;padding:.95rem 1.2rem}
  .menue-aktion:active{color:var(--weiss)}
  .kopf .knopf{padding:.58rem 1rem;font-size:.64rem}
  .menue-schleier{
    display:block;
    position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,34,47,.45);
    opacity:0;pointer-events:none;transition:opacity .3s;z-index:65;
  }
  .menue-schleier.an{opacity:1;pointer-events:auto}
  body.menue-auf{overflow:hidden}
  .logo-zeichen{width:42px;height:42px}
  .karten,.band-raster,.erkennen,.hero-punkte,.boxen.eng{grid-template-columns:1fr}
  .schritt{padding-left:0}
  .s-punkt{position:relative;top:0;margin-bottom:.9rem;width:48px;height:48px}
  .tl-linie{display:none}
  .k-folie{padding:1.8rem 1.5rem 1.6rem}
  .k-folie blockquote{font-size:1.02rem}
  /* Eine Karte, aber die naechste schaut hervor — daran erkennt man, dass es
     weitergeht, ohne dass ein Hinweistext noetig waere. */
  .k-spur{grid-auto-columns:86%}
  /* Kein Platz mehr neben den Karten, also legen sich die Pfeile darueber. */
  .k-pfeil{width:40px;height:40px;top:30%}
  .k-pfeil[data-zurueck]{left:4px}
  .k-pfeil[data-vor]{right:4px}
  .hero-karte{position:static;max-width:none;margin-top:1.2rem}
  .hero-bild .rahmen{border-radius:var(--r-gross) var(--r-gross) 120px 120px}
  .frage summary{font-size:.96rem;padding-right:3rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Muss .js mitfuehren, sonst gewinnt die Basisregel ueber die Spezifitaet. */
  .js .reveal{opacity:1;transform:none;transition:none}
  .sichtbar .k-linie,.sichtbar .k-punkt,.sichtbar .k-ring,.sichtbar .k-text{
    animation:none;stroke-dashoffset:0;opacity:1}
  .k-puls{animation:none}
  *{transition-duration:.01ms!important}
}

/* ====================================================================
   Über uns (ueber-uns.html)
   Eigene Bausteine für die Unterseite. Alles andere kommt aus den
   Klassen der Startseite, damit beide Seiten dieselbe Sprache sprechen.
   ==================================================================== */

/* Luft zwischen der Pille und der Ueberschrift darunter. 21px liessen die beiden
   zusammenkleben, die Pille wirkte wie eine erste Ueberschriftenzeile statt wie
   eine Auszeichnung.
   Der Abstand wird hier fest gesetzt, nicht aufaddiert: Die Ueberschriften
   bringen je nach Abschnitt unterschiedliche eigene Abstaende mit (0 bis 21px),
   ein blosser Zuschlag auf der Pille ergaebe deshalb ueberall andere Luecken.
   Der .wrap-Vorsatz hebt die Spezifitaet ueber .hero h1 und .seiten-kopf h1. */
.eyebrow{margin-bottom:.5rem}
.wrap .eyebrow+h1,.wrap .eyebrow+h2,.wrap .eyebrow+h3{margin-top:1.25rem}
@media(max-width:760px){
  .eyebrow{margin-bottom:.35rem}
  .wrap .eyebrow+h1,.wrap .eyebrow+h2,.wrap .eyebrow+h3{margin-top:1rem}
}

/* Kompakter Seitenkopf statt Vollbild-Hero: Unterseiten steigen direkt
   in den Inhalt ein, ohne den Aufbau der Startseite zu wiederholen. */
.seiten-kopf{padding:150px 0 60px;position:relative;overflow:hidden}
.seiten-kopf::before{content:"";position:absolute;top:-220px;right:-180px;
  width:680px;height:680px;pointer-events:none;
  background:radial-gradient(circle,rgba(217,154,82,.15) 0%,rgba(217,154,82,0) 68%)}
.seiten-kopf h1{margin:1.2rem 0 .9rem}
.seiten-kopf .lead{max-width:36em}

/* Punkte mit Haken, gestapelt. Die einzelne Karte ist .erk aus der
   Startseite — hier nur der Rahmen darum. */
.liste-haken{display:grid;gap:.8rem;margin-top:1.6rem}
.vita{margin-top:4.5rem}
.vita h3{margin-bottom:.4rem}

/* Drei Ebenen der Belastung */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.2rem}
.saeule{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:2.2rem 1.9rem;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,border-color .45s}
.saeule:hover{transform:translateY(-6px);box-shadow:var(--schatten);border-color:var(--gold-hell)}
.saeule .zahl{font-family:'Outfit',sans-serif;font-size:.72rem;letter-spacing:.1em;
  color:var(--gold);display:block;margin-bottom:.9rem}
.saeule h3{margin:0 0 .6rem}
.saeule p{margin:0;font-size:.96rem;color:var(--petrol-weich)}

/* Das Beispiel, das die drei Ebenen zusammenbindet. Abgesetzt allein über die
   Sandflaeche und denselben feinen Rand wie die uebrigen Karten — ein dicker
   Akzentstrich an der Seite liefe hier zudem quer durch die 26px-Rundung. */
.beispiel{margin-top:2.6rem;background:var(--sand);border-radius:var(--r-gross);
  padding:2.6rem 2.4rem;border:1px solid var(--linie)}
.beispiel h3{margin:0 0 .8rem}
.beispiel p{color:var(--petrol-weich);margin:0 0 .8rem;max-width:62em}
.beispiel p:last-child{margin-bottom:0}

/* Anspruch je Zielgruppe: zwei Spalten, sechs Punkte — geht glatt auf, ohne
   leere Zelle in der letzten Reihe. Unternehmen und Mitarbeitende stehen in
   getrennten Abschnitten, sonst weiss man beim Lesen nicht, was für wen gilt. */
.liste-haken.paar{grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.liste-haken .erk p strong{color:var(--petrol);font-weight:600}
/* Auf Sandflaeche heben sich die Karten nur ab, wenn sie weiss sind. */
.sand .liste-haken .erk{background:var(--weiss)}

/* Team: eine Person je Block, untereinander statt im Karussell.
   So bleibt Platz für Qualifikationen und einen eigenen Text. */
.mitglieder{display:grid;gap:1.6rem;margin-top:3.4rem}
.mitglied{display:grid;grid-template-columns:260px 1fr;gap:2.6rem;align-items:start;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:2rem;transition:box-shadow .45s,border-color .45s}
.mitglied:hover{box-shadow:var(--schatten);border-color:var(--gold-hell)}
.mitglied-bild{border-radius:var(--r-mittel);overflow:hidden}
.mitglied-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.mitglied:hover .mitglied-bild img{transform:scale(1.04)}
.mitglied-text{display:flex;flex-direction:column;height:100%}
.mitglied-text h3{margin:0 0 .15rem;font-size:1.3rem}
.mitglied-text>p:not(.team-rolle):not(.team-schwerpunkt){color:var(--petrol-weich);
  font-size:.98rem;margin:0 0 1.1rem;max-width:52em}
.mitglied .team-liste{margin-bottom:1.2rem}
.mitglied .team-schwerpunkt{margin-top:auto}

/* Was für alle gilt */
.standards{grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.8rem}
.standards .erk{background:var(--weiss)}

@media(max-width:1020px){
  .saeulen{grid-template-columns:1fr;gap:1.2rem}
  .mitglied{grid-template-columns:210px 1fr;gap:2rem}
}
@media(max-width:860px){
  .liste-haken.paar{grid-template-columns:1fr;gap:.8rem}
  .standards{grid-template-columns:1fr}
}
@media(max-width:760px){
  .seiten-kopf{padding:118px 0 44px}
  /* Bild und Text untereinander: Nebeneinander bleibt vom Portrait
     am Handy nur ein Streifen übrig. */
  .mitglied{grid-template-columns:1fr;gap:1.4rem;padding:1.4rem}
  .mitglied-bild{max-width:230px}
  .mitglied-bild img{aspect-ratio:1/1}
  .beispiel{padding:1.9rem 1.5rem}
  .vita{margin-top:3rem}
  .saeule{padding:1.8rem 1.5rem}
}

/* Kunden & Kooperationspartner — Logo-Banner unter dem Team */
.partner{padding:3.2rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.partner-titel{text-align:center;margin:0 0 1.8rem}
.partner-logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.2rem 2rem;max-width:1040px;margin:0 auto}
.partner-logo{height:64px;display:flex;align-items:center;justify-content:center}
.partner-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.partner-logo img:hover{filter:none;opacity:1}
.partner-logo.platzhalter{border:1px dashed var(--gold-hell);border-radius:10px;color:var(--gold);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;background:var(--sand)}
@media(max-width:900px){.partner-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  .partner{padding:2.4rem 0}
  .partner-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
  .partner-logo{height:56px}
}

/* 16.09.2026 — Christines KI-Bilder tragen Beschriftungen im Bild.
   1) Etikett der Leistungskarten sitzt im Textteil statt auf dem Bild.
   2) Bildbehälter übernehmen das Seitenverhältnis des Bildes, damit
      nichts abgeschnitten wird — auf allen Bildschirmgrößen. */
.karte-text .karte-marke{position:static;display:inline-block;align-self:flex-start;margin:0 0 .9rem}
.karte-bild:has(img[src*="img/ki-"]),
.s-bild:has(img[src*="img/ki-"]){aspect-ratio:auto}
.karte-bild img[src*="img/ki-"],
.s-bild img[src*="img/ki-"],
.nutzen-bild img[src*="img/ki-"],
.person-bild img[src*="img/ki-"],
.cta-bild img[src*="img/ki-"]{height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.karte:hover .karte-bild img[src*="img/ki-"],
.nutzen-bild:hover img[src*="img/ki-"],
.person-bild:hover img[src*="img/ki-"],
.schritt:hover .s-bild img[src*="img/ki-"]{transform:none}
@media(max-width:900px){.nutzen-bild img[src*="img/ki-"]{aspect-ratio:auto}}
/* Einheitliche Kartenhöhe: alle Leistungskarten im Bildformat 3:2 (Christines Motive sind 3:2) */
.karten .karte-bild,.karten .karte-bild:has(img[src*="img/ki-"]){aspect-ratio:3/2}
.karten .karte-bild img[src*="img/ki-"]{height:100%;object-fit:cover}
.karte-text .karte-marke{background:var(--sand);border:1px solid var(--gold-hell)}

/* 16.09.2026 — echte Partnerlogos: vier Stück, farbig, ohne Link */
.partner-titel{margin-bottom:.9rem}
.partner-unterzeile{text-align:center;max-width:46rem;margin:0 auto 2rem;color:var(--petrol-weich);font-size:.98rem}
.partner-logos{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}
.partner-logo{height:72px}
.partner-logo img,.partner-logo img:hover{filter:none;opacity:1;max-height:56px}
@media(max-width:600px){.partner-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}.partner-logo{height:56px}.partner-logo img{max-height:42px}}

/* 16.09.2026 — „viel Text": lange Absätze in Zweiergruppen, erster Satz als Akzent (Wortlaut unverändert) */
.absatz-akzent{font-weight:600;color:var(--tinte,inherit)}
p.absatz-folge{margin-top:.9rem;padding-left:1rem;border-left:2px solid var(--gold-hell)}

/* 17.09.2026 — kleine Bilder statt Haken bei den sechs Situationen */
.erkennen .erk .situation-bild{flex:none;width:64px;height:64px;border-radius:var(--r-klein,12px);overflow:hidden;background:var(--sand-tief)}
.erkennen .erk .situation-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){.erkennen .erk .situation-bild{width:52px;height:52px}}

/* 17.09.2026 — Situationskacheln: Bild oben über die volle Breite, Text darunter */
.erkennen .erk{flex-direction:column;gap:1.1rem;padding:0;overflow:hidden;align-items:stretch}
.erkennen .erk .situation-bild{width:100%;height:auto;aspect-ratio:16/10;border-radius:0}
.erkennen .erk .situation-bild img{width:100%;height:100%;object-fit:cover;display:block}
.erkennen .erk p{padding:0 1.5rem}
.erkennen .erk p:last-of-type{padding-bottom:1.6rem}
@media(max-width:600px){
  .erkennen .erk .situation-bild{width:100%;height:auto;aspect-ratio:16/9}
}

/* 18.09.2026 — Vorschau auf den Mental Longevity Check */
.check-vorschau{margin-top:4.5rem;text-align:center;max-width:760px}
.check-vorschau h3{margin:1rem 0 .9rem}
.check-vorschau>p{margin:0 auto 2rem;max-width:46em;color:var(--petrol-weich)}
.check-bild{margin:0 0 2rem}
.check-bild img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;border-radius:var(--r-mittel);box-shadow:var(--schatten);border:1px solid var(--linie)}
@media(max-width:600px){.check-vorschau{margin-top:3rem}}

/* Siebter Leistungsbaustein: Longevity orientierte Unternehmensberatung ------
   Christine hat die Leistung am 22.09.2026 als fehlend gemeldet. Die Karte
   spannt die volle Reihe: Das Raster hat drei Spalten (zwei ab 1020px), eine
   siebte normale Karte liesse zwei Zellen leer stehen. Als Querformat schliesst
   sie die Reihe sauber ab und hebt die uebergreifende Leistung hervor.
   Die Bild-Regel steht bewusst am Dateiende und nennt .karten mit: sonst
   gewinnt die fruehere Regel .karten .karte-bild:has(img[src*="img/ki-"]). */
.karte.breit{grid-column:1/-1;flex-direction:row}
.karten .karte.breit .karte-bild{flex:0 0 38%;aspect-ratio:auto}
.karte.breit .karte-text{padding:2.1rem 2.2rem}
@media(max-width:760px){
  .karte.breit{flex-direction:column}
  .karten .karte.breit .karte-bild{flex:none;aspect-ratio:3/2}
  .karte.breit .karte-text{padding:1.7rem 1.7rem 1.9rem}
}

/* Kontaktfoto auf der Ueber-uns-Seite ---------------------------------------
   Christine hat am 25.09.2026 gemeldet, dass dort noch das orange Foto der
   alten Praxisseite stand. Ihr Ersatzbild ist quadratisch und bringt einen
   eigenen Goldbogen mit. Deshalb hier 1:1 statt 4/5 und mittiger Ausschnitt:
   Die Regel .cta-bild img setzt object-position:26%, weil sie auf dem alten
   Motiv im linken Bilddrittel telefonierte. Bei einem zentrierten Portraet
   schnitte das ihr Gesicht an. */
.cta-bild img.portraet{aspect-ratio:1;object-position:center}

/* Ablauf auf den Leistungsseiten (25.09.2026) -------------------------------
   Die Zeitleiste der Startseite hat je Schritt ein Bild und teilt die Karte
   deshalb in zwei Spalten. Auf den Leistungsseiten gibt es zu den Schritten
   keine eigenen Motive. Ohne diese Regel bliebe die zweite Spalte leer und
   der Text staende zusammengedraengt in der linken Haelfte. */
.s-inhalt.nur-text{grid-template-columns:1fr}

/* Der Check-Screenshot auf der Mental-Longevity-Seite (25.09.2026) ----------
   Die Regel .usp-bild img schneidet jedes Motiv auf 4:3 zu. Das Bild vom
   Mental Longevity Check ist hochkant (666x1000) und zeigt Fragebogen und
   Auswertung untereinander — auf 4:3 beschnitten waere nur der Kopf zu sehen.
   Deshalb behaelt es hier sein eigenes Format, wie im Vorschaublock der
   Startseite. */
.usp-bild.hochkant{box-shadow:none;border-radius:0;overflow:visible}
.usp-bild.hochkant img{aspect-ratio:auto;height:auto;max-width:420px;
  margin:0 auto;display:block;border-radius:var(--r-mittel);
  box-shadow:var(--schatten);border:1px solid var(--linie)}