/* bettina-baessler.de · Stil für alle Seiten · David (24), Aufgabe 829 · Stand 09.10.2026
   Quelle der Werte: 03 WISSEN/ci.md. Gestaltung: Leinwand https://claude.ai/artifact/PxsL23LCUrSZJJeeTCnPyj
   Schriften liegen auf dem eigenen Server, nie bei Google. */

@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-display:swap;src:url("schriften/schibsted-400.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:500;font-display:swap;src:url("schriften/schibsted-500.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:700;font-display:swap;src:url("schriften/schibsted-700.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-display:swap;src:url("schriften/schibsted-800.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url("schriften/plexmono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("schriften/plexmono-500.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:#161412;color:#F1ECE4;font-family:"Schibsted Grotesk",Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:#6F94FF;text-decoration:none;overflow-wrap:anywhere}
a:hover{color:#9DB6FF;text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #6F94FF;outline-offset:3px}
.hell{background:#F4F1EA;color:#141414}
.hell a{color:#0047AB}
.hell a:hover{color:#00337D}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.w{max-width:1200px;margin:0 auto;padding:0 48px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:#161412;border-bottom:1px solid #34312D}
.kopf-in{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.marke{color:#F1ECE4;font-size:18px;font-weight:800;letter-spacing:-0.01em;white-space:nowrap}
.marke:hover{color:#F1ECE4;text-decoration:none}
.q{display:inline-block;width:0.42em;height:0.42em;margin-left:0.32em;background:#0047AB}
.nav{display:flex;gap:28px;align-items:center}
.nav a{color:#D9D6CF;font-size:15px;font-weight:500}
.nav a.vorn{color:#6F94FF}
.nav a[aria-current]{color:#F1ECE4;box-shadow:inset 0 -2px 0 #0047AB;padding-bottom:4px}
.menue{display:none}
.menue summary{list-style:none;cursor:pointer;color:#F1ECE4;border:1px solid #34312D;border-radius:6px;font-size:15px;font-weight:500;padding:0 16px;height:44px;line-height:42px}
.menue summary::-webkit-details-marker{display:none}
.menue-liste{position:absolute;left:0;right:0;top:72px;display:flex;flex-direction:column;gap:18px;padding:24px 20px 32px;background:#161412;border-bottom:1px solid #34312D}
.menue-liste a{color:#F1ECE4;font-size:19px;font-weight:500}
.menue-liste a.vorn{color:#6F94FF}

/* Bildblöcke */
/* Hero: wie abgenommen (halbe Breite, mindestens 760 px hoch). Auf breiten Monitoren wächst die Höhe mit, damit das Foto nie zu einem Streifen um das Gesicht wird; ab 1200 px Fotobreite ist Schluss */
.hero{--fb:min(50vw,1200px);display:grid;grid-template-columns:minmax(0,1fr) var(--fb);min-height:max(760px,calc(var(--fb) * .85))}
.hero .foto img{object-position:50% 25%}
.hero-text{display:flex;flex-direction:column;justify-content:center;padding:96px 64px 96px max(48px,calc(50vw - 552px))}
.name{font-size:22px;font-weight:700;line-height:1.3;color:#6F94FF;margin-bottom:28px}
.trias{font-size:clamp(40px,3.9vw,58px);font-weight:800;line-height:1.04;letter-spacing:-0.02em;color:#F1ECE4;margin-bottom:36px}
.trias span{display:block}
.unterzeile{font-size:20px;line-height:1.55;color:#D9D6CF;max-width:28em}
.foto{position:relative;overflow:hidden;background:#161412}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.foto::after{content:"";position:absolute;top:0;bottom:0;width:42%;pointer-events:none}
.verlauf-links::after{left:0;background:linear-gradient(to right,#161412 0%,rgba(22,20,18,.92) 12%,rgba(22,20,18,.7) 30%,rgba(22,20,18,.4) 55%,rgba(22,20,18,.15) 80%,rgba(22,20,18,0) 100%)}
.verlauf-rechts::after{right:0;background:linear-gradient(to left,#161412 0%,rgba(22,20,18,.92) 12%,rgba(22,20,18,.7) 30%,rgba(22,20,18,.4) 55%,rgba(22,20,18,.15) 80%,rgba(22,20,18,0) 100%)}
.abo{--fb:min(50vw,1200px);display:grid;grid-template-columns:var(--fb) minmax(0,1fr);min-height:max(640px,calc(var(--fb) * .85))}
.abo-text{display:flex;flex-direction:column;justify-content:center;padding:120px max(48px,calc(50vw - 552px)) 120px 80px}

/* Abschnitte, Raster, Typografie */
.sektion{padding:128px 0}
.linie-oben{border-top:1px solid #34312D}
.zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.drei-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.h1-seite{font-size:clamp(44px,4.4vw,64px);font-weight:800;line-height:1.02;letter-spacing:-0.02em;color:#F1ECE4}
.h2{font-size:clamp(30px,2.8vw,40px);font-weight:700;line-height:1.15;letter-spacing:-0.01em;margin-bottom:48px}
.h3{font-size:24px;font-weight:700;line-height:1.25}
.h3-gross{font-size:26px;font-weight:700;line-height:1.25}
.statement{font-size:clamp(32px,3.6vw,52px);font-weight:800;line-height:1.1;letter-spacing:-0.015em}
.text{font-size:18px;line-height:1.65;color:#D9D6CF}
.hell .text{color:#3A3733}
.text + .text{margin-top:16px}
.gross{font-size:20px;line-height:1.65;color:#D9D6CF}
.leise{font-size:16px;color:#9A958C}
.hell .leise{color:#6E6A63}
.weiter{font-size:16px;font-weight:700;margin-top:20px}
.reihen{border-top:1px solid #D6CFC2}
.reihe{padding:28px 0;border-bottom:1px solid #D6CFC2;font-size:19px;line-height:1.55}
.reihe b{font-weight:700}
.reihe span{color:#3A3733}
.reihen-dunkel{border-top:1px solid #34312D}
.reihen-dunkel .reihe{border-bottom-color:#34312D;padding:40px 0}
.spalte{display:flex;flex-direction:column;border-top:2px solid #141414;padding-top:28px}
.spalte .h3{margin-bottom:14px}
.spalte .text{flex-grow:1;font-size:17px;line-height:1.6}
.karte{display:flex;flex-direction:column;gap:12px;padding:28px;background:#FFFFFF;border:1px solid #E2DCD0;border-radius:6px;color:#141414}
.hell a.karte{color:#141414}
.hell a.karte:hover{text-decoration:none;border-color:#0047AB}
.karte b{font-size:20px;line-height:1.3}
.karte i{font-style:normal;font-size:15px;line-height:1.5;color:#6E6A63}
.stempel{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:0.04em;color:#6F94FF}
.hell .stempel{color:#0047AB}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:28px}
.kopfzeile .weiter{margin-top:0}

/* Startseite: Abschnitte mit eigenem Abstand */
.abschnitt-faden{padding:128px 0}
.abschnitt-nachlesen{padding:56px 0 136px}
.abschnitt-arbeit{padding:128px 0 96px}
.abschnitt-arbeit .reihe:last-child{border-bottom:0;padding-bottom:0}
.abschnitt-stationen{padding:48px 0;border-top:1px solid #34312D;border-bottom:1px solid #34312D}
.abschnitt-kontakt{padding:112px 0 120px}

/* Formular */
.feld{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.feld input{flex:1 1 240px;min-width:0;height:52px;background:transparent;border:1px solid #5A564F;border-radius:6px;color:#F1ECE4;font:400 16px "Schibsted Grotesk",sans-serif;padding:0 16px}
.feld input::placeholder{color:#9A958C}
.knopf{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;background:#0047AB;color:#FFFFFF;border:0;border-radius:6px;font:700 16px "Schibsted Grotesk",sans-serif;cursor:pointer}
.knopf:hover{background:#0052C4;color:#FFFFFF;text-decoration:none}
.abo-inhalt{width:100%;max-width:540px;margin:0 auto}
.abo-form{margin-top:32px;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.abo-karte{background:#1F1C1A;border:1px solid #34312D;border-top:3px solid #0047AB;border-radius:6px;padding:32px}
.abo-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%}
.abo-feld{display:flex;flex-direction:column;gap:6px}
.abo-feld-voll{grid-column:1/-1}
.abo-feld label{font-size:14px;font-weight:500;color:#9A958C}
.abo-feld input{height:52px;width:100%;background:transparent;border:1px solid #5A564F;border-radius:6px;color:#F1ECE4;font:400 16px "Schibsted Grotesk",sans-serif;padding:0 16px}
.abo-feld input:focus{border-color:#6F94FF;outline:none}
.abo-einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:#D9D6CF;cursor:pointer;margin-top:4px}
.abo-einwilligung input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:#0047AB}
.abo-klein{font-size:13px;line-height:1.5;color:#9A958C}
.abo-klein a{color:#9A958C;text-decoration:underline}
.abo-form .knopf{margin-top:8px;width:100%}
.blau-linie{width:56px;height:3px;background:#0047AB;margin:28px 0}

/* Über mich */
.lese{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.lese p{font-size:19px;line-height:1.7;color:#2E2C29}
.lese .auftakt{font-size:24px;line-height:1.4;font-weight:700;color:#141414}
.schluss{margin-top:32px;padding-top:32px;border-top:3px solid #0047AB}
.schluss p{font-size:clamp(24px,2.4vw,30px);line-height:1.3;font-weight:700;color:#141414}
.block{padding:56px 0;border-top:1px solid #34312D}
.block:last-child{border-bottom:1px solid #34312D}
.zeile{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:24px;padding:16px 0;border-bottom:1px solid #34312D;font-size:17px;line-height:1.55}
.zeile:first-child{padding-top:0}
.jahr{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;color:#9A958C;padding-top:3px;white-space:nowrap}
.eintrag{color:#D9D6CF}
.liste p{padding:14px 0;border-bottom:1px solid #34312D;font-size:17px;line-height:1.55;color:#D9D6CF}
.liste p:first-child{padding-top:0}
.liste.gross p{font-size:19px;line-height:1.55}

/* Vorträge */
.gruppe{padding:40px 0;border-bottom:1px solid #D6CFC2}
.gruppe:first-child{border-top:1px solid #D6CFC2}
.themen p{font-size:19px;line-height:1.5;color:#141414;padding:12px 0;border-bottom:1px solid #E4DED2}
.themen p:first-child{padding-top:0}
.themen p:last-child{border-bottom:0;padding-bottom:0}
.platzhalter{display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;min-height:220px;border:1px dashed #5A564F;border-radius:6px;padding:24px;text-align:center}

/* Kontakt */
.wege{border-top:1px solid #34312D}
.weg{display:flex;flex-direction:column;gap:6px;padding:24px 0;border-bottom:1px solid #34312D}
.weg span{font-size:15px;color:#9A958C}
.weg p{font-size:21px;line-height:1.45;color:#F1ECE4}
.weg small{font-size:16px;line-height:1.5;color:#D9D6CF}
.kasten{margin-top:56px;padding:32px;background:#1F1C1A;border-radius:6px;border-top:3px solid #0047AB}

/* Texte: Liste und Artikel */
.textliste{display:flex;flex-direction:column;border-top:1px solid #D6CFC2}
.textliste a{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:32px;padding:28px 0;border-bottom:1px solid #D6CFC2;color:#141414}
.textliste a:hover{text-decoration:none}
.textliste a:hover b{color:#0047AB}
.textliste b{display:block;font-size:22px;line-height:1.3;margin-bottom:8px}
.textliste i{font-style:normal;font-size:17px;line-height:1.55;color:#3A3733}
.artikel{max-width:720px;margin:0 auto}
.artikel h1{font-size:clamp(32px,3.4vw,48px);font-weight:800;line-height:1.1;letter-spacing:-0.015em;color:#141414;margin:16px 0 40px}
.artikel h2{font-size:28px;font-weight:700;line-height:1.25;color:#141414;margin:48px 0 16px}
.artikel h3{font-size:22px;font-weight:700;line-height:1.3;color:#141414;margin:36px 0 12px}
.artikel p,.artikel li{font-size:19px;line-height:1.7;color:#2E2C29}
.artikel p{margin:0 0 22px}
.artikel ul,.artikel ol{margin:0 0 22px 1.2em}
.artikel li{margin-bottom:14px}
.artikel blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid #0047AB}
.artikel blockquote p{font-size:22px;line-height:1.5;color:#141414}
.video-block{margin:0 0 40px}
.video{position:relative;aspect-ratio:16/9;background-color:#161412;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.video::before{content:"";position:absolute;inset:0;background:rgba(22,20,18,.28);transition:background .2s}
.video:hover::before{background:rgba(22,20,18,.12)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-start{position:relative;gap:12px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.video-dreieck{display:inline-block;width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #FFFFFF}
.video-block figcaption{margin-top:12px;margin-bottom:20px;font-size:14px;line-height:1.5;color:#6E6A63}
.video-block figcaption a{color:#0047AB}

/* Fuß */
.fuss{border-top:1px solid #34312D;padding:32px 0}
.fuss-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.fuss nav{display:flex;gap:24px;font-size:14px;flex-wrap:wrap}
.fuss nav a{color:#9A958C}

/* Handy */
@media (max-width:900px){
  .w{padding:0 20px}
  .nav{display:none}
  .menue{display:block}
  .hero,.abo{grid-template-columns:1fr;min-height:0}
  .hero-text{padding:64px 20px 56px}
  .hero .foto{height:auto;aspect-ratio:1/1;max-height:62svh}
  .hero .foto img{object-position:50% 25%}
  .abo .foto{height:420px}
  .abo-text{padding:64px 20px}
  .foto::after{width:auto;left:0;right:0;height:16%}
  .verlauf-links::after{top:0;bottom:auto;background:linear-gradient(to bottom,#161412 0%,rgba(22,20,18,.55) 40%,rgba(22,20,18,0) 100%)}
  .verlauf-rechts::after{top:auto;bottom:0;background:linear-gradient(to top,#161412 0%,rgba(22,20,18,.55) 40%,rgba(22,20,18,0) 100%)}
  .zwei,.drei,.drei-k{grid-template-columns:1fr;row-gap:20px}
  .drei,.drei-k{row-gap:40px}
  .sektion{padding:80px 0}
  .abschnitt-nachlesen{padding:24px 0 72px}
  /* Handy: alle Abschnitte mit gleichem Abstand, auch wo die Quelle einen eigenen setzt */
  main > section:not(.hero):not(.abo):not(.abschnitt-stationen):not(.abschnitt-nachlesen){padding-top:72px !important;padding-bottom:72px !important}
  .reihen-dunkel .reihe{padding:28px 0}
  .abschnitt-stationen{padding:40px 0}
  .abschnitt-kontakt{padding:72px 0 80px}
  .zeile{grid-template-columns:1fr;row-gap:4px}
  .lese p,.artikel p,.artikel li{font-size:18px}
  .block{padding:40px 0}
  .gruppe{padding:32px 0}
  .themen p{font-size:18px}
  .weg p{font-size:19px}
  .textliste a{grid-template-columns:1fr;row-gap:8px}
  .abo-felder{grid-template-columns:1fr}
  .abo-karte{padding:24px 20px}
}