/* ============================================================
   Schriften lokal — Bitter, IBM Plex Sans, IBM Plex Mono.
   Alle drei unter der SIL Open Font License, Selbsthosten erlaubt.

   WARUM LOKAL: Google Fonts setzt keine Cookies, uebertraegt aber bei
   jedem Aufruf die IP-Adresse des Besuchers in die USA. Die
   Datenschutzerklaerung dieser Seite sagt ausdruecklich, dass die
   Schriften vom eigenen Server kommen — das muss stimmen. Nebeneffekt:
   eine fremde Verbindung weniger, die Seite laedt schneller.

   Nur die Subsets latin und latin-ext. Kein Kyrillisch, kein Griechisch,
   kein Vietnamesisch — das waeren 23 weitere Dateien ohne Nutzen.

   Bitter und IBM Plex Sans sind Variable Fonts: 300 und 400 (bzw. 400
   und 500) teilen sich EINE Datei, das Gewicht stellt der Browser aus
   dem @font-face-Deskriptor ein. Deshalb steht bei diesen kein Gewicht
   im Dateinamen. Genau so macht es Google auch.

   Erzeugt am 10.09.2026 aus der damaligen Google-Fonts-Ausgabe.
   ============================================================ */

/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/bitter-italic-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/bitter-italic-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/bitter-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/bitter-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bitter-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bitter-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  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;
}
/* ============================================================
   Gestaltung © 2026 Michael Abraham · mischgo.com
   Urheberrechtlich geschuetzt. Nutzungsrechte gehen erst mit
   vollstaendiger Bezahlung ueber. Nachbau — auch mit KI-gestuetzten
   Werkzeugen — nur mit schriftlicher Zustimmung.
   ============================================================ */
/* ============================================================
   Variante 04 — Zusammenfuehrung
   Aufbau aus Variante 01 (Editorial), Farb- und Schriftwelt aus
   Variante 03 (Fachpublikation). Kapitelflaechen wechseln
   Navy / Creme, wie vom Auftraggeber gewuenscht.
   ============================================================ */

:root{
  --navy-tief:#061A36;
  --navy:#0B2D5C;
  --navy-linie:#1C4577;

  --creme:#F4F1E8;
  --creme-2:#E8E3D6;
  --creme-dim:#AEBACB;   /* auf Navy 8,4:1 */
  --creme-schwach:#7F8CA1;

  --gold:#C7A04A;
  --gold-dunkel:#836318;  /* Gold fuer helle Flaechen, 4,94:1 */
  --gold-hell:#E2C580;

  --tinte:#0E1A2B;
  --tinte-60:#4A5768;
  --tinte-30:#5C6775;     /* auf Creme 5,09:1 */
  --linie-hell:#D3CEC0;

  /* Auszeichnungsschrift in drei Stufen statt neun gewachsenen Werten.
     Alles in Monospace laeuft ueber diese drei — Ausnahmen sind die
     Navigation (ausdruecklich groesser gewuenscht) und die
     Zielgruppenzeile unter dem Portraet. */
  --mark-l:.76rem;   /* laengere Auszeichnungstexte */
  --mark-m:.68rem;   /* Kapitelmarken, Knoepfe, Ziffern */
  --mark-s:.63rem;   /* Feldbeschriftungen, Quellen, Kleinteiliges */

  --kurve:cubic-bezier(.22,.65,.24,1);
  --serif:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--navy-tief);color:var(--creme);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.97rem,.93rem + .2vw,1.05rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* Bitter ist eine Slab Serif: keine negative Laufweite, die
   Serifenbalken brauchen den Raum. */
/* EINE Groesse fuer alle Ueberschriften dieses Rangs. Vorher waren es
   vier Skalen fuer dasselbe: Hero 3,7rem, Kapitelkopf 4,2rem,
   „Klare Rollen" 4rem, „Gerhard Danler" 3,4rem — und ausgerechnet die
   Hero-Zeile, die wichtigste Aussage der Seite, war die kleinste davon.
   Vier Kapitelueberschriften waren groesser als die Hauptueberschrift.
   Ab jetzt steht die Groesse an genau einer Stelle. */
:root{--titel:clamp(2rem,calc(4.45vw - .12rem),3.7rem);}
@media (max-width:900px){:root{--titel:clamp(1.9rem,1rem + 3.6vw,2.6rem);}}
/* Auch das Zwischenband folgt dem Hero. Dort ist er schmaler, weil das
   Portraet neben ihm steht — die Kapitelueberschriften haetten den Platz,
   gehen aber mit, damit die Hero-Zeile ueberall der Massstab bleibt und
   keine Ueberschrift groesser wird als die Hauptaussage. */
@media (min-width:600px) and (max-width:900px){
  :root{--titel:clamp(1.5rem,calc(4.7vw - .12rem),2.6rem);}
}

/* Zweite Ebene: die aufklappbaren Koepfe. Leistungsregister und
   Zielgruppenkacheln sind derselbe Rang — beides Schalter, die einen
   Block oeffnen — hatten aber getrennte Skalen (1,55rem gegen 1,7rem).
   Jetzt eine.
   Das GEWICHT bleibt unterschiedlich, und zwar absichtlich: das
   Register steht dunkel auf Creme, die Kacheln hell auf Navy. Gleiche
   Strichstaerke wirkt auf hellem Grund duenner — deshalb dort 400,
   hier 300. Gleiche Zahl waere hier die falsche Gleichheit. */
:root{--eintrag:clamp(1.05rem,.9rem + .68vw,1.45rem);}

/* Das Zitat: „gross" haengt am Fenster, nicht am Monitor.
   Die alte Kurve war schon ab 1067 px Breite am Anschlag — ein
   13-Zoll-Laptop und ein 27-Zoll-Monitor zeigten dieselben 48 px.
   Nur fuellt das auf dem Laptop den halben Schirm, weil dort nicht
   die Breite knapp ist, sondern die HOEHE (rund 866 px Fenster gegen
   rund 1400). Die volle Groesse gibt es deshalb erst, wenn beides da
   ist. Ein 1080p-Monitor kommt auf etwa 990 px Fensterhoehe und
   besteht die Pruefung, ein 13- oder 14-Zoll-Laptop nicht.
   Das Anfuehrungszeichen geht im selben Verhaeltnis mit (Faktor 0,8),
   sonst waechst es dem Text davon. */
:root{--zitat:clamp(1.55rem,1rem + 3vw,2.4rem);--zitat-marke:clamp(4rem,9vw,6.4rem);}
@media (min-width:1600px) and (min-height:940px){
  :root{--zitat:3rem;--zitat-marke:8rem;}
}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:0;line-height:1.12;margin:0;}
p{margin:0 0 1.05em;max-width:58ch;}
a{color:inherit;}
img{max-width:100%;display:block;}

.wrap{width:min(100% - 2.5rem,82rem);margin-inline:auto;}
.wrap.schmal{width:min(100% - 2.5rem,64rem);}

/* Metadaten laufen konsequent in Monospace — Signatur aus Variante 03. */
.kapitel{
  font-family:var(--mono);font-size:var(--mark-m);font-weight:400;letter-spacing:.17em;
  text-transform:uppercase;color:var(--creme-schwach);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.8rem;
}
.kapitel::after{content:"";height:1px;flex:1;max-width:4rem;background:var(--navy-linie);}

