/* ═══════════════════════════════════════════════════════════════════════════
   LRC MENTORSHIP — DESIGN-SYSTEM
   Aufgebaut wie das System des DAD Journal: eine Quelle für Flächen, Schrift,
   Abstände, Radien, Bewegung und Komponenten. Marke ist das Gold des Buches
   statt des DAD-Blaus.

     1  Flächen und Farben
     2  Schrift
     3  Abstände, Radien, Schatten, Bewegung
     4  Grundlagen
     5  Komponenten
     6  Zustände: leer, ladend, fehlerhaft
     7  Bewegung

   Regeln
     · Tiefe entsteht durch Flächenebenen, nicht durch Schlagschatten.
     · Hierarchie entsteht durch Abstand, Größe und Gewicht — nicht durch
       zusätzliche Rahmen oder Farbflächen.
     · Gold trägt Bedeutung: Marke, Fortschritt, aktiver Zustand. Nie Deko.
     · Bewegung dauert 120–240 ms und begleitet eine Handlung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Schriftdateien liegen lokal: kein fremder Server, kein Nachladeblitz ── */
@font-face{font-family:'Inter';src:url('fonts/Inter-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;}

/* ─────────────────────────────────────────────────────────────────────────
   1  FLÄCHEN UND FARBEN
   Fünf dunkle Ebenen statt reinem Schwarz. Jede liegt optisch eine Stufe
   höher als die vorige — dadurch entsteht Tiefe ohne einen Schatten.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --s0:#08090c;   /* Seitengrund                        */
  --s1:#0d0f13;   /* Kopfleiste, Seitenleiste           */
  --s2:#121519;   /* Karten, Panels                     */
  --s3:#171b21;   /* Eingaben, Hover, Innenflächen      */
  --s4:#1d222a;   /* Menüs, Dialoge, Tooltips           */

  --line-subtle:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.15);

  --text:#e9ebee;      /* nicht reinweiß: weniger Blendung */
  --text-2:#9aa1ac;
  --text-3:#6d747f;
  --text-off:#4a505a;

  /* Marke — das Gold des Buches, eine Spur heller für 4.5:1 auf dunklem Grund */
  --brand:#e9b44c;
  --brand-hover:#f3c468;
  --brand-press:#cf9c35;
  --brand-ink:#20160a;                      /* Schrift auf goldener Fläche */
  --brand-weak:rgba(233,180,76,.12);
  --brand-line:rgba(233,180,76,.32);

  /* Bedeutungsfarben */
  --pos:#30c48d;  --pos-weak:rgba(48,196,141,.12);  --pos-line:rgba(48,196,141,.3);
  --neg:#e5484d;  --neg-weak:rgba(229,72,77,.12);   --neg-line:rgba(229,72,77,.3);
  --warn:#f5a524; --warn-weak:rgba(245,165,36,.12); --warn-line:rgba(245,165,36,.3);
}

