/* Dashboard — nutzt die Tokens/Kopf-Klassen aus app.css (Kalkulator-Identität). */
.dashboard{color:var(--ink);font-family:var(--body)}

/* Blaues Marken-Band (wie Kalkulator-Kopf), mit Logout + Begrüßung */
.db-hero-inner{position:relative}
.db-logout{position:absolute;top:1.6rem;right:1.5rem;color:#fff;text-decoration:underline;
  font-weight:600;font-size:.95rem}
.db-logout:hover{color:var(--gelb)}

.db-huelle{gap:2.2rem}
/* .db-titel: Gestalt entfernt (B50) - kommt aus .fk-abschnitt in app.css.
   Der Abstand darunter bleibt hier, er ist Layout und keine Ueberschriften-Gestalt. */
.db-titel{margin:0 0 1rem}

/* Erstblock: der Kalkulator und, direkt daneben, seine gespeicherten Kalkulationen.
   Von hier fuehrt der Weg weiter - alle uebrigen Werkzeuge bauen auf einer Kalkulation
   auf, deshalb steht dieses Paar vor ihnen und nicht am Seitenende. */
/* Einstieg und Weiterarbeiten nebeneinander (Variante A, vom Nutzer gewaehlt).
   stretch, nicht start: die beiden Karten sollen unten auf einer Kante enden. Beim
   ersten Versuch mit einer schmalen Kalkulator-KACHEL war das ein leerer 300px-Kasten;
   die Einstiegskarte hier traegt Text und fuellt die Hoehe von selbst. */
.db-erstblock{display:grid;gap:1rem;grid-template-columns:minmax(260px,1fr) 1.3fr;
  align-items:stretch;margin-bottom:1.4rem}
@media(max-width:900px){.db-erstblock{grid-template-columns:1fr}}

/* Die Einstiegskarte traegt die Marke: dasselbe Band wie der Kopf. Sie ist die eine
   Kachel, auf der alle uebrigen aufbauen - das darf man sehen. */
.db-einstieg{display:flex;flex-direction:column;justify-content:center;gap:.35rem;
  text-decoration:none;background:linear-gradient(135deg,var(--band-von,#08346D),var(--band-bis,#0B4DA2));
  color:#fff;border-radius:var(--radius-gr);padding:1.4rem 1.5rem;
  box-shadow:0 10px 26px rgba(8,52,109,.2);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
/* Drei Klassen fuer den Unterstrich: Astras Regel ".ast-single-post .entry-content a"
   zaehlt 201, zwei eigene Klassen nur 200. Live standen Titel und Text der
   Einstiegskarte unterstrichen da - in der oertlichen Vorschau nicht, dort laeuft kein
   Theme. Dieselbe Fehlerklasse wie bei den Kachel-Titeln in v1.46.3; die Live-Abnahme
   prueft jetzt ALLE Links im Dashboard statt einer Handvoll benannter. */
.dashboard .db-erstblock a.db-einstieg{text-decoration:none}
a.db-einstieg:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(8,52,109,.28)}
a.db-einstieg:focus-visible{outline:2px solid var(--gelb);outline-offset:3px}
/* Auf dem Band gilt die Bandfarbe. Zwei Klassen, weil die Schutzregel gegen die
   Element-Regeln des Themes (".dashboard :where(h1,h2,h3,...)") ebenfalls eine Klasse
   zaehlt - mit einer allein haette hier die Textfarbe der Seite gewonnen, im hellen
   Design fast Schwarz auf Dunkelblau. Genau der Fehler aus v1.46.0, eine Ebene tiefer. */
.dashboard .db-einstieg :where(h1,h2,h3,h4){color:#fff}
.db-einstieg h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.5rem}
.db-einstieg p{margin:0;color:#D6E3F5;font-size:.92rem;max-width:34ch}
.db-einstieg-marke{align-self:flex-start;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--gelb);margin-bottom:.2rem}
.db-einstieg-hinweis{margin-top:.4rem!important;font-weight:600;color:var(--gelb)!important}

/* Die Karte "Weiterarbeiten". Die zwei Formulare stehen darin UNTEREINANDER und mit
   Beschriftung UEBER dem Feld: nebeneinander passte die Vergleichen-Zeile (Beschriftung,
   Feld, "mit", Feld, Knopf) nicht in die schmalere Spalte und brach schief um. */
.db-kalkulationen{display:grid;gap:.9rem;align-content:center;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--radius-gr);padding:1.2rem 1.3rem;
  box-shadow:var(--schatten)}
.db-untertitel{margin:0;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}

/* Werkzeug-Kacheln.
   Drei Spalten statt vier: neun nutzbare Werkzeuge gehen dann als 3x3 auf, ohne dass
   die letzte Zeile halb leer bleibt. Vorher standen bei 1440px vier Spalten und in der
   letzten Zeile nur zwei Kacheln.
   grid-auto-rows:1fr haelt alle Zeilen gleich hoch. Vorher war eine Kachel mit Hinweis
   99px hoch und eine ohne 65px - die Zeilen fluchteten nicht. */
.db-werkzeuge{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:1fr}
.db-tool{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-gr);
  padding:1.15rem 1.2rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem;
  min-height:92px;box-shadow:var(--schatten)}