/* ---------- Helle Kapitel ---------- */
.hell{background:var(--creme);color:var(--tinte);}
.hell .kapitel{color:var(--tinte-30);}
.hell .kapitel::after{background:var(--linie-hell);}
.hell p{color:var(--tinte-60);}

.abschnitt{padding:clamp(4.5rem,9vw,8rem) 0;}
.kopfzeile{margin-bottom:clamp(2.8rem,5vw,4.5rem);}
.kopfzeile h2{font-size:var(--titel);max-width:17ch;}
.kopfzeile p{margin-top:1.6rem;max-width:52ch;}
/* Ein Satz je Zeile: die Umbrueche stehen im Text, die Absatzbreite
   darf sie nicht wieder aufbrechen. Der laengste Satz misst 68
   Zeichen. Am Handy bricht er trotzdem — dort ist keine Spalte
   dafuer da, und ein Satzanfang auf frischer Zeile bleibt es
   auch dann. */
.kopfzeile p.satzweise{max-width:70ch;}

/* ============================================================
   Kopf — Logo links, Navigation rechts
   ============================================================ */
.top{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
     transition:background .4s var(--kurve),border-color .4s;}
.top.fest{background:rgba(6,26,54,.92);backdrop-filter:blur(12px);border-bottom-color:var(--navy-linie);}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:92px;gap:2rem;}

/* Wortmarke als Text statt als PNG.
   Grund: die gelieferte Logodatei hat einen hellen Hintergrund fest
   eingebrannt und ist auf Navy unbrauchbar. Als Text ist sie zugleich
   scharf in jeder Groesse, vorlesbar und faerbbar.
   Wunsch des Auftraggebers: 1,5x groesser, und "SACHVERSTAENDIGER"
   so breit wie die zweite Zeile. Gemessen gegen Variante 01, seine
   genannte Basis: Wortmarke 217 -> 324 px = 1,49x. Der Faktor sitzt in
   --marke; die Laufweite von Zeile 2 gleicht die Breiten an. */
.marke{display:flex;align-items:center;gap:1rem;text-decoration:none;--marke:1.2;}
/* Die Pyramide laeuft auf currentColor und faerbt mit dem Kopf mit. */
.marke .pyramide{flex:none;color:var(--gold);width:41px;height:47px;}
/* inline-grid: der Block ist so breit wie die breiteste Zeile, die
   Goldlinie nimmt genau diese Breite an. Die Laufweite von Zeile 2
   ist so gesetzt, dass beide Zeilen buendig auf gleicher Breite
   enden — so ist die Wortmarke gebaut. */
.marke .zeilen{display:inline-grid;justify-items:start;}
.marke .z1,.marke .z2{
  font-family:var(--sans);text-transform:uppercase;color:var(--creme);
  white-space:nowrap;width:max-content;
}
.marke .z1{font-size:calc(1.28rem * var(--marke));font-weight:500;letter-spacing:.055em;line-height:1.08;}
.marke .z2{font-size:calc(.855rem * var(--marke));font-weight:400;letter-spacing:.1885em;
           line-height:1.35;color:var(--creme-dim);}
.marke .regel{display:block;width:100%;height:1.5px;background:var(--gold);margin-top:.3rem;}
.marke:hover .z1{color:var(--gold-hell);}

.top nav{display:flex;gap:1.55rem;}
/* nowrap gilt in jeder Breite: knapp ueber dem Umbruchpunkt reicht der
   Platz sonst nicht und „Publikationen & Seminare" bricht mitten im
   Menue um. */
.top nav a{font-family:var(--mono);font-size:.9rem;letter-spacing:.07em;text-decoration:none;
           white-space:nowrap;color:var(--creme-dim);transition:color .2s;}
.top nav a:hover{color:var(--gold-hell);}

/* ---------- Kopf auf heller Flaeche ----------
   Die Unterseiten beginnen auf Creme. Der Kopf ist dort durchsichtig,
   also braucht die Wortmarke dunkle Werte — sonst steht Creme auf Creme.
   Gold wechselt dabei auf den dunklen Wert: #C7A04A erreicht auf Creme
   nur 2,17:1, #836318 dagegen 4,94:1. Gleiche Farbfamilie, lesbar. */
.top.auf-hell .marke .pyramide{color:var(--gold-dunkel);}
.top.auf-hell .marke .z1{color:var(--gold-dunkel);}
.top.auf-hell .marke .z2{color:var(--tinte-30);}
.top.auf-hell .marke .regel{background:var(--gold-dunkel);}
.top.auf-hell .marke:hover .z1{color:var(--tinte);}
.top.auf-hell nav a{color:var(--tinte-60);}
.top.auf-hell nav a:hover{color:var(--gold-dunkel);}
.top.auf-hell.fest{background:rgba(244,241,232,.94);border-bottom-color:var(--linie-hell);}

@media (max-width:960px){
/* Handy: Navigation bleibt sichtbar und wandert in eine waagrecht
   scrollbare Zeile. Kein Burger — fuenf Anker auf einer Seite
   rechtfertigen kein verstecktes Menue, und ein Burger ist die
   haeufigste Fehlerquelle (offener Zustand, Hintergrund-Scroll,
   Fokus im Nichts, Haenger beim Drehen). */
  .top .wrap{flex-wrap:wrap;min-height:0;padding-block:.8rem;row-gap:.55rem;}
  .marke{--marke:.76;gap:.6rem;}
  .marke .pyramide{width:26px;height:30px;}
  .top nav{
    order:3;flex:1 0 100%;min-width:0;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    gap:1.35rem;padding-bottom:.15rem;
  }
  .top nav::-webkit-scrollbar{display:none;}
  .top nav a{white-space:nowrap;flex:none;font-size:.72rem;}
}

/* ============================================================
   01 Hero — Aufbau aus Variante 01: Text und Portraet nebeneinander
   ============================================================ */
/* Der Mindestwert oben richtet sich nach der Kopfleiste: die ist am
   Handy 94 px hoch (zwei Zeilen, Logo und Navigation), und der Kopf
   ist ungescrollt durchsichtig — mit nur 8rem stiess die Vorzeile
   optisch an die Navigation. */
.hero{position:relative;overflow:hidden;padding:clamp(9.5rem,14vw,11rem) 0 clamp(3.5rem,7vw,6rem);}
.hero::before{
  content:"";position:absolute;top:-25%;right:-12%;width:70%;height:125%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(18,63,123,.5),transparent 72%);
}
.hero .wrap{position:relative;}
/* Ein durchgehendes Raster fuer den ganzen Hero, nicht zwei
   verschachtelte. Nur so lassen sich die Knoepfe am Handy hinter die
   Linie stellen, ohne den Inhalt zu verdoppeln — am Desktop stehen sie
   weiter in der Textspalte. */
.hero-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
             column-gap:clamp(2rem,5vw,4.5rem);align-items:end;}
/* Aussage und Kopf stehen nebeneinander und beide unten buendig auf
   der Goldlinie. Die Linie laeuft ueber die ganze Breite und ist damit
   nicht mehr nur die Standflaeche der Figur, sondern die Achse des
   Heros. Darunter die Texte, dann die Handlung. */
/* Die Unterlaengen der Headline sassen auf der Linie. Das Portraet
   behaelt seinen Kontakt, nur die Textspalte rueckt hoch. */
