/* ===========================================================================
   verdino-ui.css · Fassung 1.0 · 05.09.2026
   Der Oberflächen-Bausatz von VERDINO. Farben, Formen und Bausteine für
   Werkzeuge, Prototypen und kleine interaktive Seiten.

   Quelle der Farbwerte: Account-Skill verdino-farben, Farbsystem 1.5.
   Werte werden hier nie erfunden und nie aus einem Bild gegriffen.
   Schriften: VERDINO-Fonts.css, separat, mit eingebetteten WOFF2.

   Alle Klassen tragen das Präfix v-, damit nichts mit dem Code eines
   Werkzeugs kollidiert.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Grundwerte
--------------------------------------------------------------------------- */
:root{
  /* Marke */
  --v-schwarz:#283941;      /* Hausschwarz, Flächen */
  --v-text:#1E2A30;         /* Textfarbe, auch auf bunten Flächen */
  --v-akzent:#FFFF00;       /* nur als Markierung, nie als Fläche */

  /* Neutralreihe */
  --v-n-pale:#F9F9F9; --v-n-light:#F2F2F2; --v-n:#E6E6E6; --v-n-strong:#8C9599;

  /* Flächen und Schrift */
  --v-grund:#F2F2F2;        /* der Seitengrund */
  --v-flaeche:#FFFFFF;      /* Karten und Zeilen */
  --v-flaeche2:#F9F9F9;     /* die leisere Karte */
  --v-linie:#E6E6E6;
  --v-ink:var(--v-text);
  --v-leise:#69777E;        /* Achtung, auf #F2F2F2 nur 4,13 zu 1 */
  --v-auf:#FFFFFF;          /* Schrift auf dunkler Fläche */
  --v-onfill:var(--v-text); /* Schrift auf bunter Fläche */

  /* Form */
  --v-r-gross:22px;         /* große Karten und Bänder */
  --v-r-feld:14px;          /* Container, Eingaben */
  --v-r-zeile:8px;          /* Zeilen und Listenkarten */
  --v-r-marke:10px;         /* kleine Marken */
  --v-r-pille:999px;        /* alles Klickbare */
  --v-lasche:14px;          /* Breite der Bereichskante */

  /* Abstände */
  --v-s1:4px; --v-s2:8px; --v-s3:12px; --v-s4:16px; --v-s5:22px; --v-s6:32px;

  /* Schrift */
  --v-sans:"Atten Round New",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Dunkle Ansicht. Sie folgt dem Betriebssystem, außer ein Merkmal
   data-v-theme am Wurzelelement sagt etwas anderes. */
@media (prefers-color-scheme:dark){
  :root:not([data-v-theme="light"]){
    --v-grund:#161D21; --v-flaeche:#1E282D; --v-flaeche2:#232E34; --v-linie:#2C3A41;
    --v-ink:#EFF2F3; --v-leise:#9BAAB2; --v-auf:#1E2A30;
    --v-n-pale:#233037; --v-n-light:#2A3941; --v-n:#33424A; --v-n-strong:#6C7C85;
  }
}
:root[data-v-theme="dark"]{
  --v-grund:#161D21; --v-flaeche:#1E282D; --v-flaeche2:#232E34; --v-linie:#2C3A41;
  --v-ink:#EFF2F3; --v-leise:#9BAAB2; --v-auf:#1E2A30;
  --v-n-pale:#233037; --v-n-light:#2A3941; --v-n:#33424A; --v-n-strong:#6C7C85;
}

/* ---------------------------------------------------------------------------
   2 · Die Bereiche
   Sieben Buntfarben in je fünf Stufen, dazu die Neutralreihe und EO.
   Bunt trägt die Kategorie, nie den Zustand. Zustand und Rang laufen über
   Stufe und Fläche.
   Zuordnung, Voreinstellung und keine Sperre: VERDINO intern green,
   Sales cyan, Clients blue, Special violet, Networking peach, Board yellow,
   Admin rose, ohne Zuordnung neutral. EO steht außerhalb der sieben.
--------------------------------------------------------------------------- */
.v-green  {--c:#B5FFB2;--c-dark:#2B5B2B;--c-strong:#55A454;--c-light:#DAFFD9;--c-pale:#EFFFEF}
.v-cyan   {--c:#ACEFEE;--c-dark:#2C5757;--c-strong:#579F9F;--c-light:#D7F6F6;--c-pale:#EEFBFB}
.v-blue   {--c:#95D4FA;--c-dark:#2C556C;--c-strong:#559BC2;--c-light:#CEE9FC;--c-pale:#EAF5FE}
.v-violet {--c:#D5BFFF;--c-dark:#64399D;--c-strong:#A583DC;--c-light:#E9DFFF;--c-pale:#F5F1FF}
.v-peach  {--c:#FABB90;--c-dark:#704729;--c-strong:#C98351;--c-light:#FCDDCC;--c-pale:#FEF0EA}
.v-yellow {--c:#FFE36C;--c-dark:#5A5029;--c-strong:#A39351;--c-light:#FFF0C1;--c-pale:#FFF8E6}
.v-rose   {--c:#FFC5DF;--c-dark:#84335E;--c-strong:#E06BA8;--c-light:#FFE2EE;--c-pale:#FFF2F8}
.v-grau   {--c:#E6E6E6;--c-dark:#283941;--c-strong:#8C9599;--c-light:#F2F2F2;--c-pale:#F9F9F9}
.v-eo     {--c:#CC0000;--c-dark:#CC0000;--c-strong:#CC0000;--c-light:#FFE2E2;--c-pale:#FFF0F0}

/* Sechs Rollen, die mit der Ansicht kippen. Nur diese werden benutzt,
   nie die Stufen direkt. Hell nimmt dark und schreibt Weiß darauf,
   dunkel nimmt std und schreibt Hausschwarz darauf. So bleibt der
   Kontrast in beiden Ansichten über 4,5 zu 1. */
.v-green,.v-cyan,.v-blue,.v-violet,.v-peach,.v-yellow,.v-rose,.v-grau,.v-eo{
  --ton:var(--c-dark);      /* Schrift in der Bereichsfarbe */
  --tonbg:var(--c-light);   /* leise Fläche, Schrift darauf in --ton */
  --flach:var(--c-pale);    /* die leiseste Fläche, für ganze Bänder */
  --voll:var(--c-dark);     /* kräftige Fläche */
  --vollink:#FFFFFF;        /* Schrift auf --voll */
  --chip:var(--c-light);    /* Filterknopf in der Bereichsfarbe */
  --chipink:var(--c-dark);
  --bar:var(--c-strong);    /* die Lasche links */
}
.v-eo{--chip:#CC0000;--chipink:#FFFFFF}

@media (prefers-color-scheme:dark){
  :root:not([data-v-theme="light"]) .v-green,:root:not([data-v-theme="light"]) .v-cyan,
  :root:not([data-v-theme="light"]) .v-blue,:root:not([data-v-theme="light"]) .v-violet,
  :root:not([data-v-theme="light"]) .v-peach,:root:not([data-v-theme="light"]) .v-yellow,
  :root:not([data-v-theme="light"]) .v-rose,:root:not([data-v-theme="light"]) .v-grau,
  :root:not([data-v-theme="light"]) .v-eo{
    --ton:var(--c);--tonbg:var(--v-n-light);--flach:var(--v-n-pale);
    --voll:var(--c);--vollink:#1E2A30;--bar:var(--c);
    --chip:var(--c-dark);--chipink:var(--c)}
  :root:not([data-v-theme="light"]) .v-eo{
    --c:#FF346E;--c-dark:#FF346E;--c-strong:#FF346E;
    --c-light:#3A2630;--c-pale:#2B1E25;
    --chip:#FF346E;--chipink:#1E2A30;--ton:#FF346E}
}
:root[data-v-theme="dark"] .v-green,:root[data-v-theme="dark"] .v-cyan,
:root[data-v-theme="dark"] .v-blue,:root[data-v-theme="dark"] .v-violet,
:root[data-v-theme="dark"] .v-peach,:root[data-v-theme="dark"] .v-yellow,
:root[data-v-theme="dark"] .v-rose,:root[data-v-theme="dark"] .v-grau,
:root[data-v-theme="dark"] .v-eo{
  --ton:var(--c);--tonbg:var(--v-n-light);--flach:var(--v-n-pale);
  --voll:var(--c);--vollink:#1E2A30;--bar:var(--c);
  --chip:var(--c-dark);--chipink:var(--c)}
:root[data-v-theme="dark"] .v-eo{
  --c:#FF346E;--c-dark:#FF346E;--c-strong:#FF346E;
  --c-light:#3A2630;--c-pale:#2B1E25;
  --chip:#FF346E;--chipink:#1E2A30;--ton:#FF346E}

/* ---------------------------------------------------------------------------
   3 · Grundlagen
--------------------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--v-grund);color:var(--v-ink);font-family:var(--v-sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.v-wrap{max-width:1040px;margin:0 auto;padding:0 18px 96px}

/* Schriftstufen. Betonung läuft über die Stärke, nie über Laufweite.
   Gesperrte Versalien in Mikroschrift kommen nicht vor, sie lassen
   eine Oberfläche technisch wirken. */
.v-h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}
.v-h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:0}
.v-h3{font-size:16px;font-weight:800;margin:0}
.v-titel{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.v-titel-laut{font-weight:800}
.v-text{font-size:15px;line-height:1.6}
.v-meta{font-size:12px;color:var(--v-leise);display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline}
.v-lab{font-size:12px;font-weight:800;color:var(--v-ink)}
.v-leise{color:var(--v-leise)}
.v-ton{color:var(--ton)}

/* ---------------------------------------------------------------------------
   4 · Bausteine
--------------------------------------------------------------------------- */

/* 4.1 Kopf. Klebt oben, springt nicht, braucht keinen Platzhalter.
   Titel und Reiter in einer Zeile, darunter eine schmale Steuerzeile.
   Was nicht dauernd gebraucht wird, liegt in einem Fach. */
.v-kopf{position:sticky;top:0;z-index:30;background:var(--v-grund);padding:10px 0 6px}
.v-kopf-inner{max-width:1040px;margin:0 auto;padding:12px 18px;background:var(--v-flaeche);
  border-radius:var(--v-r-gross);display:flex;flex-direction:column}
.v-kopf-zeile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.v-kopf-zeile .v-h1{font-size:17px;flex:none}
.v-kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.v-steu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.v-fach{display:none;flex-direction:column;gap:12px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--v-linie)}
.v-fach[data-auf="1"]{display:flex}

/* 4.2 Reiter */
.v-reiter{display:flex;gap:6px;flex-wrap:wrap}
.v-reiter button{font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border:0;
  border-radius:var(--v-r-pille);background:var(--v-n-light);color:var(--v-ink);cursor:pointer}
.v-reiter button:hover{background:var(--v-n)}
.v-reiter button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-grund)}

/* 4.3 Knöpfe. Alles Klickbare ist eine Pille, Fläche statt Rahmen. */
.v-btn{font:inherit;font-size:13px;font-weight:600;padding:7px 15px;border:0;
  border-radius:var(--v-r-pille);background:var(--v-n-light);color:var(--v-ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.v-btn:hover{background:var(--v-n)}
.v-btn[aria-pressed="true"],.v-btn.v-an{background:var(--v-ink);color:var(--v-grund)}
.v-btn.v-prim{background:var(--v-ink);color:var(--v-grund);font-weight:700}
.v-btn.v-prim:hover{filter:brightness(1.18)}
.v-btn.v-bereich{background:var(--chip);color:var(--chipink)}
.v-btn.v-bereich[aria-pressed="true"]{background:var(--voll);color:var(--vollink)}
.v-btn:disabled{opacity:.5;cursor:default}
.v-btn .v-zahl{opacity:.65;font-weight:500}
/* Rund und klein, für ein einzelnes Zeichen */
.v-ibtn{font:inherit;font-size:14px;line-height:1;border:0;background:var(--v-n-light);
  color:var(--v-ink);width:32px;height:32px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.v-ibtn:hover{background:var(--v-n)}
.v-ibtn[aria-pressed="true"]{background:var(--v-ink);color:var(--v-grund)}

/* 4.4 Segment. Zwei oder drei Möglichkeiten, eine ist immer gewählt. */
.v-seg{display:inline-flex;background:var(--v-n-light);border-radius:var(--v-r-pille);padding:2px}
.v-seg button{font:inherit;font-size:12.5px;font-weight:700;border:0;background:none;
  color:var(--v-leise);padding:5px 13px;border-radius:var(--v-r-pille);cursor:pointer}
.v-seg button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-grund)}

/* 4.5 Marken. Sie benennen einen Zustand, sie sind nicht klickbar. */
.v-marke{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--v-r-marke);background:var(--v-n);color:var(--v-ink)}
.v-marke.v-leise{background:var(--v-n-light);color:var(--v-leise)}
.v-marke.v-ton{background:var(--tonbg);color:var(--ton)}
.v-marke.v-laut{background:var(--voll,var(--v-ink));color:var(--vollink,var(--v-grund))}
.v-marke.v-akzent{background:var(--v-akzent);color:#1E2A30}

/* 4.6 Karte und Band */
.v-karte{background:var(--v-flaeche);border-radius:var(--v-r-gross);padding:20px 22px}
.v-band{background:var(--flach,var(--v-n-pale));border-radius:var(--v-r-feld);padding:10px 16px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* 4.7 Blockkopf. Zugeklappt ist er Navigation und bleibt ruhig, weiße Fläche
   mit farbiger Kante. Aufgeklappt trägt er die volle Bereichsfarbe. */
.v-block{margin-bottom:10px}
.v-block-kopf{width:100%;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;
  text-align:left;font-family:inherit;padding:12px 18px;border-radius:var(--v-r-zeile);
  position:relative;overflow:hidden;background:var(--v-flaeche);color:var(--v-ink)}
.v-block-kopf::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--v-lasche);background:var(--bar,var(--v-n))}
.v-block-kopf h2{font-size:17px;font-weight:700;margin:0;flex:1;letter-spacing:-.01em}
.v-block-kopf .v-zahl{font-size:12.5px;color:var(--v-leise)}
.v-block-kopf[aria-expanded="true"]{background:var(--c);color:var(--v-onfill);
  border-radius:var(--v-r-zeile) var(--v-r-zeile) 0 0}
.v-block-kopf[aria-expanded="true"]::before{display:none}
.v-block-kopf[aria-expanded="true"] h2{font-weight:800}
.v-block-kopf[aria-expanded="true"] .v-zahl{color:var(--v-onfill);opacity:.75}
.v-eo>.v-block-kopf[aria-expanded="true"],
.v-eo>.v-block-kopf[aria-expanded="true"] h2{color:#FFFFFF}
.v-liste{background:var(--v-flaeche);border-radius:0 0 var(--v-r-feld) var(--v-r-feld);
  padding:12px;display:flex;flex-direction:column;gap:7px}

/* 4.8 Zeile. Der Kern jeder Liste: eine Karte mit Bereichskante links.
   Die Kante ist eine eigene Fläche, damit die Rundung sie sauber
   beschneidet statt sie zur Sichel zu ziehen. */
.v-zeile{position:relative;overflow:hidden;border-radius:var(--v-r-zeile);
  background:var(--v-flaeche);padding:12px 16px 12px 20px}
.v-zeile::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--v-lasche);background:var(--bar,var(--v-n))}
/* Rang über Intensität: laut trägt Fläche, leise tritt zurück. */
.v-zeile.v-laut{background:var(--tonbg)}
.v-zeile.v-laut::before{background:var(--voll)}
.v-zeile.v-mittel{background:var(--flach)}
.v-zeile.v-still{background:var(--v-flaeche);opacity:.72}
.v-zeile.v-still::before{background:var(--v-n-strong)}
.v-zeile.v-aus{background:var(--v-n-pale);opacity:.7}
.v-zeile.v-aus::before{background:var(--v-n-strong)}
.v-zeile-kopf{display:flex;align-items:flex-start;gap:12px}
.v-zeile-kopf .v-titel{flex:1;min-width:0}

/* 4.9 Felder */
.v-feld{font:inherit;font-size:14px;padding:11px 15px;border:0;border-radius:var(--v-r-feld);
  background:var(--v-n-light);color:var(--v-ink);width:100%}
.v-feld::placeholder{color:var(--v-leise)}
.v-feld:focus{outline:2px solid var(--v-ink);outline-offset:-2px;background:var(--v-flaeche)}
textarea.v-feld{min-height:80px;resize:vertical;line-height:1.55}
select.v-feld{padding:9px 12px}

/* 4.10 Markierung von Hand. Der Akzent ist nur dafür da. */
mark.v-hl{background:var(--v-akzent);color:#1E2A30;padding:0 2px;border-radius:3px}

/* 4.11 Leerer Zustand */
.v-leer{font-size:13px;color:var(--v-leise);padding:26px 4px;text-align:center}

/* 4.12 Helligkeitswahl */
.v-theme{display:inline-flex;background:var(--v-n-light);border-radius:var(--v-r-pille);padding:2px}
.v-theme button{font:inherit;font-size:12px;font-weight:700;padding:5px 12px;border:0;
  background:none;color:var(--v-leise);border-radius:var(--v-r-pille);cursor:pointer}
.v-theme button[aria-pressed="true"]{background:var(--v-ink);color:var(--v-grund)}

/* ---------------------------------------------------------------------------
   5 · Sichtbarkeit beim Tastaturgebrauch
--------------------------------------------------------------------------- */
.v-btn:focus-visible,.v-ibtn:focus-visible,.v-reiter button:focus-visible,
.v-seg button:focus-visible,.v-block-kopf:focus-visible,.v-theme button:focus-visible{
  outline:2px solid var(--v-ink);outline-offset:2px}

/* ---------------------------------------------------------------------------
   6 · Schmale Schirme
--------------------------------------------------------------------------- */
@media (max-width:760px){
  .v-kopf-zeile{gap:10px}
  .v-kopf-zeile .v-h1{font-size:15px}
  .v-kopf-zeile .v-reiter{order:3;flex:1 1 100%}
  .v-wrap{padding:0 12px 80px}
  .v-karte{padding:16px}
}


/* ==== Brücke: die Klassennamen dieses Werkzeugs auf den Bausatz ==== */
:root{
  --v-key:var(--v-schwarz); --v-white:#FFFFFF;
  --v-ns:var(--v-n-strong); --v-nl:var(--v-n-light); --v-np:var(--v-n-pale); --v-nd:var(--v-ink);
  --v-green-strong:#55A454; --v-cyan-strong:#579F9F; --v-yellow-strong:#A39351; --v-peach-strong:#C98351;
  --v-rose-strong:#E06BA8; --v-rose-dark:#84335E; --v-rose-pale:#FFF2F8;
  --v-cyan:#ACEFEE; --v-cyan-dark:#2C5757;
  --v-yellow-dark:#5A5029; --v-yellow-pale:#FFF8E6;
  --sf:var(--v-flaeche); --ink:var(--v-ink); --mut:var(--v-leise); --line:var(--v-linie);
  --ui:var(--v-sans); --r:var(--v-r-feld); --r-s:var(--v-r-zeile); --r-p:var(--v-r-pille);
}

.hd{background:var(--v-schwarz);color:#FFFFFF;border-radius:var(--v-r-gross);
  max-width:1040px;margin:14px auto 0;padding:18px 22px}
.hd .inner{max-width:none;margin:0;padding:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hd svg{height:26px;width:auto;display:block}
.hd h1{font-size:19px;font-weight:800;margin:0;letter-spacing:-.01em}
.hd .sub{font-size:13px;color:#ACEFEE;margin:2px 0 0}

.wrap{background:none;padding:0 0 96px}
.inner{max-width:1040px;margin:0 auto;padding:0 18px}

.top{position:sticky;top:0;z-index:30;background:var(--v-grund);border:0;
  padding:10px 0 6px;margin-bottom:12px}
.topcard{background:var(--v-flaeche);border-radius:var(--v-r-gross);padding:14px 18px;
  display:flex;flex-direction:column;gap:2px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tab{font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border:0;
  border-radius:var(--v-r-pille);background:var(--v-n-light);color:var(--v-ink);cursor:pointer}
.tab:hover{background:var(--v-n)}
.tab.on{background:var(--v-ink);color:var(--v-grund);font-weight:800}

.state{font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-size:13px;font-weight:600;padding:7px 15px;border:0;
  border-radius:var(--v-r-pille);background:var(--v-n-light);color:var(--v-ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--v-n);border:0}
.dot{width:9px;height:9px;border-radius:999px;display:inline-block;margin-right:6px}
.ok{background:#55A454} .bad{background:#E06BA8}

.warn{font-size:13px;color:var(--v-ink);background:var(--v-n-light);border:0;
  border-radius:var(--v-r-feld);padding:10px 14px;margin-top:8px}

.card{position:relative;overflow:hidden;background:var(--v-flaeche);border:0;
  border-radius:var(--v-r-zeile);padding:16px 18px 16px 24px;margin-bottom:8px}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:var(--v-lasche);background:var(--bar,var(--v-n))}
.nm{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--v-ink);line-height:1.15}
.au{font-size:14px;color:var(--v-ink);margin:5px 0;line-height:1.55}
.meta{font-size:12px;color:var(--v-leise);margin-bottom:12px}
.lg{font-size:13px;color:var(--v-leise);margin-bottom:12px;line-height:1.6}
.sv{font-size:13px;color:var(--v-leise);margin-left:8px;font-variant-numeric:tabular-nums}

.stars{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.stars button{background:none;border:0;font-size:30px;line-height:1;padding:0 3px;
  cursor:pointer;color:var(--v-n)}
.stars button.on{color:#A39351}

.cm{width:100%;margin-top:10px;padding:10px 13px;border:0;border-radius:var(--v-r-feld);
  font:inherit;font-size:13.5px;background:var(--v-n-light);color:var(--v-ink)}
.cm::placeholder{color:var(--v-leise)}
.cm:focus{outline:2px solid var(--v-ink);outline-offset:-2px;background:var(--v-flaeche)}

.tl{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.t{font:inherit;font-size:13px;font-weight:600;border:0;border-radius:var(--v-r-pille);
  padding:6px 14px;background:var(--v-n-light);color:var(--v-ink);cursor:pointer}
.t:hover{background:var(--v-n)}
.t.sel{background:#2C5757;color:#FFFFFF;font-weight:700}
.t.bel{background:var(--v-n-pale);color:var(--v-n-strong);text-decoration:line-through;
  cursor:not-allowed}
.t.off{background:#FFFF00;color:#1E2A30}

.grp{font-size:16px;font-weight:800;color:var(--v-ink);margin:24px 0 10px;
  text-transform:none;letter-spacing:-.01em;border:0;padding:0}

.out{margin-top:18px;background:var(--v-flaeche);border:0;border-radius:var(--v-r-gross);padding:20px 22px}
.out textarea{width:100%;min-height:220px;font-family:var(--v-sans);font-size:13px;line-height:1.55;
  border:0;border-radius:var(--v-r-feld);padding:12px 14px;background:var(--v-n-light);color:var(--v-ink)}
.out textarea:focus{outline:2px solid var(--v-ink);outline-offset:-2px}

.hide{display:none}
.btn:focus-visible,.tab:focus-visible,.t:focus-visible,.stars button:focus-visible{
  outline:2px solid var(--v-ink);outline-offset:2px}

/* Markenbefund */
.mk{margin-top:10px;padding:10px 14px;border-radius:var(--v-r-feld);background:var(--mkbg)}
.mk-hoch{--mkbg:#FFF2F8;--mkt:#84335E}
.mk-mittel{--mkbg:#FFF8E6;--mkt:#5A5029}
.mk-gering{--mkbg:#EFFFEF;--mkt:#2B5B2B}
.mk-offen{--mkbg:#F2F2F2;--mkt:#283941}
.mk-t{font-size:11.5px;font-weight:700;color:var(--mkt)}
.mk-x{font-size:12.5px;line-height:1.5;margin-top:2px;color:var(--v-ink)}

@media (prefers-color-scheme:dark){
  :root:not([data-v-theme="light"]) .mk-hoch{--mkbg:var(--v-n-light);--mkt:#FFC5DF}
  :root:not([data-v-theme="light"]) .mk-mittel{--mkbg:var(--v-n-light);--mkt:#FFE36C}
  :root:not([data-v-theme="light"]) .mk-gering{--mkbg:var(--v-n-light);--mkt:#B5FFB2}
  :root:not([data-v-theme="light"]) .mk-offen{--mkbg:var(--v-n-light);--mkt:var(--v-ink)}
  :root:not([data-v-theme="light"]) .t.sel{background:#ACEFEE;color:#1E2A30}
  :root:not([data-v-theme="light"]) .t.off{background:#FFFF00;color:#1E2A30}
  :root:not([data-v-theme="light"]) .stars button.on{color:#FFE36C}
}
:root[data-v-theme="dark"] .mk-hoch{--mkbg:var(--v-n-light);--mkt:#FFC5DF}
:root[data-v-theme="dark"] .mk-mittel{--mkbg:var(--v-n-light);--mkt:#FFE36C}
:root[data-v-theme="dark"] .mk-gering{--mkbg:var(--v-n-light);--mkt:#B5FFB2}
:root[data-v-theme="dark"] .mk-offen{--mkbg:var(--v-n-light);--mkt:var(--v-ink)}
:root[data-v-theme="dark"] .t.sel{background:#ACEFEE;color:#1E2A30}
:root[data-v-theme="dark"] .t.off{background:#FFFF00;color:#1E2A30}
:root[data-v-theme="dark"] .stars button.on{color:#FFE36C}

@media(max-width:520px){.stars button{font-size:26px}.nm{font-size:20px}}