/* Lindner & Kollegen (Demo) · Basis
   Konzept A „Die Lebenslinie“. Alles Geteilte: Tokens, Reset, Typo,
   Kopf, Fuß, Bedienelemente, die Linie selbst. */

/* ---------- Schriften, lokal ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('schriften/fraunces-latin.woff2') format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  src:url('schriften/fraunces-latin-ext.woff2') format('woff2');
  font-weight:300 800; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Public Sans';
  src:url('schriften/public-sans-latin.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Public Sans';
  src:url('schriften/public-sans-latin-ext.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Farbtokens ---------- */
:root{
  --flaeche:#F2EBE0;
  --flaeche-2:#E9E0D2;
  --text:#123B3A;
  --text-leise:#4A6462;      /* 5,39:1 auf Fläche */
  --akzent:#A6385A;          /* 5,32:1 auf Fläche */
  --akzent-tief:#7E2542;     /* 7,95:1 · für kleinen Text */
  --linie:#C7BCAB;
  --linie-stark:#9E8F79;   /* nur Deko */
  --rahmen:#7F7565;        /* Bedienelemente: 3,83:1 auf Flaeche, 3,46:1 auf Flaeche 2 */
  --auf-akzent:#FFFFFF;      /* 6,30:1 */
  --fokus-kern:#123B3A;
  --fokus-ring:#F2EBE0;
  --station-1:#3F6B62;
  --station-2:#9A6B22;
  --station-3:#A6385A;
  --station-4:#8A5A3C;
  --station-5:#5B7050;
  --rand:20px;
  --maxspalte:1180px;
  --spalte:min(var(--maxspalte),100% - var(--rand)*2);
  /* Abstand vom Satzspiegel zur Fensterkante. Prozentwerte taugen dafür nicht:
     in einem Raster beziehen sie sich auf die Rasterzelle, nicht auf den Container. */
  --aussen:max(var(--rand),calc((var(--vw) - var(--maxspalte)) / 2));
  --linie-x:clamp(18px,4.5vw,74px);
  --satz-versatz:clamp(22px,3.4vw,56px);
  --vw:100vw;              /* von app.js auf clientWidth gesetzt, ohne Scrollbalken */
  --dauer:.55s;
}
:root[data-modus="dunkel"]{
  --flaeche:#151D1C;
  --flaeche-2:#233432;
  --text:#EDE6DA;
  --text-leise:#9DB3AE;      /* 7,75:1 */
  --akzent:#E58AA4;          /* 6,94:1 */
  --akzent-tief:#E58AA4;
  --linie:#38423F;
  --linie-stark:#5C6B67;
  --rahmen:#7C8E89;        /* 4,97:1 bzw. 3,78:1 */
  --auf-akzent:#151D1C;      /* 6,94:1 */
  --fokus-kern:#EDE6DA;
  --fokus-ring:#151D1C;
  --station-1:#7FB8AA;
  --station-2:#D8A952;
  --station-3:#E58AA4;
  --station-4:#CE9A78;
  --station-5:#9DC088;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd,fieldset{margin:0;padding:0}
figure,blockquote{margin:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
fieldset{border:0}
a{color:inherit}

body{
  background:var(--flaeche);
  color:var(--text);
  font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* ---------- Typografie ---------- */
.gross,h1,h2,h3{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:520;
  line-height:1.06;
  letter-spacing:-.012em;
  overflow-wrap:break-word;
  hyphens:auto;
  font-variation-settings:'SOFT' 30,'WONK' 0;
}
h1{font-size:clamp(2.15rem,1.2rem + 3.9vw,4.15rem);line-height:1.02}
h2{font-size:clamp(1.72rem,1.1rem + 2.5vw,3rem)}
h3{font-size:clamp(1.2rem,1.02rem + .72vw,1.6rem);line-height:1.18}
p{max-width:62ch}
strong{font-weight:600}

.marke{
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--text-leise);
}
.zahl{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Fokus (doppelter Ring, §8b) ---------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--fokus-kern);
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--fokus-ring),0 0 0 7px var(--fokus-kern);
  border-radius:2px;
}
html{scroll-padding-top:150px}

.spring{
  position:absolute;left:var(--rand);top:-100px;z-index:90;min-height:44px;display:inline-flex;align-items:center;
  background:var(--text);color:var(--flaeche);
  padding:.7rem 1.1rem;text-decoration:none;font-weight:600;
}
.spring:focus{top:8px}

