/* =========================================================
   Roland Eckardt — Onepager
   Editorial / Papier-Metapher. Light-first, druckoptimiert.
   ========================================================= */

/* Schriften lokal eingebunden. Kein Aufruf an fonts.googleapis.com oder
   fonts.gstatic.com, damit keine IP-Adressen an Dritte abfliessen und
   keine Einwilligung noetig wird. Subsets: latin + latin-ext. */
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-400-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;
}
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-400-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;
}
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/faustina-600-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;
}
@font-face{
  font-family:'Faustina';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/faustina-600-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-400-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/faustina-400-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/faustina-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/faustina-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/faustina-600-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;
}
@font-face{
  font-family:'Faustina';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/faustina-600-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;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-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;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-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;
}
@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;
}
@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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-300-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-300-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-400-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-400-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-600-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;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/ibm-plex-sans-600-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;
}


:root{
  /* Papier */
  --paper:      #F2EEE6;
  --paper-2:    #EAE4D8;
  --paper-3:    #E1DACB;
  /* Tiefe */
  --ink:        #0C1D24;
  --ink-2:      #142E38;
  --ink-3:      #1D3F4B;
  --ink-soft:   #3D4E56;   /* Fliesstext auf Papier — 7,5:1 */
  --ink-mute:   #5C676B;   /* Gedaempft auf hellem Grund — 5,0:1 */
  --ink-faint:  #8A9AA0;   /* Nur auf dunklem Grund — 5,9:1 */
  /* Akzente */
  --teal:       #0C6B65;
  --teal-l:     #12958C;
  --copper:     #B0522A;
  --rule:       #D5CDBD;
  --rule-dark:  rgba(242,238,230,.16);

  --shell: 1240px;
  --gut: clamp(1.25rem, 5vw, 5rem);

  --f-display: "Faustina", "Iowan Old Style", Charter, Georgia, serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.65;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.06; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }

::selection{ background:var(--teal); color:var(--paper); }

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* Grid-Kinder duerfen nicht ueber ihre Spalte hinauswachsen.
   Ohne min-width:0 sprengt der breiteste Inhalt (z.B. die Kennzahlenzeile
   im Kopf) auf schmalen Displays das Raster und wird abgeschnitten. */
.masthead__grid > *,
.profile__grid > *,
.field__grid > *,
.section-head > *,
.contact__grid > *,
.quals__grid > *{ min-width:0; }

/* Sprungmarke für Tastaturnutzung */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper);
  padding:.85rem 1.4rem; font-family:var(--f-mono); font-size:.8rem;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:3px solid var(--teal-l); outline-offset:3px; border-radius:2px; }

/* ---------- Mikrotypografie ---------- */
.label{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}
.serif-i{ font-family:var(--f-display); font-style:italic; }

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding-top:clamp(1.75rem,4.5vh,3rem);
  padding-bottom:clamp(3.5rem,8vh,5.5rem);
  overflow:hidden;
  isolation:isolate;
}
/* Tiefenschichten statt Farbverlauf-Klischee */
.masthead::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(18,149,140,.20), transparent 58%),
    radial-gradient(90% 70% at 12% 96%, rgba(12,107,101,.22), transparent 62%),
    linear-gradient(178deg, #0C1D24 0%, #0F2530 52%, #0B1A21 100%);
}
/* Feine Korn-Textur */
.masthead::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.masthead__grid{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
  align-items:end;
}
@media (min-width:900px){
  .masthead__grid{ grid-template-columns:minmax(0,1fr) clamp(210px,24vw,310px); }
}

.eyebrow{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--teal-l); margin-bottom:1.25rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--rule-dark); }

.masthead h1{
  font-family:var(--f-display);
  font-size:clamp(3rem, 11vw, 8.4rem);
  line-height:.92; letter-spacing:-.022em;
  margin-bottom:1.7rem;
}
.masthead h1 .ln{ display:block; }
.masthead h1 em{ font-style:italic; color:var(--teal-l); }

