/* Zwei Themen. Dunkel ist der Grundzustand, hell wird per data-theme="hell"
   am <html> gesetzt. ALLE Farben laufen ueber Tokens - sonst kippt beim
   Umschalten die eine Haelfte und die andere bleibt stehen. */
:root{
  --grund:#0a0e13; --rail:#080c11; --flaeche:#111821; --flaeche2:#161f2a;
  --linie:#1e2a37; --linie2:#2b3a4a;
  --ink:#e2e9f0; --ink2:#8fa2b5; --ink3:#708398; --ink-invers:#0c1218;
  --akzent:#6db3e0; --akzent-dumpf:#14293a; --akzent-rand:#24506e; --akzent-hover:#1b3a52;
  --akzent-hauch:rgba(109,179,224,.04); --akzent-hauch2:rgba(109,179,224,.05);
  --gruppen-nr:#33445a; --balken-bett:#1a2430; --feld-fokus:#16222e;
  --gut:#4ec9a0;    --gut-rand:#1d4a3c;  --gut-flaeche:#0e2620;
  --warn:#e0b050;   --warn-rand:#4a3d1a; --warn-flaeche:#241d0e;
  --kritisch:#e8734a; --krit-rand:#4a2a1d; --krit-flaeche:#26150e;
  --logo-bett:#f4f6f8; --logo-rand:#e2e6ea;
  /* Diagrammfarben: dokumentierte kategoriale Reihenfolge, gegen die jeweilige
     Flaeche mit dem Validator geprueft */
  --viz-1:#3987e5; --viz-2:#d95926; --viz-3:#199e70; --viz-4:#c98500; --viz-5:#d55181;
  --viz-sonst:#5d7085; --viz-soll:#3a5468;
  --schleier:rgba(3,7,11,.72);
  /* Markenton der Leiste. Auf #080c11 traegt das reine Orange 7,7:1 und ist
     damit auch fuer die kleinen Gruppennummern zulaessig. */
  --marke:#f58431; --marke-graf:#f58431; --marke-bett:#2a1a0e;
  --marke-nah:rgba(245,132,49,.14); --marke-fern:rgba(245,132,49,.50);
  --marke-schleif:rgba(245,132,49,.13);
  /* Banner, dunkle Fassung */
  --ban-g1:#151d26; --ban-g2:#10161d; --ban-g3:#0b1016; --ban-fade:#0b1016;
  --ban-kontur:#f58431; --ban-mini:#f5a15e; --ban-wort:#e2e9f0; --ban-asmb:#f58431;
  --ban-adr:#8fa2b5; --ban-strich:#f58431; --ban-raster-o:.16; --ban-kontur-o:.55;
}
:root[data-theme="hell"]{
  --grund:#dfe4e9; --rail:#d3dae1; --flaeche:#eff2f5; --flaeche2:#e6ebef;
  --linie:#c9d1d8; --linie2:#adb8c2;
  --ink:#121920; --ink2:#46525c; --ink3:#53606a; --ink-invers:#ffffff;
  --akzent:#1b6ba3; --akzent-dumpf:#dceaf4; --akzent-rand:#a8c8de; --akzent-hover:#cfe2f0;
  --akzent-hauch:rgba(27,107,163,.05); --akzent-hauch2:rgba(27,107,163,.06);
  --gruppen-nr:#9aa8b4; --balken-bett:#dbe1e7; --feld-fokus:#ffffff;
  --gut:#1a6b4e;    --gut-rand:#a8d5c0;  --gut-flaeche:#e6f3ec;
  --warn:#8a6210;   --warn-rand:#ddc794; --warn-flaeche:#f8f0dc;
  --kritisch:#b04a1e; --krit-rand:#e9bfa8; --krit-flaeche:#fbeade;
  --logo-bett:#ffffff; --logo-rand:#dde2e7;
  --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-4:#eda100; --viz-5:#e87ba4;
  --viz-sonst:#8894a0; --viz-soll:#9fb2c1;
  --schleier:rgba(24,33,42,.55);
  /* Hell braucht zwei Stufen: das reine Orange kommt auf dem Leistengrund
     #d3dae1 nur auf 1,8:1. --marke traegt Kleinschrift (4,6:1), --marke-graf
     die Punkte, Pfeile und Balken (3,1:1, Grenze fuer Grafik). */
  --marke:#904d1c; --marke-graf:#b76324; --marke-bett:#f6ece0;
  --marke-nah:rgba(183,99,36,.16); --marke-fern:rgba(183,99,36,.42);
  --marke-schleif:rgba(183,99,36,.11);
  /* Banner, helle Fassung */
  --ban-g1:#fbf9f6; --ban-g2:#f1eee9; --ban-g3:#e8e3db; --ban-fade:#e8e3db;
  --ban-kontur:#cd6e29; --ban-mini:#a15720; --ban-wort:#1a1f26; --ban-asmb:#cd6e29;
  --ban-adr:#5c6670; --ban-strich:#f58431; --ban-raster-o:.22; --ban-kontur-o:.62;
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
html[data-theme="hell"]{color-scheme:light}
body{
  background:var(--grund); color:var(--ink);
  font:15px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  display:grid; grid-template-columns:262px minmax(0,1fr); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.mono,code,td.z,th.z{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---------- linke Leiste ---------- */
.rail{
  background:var(--rail); border-right:1px solid var(--linie);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  overscroll-behavior:contain;
}
.marke{padding:26px 22px 20px;border-bottom:1px solid var(--linie)}
.marke .wort{font-size:22px;font-weight:700;letter-spacing:.18em;line-height:1}
/* Das Kundenlogo ist fuer hellen Grund gezeichnet. Es wird NICHT umgefaerbt -
   eine Wortmarke des Kunden umzufaerben ist keine Gestaltung, sondern ein Fehler.
   Stattdessen bekommt es eine eigene helle Platte. */
.marke .logo{display:block;width:154px;height:auto;background:var(--logo-bett);
  padding:9px 11px;border-radius:5px;border:1px solid var(--logo-rand)}
.marke .unter{margin-top:7px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
/* ---------- Navigation ----------
   Bewegungsbild aus pavik.at (eigenes Projekt, Stand 18.08.2026) auf unsere
   Merkmale uebertragen: gleitender Balken, Lichtschleier, wachsender Punkt,
   einfliegender Pfeil, Abdunkeln der Geschwister und ein cursorgefuehrter
   Schein ueber der ganzen Leiste. Farben kommen aus den Themenmerkmalen,
   damit hell und dunkel gleichermassen tragen. */

.gruppen{flex:1;padding:18px 0;position:relative}

/* Cursorgefuehrter Schein. Die Koordinaten setzt das Skript im Fuss. */
.gruppen::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(260px circle at var(--px,-400px) var(--py,-400px),
             var(--marke-schleif), transparent 65%);
}
.gruppen.spuert::before{opacity:1}

.gruppe{margin-bottom:22px;position:relative;z-index:1}
.glabel{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 22px 8px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3);
  transition:color .3s ease;
}
.gruppe:hover .glabel{color:var(--ink2)}
.glabel i{font-style:normal;font-family:ui-monospace,Menlo,monospace;color:var(--gruppen-nr);
  transition:color .4s ease,letter-spacing .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.gruppe:hover .glabel i{color:var(--marke);letter-spacing:.3em}

.punkt{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 18px 8px 16px;color:var(--ink2);text-decoration:none;
  font-size:13.5px;line-height:1.35;border-radius:2px;isolation:isolate;
  transition:color .4s cubic-bezier(.16,1,.3,1),
             padding-left .45s cubic-bezier(.16,1,.3,1),
             opacity .35s ease;
}
/* Der Balken faehrt von links ein, sobald der Punkt aktiv ist. */
.punkt::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:16px;
  transform:translate(-100%,-50%);background:var(--marke-graf);border-radius:1px;z-index:1;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
/* Weicher Lichtschleier hinter der Zeile. */
.punkt::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  border-radius:inherit;transition:opacity .45s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(90deg,var(--marke-schleif) 0%,transparent 68%);
}
.punkt:hover::after{opacity:1}
.pkt,.lbl,.pfeil{position:relative;z-index:1}

.pkt{flex:none;width:5px;height:5px;border-radius:50%;background:var(--ink3);
  transition:background .4s ease,box-shadow .4s ease,
             width .5s cubic-bezier(.16,1,.3,1),border-radius .5s cubic-bezier(.16,1,.3,1)}
.lbl{flex:1;white-space:nowrap;transition:letter-spacing .45s cubic-bezier(.16,1,.3,1)}
.pfeil{flex:none;margin-left:auto;opacity:0;transform:translateX(-6px);color:var(--marke-graf);
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}

.punkt:hover{color:var(--ink);padding-left:22px}
.punkt:hover .pkt{background:var(--marke-graf);width:16px;border-radius:2px;
  box-shadow:0 0 12px var(--marke-fern)}
.punkt:hover .lbl{letter-spacing:.015em}
.punkt:hover .pfeil{opacity:.85;transform:translateX(2px)}

/* Geschwister treten zurueck, sobald die Leiste angefasst wird — das ist der
   Kniff, der die Bewegung ruhig statt unruhig wirken laesst. */
.gruppen:hover .punkt:not(:hover):not(.an){opacity:.45}

.punkt.an{color:var(--ink);padding-left:22px;background:var(--marke-bett)}
.punkt.an::before{transform:translate(0,-50%)}
.punkt.an .pkt{background:var(--marke-graf);width:16px;border-radius:2px;
  animation:punkt-puls 3.2s ease-in-out infinite}
.punkt.an .pfeil{opacity:1;transform:translateX(2px)}
.punkt:focus-visible{outline:1px solid var(--marke-graf);outline-offset:-2px}

@keyframes punkt-puls{
  0%,100%{box-shadow:0 0 0 2px var(--marke-nah), 0 0 14px var(--marke-fern)}
  50%    {box-shadow:0 0 0 4px var(--marke-nah), 0 0 22px var(--marke-fern)}
}

/* Wer Bewegung abbestellt hat, bekommt dieselbe Navigation ohne Animation. */
@media (prefers-reduced-motion: reduce){
  .punkt,.punkt::before,.punkt::after,.pkt,.lbl,.pfeil,.glabel,.glabel i,.gruppen::before{
    transition:none !important}
  .punkt.an .pkt{animation:none !important}
  .gruppen:hover .punkt:not(:hover):not(.an){opacity:1}
}

.fuss{padding:16px 22px 20px;border-top:1px solid var(--linie)}
.rollen label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.rollen select{
  width:100%;background:var(--flaeche);color:var(--ink);border:1px solid var(--linie2);
  border-radius:4px;padding:6px 8px;font:inherit;font-size:13px;
}
.hinweis{margin-top:12px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}

/* ---------- Inhalt ---------- */
main{padding:34px 40px 90px;min-width:0}
.seitenkopf{border-bottom:1px solid var(--linie);padding-bottom:18px;margin-bottom:28px}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
h1{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);
   margin:32px 0 12px;font-weight:600}
p{color:var(--ink2);max-width:74ch;margin-bottom:12px}

/* ---------- Kennzahlen ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);margin-bottom:8px}
.kachel{background:var(--flaeche);padding:15px 17px}
.kachel .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.kachel .v{font-size:25px;font-weight:600;letter-spacing:-.02em;margin-top:5px;line-height:1.1;
  font-family:ui-monospace,Menlo,monospace}
.kachel .n{font-size:11.5px;color:var(--ink3);margin-top:3px}
.kachel.warn .v{color:var(--warn)} .kachel.kritisch .v{color:var(--kritisch)} .kachel.gut .v{color:var(--gut)}

/* ---------- Tabellen ---------- */
.rahmen{border:1px solid var(--linie);background:var(--flaeche);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{
  text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);
  padding:11px 14px;border-bottom:1px solid var(--linie2);white-space:nowrap;font-weight:600;
}
td{padding:9px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--flaeche2)}
th.z,td.z{text-align:right;white-space:nowrap}
td a{color:var(--akzent);text-decoration:none}
td a:hover{text-decoration:underline}
.dim{color:var(--ink3)}