/* ---------- Demo-Streifen ---------- */
/* Ein schmaler Streifen über die volle Breite, kein Block.
   Eine Zeile, kleine Schrift, nichts bricht um. Auf Mobil wird der Zusatz gekürzt. */
.demo{
  max-width:none;
  background:var(--text);color:var(--flaeche);
  font-size:.72rem;line-height:1.35;letter-spacing:.045em;
  padding:.3rem var(--rand);
  min-height:26px;
  display:flex;align-items:center;gap:.55rem;
  white-space:nowrap;overflow:hidden;
}
.demo b{font-weight:650;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.demo span{
  opacity:.75;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;
}
.demo span::before{content:"· ";opacity:.6}
/* Auf sehr schmalen Schirmen bleibt nur die Kennzeichnung selbst stehen. */
@media (max-width:520px){
  .demo span{display:none}
  .demo{font-size:.68rem;letter-spacing:.03em}
}

/* ---------- Kopf ---------- */
.rahmen{position:relative}
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--flaeche) 92%,transparent);
  backdrop-filter:blur(9px);
  border-bottom:1px solid var(--linie);
}
.kopf__inhalt{
  width:var(--spalte);margin-inline:auto;
  display:flex;align-items:center;gap:1.4rem;
  min-height:66px;
}
.kopf__logo{display:flex;align-items:center;text-decoration:none;color:var(--text);flex:0 0 auto;min-height:44px}
.kopf__logo svg{width:clamp(148px,17vw,196px);height:auto}
.kopf__nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.kopf__nav a{
  text-decoration:none;font-size:.93rem;font-weight:480;
  padding:.55rem 0;min-height:44px;display:inline-flex;align-items:center;
}
.kopf__tel{font-weight:600;white-space:nowrap}

/* ---------- Bedienelemente (eigene Sprache) ----------
   Handlung = Wort mit vorangestelltem Stationspunkt.
   Schalter  = Wort auf einer Grundlinie, die beim Zeigen ausgezogen wird. */
.tun{
  --punkt:9px;
  display:inline-flex;align-items:center;gap:.72rem;
  min-height:46px;padding:.44rem 0;
  text-decoration:none;font-weight:600;font-size:1.03rem;
  background:none;border:0;cursor:pointer;text-align:left;
  color:var(--text);
}
.tun::before{
  content:"";flex:0 0 auto;
  width:var(--punkt);height:var(--punkt);border-radius:50%;
  background:var(--akzent);
  /* Wachsen per transform, nicht per Breite: sonst wandert die Mitte des Punktes
     beim Zeigen und er steht nicht mehr auf der Lebenslinie. */
  transition:transform var(--dauer) cubic-bezier(.2,.8,.3,1),background var(--dauer);
}
.tun span{
  box-shadow:inset 0 -1px 0 0 var(--linie-stark);
  transition:box-shadow var(--dauer);
}
.tun:hover::before,.tun:focus-visible::before{transform:scale(1.85)}
.tun:hover span,.tun:focus-visible span{box-shadow:inset 0 -2px 0 0 var(--akzent)}
.tun--leise{font-weight:500;color:var(--text-leise)}
.tun--leise::before{background:var(--linie-stark)}
.tun--leise:hover::before,.tun--leise:focus-visible::before{background:var(--akzent)}

.schalter{
  --k:11px;
  display:inline-flex;align-items:center;gap:.6rem;
  background:none;border:0;cursor:pointer;
  font-size:.88rem;font-weight:520;letter-spacing:.02em;
  min-height:44px;padding:.4rem 0;
  color:var(--text);
}
/* Eigene Schalterform: ein Knoten wie auf der Lebenslinie. Leer heisst aus,
   gefuellt heisst an. Bewusst KEINE ausziehbare Grundlinie und kein Kasten. */
.schalter::before{
  content:"";flex:0 0 auto;
  width:var(--k);height:var(--k);border-radius:50%;
  border:2px solid var(--rahmen);
  background:radial-gradient(circle,var(--akzent) 0 var(--fuell,0%),transparent var(--fuell,0%));
  transition:--fuell var(--dauer),border-color var(--dauer),transform var(--dauer);
}
.schalter:hover::before,.schalter:focus-visible::before{border-color:var(--akzent);--fuell:55%}
.schalter[aria-pressed="true"]::before,.schalter[aria-expanded="true"]::before{
  border-color:var(--akzent);--fuell:100%;
}
@property --fuell{syntax:'<percentage>';inherits:true;initial-value:0%}

