/*! Kühr Suite – Oberfläche 2026 („stil1")
    © 2026 Elektrotechnik Kühr Meisterbetrieb, Mike Christof Kühr.
    Alle Rechte vorbehalten.

    Diese Datei liegt ÜBER dem alten Stil und zieht die ganze Oberfläche auf
    einen Stand: ruhige Flächen, weiche Tiefe, klare Typografie, helle und
    dunkle Fassung. Vorbild ist die Menüoberfläche der Meta Quest – Glas,
    Rundungen, weicher Schatten, wenig Linien, viel Ruhe.

    HELL UND DUNKEL: Es gibt hier bewusst KEINEN eigenen Schalter. Die Fassung
    hängt weiter an der Design-Auswahl unten rechts (design.js) – „Dark Mode"
    und „Halloween" setzen html[data-thema=dunkel] über dunkel.js, alles andere
    bleibt hell. So war es am 28.08.2026 festgelegt, und dabei bleibt es.
    Diese Datei liefert deshalb nur die NEUEN Marken (--flaeche, --feld,
    --schatten-*, --rund …) auch für die dunkle Fassung; die alten Marken
    (--bg, --card, --line …) kommen wie bisher aus design.js und dunkel.js.

    Aufbau:
      1. Farbmarken hell / dunkel      4. Karten und Flächen
      2. Grundlagen (Schrift, Fokus)   5. Tabellen, Formulare, Knöpfe
      3. Seitenleiste (die „Konsole")  6. Meldungen, Marken, Dialoge
*/

/* =====================================================================
   1. FARBMARKEN
   Alle Farben laufen über diese Marken. Die dunkle Fassung tauscht nur
   diese Werte – deshalb sieht jede Ansicht mit, ohne dass man sie
   einzeln anfassen muss.
   ===================================================================== */
:root {
  color-scheme: light;

  /* Die alten Marken (--bg, --card, --line, --txt, --mut, Akzente) stehen
     weiter in stil.css und werden von design.js je Design gesetzt. Hier
     kommen nur die neuen dazu. */
  --bg-2:      #e6ebf3;
  --card-glas: rgba(255,255,255,.72);
  --flaeche:   #f3f5f9;
  --flaeche-2: #e9edf4;
  --line-2:    #eaeef4;
  --txt-2:     #2c3849;

  --blue-l:    #4b8ff5;   /* helle Kante des Hauptknopfs */

  --side-glas: rgba(20,29,44,.92);
  --side-hover:rgba(255,255,255,.07);

  --feld:      #ffffff;
  --ring:      rgba(31,111,235,.20);

  /* Tiefe: zwei Schatten übereinander – ein harter Millimeter für die Kante,
     ein weiter weicher für den Abstand zur Fläche. */
  --schatten-1: 0 1px 2px rgba(16,24,38,.05);
  --schatten-2: 0 1px 2px rgba(16,24,38,.05), 0 14px 34px -16px rgba(16,24,38,.22);
  --schatten-3: 0 2px 6px rgba(16,24,38,.07), 0 28px 60px -22px rgba(16,24,38,.32);
  --rund:   14px;
  --rund-s: 10px;
  --glanz: rgba(255,255,255,.65);   /* helle Oberkante auf Glasflächen */
}

/* Dunkle Fassung: NUR die neuen Marken. --bg/--card/--line/--txt/--mut und die
   Akzente kommen aus dunkel.js bzw. design.js – die werden hier nicht
   überschrieben, sonst kämen sich zwei Bausteine in die Quere. */
html[data-thema="dunkel"] {
  --bg-2:      #0d1420;
  --card-glas: rgba(23,30,43,.78);
  --flaeche:   #1b2331;
  --flaeche-2: #222c3c;
  --line-2:    #222b3a;
  --txt-2:     #cbd6e4;

  --side-glas: rgba(12,18,29,.92);
  --side-hover:rgba(255,255,255,.06);

  --feld:      #101724;
  --ring:      rgba(91,149,255,.30);

  --schatten-1: 0 1px 2px rgba(0,0,0,.5);
  --schatten-2: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -16px rgba(0,0,0,.75);
  --schatten-3: 0 2px 8px rgba(0,0,0,.55), 0 28px 60px -22px rgba(0,0,0,.85);
  --glanz: rgba(255,255,255,.07);
}

/* =====================================================================
   2. GRUNDLAGEN
   ===================================================================== */
body {
  color:var(--txt);
  font:14.5px/1.55 -apple-system,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Zwei sehr weiche Lichter im Hintergrund – dieselbe Idee wie bei der Quest:
   die Fläche ist nie ganz tot, drängt sich aber auch nicht vor. Sie hängen an
   #layout, nicht am body: den body färbt die Design-Auswahl (Winter, Sommer,
   Halloween), und da soll ihr nichts dazwischenkommen. */
#layout, #huelle {
  background-image:
    radial-gradient(1100px 620px at 16% -10%, rgba(31,111,235,.09), transparent 62%),
    radial-gradient(900px 560px at 96% 2%, rgba(23,138,76,.07), transparent 60%);
  background-attachment:fixed;
}
html[data-thema="dunkel"] #layout, html[data-thema="dunkel"] #huelle {
  background-image:
    radial-gradient(1100px 620px at 16% -10%, rgba(59,120,220,.18), transparent 62%),
    radial-gradient(900px 560px at 96% 2%, rgba(20,120,90,.13), transparent 60%);
}

h1,h2,h3,h4 { letter-spacing:-.012em; color:var(--txt); }
h2 { font-size:16.5px; font-weight:650; }
h3 { font-size:14px; font-weight:650; color:var(--txt-2); }

/* Zahlen laufen in Tabellen und Summen sonst unterschiedlich breit und
   „tanzen" beim Aktualisieren. */