/* ─────────────────────────────────────────────────────────────────────────
   2  SCHRIFT
   Inter für die Oberfläche. IBM Plex Mono nur dort, wo feste Zeichenbreite
   echten Nutzen hat: Kennzahlen, Laufzeiten, Kennungen.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --display:600 40px/1.1 var(--font);
  --h1:600 28px/1.21 var(--font);
  --h2:600 20px/1.3 var(--font);
  --h3:600 16px/1.375 var(--font);
  --body:400 14px/1.5 var(--font);
  --body-sm:400 13px/1.46 var(--font);
  --small:400 12px/1.42 var(--font);
  --caption:400 11px/1.36 var(--font);
  --overline:550 11px/1.33 var(--font);

  --ls-display:-.03em; --ls-h1:-.025em; --ls-h2:-.02em;
  --ls-h3:-.015em;     --ls-body:-.006em; --ls-overline:.07em;
}
.display{font:var(--display);letter-spacing:var(--ls-display);color:var(--text);}
.h1{font:var(--h1);letter-spacing:var(--ls-h1);color:var(--text);}
.h2{font:var(--h2);letter-spacing:var(--ls-h2);color:var(--text);}
.h3{font:var(--h3);letter-spacing:var(--ls-h3);color:var(--text);}
.body{font:var(--body);letter-spacing:var(--ls-body);color:var(--text);}
.body-2{font:var(--body);letter-spacing:var(--ls-body);color:var(--text-2);}
.body-sm{font:var(--body-sm);color:var(--text-2);}
.small{font:var(--small);color:var(--text-2);}
.caption{font:var(--caption);color:var(--text-3);}
.overline{font:var(--overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--brand);}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em;}

/* ─────────────────────────────────────────────────────────────────────────
   3  ABSTÄNDE · RADIEN · BEWEGUNG
   Vier-Punkt-Raster, zwölf Werte. Mehr braucht keine Oberfläche.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --1:2px;  --2:4px;  --3:6px;  --4:8px;
  --5:12px; --6:16px; --7:20px; --8:24px;
  --9:32px; --10:40px; --11:48px; --12:64px;

  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(233,180,76,.26);

  --fast:120ms; --base:180ms; --slow:240ms;
  --ease:cubic-bezier(.2,0,.15,1);

  --kopf:56px;
}
@media (prefers-reduced-motion:reduce){
  :root{--fast:1ms;--base:1ms;--slow:1ms;}
}

/* ─────────────────────────────────────────────────────────────────────────
   4  GRUNDLAGEN
   ───────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
/* display:flex an .field/.metric schlaegt sonst das hidden-Attribut */
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
body{
  background:var(--s0);color:var(--text);
  font:var(--body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance;}
p{margin:0;}
a{color:var(--brand);text-decoration:none;}
a:hover{color:var(--brand-hover);}
img{max-width:100%;height:auto;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm);}
::selection{background:var(--brand-weak);}

/* ─────────────────────────────────────────────────────────────────────────
   5  KOMPONENTEN
   ───────────────────────────────────────────────────────────────────────── */

/* ── 5.1 Knöpfe ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--3);
  height:36px;padding:0 var(--6);
  font:500 13.5px/1 var(--font);letter-spacing:-.006em;
  border:1px solid transparent;border-radius:var(--r-md);
  cursor:pointer;white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn-sm{height:30px;padding:0 var(--5);font-size:12.5px;}
.btn-lg{height:44px;padding:0 var(--8);font-size:14.5px;}

.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600;}
.btn-primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-ink);}
.btn-primary:active:not(:disabled){background:var(--brand-press);}

.btn-secondary{background:var(--s3);border-color:var(--line);color:var(--text);}
.btn-secondary:hover:not(:disabled){background:var(--s4);border-color:var(--line-strong);}

.btn-tertiary{background:transparent;border-color:var(--line);color:var(--text-2);}
.btn-tertiary:hover:not(:disabled){background:var(--s3);color:var(--text);}

.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2);}
.btn-ghost:hover:not(:disabled){background:var(--s3);color:var(--text);}

.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed;}
.btn[data-loading=true]{color:transparent!important;pointer-events:none;position:relative;}
.btn[data-loading=true]::after{
  content:'';position:absolute;width:14px;height:14px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--brand-ink);animation:spin .6s linear infinite;}
.btn-secondary[data-loading=true]::after,
.btn-tertiary[data-loading=true]::after,
.btn-ghost[data-loading=true]::after{color:var(--text-2);}

/* ── 5.2 Felder ───────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--3);margin-bottom:var(--6);}
.label{font:500 12.5px/1.3 var(--font);color:var(--text-2);letter-spacing:-.004em;}
.hint{font:var(--caption);color:var(--text-3);}
.input,.select,.textarea{
  width:100%;height:36px;padding:0 var(--4);
  background:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);font:var(--body);letter-spacing:var(--ls-body);
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.textarea{height:auto;min-height:88px;padding:var(--4);line-height:1.55;resize:vertical;}
.input::placeholder,.textarea::placeholder{color:var(--text-off);}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-strong);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);}

/* ── 5.3 Karten ───────────────────────────────────────────────────────── */
.card{background:var(--s2);border:1px solid var(--line-subtle);border-radius:var(--r-xl);padding:var(--7);}
.card-flush{padding:0;overflow:hidden;}
.card-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--5);padding:var(--6) var(--7);border-bottom:1px solid var(--line-subtle);}
.card-body{padding:var(--7);}

/* ── 5.4 Abschnittsüberschrift ────────────────────────────────────────── */
.section{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--5);margin:var(--10) 0 var(--6);}
.section-title{font:var(--h2);letter-spacing:var(--ls-h2);color:var(--text);}
.section-meta{font:var(--small);color:var(--text-3);}

