/* ===========================================================================
   Kundenbereich des Lizenzservers — Gestaltung.

   Papier (cremeweiß), Tinte (fast schwarz), ein warmer Akzent, Salbei als
   zweite Farbe. Wer eine Farbe ändern will, ändert die Variable, nicht
   dreißig Regeln. Übernommen aus dem Hausstil von FileScraper, damit beide
   Auftritte als ein Haus lesbar sind.

   Bewusst einfarbige Welt, kein dunkler Zwilling: Der Hausstil ist Creme und
   Tinte. Alle Farben stehen deshalb ausdrücklich hier.
   =========================================================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/figtree.woff2) format("woff2");
}
@font-face {
  font-family: "Origin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/origin-bold.woff) format("woff");
}
@font-face {
  font-family: "Oskosh";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oskosh.woff) format("woff");
}

:root {
  --papier: #FAF7F1;
  --papier-tief: #F2EEE4;
  --karte: #FFFFFF;

  --tinte: #171613;
  --tinte-2: #4A4842;
  --tinte-3: #8B877E;
  --tinte-4: #B4AFA4;

  --akzent: #E0603A;
  --akzent-tief: #B8451F;
  --akzent-hauch: rgba(224, 96, 58, 0.10);
  --apricot: #F2C6A6;

  --salbei: #A3B07C;
  --salbei-tief: #74815A;
  --salbei-hauch: rgba(163, 176, 124, 0.16);

  --linie: #E8E3D8;
  --linie-zart: #F0ECE3;
  --schatten-1: 0 1px 2px rgba(23,22,19,.04), 0 2px 8px rgba(23,22,19,.03);
  --schatten-2: 0 2px 4px rgba(23,22,19,.04), 0 8px 24px rgba(23,22,19,.06);
  --schatten-3: 0 4px 12px rgba(23,22,19,.05), 0 24px 60px rgba(23,22,19,.09);

  --breite: 1180px;
  --rand: clamp(20px, 5vw, 40px);
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --pille: 999px;

  --schrift: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --schrift-titel: "Origin", "Figtree", -apple-system, sans-serif;
  --schrift-marke: "Oskosh", "Figtree", -apple-system, sans-serif;

  --weich: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Der Grund liegt auf html, nicht auf body: Nur so kann darueber eine Ebene
   liegen, die beim Scrollen stehenbleibt. */
html { background: var(--papier); }

body {
  margin: 0;
  background: transparent;
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Das Karopapier. Zwei Verlaeufe, keine Bilddatei. Ganz schwach: Es soll den
   Grund tragen, nicht auffallen, und laeuft nach unten aus. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(23,22,19,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,22,19,.035) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 35%, transparent 78%);
}

/* Papierkorn. Eine ebene Farbflaeche sieht nach Bildschirm aus, ein Korn darueber
   nach Papier.

   **Als Datei, nicht gerechnet.** Vorher baute script.js das Rauschen bei jedem
   Seitenaufruf im Canvas und haengte es als Regel ein. Das kostete auf jeder Seite
   einen sichtbaren Moment ohne Korn, und weil der Kundenbereich bei jedem Klick neu
   laedt, flackerte es bei jeder Navigation. Eine 128er-Kachel wiegt 7 KB, liegt im
   Browserspeicher und ist beim zweiten Aufruf schon da. */
.seitenschimmer {
  background-image: url(../img/korn.png);
  background-size: 192px 192px;
  background-repeat: repeat;
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  transform: translateZ(0); backface-visibility: hidden;
}
@media print { .seitenschimmer { display: none; } }

/* Die weichen Farbwolken: der einzige Ort, an dem Farbe grossflaechig
   vorkommt. Kein Weichzeichner - der Verlauf ist von sich aus weich. */
.schleier { position: absolute; border-radius: 50%; opacity: .5; pointer-events: none; z-index: -1; }
.schleier-warm { background: radial-gradient(circle, rgba(224,96,58,.40), transparent 68%); }
.schleier-sand { background: radial-gradient(circle, rgba(242,198,166,.62), transparent 68%); }
.schleier-salbei { background: radial-gradient(circle, rgba(163,176,124,.42), transparent 68%); }
/*
   **Die Wolken bewegen sich nicht mehr.**

   Sie trieben mit `transform` über 26 bzw. 34 Sekunden. Das ist auf einer ruhigen Seite ein
   schöner Effekt und auf einer scrollenden ein Problem: Zwei Farbverläufe von 420 und 460
   Pixeln, die sich dauernd bewegen, während der Inhalt darüber scrollt, lassen den Browser
   grosse Flächen immer wieder neu zeichnen - auf grossen Bildschirmen sichtbar als Flackern.
   Stehend sehen sie gleich aus und kosten nichts.
*/

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; }
h1, h2 { font-family: var(--schrift-titel); letter-spacing: -.012em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
/*
   **Fettes bleibt fett.** core.css setzt `b`/`strong` auf 600; im Hausstil sind sie 700,
   und der Unterschied ist im Fließtext deutlich sichtbar. Nur innerhalb von `main`, damit
   die Regel nirgendwo sonst hineinredet.
*/
main b, main strong { font-weight: 700; }

/* Der Kachelname ist absichtlich leiser als eine Auszeichnung. */
main .zert-name { font-weight: 600; }

/* `small` ohne eigene Größe wird vom Kern vergrößert (12,04 statt 11,47 px). */
main small { font-size: .84rem; }

.leise { color: var(--tinte-3); }
.mono { font-family: var(--schrift-mono); font-size: .95rem; }
.ziffern { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 2px; border-radius: 4px; }

.bahn { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--weich), border-color .3s var(--weich);
}
/* Fast deckend statt milchig gerechnet: Ein haftender Kopf muesste sonst in
   jedem Scrollbild neu verwischen. */