.db-tool h3{margin:0;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink)}
/* Der erklaerende Satz aus dem Werkzeugverzeichnis (Befund B29). Er ist der Grund,
   warum justify-content:center oben nicht mehr passt: mit zwei Absaetzen soll die
   Kachel oben beginnen und nicht um ihre Mitte herumwachsen. */
.db-tool{justify-content:flex-start}
.db-tool-text{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-weich)}
.db-tool-bald .db-tool-text{flex:1 1 100%}
.db-tool-gesperrt .db-tool-text{padding-right:1.9rem}
/* Werkzeug, das es noch nicht gibt: gedaempft und in Worten benannt.
   Vorher trug jede Kachel einen Farbpunkt und daneben stand eine Legende - zwoelf
   gruene Punkte, die alle dasselbe sagten. Ein Punkt allein sagt ohnehin niemandem,
   was er bedeutet, und wer Farben nicht unterscheidet, sah gar nichts. Jetzt traegt
   nur noch das eine Kachel etwas aus, das NICHT nutzbar ist - und zwar als Text. */
/* Was es noch nicht gibt, steht ueber die volle Breite am Ende - als eigene Ablage,
   nicht als Luecke mitten im Raster. Vorher sass die gestrichelte Kachel als eine von
   vier in der letzten Zeile und liess sie halb leer aussehen. */
.db-tool-bald{background:color-mix(in srgb,var(--karte) 70%,transparent);border-style:dashed;
  box-shadow:none;grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:.4rem .9rem}
.db-tool-bald .db-tool-marke{align-self:center}
.db-tool-bald .db-tool-hinweis{flex:1 1 100%;margin:0}
.db-tool-bald h3{color:var(--ink-weich)}
.db-tool-marke{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-weich);border:1px solid var(--linie);border-radius:999px;
  padding:.15rem .5rem}

/* Hinter dem Abo verschlossen. Bewusst ANDERS als "in Arbeit" (db-tool-bald):
   dort sagt eine gestrichelte Kante "gibt es noch nicht", hier sagt ein Schloss
   "gibt es, kostet aber". Wer beides gleich aussehen laesst, verspricht dem
   Mitglied etwas Falsches.

   Der Titel bleibt in voller Farbe: Das Werkzeug ist fertig und soll Lust
   machen - gedaempft wuerde es wirken, als sei es nicht der Rede wert. */
.db-tool-gesperrt{position:relative;background:color-mix(in srgb,var(--karte) 88%,transparent)}
.db-tool-gesperrt .db-tool-schloss{position:absolute;top:.85rem;right:.9rem;
  width:20px;height:20px;color:var(--ink-weich);opacity:.7}