/* ── 5.5 Kennzahlen ───────────────────────────────────────────────────── */
.metric{display:flex;flex-direction:column;gap:var(--2);}
.metric-value{font:600 27px/1.05 var(--font);letter-spacing:-.025em;
  color:var(--text);font-variant-numeric:tabular-nums;}
.metric-xl .metric-value{font-size:40px;letter-spacing:-.03em;}
.metric-sm .metric-value{font-size:20px;}
.metric-label{font:var(--overline);letter-spacing:var(--ls-overline);
  text-transform:uppercase;color:var(--text-3);}
.metric-sub{font:var(--small);color:var(--text-2);}

/* ── 5.6 Abzeichen ────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:var(--2);
  height:20px;padding:0 var(--3);border-radius:var(--r-sm);
  font:550 11px/1 var(--font);letter-spacing:.01em;
  background:var(--s3);border:1px solid var(--line);color:var(--text-2);}
.badge-brand{background:var(--brand-weak);border-color:var(--brand-line);color:var(--brand);}
.badge-pos{background:var(--pos-weak);border-color:var(--pos-line);color:var(--pos);}
.badge-neg{background:var(--neg-weak);border-color:var(--neg-line);color:var(--neg);}
.badge-warn{background:var(--warn-weak);border-color:var(--warn-line);color:var(--warn);}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor;}
.badge svg{flex-shrink:0;display:block;}

/* ── 5.7 Reiter ───────────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--2);border-bottom:1px solid var(--line-subtle);}
.tab{position:relative;height:36px;padding:0 var(--5);
  background:none;border:0;cursor:pointer;
  font:500 13px/1 var(--font);color:var(--text-3);
  transition:color var(--fast) var(--ease);}
.tab:hover{color:var(--text-2);}
.tab[aria-selected=true]{color:var(--text);}
.tab[aria-selected=true]::after{content:'';position:absolute;left:var(--4);right:var(--4);
  bottom:-1px;height:2px;background:var(--brand);border-radius:2px 2px 0 0;}

/* ── 5.8 Fortschritt ──────────────────────────────────────────────────── */
.bar{height:3px;background:var(--s3);border-radius:var(--r-pill);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--brand-press),var(--brand));
  transition:width var(--slow) var(--ease);}
.bar-lg{height:5px;}

/* Ring: Umfang 2·π·15 ≈ 94.25 — der Wert steht auch im Skript */
.ring{display:inline-flex;align-items:center;gap:var(--4);}
.ring svg{transform:rotate(-90deg);display:block;}
.ring circle{fill:none;stroke-width:3;}
.ring .bahn{stroke:var(--s3);}
.ring .wert{stroke:var(--brand);stroke-linecap:round;
  transition:stroke-dashoffset var(--slow) var(--ease);}

/* ── 5.9 Hinweise und Meldungen ───────────────────────────────────────── */
/* Flex, damit ein führendes Symbol neben dem Text sitzt. Der Text selbst
   muss deshalb in EINEM Kind stehen — sonst wird jeder Absatz zur Spalte. */
.note{display:flex;gap:var(--4);padding:var(--5) var(--6);
  border:1px solid var(--line);border-radius:var(--r-md);
  font:var(--body-sm);color:var(--text-2);background:var(--s2);line-height:1.6;}