table, .sum, .summe, .totals, input[type=number] { font-variant-numeric:tabular-nums; }

::selection { background:var(--blue); color:#fff; }

/* Ein Fokusring für alle, die mit der Tastatur arbeiten – sichtbar, aber
   nicht laut. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--blue); outline-offset:2px; border-radius:8px;
}

/* Schlanke Rollbalken, passend zur Fassung */
* { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
*::-webkit-scrollbar { width:11px; height:11px; }
*::-webkit-scrollbar-thumb { background:var(--line); border-radius:8px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--mut); background-clip:content-box; }
*::-webkit-scrollbar-track { background:transparent; }

/* =====================================================================
   3. SEITENLEISTE — die „Konsole"
   Sie schwebt als eigene dunkle Glasplatte im Fenster, wie das Menü in
   der Brille, statt bündig am Rand zu kleben.
   ===================================================================== */
#layout, #huelle { gap:0; }
#side, #seite {
  width:246px; flex:0 0 246px;
  /* Die Leiste schwebt als eigene Platte im Fenster, sie klebt nicht am Rand -
     genau das macht den Eindruck der Quest-Oberflaeche aus. */
  margin:10px 0 10px 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, var(--side-glas), var(--side));
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  padding:16px 12px 14px;
  position:sticky; top:10px; align-self:flex-start;
  height:calc(100vh - 20px); height:calc(100dvh - 20px);
  overflow-y:auto; overscroll-behavior:contain;
  box-shadow:var(--schatten-3);
  z-index:20;
}
/* Die Fahne der KI sass genau an der alten Leistenkante. */
#kiFahne { left:268px; bottom:18px; }
#side .logo, #seite .marke {
  padding:6px 10px 14px; font-size:16px; font-weight:700; color:#fff; letter-spacing:-.015em;
}
/* Die Hausmarke im Kopf: Zeichnung links, Schriftzug rechts. Das EK steht
   auf der Grundlinie des Wortes, nicht darueber - deshalb der kleine
   Versatz. (15.09.2026.) */
#side .logo { display:flex; align-items:center; gap:10px; }
#side .logo .marke-ek { flex:0 0 auto; margin-top:-1px; }
#side .logo .wort { min-width:0; }
#side .logo .sm, #seite .marke .sm { color:#7e8da4; font-weight:500; }

/* Suchfeld in der Leiste */
#side .sufeld input, #side input[type=search], #side input[type=text] {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color:#fff; border-radius:10px; padding:8px 11px;
}
#side .sufeld input::placeholder { color:#7e8da4; }
#side .sufeld input:focus { background:rgba(255,255,255,.10); border-color:var(--blue-l); outline:none;
  box-shadow:0 0 0 3px rgba(91,155,255,.22); }

/* Menüpunkte: Pillen statt Zeilen. Der aktive Punkt liegt auf einer
   blauen Platte mit weichem Schein – man findet ihn im Augenwinkel. */
#side button, #seite nav button {
  border:0; border-left:0 !important; background:transparent; color:var(--side-txt);
  width:100%; text-align:left; display:flex; align-items:center; gap:9px;
  padding:9px 11px; margin:1px 0; border-radius:11px;
  font:inherit; font-size:13.5px; line-height:1.25; cursor:pointer;
  transition:background .14s ease, color .14s ease, transform .14s ease;
}
#side button:hover, #seite nav button:hover { background:var(--side-hover); color:#fff; transform:translateX(1px); }
#side button.on, #seite nav button.an {
  background:linear-gradient(180deg, rgba(70,131,240,.95), rgba(31,111,235,.95));
  color:#fff; font-weight:600;
  box-shadow:0 6px 18px -6px rgba(31,111,235,.85), inset 0 1px 0 rgba(255,255,255,.20);
}
#side button.zurueck, #seite button.zurueck {
  background:rgba(255,255,255,.07); color:#d6e4fb; font-weight:600; margin-bottom:8px;
}
#side button.zurueck:hover { background:rgba(255,255,255,.12); color:#fff; }
#side .sep, #seite .trenner { border-top:1px solid rgba(255,255,255,.08); margin:10px 8px; }

/* Aufklappbare Menuegruppen (Mike, 14.09.2026: „wie ein Drop-down-Menue").
   Die Gruppenzeile sieht aus wie ein Menuepunkt, traegt aber einen Pfeil und
   fuehrt nirgendwohin - sie oeffnet nur. Die Punkte darunter ruecken ein und
   haengen an einer duennen Linie, damit man auf einen Blick sieht, was
   wozu gehoert. */
#side button.grp { color:var(--side-txt); font-weight:600; }
/* Das gezeichnete Symbol sitzt genau dort, wo bei den anderen Punkten das
   Emoji steht, und ist optisch gleich schwer: 16 px Kantenlaenge, etwas
   angehoben, weil die Grundlinie eines Emojis tiefer liegt als die eines
   SVG-Rahmens. */
/* Die Zeichen des Menues (symbole.js) sitzen auf einer Kachel.

   Mike, 14.09.2026: „so eine Art Hochwertigkeit soll die Software
   ausstrahlen, das kann iPhone sehr gut, was Optik angeht." Gewaehlt hat er
   die glaenzende Fassung mit Glanzlicht, das der Maus folgt.

   Die Kachel besteht aus vier Mitteln, denselben, aus denen auch Apple seine
   Symbole baut:
     1. ein Verlauf von hell oben nach dunkel unten (die Form woelbt sich),
     2. eine Lichtkante an der Oberkante (1 px, innen),
     3. ein Schlaglicht links oben, das dem Zeiger folgt (--gx/--gy),
     4. ein weicher Schatten darunter (die Kachel liegt auf der Flaeche).
   Dazu ein halber Pixel heller Rand, damit sie sich vom Dunkel absetzt.

   Der Farbton kommt als --t aus symbole.js, vier Toene nach Bereich. */