.db-tool-gesperrt .db-tool-schloss svg{width:100%;height:100%;display:block}
.db-tool-gesperrt h3{padding-right:1.9rem}
.db-tool-gesperrt-text{font-size:.78rem;color:var(--ink-weich)}

/* Verfügbare Werkzeuge: ganze Kachel ist der Link und hebt sich beim Hover ab.
   Drei Klassen, damit der Unterstrich wirklich weg ist: Astras Regel
   ".ast-single-post .entry-content a" zaehlt 201, zwei eigene Klassen nur 200.
   Live standen die Kachel-Titel unterstrichen da, in der oertlichen Vorschau nicht. */
.dashboard .db-tool.db-tool-klickbar{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s var(--ease-out),background-color .18s var(--ease-out)}
.db-tool-klickbar:hover{transform:translateY(-3px);border-color:var(--blau);
  box-shadow:0 8px 22px rgba(8,52,109,.16);background:var(--blau-hell)}
.db-tool-klickbar:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

/* Gespeicherte Kalkulationen.
   Die beiden Formulare stehen INNERHALB der Karte "Weiterarbeiten" - sie tragen deshalb
   selbst keinen Rahmen und keinen Schatten mehr, sonst waere es eine Karte in der Karte.
   Beschriftung ueber dem Feld statt davor: in der schmaleren Spalte der Variante A
   bleibt so die volle Breite fuer den Kalkulationsnamen. */
.db-laden{display:grid;gap:.45rem;background:none;border:0;padding:0;box-shadow:none}
.db-laden label{font-weight:600;color:var(--ink);font-size:.92rem}
.db-laden select{min-height:46px;width:100%;border:1px solid var(--linie-satt);
  border-radius:var(--radius);padding:.5rem .7rem;font:inherit;font-size:1rem;background:var(--karte);color:var(--ink)}
/* Befund B26: "Laden" ist die Hauptaktion dieser Karte und war blau - der Rest des
   Hauses meint mit Gelb "hier druecken". Die Farben kommen jetzt aus .rechnen bzw.
   .rechnen-sekundaer in app.css; hier bleibt nur die Ausrichtung im Raster. */
.db-laden .rechnen{justify-self:start}
.db-leer{color:var(--ink-weich)} .db-leer a{color:var(--blau);font-weight:600}

/* Vergleich-Einstieg: gehoert als Paar zur Lade-Form darueber, deshalb nur eine
   Haarlinie dazwischen statt einer eigenen Karte in der Karte. Die zwei Felder stehen
   nebeneinander mit dem "mit" dazwischen, der Knopf bekommt seine eigene Zeile.
   Die alte Zeile - Beschriftung, Feld, "mit", Feld, Knopf - passte in die schmalere
   Spalte der Variante A nicht und brach mitten im Satz um. */
.db-vergleichen{display:grid;gap:.45rem .7rem;grid-template-columns:1fr auto 1fr;align-items:center;
  background:none;border:0;padding:.9rem 0 0;box-shadow:none;margin-top:.2rem;
  border-top:1px solid var(--linie)}
.db-vgl-titel{grid-column:1/-1;font-weight:600;color:var(--ink);font-size:.92rem}
.db-vergleichen label{font-weight:600;color:var(--ink-weich);font-size:.92rem;text-align:center}
.db-vergleichen select{min-width:0;min-height:46px;width:100%;border:1px solid var(--linie-satt);
  border-radius:var(--radius);padding:.5rem .7rem;font:inherit;font-size:1rem;background:var(--karte);color:var(--ink)}
.db-vergleichen .rechnen{grid-column:1/-1;justify-self:start}