.note > svg{flex-shrink:0;margin-top:2px;}
.note > div{min-width:0;}
.note b{color:var(--text);font-weight:600;}
.note-brand{background:var(--brand-weak);border-color:var(--brand-line);}
.note-pos{background:var(--pos-weak);border-color:var(--pos-line);color:#bfe6d4;}
.note-neg{background:var(--neg-weak);border-color:var(--neg-line);color:#f2c3c4;}
.note-warn{background:var(--warn-weak);border-color:var(--warn-line);color:#f2d7a6;}

.toast{display:flex;align-items:flex-start;gap:var(--4);
  padding:var(--5);max-width:380px;background:var(--s4);
  border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);font:var(--body-sm);
  animation:slide var(--slow) var(--ease);}

/* ── 5.10 Kurzhinweis ─────────────────────────────────────────────────── */
.tip{position:relative;}
.tip::after{content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  padding:var(--3) var(--4);font:var(--caption);color:var(--text);white-space:nowrap;
  background:var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;z-index:50;
  transition:opacity var(--fast) var(--ease);}
.tip:hover::after,.tip:focus-visible::after{opacity:1;}

/* ─────────────────────────────────────────────────────────────────────────
   6  ZUSTÄNDE: LEER · LADEND · FEHLERHAFT
   Jeder leere Bereich erklärt, was fehlt und was als Nächstes zu tun ist.
   ───────────────────────────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--4);padding:var(--11) var(--7);}
.empty-icon{width:40px;height:40px;display:grid;place-items:center;
  color:var(--text-3);background:var(--s3);border:1px solid var(--line-subtle);
  border-radius:var(--r-lg);margin-bottom:var(--2);}
.empty-title{font:var(--h3);letter-spacing:var(--ls-h3);color:var(--text);}
.empty-text{font:var(--body-sm);color:var(--text-2);max-width:38ch;line-height:1.6;}

/* Skelette zeigen die Fläche des künftigen Inhalts, nicht einen Kreisel im Nichts */
.skel{background:linear-gradient(90deg,var(--s3) 25%,rgba(255,255,255,.05) 37%,var(--s3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:var(--r-sm);}
.skel-text{height:12px;margin-bottom:var(--3);}
.skel-title{height:20px;width:40%;margin-bottom:var(--5);}
.skel-metric{height:28px;width:58%;}
.skel-video{height:auto;aspect-ratio:16/9;border-radius:var(--r-xl);}
.skel-row{height:40px;margin-bottom:var(--2);}
@media (prefers-reduced-motion:reduce){.skel{animation:none;}}

/* ─────────────────────────────────────────────────────────────────────────
   7  BEWEGUNG
   Kurz, richtungsgebunden, immer an eine Handlung geknüpft.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fade{from{opacity:0;}}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.99);}}
@keyframes slide{from{opacity:0;transform:translateX(12px);}}
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.an-fade{animation:fade var(--base) var(--ease);}
.an-rise{animation:rise var(--slow) var(--ease) both;}
/* Gestaffelter Einlauf: Kacheln und Karten laufen nacheinander ein,
   nicht alle gleichzeitig. Nach 8 Stufen ist Schluss, sonst wartet man. */
/* Elemente mit .zeigt haben ihren eigenen Einlauf - nie beide gleichzeitig,
   sonst ueberschreiben sich die Animationen und es flackert. */
.an-stufen > *:not(.zeigt){animation:rise var(--slow) var(--ease) both;}
.an-stufen > *:nth-child(1){animation-delay:0ms;}
.an-stufen > *:nth-child(2){animation-delay:40ms;}
.an-stufen > *:nth-child(3){animation-delay:80ms;}
.an-stufen > *:nth-child(4){animation-delay:120ms;}
.an-stufen > *:nth-child(5){animation-delay:160ms;}
.an-stufen > *:nth-child(6){animation-delay:200ms;}
.an-stufen > *:nth-child(7){animation-delay:240ms;}
.an-stufen > *:nth-child(n+8){animation-delay:280ms;}

/* Goldschleier hinter dem Dashboard-Kopf. Er steht seitlich über — der
   umgebende Rahmen braucht deshalb overflow-x:clip, sonst entsteht eine
   waagrechte Bildlaufleiste. Auf schmalen Geräten aus:
   ein 72-px-Weichzeichner über die volle Fläche kostet dort Leistung. */
.aurora{position:relative;}
.aurora::before{content:'';position:absolute;inset:-60% -20% 40%;
  z-index:0;pointer-events:none;filter:blur(72px);opacity:.3;
  background:radial-gradient(34vw 26vw at 14% 0%,rgba(233,180,76,.34),transparent 62%),
             radial-gradient(28vw 22vw at 84% 6%,rgba(207,156,53,.2),transparent 62%);
  animation:auroraZug 26s ease-in-out infinite;}
.aurora > *{position:relative;z-index:1;}
@keyframes auroraZug{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%    {transform:translate3d(3vw,2vw,0) scale(1.1);}
}
@media (max-width:820px){.aurora::before{display:none;}}
@media (prefers-reduced-motion:reduce){.aurora::before{animation:none;}}

/* ═══════════════════════════════════════════════════════════════════════════
   8  TIEFE UND LICHT
   Drei Mittel, sparsam eingesetzt:
     · ein Lichtschein, der dem Zeiger folgt
     · eine leichte Neigung in die Tiefe
     · ein Randlicht, das zur Zeigerseite heller wird
   Alles läuft über transform und opacity — nichts davon erzwingt ein
   Neuberechnen des Layouts. Bei reduzierter Bewegung bleibt alles aus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Bühne: ohne Perspektive am Elternteil wirkt jede Drehung flach. */
.buehne3d{perspective:1200px;perspective-origin:50% 40%;}

/* --mx/--my kommen aus effekte.js und sind Prozentwerte im Element. */
.leuchtet{position:relative;isolation:isolate;
  --mx:50%; --my:50%; --naehe:0;
  transition:transform var(--slow) var(--ease),box-shadow var(--slow) var(--ease),
             border-color var(--base) var(--ease);}

/* Lichtschein: liegt über der Fläche, aber unter Text und Bild. */
.leuchtet::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:var(--naehe);
  transition:opacity var(--base) var(--ease);
  background:radial-gradient(420px circle at var(--mx) var(--my),
             rgba(233,180,76,.13),rgba(233,180,76,.05) 38%,transparent 62%);}

/* Randlicht: nur der Rahmen leuchtet, nicht die Fläche. Der Trick ist die
   Maske — sie schneidet die Mitte weg und lässt einen 1px-Rand stehen. */
.leuchtet::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;padding:1px;opacity:var(--naehe);
  transition:opacity var(--base) var(--ease);
  background:radial-gradient(320px circle at var(--mx) var(--my),
             rgba(233,180,76,.75),rgba(233,180,76,.15) 45%,transparent 70%);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;}

.leuchtet > *{position:relative;z-index:2;}

/* Anheben: Schatten in zwei Stufen plus ein goldener Hauch darunter. */
.leuchtet.aktiv{
  box-shadow:0 2px 6px rgba(0,0,0,.4),
             0 18px 44px rgba(0,0,0,.5),
             0 10px 40px rgba(233,180,76,.09);}

/* Der Inhalt darf minimal vorschweben — das erzeugt die Tiefe, nicht die
   Drehung allein. */
.schwebt{transform:translateZ(26px);transition:transform var(--slow) var(--ease);}

/* Glanzstreifen für Knöpfe: ein schmaler Lichtstreifen läuft einmal durch. */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{content:'';position:absolute;top:0;bottom:0;width:38%;
  left:-45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);}
.btn-primary:hover::after{animation:glanz 700ms var(--ease);}
@keyframes glanz{to{left:115%;}}

/* Marken- und Fortschrittsglühen, wie im DAD Journal gestaffelt */
.gluehen{filter:drop-shadow(0 0 6px rgba(233,180,76,.5)) drop-shadow(0 0 18px rgba(233,180,76,.28));}
.bar > i{box-shadow:0 0 10px rgba(233,180,76,.45);}
.ring .wert{filter:drop-shadow(0 0 5px rgba(233,180,76,.55));}

/* Einlauf beim Scrollen - nur am Rechner mit Maus (Klasse .bewegt setzt
   effekte.js). Auf dem Handy ist Inhalt sofort da: Beim schnellen Wischen
   entstanden sonst leere Flaechen, die erst verspaetet auftauchten. */
.bewegt .zeigt{opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);}
.bewegt .zeigt.da{opacity:1;transform:none;}

/* Sanfter Wechsel zwischen den Ansichten */
.wechsel{animation:wechselEin 320ms var(--ease);}
@keyframes wechselEin{from{opacity:0;transform:translateY(10px);}}

@media (prefers-reduced-motion:reduce){
  .leuchtet,.leuchtet::before,.leuchtet::after,.schwebt{transition:none;transform:none;}
  .leuchtet::before,.leuchtet::after{opacity:0;}
  .btn-primary::after{display:none;}
  .zeigt{opacity:1;transform:none;}
  .wechsel{animation:none;}
}


/* ═══ Handy: Grundregeln fuer alle Seiten ═══════════════════════════════
   16 px in Eingabefeldern: darunter vergroessert iOS beim Antippen die
   ganze Seite - das wirkt wie ein Sprung. Antippen ohne Verzoegerung,
   kein grauer Blitz beim Tippen. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
a,button,label,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
@media (max-width:900px){
  input,textarea,select,.input,.textarea{font-size:16px !important;}
}