/* Die Kachel gilt ueberall, nicht nur in der Leiste: seit Paket stil3
   tragen auch die Kennzahl-Kacheln der Uebersicht dasselbe Material. */
.kf {
  flex:0 0 auto; position:relative; width:24px; height:24px; border-radius:7.5px;
  display:grid; place-items:center;
  /* Der obere Anschlag stand erst bei 62 % Farbe - damit war die obere
     Kachelhaelfte fast weiss und das weisse Zeichen darauf kaum zu sehen
     (gemessen 1,25:1 im schlechtesten Punkt). Jetzt 85 %, und das
     Schlaglicht weiter unten ist entsprechend zurueckgenommen. */
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--t) 92%, #fff) 0%,
    var(--t) 50%,
    color-mix(in srgb, var(--t) 80%, #000) 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(0,0,0,.20),
             0 0 0 .5px rgba(255,255,255,.10);
  transition:transform .14s ease, box-shadow .14s ease;
}
.kf::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at var(--gx, 22%) var(--gy, 10%),
    rgba(255,255,255,.24) 0%, rgba(255,255,255,.07) 42%, rgba(255,255,255,0) 68%);
  transition:background-position .12s ease;
}
.kf .nsym {
  width:var(--symgr, 14px); height:var(--symgr, 14px); margin:0;
  color:#fff !important; stroke-width:2.4;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
}
/* In der Leiste sitzt sie einen Hauch anders, damit die Beschriftungen
   buendig zu den Emoji-losen Zeilen stehen. */
#side .kf { margin:-1px 0 0 -1px; }
/* Lange Beschriftungen: das Zeichen bleibt oben neben der ersten Zeile
   stehen, der Text bricht um, und der Pfeil bleibt im Knopf. Vorher stand
   der Pfeil bei sehr langen Namen 23 px ausserhalb.
   (Zweite Agentenpruefung 14.09.2026.) */
#side button { align-items:flex-start; overflow-wrap:anywhere; }
#side button .kf, #side button .pfeil, #side button .punkt { margin-top:1px; }
#side button.grp .gtext { min-width:0; }
/* Beim Darueberfahren hebt sich die Kachel einen halben Pixel an - gerade so
   viel, dass man es spuert, ohne dass die Zeile springt. */
#side button:hover .kf, .kpi[data-nav]:hover .ksym .kf { transform:translateY(-.5px);
  box-shadow:0 3px 7px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -1px 0 rgba(0,0,0,.20), 0 0 0 .5px rgba(255,255,255,.16); }
/* Auf der blauen Platte bleibt die Kachel, bekommt aber einen helleren Rand -
   sonst verschwimmt Farbe auf Farbe. */
/* Auf der blauen Platte ist ein blauer Fokusring unsichtbar (gemessen
   1,00:1). Dort wird er weiss. (Zweite Agentenpruefung 14.09.2026.) */
#side button.on:focus-visible { outline-color:#fff; }
#side button.on .kf { box-shadow:0 2px 5px rgba(0,0,0,.30),
  inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 .5px rgba(255,255,255,.28); }
@media (prefers-reduced-motion: reduce) {
  .kf, .kf::after { transition:none; }
  #side button:hover .kf { transform:none; }
}
#side button.grp .gtext { flex:1 1 auto; }
#side button.grp .pfeil { flex:0 0 auto; width:12px; text-align:right; font-size:9px; opacity:.45; }
#side button.grp .punkt { flex:0 0 auto; color:var(--blue-l, #5b9bff); font-size:16px; line-height:1; margin-left:2px; }
#side button.grp.auf { color:#fff; }
#side .grpinhalt {
  margin:1px 0 4px 10px; padding-left:8px;
  border-left:1px solid rgba(255,255,255,.12);
}
#side .grpinhalt button.unter { font-size:13px; padding:7px 10px; }
#konto { border-top:1px solid rgba(255,255,255,.08); padding:12px 10px 0; }

/* =====================================================================
   4. INHALT, KARTEN UND FLÄCHEN
   ===================================================================== */
#main, #inhalt { padding:24px 28px 64px; }
/* Auf sehr breiten Bildschirmen stand der Inhalt ganz links und rechts blieb
   eine leere Hälfte. Die schmalen Formularansichten rücken deshalb in die
   Mitte; die Listenansichten (.breit) nutzen die Breite weiter ganz aus. */
@media (min-width:1560px) { #main:not(.breit), #inhalt { margin-inline:auto; } }
#main > h1, #inhalt > h1 { font-size:22px; font-weight:700; margin-bottom:14px; letter-spacing:-.02em; }

.karte, .torkarte, .matkarte, .dbkarte, .sikarte, .rakarte, .tmkarte {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--rund);
  box-shadow:var(--schatten-2);
  padding:18px 20px;
}
.karte { margin-bottom:16px; }
.karte > h2 { margin-bottom:14px; }
/* Feiner Glanz auf der Oberkante – das, was eine Fläche „aus Glas" wirken lässt */
.karte { position:relative; }
.karte::before {
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--rund) var(--rund) 0 0;
  background:linear-gradient(90deg, transparent, var(--glanz), transparent); pointer-events:none;
}

/* Kacheln, Zahlenfelder, Listen – alles, was vorher hellgrau war */
.lagzahl, .kachel, .zahl, .stleiste, .infotab, .fitab, .bitab, .dbtab, .postab, .plantab, .s3dtab {
  border-radius:var(--rund-s);
}

/* =====================================================================
   5. KNÖPFE, FELDER, TABELLEN
   ===================================================================== */