/* Balken für Soll-Ist */
.balken{position:relative;height:5px;background:var(--balken-bett);border-radius:2px;min-width:70px;margin-top:5px}
.balken i{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--akzent)}
.balken.ueber i{background:var(--kritisch)}
.balken.knapp i{background:var(--warn)}

/* Signal-Pillen */
.pille{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;border:1px solid;white-space:nowrap}
.p-gut{color:var(--gut);border-color:var(--gut-rand);background:var(--gut-flaeche)}
.p-warn{color:var(--warn);border-color:var(--warn-rand);background:var(--warn-flaeche)}
.p-krit{color:var(--kritisch);border-color:var(--krit-rand);background:var(--krit-flaeche)}
.p-neutral{color:var(--ink3);border-color:var(--linie2);background:transparent}

/* Hinweisblöcke */
.notiz{border:1px solid var(--linie);border-left:2px solid var(--akzent);background:var(--flaeche);
  padding:13px 16px;margin:16px 0;max-width:82ch}
.notiz.warn{border-left-color:var(--warn)}
.notiz.krit{border-left-color:var(--kritisch)}
.notiz .t{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px}
.notiz p{margin:0;color:var(--ink2);font-size:13.5px}

.leer{padding:40px;text-align:center;color:var(--ink3)}
form.upload{border:1px dashed var(--linie2);background:var(--flaeche);padding:26px;text-align:center}
form.upload input[type=file]{color:var(--ink2);font:inherit;font-size:13px}
button,.knopf{background:var(--akzent-dumpf);color:var(--akzent);border:1px solid var(--akzent-rand);
  padding:8px 16px;border-radius:4px;font:inherit;font-size:13px;cursor:pointer}