/* Profil / Abo (In Vorbereitung) */
.db-bereiche{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.db-bereich{background:var(--karte);border:1px dashed var(--linie-satt);border-radius:var(--radius-gr);padding:1.15rem}
/* .db-bereich h2: Gestalt entfernt (B50) - .fk-abschnitt in app.css. */
.db-bereich h2{margin:0 0 .3rem}
/* Der Link "Profil bearbeiten" trug keine eigene Farbe und erbte damit Astras
   Blau (#046BD2). Das kippt im Dunkelmodus NICHT mit: gemessen 3,29:1 auf
   dunklem Kartengrund, gefordert sind 4,5:1. Es ist dieselbe Fehlerklasse wie
   B46 - eine Stelle, an der wir die Farbe nie beansprucht haben - nur eben eine,
   die der Bericht nicht gefunden hat, weil sein Messer sie hinter 45 Phantomen
   begraben hatte.

   ⚠️ DREI KLASSEN, nicht zwei. Astras ".ast-single-post .entry-content a" zaehlt
   0,2,1; ".dashboard .db-bereich a" zaehlt genauso viel, und bei Gleichstand
   entscheidet die Ladereihenfolge. Dieselbe Lehre wie bei den Kachel-Titeln
   (v1.46.3), der Einstiegskarte (v1.48.1) und dem Rueckweg der Kaufseite. */
.dashboard .db-bereiche .db-bereich a{color:var(--text-blau)}
.db-bald{color:var(--ink-weich);font-style:italic;margin:0}

/* Gepflegte Stammdaten im Profil-Kaertchen */
.db-profil{margin:.5rem 0 .9rem;display:grid;gap:.4rem}
.db-profil-zeile{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.25rem .75rem;align-items:baseline}
.db-profil dt{color:var(--ink-weich);font-size:.86rem}
.db-profil dd{margin:0;color:var(--ink);overflow-wrap:anywhere}

@media(max-width:560px){
  .db-bereiche{grid-template-columns:1fr}
  .db-profil-zeile{grid-template-columns:1fr}
  .db-profil dt{font-size:.8rem}
  .db-logout{position:static;display:inline-block;margin-top:.6rem;color:var(--gelb)}
  /* Zwei Felder nebeneinander beschneiden auf schmalen Displays lange
     Kalkulationsnamen. Dort deshalb echt untereinander, das "mit" links davor. */
  .db-vergleichen{grid-template-columns:1fr}
  .db-vergleichen label{text-align:left}
}


/* Erste Schritte: sichtbar, aber ruhig. Der Block soll fuehren, nicht anschreien. */
.db-start-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.db-start-weg { margin: 0; }
.db-start-weg-knopf { background: none; border: 0; padding: .25rem; font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; color: var(--ink-weich); }
.db-start-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.db-start-schritt { display: flex; gap: .75rem; align-items: flex-start; }
.db-start-nummer { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--blau); color: var(--auf-blau); }
.db-start-schritt.ist-erledigt .db-start-nummer { background: var(--gruen); }
.db-start-text p { margin: .2rem 0 0; font-size: .95rem; color: var(--ink-weich); }
/* B3: Opazitaet sitzt bewusst nur auf dem Titel, nicht auf der ganzen Zeile.
   Vorher dimmte "opacity: .65" auf .db-start-schritt AUCH das sichtbare Label
   "erledigt" mit auf 3,08:1 (hell) - unter der AA-Grenze fuer Fliesstext von
   4,5:1. Das Haekchen ist aria-hidden und redundant (das Label sagt dasselbe),
   sein eigener Kontrast darf niedrig bleiben. Das Label ist es nicht: es ist
   der einzige sichtbare Text der Zeile und muss lesbar bleiben. */
.db-start-schritt.ist-erledigt strong { opacity: .65; }
.db-start-fertig { font-size: .9rem; color: var(--ink-weich); }
.db-tool-hinweis { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-weich); }