.hero-text  {grid-column:1;grid-row:1;align-self:end;padding-bottom:clamp(.7rem,1.3vw,1.15rem);}
.portraet   {grid-column:2;grid-row:1;align-self:end;}
.hero-linie {grid-column:1 / -1;grid-row:2;}
.hero-texte {grid-column:1 / -1;grid-row:3;margin-top:clamp(1.8rem,3.5vw,2.6rem);
             --spalt:clamp(2.2rem,4vw,3.8rem);
             display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
             column-gap:var(--spalt);align-items:start;}
.hero-texte .saeule > .lead{margin:0;}
.saeule-marke{
  font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .8rem;
}
/* Drei Spalten erst ab 1200 px. Gemessen: bei 1151 px waeren es 39
   Zeichen je Zeile, bei 1200 px sind es 41 — die Grenze liegt dort,
   wo die Spalte noch lesbar bleibt. Darunter untereinander, dort
   greift die 54ch-Grenze von .lead und die Zeilen stimmen wieder. */
@media (max-width:1199px){
  .hero-texte{grid-template-columns:1fr;row-gap:1.6rem;}
}
.aktionen   {grid-column:1;grid-row:4;margin-top:clamp(2rem,4vw,2.8rem);}
.hero-linie{height:1.5px;background:var(--gold);opacity:.85;}
/* Eine Linie schiebt sich nicht herein, sie wird gezogen. Der
   generische Auftritt (einblenden und 18 px steigen) ist bei einem
   1,5-px-Strich sinnlose Bewegung — hier stattdessen dieselbe Geste
   wie bei der Zaesur in Variante 03: von links aufziehen. */
/* Die Linie zieht von RECHTS nach links auf — sie kommt unter dem
   Portraet hervor, statt darauf zuzulaufen.
   Die Verzoegerung ist noetig: das Foto wischt von unten
   herein, und ohne Vorsprung liefe die Linie durch eine Flaeche, in der
   das Foto noch gar nicht angekommen ist. So landet der Kopf zuerst,
   dann zieht die Linie unter ihm hervor. */
.js .hero-linie.auf{opacity:.85;transform:scaleX(0);transform-origin:right center;
                    transition:transform 1.1s var(--kurve) .25s;}
.js .hero-linie.auf.da{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
  .js .hero-linie.auf{transform:none;transition:none;}
}
@media (max-width:900px){
  /* Am Handy steht das Portraet UNTER der Aussage: wer hier landet,
     kommt mit einer Frage, nicht mit einem Namen. Der Kopf bestaetigt,
     er eroeffnet nicht.
     Und die Knoepfe rutschen HINTER die Linie: Aussage und Kopf bilden
     einen Block, die Linie schliesst ihn, danach kommt die Handlung.
     Zwischen den Zeilen kein gemeinsamer Abstand — das Portraet muss
     die Linie beruehren, alles andere braucht Luft. */
  .hero-raster{grid-template-columns:1fr;row-gap:0;}
  .hero-text  {grid-column:1;grid-row:1;margin-bottom:2.4rem;align-self:start;}
  /* Rechtsbuendig wie am Desktop: die Figur schliesst mit dem Ende
     der Goldlinie ab, statt links zu stehen und rechts Platz zu
     lassen. */
  .portraet   {grid-column:1;grid-row:2;align-self:start;justify-self:end;}
  .hero-linie {grid-column:1;grid-row:3;}
  .hero-texte {grid-column:1;grid-row:4;grid-template-columns:1fr;row-gap:1.6rem;}
  .aktionen   {grid-column:1;grid-row:5;margin-top:2.2rem;}
}

/* ---------- Zwischenband 600 bis 900 px ----------
   Dort ist die Headline nur rund 500 px breit und laesst rechts Platz
   liegen. Kopf und Aussage ruecken deshalb nebeneinander, wie am
   Desktop — die Texte darunter bleiben aber einspaltig, sonst waeren
   die Zeilen mit rund 38 Zeichen zu kurz zum Lesen.
   Die festen Zeilenumbrueche der Headline funktionieren hier wieder,
   weil die Schriftgroesse mit der Spalte mitlaeuft. */
@media (min-width:600px) and (max-width:900px){
  /* Schmalere Fotospalte als am Desktop: der gewonnene Platz geht in
     die Headline, nicht in Leerraum — deshalb weiter unten auch eine
     steilere Schriftgroesse. Beides gehoert zusammen. */
  .hero-raster{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
               column-gap:clamp(1.4rem,3vw,2.4rem);}
  .hero-text  {grid-column:1;grid-row:1;align-self:end;margin-bottom:0;
               padding-bottom:clamp(.5rem,1vw,.9rem);}
  .portraet   {grid-column:2;grid-row:1;align-self:end;justify-self:end;}
  .portraet.frei{max-width:none;}
  .hero-linie {grid-column:1 / -1;grid-row:2;}
  .hero-texte {grid-column:1 / -1;grid-row:3;grid-template-columns:1fr;}
  .aktionen   {grid-column:1;grid-row:4;}
}

.hero .marke-zeile{
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:0 0 2rem;
  /* Einzeilig auf Wunsch. Gebrochen hat sie nicht am Platz, sondern an
     der globalen Absatzbreite von 58ch — die gilt hier nicht. */
  max-width:none;
}
@media (max-width:760px){.hero .marke-zeile{letter-spacing:.1em;}}

/* Die Markenzeile fuehrt in die amtliche Liste — der Auftraggeber wollte
   den Nachweis einen Klick entfernt haben. Sie muss als Link erkennbar
   sein, ohne den Hero zu stoeren: goldener Unterstrich auf knapp halber
   Deckkraft, voll erst bei Hover und Tastaturfokus.

   Sie ist ein <a> und kein <p> mit einem Link darin. Die Schreibmaschine
   in seite.js leert die Kindknoten des Elements (el.textContent = '') —
   ein eingebetteter Link waere damit weg, das Element selbst ueberlebt.
   Bei 65 Zeichen greift ihre 62er-Grenze zwar ohnehin nicht, aber eine
   spaeter gekuerzte Fassung wuerde den Link sonst still zerstoeren. */
.hero a.marke-zeile{
  display:inline-block;text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent);
  text-underline-offset:.45em;
  /* Die Zeile ist nur 18 px hoch — als Textzeile genug, als Klickflaeche
     nicht: WCAG 2.2 (2.5.8) verlangt 24 px, und die Ausnahme fuer Links
     mitten im Fliesstext greift hier nicht, weil sie allein steht. Die
     Polsterung bringt sie auf 28 px; der Aussenabstand darunter wird um
     denselben Betrag gekuerzt, damit optisch nichts wandert. */
  padding:.32rem 0;margin-bottom:calc(2rem - .32rem);
  transition:color .3s var(--kurve),text-decoration-color .3s var(--kurve);
}
.hero a.marke-zeile:hover,
.hero a.marke-zeile:focus-visible{color:var(--gold-hell);text-decoration-color:currentColor;}
.hero a.marke-zeile:focus-visible{outline:2px solid var(--gold);outline-offset:.3em;border-radius:2px;}
/* Der Auftraggeber hat den Umbruch der Headline vorgegeben: vier
   Zeilen, „Unabhängige Expertise" oben, „für Betriebliche Vorsorge,"
   darunter. Von allein bricht sie so nicht.
   Grundzustand ist deshalb der natürliche Umbruch mit text-wrap:balance
   gegen die Hurenzeile — seine festen Umbrüche kommen erst dazu, wenn
   die Spalte sie auch trägt. Gemessen: die längste seiner Zeilen
   braucht 692 px bei 59,2 px Schriftgröße; diese Spaltenbreite gibt es
   ab rund 1360 px Fensterbreite. Darunter würden die festen Umbrüche
   zusätzlich umbrechen und aus vier Zeilen sechs machen. */
