/* ============================================================
   stadtmann.temuun.ch — Gestaltung
   Eigene Schriften, vom eigenen Server. Keine externen Anfragen.
   Newsreader & Public Sans, beide SIL Open Font License.
   ============================================================ */

@font-face{
  font-family:"Newsreader";
  src:url("/assets/schriften/newsreader.woff2") format("woff2-variations");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("/assets/schriften/public-sans.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Papier & Tinte — warm, nicht steril */
  --papier:#f6f3ee;
  --papier-tief:#efeae2;
  --karte:#fffdfa;
  --tinte:#16181a;
  --tinte-weich:#5d5f5f;
  --tinte-zart:#8b8d8c;
  --linie:#e0dad0;
  --linie-fein:#ece7de;

  /* Akzente: tiefes Petrol als Leitfarbe, Ton aus Ziegel als Gegengewicht */
  --petrol:#1f5163;
  --petrol-hell:#e4eef1;
  --petrol-tief:#143c4a;
  --ziegel:#9c4a2f;
  --ziegel-hell:#f7ece7;
  --gruen:#2c6146;
  --gruen-hell:#e6f0ea;

  --radius:4px;
  --radius-gross:8px;
  --mass:66ch;             /* Lesebreite */
  --spalte:min(1080px, 100% - 3rem);
}

@media (prefers-color-scheme:dark){
  :root{
    --papier:#121315;
    --papier-tief:#0d0e10;
    --karte:#1a1c1f;
    --tinte:#eeece8;
    --tinte-weich:#a8a9a7;
    --tinte-zart:#7d7e7d;
    --linie:#2e3134;
    --linie-fein:#25282b;
    --petrol:#8fc3d6;
    --petrol-hell:#152c36;
    --petrol-tief:#a9d4e3;
    --ziegel:#e59677;
    --ziegel-hell:#33201a;
    --gruen:#7cc9a1;
    --gruen-hell:#14291f;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:"Public Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:oldstyle-nums;
}

/* ---------- Raster ---------- */
.bahn{width:var(--spalte);margin-inline:auto}
.eng{max-width:var(--mass)}

/* ---------- Typografie ---------- */
h1,h2,h3,.serif{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:400;
  font-variant-numeric:oldstyle-nums;
}
h1{
  font-size:clamp(2.6rem,1.6rem + 4.4vw,4.6rem);
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 1.1rem;
  text-wrap:balance;
}
h2{
  font-size:clamp(1.75rem,1.35rem + 1.7vw,2.5rem);
  line-height:1.12;
  letter-spacing:-.016em;
  margin:0 0 .5rem;
}
h3{font-size:1.24rem;line-height:1.25;letter-spacing:-.01em;margin:0 0 .35rem}
p{margin:0 0 1.05rem;max-width:var(--mass)}

.marke{
  font-size:.7rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 1.4rem;font-family:"Public Sans",sans-serif;
  display:flex;align-items:center;gap:.85rem;
}
.marke::after{content:"";flex:1;height:1px;background:var(--linie);max-width:9rem}

.vorspann{
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);
  line-height:1.5;color:var(--tinte-weich);max-width:56ch;margin:0 0 2rem;
}
.klein{font-size:.875rem;color:var(--tinte-weich)}
.zart{color:var(--tinte-zart)}

a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}

.springen{position:absolute;left:-9999px}
.springen:focus{left:1rem;top:1rem;z-index:99;background:var(--karte);
  border:1px solid var(--petrol);padding:.7rem 1.1rem;border-radius:var(--radius)}

/* ---------- Kopf & Fuss ---------- */
.kopf{padding:2.1rem 0 0}
.kopf .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap}
.kopf .name{font-family:"Newsreader",serif;font-size:1.22rem;letter-spacing:-.01em;
  text-decoration:none;color:var(--tinte)}
.kopf nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.kopf nav a{font-size:.9rem;color:var(--tinte-weich);text-decoration:none}
.kopf nav a:hover{color:var(--tinte);text-decoration:underline}

.fuss{margin-top:6rem;border-top:1px solid var(--linie);padding:1.8rem 0 4rem;
  font-size:.85rem;color:var(--tinte-weich)}
