/* ------------------------------------------------------------------ *
 *  site.css — nur fuer die drei Seiten der Webseite selbst:
 *  index.html, impressum.html, datenschutz.html.
 *
 *  Die beiden Anwendungen in icd11/ und icf/ benutzen weiterhin
 *  app.css und mindmap.css und werden von hier nicht beruehrt.
 *  Farben, Schrift und Rundungen sind dieselben wie dort, damit die
 *  Webseite und das Werkzeug wie eine einzige Sache aussehen.
 * ------------------------------------------------------------------ */

@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/montserrat-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;
}

:root{
  --paper:#FBFAF8; --ink:#1F1E1C; --ink-2:#6A665E; --ink-3:#969187;
  --line:#E4E0D8; --card:#FFFFFF; --focus:#2160AE;
  --ui:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Die 21 Töne der Anwendung. Dieselbe Reihe wie FARBEN in
     shared/app.js; wird dort etwas geändert, gehört es auch hierher.
     start.js liest nur, wie viele es sind, und vergibt Klassennamen —
     die Werte stehen ausschliesslich hier.                           */
  --f0:#B02418;  --f1:#D8541B;  --f2:#E08A00;  --f3:#B78A00;
  --f4:#7E9B00;  --f5:#4F9430;  --f6:#1F8C55;  --f7:#0E8C79;
  --f8:#0B839B;  --f9:#1673A8;  --f10:#2160AE; --f11:#3A4FA8;
  --f12:#5544A6; --f13:#7238A0; --f14:#8F3496; --f15:#A83386;
  --f16:#B83A6C; --f17:#B04358; --f18:#8C4A3C; --f19:#6B5A2E;
  --f20:#5C5C5C;
}

/* Ein Farbton wird über eine Klasse gewählt, nicht über eine
   Formatangabe im Markup: die Klasse setzt --f, alles Weitere holt
   sich den Ton von dort. */
.f-0{--f:var(--f0)}    .f-1{--f:var(--f1)}    .f-2{--f:var(--f2)}
.f-3{--f:var(--f3)}    .f-4{--f:var(--f4)}    .f-5{--f:var(--f5)}
.f-6{--f:var(--f6)}    .f-7{--f:var(--f7)}    .f-8{--f:var(--f8)}
.f-9{--f:var(--f9)}    .f-10{--f:var(--f10)}  .f-11{--f:var(--f11)}
.f-12{--f:var(--f12)}  .f-13{--f:var(--f13)}  .f-14{--f:var(--f14)}
.f-15{--f:var(--f15)}  .f-16{--f:var(--f16)}  .f-17{--f:var(--f17)}
.f-18{--f:var(--f18)}  .f-19{--f:var(--f19)}  .f-20{--f:var(--f20)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

a{color:var(--focus)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* --- Kopfleiste ---------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;
  padding:14px 34px;border-bottom:1px solid var(--line);background:var(--card)}
.marke{font-weight:700;letter-spacing:-.02em;font-size:16px;color:var(--ink);text-decoration:none}
.marke em{font-style:normal;color:var(--ink-3);font-weight:500}
.kopf .dehnt{flex:1}

/* Das Menü steht rechts, in der Reihenfolge des Markups. */
.menu{margin-left:auto}
.menu ul{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none}
.menu a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500;
  white-space:nowrap}
.menu a:hover{color:var(--ink)}

/* Der Knopf für schmale Fenster. Auf breiten ist er ausgeblendet; die
   Vorlage entscheidet das, damit das Skript nur den Zustand kennt. */
.menuknopf{display:none;margin-left:auto;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--card);border-radius:6px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  padding:7px 13px;cursor:pointer}
.menuknopf .balken{position:relative;display:block;width:16px;height:2px;
  background:currentColor;border-radius:1px}
.menuknopf .balken::before,.menuknopf .balken::after{content:"";position:absolute;
  left:0;width:16px;height:2px;background:currentColor;border-radius:1px}
.menuknopf .balken::before{top:-5px}
.menuknopf .balken::after{top:5px}
.menuknopf[aria-expanded="true"]{border-color:var(--ink-3)}

.knopf{display:inline-block;border:1px solid var(--line);background:var(--card);
  border-radius:6px;font:inherit;font-size:13.5px;font-weight:500;padding:7px 14px;
  cursor:pointer;color:var(--ink);text-decoration:none}