/* Die Schriftgroesse laeuft mit der Spalte mit, statt am Maximum zu
   kleben. Rechnung: seine laengste Zeile ist 11,7 mal so breit wie die
   Schriftgroesse, die Textspalte misst rund 0,537vw - 23px. Daraus
   folgt die Steigung 4,45vw - 0,12rem, mit etwas Reserve.
   Wirkung: sein Vierzeiler haelt ab 901 px in jeder Breite, statt nur
   ab 1360 px. Darunter ist einspaltig, dort bricht die Zeile natuerlich
   und text-wrap:balance verhindert die Hurenzeile. */
.hero h1{font-size:var(--titel);max-width:none;}
@media (max-width:900px){
  .hero h1{max-width:22ch;text-wrap:balance;}
  .hero h1 .umbruch{display:none;}
}
/* Im Zwischenband stehen Kopf und Aussage nebeneinander, also gelten
   dort wieder seine festen Umbrueche — und dieselbe Kopplung an die
   Spaltenbreite wie am Desktop, nur mit dem schmaleren Faktor.
   Diese Regel MUSS nach der 900er-Regel stehen, sonst gewinnt die. */
@media (min-width:600px) and (max-width:900px){
  .hero h1{max-width:none;text-wrap:wrap;}
  .hero h1 .umbruch{display:inline;}
}
/* Gold und kursiv auf den ersten Worten jeder Kapitelueberschrift —
   die Geste aus dem Hero, durchgezogen. Auf hellen Flaechen der
   dunklere Goldwert: #C7A04A erreicht auf Creme nur 2,17:1. */
.kursiv{font-style:italic;color:var(--gold-hell);}
.hell .kursiv{color:var(--gold-dunkel);}
.hero .lead{margin-top:0;max-width:54ch;color:var(--creme-dim);font-size:1.03em;}
/* Die Zielgruppenzeile hatte hier eine eigene Auszeichnung: Mono,
   13,1 px statt 17,3 und --creme-schwach statt --creme-dim. Drei
   Abwertungen uebereinander fuer einen Block, der mit den anderen
   beiden gleichrangig ist. Sie ist ersatzlos weg — alle drei sind
   jetzt .lead. */


.aktionen{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin-top:2.8rem;}
.knopf{
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;background:var(--gold);color:var(--navy-tief);
  padding:1.05rem 2rem;transition:background .22s,transform .22s;
}
.knopf:hover{background:var(--gold-hell);transform:translateY(-2px);}
.knopf::after{content:" →";}
.knopf-leer{
  background:none;color:var(--creme);border:1px solid var(--creme-schwach);
  /* Der Rahmen ist die einzige Kontur dieses Knopfes. Mit --navy-linie lag er
     bei 1,40:1 gegen den Grund — unsichtbar, der Knopf las sich als
     deaktiviert. --creme-schwach ergibt 3,99:1 und damit ueber der
     3:1-Anforderung fuer Bedienelement-Umrisse, bleibt aber deutlich
     leiser als der gefuellte Hauptknopf. */
  transition:border-color .22s,color .22s,transform .22s;
}
.knopf-leer:hover{background:none;border-color:var(--gold);color:var(--gold-hell);transform:translateY(-2px);}

/* Portraet steht frei auf der Linie — ohne Freisteller.
   Das Foto laesst sich nicht freistellen: der Kontrast zwischen Haar
   und Hintergrund betraegt 5,5 von 255 Stufen, dort ist keine Kante,
   die ein Werkzeug finden koennte. Mehr Aufloesung hilft nicht, das
   ist Licht, nicht Pixel.
   Was dafuer geht: der Hintergrund ist sehr dunkel und extrem
   gleichmaessig (Streuung 0,5). Mit mix-blend-mode:lighten nimmt jede
   Bildstelle den helleren von Foto und Untergrund — der dunkle
   Studiohintergrund verschwindet damit im Navy, das Gesicht bleibt.
   Kein Schnitt, kein Halo, und jederzeit umkehrbar. */
.portraet{position:relative;}
/* Hochformat-Ausschnitt aus dem Querformat: eine stehende Figur
   braucht Hoehe. Der Schnitt unten ist bewusst hart — die Linie
   schneidet die Figur, das ist die Geste, kein Versehen. */