/* ---------- Die Lebenslinie ---------- */
.strang{position:relative}
.strang::before{
  content:"";position:absolute;z-index:1;
  left:var(--linie-x);top:0;bottom:0;width:2px;
  background:var(--linie-stark);opacity:.42;
}
.strang__zug{
  position:absolute;z-index:1;left:var(--linie-x);top:0;width:2px;
  background:var(--akzent);
  height:var(--zug,0%);
  transition:height .18s linear;
}
/* Knoten sitzen am linken Rand des Satzspiegels und damit exakt auf der Linie. */
.knoten{position:relative}
.knoten::before{
  content:"";position:absolute;z-index:2;
  left:calc(-1 * var(--satz-versatz) - 5.5px);
  top:var(--knoten-y,.62em);
  width:13px;height:13px;border-radius:50%;
  background:var(--flaeche);
  border:2px solid var(--punkt-farbe,var(--akzent));
}
.knoten--voll::before{background:var(--punkt-farbe,var(--akzent))}
.knoten--klein::before{
  left:calc(-1 * var(--satz-versatz) - 4px);
  width:10px;height:10px;border-width:2px;
  background:var(--flaeche);
  border-color:var(--linie-stark);
}
.satz{margin-left:calc(var(--linie-x) + var(--satz-versatz))}

/* ---------- Mobilmenü ---------- */
.menue-knopf{display:none}
/* Schacht: fest, beschnitten. Das geparkte Panel erzeugt dadurch keinen Überlauf. */
.schacht{
  position:fixed;inset:0;z-index:60;
  overflow:clip;pointer-events:none;
}
.schacht>*{pointer-events:auto}
.abdunkeln{
  position:absolute;inset:0;z-index:60;
  background:rgba(10,20,19,.55);
  opacity:0;pointer-events:none;transition:opacity var(--dauer);
}
.abdunkeln[data-offen]{opacity:1;pointer-events:auto}
.panel{
  position:absolute;top:0;right:0;bottom:0;z-index:61;
  visibility:hidden;
  width:min(340px,86vw);
  background:var(--flaeche-2);
  border-left:1px solid var(--linie);
  transform:translateX(101%);
  transition:transform var(--dauer) cubic-bezier(.2,.8,.3,1);
  padding:1.1rem var(--rand) 2rem;
  display:flex;flex-direction:column;gap:.3rem;
  overflow-y:auto;
}
.panel[data-offen]{transform:translateX(0);visibility:visible}
.panel a{
  text-decoration:none;font-size:1.12rem;font-weight:500;
  padding:.75rem 0;min-height:48px;display:flex;align-items:center;
  border-bottom:1px solid var(--linie);
}
.panel__zu{align-self:flex-end;margin-bottom:.6rem}

/* ---------- Fuß ---------- */
.fuss{
  border-top:1px solid var(--linie);
  margin-top:clamp(4rem,9vw,7.5rem);
  padding-block:clamp(2.6rem,5vw,4rem) 2rem;
}
.fuss__inhalt{width:var(--spalte);margin-inline:auto}
.fuss__raster{
  display:grid;gap:2.2rem clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.fuss h2{font-size:1.05rem;font-family:'Public Sans',sans-serif;font-weight:600;letter-spacing:.02em;margin-bottom:.7rem}
.fuss li{margin-bottom:0}
.fuss a{text-decoration:none;box-shadow:inset 0 -1px 0 0 var(--linie);display:inline-flex;align-items:center;min-height:44px}
.fuss a:hover{box-shadow:inset 0 -1px 0 0 var(--akzent)}
.fuss__pflicht{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;align-items:center;
  font-size:.9rem;
}
.fuss__ende{
  margin-top:1.6rem;font-size:.83rem;color:var(--text-leise);
  display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;
}
.fuss__punkt{
  width:11px;height:11px;border-radius:50%;background:var(--akzent);
  /* Mitte des Punktes auf die Mitte der 2px-Linie */
  margin-left:calc(var(--linie-x) - 4.5px);
}

/* ---------- Bewegung sparsam ---------- */
.zeigt{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.zeigt.da{opacity:1;transform:none}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .kopf__nav{display:none}
  .menue-knopf{display:inline-flex}
}
@media (max-width:768px){
  :root{--rand:16px;--linie-x:10px;--satz-versatz:22px}
  .kopf__logo svg{width:150px}
}
@media (min-width:901px){
  .schacht{display:none}
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .zeigt{opacity:1;transform:none}
}