.role{
  font-size:clamp(1.05rem,2.1vw,1.45rem);
  line-height:1.45; font-weight:300;
  color:rgba(242,238,230,.86);
  max-width:none;
}
@media (min-width:900px){ .role{ max-width:34ch; } }
.role b{ font-weight:500; color:var(--paper); }

.meta-row{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; margin-top:1.6rem;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.meta-row span{ display:flex; align-items:center; gap:.55rem; }
.meta-row span::before{
  content:""; width:5px; height:5px; background:var(--teal-l);
  transform:rotate(45deg);
}

.avail{
  display:flex; align-items:baseline; gap:.7rem;
  margin-top:1.4rem; max-width:min(46ch,100%);
  font-size:.95rem; line-height:1.5; color:rgba(242,238,230,.9);
}
.avail__dot{
  flex:none; width:8px; height:8px; margin-top:.45rem;
  border-radius:50%; background:var(--teal-l);
  box-shadow:0 0 0 4px rgba(18,149,140,.22);
}

.baths{ margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--rule); }
.baths .label{ display:block; margin-bottom:1rem; }
.baths__text{ max-width:min(62ch,100%); color:var(--ink-soft); }

.portrait{
  position:relative; width:100%; aspect-ratio:1;
  justify-self:start; max-width:min(52vw, 190px);
}
@media (min-width:900px){
  .portrait{ justify-self:end; max-width:310px; }
}
.portrait img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%;
  filter:saturate(.94) contrast(1.04);
}
.portrait::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid var(--rule-dark);
}
.portrait::after{
  content:""; position:absolute; inset:-30px; border-radius:50%;
  border:1px dashed rgba(18,149,140,.28);
  animation:spin 90s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Wasserlinie als Übergang */
.waterline{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  width:200%; height:clamp(36px,5vw,72px); display:block;
  animation:drift 26s linear infinite;
}
.waterline path{ fill:var(--paper); }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   KENNZAHLEN
   ========================================================= */
.figures{ background:var(--paper); padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2.5rem); }
.figures__grid{
  display:grid; gap:1px; background:var(--rule);
  border-block:1px solid var(--rule);
  grid-template-columns:repeat(2,1fr);
}
/* Acht Kacheln gehen in zwei und vier Spalten restlos auf. */
@media (min-width:680px){ .figures__grid{ grid-template-columns:repeat(4,1fr); } }

.fig{
  background:var(--paper); padding:1.5rem 1.15rem 1.35rem;
  display:flex; flex-direction:column; gap:.45rem;
  transition:background .25s var(--ease);
}
.fig:hover{ background:var(--paper-2); }
.fig__n{
  display:block; overflow:hidden; padding-bottom:.08em;
  font-family:var(--f-mono); font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.35rem); line-height:1.05;
  letter-spacing:-.04em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* Die Zahl steht sofort korrekt im DOM und fährt nur hinter einer Kante hoch.
   Verschoben wird sie ausschliesslich, wenn JavaScript laeuft — sonst bliebe
   sie ohne den Reveal dauerhaft hinter der Maske. */
.fig__n i{ display:block; font-style:normal; }
.js .fig__n i{ transform:translateY(110%); }
.js .rv.is-in .fig__n i{ transform:none; transition:transform .75s var(--ease) .1s; }
@media (prefers-reduced-motion: reduce){ .js .fig__n i{ transform:none !important; } }
.fig__l{
  font-size:.82rem; line-height:1.35; color:var(--ink-soft);
  text-wrap:balance;
}

/* =========================================================
   PROFIL
   ========================================================= */
.profile{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.profile__grid{ display:grid; gap:clamp(1.5rem,4vw,4rem); grid-template-columns:1fr; }
@media (min-width:900px){ .profile__grid{ grid-template-columns:14rem minmax(0,1fr); } }

.profile__lead{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,3.1vw,2.25rem);
  line-height:1.3; letter-spacing:-.012em;
  margin-bottom:1.6rem; text-wrap:pretty;
}
.profile__lead em{ font-style:italic; color:var(--teal); }
.profile__body{ max-width:min(62ch,100%); color:var(--ink-soft); }
.profile__body strong{ color:var(--ink); font-weight:500; }