.kopf.gescrollt { background: rgba(250, 248, 243, .96); border-bottom-color: var(--linie-zart); }
.kopf .bahn { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.wortmarke {
  font-family: var(--schrift-marke); font-size: 1.5rem; line-height: 1;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap;
}
.kopfrechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px 9px 15px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--pille); box-shadow: var(--schatten-1);
  font-size: .94rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hauch);
}
.chip-an::before { background: var(--salbei-tief); box-shadow: 0 0 0 4px var(--salbei-hauch); }
.chip-still::before { background: var(--tinte-4); box-shadow: none; }
.chipreihe { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border: 1px solid transparent; border-radius: var(--pille);
  font-size: 1rem; font-weight: 600; letter-spacing: -.012em; cursor: pointer;
  text-decoration: none;
  transition: transform .22s var(--weich), box-shadow .22s var(--weich),
              background-color .22s var(--weich), color .22s var(--weich);
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.knopf-voll { background: var(--tinte); color: var(--papier); box-shadow: var(--schatten-2); }
.knopf-voll:hover { box-shadow: var(--schatten-3); }
.knopf-akzent { background: var(--akzent); color: #fff; box-shadow: var(--schatten-2); }
.knopf-akzent:hover { background: var(--akzent-tief); box-shadow: var(--schatten-3); }
.knopf-rand { background: rgba(255,255,255,.86); border-color: var(--linie); color: var(--tinte); }
.knopf-rand:hover { background: #fff; box-shadow: var(--schatten-1); }
.knopf-klein { padding: 10px 18px; font-size: .92rem; }
.knopf > svg { width: 17px; height: 17px; flex: none; }
.knopf-klein > svg { width: 15px; height: 15px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.pfeillink {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .97rem; text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.pfeillink svg { width: 15px; height: 15px; transition: transform .24s var(--weich); }
.pfeillink:hover { color: var(--akzent); }
.pfeillink:hover svg { transform: translateX(4px); }

/* ── Karten ────────────────────────────────────────────────────────────── */
.karte {
  position: relative;
  background: linear-gradient(168deg, #fff 0%, #fff 52%, var(--papier) 100%);
  border: 1px solid var(--linie); border-radius: var(--radius-l);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 2px rgba(23,22,19,.045),
              0 10px 28px rgba(23,22,19,.045);
  transition: transform .34s var(--weich), box-shadow .34s var(--weich), border-color .34s var(--weich);
}
.karte-hebt:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 6px 16px rgba(23,22,19,.06),
              0 28px 64px rgba(23,22,19,.10);
  border-color: color-mix(in srgb, var(--apricot) 60%, var(--linie));
}
.marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.9), transparent 60%),
              linear-gradient(160deg, var(--apricot), color-mix(in srgb, var(--apricot) 55%, var(--papier-tief)));
  border: 1px solid color-mix(in srgb, var(--apricot) 70%, var(--linie));
  color: var(--akzent-tief);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(224,96,58,.10);
}
.marke svg { width: 21px; height: 21px; }

/* ── Kundenbereich: Kopf und Reiter ────────────────────────────────────── */
/*
   Zwei Spalten, nicht ein umbrechender Flex: Bei einem langen Titel rutschten die Chips
   unter die Überschrift und die Seite sah oben anders aus als alle anderen. Als Raster
   bleibt die rechte Spalte rechts und der Titel bricht in seiner eigenen um.
*/
.kontokopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px;
  align-items: end;
  padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--linie);
}
.kontokopf > .chipreihe { justify-self: end; }
@media (max-width: 720px) {
  .kontokopf { grid-template-columns: minmax(0, 1fr); }
  .kontokopf > .chipreihe { justify-self: start; }
}
.kontoueberschrift { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 16px; }

.kontoreiter {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: clamp(26px, 3vw, 38px);
  padding: 4px; background: var(--papier-tief); border-radius: var(--pille);
  width: max-content; max-width: 100%;
}
.kontoreiter a,
.kontoreiter button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 0; background: none; border-radius: var(--pille); cursor: pointer;
  font-size: .93rem; font-weight: 600; color: var(--tinte-2);
  transition: color .22s var(--weich), background-color .22s var(--weich);
}
.kontoreiter a:hover,
.kontoreiter button:hover { color: var(--tinte); }
.kontoreiter a:not([aria-current]):hover,
.kontoreiter button:not([aria-current]):hover { background: rgba(23,22,19,.04); }
.kontoreiter a[aria-current],
.kontoreiter button[aria-current] { color: var(--tinte); }
.kontoreiter a > svg,
.kontoreiter button > svg { width: 16px; height: 16px; flex: none; opacity: .6; }
.kontoreiter a:hover > svg, .kontoreiter a[aria-current] > svg,
.kontoreiter button:hover > svg, .kontoreiter button[aria-current] > svg { opacity: 1; }
.kontoreiter b {
  padding: 1px 8px; border-radius: var(--pille);
  background: var(--akzent-hauch); color: var(--akzent-tief);
  font-size: .76rem; font-variant-numeric: tabular-nums;
}
/* Der weiße Grund liegt hinter allen Reitern und wandert zum angeklickten,
   statt bei jedem neu aufzutauchen. */
.kontoreiter:not([data-schieber]) a[aria-current] {
  background: var(--karte); box-shadow: var(--schatten-1);
}

.kontoreiter-schieber {
  position: absolute; top: 4px; bottom: 4px; left: 0;
  border-radius: var(--pille); background: var(--karte); box-shadow: var(--schatten-1);
  transition: transform .34s var(--weich), width .34s var(--weich);
  pointer-events: none;
}

