/* ------------------------------------------------------------------ *
 *  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, Vorspann und darunter eine Bilderfolge mit den vier
 *  Ansichten beider Klassifikationen, so breit wie alles Übrige.
 * ------------------------------------------------------------------- */
.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 die
   Bilderfolge 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-lead{margin:16px 0 20px;color:var(--ink-2);font-size:15px;
  line-height:1.55}

/* Die Bilderfolge des Aufmachers. Aufbau und Bedienung stehen in
   galerie.css; hier nur die Breite und der Abstand. Vorher lagen an
   dieser Stelle zwei Aufnahmen übereinander mit einem Regler dazwischen
   — das zeigte zwei der inzwischen vier Ansichten. */
.held-folge{margin:0}

/* --- 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}

/* Vier Karten: zwei mal zwei statt drei und eine allein. Die Spalte
   misst tausend Punkte; bei 230 Punkten Mindestbreite passten vier
   Karten knapp nicht mehr nebeneinander und die vierte stand allein in
   der zweiten Zeile. Mit 320 gibt es zwei Reihen zu zweit, und die
   Illustrationen haben mehr Platz. */
.ansichten{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:32px 40px;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}

/* Die Schlüsseltafel: ein Blatt in Spalten, farbige Überschriften und
   Zeilen als Balken. Kein Text — bei 240 Punkten Breite wäre er nicht
   zu lesen und würde nur schmutzig aussehen. */
.i-blatt{fill:#fff;stroke:var(--line);stroke-width:1}
.i-balken{fill:var(--f)}
.i-zeile{fill:#D8D4CB}
.i-zeile.kurz{fill:#E4E0D7}

/* --- 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}


/* --- 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}
}