.fuss .zeile{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.fuss a{color:var(--tinte-weich);text-decoration:none;margin-right:1.4rem}
.fuss a:hover{color:var(--tinte);text-decoration:underline}

/* ---------- Abschnitte ---------- */
.held{padding:5.5rem 0 1rem}
section{padding:3.4rem 0}
.titelzeile{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--linie);
  padding-bottom:.9rem;margin-bottom:2rem}
.titelzeile p{margin:0;font-size:.9rem;color:var(--tinte-weich)}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:"Public Sans",sans-serif;font-size:.95rem;font-weight:600;
  padding:.82rem 1.5rem;border-radius:var(--radius);cursor:pointer;
  background:var(--petrol);color:#fff;border:1px solid var(--petrol);
  text-decoration:none;transition:background .15s ease,transform .15s ease;
}
.knopf:hover{background:var(--petrol-tief);border-color:var(--petrol-tief);transform:translateY(-1px)}
.knopf.leer{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf.leer:hover{border-color:var(--petrol);color:var(--petrol);background:transparent}
@media (prefers-color-scheme:dark){
  .knopf{color:#0e1418}
  .knopf:hover{background:var(--petrol-tief)}
}
.knopfreihe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- Karten ---------- */
.raster{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.raster > .feld{background:var(--karte);padding:1.8rem 1.7rem}
.feld .nr{font-family:"Newsreader",serif;font-size:2rem;color:var(--petrol);
  line-height:1;margin-bottom:.7rem;display:block}
.feld p{font-size:.925rem;color:var(--tinte-weich);margin:0}
.feld h3{margin-bottom:.5rem}

/* ---------- Werdegang ---------- */
.lauf{border-top:1px solid var(--linie)}
.lauf .posten{display:grid;grid-template-columns:8.5rem 1fr;gap:2rem;
  padding:1.35rem 0;border-bottom:1px solid var(--linie-fein);align-items:baseline}
.lauf .jahr{font-family:"Newsreader",serif;font-size:1rem;color:var(--tinte-zart);
  font-variant-numeric:oldstyle-nums;white-space:nowrap}
.lauf .wo{font-weight:600;font-size:1.02rem;margin-bottom:.15rem}
.lauf .was{font-size:.9rem;color:var(--tinte-weich)}
.lauf .posten.jetzt{background:linear-gradient(90deg,var(--petrol-hell) 0%,transparent 72%);
  margin-inline:-1.2rem;padding-inline:1.2rem}
.lauf .posten.jetzt .jahr{color:var(--petrol);font-weight:600}
@media(max-width:640px){.lauf .posten{grid-template-columns:1fr;gap:.2rem}}

/* ---------- Merkmalliste ---------- */
.merkmale{border-top:1px solid var(--linie)}
.merkmale .zeile{display:grid;grid-template-columns:11rem 1fr;gap:2rem;
  padding:1rem 0;border-bottom:1px solid var(--linie-fein)}
.merkmale dt{font-size:.82rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tinte-zart);margin:0}
.merkmale dd{margin:0;font-size:.96rem}
@media(max-width:640px){.merkmale .zeile{grid-template-columns:1fr;gap:.15rem}}

/* ---------- Formulare ---------- */
.formular{display:grid;gap:1.15rem;max-width:34rem}
.feldgruppe{display:grid;gap:.4rem}
label{font-size:.85rem;font-weight:600}
label .optional{font-weight:400;color:var(--tinte-zart)}
input[type=text],input[type=email],textarea{
  font:inherit;font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--karte);color:var(--tinte);width:100%;
}
input:focus,textarea:focus{border-color:var(--petrol)}
textarea{min-height:8.5rem;resize:vertical;line-height:1.55}

input.code{
  font-family:"Public Sans",ui-monospace,monospace;
  font-size:1.55rem;letter-spacing:.24em;text-transform:uppercase;
  text-align:center;padding:.85rem .6rem;font-variant-numeric:lining-nums;
  font-weight:600;
}
input.code::placeholder{letter-spacing:.24em;color:var(--tinte-zart);font-weight:400}

.einwilligung{display:flex;gap:.75rem;align-items:flex-start;
  font-size:.85rem;color:var(--tinte-weich);line-height:1.5}
.einwilligung input{margin-top:.22rem;flex:none;width:1.05rem;height:1.05rem;accent-color:var(--petrol)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Zugangswege: Reiter ohne JavaScript ---------- */
.wege{margin-top:2.2rem}
.wege > input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.reiter{display:flex;gap:0;border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;margin-bottom:2rem;background:var(--karte);flex-wrap:wrap}
.reiter label{
  flex:1 1 10rem;text-align:center;padding:.85rem 1rem;font-size:.9rem;font-weight:600;
  cursor:pointer;color:var(--tinte-weich);border-right:1px solid var(--linie);
  transition:background .14s ease,color .14s ease;
}
.reiter label:last-child{border-right:0}
.reiter label:hover{background:var(--papier-tief);color:var(--tinte)}
.tafel{display:none}
#w1:checked ~ .reiter label[for=w1],
#w2:checked ~ .reiter label[for=w2],
#w3:checked ~ .reiter label[for=w3]{background:var(--petrol);color:#fff}
@media (prefers-color-scheme:dark){
  #w1:checked ~ .reiter label[for=w1],
  #w2:checked ~ .reiter label[for=w2],
  #w3:checked ~ .reiter label[for=w3]{color:#0e1418}
}
#w1:checked ~ .tafeln .t1,
#w2:checked ~ .tafeln .t2,
#w3:checked ~ .tafeln .t3{display:block}
.wege > input[type=radio]:focus-visible ~ .reiter{outline:2px solid var(--petrol);outline-offset:3px}

/* ---------- Hinweise ---------- */
.hinweis{border-left:2px solid var(--petrol);background:var(--petrol-hell);
  padding:1rem 1.25rem;font-size:.9rem;margin:1.5rem 0;border-radius:0 var(--radius) var(--radius) 0}
.hinweis.warn{border-color:var(--ziegel);background:var(--ziegel-hell)}
.hinweis.gut{border-color:var(--gruen);background:var(--gruen-hell)}
.hinweis strong{font-weight:700}
.hinweis p:last-child{margin-bottom:0}

/* ---------- Dokumentenliste ---------- */
.dokumente{border-top:1px solid var(--linie)}
.dokumente a{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.1rem .3rem;border-bottom:1px solid var(--linie-fein);
  text-decoration:none;color:var(--tinte);transition:padding-left .16s ease,background .16s ease;
}
.dokumente a:hover{background:var(--karte);padding-left:.9rem}
.dokumente .titel{font-weight:600;font-size:1rem;display:block;margin-bottom:.12rem}
.dokumente .unter{font-size:.85rem;color:var(--tinte-weich);display:block}
.dokumente .art{font-size:.68rem;font-weight:700;letter-spacing:.09em;color:var(--petrol);
  border:1px solid var(--linie);padding:.22rem .5rem;border-radius:2px;flex:none}

/* ---------- Fehlermeldung im Formular ---------- */
.fehler{border-left:2px solid var(--ziegel);background:var(--ziegel-hell);
  padding:.85rem 1.1rem;font-size:.9rem;margin-bottom:1.2rem;
  border-radius:0 var(--radius) var(--radius) 0}
.fehler strong{color:var(--ziegel)}

/* ---------- Prosa (Rechtstexte) ---------- */
.prosa{max-width:var(--mass)}
.prosa h2{font-size:1.5rem;margin:2.6rem 0 .8rem}
.prosa h3{font-size:1.05rem;margin:1.8rem 0 .4rem;font-family:"Public Sans",sans-serif;font-weight:700}
.prosa p,.prosa li{font-size:.965rem;color:var(--tinte-weich)}
.prosa strong{color:var(--tinte);font-weight:600}
.prosa ul{padding-left:1.15rem}
.prosa li{margin:.35rem 0}
.prosa code{font-size:.88em;background:var(--papier-tief);padding:.1em .35em;border-radius:2px}

@media print{
  .kopf nav,.knopfreihe,.wege{display:none}
  body{background:#fff;color:#000}
}

/* ═══════════════ Kennzahlen-Band ═══════════════ */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--linie);border-block:1px solid var(--linie);margin:0}
.kennzahlen div{background:var(--papier);padding:1.5rem 1.4rem}
.kennzahlen .wert{font-family:"Newsreader",serif;font-size:2.6rem;line-height:1;
  letter-spacing:-.03em;color:var(--tinte);display:block;margin-bottom:.35rem;
  font-variant-numeric:lining-nums}
.kennzahlen .was{font-size:.8rem;color:var(--tinte-weich);letter-spacing:.01em}

/* ═══════════════ Aufklapp-Karten (nativ, ohne JavaScript) ═══════════════ */
.faehig{columns:3 290px;column-gap:1.15rem;border-top:1px solid var(--linie)}
.faehig details{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);
  margin:1.15rem 0 0;break-inside:avoid;transition:background .18s ease,border-color .18s ease;
}
.faehig details:hover{border-color:var(--tinte-zart)}
.faehig details[open]{border-color:var(--petrol)}
.faehig details[open]{background:var(--petrol-hell)}
.faehig summary{
  list-style:none;cursor:pointer;padding:1.25rem 1.35rem;display:flex;
  align-items:flex-start;gap:1rem;font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;
}
.faehig summary::-webkit-details-marker{display:none}
.faehig summary::after{
  content:"+";margin-left:auto;flex:none;font-family:"Newsreader",serif;
  font-size:1.5rem;line-height:1;color:var(--petrol);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.faehig details[open] summary::after{content:"–";transform:rotate(180deg)}
.faehig summary:hover{color:var(--petrol)}
.faehig summary:focus-visible{outline:2px solid var(--petrol);outline-offset:-3px}
.faehig .inhalt{padding:0 1.35rem 1.35rem;font-size:.93rem;color:var(--tinte-weich);
  max-width:44ch}
.faehig .inhalt p{margin:0}
.faehig .marke-klein{font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--petrol);display:block;margin-bottom:.5rem}
@media (prefers-reduced-motion:no-preference){
  .faehig details[open] .inhalt{animation:auf .28s cubic-bezier(.4,0,.2,1)}
  @keyframes auf{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
}

/* ═══════════════ Wortmarke im Fliesstext ═══════════════ */
.klar{
  font-family:"Newsreader",serif;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2rem);
  line-height:1.35;letter-spacing:-.017em;color:var(--tinte);
  max-width:26ch;margin:0 0 1.6rem;
}
.klar em{font-style:italic;color:var(--petrol)}