/* ── Suche ─────────────────────────────────────────────────────────────── */
.suchleiste { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 20px; }
.suchfeld { position: relative; flex: 1 1 300px; max-width: 420px; }
/*
   Die Polsterung steht am Typ-Selektor, nicht nur an `input`: Der Kern bringt für
   `input[type=search]` eigene Regeln mit, und die gewinnen sonst - dann liegt die Lupe
   auf dem ersten Buchstaben. Genau so sah es auf dem Server aus.
*/
.suchleiste .suchfeld input,
.suchfeld input[type="search"],
.suchfeld input {
  width: 100%; padding: 14px 42px 14px 46px;
  border-radius: var(--pille); border: 1px solid var(--linie);
  background: var(--karte); font: inherit; font-size: 1rem;
  box-shadow: var(--schatten-1); appearance: none;
}
.suchfeld input::-webkit-search-decoration,
.suchfeld input::-webkit-search-cancel-button { appearance: none; }
.suchfeld-lupe {
  position: absolute; z-index: 1; left: 17px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinte-3); pointer-events: none;
}
.suchfeld-weg {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--papier-tief); color: var(--tinte-2);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.suchfeld-weg:hover { background: var(--linie); }
.chip-schalter {
  cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600;
  transition: background-color .22s var(--weich), border-color .22s var(--weich), transform .22s var(--weich);
}
.chip-schalter b { font-weight: 700; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.chip-schalter:hover { transform: translateY(-1px); }
.chip-schalter.an { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.chip-schalter.an::before { background: var(--akzent); box-shadow: none; }
.chip-schalter.an b { color: rgba(250,247,241,.55); }
.suchstand { margin: 0 0 18px; font-size: .92rem; color: var(--tinte-3); }

/*
   Aus Kernansichten (Anmeldung, Kennwort, Downloads) fallen Tabler-Zeichen mit
   `.icon` herein: Strich 2 und auf der Grundlinie sitzend. Beides passt nicht zu
   einer Schrift mit 1,8er Strichen - und „auf der Grundlinie" heißt neben Text
   sichtbar zu tief.
*/
main .icon { width: 1.15em; height: 1.15em; stroke-width: 1.8; vertical-align: -.22em; }

/* ── Lizenzkarte ───────────────────────────────────────────────────────── */
/*
   Zugeklappt ist die Lizenz eine Zeile, keine Karte: weniger Polster, kleineres
   Zeichen, kleinere Überschrift. Erst beim Aufklappen wird daraus die Karte mit
   allem, was dazugehört. Drei volle Karten untereinander waren nicht zu lesen,
   sondern nur zu überfliegen.
*/
/*
   **Der Kopf einer Lizenz ist auf- und zugeklappt gleich groß.**

   Hier stand vorher das Gegenteil: zugeklappt 13 px Polster, 34-px-Zeichen und eine 1,06-rem-
   Überschrift, aufgeklappt bis 28 px, 44 px und 1,4 rem. Das war als Wechsel von der Zeile zur
   Karte gedacht, und im Entwurf fiel es nicht auf, weil dort von Anfang an eine Karte offen
   stand. Im Betrieb klickt man aber hin und her — und dabei springt die Zeile jedes Mal in eine
   andere Größe. Eine Liste, deren Zeilen beim Öffnen die Größe wechseln, fühlt sich kaputt an.

   Geändert wird jetzt nur, was darunter erscheint. Der Kopf steht still.
*/
.lizenzkarte { margin-bottom: 12px; padding: 16px clamp(18px, 2vw, 24px); }
.lizenzkarte.offen { margin-bottom: 18px; }
.lizenzkarte .marke { width: 38px; height: 38px; border-radius: 11px; }
.lizenzkarte .marke svg { width: 19px; height: 19px; }
.lizenzkarte h3 { font-size: 1.1rem; }
.lizenzkarte .klappknopf { width: 32px; height: 32px; }

/* ── Daten: lesen, und nur ändern, wenn man will ───────────────────────── */
.datenkarte { padding: 4px clamp(18px, 2.2vw, 26px); }
.datenzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--linie-zart);
}
.datenkarte > .datenzeile:first-child { border-top: 0; }
.datenzeile-was { min-width: 0; }
.datenzeile-was b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.datenzeile-was small {
  display: block; margin-top: 2px; color: var(--tinte-3); font-size: .9rem;
  overflow-wrap: anywhere;
}
.datenzeile-was .mono { font-size: .88rem; }
.datenform { padding: 4px 0 22px; animation: aufklappen .24s var(--weich) both; }
.datenform-text { color: var(--tinte-3); font-size: .9rem; margin-bottom: 14px; max-width: 62ch; }
.datenform .feld { margin-bottom: 14px; }
.datenform-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.textknopf {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--tinte-3); font: inherit; font-size: .88rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.textknopf:hover { color: var(--akzent-tief); }
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .datenform { animation: none; } }
.lizenzkopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lizenzkopf-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lizenztitel { min-width: 0; }
.lizenztitel-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lizenzmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 2px; }
.lizenzkopf b { display: block; font-family: var(--schrift-mono); font-size: .95rem; }
.lizenzkopf small { color: var(--tinte-3); font-size: .85rem; }
.lizenzcode { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }

/*
   Der Kopierknopf ändert seine Größe nie. Zeichen und Haken liegen
   übereinander in derselben Rasterzelle, getauscht wird nur die
   Sichtbarkeit - ein Knopf, der beim Drücken die Zeile verschiebt, fühlt
   sich kaputt an.
*/
.kopierknopf {
  display: inline-grid; grid-template-areas: "zeichen"; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--linie); border-radius: 9px;
  background: var(--karte); color: var(--tinte-3);
  line-height: 0; cursor: pointer;
  transition: color .18s var(--weich), border-color .18s var(--weich);
}
.kopierknopf svg { grid-area: zeichen; width: 15px; height: 15px; transition: opacity .14s var(--weich); }
.kopierknopf .haken { opacity: 0; color: var(--salbei-tief); }
.kopierknopf[data-fertig] .stift { opacity: 0; }
.kopierknopf[data-fertig] .haken { opacity: 1; }
.kopierknopf:hover { color: var(--tinte); border-color: var(--tinte-4); }