.portraet-rahmen{position:relative;overflow:hidden;aspect-ratio:3/4;}
.portraet-rahmen img{
  width:100%;height:100%;object-fit:cover;object-position:53% 16%;display:block;
  filter:grayscale(1) contrast(1.17) brightness(1.01);
  mix-blend-mode:lighten;
  /* Die verbleibenden Bildkanten oben und seitlich ausblenden.
     Unten nicht — dort steht der Kopf auf der Linie. */
  -webkit-mask-image:
     linear-gradient(to bottom,transparent 0%,#000 28%),
     linear-gradient(to right,transparent 0%,#000 22%,#000 86%,transparent 100%);
  mask-image:
     linear-gradient(to bottom,transparent 0%,#000 28%),
     linear-gradient(to right,transparent 0%,#000 22%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* Fallback: kennt der Browser den Blendmodus nicht, bleibt das Bild
   ein gewoehnliches Foto — sichtbar, nur nicht freistehend. */
@supports not (mix-blend-mode:lighten){
  .portraet-rahmen img{mix-blend-mode:normal;}
}

/* ---------- Zweiter Weg: echter Freisteller ----------
   Sobald ein PNG mit Transparenz da ist, bekommt .portraet die
   Klasse "frei" — dann fallen Blendmodus, Maske und Kontrastkur weg,
   weil sie dann nichts mehr zu tun haetten und das Bild nur
   verfaelschen wuerden. Der Schnitt unten macht weiterhin die
   Goldlinie, nicht die Datei. */
.portraet.frei .portraet-rahmen{aspect-ratio:auto;display:flex;align-items:flex-end;}
.portraet.frei .portraet-rahmen img{
  mix-blend-mode:normal;
  -webkit-mask-image:none;mask-image:none;
  /* Schwarzweiss, nicht Farbe. Nicht aus Geschmack: in Farbe bleibt der
     Anzug als eigenes Blau-Schwarz vor dem Navy stehen, die Figur wirkt
     aufgeklebt. Entsaettigt geht die Schulter in den Grund ueber, und
     der Kopf steht wirklich frei. Dazu bleibt die Seite zweifarbig —
     ein Farbportraet brächte eine dritte Temperatur neben Navy und Gold. */
  filter:grayscale(1) contrast(1.02);
  /* Die Datei ist auf die Figur beschnitten. Sie laeuft breiter als
     ihre Spalte und wird rechts von der Inhaltskante beschnitten —
     ein gewollter Anschnitt, damit die Figur Praesenz bekommt.
     max-width:none hebt die globale Deckelung fuer Bilder auf,
     flex:none verhindert, dass das Flex-Layout sie zurueckstaucht. */
  flex:none;max-width:none;width:92%;height:auto;object-fit:fill;
}
/* Rechtsbuendig, damit die Figur mit dem Ende der Goldlinie fluchtet. */
.portraet.frei .portraet-rahmen{justify-content:flex-end;}
@media (max-width:900px){
  /* Am Handy kein Anschnitt: die Figur steht vollstaendig, links
     ausgerichtet, damit sie nicht den halben Bildschirm einnimmt. */
  .portraet.frei{max-width:20rem;}
  .portraet.frei .portraet-rahmen img{width:100%;}
}
.js .portraet-rahmen{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--kurve);}
.js .portraet-rahmen.da{clip-path:inset(0 0 0 0);}
.js .portraet-rahmen img{transform:scale(1.055);transition:transform 2s var(--kurve);}
.js .portraet-rahmen.da img{transform:scale(1);}
@media (prefers-reduced-motion:reduce){
  .js .portraet-rahmen{clip-path:none;transition:none;}
  .js .portraet-rahmen img{transform:none;transition:none;}
}
@media (max-width:900px){.portraet{max-width:22rem;}.portraet-rahmen{aspect-ratio:1/1;}}

/* Abbinder unter dem Hero: was die Gutachten leisten, und fuer wen.
   Steht auf Inhaltsbreite und leitet in Kapitel 02 ueber. */

/* ============================================================
   02 Leistungen — neun Positionen als aufklappbares Register.
   Neun Kacheln waeren eine Wand; als nummerierte Liste bleibt die
   Uebersicht, und der Aufbau spiegelt die Form eines Gutachtens:
   Feststellung, darunter der Zweck.
   ============================================================ */
.register{border-top:1px solid var(--linie-hell);}
/* Vier Hauptpunkte, die neun Leistungen als Unterpunkte darunter.
   Die Gruppentitel klappen bewusst NICHT auf: waeren sie zugeklappt,
   braeuchte es zwei Klicks bis zum Text. Wer eine Fachseite nach seinem
   Fall absucht, will die Titel sehen, nicht erst suchen. */
/* Gruppentitel in Monospace-Versalien, nicht in der Serife.
   Grund: vorher unterschieden sich Gruppe und Punkt nur in der Farbe —
   gleiche Schrift, gleiches Gewicht, Groessensprung nur 1,23×. Das
   liest sich flach. Jetzt trennen drei Achsen gleichzeitig: Schrift,
   Schreibweise, Groesse. Der Titel ist dadurch kleiner als die Punkte
   und trotzdem eindeutig die hoehere Ebene — Monospace-Versalien sind
   in diesem Entwurf durchgehend die Strukturstimme (Kapitelmarken,
   Ziffern, Feldbeschriftungen). */
.gruppe{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(.88rem,.75rem + .5vw,1.05rem);line-height:1.35;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dunkel);
  margin:clamp(3rem,5vw,4.2rem) 0 0;padding-bottom:1rem;
}
.register .gruppe:first-of-type{margin-top:1.8rem;}
/* Der Registerstrich gehoert zur Zeile darunter, nicht zum Titel —
   deshalb sitzt er am Kopf, nicht an der Gruppe. */
.gruppe + .pos-kopf{border-top:1px solid var(--linie-hell);}
.pos-kopf{
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linie-hell);
  font:inherit;color:inherit;cursor:pointer;padding:1.55rem 0;
  display:grid;grid-template-columns:4rem minmax(0,1fr) 2rem;gap:1.4rem;align-items:baseline;
}
.pos-kopf .nr{font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;color:var(--gold-dunkel);}
.pos-kopf .titel{
  font-family:var(--serif);font-weight:400;
  font-size:var(--eintrag);line-height:1.28;transition:color .3s;
}
.pos-kopf .zeichen{justify-self:end;color:var(--tinte-30);font-family:var(--mono);
                   transition:transform .4s var(--kurve),color .3s;}
.pos-kopf:hover .titel,.pos-kopf[aria-expanded=true] .titel{color:var(--navy);}
.pos-kopf:hover .zeichen,.pos-kopf[aria-expanded=true] .zeichen{color:var(--gold-dunkel);}
.pos-kopf[aria-expanded=true] .zeichen{transform:rotate(45deg);}

.pos-inhalt{border-bottom:1px solid var(--linie-hell);}
.js .pos-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--kurve);}
.js .pos-inhalt.offen{grid-template-rows:1fr;}
.js .pos-inhalt > div{overflow:hidden;}
.pos-inhalt .innen{padding:1.5rem 0 2.1rem 5.4rem;max-width:56rem;}  /* oben Luft zur Trennlinie: ohne sie klebt der erste Satz an der Kante */
.js .pos-inhalt .innen{opacity:0;transition:opacity .4s var(--kurve) .1s;}
.js .pos-inhalt.offen .innen{opacity:1;}
.zweck{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1.2rem;margin-top:1.2rem;
       padding-top:1.1rem;border-top:1px solid var(--linie-hell);}
.zweck dt{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.13em;text-transform:uppercase;
          color:var(--gold-dunkel);padding-top:.3rem;}
.zweck dd{margin:0;font-size:.92rem;color:var(--tinte-60);max-width:52ch;}
@media (max-width:640px){
  .pos-kopf{grid-template-columns:2.7rem minmax(0,1fr) 1.4rem;gap:.9rem;}
  .pos-inhalt .innen{padding-left:3.6rem;}
  .zweck{grid-template-columns:1fr;gap:.15rem;}
}

/* ============================================================
   03 Fuer wen — vier Kacheln im Quadrat, aufklappbar
   Reihenfolge nach Vorgabe:
   links oben STB & WP · rechts oben RA & Insolvenzverwalter
   links unten Unternehmen & GF · rechts unten Personal & Betriebsrat
   ============================================================ */
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--navy-linie);
         border:1px solid var(--navy-linie);}
@media (max-width:760px){.kacheln{grid-template-columns:1fr;}}
.kachel{background:var(--navy-tief);display:flex;flex-direction:column;transition:background .3s;}
/* Die geoeffnete Kachel liegt als Ganzes eine Stufe heller. */
.kachel.kachel-offen{background:var(--navy);}
.kachel.kachel-offen .kachel-kopf{background:none;}
.kachel-kopf{
  width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:clamp(1.8rem,3.4vw,2.6rem);display:grid;gap:.9rem;transition:background .3s;
}
.kachel-kopf:hover,.kachel-kopf[aria-expanded=true]{background:var(--navy);}
.kachel-kopf .knr{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.14em;color:var(--gold);}
.kachel-kopf h3{font-size:var(--eintrag);transition:color .3s;}
.kachel-kopf:hover h3,.kachel-kopf[aria-expanded=true] h3{color:var(--gold-hell);}
.kachel-kopf .lage{color:var(--creme-dim);font-size:.93rem;margin:0;max-width:36ch;}
.kachel-kopf .mehr{
  font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.12em;text-transform:uppercase;
  color:var(--creme-schwach);display:flex;align-items:center;gap:.6rem;margin-top:.4rem;
  transition:color .3s;
}
.kachel-kopf .mehr .zeichen{transition:transform .4s var(--kurve);display:inline-block;}
.kachel-kopf:hover .mehr{color:var(--gold);}
.kachel-kopf[aria-expanded=true] .mehr{color:var(--gold);}
.kachel-kopf[aria-expanded=true] .mehr .zeichen{transform:rotate(45deg);}