/* ── Ohne bezahltes Abo ────────────────────────────────────────────────────
   Zwei Dinge, die zusammengehoeren: die Einstiegskarte traegt jetzt ebenfalls
   ein Schloss (sie war bis zum 23.08.2026 das einzige offene Werkzeug, weil sie
   nur auf die Adresse sah und eine gesperrte Kachel sehr wohl eine hat), und
   weil damit KEIN Weg mehr vom Dashboard zur Kaufseite fuehrt, gibt es den
   Banner. Das eine bedingt das andere. */

/* Die gesperrte Einstiegskarte behaelt ihr Band: Das Werkzeug ist fertig und
   soll Lust machen - gedaempft wirkte es, als sei es nicht der Rede wert.
   Dieselbe Ueberlegung wie bei den Kacheln (.db-tool-gesperrt). Was sich
   aendert, ist nur: kein Zeiger, kein Anheben, ein Schloss. */
.db-einstieg-gesperrt{position:relative;cursor:default;
  box-shadow:0 4px 14px rgba(8,52,109,.14)}
.db-einstieg-schloss{position:absolute;top:1.1rem;right:1.2rem;width:22px;height:22px;
  color:#fff;opacity:.75}
.db-einstieg-schloss svg{width:100%;height:100%;display:block}
.db-einstieg-gesperrt h3{padding-right:2.2rem}
/* Wortgleich mit den Kacheln darunter. Die Farbe ist heller als der Fliesstext
   auf dem Band, aber bewusst nicht zu blass: Der Satz ist die Erklaerung fuer
   das Schloss, nicht eine Fussnote. */
.db-einstieg-gesperrt-text{margin-top:.5rem;font-size:.82rem;color:rgba(255,255,255,.82)}

/* Der Abo-Banner. Bewusst NICHT als zweites blaues Band: die Einstiegskarte
   direkt darunter ist schon eines, und zwei konkurrierende Baender heben sich
   gegenseitig auf. Heller Grund mit gelbem Balken - dieselbe Sprache wie der
   Aktionshinweis auf der Kaufseite (.kaufen-aktion), damit ein Mitglied den
   Zusammenhang wiedererkennt.

   KEINE Animation: der Banner erscheint bei jedem Laden des Dashboards. Was man
   taeglich sieht, soll nicht jedes Mal auffahren. */
.db-abo-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin:0 0 1.5rem;padding:1.05rem 1.2rem;
  background:color-mix(in srgb,var(--gelb) 12%,var(--karte));
  border:1px solid color-mix(in srgb,var(--gelb) 42%,var(--linie));
  border-left:4px solid var(--gelb);border-radius:var(--radius-gr)}
.db-abo-banner-text{flex:1 1 18rem;min-width:0}
.db-abo-banner-text strong{display:block;font-family:var(--display);font-weight:600;
  font-size:1.05rem;color:var(--ink)}
.db-abo-banner-text p{margin:.2rem 0 0;font-size:.9rem;line-height:1.45;color:var(--ink-weich)}
/* Drei Klassen gegen Astras Unterstrich-Regel (".ast-single-post .entry-content a"
   zaehlt 201, zwei eigene nur 200) - dieselbe Lehre wie bei der Einstiegskarte. */
.dashboard .db-abo-banner .db-abo-banner-knopf{display:inline-block;flex:0 0 auto;
  text-decoration:none;background:var(--blau);color:var(--auf-blau);
  font-weight:700;font-size:.95rem;padding:.65rem 1.15rem;border-radius:var(--radius);
  transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .dashboard .db-abo-banner .db-abo-banner-knopf:hover{background:var(--blau-tief)}
}
.dashboard .db-abo-banner .db-abo-banner-knopf:active{transform:scale(.97)}
.dashboard .db-abo-banner .db-abo-banner-knopf:focus-visible{outline:2px solid var(--blau);
  outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .dashboard .db-abo-banner .db-abo-banner-knopf{transition:none}
  .dashboard .db-abo-banner .db-abo-banner-knopf:active{transform:none}
}