.stand {
  flex: none; padding: 5px 12px; border-radius: var(--pille);
  font-size: .78rem; font-weight: 600;
  background: var(--papier-tief); color: var(--tinte-2);
}
.stand-gut { background: #EDF6EE; color: #3F7A4C; }
.stand-offen { background: var(--akzent-hauch); color: var(--akzent-tief); }

.klappknopf {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 50%; background: var(--karte); color: var(--tinte-2);
  transition: transform .3s var(--weich), border-color .18s var(--weich);
}
.klappknopf svg { width: 16px; height: 16px; }
.klappknopf:hover { border-color: var(--tinte-4); color: var(--tinte); }
.klappknopf[aria-expanded="true"] { transform: rotate(180deg); }

.lizenzinhalt { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linie); }
/*
   Die Blende läuft nur beim Klicken, nicht beim Laden: Die Karte, die von Anfang an offen
   steht, blendete sich sonst bei jedem Seitenaufruf noch einmal ein, obwohl sie einfach
   dasteht. Das Skript setzt `.eben-geklappt` beim Umschalten.
*/
@media (prefers-reduced-motion: no-preference) {
  .lizenzkarte.eben-geklappt .lizenzinhalt { animation: aufklappen .24s var(--weich) both; }
}
.lizenzspalten { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
/* Ohne Merkmale gibt es links nichts zu zeigen - dann steht alles in einer Spalte. */
.lizenzspalten-eng { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* Merkmale: Haken in Salbei, Fehlendes blass - nicht rot, es fehlt ja nur. */
.merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Mittig zum Wort, nicht auf der Grundlinie: Ein Haken hat keine Unterlänge,
   auf der Grundlinie sitzt er deshalb sichtbar zu tief. */
.merkmale li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--tinte-2); }
.merkmale li > svg { flex: none; width: 17px; height: 17px; }
.merkmal-ja > svg { color: #4CA362; }
.merkmal-nein { color: var(--tinte-4); }
.merkmal-nein > svg { color: #C6C0B4; }

.balken { margin-bottom: 14px; }
.balken:last-child { margin-bottom: 0; }
.balken-zeile { display: flex; align-items: baseline; gap: 12px; font-size: .92rem; margin-bottom: 6px; }
.balken-zeile span:last-child { margin-left: auto; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.balken-spur { height: 8px; border-radius: var(--pille); background: var(--papier-tief); overflow: hidden; }
.balken-fuell { height: 100%; border-radius: var(--pille); background: var(--salbei); }
.balken-fuell.voll { background: var(--akzent); }

.werte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.werte li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--linie-zart); font-size: .93rem;
}
.werte li:last-child { border-bottom: 0; }
.werte li span:first-child { color: var(--tinte-3); }
.werte li span:last-child { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/*
   Die Lizenzurkunde als Vorschau: Man sieht das Blatt, bevor man es ausgibt.
   Das Papier ist dasselbe wie die Seite, die Ziffern stehen in der Mono, und
   das Siegel ist Salbei - nicht Gold. Gold waere eine zweite Marke.
*/
.urkundenblock {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 26px; align-items: center;
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--linie-zart);
}
/*
   Die Urkunde selbst wird **nicht** hier gesetzt. Auszeichnung und Stilblatt des Blattes
   liegen beim Plugin (`customer.urkunde-blatt` / `customer.urkunde-stil`) und gelten für
   die Datei genauso wie für diese Vorschau - sonst verspräche die Vorschau etwas, das im
   PDF nicht ankommt. Hier steht nur der Rahmen, in dem das verkleinerte Blatt sitzt.
*/
.urkundenrahmen {
  border: 1px solid var(--linie);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(23,22,19,.07);
}

.urkunde-text b { display: block; font-size: 1rem; margin-bottom: 4px; }

@media (max-width: 560px) { .urkundenblock { grid-template-columns: minmax(0, 1fr); } }

/*
   **Die Plätze einer Lizenz als Reihe, nicht als Liste.**

   „3 von 5 belegt" ist eine Zahl, die man liest. Fünf Pillen nebeneinander,
   drei davon mit Domain und zwei gestrichelt leer, ist dieselbe Aussage als
   Bild - und sie passt in eine Zeile statt in fünf. Die Einzelheiten
   (IP, Datum, Freigeben) holt man sich mit einem Klick auf den Platz.
*/
.plaetze { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.platzreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.platz {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--pille);
  border: 1px solid var(--linie); background: var(--karte);
  box-shadow: var(--schatten-1); cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinte);
  transition: border-color .2s var(--weich), box-shadow .2s var(--weich), transform .2s var(--weich);
}
.platz:hover { transform: translateY(-1px); border-color: var(--tinte-4); }
.platz::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--salbei-tief); box-shadow: 0 0 0 4px var(--salbei-hauch);
}
.platz[aria-expanded="true"] {
  border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hauch);
}
.platz[aria-expanded="true"]::before { background: var(--akzent); box-shadow: none; }
.platz-frei {
  border-style: dashed; background: none; box-shadow: none;
  color: var(--tinte-4); font-weight: 500; cursor: default;
}
.platz-frei::before { background: none; border: 1px solid var(--tinte-4); box-shadow: none; }
.platz-frei:hover { transform: none; border-color: var(--linie); }
.platz-detail {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-top: 10px; padding: 14px 16px;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: linear-gradient(180deg, #fff, var(--papier));
  animation: aufklappen .24s var(--weich) both;
}
.platz-detail b { display: block; font-size: .95rem; }
.platz-detail small { display: block; color: var(--tinte-3); font-size: .84rem; }
.platz-detail .knopfreihe { margin-left: auto; }

/*
   Der Verlauf gehört zur Lizenz, nicht auf eine eigene Seite: Was zählt, ist
   was mit *dieser* Lizenz geschehen ist. Eine Haarlinie mit Punkten, eine
   Zeile je Ereignis.
*/
.lizenzverlauf { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.ereignisse {
  list-style: none; margin: 0; padding: 0 0 0 18px;
  border-left: 1px solid var(--linie); display: grid; gap: 11px;
}
.ereignisse li {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-size: .91rem; color: var(--tinte-2);
}
.ereignisse li::before {
  content: ""; position: absolute; left: -22px; top: .45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tinte-4); box-shadow: 0 0 0 3px var(--papier);
}
.ereignisse li[data-art="download"]::before { background: var(--akzent); }
.ereignisse li[data-art="aktivierung"]::before { background: var(--salbei-tief); }
.ereignis-zeit {
  flex: none; min-width: 104px;
  font-family: var(--schrift-mono); font-size: .78rem; color: var(--tinte-3);
}
.ereignisse b { color: var(--tinte); font-weight: 600; }

.aktivierungen { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.aktivierungen-kopf {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font-size: .86rem; font-weight: 600; letter-spacing: .02em;
}
.aktivierungen-kopf small { font-weight: 400; color: var(--tinte-3); }
.geraeteliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.geraeteliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: linear-gradient(180deg, #fff, var(--papier));
}
.geraeteliste b { display: block; font-size: .95rem; }
.geraeteliste small { color: var(--tinte-3); font-size: .84rem; display: block; }
.geraeteliste .kennung { font-family: var(--schrift-mono); font-size: .78rem; color: var(--tinte-4); }

.verlaengern {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--papier-tief); border: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
.verlaengern.eilig { background: #FDF8EE; border-color: #EBD9B6; }
.verlaengern-was { font-size: .94rem; }
.verlaengern-was b { display: block; font-size: 1rem; }

/* ── Hinweise ──────────────────────────────────────────────────────────── */
.hinweis {
  padding: 15px 18px; border-radius: var(--radius-s);
  border: 1px solid var(--linie); background: var(--karte);
  font-size: .95rem; margin-bottom: 24px;
  display: flex; gap: 12px; align-items: flex-start;
}
.hinweis svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.hinweis-warnung { border-color: #EBD9B6; background: #FDF8EE; }
.hinweis-warnung svg { color: #A9791B; }
.hinweis-gut { border-color: #BFE0C6; background: #F3FAF4; }

/* ── Dateien ───────────────────────────────────────────────────────────── */
.dateiliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dateiliste li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px;
  padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, var(--papier));
}
.dateiliste .plattform {
  font-family: var(--schrift-mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinte-3); text-align: center;
}
.dateiliste b { font-size: .97rem; }
.dateiliste small { display: block; color: var(--tinte-3); font-size: .82rem; }
.dateiliste .pruefsumme { font-family: var(--schrift-mono); font-size: .76rem; color: var(--tinte-4); }

/* ── Verlauf ───────────────────────────────────────────────────────────── */
.verlaufliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verlaufliste li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 18px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte);
}
.verlaufliste .nr { font-family: var(--schrift-mono); font-size: .88rem; color: var(--tinte-3); flex: none; min-width: 110px; }
.verlaufliste .stand { margin-left: auto; }

/* ── Formular ──────────────────────────────────────────────────────────── */
.feld { display: block; margin-bottom: 18px; }
.feld > span { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 600; }
.feld .hilfe { display: block; margin-top: 6px; font-size: .84rem; color: var(--tinte-3); font-weight: 400; }
.feld input {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .97rem;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: var(--karte); color: var(--tinte);
}
.feld input:focus { outline: 2px solid var(--akzent-tief); outline-offset: 1px; }
.feld input:disabled { color: var(--tinte-2); background: var(--papier); }
.feldpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

/* Das Zahlenband: die Fugen sind der Grund, der zwischen den Feldern durchsieht. */
.zahlenband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
  border-radius: var(--radius-l); overflow: hidden;
}
.zahl { background: var(--papier); padding: 24px 22px; }
.zahl b {
  display: block; font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.zahl b small { font-size: .5em; font-weight: 700; letter-spacing: -.02em; color: var(--tinte-3); }
.zahl span { display: block; margin-top: 8px; font-size: .92rem; color: var(--tinte-3); }

.abschnitt { position: relative; padding-block: clamp(30px, 3.4vw, 46px); }
.raster-2 { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.stapel { display: grid; gap: 16px; }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
.anmelden { display: grid; place-items: center; padding-block: clamp(40px, 8vw, 90px); }
.anmelden .karte { width: min(430px, 100%); }

@media (max-width: 860px) {
  .lizenzspalten { grid-template-columns: minmax(0, 1fr); }
  .feldpaar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kontoreiter { width: 100%; }
  .kontoreiter a,
.kontoreiter a, .kontoreiter button { flex: 1; justify-content: center; padding-inline: 10px; font-size: .86rem; }
  .dateiliste li { grid-template-columns: minmax(0, 1fr); }
  .dateiliste .plattform { text-align: left; }
  .geraeteliste li { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .knopf:hover, .karte-hebt:hover { transform: none; }
}
/* ── Anmeldung, Formulare des Kerns, Sprachwahl ──────────────────────────── */

/*
   **Die Formulare gehören nicht dem Theme.**

   Anmeldung, Passwort und Kontaktdaten baut der License Manager mit dem Formularbauer des
   Kerns, und der setzt Tabler-Klassen: `mb-3` als Abstand, `form-label`, `form-control`,
   `btn btn-primary`, und den Haken als `label.form-check > input + span`. Eigene Klassen
   kommen dort nie an, also werden genau diese eingekleidet — innerhalb einer Karte, damit
   nichts davon in den Admin-Bereich blüht.
*/
.karte .form-label {
  display: block; margin-bottom: 7px;
  font-size: .88rem; font-weight: 600; color: var(--tinte);
}
.karte .form-label.required::after { content: " *"; color: var(--akzent); }
.karte .form-hint, .karte .form-text { font-size: .84rem; color: var(--tinte-3); margin-top: 6px; }
.karte .mb-3 { margin-bottom: 18px !important; }

.karte .form-control,
.karte .form-select {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .97rem;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  background: var(--karte); color: var(--tinte); box-shadow: none;
}
.karte .form-control:focus,
.karte .form-select:focus {
  outline: 2px solid var(--akzent-tief); outline-offset: 1px;
  border-color: var(--linie); box-shadow: none;
}
.karte .form-control::placeholder { color: var(--tinte-4); }

/*
   Die Zeile „Angemeldet bleiben" / „Passwort vergessen?".

   Der Kern setzt sie als `d-flex justify-content-between` ohne Abstand, und Tabler schiebt
   den Haken mit `padding-left` unter seinen eigenen Text. Ohne diese drei Regeln stoßen
   Haken und Verweis aneinander und brechen um — genau das sah falsch aus.
*/
.karte form .d-flex.justify-content-between {
  gap: 12px 18px; flex-wrap: wrap; align-items: center;
  /* Die Haarlinie trennt die Zugangsdaten von den Nebensachen. Ohne sie klebte die Reihe
     am Kennwortfeld und sah aus, als hätte sie jemand vergessen. */
  margin: 20px 0 28px; padding-top: 18px; border-top: 1px solid var(--linie-zart);
}
.karte .form-check {
  display: inline-flex !important; align-items: center; gap: 9px;
  margin: 0; padding: 0 !important; min-height: 0;
  flex-wrap: nowrap; white-space: nowrap;
}
.karte .form-check { cursor: pointer; }
.karte .form-check-input {
  float: none !important; margin: 0 !important; flex: none;
  width: 17px; height: 17px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--tinte-4); background-color: var(--karte);
  /* Tabler setzt den Haken auf 20px - auf einem 17er Kästchen stand er über den Rand. */
  background-size: 13px auto;
}
.karte .form-check-input:checked { background-color: var(--akzent); border-color: var(--akzent); }
.karte .form-check-label,
.karte .form-check span { font-size: .9rem; font-weight: 400; color: var(--tinte-2); }

/*
   Der Verweis ist leise, aber er ist einer: ohne Kante darunter las er sich wie Fließtext
   neben einem Haken. Die Kante liegt ruhig da und färbt sich erst unter der Maus.
*/
.karte form .d-flex.justify-content-between a {
  font-size: .88rem; font-weight: 500; color: var(--tinte-3); text-decoration: none;
  border-bottom: 1px solid var(--linie); padding-bottom: 2px; line-height: 1.2;
}
.karte form .d-flex.justify-content-between a:hover {
  color: var(--akzent-tief); border-bottom-color: var(--akzent); text-decoration: none;
}

/* Der Knopf des Kerns bekommt die Form unserer Pille. */
.karte .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--pille); border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; letter-spacing: -.012em;
  transition: transform .22s var(--weich), box-shadow .22s var(--weich), background-color .22s var(--weich);
}
.karte .btn:hover { transform: translateY(-2px); }
.karte .btn:active { transform: translateY(0); }
.karte .btn-primary {
  background: var(--tinte); border-color: var(--tinte); color: var(--papier);
  box-shadow: var(--schatten-2);
}
.karte .btn-primary:hover { box-shadow: var(--schatten-3); }
.karte .btn-secondary, .karte .btn-default, .karte .btn-outline-primary {
  background: rgba(255, 255, 255, .86); border-color: var(--linie); color: var(--tinte);
}

.karte a:not(.knopf):not(.pfeillink) { color: var(--akzent-tief); text-decoration: none; }
.karte a:not(.knopf):not(.pfeillink):hover { text-decoration: underline; text-underline-offset: 3px; }


.anmelden { display: grid; place-items: center; min-height: 70vh; }
.anmeldekarte { width: min(430px, 100%); margin: 0 auto; }
.anmeldekarte .karte { padding: clamp(26px, 3vw, 34px); }
/* Ein Anmeldeknopf ist der einzige Weg auf dieser Seite: volle Breite, Akzentfarbe -
   so stand er auch im Entwurf. */
.anmeldekarte .karte .btn { width: 100%; min-height: 52px; }
.anmeldekarte .karte .btn-primary { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.anmeldekarte .karte .btn-primary:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

.sprachwahl { display: inline-flex; gap: 2px; padding: 3px; background: var(--papier-tief); border-radius: var(--pille); }
.sprachwahl a {
  padding: 6px 12px; border-radius: var(--pille); text-decoration: none;
  font-size: .8rem; font-weight: 600; color: var(--tinte-3);
}
.sprachwahl a.an { background: var(--karte); color: var(--tinte); box-shadow: var(--schatten-1); }


/* ── Merkmale als Kachelfeld, wie im Kirby-Konto ─────────────────────────── */
/*
   Übernommen aus assets/css/app.css des FileScraper-Auftritts (.zert-feld-konto),
   Klassennamen inklusive: Beide Systeme zeigen dem Kunden dieselbe Sache, und sie
   sollen auch gleich aussehen.

   **Drei Zeilen, immer dieselben:** Kopf, Mitte, Fuß. Der Fuß wird nach unten
   gedrückt und trägt den Balken; Kacheln ohne Verbrauch haben ihn leer. Ohne das
   stünde der Balken dort, wo der Text zufällig endet, und in einer Reihe lägen
   fünf Balken auf fünf Höhen.

   Eine Liste liest sich wie eine Aufzählung von Bedingungen; ein Kachelfeld zeigt,
   was man bekommen hat.
*/
.zert-feld-konto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.zert-feld-konto .zert-karte {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 16px 16px 18px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s);
  background: var(--papier);
}
.zert-feld-konto .zert-kopf { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
/*
   **Das Zeichen sitzt mittig zur ersten Textzeile, nicht oben am Namensblock.**

   Der Name reserviert zwei Zeilen (siehe unten), damit die Zahlen einer Reihe auf gleicher
   Höhe stehen. Ein Zeichen, das an diesem Block oben ausgerichtet ist, steht bei einzeiligen
   Namen sichtbar zu hoch — und einzeilig sind die meisten. Deshalb ist der Kasten des
   Zeichens genau eine Zeile hoch und das Zeichen darin zentriert: Bei einer Zeile steht es
   mittig daneben, bei zwei Zeilen neben der ersten, wo der Name anfängt.
*/
.zert-feld-konto .zert-symbol {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: calc(.86rem * 1.3); margin-top: 0;
  color: var(--akzent);
}
.zert-feld-konto .zert-symbol > svg { width: 18px; height: 18px; }
.zert-feld-konto .zert-symbol svg { width: 100%; height: 100%; }
/*
   Der Name bekommt Platz für zwei Zeilen, ob er ihn braucht oder nicht: Sonst
   rutscht die Zahl je nach Namenslänge nach unten, und in einer Reihe stünden die
   Zahlen auf zwei Höhen.
*/
.zert-feld-konto .zert-name {
  display: block; min-height: 2.6em; overflow-wrap: anywhere;
  font-size: .86rem; font-weight: 600; line-height: 1.3;
}
.zert-feld-konto .zert-mitte { display: block; }
.zert-feld-konto .zert-wert {
  display: block; font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.zert-feld-konto .zert-wert-text { font-size: 1rem; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.zert-feld-konto .zert-fuss { display: block; min-height: 12px; margin-top: 14px; }

/* Nicht Gebuchtes bleibt sichtbar, tritt aber zurück - der Kunde soll sehen, was
   es sonst noch gibt, ohne dass es wie ein Mangel wirkt. */
.zert-feld-konto .zert-karte.aus { background: transparent; border-style: dashed; }
.zert-feld-konto .zert-karte.aus .zert-symbol,
.zert-feld-konto .zert-karte.aus .zert-wert { color: var(--tinte-4); }
.zert-feld-konto .zert-karte.aus .zert-name { color: var(--tinte-3); font-weight: 500; }

/* Der Verbrauch als schmale Linie, nicht als zweite Zahl. */
.zert-balken { display: block; height: 3px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.zert-balken i { display: block; height: 100%; background: var(--salbei); border-radius: 2px; }
.zert-balken.knapp i { background: var(--akzent); }
.zert-verbraucht { display: block; margin-top: 6px; font-size: .76rem; color: var(--tinte-3); font-variant-numeric: tabular-nums; }

/* ── Die Tabellenseiten des Kerns ────────────────────────────────────────── */
/*
   „Lizenzen" und „Aktivierungen" liefert der License Manager als DataTable — dieselbe
   Tabelle wie im Admin-Bereich, mitsamt Tabler-Karten, grünen Fähnchen und orangefarbenen
   Knöpfen. Im Entwurf gab es diese Seiten nicht, im Betrieb sind sie bei zwanzig Lizenzen
   aber genau richtig. Also bleiben sie und bekommen das Haus angezogen.
*/
.ps-main .card,
main .card {
  background: linear-gradient(168deg, #fff 0%, #fff 52%, var(--papier) 100%);
  border: 1px solid var(--linie); border-radius: var(--radius-l);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 1px 2px rgba(23,22,19,.045),
              0 10px 28px rgba(23,22,19,.045);
}
main .card-header { border-bottom: 1px solid var(--linie-zart); background: none; }

main .table { font-size: .93rem; color: var(--tinte); border-color: var(--linie-zart); }
main .table thead th {
  background: none; border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3);
  padding-block: 14px;
}
main .table tbody td { border-color: var(--linie-zart); padding-block: 14px; vertical-align: middle; }
main .table tbody tr:hover > * { background: var(--papier); }
main .table a { color: var(--tinte); }

/* Fähnchen: dieselbe leise Sprache wie unsere `stand`-Pillen, nicht Ampelfarben. */
main .badge {
  padding: 5px 12px; border-radius: var(--pille);
  font-size: .78rem; font-weight: 600; letter-spacing: 0;
  background: var(--papier-tief); color: var(--tinte-2);
}
main .badge.bg-success, main .badge.bg-green, main .badge[class*="success"] { background: #EDF6EE; color: #3F7A4C; }
main .badge.bg-danger, main .badge.bg-red, main .badge[class*="danger"] { background: #FCF4F4; color: #A4443C; }
main .badge.bg-warning, main .badge.bg-orange, main .badge[class*="warning"] { background: var(--akzent-hauch); color: var(--akzent-tief); }
/* Die Chips der Detailseite (Tabler „-lt“, dort mit !important) wie die Stand-Pillen der Lizenzkarte:
   „Jahres-Abo“ und „Abo gekündigt“ (bg-secondary-lt) standen sonst als bloßer Text da, die Karte zeigt
   sie als Pille (Gegenprüfung 2026-10-12). */
main .badge.bg-secondary-lt { background-color: var(--papier-tief) !important; color: var(--tinte-2) !important; }
main .badge.bg-green-lt { background-color: #EDF6EE !important; color: #3F7A4C !important; }
main .badge.bg-orange-lt, main .badge.bg-yellow-lt { background-color: var(--akzent-hauch) !important; color: var(--akzent-tief) !important; }
main .badge.bg-red-lt { background-color: #FCF4F4 !important; color: #A4443C !important; }

/* Der Knopf „Slot freigeben" war orange und laut - er gibt etwas frei, er warnt nicht. */
main .btn-warning, main .btn-danger {
  background: rgba(255,255,255,.86); border-color: var(--linie); color: var(--akzent-tief);
  box-shadow: none;
}
main .btn-warning:hover, main .btn-danger:hover { background: #fff; border-color: var(--tinte-4); box-shadow: var(--schatten-1); }
main .btn-sm { padding: 8px 16px; font-size: .88rem; }

/* „Abbrechen“ der Addons (Tabler btn-outline-secondary) stand hellgrau auf Papier und war kaum zu
   lesen – etwa auf der Bestätigungsseite „Abo kündigen“ (Abnahme 2026-10-12). Wie knopf-rand. */
main .btn-outline-secondary {
  background: rgba(255,255,255,.86); border-color: var(--linie); color: var(--tinte); box-shadow: none;
}
main .btn-outline-secondary:hover, main .btn-outline-secondary:focus {
  background: #fff; border-color: var(--tinte-4); color: var(--tinte); box-shadow: var(--schatten-1);
}

main .dataTables_filter input, main .table-search input, main input[type="search"] {
  border-radius: var(--pille); border: 1px solid var(--linie); padding: 10px 16px;
  background: var(--karte);
}
main .dataTables_info, main .dataTables_length, main .dataTables_paginate { color: var(--tinte-3); font-size: .88rem; }
main .page-link { border-radius: var(--pille); border-color: var(--linie); color: var(--tinte-2); }
main .page-item.active .page-link { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* ── Der Streifen beim Seitenwechsel ─────────────────────────────────────── */
/*
   Übernommen aus dem Kirby-Auftritt. Beim Wechsel ohne Neuladen fehlt die
   Anzeige des Browsers, dass etwas unterwegs ist. Bei einer schnellen Antwort
   sieht man ihn kaum, bei einer langsamen weiß man, dass der Klick angekommen
   ist. Er läuft zügig auf neunzig Prozent und wartet dort: Den Rest kann
   niemand vorhersagen, und ein Balken, der bei achtzig stehenbleibt und dann
   springt, ist ehrlicher als einer, der eine Dauer verspricht.
*/
.seitenbalken {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 0;
  background: var(--akzent);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
}
.seitenbalken.laeuft {
  width: 90%;
  opacity: 1;
  transition: width 2.4s cubic-bezier(.1, .8, .2, 1), opacity 120ms ease;
}
.seitenbalken.fertig {
  width: 100%;
  opacity: 0;
  transition: width 140ms ease, opacity 260ms ease 120ms;
}

/* Der ausgetauschte Inhalt blendet auf - ohne Versatz, sonst wirkt der Wechsel
   wie ein Sprung. */
@media (prefers-reduced-motion: no-preference) {
  main.wechselt { opacity: .55; transition: opacity .12s ease; }
}

/* ── Kartenvertrag (seit 1.2.0) ──────────────────────────────────────────── */
/*
   Was license-manager-entitlements ab 1.20.0 je Lizenz liefert und Produkt-Addons wie der
   Energiemanager ergänzen: Lizenznummer, verdeckter Code, Abschnitte (Liste, Kasten, Gerät),
   Aktionen und das Lizenzblatt. Alles mit den Bausteinen von oben: karte, knopf, platz,
   verlaengern. Neue Farben gibt es hier keine.
*/

/* `hidden` heißt verborgen – auch dort, wo eine Regel `display` setzt (.platz-detail ist flex).
   Bisher sorgte allein das Stilblatt des Kerns dafür; darauf verlässt sich das Theme nicht mehr. */
[hidden] { display: none !important; }

/* Sprungziele: Der haftende Kopf verdeckt sonst den Anfang der Karte. */
.lizenzkarte, .vertragsabschnitt, .sprungmarke, #lizenzblatt { scroll-margin-top: 92px; }
.sprungmarke { display: block; height: 0; }

/* Lizenznummer und verdeckter Code im Kopf: dieselbe Zeile, dieselbe Höhe wie der Code. */
.lizenznummer, .lizenzcode-maske { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.lizenzkopf .lizenznummer small,
.lizenzkopf .lizenzcode-maske small { font-size: .78rem; font-weight: 500; color: var(--tinte-3); letter-spacing: .01em; }
.lizenzkopf .lizenznummer b { letter-spacing: .03em; }
.lizenzkopf .lizenzcode-maske b { color: var(--tinte-2); }

/* Hinweise über den Karten (z. B. „Ihr Abo“): ein .hinweis mit Bezug, Text und Knöpfen. */
.hinweis-oben { margin-bottom: 14px; }
.hinweis-oben + .hinweis:not(.hinweis-oben) { margin-top: 10px; }
.hinweis-oben svg { color: var(--tinte-3); }
.hinweis-oben.hinweis-warnung svg { color: #A9791B; }
.hinweis-inhalt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.hinweis-bezug { color: var(--tinte-3); font-size: .82rem; }
.hinweis-bezug .mono { font-size: .8rem; letter-spacing: .03em; }
.hinweis-knoepfe { margin-top: 8px; gap: 10px 18px; }

/* Abschnitte der Produkt-Addons: wie die Blöcke „Plätze“ und „Verlauf“ durch eine Linie getrennt. */
.vertragsabschnitt { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linie); }
.aktivierungen-kopf.eilig { color: var(--akzent-tief); }

/* Der Kasten ist der Verlängern-Kasten: Papiergrund, eilig in Sand. */
.vertragsabschnitt.kasten {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--papier-tief); border: 1px solid var(--linie);
}
.vertragsabschnitt.kasten.eilig { background: #FDF8EE; border-color: #EBD9B6; }
.kasten-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 4px; }
.kasten-kopf b { font-size: 1rem; }
.kasten-kopf .leise { font-size: .9rem; }
.kasten-text { font-size: .94rem; margin: 0 0 6px; }
.kasten .werte li { border-bottom-color: rgba(23, 22, 19, .07); }

.werte .mono { font-family: var(--schrift-mono); font-size: .86rem; }
.werte li span.wert-gut { color: #3F7A4C; }
.werte li span.wert-offen { color: var(--akzent-tief); }
.werte li span.wert-leise { color: var(--tinte-3); font-weight: 500; }

.abschnitt-hinweis { margin: 10px 0 0; font-size: .86rem; color: var(--tinte-3); }
/* Pflichttexte (etwa die Abo-Regel) stehen ungekürzt und in Textfarbe da – sie sind keine Fußnote. */
.abschnitt-pflicht { margin: 10px 0 0; font-size: .88rem; color: var(--tinte-2); max-width: 72ch; }
.abschnitt-fussnote { margin: 8px 0 0; font-size: .8rem; color: var(--tinte-3); max-width: 72ch; }

/* Aktionen: Knopf oder Formular. Das Pflicht-Häkchen steht über dem Knopf, der Hinweis darunter. */
.aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; margin-top: 14px; }
.aktion { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.aktion-formular { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.aktion-haken {
  display: flex; align-items: flex-start; gap: 9px; max-width: 60ch;
  font-size: .9rem; color: var(--tinte-2); cursor: pointer;
}
.aktion-haken input {
  flex: none; width: 17px; height: 17px; margin: 3px 0 0;
  accent-color: var(--akzent); cursor: pointer;
}
main .aktion-hinweis { display: block; max-width: 60ch; font-size: .82rem; color: var(--tinte-3); }

/* Geräte: Pillen wie die Plätze, der Punkt zeigt den Stand. */
.platz-geraet { letter-spacing: 0; }
.platz-geraet[data-stand="offen"]::before { background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hauch); }
.platz-geraet[data-stand="leise"]::before { background: var(--tinte-4); box-shadow: none; }
/* Das offene Gerät steht von Anfang an da und blendet beim Laden nicht ein (nur beim Klicken). */
.geraet-detail { display: block; animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .geraet-detail.eben-geoeffnet { animation: aufklappen .24s var(--weich) both; }
}
.geraet-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.platz-detail .geraet-kopf b { display: inline; font-size: .95rem; letter-spacing: .02em; }
.geraet-detail .werte { margin-top: 2px; }
.geraet-tabelle-rahmen {
  margin-top: 12px; overflow-x: auto;
  border: 1px solid var(--linie-zart); border-radius: var(--radius-s); background: var(--karte);
}
.geraet-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.geraet-tabelle th {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3);
}
.geraet-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--linie-zart); vertical-align: top; }
.geraet-tabelle tr:last-child td { border-bottom: 0; }
.geraet-tabelle .mono { font-size: .84rem; }
/*
   Schmal (Telefon): drei Spalten passen nicht – die dritte („Updates“) lag bis zur Abnahme
   2026-10-12 rechts außerhalb und war nur durch Wischen im Rahmen zu sehen. Unter 560 px steht
   jede Komponente als kleiner Block: Name, darunter Version und Modus mit ihrer Spaltenüberschrift.
*/
@media (max-width: 560px) {
  .geraet-tabelle thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .geraet-tabelle, .geraet-tabelle tbody, .geraet-tabelle tr, .geraet-tabelle td { display: block; width: 100%; }
  .geraet-tabelle tr { padding: 10px 12px; border-bottom: 1px solid var(--linie-zart); }
  .geraet-tabelle tr:last-child { border-bottom: 0; }
  .geraet-tabelle td, .geraet-tabelle tr:last-child td { padding: 0; border: 0; }
  .geraet-tabelle td:first-child { font-weight: 600; }
  .geraet-tabelle td + td { margin-top: 3px; }
  .geraet-tabelle td[data-spalte]:not([data-spalte=""])::before {
    content: attr(data-spalte) " "; display: inline-block; min-width: 5.5em;
    font-family: var(--schrift-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3);
  }
}

/*
   Das Lizenzblatt. Die Vorschau bringt das Plugin mit (`.lizenzblatt-rahmen`, ein iframe im
   Maßstab --lizenzblatt-mass); das Theme setzt nur Maßstab und Rahmen. Der Rahmen hat seine
   Größe von Anfang an – nichts springt, wenn das Blatt nachlädt. Bis dahin steht Papier da.
*/
.urkundenblock-ohne { grid-template-columns: minmax(0, 1fr); }
.blattvorschau { line-height: 0; }
.urkundenblock .lizenzblatt-rahmen {
  --lizenzblatt-mass: .4;
  border-radius: 6px;
  background: linear-gradient(180deg, #fff, var(--papier));
  box-shadow: 0 0 0 1px var(--linie), 0 6px 18px rgba(23, 22, 19, .07);
}
/* Meldung statt Blatt (script.js): Der Rahmen bleibt gleich groß – nichts springt –, zeigt aber nur
   ein ruhiges Zeichen; der Text steht lesbar daneben (.blatt-meldung). */
.urkundenblock .lizenzblatt-rahmen { position: relative; }
.urkundenblock.blatt-gestoert .lizenzblatt-rahmen iframe { visibility: hidden; }
.urkundenblock.blatt-gestoert .lizenzblatt-rahmen::after {
  content: "!"; position: absolute; inset: 0; margin: auto; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--akzent); color: var(--akzent-tief);
  font: 700 1.1rem/1 var(--schrift, inherit);
}
.blatt-meldung {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--akzent-hauch); color: var(--akzent-tief); font-size: .9rem; line-height: 1.45;
}
.blatt-meldung[hidden] { display: none; }
.blattformular .knopf[disabled][aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.blattformular { margin: 0; }
.blattformular .knopf[disabled] { opacity: .6; cursor: progress; transform: none; }
.blatt-hinweis { margin: 10px 0 0; font-size: .84rem; color: var(--tinte-3); }
@media (max-width: 560px) { .urkundenblock .lizenzblatt-rahmen { --lizenzblatt-mass: .35; } }
@media (max-width: 359px) { .urkundenblock .lizenzblatt-rahmen { --lizenzblatt-mass: .3; } }

/* Die Detailseite von entitlements druckt dieselben Teile (Theme-Fassung der Teilansichten). */
.sd-detail .hinweis-oben { margin-bottom: 16px; }
.sd-detailblock { margin-bottom: 16px; }
.sd-detailblock > .zert-feld-konto:first-child,
.sd-detailblock > .vertragsabschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sd-detailblock > .vertragsabschnitt.kasten:first-child { padding-top: 16px; border-top: 1px solid var(--linie); }
.sd-detailblock > .urkundenblock { margin: 0; padding-top: 0; border-top: 0; }