.js .kachel-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--kurve);}
.js .kachel-inhalt.offen{grid-template-rows:1fr;}
.js .kachel-inhalt > div{overflow:hidden;}
.kachel-inhalt .innen{padding:clamp(1.1rem,2.2vw,1.5rem) clamp(1.8rem,3.4vw,2.6rem) clamp(1.8rem,3.4vw,2.6rem);}
.js .kachel-inhalt .innen{opacity:0;transition:opacity .4s var(--kurve) .1s;}
.js .kachel-inhalt.offen .innen{opacity:1;}
.kachel-inhalt p{color:var(--creme-dim);font-size:.93rem;}
.kachel-inhalt .fragen-titel{
  font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.13em;text-transform:uppercase;
  color:var(--creme-schwach);margin:1.6rem 0 .8rem;
}
.kachel-inhalt ul{margin:0;padding:0;list-style:none;}
.kachel-inhalt li{
  padding:.5rem 0 .5rem 1.4rem;position:relative;font-size:.9rem;color:var(--creme-dim);
  border-top:1px solid var(--navy-linie);
}
.kachel-inhalt li::before{content:"–";position:absolute;left:0;color:var(--gold);}
/* Eine einzige, neutrale Aktion — keine vier verschiedenen Zurufe.
   Die Auswahl der Kachel wird ins Formular weitergereicht. */
.uebermitteln{
  display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--gold-hell);
  border-bottom:1px solid var(--gold);padding-bottom:.3rem;transition:color .25s;
}
.uebermitteln::after{content:" →";}
.uebermitteln:hover{color:#fff;}

/* ============================================================
   04 Ueber mich
   ============================================================ */
/* Das Foto schliesst unten mit dem Textblock ab. Eine feste
   aspect-ratio kann das nicht: gemessen braeuchte es 0,93 bei 1440 px,
   0,81 bei 1200 und 0,50 bei 901 — der Textblock waechst nach unten,
   waehrend die Spalte schmaler wird. Bei 4/5 hing das Bild oben 92 px
   ueber, unten blieb es 261 px zu kurz.
   Loesung: das Bild bekommt gar keine eigene Hoehe mehr. Es liegt
   absolut in seinem Rahmen, der Rahmen wird von der Rasterzeile
   gedehnt — und deren Hoehe bestimmt der Text. Damit sitzt die
   Unterkante bei jeder Breite exakt. */
.person-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
               gap:clamp(2.5rem,6vw,5.5rem);align-items:stretch;}
.person-bild{position:relative;overflow:hidden;background:var(--creme-2);
             /* Notbremse, falls der Text spaeter stark gekuerzt wird:
                lieber etwas ueber der Unterkante als ein Briefschlitz. */
             min-height:26rem;}
.person-bild img{position:absolute;inset:0;width:100%;height:100%;
                 object-fit:cover;object-position:center 20%;
                 filter:grayscale(1) contrast(1.04);}
/* Einspaltig steht das Bild ueber dem Text und hat keine Zeile mehr,
   die es dehnen koennte — dort braucht es seine eigene Hoehe zurueck. */
@media (max-width:900px){
  .person-raster{grid-template-columns:1fr;align-items:start;}
  .person-bild{aspect-ratio:4/5;min-height:0;}
  .person-bild img{position:static;}
}
.person h2{font-size:var(--titel);}
/* Die Bestellung laeuft in Monospace, aber NICHT in Versalien:
   Versalien tragen im Entwurf kurze Metadaten. Ueber sechs Zeilen
   werden sie zur Mauer. */
.person-rolle{
  font-family:var(--mono);font-size:var(--mark-l);letter-spacing:.01em;
  color:var(--gold-dunkel);margin:1.4rem 0 1.9rem;line-height:1.72;max-width:70ch;
}
/* Bestellung und Ausbildung sind zwei Aussagen, nicht eine mit
   Trennpunkt. Auf Wunsch als eigene Bloecke. */
.person-rolle span{display:block;}
.person-rolle span + span{margin-top:.55em;}

/* Belege: vier Nachweise mit Haken. Der erste traegt den Link zur
   Gerichtssachverstaendigen-Suche. */
.belege{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.8rem;border-top:1px solid var(--linie-hell);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem 2.5rem;
}
.beleg{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.85rem;align-items:start;}
.beleg svg{margin-top:.42rem;}
.beleg b{display:block;font-weight:500;font-size:.92rem;color:var(--tinte);}
.beleg span{font-size:.86rem;color:var(--tinte-60);line-height:1.55;}
.beleg a{color:var(--gold-dunkel);text-underline-offset:.2em;}
.beleg a::after{content:" ↗";font-size:.8em;}

/* ============================================================
   05 Klare Rollen — Zaesur auf Navy, Zitat als Auftakt
   ============================================================ */
.rollen-titel{font-size:var(--titel);margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.zitat{max-width:26ch;font-family:var(--serif);font-weight:300;font-style:italic;
       /* Nie groesser als eine Kapitelueberschrift. Ohne diese Deckelung
          ueberholt das Zitat sie im Tablet-Band (38,4 gegen 34,2) — dieselbe
          Rangumkehr wie frueher zwischen Hero und Kapiteln. 0,82 ist kein
          gegriffener Wert: es ist das Verhaeltnis, das die beiden am grossen
          Schirm ohnehin haben (48 zu 59,2). Auf Desktop aendert die Zeile
          deshalb nichts, sie faengt nur die schmalen Faelle ab. */
       font-size:min(var(--zitat),calc(var(--titel) * .82));
       line-height:1.25;margin:0;position:relative;}
.zitat-block{position:relative;padding-left:clamp(2.5rem,5vw,4.5rem);}
.zitat-block::before{
  content:"„";position:absolute;left:0;top:-.15em;font-family:var(--serif);
  font-size:var(--zitat-marke);line-height:1;color:var(--gold);opacity:.55;
}
.zitat-wer{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.15em;text-transform:uppercase;
           color:var(--creme-schwach);margin-top:1.8rem;display:flex;align-items:center;gap:1rem;}
.zitat-wer::before{content:"";width:2.2rem;height:1px;background:var(--gold);}

.rollen{
  margin-top:clamp(3.5rem,7vw,6rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;
  background:var(--navy-linie);border-top:1px solid var(--navy-linie);
  border-bottom:1px solid var(--navy-linie);
}
.rolle{background:var(--navy-tief);padding:2rem clamp(1.2rem,2.5vw,2rem);}
.rolle h3{font-size:1.12rem;margin-bottom:.9rem;}
.rolle p{font-size:.89rem;color:var(--creme-dim);margin:0;}

/* ============================================================
   06 Publikationen & Seminare
   ============================================================ */
@media (max-width:700px){.pub{grid-template-columns:minmax(0,1fr) 1.5rem;}}

/* ---- Publikation mit Cover: Bildhoehe folgt dem Textblock ---- */
.pub-buch{
  display:flex;align-items:center;gap:clamp(1.6rem,3.5vw,2.8rem);
  background:var(--creme-2);padding:clamp(1.8rem,3.5vw,2.6rem);
  border-left:3px solid var(--navy);
  text-decoration:none;color:inherit;
  transition:transform .35s var(--kurve),box-shadow .35s var(--kurve);
}
.pub-buch:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(14,26,43,.14);}
/* Feste Bildhoehe, Breite folgt natuerlich daraus. Bewusst KEIN
   aspect-ratio auf einem gestretchten Flex-Item (andere Engines loesen das
   anders auf und schneiden dann oben und unten ab) und kein
   width:auto + height:100% (zirkulaer, kollabiert auf Breite 0).
   Die Hoehe liegt bei der natuerlichen Texthoehe (~209px), das Cover ist
   ein Beleg neben dem Text, kein fuellendes Element. */
.pub-buch .pub-bild{flex:0 0 auto;display:block;line-height:0;}
.pub-buch .pub-bild img{display:block;height:clamp(11rem,15vw,14rem);width:auto;
  box-shadow:0 8px 22px rgba(14,26,43,.18);}
.pub-buch .pub-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  justify-content:center;}
.pub-buch .quelle{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.13em;
  text-transform:uppercase;color:var(--tinte-30);display:block;margin-bottom:.6rem;}