.btn, button.btn {
  border:1px solid var(--line); background:var(--card); color:var(--txt);
  padding:8px 15px; border-radius:var(--rund-s); font-size:13.5px; font-weight:550;
  box-shadow:var(--schatten-1);
  transition:background .14s, border-color .14s, box-shadow .14s, transform .12s;
}
.btn:hover, button.btn:hover { background:var(--flaeche); border-color:var(--mut); transform:translateY(-1px); }
.btn:active, button.btn:active { transform:translateY(0); }
.btn.prim, button.btn.prim {
  background:linear-gradient(180deg, var(--blue-l), var(--blue));
  border-color:var(--blue-d); color:#fff; font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,38,.10), 0 8px 20px -10px rgba(31,111,235,.9);
}
.btn.prim:hover { background:linear-gradient(180deg, var(--blue), var(--blue-d)); box-shadow:0 2px 4px rgba(16,24,38,.12), 0 12px 26px -10px rgba(31,111,235,1); }
.btn.gefahr { color:var(--red); border-color:var(--red); background:var(--card); }
.btn.gefahr:hover { background:var(--red-bg); }
.btn:disabled { opacity:.45; transform:none; box-shadow:none; }
.btn.klein { padding:5px 11px; font-size:12.5px; border-radius:8px; }

input, select, textarea {
  background:var(--feld); color:var(--txt); border:1px solid var(--line);
  border-radius:var(--rund-s); padding:8px 11px;
  transition:border-color .14s, box-shadow .14s, background .14s;
}
input:hover, select:hover, textarea:hover { border-color:var(--mut); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--ring); background:var(--card);
}
input::placeholder, textarea::placeholder { color:var(--mut); opacity:.85; }
label.f { color:var(--mut); letter-spacing:.4px; }

/* Reiter als Pillen */
.tabs2 button, .kdlgtabs button { border-radius:999px; transition:background .14s, color .14s, border-color .14s; }
.tabs2 button:hover { background:var(--flaeche); }
.tabs2 button.on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600;
  box-shadow:0 6px 16px -8px rgba(31,111,235,.9); }

table { border-collapse:separate; border-spacing:0; }
/* Kopfzeile bewusst NICHT klebend: die Karten sind keine eigenen Rollbereiche,
   die Zeile klebte also am Fensterrand und legte sich über die Überschrift. */
th {
  background:var(--card); color:var(--mut);
  font-size:11px; letter-spacing:.5px; font-weight:650;
  padding:10px 10px; border-bottom:1px solid var(--line);
}
td { padding:10px; border-bottom:1px solid var(--line-2); color:var(--txt-2); }
tbody tr { transition:background .1s; }
tbody tr:hover td { background:var(--flaeche); }
tr:last-child td { border-bottom:none; }

/* =====================================================================
   6. MELDUNGEN, MARKEN, DIALOGE
   ===================================================================== */
.hinweis { border-radius:var(--rund-s); border:1px solid transparent; padding:11px 14px; }
.hinweis.fehler { background:var(--red-bg); color:var(--red); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.hinweis.gut    { background:var(--green-bg); color:var(--green); border-color:color-mix(in srgb, var(--green) 30%, transparent); }
.hinweis.info   { background:var(--blue-bg); color:var(--blue-d); border-color:color-mix(in srgb, var(--blue) 30%, transparent); }
.hinweis.warn   { background:var(--amber-bg); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
html[data-thema="dunkel"] .hinweis.info { color:var(--blue-l); }

.marke2 { border-radius:999px; padding:3px 10px; font-size:11.5px; font-weight:600; }
.m-leser { background:var(--flaeche); color:var(--mut); }

/* Dialoge: dieselbe Glasplatte wie die Karten, nur tiefer */
.kdlg, .dlg, dialog, .modal, .overlaykarte {
  background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--schatten-3);
}
.kdlgfuss, .kdlgtabs { border-color:var(--line); }
.plzliste { border-radius:var(--rund-s); box-shadow:var(--schatten-3); border-color:var(--line); }

/* Die Fahne des Beleg-Laufs */
#kiFahne {
  border-radius:12px; padding:9px 14px;
  background:var(--side-glas); color:#d6e4fb; border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px); box-shadow:var(--schatten-2);
}

/* Die kleinen Verweise oben rechts */
#kopfrechts a, .kopfrechts a, #oben a.link { border-radius:8px; padding:4px 8px; }
#kopfrechts a:hover, .kopfrechts a:hover { background:var(--flaeche); text-decoration:none; }

/* Die Serverleiste unten */
#serverleiste { border-radius:12px 12px 0 0; box-shadow:var(--schatten-2); }

/* =====================================================================
   7. DUNKLE FASSUNG: was sich nicht über Marken regeln lässt
   ===================================================================== */
