/* saraunland.de – Ausbau von Entwurf B „Bühne“.
   Die Seite ist Saras persönlicher Eingang zu cotrax: Farben, Schrift und Zeichen
   kommen aus dem cotrax-CI (siehe cotrax-website/README.md), damit der Klick
   hinüber ohne Bruch wirkt. Regeln daraus, die hier gelten:
   - Cyan #00B2D3 ist Fläche und Zeichen, nie Schrift. Wo Cyan auf Hell schreibt,
     schreibt --cyan-deep. Auf Dunkelblau schreibt Weiß bzw. --on-dark.
   - Weiche Formen statt scharfer Kanten (runde Ecken, runde Linienenden).
   - Das eine laute Element ist der Winkel aus dem cotrax-X, der auf Sara zeigt.
   Bewegung gibt es zweimal: der Auftritt im Kopf und die Unterschrift, die sich
   einmal schreibt. Bei reduzierter Bewegung steht beides still. */

@font-face{
  font-family:'Hanken Grotesk';
  src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --night:#0F1830;
  --navy:#192440;
  --navy-mid:#22335F;
  --ice:#EAF0F7;
  --on-dark:#C9D3E4;
  --muted-dark:#9AA8C1;
  --cyan:#00B2D3;
  --cyan-light:#46CAEA;
  --cyan-deep:#00768F;
  --cyan-pale:#E4F4F8;
  --paper:#FFFFFF;
  --ink:#192440;
  --ink-soft:#4A5672;
  --line-dark:rgba(234,240,247,.14);
  --line-light:rgba(25,36,64,.14);
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 5vw, 72px);
  --max:1280px;
  --kopf:72px;
  --radius:24px;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M14 14 L46 50 L14 86' fill='none' stroke='black' stroke-width='21' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--night);color:var(--ice);font:400 1.125rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan-light);outline-offset:3px;border-radius:4px}
.hell :focus-visible{outline-color:var(--cyan-deep)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.springen{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--ice);color:var(--night);font-weight:600;text-decoration:none}
.springen:focus{top:12px}
[id]{scroll-margin-top:calc(var(--kopf) + 16px)}

.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.raster{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2.6vw, 36px)}

/* ——— Typografie ——— */
h1,h2,h3{font-family:var(--sans);text-wrap:balance}
h2{font-weight:800;font-size:clamp(2.2rem, 4.3vw, 3.7rem);line-height:1.04;letter-spacing:-.034em}
h3{font-weight:700;font-size:clamp(1.25rem, 1.7vw, 1.45rem);line-height:1.22;letter-spacing:-.015em}
p{text-wrap:pretty}
.text > * + *{margin-top:1.05em}
.text{max-width:38rem}
.einleitung{font-size:clamp(1.125rem, 1.5vw, 1.3rem);line-height:1.55}

/* Kennung über einer Überschrift: nur bei den drei Angeboten und dort, wo sie
   sagt, was der Abschnitt ist. Der kleine Winkel davor ist das cotrax-Zeichen. */