/* =========================================================
   KOMPETENZFELDER
   ========================================================= */
.fields{ border-top:1px solid var(--rule); }

.field{ border-bottom:1px solid var(--rule); padding-block:clamp(2.75rem,6vw,4.5rem); }
.field__grid{ display:grid; gap:clamp(1.25rem,3.5vw,3.5rem); grid-template-columns:1fr; }
@media (min-width:900px){ .field__grid{ grid-template-columns:20rem minmax(0,1fr); } }

.field__aside{ align-self:start; }
@media (min-width:900px){ .field__aside{ position:sticky; top:2.5rem; } }

.field__num{
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; color:var(--teal); display:block; margin-bottom:.9rem;
}
.field__title{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  line-height:1.08; letter-spacing:-.015em; margin-bottom:.75rem;
  text-wrap:balance;
}
.field__kicker{ font-size:.95rem; color:var(--ink-mute); line-height:1.5; }
@media (min-width:900px){ .field__kicker{ max-width:26ch; } }

.field__body{ max-width:min(64ch,100%); }
.field__body > p{ color:var(--ink-soft); }
.field__body strong{ color:var(--ink); font-weight:500; }

/* Belegkarten */
.beleg{
  margin:1.6rem 0; padding:1.3rem 1.4rem 1.35rem;
  background:var(--paper-2);
  border-left:2px solid var(--teal);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.beleg:hover{ background:var(--paper-3); transform:translateX(3px); }
.beleg__t{
  display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  margin-bottom:.55rem;
}
.beleg__t .label{ color:var(--teal); }
.beleg__t h3{ font-size:1rem; font-weight:600; letter-spacing:0; line-height:1.35; }
.beleg p{ font-size:1rem; color:var(--ink-soft); }

/* Aufzählungen als Fakten-Liste */
.facts{ list-style:none; margin:1.4rem 0; padding:0; }
.facts li{
  position:relative; padding:.7rem 0 .7rem 1.65rem;
  border-top:1px solid var(--rule); font-size:1rem; color:var(--ink-soft);
}
.facts li:last-child{ border-bottom:1px solid var(--rule); }
.facts li::before{
  content:""; position:absolute; left:0; top:1.22rem;
  width:6px; height:6px; background:var(--teal); transform:rotate(45deg);
}
.facts strong{ color:var(--ink); font-weight:500; }

/* Schlagwortleiste */
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.3rem 0 0; padding:0; list-style:none; }
.tags li{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em;
  padding:.36rem .72rem; border:1px solid var(--rule); color:var(--ink-mute);
  background:var(--paper); border-radius:2px;
}

/* =========================================================
   ZWEITE SÄULE — invertiert
   ========================================================= */
.pillar{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(3.5rem,9vw,7rem);
  position:relative; overflow:hidden; isolation:isolate;
}
.pillar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 100% at 88% 0%, rgba(12,107,101,.30), transparent 60%),
    linear-gradient(180deg,#0B1A21,#12282F);
}
.pillar .field__num{ color:var(--teal-l); }
.pillar .field__kicker{ color:rgba(242,238,230,.55); }
.pillar .field__body > p{ color:rgba(242,238,230,.80); }
.pillar .field__body strong{ color:var(--paper); }
.pillar .facts li{ border-color:var(--rule-dark); color:rgba(242,238,230,.78); }
.pillar .facts li::before{ background:var(--teal-l); }
.pillar .facts strong{ color:var(--paper); }
.pillar .tags li{ border-color:var(--rule-dark); background:transparent; color:rgba(242,238,230,.78); }
.pillar .beleg{
  background:rgba(242,238,230,.05); border-left-color:var(--teal-l);
}
.pillar .beleg:hover{ background:rgba(242,238,230,.09); }
.pillar .beleg h3{ color:var(--paper); }
.pillar .beleg p{ color:rgba(242,238,230,.74); }
.pillar .beleg strong{ color:var(--paper); font-weight:600; }
.pillar .beleg__t .label{ color:var(--teal-l); }