button:hover{background:var(--akzent-hover)}
@media (max-width:900px){
  body{grid-template-columns:1fr}
  .rail{position:static;height:auto}
  main{padding:24px 20px 70px}
}

/* ---------- Formulare und Kalkulationsmaske ---------- */
input,select{background:var(--flaeche2);color:var(--ink);border:1px solid var(--linie2);
  border-radius:4px;padding:6px 8px;font:inherit;font-size:13.5px;font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:none;border-color:var(--akzent);background:var(--feld-fokus)}
input::placeholder{color:var(--ink3)}
.maske{max-width:640px;margin-top:8px}
.feldreihe{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.feldreihe label{display:flex;flex-direction:column;gap:5px;flex:1 1 190px;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.maskenfuss{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.maskenfuss .inline{display:flex;align-items:center;gap:9px;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
a.knopf{display:inline-block;text-decoration:none}

table.kalk td{padding:5px 10px;vertical-align:middle}
table.kalk th{padding:9px 10px}
table.kalk input.zahl{width:100%;text-align:right}
table.kalk input.mini{width:44px;text-align:center;padding:5px 4px}
table.kalk input.voll,table.kalk select.voll{width:100%}
tr.gruppenzeile td{background:var(--flaeche2);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--akzent);font-weight:600;padding:8px 10px}
tr.summenzeile td{background:var(--akzent-hauch2);font-weight:600;border-top:1px solid var(--linie2)}
tfoot td{background:var(--flaeche2);font-weight:600;border-top:1px solid var(--linie2)}
tr.ergebnis td{color:var(--akzent);font-size:15px}
.weg{cursor:pointer;color:var(--ink3)}
.weg input{display:none}
.weg span{display:inline-block;width:22px;height:22px;line-height:20px;text-align:center;
  border:1px solid var(--linie2);border-radius:4px}
.weg input:checked + span{background:var(--kritisch);border-color:var(--kritisch);color:var(--ink-invers)}
.ueberzogen{color:var(--kritisch);font-weight:700}

/* ---------- Diagramme ---------- */
.diagramm{width:100%;height:auto;max-width:760px;display:block;margin:6px 0 20px}
.d-label{fill:var(--ink2);font-size:11px;font-family:inherit}
.d-wert{fill:var(--ink3);font-size:10.5px;font-family:ui-monospace,Menlo,monospace}
.d-fuss{fill:var(--ink3);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.d-soll{fill:var(--viz-soll)}
.d-ist{fill:var(--akzent)}
.d-ueber{fill:var(--kritisch)}
.d-raster{stroke:var(--linie);stroke-width:1}
.d-achse{fill:var(--ink3);font-size:10px;text-anchor:end;font-family:ui-monospace,Menlo,monospace}
.d-budget{stroke:var(--warn);stroke-width:1;stroke-dasharray:4 3}
.d-budgettext{fill:var(--warn);font-size:10px;letter-spacing:.06em}
.d-flaeche{fill:var(--akzent);opacity:.12}
.d-linie{fill:none;stroke:var(--akzent);stroke-width:2;stroke-linejoin:round}
.d-punkt{fill:var(--akzent)}

/* ---------- Titelbild ---------- */
.banner{display:block;width:100%;height:auto;border:1px solid var(--linie);
  border-radius:8px;margin-bottom:20px}

/* ---------- Ringdiagramm ---------- */
.ringblock{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:6px 0 22px}
.ring{width:160px;height:160px;flex:none}
.ring circle{transition:opacity .15s}
.ringblock:hover .ring circle{opacity:.55}
.ringblock .ring circle:hover{opacity:1}
.r-mitte{fill:var(--ink);font-size:23px;font-weight:600;text-anchor:middle;
  font-family:ui-monospace,Menlo,monospace}
.r-mitteklein{fill:var(--ink3);font-size:9px;text-anchor:middle;letter-spacing:.12em;text-transform:uppercase}
.ringlegende{list-style:none;margin:0;padding:0;flex:1 1 300px;min-width:280px}
.ringlegende li{display:flex;align-items:center;gap:10px;padding:4px 0;
  border-bottom:1px solid var(--linie);font-size:13.5px}
.ringlegende li:last-child{border-bottom:none}
.ringlegende i{width:11px;height:11px;border-radius:2px;flex:none;
  box-shadow:0 0 0 2px var(--flaeche)}
.ringlegende .l-name{flex:1;color:var(--ink2)}
.ringlegende .l-wert{color:var(--ink);font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.ringlegende .l-proz{width:62px;text-align:right;color:var(--ink3);
  font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.ringreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:8px 32px}
.ringtitel{font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 2px}

/* ---------- Diagrammfarben je Thema ---------- */
.viz-1{stroke:var(--viz-1)} .viz-2{stroke:var(--viz-2)} .viz-3{stroke:var(--viz-3)}
.viz-4{stroke:var(--viz-4)} .viz-5{stroke:var(--viz-5)} .viz-s{stroke:var(--viz-sonst)}
.ringlegende i.viz-1{background:var(--viz-1)} .ringlegende i.viz-2{background:var(--viz-2)}
.ringlegende i.viz-3{background:var(--viz-3)} .ringlegende i.viz-4{background:var(--viz-4)}
.ringlegende i.viz-5{background:var(--viz-5)} .ringlegende i.viz-s{background:var(--viz-sonst)}

/* ---------- Umschalter ---------- */
.themawahl{display:flex;gap:0;margin-top:12px;border:1px solid var(--linie2);
  border-radius:5px;overflow:hidden}
.themawahl button{flex:1;background:transparent;border:none;border-radius:0;color:var(--ink3);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 4px;cursor:pointer}
.themawahl button[aria-pressed="true"]{background:var(--akzent-dumpf);color:var(--akzent)}
.themawahl button:hover{color:var(--ink)}
.themawahl button:focus-visible{outline:1px solid var(--akzent);outline-offset:-2px}

/* ---------- Geführte Tour ---------- */
/* Der Scheinwerfer ist ein leeres Element mit sehr großem box-shadow: das Loch
   in der Mitte bleibt hell, alles ringsum wird abgedunkelt. Deshalb braucht es
   keine vier Blenden und keine Bibliothek. */
.f-schirm{position:fixed;inset:0;z-index:9990}
.f-licht{position:fixed;z-index:9991;pointer-events:none;border-radius:8px;
  box-shadow:0 0 0 9999px var(--schleier);
  outline:1px solid var(--akzent);outline-offset:2px;
  transition:top .22s,left .22s,width .22s,height .22s}
.f-licht-aus{outline:none}
.f-karte{position:fixed;z-index:9992;width:min(380px,calc(100vw - 28px));
  background:var(--flaeche2);border:1px solid var(--linie2);border-radius:10px;
  padding:16px 18px 13px;box-shadow:0 22px 60px rgba(0,0,0,.45);
  font-size:13.5px;line-height:1.62;color:var(--ink)}
.f-marke{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.f-titel{font-size:15.5px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.f-text{color:var(--ink2)}
.f-sprung{width:100%;margin-top:13px}
.f-leiste{display:flex;align-items:center;gap:8px;margin-top:13px}
.f-punkte{display:flex;gap:4px;margin-right:auto}
.f-punkt{width:6px;height:6px;border-radius:50%;background:var(--linie2)}
.f-punkt-an{background:var(--akzent)}
.f-knopf{font-size:12.5px;padding:6px 13px}
.f-knopf-leer{background:transparent;border-color:transparent;color:var(--ink3)}
.f-knopf-leer:hover{background:transparent;color:var(--ink)}

/* Abschnittsliste auf der Dokumentationsseite */
.f-abschnitte{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:6px 0 24px}
.f-abschnitt{border:1px solid var(--linie);border-radius:8px;padding:14px 16px;background:var(--flaeche)}
.f-abschnitt .nr{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.f-abschnitt .na{font-size:14.5px;font-weight:600;margin:4px 0 3px}
.f-abschnitt .an{font-size:12px;color:var(--ink3);margin-bottom:11px}
.f-start{width:100%;margin-bottom:12px;font-size:12.5px;padding:8px 12px}

/* ---------- Rückmeldungen ---------- */
/* Der Schalter liegt fest unten rechts und ist auf jeder Seite erreichbar. Die
   Zahl darin ist die Anzahl der noch offenen Meldungen — sie verschwindet, wenn
   keine offen ist, statt eine Null zu zeigen. */
.fb-schalter{position:fixed;right:18px;bottom:18px;z-index:9980;
  background:var(--akzent);color:#fff;border:none;border-radius:22px;
  padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.22)}
.fb-schalter:hover{filter:brightness(1.06)}
.fb-schalter i{font-style:normal;display:inline-block;margin-left:7px;
  background:rgba(255,255,255,.24);border-radius:9px;padding:1px 7px;font-size:11.5px}
.fb-schirm{position:fixed;inset:0;background:var(--schleier);z-index:9981}
.fb-karte{position:fixed;right:18px;bottom:18px;z-index:9982;
  width:min(430px,calc(100vw - 28px));max-height:calc(100vh - 36px);overflow:auto;
  background:var(--flaeche2);border:1px solid var(--linie2);border-radius:12px;
  padding:18px 20px 16px;box-shadow:0 22px 60px rgba(0,0,0,.3)}
.fb-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fb-titel{font-size:16px;font-weight:600;letter-spacing:-.01em}
.fb-zu{background:transparent;border:none;color:var(--ink3);font-size:22px;
  line-height:1;cursor:pointer;padding:0 2px}
.fb-zu:hover{color:var(--ink)}
.fb-hinweis{color:var(--ink3);font-size:12.5px;margin:6px 0 14px;line-height:1.5}
.fb-lbl{display:block;font-size:12px;color:var(--ink2);margin:0 0 5px}
.fb-feld{width:100%;margin-bottom:14px}
textarea.fb-feld{resize:vertical;min-height:96px;font:inherit;line-height:1.55}
.fb-fuss{display:flex;align-items:center;gap:9px;margin-top:2px}
.fb-klein{font-size:11.5px;color:var(--ink3);margin-right:auto}

/* Liste auf der Seite „Rückmeldungen" */
.fb-eintrag{border:1px solid var(--linie);border-radius:9px;padding:14px 17px;
  margin-bottom:11px;background:var(--flaeche)}
.fb-eintrag.fb-offen{border-left:3px solid var(--akzent)}
.fb-eintrag.fb-erledigt{opacity:.62}
.fb-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  font-size:11.5px;color:var(--ink3);margin-bottom:8px}
.fb-art{font-weight:600;color:var(--ink2)}
.fb-status{margin-left:auto;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.fb-status-offen{color:var(--akzent)}
.fb-text{line-height:1.62;margin-bottom:9px}
.fb-datei{font-size:12.5px;margin-bottom:9px}
.fb-antwort{font-size:13px;color:var(--ink2);border-left:2px solid var(--linie2);
  padding-left:11px;margin:9px 0}
.fb-zeile{display:flex;gap:8px;align-items:center;margin-top:10px}
.fb-zeile input[type=text]{flex:1}

/* Bestätigung nach dem Absenden */
.fb-danke{background:var(--flaeche2);border:1px solid var(--linie2);
  border-left:3px solid #57c98a;border-radius:9px;padding:12px 16px;margin-bottom:18px}
.fb-danke .t{font-weight:600;margin-bottom:3px}
.fb-danke p{margin:0;color:var(--ink2);font-size:13.5px}

/* ---------- Einstieg: Angebot der geführten Tour ---------- */
/* Steht ganz oben auf der Übersicht. Kein Zwang, kein automatischer Start —
   wer die Software kennt, scrollt darüber hinweg. */
.einstieg{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--flaeche2);border:1px solid var(--linie2);
  border-left:3px solid var(--akzent);border-radius:10px;
  padding:16px 20px;margin:0 0 18px}
.einstieg-text{flex:1;min-width:280px}
.einstieg-text .t{font-size:15px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em}
.einstieg-text p{margin:0;color:var(--ink2);line-height:1.6;font-size:13.5px}
.einstieg-text a{color:var(--akzent)}
.einstieg-knopf{background:var(--akzent);color:#fff;border:none;border-radius:8px;
  padding:11px 22px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.einstieg-knopf:hover{filter:brightness(1.06)}

/* Abmelden in der Leiste — nur im Vorführstand sichtbar */
.abmelden{margin-top:8px}
.abmelden button{width:100%;background:transparent;border:1px solid var(--linie2);
  color:var(--ink3);border-radius:7px;padding:7px;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.abmelden button:hover{color:var(--ink);border-color:var(--ink3)}

/* ---------- M1 Mitarbeiter: Kontrollkästchen-Zeile in der Maske ---------- */
.kontrollkaestchen{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.kontrollkaestchen label{display:flex;align-items:center;gap:7px;font-size:13px;
  color:var(--ink2);text-transform:none;letter-spacing:normal}
.kontrollkaestchen input[type=checkbox]{width:auto}

/* ---------- T1 Geraete: grosser Einrichtungscode in der .notiz ---------- */
.notiz .geraete-code{font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:32px;font-weight:700;
  letter-spacing:.08em;color:var(--ink);margin:6px 0 10px}
/* Anleitung als Schritte - dieselbe Typografie wie .notiz p, nur mit
   echter (browsererzeugter) Schrittnummerierung statt getippter Ziffern. */
.notiz ol{margin:4px 0 0;padding-left:18px;color:var(--ink2);font-size:13.5px;line-height:1.6}
.notiz ol li{margin-bottom:2px}

/* ---------- M4 Vorauswahl: zwei Spalten Kontrollkaestchen ---------- */
.spalten-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px}
.spalten-2 .kopf{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.kontrollkaestchen-spalte{display:flex;flex-direction:column;gap:8px}
.kontrollkaestchen-spalte label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2)}
.kontrollkaestchen-spalte input[type=checkbox]{width:auto}

/* Monthly work overview: reuse the existing table and form styling. */
.auswertung-filter{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:12px 0 18px}
.auswertung-filter label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--ink2)}
.auswertung-filter select{min-width:180px}
.auswertung-filter input{max-width:160px}
.auswertung-filter .dim{font-size:12px;padding-bottom:8px}
.auswertung-aktionen{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.auswertung-spalten{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.auswertung-spalten section{min-width:0}
@media(max-width:1100px){.auswertung-spalten{grid-template-columns:1fr;gap:0}}