.kennung{display:flex;align-items:center;gap:.6em;margin-bottom:1.1rem;font-weight:600;font-size:1rem;line-height:1.3;color:var(--on-dark)}
.kennung::before{content:"";flex:none;width:.5em;height:.8em;background:var(--cyan-light);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.hell .kennung{color:var(--cyan-deep)}
.hell .kennung::before{background:var(--cyan)}

/* ——— Flächen ——— */
.hell{background:var(--paper);color:var(--ink)}
.hell.blass{background:var(--cyan-pale)}
.hell .leise{color:var(--ink-soft)}
.dunkel{background:var(--navy);color:var(--ice)}
.dunkel .leise,.nacht .leise{color:var(--on-dark)}
.nacht{background:var(--night);color:var(--ice)}
.abschnitt{padding-block:clamp(80px, 10vw, 152px)}

/* ——— Knöpfe ——— */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.85em 1.45em;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1.1 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s, border-color .2s, color .2s}
.knopf svg{width:1.05em;height:1.05em;flex:none}
.knopf-cyan{background:var(--cyan-light);color:var(--night)}
.knopf-cyan:hover{background:#7ADBF1}
.knopf-linie{border-color:rgba(234,240,247,.4);color:var(--ice)}
.knopf-linie:hover{border-color:var(--ice);background:rgba(234,240,247,.06)}
.hell .knopf-linie{border-color:rgba(25,36,64,.35);color:var(--ink)}
.hell .knopf-linie:hover{border-color:var(--ink);background:rgba(25,36,64,.04)}
.knopf-navy{background:var(--navy);color:#fff}
.knopf-navy:hover{background:var(--navy-mid)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ——— Kopf ——— */
.kopf{position:sticky;top:0;z-index:40;background:rgba(15,24,48,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--kopf)}
.marke{display:flex;align-items:baseline;gap:.5em;text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:-.015em;white-space:nowrap}
.marke span{font-weight:500;font-size:.9375rem;letter-spacing:0;color:var(--muted-dark)}
.hauptnav{display:flex;align-items:center;gap:clamp(18px, 2vw, 30px)}
.hauptnav ul{display:flex;gap:clamp(16px, 1.8vw, 28px)}
.hauptnav ul a{position:relative;padding-block:8px;text-decoration:none;font-size:.9688rem;font-weight:500;color:var(--on-dark)}
.hauptnav ul a:hover,.hauptnav ul a[aria-current="true"]{color:#fff}
.hauptnav ul a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--cyan-light)}
.hauptnav .knopf{min-height:42px;padding:.7em 1.15em;font-size:.9375rem}
.menue-knopf{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1.5px solid rgba(234,240,247,.35);border-radius:999px;background:none;font-weight:600;font-size:.9375rem;cursor:pointer}
.menue-knopf i{position:relative;width:16px;height:2px;border-radius:2px;background:currentColor;transition:background-color .2s}
.menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s}
.menue-knopf i::before{top:-5px}
.menue-knopf i::after{top:5px}
.menue-knopf[aria-expanded="true"] i{background:transparent}
.menue-knopf[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
.menue{position:fixed;inset:var(--kopf) 0 auto;z-index:39;max-height:calc(100dvh - var(--kopf));overflow:auto;background:var(--night);border-bottom:1px solid var(--line-dark);padding:8px var(--gutter) 28px}
.menue[hidden]{display:none}
.menue ul a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-dark);text-decoration:none;font-weight:700;font-size:1.375rem;letter-spacing:-.015em}
.menue ul a::after{content:"";width:.45em;height:.72em;background:var(--cyan-light);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.menue .knoepfe{margin-top:24px}
.menue .knopf{flex:1}

/* ——— Hero ——— */
.hero{position:relative;background:var(--night);overflow:hidden}
.hero-oben{position:relative;min-height:min(calc(100svh - var(--kopf) - 156px), 860px)}
.hero-text{position:relative;z-index:2;max-width:min(54%, 680px);padding-block:clamp(56px, 8vh, 104px) clamp(48px, 7vh, 88px)}
.hero-zeile{font-weight:600;font-size:1.0625rem;color:var(--on-dark)}
.hero h1{margin-top:.55em;font-weight:800;font-size:clamp(3.4rem, 7.3vw, 7.1rem);line-height:.92;letter-spacing:-.047em}
.hero h1 span{display:block}
.hero-lead{margin-top:1.5em;max-width:31rem;font-size:clamp(1.125rem, 1.45vw, 1.3rem);line-height:1.55;color:var(--on-dark)}
.hero-lead strong{font-weight:600;color:#fff}
.hero .knoepfe{margin-top:2.2rem}
.hero-bild{position:absolute;top:0;right:0;bottom:0;width:min(44vw, 820px);z-index:1}
.hero-bild picture,.hero-bild img{width:100%;height:100%}
.hero-bild img{object-fit:cover;object-position:50% 12%;border-radius:0 0 0 40px}
.winkel{position:absolute;left:0;top:56%;width:clamp(76px, 8.4vw, 132px);translate:-56% -50%;color:var(--cyan);filter:drop-shadow(0 10px 22px rgba(6,12,28,.3))}

/* Hauptmarken am Fuß des Einstiegs; alle Marken stehen im Abschnitt Referenzen.
   Weiße Logos aus scripts/logos.py, wie hell sie stehen, regelt die Deckkraft. */
.hauptmarken{position:relative;z-index:2;border-top:1px solid var(--line-dark);padding-block:26px 40px}
.hauptmarken-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;font-size:.9375rem}
.hauptmarken-kopf p{color:var(--muted-dark)}
.hauptmarken-kopf a{color:var(--on-dark);text-underline-offset:.25em;text-decoration-color:rgba(201,211,228,.4)}
.hauptmarken-kopf a:hover{color:#fff;text-decoration-color:currentColor}
.hauptmarken .logo-raster{margin-top:26px;grid-template-columns:repeat(6, minmax(0, 1fr))}

/* Auftritt: einmal beim Laden – die drei Worte nacheinander, dann der Winkel. */
@keyframes hoch{from{opacity:0;transform:translateY(.32em)}to{opacity:1;transform:none}}
@keyframes herein{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes blende{from{opacity:0}to{opacity:1}}
.hero h1 span{animation:hoch .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.12s}
.hero h1 span:nth-child(3){animation-delay:.24s}
.hero-lead,.hero .knoepfe{animation:blende .9s .5s ease-out both}
.winkel{animation:herein 1.1s .55s cubic-bezier(.2,.7,.2,1) both}

/* ——— Über mich ——— */
.ueber .raster{align-items:start}
.ueber figure{grid-column:1 / span 5;position:sticky;top:calc(var(--kopf) + 32px)}
.ueber figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.ueber .inhalt{grid-column:7 / span 6}
.ueber h2{max-width:16ch}
.ueber .text{margin-top:1.6rem}
.haltung{margin-top:2.4rem;padding:26px 0;border-block:1px solid var(--line-light);display:grid;grid-template-columns:repeat(3, auto);justify-content:start;gap:8px 40px}
.haltung dt{font-size:.9375rem;color:var(--ink-soft)}
.haltung dd{font-weight:700;font-size:clamp(1.3rem, 2vw, 1.6rem);letter-spacing:-.02em;line-height:1.2}
.haltung div{display:flex;flex-direction:column-reverse;gap:4px}
.gruss{margin-top:2.4rem}
.gruss p{color:var(--ink-soft)}
.unterschrift{display:block;width:clamp(200px, 22vw, 270px);margin-top:10px}
.unterschrift img{width:100%}
.js .unterschrift img{clip-path:inset(0 100% 0 0);transition:clip-path 2.1s cubic-bezier(.45,.05,.25,1) .15s}
.js .unterschrift.ist-sichtbar img{clip-path:inset(0 0 0 0)}

/* ——— Haltung, groß ——— */
.werte-band .raster{row-gap:40px}
.werte-band h2{grid-column:1 / span 7;max-width:16ch}
.werte-band .einleitung{grid-column:9 / span 4;align-self:end;color:var(--on-dark)}
.werte{grid-column:1 / -1;margin-top:clamp(16px, 3vw, 40px);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55em;row-gap:.12em;font-weight:700;font-size:clamp(1.7rem, 3.6vw, 3.25rem);line-height:1.2;letter-spacing:-.03em}
.werte li{display:inline-flex;align-items:baseline;gap:.55em}
.werte li:nth-child(even){color:var(--on-dark)}
.werte li + li::before{content:"";width:.34em;height:.56em;background:var(--cyan-light);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;transform:translateY(-.02em)}

/* ——— Angebote: gemeinsamer Kopf ——— */
.angebot-kopf .raster{align-items:center;row-gap:48px}
.angebot-kopf .inhalt{grid-column:1 / span 6}
.angebot-kopf h2{max-width:14ch}
.angebot-kopf .text{margin-top:1.6rem}
.angebot-kopf figure{grid-column:8 / span 5}
.angebot-kopf figure img{width:100%;object-fit:cover;border-radius:var(--radius)}

/* Training */
.training .angebot-kopf figure{grid-column:7 / span 6}
.training figure img{aspect-ratio:5/4;object-position:52% 30%}
.methoden{margin-top:clamp(64px, 8vw, 104px);display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2.6vw, 36px);row-gap:40px}
.methoden ul{grid-column:1 / span 7;display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}
.methoden li{padding-top:18px;border-top:2px solid var(--ink)}
.methoden li p{margin-top:.5em;font-size:1rem;color:var(--ink-soft)}
.bewertung{grid-column:9 / span 4;align-self:start}
.bewertung blockquote{font-weight:700;font-size:clamp(1.45rem, 2.2vw, 1.85rem);line-height:1.22;letter-spacing:-.02em}
.bewertung figcaption{margin-top:.8em;font-size:1rem;color:var(--ink-soft)}
.themen{margin-top:clamp(64px, 8vw, 104px);padding-top:clamp(40px, 5vw, 56px);border-top:1px solid var(--line-light)}
.themen-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.themen-kopf p{color:var(--ink-soft);max-width:30rem}
.themen-gruppen{margin-top:36px;display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}
.themen-gruppen h4{font-weight:600;font-size:.9375rem;color:var(--cyan-deep)}
.themen-gruppen ul{margin-top:12px}
.themen-gruppen li{padding:9px 0;border-bottom:1px solid var(--line-light);font-weight:600;font-size:1.0625rem;line-height:1.35}

/* Coaching */
.coaching .angebot-kopf figure{position:relative;grid-column:7 / span 6}
.coaching figure img{aspect-ratio:3/2;object-position:50% 40%}
.coaching figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(80px, 9vw, 140px) clamp(20px, 2.6vw, 36px) clamp(20px, 2.6vw, 32px);border-radius:0 0 var(--radius) var(--radius);background:linear-gradient(0deg, rgba(15,24,48,.94) 0%, rgba(15,24,48,.7) 48%, rgba(15,24,48,0) 100%)}
.coaching blockquote{font-weight:700;font-size:clamp(1.35rem, 2.3vw, 2rem);line-height:1.2;letter-spacing:-.02em;max-width:20ch;color:#fff}
.felder{margin-top:clamp(64px, 8vw, 104px);display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.felder li{padding-top:20px;border-top:1px solid var(--line-dark)}
.felder li::before{content:"";display:block;width:14px;height:22px;margin-bottom:18px;background:var(--cyan-light);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.felder p{margin-top:.5em;font-size:1rem;color:var(--on-dark)}

/* Studie als Balken: eine Reihe, ein Farbton, Skala 0–100 %, Wert an der Spitze. */
.studie{margin-top:clamp(72px, 9vw, 120px);padding:clamp(28px, 4vw, 56px);border-radius:var(--radius);background:var(--night)}
.studie .raster{row-gap:32px}
.studie-kopf{grid-column:1 / span 4}
.studie-kopf h3{font-size:clamp(1.5rem, 2.2vw, 1.9rem);letter-spacing:-.025em}
.studie-kopf p{margin-top:.8em;font-size:1rem;color:var(--on-dark)}
.studie-kopf .quelle{margin-top:1.4em;font-size:.875rem;color:var(--muted-dark)}
.balken{grid-column:6 / span 7;display:grid;gap:14px}
.balken li{display:grid;grid-template-columns:minmax(0, 15rem) 1fr;align-items:center;gap:18px}
.balken .was{font-size:.9688rem;line-height:1.3;color:var(--on-dark)}
.balken .spur{display:flex;align-items:center;gap:10px;min-width:0}
.balken .spur i{display:block;height:12px;width:calc(var(--wert) * 1% * .86);border-radius:0 4px 4px 0;background:var(--cyan-light)}
.balken .spur b{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:#fff}

/* Konzeption */
.konzeption .angebot-kopf .inhalt{grid-column:6 / span 7;grid-row:1}
.konzeption .angebot-kopf figure{grid-column:1 / span 4;grid-row:1}
.konzeption figure img{aspect-ratio:4/5}
.konzeption h2{max-width:none}

.referenzen .raster{row-gap:40px}
.referenzen h2{grid-column:1 / span 6}
.referenzen .einleitung{grid-column:8 / span 5;align-self:end;color:var(--on-dark)}
/* Alle Marken gleich groß; die 1-px-Lücken zeigen den Hintergrund als feine Linien. */
.logo-raster{grid-column:1 / -1;margin-top:clamp(8px, 2vw, 24px);display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:1px;background:var(--line-dark);border-block:1px solid var(--line-dark)}
.logo-raster li{display:grid;place-items:center;min-height:clamp(100px, 8.6vw, 124px);padding:18px 12px;background:var(--night)}
.logo-raster img{opacity:.86}
.schritte{margin-top:clamp(64px, 8vw, 104px);display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(24px, 4vw, 56px);counter-reset:schritt}
.schritte li{position:relative;padding:28px 28px 32px;border-radius:var(--radius);background:var(--cyan-pale);counter-increment:schritt}
.schritte li::before{content:counter(schritt);display:block;margin-bottom:22px;font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cyan-deep)}
.schritte li + li::after{content:"";position:absolute;top:50%;left:calc(-1 * clamp(24px, 4vw, 56px) / 2);width:14px;height:22px;translate:-50% -50%;background:var(--cyan);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat}
.schritte p{margin-top:.5em;font-size:1rem;color:var(--ink-soft)}

/* ——— Werkzeuge ——— */
.werkzeuge .raster{row-gap:40px}
.werkzeuge .seitenkopf{grid-column:1 / span 4;position:sticky;top:calc(var(--kopf) + 40px);align-self:start}
.werkzeuge .seitenkopf p{margin-top:1.2rem}
.aufklapper{grid-column:6 / span 7;border-top:1px solid var(--line-light)}
.aufklapper details{border-bottom:1px solid var(--line-light)}
.aufklapper summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;padding:26px 0;cursor:pointer;list-style:none}
.aufklapper summary::-webkit-details-marker{display:none}
.aufklapper summary h3{font-size:clamp(1.35rem, 2vw, 1.7rem);letter-spacing:-.022em}
.aufklapper summary p{grid-column:1;font-size:1rem;color:var(--ink-soft)}
.aufklapper summary .zeichen{grid-column:2;grid-row:1 / span 2;position:relative;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(25,36,64,.3);transition:background-color .2s, border-color .2s}
.aufklapper summary .zeichen::before,.aufklapper summary .zeichen::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:var(--ink);translate:-50% -50%;transition:transform .25s}
.aufklapper summary .zeichen::after{transform:rotate(90deg)}
.aufklapper details[open] .zeichen{background:var(--navy);border-color:var(--navy)}
.aufklapper details[open] .zeichen::before,.aufklapper details[open] .zeichen::after{background:#fff}
.aufklapper details[open] .zeichen::after{transform:rotate(0deg)}
.aufklapper summary:hover .zeichen{border-color:var(--ink)}
.aufklapper .text{padding:0 0 32px;max-width:40rem}
.aufklapper .text p{color:var(--ink-soft)}
.aufklapper .zitat{font-weight:600;color:var(--ink)}

/* ——— Qualifikationen ——— */
.quali .raster{row-gap:40px}
.quali .seitenkopf{grid-column:1 / span 4;position:sticky;top:calc(var(--kopf) + 40px);align-self:start}
.quali .seitenkopf p{margin-top:1.2rem}
.quali .listen{grid-column:6 / span 7;display:grid;gap:56px}
.quali h3{font-size:1rem;font-weight:600;color:var(--cyan-deep);letter-spacing:0}
.zert{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.zert li,.studium li{padding:16px 0;border-bottom:1px solid var(--line-light)}
.zert b,.studium b{display:block;font-weight:700;font-size:1.0625rem;line-height:1.35}
.zert span,.studium span{display:block;margin-top:3px;font-size:.9688rem;line-height:1.45;color:var(--ink-soft)}
.studium{margin-top:10px}
.studium q{display:block;margin-top:8px;font-size:.9375rem;line-height:1.5;color:var(--ink-soft);quotes:"„" "“"}

/* ——— cotrax ——— */
.cotrax{position:relative;overflow:hidden;background:var(--navy-mid)}
.cotrax-x{position:absolute;right:-9%;top:50%;width:min(58vw, 820px);translate:0 -50%;pointer-events:none}
.cotrax-x .strich{fill:#2B3F72}
.cotrax-x .pfeil{fill:var(--cyan);opacity:.2}
.cotrax .wrap{position:relative}
.cotrax .wortmarke{width:clamp(130px, 13vw, 168px);height:auto;color:#fff;margin-bottom:clamp(28px, 4vw, 44px)}
.cotrax h2{max-width:15ch}
.cotrax .einleitung{margin-top:1.4rem;max-width:36rem;color:var(--on-dark)}
.cotrax .knoepfe{margin-top:2.2rem}
.bausteine{margin-top:clamp(56px, 7vw, 88px);display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
.bausteine a{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;height:100%;padding:24px 24px 26px;border-radius:20px;background:rgba(15,24,48,.42);border:1px solid var(--line-dark);text-decoration:none;transition:border-color .2s, background-color .2s}
.bausteine a:hover{border-color:var(--cyan-light);background:rgba(15,24,48,.62)}
.bausteine svg{grid-row:1 / span 2;width:44px;height:44px;padding:10px;border-radius:12px;background:rgba(70,202,234,.14);color:var(--cyan-light)}
.bausteine b{font-weight:700;font-size:1.1875rem;line-height:1.3}
.bausteine span{font-size:.9688rem;line-height:1.45;color:var(--on-dark)}

/* ——— Kontakt ——— */
.kontakt .raster{align-items:center;row-gap:48px}
.kontakt figure{grid-column:1 / span 5}
.kontakt figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.kontakt .inhalt{grid-column:7 / span 6}
.kontakt h2{font-size:clamp(2.6rem, 5.6vw, 4.8rem)}
.kontakt .einleitung{margin-top:1.4rem;color:var(--on-dark);max-width:30rem}
.wege{margin-top:2.4rem;display:grid;gap:12px}
.wege a{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:18px;border:1px solid var(--line-dark);text-decoration:none;transition:border-color .2s, background-color .2s}
.wege a:hover{border-color:var(--cyan-light);background:rgba(234,240,247,.04)}
.wege svg{flex:none;width:44px;height:44px;padding:11px;border-radius:50%;background:var(--cyan-light);color:var(--night)}
.wege b{display:block;font-weight:700;font-size:clamp(1.125rem, 1.6vw, 1.3rem);line-height:1.25;color:#fff}
.wege span span{display:block;font-size:.9375rem;color:var(--muted-dark)}
.kontakt .ort{margin-top:1.6rem;font-size:.9688rem;color:var(--muted-dark)}

/* ——— Fuß ——— */
.fuss{background:var(--night);border-top:1px solid var(--line-dark);padding-block:32px 40px;font-size:.9375rem;color:var(--muted-dark)}
.fuss .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
.fuss nav ul{display:flex;gap:26px;flex-wrap:wrap}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--ice)}

/* ——— Rechtliches und 404 ——— */
.rechtlich{padding-block:clamp(56px, 8vw, 104px) clamp(80px, 10vw, 136px)}
.rechtlich h1{font-weight:800;font-size:clamp(2.4rem, 5vw, 4rem);line-height:1.02;letter-spacing:-.035em}
.rechtlich .stand{margin-top:.8rem;color:var(--ink-soft)}
.rechtlich h2{margin-top:2.6em;font-size:clamp(1.35rem, 2vw, 1.6rem);letter-spacing:-.02em;line-height:1.2}
.rechtlich h3{margin-top:1.8em;font-size:1.125rem}
.rechtlich .text{max-width:44rem}
.rechtlich .text > h2 + *,.rechtlich .text > h3 + *{margin-top:.6em}
.rechtlich ul.punkte{padding-left:1.2em;list-style:disc}
.rechtlich ul.punkte li + li{margin-top:.35em}
.rechtlich a{color:var(--cyan-deep)}
.rechtlich address{font-style:normal}
.offen{display:inline;padding:.05em .4em;border-radius:6px;background:#FFF1C2;color:#5C4300;font-weight:600}
.offen-block{margin-top:1.4rem;padding:16px 20px;border-radius:14px;background:#FFF6DA;border:1px dashed #C99A16;color:#5C4300;font-size:1rem}
.fehlt{min-height:calc(100svh - var(--kopf) - 110px);display:flex;align-items:center}
.fehlt h1{font-weight:800;font-size:clamp(2.6rem, 6vw, 5rem);line-height:1;letter-spacing:-.04em;max-width:14ch}
.fehlt p{margin-top:1.2rem;max-width:34rem;color:var(--on-dark)}
.fehlt .knoepfe{margin-top:2rem}

/* ——— Breiten ——— */
@media (max-width:1180px){
  .hauptnav ul{display:none}
  .hauptnav .knopf-linie{display:none}
  .menue-knopf{display:inline-flex}
}
@media (min-width:1181px){
  .menue{display:none}
}
@media (max-width:1080px){
  .methoden ul{grid-column:1 / -1}
  .bewertung{grid-column:1 / span 8}
  .themen-gruppen{grid-template-columns:1fr 1fr;row-gap:36px}
  .studie-kopf{grid-column:1 / -1}
  .balken{grid-column:1 / -1}
  .bausteine{grid-template-columns:1fr 1fr}
  .werkzeuge .seitenkopf,.quali .seitenkopf{grid-column:1 / span 8;position:static}
  .aufklapper,.quali .listen{grid-column:1 / -1}
}
@media (max-width:860px){
  :root{--kopf:64px;--radius:20px}
  body{font-size:1.0625rem}
  .hero-oben{min-height:0;display:flex;flex-direction:column}
  .hero-oben > .wrap{position:relative;z-index:2}
  .hero-bild{position:relative;order:-1;width:100%;height:auto}
  .hero-bild img{aspect-ratio:4/5;max-height:76svh;border-radius:0;object-position:50% 8%}
  .hero-bild::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(0deg, var(--night) 4%, rgba(15,24,48,.72) 46%, rgba(15,24,48,0) 100%)}
  .winkel{left:var(--gutter);top:auto;bottom:42%;width:54px;translate:0 0;z-index:2}
  .hero-text{max-width:none;margin-top:-26vw;padding-block:0 48px}
  .hero h1{font-size:13.6vw;margin-top:.4em}
  .hauptmarken{padding-block:22px 34px}
  .hauptmarken .logo-raster{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .ueber figure{grid-column:1 / -1;position:static;max-width:520px}
  .ueber .inhalt{grid-column:1 / -1;margin-top:40px}
  .haltung{grid-template-columns:1fr 1fr 1fr;gap:6px 20px}
  .werte-band h2,.werte-band .einleitung{grid-column:1 / -1}
  .angebot-kopf .inhalt,.angebot-kopf figure,.coaching .angebot-kopf figure,
  .konzeption .angebot-kopf .inhalt,.konzeption .angebot-kopf figure{grid-column:1 / -1;grid-row:auto}
  .konzeption .angebot-kopf figure{max-width:440px}
  .referenzen h2,.referenzen .einleitung{grid-column:1 / -1}
  .logo-raster{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .logo-raster li{min-height:92px;padding:16px 8px}
  .logo-raster img{zoom:.72}
  .methoden ul{grid-template-columns:1fr}
  .bewertung{grid-column:1 / -1}
  .felder{grid-template-columns:1fr;gap:28px}
  .balken li{grid-template-columns:1fr;gap:6px}
  .schritte{grid-template-columns:1fr;gap:28px}
  .schritte li + li::after{top:calc(-1 * 28px / 2);left:50%;rotate:90deg}
  .werkzeuge .seitenkopf,.quali .seitenkopf{grid-column:1 / -1}
  .zert{grid-template-columns:1fr}
  .bausteine{grid-template-columns:1fr}
  .cotrax-x{width:92vw;right:-40%;top:0;translate:0 -14%}
  .kontakt figure{grid-column:1 / -1;max-width:440px}
  .kontakt .inhalt{grid-column:1 / -1}
}
@media (max-width:520px){
  .marke span{display:none}
  .hauptnav .knopf-cyan{padding-inline:1em}
  .themen-gruppen{grid-template-columns:1fr}
  .haltung{grid-template-columns:1fr;gap:14px}
  .wege a{padding:16px}
  .wege b{font-size:1.0625rem;overflow-wrap:anywhere}
}
@media (max-width:380px){
  .marke{font-size:1.125rem}
  .hauptnav{gap:10px}
  .menue-knopf{padding:0 13px}
  .menue-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 span,.hero-lead,.hero .knoepfe,.winkel{animation:none}
  .js .unterschrift img{clip-path:none;transition:none}
}

@media print{
  .kopf,.menue,.springen,.winkel,.cotrax-x{display:none}
  body,.nacht,.dunkel,.hero,.cotrax{background:#fff;color:#000}
  .logo-raster img{filter:invert(1)}
  .logo-raster,.logo-raster li{background:#fff}
}