.bridge{
  margin-top:2.5rem; padding:1.6rem 0 0; border-top:1px solid var(--rule-dark);
  font-family:var(--f-display); font-size:clamp(1.25rem,2.6vw,1.85rem);
  line-height:1.32; color:var(--paper); max-width:min(48ch,100%);
}
.bridge em{ font-style:italic; color:var(--teal-l); }

/* =========================================================
   WERDEGANG
   ========================================================= */
.cv{ padding-block:clamp(3rem,8vw,6rem); }
.section-head{
  display:grid; gap:1rem; align-items:baseline; margin-bottom:2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .section-head{ grid-template-columns:20rem minmax(0,1fr); } }
.section-head h2{
  font-family:var(--f-display); font-size:clamp(1.7rem,3.5vw,2.6rem);
  letter-spacing:-.015em; line-height:1.08;
}
.section-head p{ color:var(--ink-mute); font-size:.95rem; max-width:min(44ch,100%); }

.tl{ border-top:1px solid var(--rule); }
.tl__row{
  display:grid; gap:.25rem 2rem; grid-template-columns:1fr;
  padding:1.15rem 0; border-bottom:1px solid var(--rule);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
@media (min-width:760px){
  .tl__row{ grid-template-columns:11rem minmax(0,1fr) auto; align-items:baseline; }
}
.tl__row:hover{ background:var(--paper-2); }
@media (min-width:760px){ .tl__row:hover{ padding-left:.7rem; } }
.tl__when{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em;
  color:var(--teal); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.tl__what{ font-size:1.02rem; font-weight:500; }
.tl__what small{ display:block; font-family:var(--f-body); font-weight:400; font-size:.9rem; color:var(--ink-soft); margin-top:.15rem; letter-spacing:0; }
.tl__row--lead .tl__what{ font-family:var(--f-display); font-size:1.3rem; font-weight:500; letter-spacing:-.005em; }
.tl__tag{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* =========================================================
   QUALIFIKATIONEN
   ========================================================= */
.quals{ background:var(--paper-2); padding-block:clamp(3rem,8vw,6rem); border-block:1px solid var(--rule); }
.quals__grid{ display:grid; gap:2.5rem clamp(2rem,4vw,4rem); grid-template-columns:1fr; }
@media (min-width:760px){ .quals__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .quals__grid{ grid-template-columns:repeat(3,1fr); } }

.qgroup h3{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
  padding-bottom:.7rem; border-bottom:1px solid var(--rule); margin-bottom:.9rem;
}
.qgroup ul{ list-style:none; margin:0; padding:0; }
.qgroup li{
  font-size:.95rem; line-height:1.55; color:var(--ink-soft);
  padding:.42rem 0; display:flex; gap:.9rem; justify-content:space-between;
}
.qgroup li b{ font-weight:500; color:var(--ink); }
/* Schlagwortleisten in den Qualifikationsspalten: .qgroup li würde sonst
   die seitliche Polsterung von .tags li überschreiben (gleiche Spezifität, später notiert). */
.qgroup .tags{ margin-top:.9rem; }
.qgroup .tags li{
  display:inline-flex; justify-content:center;
  padding:.36rem .72rem; font-size:.76rem; line-height:1.5;
  color:var(--ink-mute);
}
.qgroup li span{
  font-family:var(--f-mono); font-size:.76rem; color:var(--ink-mute);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}

/* =========================================================
   PERSON + KONTAKT
   ========================================================= */
.person{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.person p.label{ font-family:var(--f-mono); font-size:.7rem; line-height:1.5; max-width:none; }
.person p{ font-family:var(--f-display); font-size:clamp(1.3rem,2.8vw,1.95rem); line-height:1.35; max-width:min(40ch,100%); }
.person em{ font-style:italic; color:var(--teal); }

.contact{ background:var(--ink); color:var(--paper); padding-block:clamp(3.5rem,8vw,6rem); }
.contact__grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:end; }
@media (min-width:860px){ .contact__grid{ grid-template-columns:minmax(0,1fr) auto; } }
.contact h2{
  font-family:var(--f-display); font-size:clamp(2rem,5.4vw,3.8rem);
  line-height:1.05; letter-spacing:-.02em; margin-bottom:1.2rem;
}
.contact h2 em{ font-style:italic; color:var(--teal-l); }
.contact__note{ color:rgba(242,238,230,.62); max-width:min(40ch,100%); font-size:.95rem; }

.links{ display:flex; flex-direction:column; gap:.15rem; list-style:none; margin:0; padding:0; }
.links a{
  display:flex; align-items:center; justify-content:space-between; gap:2.5rem;
  padding:.95rem 0; border-bottom:1px solid var(--rule-dark);
  text-decoration:none; font-size:1.05rem;
  transition:color .22s var(--ease), padding-left .22s var(--ease);
}
.links a:hover{ color:var(--teal-l); padding-left:.5rem; }
.links a .label{ color:var(--ink-faint); }
.links a:hover .label{ color:var(--teal-l); }

.colophon{
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--rule-dark);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.colophon a{ text-decoration:none; }
.colophon a:hover{ color:var(--teal-l); }

/* =========================================================
   NAVIGATION (Scroll-Spy, ab Desktop)
   ========================================================= */
.rail{
  position:fixed; left:1.35rem; top:50%; transform:translateY(-50%);
  z-index:40; display:none; flex-direction:column; gap:.1rem;
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.rail.is-on{ opacity:1; pointer-events:auto; }
@media (min-width:1320px){ .rail{ display:flex; } }
.rail a{
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
  padding:.5rem 0; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.12em; color:var(--ink-mute);
  transition:color .22s var(--ease);
}
.rail a::before{
  content:""; width:14px; height:1px; background:currentColor;
  transition:width .28s var(--ease);
}
.rail a:hover{ color:var(--ink); }
.rail a:hover::before{ width:26px; }
.rail a.is-active{ color:var(--teal); }
.rail a.is-active::before{ width:32px; background:var(--teal); }
.rail__txt{ opacity:0; transform:translateX(-4px); transition:opacity .28s var(--ease), transform .28s var(--ease); }
.rail a:hover .rail__txt, .rail a.is-active .rail__txt{ opacity:1; transform:none; }

/* =========================================================
   REVEAL
   ========================================================= */
/* Ohne die Klasse .js am Wurzelelement bleibt alles sichtbar. So ist die Seite
   auch dann vollstaendig lesbar, wenn JavaScript aus ist oder main.js nicht laedt. */
.js .rv{ opacity:0; transform:translateY(18px); }
.js .rv.is-in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.is-in.d1{ transition-delay:.07s; }
.js .rv.is-in.d2{ transition-delay:.14s; }
.js .rv.is-in.d3{ transition-delay:.21s; }
.js .rv.is-in.d4{ transition-delay:.28s; }

@media (prefers-reduced-motion: reduce){
  .js .rv,.js .rv.is-in{ opacity:1; transform:none; transition:none; }
  .portrait::after, .waterline{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* =========================================================
   RECHTSSEITEN
   ========================================================= */
.legal-head{ background:var(--ink); color:var(--paper); padding-block:1.1rem; }
.legal-head__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.legal-back{
  font-family:var(--f-display); font-size:1.35rem; text-decoration:none;
  color:var(--paper); transition:color .22s var(--ease);
}
.legal-back:hover{ color:var(--teal-l); }
.legal-head .label{ color:var(--ink-faint); }

.legal{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.legal__title{
  font-family:var(--f-display); font-size:clamp(2rem,5.4vw,3.2rem);
  line-height:1.06; letter-spacing:-.02em; margin-bottom:1.2rem; hyphens:auto;
}
.legal__lead{
  font-family:var(--f-display); font-size:clamp(1.15rem,2.4vw,1.6rem);
  line-height:1.35; max-width:min(46ch,100%); color:var(--ink);
  padding-bottom:2rem; border-bottom:1px solid var(--rule); margin-bottom:0;
}
.legal__sec{ padding-block:1.9rem; border-bottom:1px solid var(--rule); }
.legal__sec h2{
  font-family:var(--f-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  margin-bottom:.9rem;
}
.legal__sec h3{
  font-size:1rem; font-weight:600; letter-spacing:0; line-height:1.4;
  margin:1.5rem 0 .5rem; color:var(--ink);
}
.legal__sec p{ max-width:min(68ch,100%); color:var(--ink-soft); }
.legal__sec strong{ color:var(--ink); font-weight:500; }
.legal__sec a{ color:var(--teal); text-underline-offset:.2em; }
.legal__sec ul{ margin:0 0 1.1em; padding-left:1.15rem; max-width:min(68ch,100%); }
.legal__sec li{ color:var(--ink-soft); padding:.16rem 0; }
.legal__sec li::marker{ color:var(--teal); }
.legal__stand{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--ink-mute) !important;
}
@media (min-width:760px){
  .legal__sec{
    display:grid; grid-template-columns:14rem minmax(0,1fr);
    column-gap:2.5rem; row-gap:0;
  }
  .legal__sec > *{ min-width:0; }
  .legal__sec h2{ grid-column:1; grid-row:1; align-self:start; margin:0; }
  .legal__sec > :not(h2){ grid-column:2; }
  .legal__sec h3:first-of-type{ margin-top:1.2rem; }
}

/* =========================================================
   DRUCK — die Seite als saubere PDF-Anlage
   ========================================================= */
@media print{
  @page{ margin:14mm 13mm; }

  /* Hintergründe und Akzentfarben müssen mitgedruckt werden */
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }

  html,body{ background:#fff; color:#000; font-size:9.5pt; line-height:1.42; }
  .shell{ max-width:none; padding-inline:0; }

  .rail,.waterline,.skip,.portrait::after,.portrait::before{ display:none !important; }
  /* Gedruckt bleibt nur die E-Mail: "Als PDF speichern" ergibt auf Papier keinen Sinn,
     und ohne die LinkedIn-Zeile passt der Fussbereich noch auf die letzte Textseite. */
  .links li:not(:first-child){ display:none; }

  /* ---- Masthead ---- */
  .masthead{
    background:#fff !important; color:#000 !important;
    padding:0 0 5mm !important; border-bottom:1.2pt solid #000; margin-bottom:6mm;
  }
  .masthead::before,.masthead::after,.pillar::before{ display:none !important; }
  .masthead__grid{ grid-template-columns:1fr 30mm !important; gap:8mm !important; align-items:start; }
  .masthead h1{ font-size:30pt; margin-bottom:3mm; }
  .masthead h1 em{ color:#000; }
  .eyebrow{ color:#000 !important; margin-bottom:4mm; font-size:7pt; }
  .eyebrow::after{ background:#bbb; }
  .role{ font-size:10.5pt; color:#222 !important; max-width:none; }
  .role b{ color:#000 !important; font-weight:600; }
  .meta-row{ margin-top:4mm; color:#444 !important; font-size:7pt; gap:.4rem 1rem; }
  .portrait{ max-width:30mm; }

  /* ---- Kennzahlen ---- */
  .figures{ background:#fff !important; padding:0 0 6mm !important; break-inside:avoid; }
  .figures__grid{
    background:#fff !important; gap:0 !important;
    border:none !important; break-inside:avoid;
    grid-template-columns:repeat(4,1fr) !important;
  }
  .fig{
    background:#fff !important; padding:1.5mm 4mm !important;
    border-right:.5pt solid #ccc;
  }
  /* Aussenkanten buendig zum Satzspiegel, Trennstriche innen beidseitig frei */
  .fig:first-child{ padding-left:0 !important; }
  .fig:last-child{ padding-right:0 !important; border-right:none; }
  .fig__n{ font-size:14pt !important; overflow:visible !important; }
  .fig__n i{ transform:none !important; }
  .fig__l{ font-size:7pt; color:#444 !important; }

  /* ---- Fließtext ---- */
  .profile{ padding-block:0 6mm !important; }
  .profile__lead{ font-size:15pt; margin-bottom:3mm; }
  .profile__lead em,.bridge em,.person em,.contact h2 em{ color:#000; }
  .profile__body{ color:#222 !important; max-width:none; }

  .fields{ border-top:.8pt solid #999; }
  .field{ padding-block:5mm !important; border-bottom:.5pt solid #ccc; }
  .field__grid,.section-head,.profile__grid{ grid-template-columns:44mm minmax(0,1fr) !important; gap:6mm !important; }
  .field__aside{ position:static !important; }
  .field__num{ color:#000 !important; font-size:7pt; }
  .field__title{ font-size:15pt; }
  .field__kicker{ color:#555 !important; font-size:8pt; }
  .field__body{ max-width:none; }
  .field__body > p,.facts li{ color:#222 !important; }

  .beleg{
    margin:3mm 0; padding:3mm 4mm;
    background:#f2f2f2 !important; color:#000 !important;
    border-left:1.5pt solid #000 !important; break-inside:avoid;
  }
  .beleg p{ color:#222 !important; }
  .beleg h3,.beleg strong{ color:#000 !important; }
  .beleg__t .label{ color:#000 !important; }
  .facts li::before{ background:#000 !important; }
  .tags li{ background:#fff !important; border-color:#bbb !important; color:#333 !important; font-size:7pt; }

  /* ---- Zweite Säule ---- */
  .pillar{ background:#fff !important; color:#000 !important; padding-block:6mm !important;
           border-bottom:.8pt solid #999; }
  .pillar .field__title,.pillar .field__num{ color:#000 !important; }
  .pillar .field__body > p,.pillar .facts li,.pillar .beleg p{ color:#222 !important; }
  .pillar .field__body strong,.pillar .facts strong,.pillar .beleg h3,
  .pillar .beleg strong,.bridge{ color:#000 !important; }
  .pillar .facts li,.pillar .tags li{ border-color:#ccc !important; }
  .pillar .beleg{ background:#f2f2f2 !important; }
  .bridge{ font-size:12pt; border-top-color:#999 !important; margin-top:4mm; padding-top:3mm; }

  /* ---- Werdegang & Qualifikationen ---- */
  .cv,.quals,.person{ padding-block:6mm !important; }
  .quals{ background:#fff !important; border:none; border-top:.8pt solid #999; }
  .section-head{ margin-bottom:4mm; }
  .section-head h2{ font-size:15pt; }
  .section-head p{ color:#555 !important; }
  .tl__row{ padding:1.6mm 0 !important; border-color:#ddd !important; break-inside:avoid; }
  .tl{ border-top-color:#999 !important; }
  .tl__when{ color:#000 !important; font-size:7.5pt; }
  .tl__what{ font-size:9.5pt; }
  .tl__row--lead .tl__what{ font-size:11pt; }
  .tl__what small{ color:#444 !important; font-size:8pt; }
  .tl__tag{ color:#777 !important; font-size:6.5pt; }
  .quals__grid{ grid-template-columns:repeat(3,1fr) !important; gap:5mm !important; }
  .qgroup{ break-inside:avoid; }
  .qgroup h3{ color:#000 !important; border-color:#999 !important; font-size:7pt; }
  .qgroup li{ color:#333 !important; font-size:8pt; padding:.9mm 0; }
  .qgroup li b{ color:#000 !important; }
  .qgroup li span{ color:#666 !important; font-size:7pt; }
  .person p{ font-size:12pt; }

  /* ---- Kontakt ---- */
  .contact{ background:#fff !important; color:#000 !important;
            padding-block:5mm 0 !important; border-top:1.2pt solid #000; }
  .contact__grid{ gap:4mm !important; }
  .contact h2{ font-size:16pt; margin-bottom:2mm; }
  .contact__note{ color:#333 !important; }
  .links a{ border-color:#ccc !important; padding:1.4mm 0; font-size:9.5pt; }
  .links a .label{ color:#666 !important; }
  /* Wiederholt gedruckt nur den Namen, der schon in der Kopfzeile steht — und
     wuerde als einzige Zeile eine achte Seite erzwingen. */
  .colophon{ display:none; }

  /* ---- Animationen aus ---- */
  .rv,.js .rv{ opacity:1 !important; transform:none !important; }
  .fig__n i,.js .fig__n i{ transform:none !important; }
  a{ text-decoration:none; }
}