.pub-buch h3{font-size:clamp(1.15rem,.9rem + .9vw,1.7rem);line-height:1.2;margin:0 0 .6rem;
  transition:color .25s;}
.pub-buch p{font-size:.9rem;margin:0;}
.pub-buch .los{display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:var(--mark-m);
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy);transition:color .25s;}
.pub-buch:hover h3{color:var(--navy);}
.pub-buch:hover .los{color:var(--gold-dunkel);}
@media(max-width:720px){
  .pub-buch{flex-direction:column;}
  .pub-buch{align-items:flex-start;padding:clamp(1.4rem,4vw,2rem);}
  .pub-buch .pub-bild img{height:auto;width:100%;max-width:10rem;}
  .pub-buch .pub-text{padding:0;}
}

/* ---- Seminare als Register statt als Kaesten ---- */
.sem-liste{border-top:1px solid var(--linie-hell);margin-top:1.6rem;}
.sem-zeile{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.35rem 0;
  border-bottom:1px solid var(--linie-hell);align-items:start;}
.sem-zeile .nr{font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;
  color:var(--gold-dunkel);padding-top:.4rem;}
.sem-zeile h3{font-size:1.05rem;line-height:1.3;margin:0 0 .35rem;font-weight:400;
  hyphens:none;-webkit-hyphens:none;}
.sem-zeile p{font-size:.86rem;margin:0;color:var(--tinte-30);}

.zwischentitel{margin-top:clamp(3rem,6vw,4.5rem);font-size:clamp(1.4rem,1rem + 1.6vw,2rem);}
.nachtext{margin-top:clamp(2.5rem,5vw,3.5rem);}
/* „Kanzleien" darf nicht getrennt werden — ausdruecklicher Wunsch.
   min-height haelt Trennstrich und Text der drei Kacheln auf einer
   Linie, auch wenn eine Ueberschrift nur eine Zeile braucht. */
@media (max-width:640px){.seminar h3{min-height:0;}}

/* Flaeche statt Haarlinie, aber in derselben Farbe wie der Buchkasten:
   sichtbar abgesetzt vom Abschnittsgrund, ohne wie Navy den ganzen
   Abschnitt zu dominieren. Navy-Kante links stellt die Verbindung her. */
.faq-hinweis{
  margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.8rem,3.2vw,2.4rem) clamp(1.8rem,3.2vw,2.6rem);
  background:#fff;border:1px solid var(--gold);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;
  align-items:center;justify-content:space-between;
}
.faq-hinweis p{margin:0;max-width:44ch;}
.faq-hinweis .los{
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--gold-dunkel);border-bottom:1px solid var(--gold-dunkel);
  padding-bottom:.3rem;white-space:nowrap;transition:color .25s;
}
.faq-hinweis .los:hover{color:var(--navy);}
.faq-hinweis .los::after{content:" →";}

/* ============================================================
   07 Kontakt
   ============================================================ */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
                gap:clamp(2.5rem,6vw,5rem);align-items:start;}
@media (max-width:860px){.kontakt-raster{grid-template-columns:1fr;}}
.daten{margin:0;}
.daten dt{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.15em;text-transform:uppercase;
          color:var(--gold);margin-top:1.9rem;}
.daten dt:first-of-type{margin-top:0;}
.daten dd{margin:.45rem 0 0;color:var(--creme-dim);}
.daten dd a{color:var(--creme);text-decoration:none;border-bottom:1px solid var(--navy-linie);
            padding-bottom:.15rem;transition:border-color .25s,color .25s;}
.daten dd a:hover{border-bottom-color:var(--gold);color:var(--gold-hell);}

.form-titel{
  font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.13em;text-transform:uppercase;
  color:var(--creme-schwach);margin:0;
}

/* Auswahl statt Auswahlfeld: erst worum es geht, dann die Felder.
   Ohne JavaScript bleibt das gewoehnliche Auswahlfeld sichtbar. */
.auswahl{display:grid;gap:0;margin-bottom:1.4rem;}
.wahl{
  border-top:1px solid var(--navy-linie);background:none;border-left:0;border-right:0;border-bottom:0;
  font:inherit;color:var(--creme);cursor:pointer;text-align:left;padding:1.15rem 0;
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) 1.5rem;gap:1.2rem;align-items:center;
  transition:color .25s;
}
.wahl:last-of-type{border-bottom:1px solid var(--navy-linie);}
.wahl .wnr{font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;color:var(--creme-schwach);
           transition:color .25s;}
.wahl .wtext{font-family:var(--serif);font-weight:400;font-size:clamp(.98rem,.9rem + .5vw,1.22rem);}
.wahl .whaken{justify-self:end;opacity:0;color:var(--gold);transition:opacity .25s;}
.wahl:hover .wnr{color:var(--gold);}
.wahl[aria-pressed=true]{color:var(--gold-hell);}
.wahl[aria-pressed=true] .wnr{color:var(--gold);}
.wahl[aria-pressed=true] .whaken{opacity:1;}

.js .formstufe{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--kurve);}
.js .formstufe.offen{grid-template-rows:1fr;}
.js .formstufe > div{overflow:hidden;}
.js .formstufe .innen{opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--kurve) .12s,transform .45s var(--kurve) .12s;}
.js .formstufe.offen .innen{opacity:1;transform:none;}
/* Eigenes Raster mit eigenem Abstand: der gap des Formulars erreicht
   die Felder nicht, weil sie in der Aufklapp-Huelle liegen und damit
   keine Grid-Kinder des Formulars mehr sind. Ohne das kleben alle
   Felder der zweiten Stufe mit 0 px aneinander. */
.formstufe .innen{padding-top:2.2rem;display:grid;gap:1.35rem;}
/* Vor dem Absenden mehr Luft — der Knopf ist kein weiteres Feld. */
.formstufe .innen .zustimmung{margin-top:.5rem;}
.formstufe .innen button[type=submit]{margin-top:1.1rem;}

form{display:grid;gap:1.2rem;}
.feld{display:grid;gap:.45rem;}
/* Kontrast: die Beschriftungen liefen in Variante 01 mit 2,26:1 auf
   Navy und waren nicht lesbar. Hier 8,4:1. */