.knopf:hover{border-color:#CFC9BD}
.knopf.stark{background:var(--ink);color:#fff;border-color:var(--ink)}
.knopf.gross{padding:11px 22px;font-size:14.5px}

/* --- Aufmacher ----------------------------------------------------- *
 *  Titel über dem Bild, das Bild so breit wie alles Übrige. Zwei
 *  Bildschirmaufnahmen liegen übereinander; das rechte wird von --pos
 *  an beschnitten. Der Regler darüber ist unsichtbar und liefert
 *  Ziehen, Tippen und Pfeiltasten.
 * ------------------------------------------------------------------- */
.held{padding:52px 44px 56px;border-bottom:1px solid var(--line)}
.held > .innen{max-width:1000px;margin:0 auto}
/* Titel und Vorspann laufen über die ganze Blockbreite, wie das
   Vergleichsbild darunter. Keine Begrenzung auf eine Zeilenlänge: der
   Aufmacher ist eine Fläche und kein Fliesstext. */
.held h1{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.14;
  letter-spacing:-.028em;font-weight:600;hyphens:auto}
.held-leiste{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  margin:18px 0 18px}
.held-lead{margin:0;flex:1;min-width:260px;color:var(--ink-2);font-size:15px;
  line-height:1.55}

/* Der Umschalter zwischen ICD-11 und ICF */
.schieber{position:relative;display:flex;background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.schieber button{position:relative;z-index:1;border:0;background:none;font:inherit;
  font-size:13px;font-weight:600;color:var(--ink-2);padding:6px 20px;border-radius:999px;
  cursor:pointer;width:96px;transition:color .25s}
.schieber button.an{color:#fff}
.schieber .laeufer{position:absolute;z-index:0;top:3px;left:3px;width:96px;
  height:calc(100% - 6px);border-radius:999px;background:var(--ink);
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.schieber .laeufer.rechts{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.schieber .laeufer{transition:none}}

/* Das Vergleichsbild */
.vergleich{--pos:50%;position:relative;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--paper);
  aspect-ratio:1240 / 789}
.v-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.v-rechts{clip-path:inset(0 0 0 var(--pos))}
.v-trenner{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;
  background:var(--ink);opacity:.55;pointer-events:none}
.v-griff{position:absolute;top:50%;left:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.16)}
/* Zwei Pfeilspitzen, die zeigen, dass sich der Griff schieben lässt. */
.v-griff::before,.v-griff::after{content:"";position:absolute;top:50%;
  width:0;height:0;border:6px solid transparent;margin-top:-6px}
.v-griff::before{left:6px;border-right-color:var(--ink)}
.v-griff::after{right:6px;border-left-color:var(--ink)}
.v-marke{position:absolute;top:12px;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;pointer-events:none}
.v-marke-links{left:14px}
.v-marke-rechts{right:14px}
.v-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;
  -webkit-appearance:none;appearance:none;background:none;cursor:ew-resize}
.v-regler::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;
  background:none;cursor:ew-resize}
.v-regler::-moz-range-thumb{width:44px;height:100%;border:0;background:none;
  cursor:ew-resize}
.v-regler:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* --- Abschnitte ---------------------------------------------------- */
.teil{padding:56px 44px;border-top:1px solid var(--line)}
.teil.hell{background:var(--card)}
.teil > .innen{max-width:1000px;margin:0 auto}
.teil h2{margin:0 0 8px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.teil > .innen > p{color:var(--ink-2);margin:0;max-width:62ch}
.teil > .innen > p.breit{max-width:none}
.teil > .innen > p.nachsatz{margin-top:30px}

.ansichten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:32px;margin-top:34px}
.ansicht{border-top:2px solid var(--ink);padding-top:16px}
.ansicht svg{display:block;width:100%;height:130px;margin-bottom:14px;
  background:var(--paper);border:1px solid var(--line);border-radius:6px}
.teil.hell .ansicht svg{background:var(--paper)}
.ansicht h3{margin:0 0 5px;font-size:15.5px;font-weight:600}
.ansicht p{margin:0;color:var(--ink-2);font-size:13.5px}

/* --- Die drei kleinen Illustrationen ------------------------------- *
 *  Geometrie steht im Markup, Farbe und Strichstärke hier. Der Ton
 *  kommt über eine Klasse f-N, siehe oben.
 * ------------------------------------------------------------------- */
.riss{font-family:var(--ui)}
.i-strahlen line{stroke:#D8D4CB;stroke-width:1.4}
.i-punkt{fill:var(--f)}
.i-punkt.offen{fill:var(--paper);stroke:var(--f);stroke-width:2}
.i-nabe{fill:#fff;stroke:#D8D4CB;stroke-width:1.6}
.i-nabe.stark{stroke:var(--ink-2)}
.i-kode{fill:var(--ink);font-size:13px;font-weight:700;text-anchor:middle}
.i-kode.klein{font-size:10px}
.i-bogen{fill:none;stroke:var(--f);stroke-width:1.4}
.i-kasten{fill:var(--f)}

.i-liste text{font-size:8.5px}
.i-liste .i-k{fill:var(--ink);font-weight:600}
.i-liste .i-b{fill:var(--ink-2)}
.i-liste .tief{fill:var(--ink-3);font-weight:400}
.i-liste .i-band{fill:#F2EFE8}
.i-liste .i-einzug{stroke:var(--line);stroke-width:1}

/* --- Anleitung: Mindmap zusammenstellen ---------------------------- */
.schritte{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.schritte li{counter-increment:s;position:relative;padding-left:38px}
.schritte li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.schritte b{display:block;font-weight:600;margin-bottom:3px}
.schritte span{color:var(--ink-2);font-size:13.5px}

/* --- Die Leiste der Mindmap, Kaestchen je Knopf -------------------- */
.knoepfe{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:14px;margin-top:16px}
.knopfbox{border:1px solid var(--line);border-radius:8px;background:var(--card);
  padding:14px 16px}
.teil.hell .knopfbox{background:var(--paper)}
.knopfbox .taste{display:inline-block;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);padding:3px 9px;font-size:12.5px;font-weight:600;
  color:var(--ink);margin-bottom:8px}
.teil.hell .knopfbox .taste{background:var(--card)}
.knopfbox p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.5}

/* --- Bruecke ICD / ICF --------------------------------------------- */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.paar > div{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:22px 24px}
.teil.hell .paar > div{background:var(--paper)}
.paar h3{margin:0 0 6px;font-size:16px;font-weight:600}
.paar p{margin:0 0 16px;color:var(--ink-2);font-size:13.5px}
.streifen{display:flex;gap:2px;height:5px;margin:0 0 16px}
.streifen i{flex:1;border-radius:2px;background:var(--f)}

/* --- Hinweis auf Testprofil ---------------------------------------- */
.bruecke{max-width:1000px;margin:0 auto;border:1px solid var(--line);border-radius:10px;
  background:var(--card);padding:32px 34px}
.teil.hell .bruecke{background:var(--paper)}
.bruecke .tp-logo{display:block;height:26px;width:auto;margin-bottom:14px}
.bruecke h2{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.bruecke p{margin:0 0 10px;color:var(--ink-2);font-size:14px;line-height:1.55}
.bruecke p.klein{color:var(--ink-3);font-size:12.5px;margin-bottom:18px}
.bruecke .tp-folge{margin:22px 0 20px}
.bruecke .tp-knopf{display:block;width:max-content;margin-left:auto}

/* --- Fusszeile ----------------------------------------------------- */
.fuss{border-top:1px solid var(--line);background:var(--card);padding:22px 44px;
  display:flex;gap:20px;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px}
.fuss a{color:var(--ink-2);text-decoration:none}
.fuss a:hover{color:var(--ink)}
.fuss .dehnt{flex:1}

/* --- Rechtstexte --------------------------------------------------- */
.rechtstext{max-width:760px;margin:0 auto;padding:48px 24px 60px}
.rechtstext h1{margin:0 0 4px;font-size:30px;font-weight:600;letter-spacing:-.02em}
.rechtstext .stand{color:var(--ink-3);font-size:13px;margin:0 0 34px}
.rechtstext h2{margin:34px 0 8px;font-size:18px;font-weight:600}
.rechtstext h3{margin:22px 0 6px;font-size:15px;font-weight:600}
.rechtstext p,.rechtstext li{color:var(--ink-2);max-width:70ch}
.rechtstext li{margin-bottom:4px}
.rechtstext code{background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:13px}
.kasten{border:1px solid var(--line);border-left:3px solid var(--ink);background:var(--card);
  border-radius:0 6px 6px 0;padding:14px 18px;margin:18px 0}
.kasten p{margin:0}

@media(max-width:980px){
  .menuknopf{display:inline-flex}
  .menu{position:absolute;left:0;right:0;top:100%;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:6px 22px 14px;display:none}
  .menu.offen{display:block}
  .menu ul{flex-direction:column;align-items:flex-start;gap:0}
  .menu li{width:100%;border-top:1px solid var(--line)}
  .menu a{display:block;padding:11px 0;font-size:14.5px}
}
@media(max-width:820px){
  .held{padding:34px 22px 40px}
  .kopf{padding-left:22px;padding-right:22px}
  .teil,.fuss{padding-left:22px;padding-right:22px}
  .paar{grid-template-columns:1fr}
  .bruecke{padding:24px 22px}
}