html[data-thema="dunkel"] img.matthumb,
html[data-thema="dunkel"] .matbig { background:#eef1f6; }      /* Artikelbilder bleiben auf hellem Grund lesbar */
html[data-thema="dunkel"] svg .blatt,
html[data-thema="dunkel"] #printArea { background:#fff; }       /* Pläne und Druckvorschau sind Papier */
html[data-thema="dunkel"] [style*="background:#fff"],
html[data-thema="dunkel"] [style*="background: #fff"] { background:var(--card) !important; }
html[data-thema="dunkel"] [style*="color:#000"] { color:var(--txt) !important; }

/* =====================================================================
   9. MATERIAL — eine Handschrift für die ganze Oberfläche
   =====================================================================

   Mike, 14.09.2026: „ja mach komplett, aber mach nichts kaputt und immer
   vorher sichern." Gemeint ist das, was im Menue schon steht: die Kacheln im
   iPhone-Stil sollen die ganze Oberflaeche tragen, nicht nur die Leiste.

   Dieselben vier Mittel wie bei den Kacheln, nur leiser dosiert, weil eine
   Karte kein Knopf ist:

     1. ein Hauch Verlauf   — die Flaeche ist nicht tot, sondern gewoelbt
     2. eine Lichtkante     — 1 px an der Oberkante, innen
     3. ein weicher Schatten— das Stueck liegt AUF der Seite, nicht darin
     4. ein feiner Rand     — damit es sich vom Untergrund loest

   Alles hier haengt an den bestehenden Marken (--card, --line, --blue …).
   Es aendert kein einziges Mass, keine Schriftgroesse und keinen Abstand:
   was gestern an einer Stelle stand, steht heute an derselben. Damit kann
   nichts verrutschen - es wird nur anders beleuchtet.
   ===================================================================== */

/* ---------- Karten ---------- */
.card {
  border-radius:12px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card) 96%, #fff) 0%,
      var(--card) 58%,
      color-mix(in srgb, var(--card) 97%, #000) 100%);
  /* Der weit gestreute zweite Schatten ist die teuerste Stelle beim Malen:
     gemessen kostete die erste Fassung 10-16 ms je Ansichtswechsel. Enger
     gezogen und mit `contain:paint` bleibt die Tiefe, ohne dass der Browser
     bei jeder Karte die halbe Seite neu rechnet.
     (Agentenpruefung 14.09.2026.) */
  box-shadow:0 1px 2px rgba(16,24,38,.06), 0 6px 14px -10px rgba(16,24,38,.26);
  position:relative;
  contain:paint;
}
/* Die Lichtkante. Sie liegt IM Element, nicht daneben, und faengt keine
   Klicks ab - sonst waeren die obersten Pixel jeder Karte tot. */
.card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  border-radius:12px 12px 0 0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
html[data-thema="dunkel"] .card {
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -16px rgba(0,0,0,.75);
}
html[data-thema="dunkel"] .card::before {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* ---------- Kennzahl-Kacheln (die Reihe oben in der Uebersicht) ---------- */
.kpi {
  border-radius:12px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card) 94%, #fff) 0%,
      var(--card) 60%,
      color-mix(in srgb, var(--card) 96%, #000) 100%);
  box-shadow:0 1px 2px rgba(16,24,38,.06), 0 8px 20px -12px rgba(16,24,38,.30);
  position:relative;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.kpi::before {
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  border-radius:12px 12px 0 0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
/* Nur die anklickbaren heben sich - eine Kachel, die nichts tut, soll auch
   nicht so aussehen, als taete sie etwas. */
.kpi[data-nav]:hover {
  transform:translateY(-1px); border-color:var(--blue);
  box-shadow:0 2px 4px rgba(16,24,38,.08), 0 14px 28px -12px rgba(31,111,235,.45);
}
html[data-thema="dunkel"] .kpi {
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 24px -14px rgba(0,0,0,.75);
}
html[data-thema="dunkel"] .kpi::before {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* Das Zeichen auf einer Kennzahl-Kachel: oben rechts, klein, ruhig. Die
   Zahl ist die Hauptsache. Auf schmalen Schirmen faellt es weg, dort ist
   der Platz fuer die Zahl da und nicht fuer Schmuck. */
.kpi .ksym { position:absolute; top:9px; right:9px; line-height:0; opacity:.92; }
.kpi .ksym .kf { width:22px; height:22px; border-radius:7px; margin:0; }
.kpi .ksym .kf { --symgr:13px; }
/* Der Abstand gehoert an die Kachel MIT Zeichen, nicht an jede.
   Gemessen (Agentenpruefung 14.09.2026): ohne diese Einschraenkung wurden
   drei Kacheln im Finanzblock, die gar kein Zeichen tragen, zweizeilig -
   die Seite wuchs um 19 px, ohne dass irgendwo etwas zu sehen war. */
.kpi:has(.ksym) .l { padding-right:26px; }
@media (max-width:520px) { .kpi .ksym { display:none; } .kpi:has(.ksym) .l { padding-right:0; } }

/* ---------- Knoepfe ----------
   Derselbe Aufbau wie die Kacheln im Menue: Verlauf, Lichtkante, Schatten.
   Beim Druecken sinkt der Knopf ein - das ist die Rueckmeldung, die eine
   Oberflaeche „echt" anfuehlen laesst. */
.btn, button.btn {
  border-radius:9px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--card) 92%, #fff) 0%,
    var(--card) 55%,
    color-mix(in srgb, var(--card) 96%, #000) 100%);
  box-shadow:0 1px 2px rgba(16,24,38,.08), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover, button.btn:hover {
  /* Der Verlauf MUSS hier wiederholt werden: weiter oben in dieser Datei
     setzt Abschnitt 5 ein `background:var(--flaeche)` auf :hover, und diese
     Kurzform loescht das background-image. Ohne diese Zeile wurde der Knopf
     beim Ueberfahren flach - genau andersherum als gedacht.
     (Agentenpruefung 14.09.2026.) */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--flaeche) 92%, #fff) 0%,
    var(--flaeche) 55%,
    color-mix(in srgb, var(--flaeche) 96%, #000) 100%);
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(16,24,38,.12), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn:active, button.btn:active {
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(16,24,38,.16);
}
button.prim, .btn.prim, button.btn.prim {
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 86%, #fff), var(--blue) 55%, var(--blue-d));
  border-color:var(--blue-d);
  box-shadow:0 1px 2px rgba(16,24,38,.10), 0 8px 18px -8px rgba(31,111,235,.65),
             inset 0 1px 0 rgba(255,255,255,.35);
}
button.prim:hover, .btn.prim:hover, button.btn.prim:hover {
  box-shadow:0 3px 6px rgba(16,24,38,.12), 0 14px 26px -10px rgba(31,111,235,.85),
             inset 0 1px 0 rgba(255,255,255,.45);
}
button.danger, .btn.danger {
  box-shadow:0 1px 2px rgba(16,24,38,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-thema="dunkel"] .btn, html[data-thema="dunkel"] button.btn {
  box-shadow:0 1px 2px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-thema="dunkel"] .btn:hover, html[data-thema="dunkel"] button.btn:hover {
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
html[data-thema="dunkel"] .btn:active, html[data-thema="dunkel"] button.btn:active {
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55);
}

/* ---------- Eingabefelder ----------
   Ein Feld ist das Gegenteil eines Knopfes: es liegt nicht auf der Flaeche,
   sondern darin. Deshalb ein Schatten nach INNEN statt nach aussen. */
/* Ausdruecklich nur Text- und Zahlenfelder: ein Ankreuzfeld ist kein
   Eingabefeld mit Innenschatten, ein Regler auch nicht. Gemessen lagen
   sonst auf jedem Haken im Zaehlerschrank-Konfigurator 48 von 441 Pixeln
   falsch. (Zweite Agentenpruefung 14.09.2026.) */
/* Und ausdruecklich nur im RUHENDEN Zustand. Jedes :not() zaehlt bei der
   Staerke einer Regel mit - sieben davon schlagen jeden Fokusring, den
   Abschnitt 5 setzt. Ohne das `:not(:focus)` hier war der Ring auch in der
   hellen Fassung weg. Gemessen und nachgebessert am 14.09.2026. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not(:focus),
select:not(:focus), textarea:not(:focus) {
  border-radius:9px;
  box-shadow:inset 0 1px 2px rgba(16,24,38,.06);
}
/* Die Rundung gilt fuer beide Zustaende. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea { border-radius:9px; }
html[data-thema="dunkel"] input:not(:focus):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html[data-thema="dunkel"] select:not(:focus),
html[data-thema="dunkel"] textarea:not(:focus) {
  box-shadow:inset 0 1px 3px rgba(0,0,0,.40);
}
/* Der Fokusring MUSS gewinnen. Ohne das :not(:focus) oben schlug diese
   Regel den Ring aus Abschnitt 5 (sie steht spaeter und ist staerker) -
   in der dunklen Fassung war beim Hineinklicken in ein Feld nichts mehr zu
   sehen: gemessen 1,17:1 statt der geforderten 3:1.
   (Zweite Agentenpruefung 14.09.2026.) */
html[data-thema="dunkel"] input:focus,
html[data-thema="dunkel"] select:focus,
html[data-thema="dunkel"] textarea:focus {
  box-shadow:0 0 0 3px var(--ring) !important;
}
/* Und im Hellen genauso: der Ring aus Abschnitt 5 muss jede Regel dieses
   Abschnitts schlagen, egal wie stark sie durch ihre Ausnahmen geworden ist. */
input:focus, select:focus, textarea:focus { box-shadow:0 0 0 3px var(--ring) !important; }

/* ---------- Kennzeichen (bezahlt, ueberfaellig, offen …) ----------
   Ein feiner Rand in der eigenen Farbe: dadurch sitzt die Marke auf der
   Flaeche, statt wie ein Fleck darin zu schwimmen. */
.badge {
  border:1px solid color-mix(in srgb, currentColor 28%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-thema="dunkel"] .badge { box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------------------------------------------------------------------
   Schmale Schirme — die Leiste legt sich quer

   In arbeit.html steht dafuer seit langem eine Medienabfrage, aber sie war
   wirkungslos: sie steht in der eingebetteten <style> ganz oben, und diese
   Datei wird SPAETER eingebunden. Bei gleicher Spezifitaet gewinnt das
   Spaetere - eine Medienabfrage erhoeht die Spezifitaet nicht. Gemessen:
   bei 390 px Breite blieb die Leiste ein 246 x 246 grosser Klotz und die
   Seite lief 653 px waagerecht ueber. Das galt vor diesem Paket genauso;
   gefunden hat es die zweite Agentenpruefung am 14.09.2026.
   --------------------------------------------------------------------- */
@media (max-width:840px) {
  #layout { flex-direction:column; }
  #side {
    width:auto; flex:none; height:auto; position:static; box-sizing:border-box;
    display:flex; flex-wrap:wrap; gap:4px; padding:8px;
  }
  #side .logo, #side .sufeld { width:100%; }
  #side button { width:auto; border-radius:9px; padding:7px 10px; }
  #side .sep { display:none; }
  /* Die Gruppe braucht die volle Breite, sonst haengt ihr Inhalt neben ihr. */
  #side button.grp, #side .grpinhalt { width:100%; }
  #side .grpinhalt { display:flex; flex-wrap:wrap; gap:4px; margin-left:0; }
  #side .grpinhalt button { width:auto; }
  #main, #inhalt { padding:16px 14px 48px; }
  /* Ein Raster mit `1fr` ist mindestens so breit wie sein breitester
     Inhalt - eine Tabelle mit acht Spalten zieht die Spalte auf 1.015 px
     und die ganze Seite laeuft ueber. `minmax(0,1fr)` erlaubt ihr, schmaler
     zu werden als ihr Inhalt; die Tabelle darin bekommt dann ihren eigenen
     Schieber, statt die Seite mitzunehmen.
     (Gemessen bei 390 px: 639 px Ueberlauf. Zweite Agentenpruefung.) */
  .uebzwei, .grid, .kpis { grid-template-columns:minmax(0,1fr); }
  .card > table, .karte > table { display:block; max-width:100%; overflow-x:auto; }
  .card, .karte { min-width:0; }
}

/* Beim Drucken zählt Papier, nicht Glas. */
@media print {
  #side, #seite, #kiFahne, #serverleiste { display:none !important; }
  body { background:#fff !important; background-image:none !important; color:#000; }
  .karte { box-shadow:none; border:1px solid #ccc; }
  /* Auf Papier gibt es kein Glas: Verlaeufe, Schatten und Lichtkanten
     kosten nur Toner und drucken sich als schmutziger Grauschleier.
     (Paket stil3, 14.09.2026.) */
  .card, .kpi, .btn, button.btn, .badge, input, select, textarea, .kf {
    box-shadow:none !important; background-image:none !important;
  }
  .card::before, .kpi::before, .kf::after { display:none !important; }
  .card, .kpi { border:1px solid #ccc !important; }
}

/* Wer im Betriebssystem „weniger Bewegung" eingestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}

/* =====================================================================
   tor1 (29.09.2026) – Anmeldeseite als Glaskarte mit Licht
   Wunsch Mike: „so ein bisschen durchsichtig wie Glas … mit den
   Lichteffekten“ (Vorlage: blaue Glas-Anmeldung). Die Anmeldeseiten
   (.tor) sind jetzt IMMER dunkelblau – unabhängig vom gewählten Design,
   denn vor der Anmeldung kennt der Browser das Design des Betriebs
   ohnehin nicht. Gilt für: Anmelden, Passwort vergessen, Passwort
   setzen / Einladung. Die Verwaltung und Arbeitsoberfläche sind nicht
   betroffen (alles hängt an .tor2).
   Bausteine:
   1. Hintergrund: tiefes Nachtblau, unten heller Dunst, zwei wandernde
      Lichter (die ::before/::after aus stil.css, hier nur umgefärbt).
   2. Karte: Glas mit Unschärfe, feiner heller Rand, zwei Lichtpunkte
      links/rechts an der Kante, ein Licht, das langsam um den Rand läuft,
      und ein weicher Schein, der der Maus folgt.
   3. Felder dunkelblau mit Symbol, Knopf mit Verlauf und Glanz.
   „Weniger Bewegung“ im Betriebssystem: alles steht still (Regel am
   Ende von stil2.css greift auch hier).
   ===================================================================== */
.tor2 {
  --tor-a:#1b8be0; --tor-b:#23c4ec; --tor-staerke:.5;
  --t-text:#eaf4ff; --t-mut:rgba(196,222,248,.72); --t-akzent:#56c8ff;
  --t-feld-a:rgba(3,30,70,.88); --t-feld-b:rgba(6,56,112,.72);
  --t-rand:rgba(150,220,255,.45);
  /* Stärke-Anzeige (Passwort setzen): helle Töne, damit sie auf dem Glas lesbar sind */
  --red:#ff8f85; --amber:#ffc76b; --green:#6fe0a3;
  color:var(--t-text);
  color-scheme:dark;
  background:
    radial-gradient(120% 55% at 50% 118%, rgba(176,196,222,.55), rgba(90,120,160,.18) 45%, transparent 70%),
    radial-gradient(70% 55% at 88% -5%, rgba(4,26,58,.95), transparent 70%),
    radial-gradient(60% 50% at 0% 70%, rgba(3,14,28,.85), transparent 70%),
    linear-gradient(160deg, #0d3450 0%, #0a2238 42%, #07182a 100%);
}
/* Die beiden Lichter aus stil.css etwas kräftiger */
.tor2::before, .tor2::after { filter:blur(80px); }

.tor2 .torkarte {
  --mx:50%; --my:30%;
  position:relative; z-index:1;
  width:100%; max-width:420px;
  padding:38px 34px 26px;
  border-radius:34px;
  border:1.5px solid var(--t-rand);
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.10), transparent 60%),
    linear-gradient(155deg, rgba(90,170,235,.26) 0%, rgba(40,110,180,.16) 45%, rgba(110,190,240,.22) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(120,210,255,.10),
    0 0 46px rgba(60,170,255,.16),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 0 44px rgba(120,200,255,.10);
  animation:torAuf .6s cubic-bezier(.2,.7,.3,1) both;
}
/* Lichtpunkte links und rechts an der Kante – wie in der Vorlage */
.tor2 .torkarte::before, .tor2 .torkarte::after {
  content:""; position:absolute; top:50%; width:6px; height:120px; margin-top:-80px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, #fff, #7fe0ff 35%, rgba(60,170,255,0) 100%);
  box-shadow:0 0 30px 10px rgba(80,190,255,.45), 0 0 80px 24px rgba(40,150,255,.25);
  animation:torPuls 5.5s ease-in-out infinite;
}
.tor2 .torkarte::before { left:-3px; top:44%; }
.tor2 .torkarte::after  { right:-3px; top:60%; animation-delay:-2.7s; }
@keyframes torPuls { 0%,100% { opacity:.65; } 50% { opacity:1; } }

/* Das Licht, das um den Rand läuft */
@property --torwinkel { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.tor2 .torkante {
  position:absolute; inset:-1.5px; border-radius:inherit; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--torwinkel),
    transparent 0deg, transparent 200deg,
    rgba(86,200,255,.0) 215deg, rgba(86,200,255,.9) 290deg, #ffffff 318deg, rgba(86,200,255,.9) 336deg,
    transparent 358deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:torUmlauf 9s linear infinite;
  filter:drop-shadow(0 0 6px rgba(86,200,255,.8));
}
@keyframes torUmlauf { to { --torwinkel:360deg; } }

/* Zeichen oben: Ring mit Blitz, darunter der Name */
.tor2 .torlogo {
  width:92px; height:92px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--t-akzent);
  box-shadow:0 0 22px rgba(86,200,255,.45), inset 0 0 18px rgba(86,200,255,.25);
  background:radial-gradient(circle at 50% 40%, rgba(86,200,255,.16), transparent 70%);
}
.tor2 .torlogo svg { width:44px; height:44px; filter:drop-shadow(0 0 6px rgba(86,200,255,.7)); }
.tor2 .marke {
  text-align:center; font-size:23px; font-weight:750; letter-spacing:.01em; margin-bottom:2px;
  color:#fff;
  background:linear-gradient(180deg, #ffffff 30%, #b9e6ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tor2 .marke .sm {
  display:block; margin-top:4px; font-size:12px; font-weight:500; letter-spacing:.08em;
  -webkit-text-fill-color:var(--t-mut); color:var(--t-mut);
}
.tor2 .torkarte h1 { font-size:17px; font-weight:650; text-align:center; margin:22px 0 4px; color:var(--t-text); }
.tor2 .torkarte .unter { color:var(--t-mut); text-align:center; font-size:13.5px; margin-bottom:20px; }
.tor2 .mut, .tor2 .sm.mut { color:var(--t-mut); }

/* Felder */
.tor2 label.f { color:var(--t-mut); }
.tor2 .unsichtbar { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tor2 .torfeld { position:relative; margin-top:12px; }
.tor2 .torfeld svg {
  position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px;
  fill:#c7d6e8; opacity:.85; pointer-events:none;
}
.tor2 input:not([type=checkbox]):not([hidden]) {
  width:100%; height:52px; border-radius:10px;
  padding:0 16px; font-size:15px; letter-spacing:.02em;
  color:var(--t-text); caret-color:var(--t-akzent);
  background:linear-gradient(90deg, var(--t-feld-a), var(--t-feld-b));
  border:1px solid rgba(120,200,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, box-shadow .2s;
}
.tor2 .torfeld input { padding-left:48px !important; }
.tor2 input::placeholder { color:rgba(200,222,245,.6); }
.tor2 input:not([type=checkbox]):focus {
  outline:none; border-color:var(--t-akzent);
  box-shadow:0 0 0 3px rgba(86,200,255,.22), 0 0 22px rgba(86,200,255,.30);
}
/* Chrome färbt gespeicherte Anmeldungen sonst hellgelb */
.tor2 input:-webkit-autofill, .tor2 input:-webkit-autofill:hover, .tor2 input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--t-text);
  -webkit-box-shadow:0 0 0 100px #062e5c inset;
  transition:background-color 9999s;
}
.tor2 input[type=checkbox] { accent-color:var(--t-akzent); }
.tor2 .nebenan { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:8px 0 14px; flex-wrap:wrap; }
.tor2 .merker { color:var(--t-mut); }
.tor2 .link { color:#9fdcff; font-style:italic; cursor:pointer; }
.tor2 .link:hover { color:#fff; text-decoration:underline; }

/* Knopf */
.tor2 .btn.prim, .tor2 button.btn.prim {
  position:relative; overflow:hidden; height:52px; border-radius:12px;
  font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(140,215,255,.35);
  background:linear-gradient(90deg, #06356e 0%, #0b5ba8 60%, #1285d0 100%);
  box-shadow:0 10px 30px -10px rgba(20,140,240,.7), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.tor2 .btn.prim::after {
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .6s ease;
}
.tor2 .btn.prim:hover { filter:brightness(1.12); box-shadow:0 14px 36px -10px rgba(40,170,255,.85), inset 0 1px 0 rgba(255,255,255,.22); transform:translateY(-1px); }
.tor2 .btn.prim:hover::after { left:120%; }
.tor2 .btn.prim:disabled { filter:saturate(.6) brightness(.9); transform:none; }
.tor2 .btn:not(.prim) { background:rgba(255,255,255,.06); color:var(--t-text); border:1px solid var(--t-rand); height:46px; border-radius:12px; }
.tor2 .btn:not(.prim):hover { background:rgba(255,255,255,.12); }

/* Meldungen auf dunklem Glas */
.tor2 .hinweis { margin-top:14px; border-radius:10px; }
.tor2 .hinweis.fehler { background:rgba(220,60,60,.16); color:#ffc9c9; border:1px solid rgba(255,120,120,.35); }
.tor2 .hinweis.gut    { background:rgba(40,190,120,.14); color:#bff3d8; border:1px solid rgba(90,220,160,.35); }
.tor2 .staerke { background:rgba(255,255,255,.10); }

/* Hilfe-Knopf in der Fußzeile (setzt hilfe.js ein) passend zum Glas */
.tor2 .torfuss .kh-hilfeknopf { background:rgba(255,255,255,.08) !important; color:var(--t-text) !important;
  border:1px solid var(--t-rand) !important; border-radius:20px; }
.tor2 .torfuss .kh-hilfeknopf:hover { background:rgba(255,255,255,.16) !important; }

/* Fuß */
.tor2 .torkarte .torfuss { border-top:1px solid rgba(255,255,255,.12); color:var(--t-mut); margin-top:22px; }
.tor2 .torkarte .torfuss a { color:var(--t-mut); }
.tor2 .torkarte .torfuss a:hover { color:#fff; }

@media (max-width:480px) {
  .tor2 { padding:16px; }
  .tor2 .torkarte { padding:30px 20px 20px; border-radius:26px; }
  .tor2 .torlogo { width:76px; height:76px; }
  .tor2 .torlogo svg { width:36px; height:36px; }
}
/* Ohne Unschärfe (alte Browser): dichteres Glas, damit die Schrift lesbar bleibt */
@supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .tor2 .torkarte { background:linear-gradient(155deg, rgba(16,58,98,.96), rgba(10,40,74,.96)); }
}
@media (prefers-reduced-motion: reduce) {
  .tor2 .torkante { display:none; }
  .tor2 .torkarte::before, .tor2 .torkarte::after { animation:none; }
}