/* ═══════════════ Sanftes Einblenden beim Scrollen ═══════════════ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .auftauchen{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes auftauchen{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }
  }
}

/* ═══════════════ Porträt im Seitenkopf ═══════════════ */
/* Fliesst im Text mit, statt als eigene Spalte danebenzustehen. */
.held.mitbild{display:block}
.held.mitbild::after{content:"";display:block;clear:both}

.portraet{
  float:right;margin:.6rem 0 1.4rem clamp(1.6rem,3.4vw,3rem);
  width:clamp(168px,19vw,236px);position:relative;shape-outside:margin-box;
}
.portraet img{display:block;width:100%;height:auto;border-radius:2px;filter:saturate(.92)}
/* versetzter Rahmen statt Schlagschatten — ruhiger und druckbar */
.portraet::before{
  content:"";position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--petrol);border-radius:2px;z-index:-1;
}
.held.mitbild h1,.held.mitbild .vorspann{max-width:none}
.held.mitbild .marke{display:block}
.held.mitbild .marke::after{display:none}
.held.mitbild .knopfreihe{display:block}
.held.mitbild .knopfreihe .knopf{margin:0 .7rem .7rem 0}

@media(max-width:640px){
  /* Rand rechts freilassen, damit der versetzte Rahmen nicht ueberlaeuft */
  .portraet{width:124px;margin:.25rem 10px .9rem 1.1rem}
  .portraet::before{inset:8px -8px -8px 8px}
}

/* kleines Porträt im geschützten Bereich */
.kopfzeile-person{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.kopfzeile-person img{
  width:88px;height:88px;object-fit:cover;object-position:center 18%;
  border-radius:2px;flex:none;filter:saturate(.92);
}