.feld label{font-family:var(--mono);font-size:var(--mark-s);letter-spacing:.13em;text-transform:uppercase;
            color:var(--creme-dim);}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:.95rem;padding:.9rem .95rem;border-radius:0;
  background:rgba(255,255,255,.06);border:1px solid var(--creme-schwach);color:var(--creme);
  /* Der Ruhe-Rahmen lag mit --navy-linie bei 1,18:1 gegen die Feldfuellung —
     das Feld war vor dem Hineinklicken kaum als Feld erkennbar. */
  transition:border-color .2s,box-shadow .2s;
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--creme-schwach);}
.feld-hinweis{margin:.55rem 0 0;font-size:.78rem;line-height:1.5;color:var(--creme-schwach);}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--creme);box-shadow:0 0 0 3px rgba(199,160,74,.7);}
/* Der hellere Ruhe-Rahmen zwingt den Fokus mitzuziehen: gegen creme-schwach
   kaeme Gold nur auf 1,39:1. Deshalb Creme am Rahmen (3,01:1 gegen den
   Ruhezustand) und das Gold im Ring, dort mit 0,7 Deckkraft bei 3,41:1
   gegen den Grund statt vorher 1,36:1. Die Goldnote bleibt, nur eine
   Ebene weiter aussen. */
.feld textarea{resize:vertical;min-height:7rem;}
.hp{position:absolute;left:-9999px;}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--creme-dim);}
.zustimmung input{margin-top:.25rem;}
.zustimmung a{color:var(--gold-hell);}
button[type=submit]{
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:var(--navy-tief);border:0;padding:1.1rem 2.2rem;cursor:pointer;
  justify-self:start;transition:background .22s,transform .22s;
}
button[type=submit]:hover{background:var(--gold-hell);transform:translateY(-2px);}
button[type=submit]::after{content:" →";}

/* ============================================================
   Fuss
   ============================================================ */
.fuss{border-top:1px solid var(--navy-linie);padding:clamp(3rem,6vw,4.5rem) 0 3rem;}
.fuss-oben{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem 2rem;align-items:start;}
@media (max-width:620px){.fuss-oben{grid-template-columns:1fr;}}
.fuss .siegel{flex:none;width:74px;height:74px;}
.fuss .siegel img{width:100%;height:100%;object-fit:contain;}
.fuss strong{font-weight:500;font-size:1.05rem;display:block;margin-bottom:.4rem;}
.fuss .titel{color:var(--creme-dim);font-size:.88rem;max-width:52ch;margin:0;}
.fuss-unten{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--navy-linie);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.06em;color:var(--creme-schwach);
}
.fuss-unten nav{display:flex;gap:1.6rem;}
.fuss-unten nav a{font-size:.8rem;letter-spacing:.04em;}
.fuss-unten a{color:var(--creme-dim);text-decoration:none;transition:color .2s;}
.fuss-unten a:hover{color:var(--gold-hell);}

/* ============================================================
   Bewegung — Handschrift aus Variante 03
   Alles haengt an .js auf <html>. Ohne JavaScript bleibt die
   gesamte Seite sichtbar; das Skript blendet nur ein.
   ============================================================ */
.js .auf{opacity:0;transform:translateY(18px);transition:opacity .8s var(--kurve),transform .8s var(--kurve);}
/* Ein einziges Bewegungsprinzip: alles setzt sich von unten. Die Intensitaet
   folgt dem Gewicht des Elements — schwere Bilder weiter und langsamer als
   Text, sonst wirkt es wie ein Block, der hochgeschoben wird.
   WICHTIG: diese Regeln stehen VOR der .da-Ruecksetzung. .js .portraet.auf
   hat dieselbe Spezifitaet wie .js .auf.da (je drei Klassen) — stuenden sie
   danach, bliebe das Portraet dauerhaft um 22px verschoben. */
.js h1.auf,.js h2.auf,.js h3.auf{transform:translateY(12px);transition-duration:.7s;}
.js .portraet.auf,.js .person-bild.auf{transform:translateY(22px);transition-duration:.95s;}
.js p.auf,.js form.auf,.js .daten.auf{transform:translateY(9px);transition-duration:.62s;}
.js .auf.da{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.js .auf{opacity:1;transform:none;transition:none;}}

/* Monospace-Metadaten tippen sich zeichenweise. --n setzt das Skript. */
.js .tipp{display:inline-block;white-space:nowrap;overflow:hidden;width:0;vertical-align:bottom;
          border-right:2px solid transparent;}
.js .tipp.da{animation:tippen calc(var(--n) * 42ms) steps(var(--n)) forwards,cursor .75s step-end 6;}
@keyframes tippen{to{width:var(--breite);}}
@keyframes cursor{0%,100%{border-right-color:transparent;}50%{border-right-color:var(--gold);}}

@media (prefers-reduced-motion:reduce){
  .js .tipp{width:auto;border-right-color:transparent;}
  .js .tipp.da{animation:none;}

  /* Aufklappen ist eine Groessenaenderung und damit genau die Art
     Bewegung, wegen der jemand diese Einstellung setzt. Auf- und
     zugeklappt wird weiterhin — nur ohne Fahrt. */
  .js .pos-inhalt,.js .kachel-inhalt,.js .formstufe,
  .js .pos-inhalt .innen,.js .kachel-inhalt .innen,.js .formstufe .innen{transition:none;}
  .js .formstufe .innen{transform:none;}
}

/* Sichtbarer Fokus fuer Tastaturbedienung */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.hell :focus-visible{outline-color:var(--gold-dunkel);}

/* ============================================================
   Unterseiten — Haeufige Fragen, Impressum, Datenschutz, Danke
   ============================================================ */
.unterseite{padding:clamp(9rem,14vw,12rem) 0 clamp(3rem,6vw,5rem);}
.unterseite h1{font-size:clamp(2rem,1rem + 4.2vw,4rem);max-width:20ch;}
.unterseite .vorspann{margin-top:1.8rem;max-width:52ch;}

.rechtstext{padding-bottom:clamp(4rem,8vw,7rem);}
.rechtstext h2{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);margin:clamp(2.5rem,5vw,3.5rem) 0 1rem;
               padding-top:1.4rem;border-top:1px solid var(--linie-hell);}
.rechtstext h3{font-size:1.05rem;margin:1.8rem 0 .7rem;font-weight:400;}
.rechtstext p,.rechtstext li{max-width:62ch;}
.rechtstext ul{margin:0 0 1.05em;padding-left:1.2rem;}
.rechtstext li{margin-bottom:.35rem;}
.rechtstext a{color:var(--gold-dunkel);text-underline-offset:.2em;}
.rechtstext .anschrift{font-style:normal;margin:0 0 1.05em;line-height:1.75;}
.rechtstext .stand{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.4rem;border-top:1px solid var(--linie-hell);
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinte-30);
}

/* Zurueck-Zeile oben auf jeder Unterseite */
.zurueck{
  font-family:var(--mono);font-size:var(--mark-m);letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--gold-dunkel);border-bottom:1px solid var(--linie-hell);
  padding-bottom:.3rem;display:inline-block;margin-bottom:2.2rem;
}
.zurueck::before{content:"← ";}
.dunkel .zurueck{color:var(--gold-hell);border-bottom-color:var(--navy-linie);}

/* Danke-Seite */
.danke{min-height:78svh;display:flex;align-items:center;}
.danke h1{max-width:16ch;}


/* ============================================================
   Gedaempfte zweite Formularstufe
   Sichtbar, aber erkennbar noch nicht dran. 0,5 ist bewusst gewaehlt:
   stark genug, dass der Unterschied eindeutig ist, mild genug, dass
   die Feldbeschriftungen lesbar bleiben.
   ============================================================ */
.formstufe.gedaempft > div {
  opacity: .5;
  filter: saturate(.6);
  transition: opacity .35s ease, filter .35s ease;
}
.formstufe.gedaempft {
  pointer-events: none;
  user-select: none;
}