/* > **Gepflegt von:** `frag-anna-website`
   Erzeugt von `npm run gestaltung` aus `stil/teile/konto.css`. Stand: siehe gestaltung-manifest.json.
   Nicht von Hand ändern: Änderungen hier gehen beim nächsten Lauf verloren.
   Gehört etwas hinein, schreib es in deine Abschlussmeldung.

   Braucht tokens.css davor. Einzige Fremdabhängigkeit: .symbol (Inline-SVG, Maße setzt diese Datei). */

/* Maße der Konto-Ansicht. Auf der Website ist sie eine ABBILDUNG im Verkaufstext, in der App eine
   OBERFLÄCHE, in der jemand eine Stunde arbeitet. Dieselben Bauteile, andere Maße — deshalb stehen die
   Maße als Variablen hier und nicht als feste Werte im Bauteil.

   Die App setzt für die echte Anwendung eigene Werte am Wurzelelement, zum Beispiel:
     :root { --konto-leiste: 64px; --konto-nav: 232px; --konto-schrift: 1rem; --konto-ziel: 44px; }
   Damit entfällt ihre bisherige Überschreibung (Meldung der App-Werft vom 19.09.2026, Punkt 2).
   Form, Farbe, Schatten und Übergänge bleiben in jedem Fall von hier. */
:root {
  --konto-leiste: 52px;   /* Höhe der Kopfleiste */
  --konto-nav: 196px;     /* Breite der Seitennavigation */
  --konto-hoehe: 420px;   /* Mindesthöhe des Fensters */
  --konto-schrift: .875rem; /* Grundschrift */
  --konto-ziel: 32px;     /* Mindesthöhe antippbarer Flächen; in der Anwendung 44px */
}

/* Beispielansichten des Büro-Kontos (Lexend, Nachtblau/Grün, Papier) */
.konto-fenster { background: var(--weiss); border-radius: var(--r-20); border: 1px solid var(--linie); box-shadow: var(--schatten-buehne); overflow: hidden; font-size: var(--konto-schrift); line-height: 1.45; text-align: left; }
.konto-leiste { display: flex; align-items: center; gap: 16px; height: var(--konto-leiste); padding: 0 20px; border-bottom: 1px solid var(--linie); }
.konto-leiste img { width: 72px; height: auto; }
.konto-buero { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; padding-left: 16px; border-left: 1px solid var(--linie); }
.konto-buero .symbol { width: 14px; height: 14px; }
.konto-beispiel { margin-left: auto; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--schiefer); background: var(--papier); padding: 4px 8px; border-radius: 6px; }
.konto-koerper { display: grid; grid-template-columns: var(--konto-nav) minmax(0, 1fr); min-height: var(--konto-hoehe); }
.konto-nav { background: var(--papier); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.konto-nav-punkt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--schiefer); font: inherit; font-size: .8125rem; text-align: left; }
button.konto-nav-punkt { cursor: pointer; transition: background-color .15s var(--kurve), color .15s var(--kurve); }
button.konto-nav-punkt:hover { background: rgba(255, 255, 255, .7); color: var(--nacht); }
button.konto-nav-punkt:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: -2px; }
.konto-nav-punkt--spaeter { opacity: .55; }
.konto-nav .symbol { width: 16px; height: 16px; }
.konto-nav .an { background: var(--weiss); color: var(--nacht); font-weight: 500; box-shadow: var(--schatten-1); }
.konto-nav .an .symbol { color: var(--gruen-tief); }
.konto-inhalt { padding: 20px 24px 24px; min-width: 0; }
.konto-titel { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.konto-abschnitt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--schiefer); }
.konto-link { text-transform: none; letter-spacing: 0; color: var(--gruen-tief); font-size: .8125rem; font-weight: 500; border: 0; background: none; padding: 4px 0; cursor: pointer; font-family: inherit; }
.konto-link:hover { text-decoration: underline; }
.konto-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.konto-kennzahlen > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--papier); }
.konto-kennzahlen b { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.konto-kennzahlen span { color: var(--schiefer); font-size: .75rem; }
/* Eine Listen-Form für alles im Beispiel-Konto: Eingänge, Empfänger, Websites */
.konto-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.konto-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0; padding: 8px 14px; background: var(--weiss); }
.konto-liste li + li { border-top: 1px solid var(--linie); }
.konto-liste li > span:first-child { min-width: 0; }
.konto-liste b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.konto-liste small { display: block; color: var(--schiefer); font-size: .75rem; }
.konto-liste .neu { animation: konto-neu .8s var(--kurve); }
@keyframes konto-neu { from { background: var(--gruen-zart); } }
.konto-rechts { display: flex; align-items: center; gap: 16px; flex: none; }
.konto-status { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .75rem; color: var(--schiefer); white-space: nowrap; }
.konto-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.konto-status--pruefung i { background: #9DB2C9; }
.konto-website-neu input[aria-invalid="true"] { border-color: var(--warn); }
.konto-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.konto-filter span { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linie); font-size: .75rem; }
.konto-filter .symbol { width: 14px; height: 14px; }
.konto-filter .rechts { margin-left: auto; }
.konto-knopf { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--gruen-tief); color: var(--weiss); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.konto-knopf:active { transform: translateY(1px); }
.konto-knopf:disabled { background: #E3E7EA; color: var(--schiefer); cursor: default; }
.konto-zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; }
.konto-leistungen-ansicht { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.konto-breit { grid-column: 1 / -1; }
.konto-breit .konto-abschnitt { margin-top: 4px; }
.konto-leistungen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; align-self: start; }
.konto-leistungen li { margin: 0; }
.konto-leistungen li + li { border-top: 1px solid var(--linie); }
.konto-leistungen button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: var(--weiss); color: var(--nacht); font: inherit; font-size: .8125rem; font-weight: 500; text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 transparent; transition: background-color .15s var(--kurve), box-shadow .15s var(--kurve); }
.konto-leistungen button:hover { background: var(--papier); }
.konto-leistungen button.an { background: var(--gruen-zart); box-shadow: inset 3px 0 0 var(--gruen-tief); }
.konto-leistungen .symbol { width: 16px; height: 16px; color: var(--schiefer); }
.konto-leistungen .an .symbol { color: var(--gruen-tief); }
.konto-leistungen small { color: var(--schiefer); font-size: .6875rem; font-weight: 400; white-space: nowrap; }
.konto-preis .konto-abschnitt { margin-top: 0; }
.konto-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.konto-feld { display: flex; flex-direction: column; gap: 4px; }
.konto-feld > span:first-child { color: var(--schiefer); font-size: .75rem; }
.konto-eingabe { display: flex; align-items: center; border: 1px solid var(--linie); border-radius: 8px; padding-right: 8px; background: var(--weiss); }
.konto-eingabe input { width: 100%; min-width: 0; border: 0; background: none; padding: 6px 4px 6px 8px; font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right; min-height: 36px; -moz-appearance: textfield; }
.konto-eingabe input::-webkit-outer-spin-button, .konto-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.konto-eingabe input:focus { outline: none; }
.konto-eingabe:focus-within { border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(47, 191, 134, .25); }
.konto-eingabe i { font-style: normal; color: var(--schiefer); white-space: nowrap; font-size: .8125rem; }
.konto-vorschau { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--papier); display: flex; flex-direction: column; gap: 2px; }
.konto-vorschau small { color: var(--schiefer); font-size: .75rem; }
.konto-vorschau b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nacht); }
.konto-ruhig { color: var(--schiefer); font-size: .8125rem; line-height: 1.5; }
.konto-art[hidden] { display: none; }
.konto-schalter-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.konto-schalter { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; position: relative; }
.konto-schalter input { position: absolute; opacity: 0; width: 36px; height: 22px; margin: 0; cursor: pointer; }
.konto-schalter-bahn { flex: none; width: 36px; height: 22px; border-radius: 11px; background: #D5DBE0; position: relative; transition: background-color .2s var(--kurve); }
.konto-schalter-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .22s var(--kurve); }
.konto-schalter input:checked + .konto-schalter-bahn { background: var(--gruen-tief); }
.konto-schalter input:checked + .konto-schalter-bahn::after { transform: translateX(14px); }
.konto-schalter input:focus-visible + .konto-schalter-bahn { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.konto-schalter.gesperrt { cursor: default; color: var(--schiefer); }
.konto-schalter .etikett { height: 20px; font-size: .6875rem; }
.konto-farben { display: flex; flex-wrap: wrap; gap: 10px; }
.konto-farbe { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--f); transition: box-shadow .15s var(--kurve), transform .15s var(--kurve); }
.konto-farbe:hover { transform: scale(1.08); }
.konto-farbe.an { box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--nacht); }
.konto-farbe:focus-visible { outline: 2px solid var(--nacht); outline-offset: 5px; }
.konto-farbe.k1 { --f: #1C7D57; } .konto-farbe.k2 { --f: #1F5FD1; } .konto-farbe.k3 { --f: #8A5A00; } .konto-farbe.k4 { --f: #5B3FA6; } .konto-farbe.k5 { --f: #B42318; }
.konto-wahl { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--papier); }
.konto-wahl button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--schiefer); font: inherit; font-size: .8125rem; cursor: pointer; }
.konto-wahl button.an { background: var(--weiss); color: var(--nacht); font-weight: 500; box-shadow: var(--schatten-1); }
.konto-code { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--nacht); color: var(--weiss); border-radius: 10px; }
.konto-code code { flex: 1; min-width: 0; font: .75rem/1.4 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-code .kopiert { background: var(--gruen); color: var(--nacht); }
.konto-website-neu { display: flex; gap: 6px; margin-top: 8px; }
.konto-website-neu input { flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 9px; font: inherit; font-size: .8125rem; }
.konto-website-neu input:focus { outline: none; border-color: var(--gruen-tief); box-shadow: 0 0 0 3px rgba(47, 191, 134, .25); }
.konto-mini-modul { --mm-akzent: #1C7D57; --mm-zart: #E8F2EC; --mm-ecken: 10px; border: 1px solid var(--linie); border-radius: calc(var(--mm-ecken) + 4px); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--weiss); box-shadow: var(--schatten-2); align-self: start; transition: border-radius .25s var(--kurve); }
.mm-titel { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.mm-balken { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--mm-akzent) 25%, #E6E9EC 25%); }
.mm-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-kacheln i { display: flex; align-items: flex-end; min-height: 54px; padding: 8px; border: 1px solid var(--linie); border-radius: var(--mm-ecken); font-style: normal; font-size: .6875rem; font-weight: 500; line-height: 1.25; transition: border-radius .25s var(--kurve), border-color .25s var(--kurve), background-color .25s var(--kurve); }
.mm-kacheln i:first-child { border-color: var(--mm-akzent); background: var(--mm-zart); }
.mm-knopf { align-self: flex-end; padding: 8px 16px; border-radius: var(--mm-ecken); background: var(--mm-akzent); color: var(--weiss); font-weight: 600; font-size: .8125rem; transition: background-color .25s var(--kurve), border-radius .25s var(--kurve); }
@media (max-width: 719px) {
  .konto-koerper { grid-template-columns: minmax(0, 1fr); }
  .konto-nav { flex-direction: row; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .konto-nav-punkt { flex: none; width: auto; }
  .konto-nav-punkt:not(.an) > span { display: none; }
  .konto-zwei, .konto-schalter-raster { grid-template-columns: minmax(0, 1fr); }
  .konto-inhalt { padding: 16px; }
}
/* Handy: Kopfleiste passt in eine Zeile, Übersichtstabelle ohne abgeschnittene Spalten */
@media (max-width: 599px) {
  .konto-kennzahlen > div { padding: 10px; }
  .konto-kennzahlen span { font-size: .6875rem; }
  .konto-rechts > small { display: none; }
  .konto-kennzahlen b { font-size: 1.25rem; }
  .konto-leiste { gap: 10px; padding: 0 14px; }
  .konto-leiste img { width: 60px; }
  /* Zweizeilig statt hinausgeschoben (Prüfung 50, 29.09.2026): Mit nowrap ragte »Beispiel« bei 390 px 22 px über den Fensterrand. */
  .konto-buero { padding-left: 10px; min-width: 0; line-height: 1.2; font-size: .8125rem; }
  .konto-beispiel { flex: none; }
  .konto-buero .symbol { display: none; }
  .konto-beispiel { letter-spacing: .02em; padding: 3px 6px; }
}

/* Einrichtungs-Assistent im Rundgang: Fortschritt, fünf Schritte, einer davon ist dran.
   Der Zustand steht links als Punkt, damit die Zeile ohne Farbe lesbar bleibt. */
.konto-fortschritt-text { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; color: var(--nacht); }
.konto-fortschritt-text span { font-weight: 400; color: var(--schiefer); margin-left: 8px; }
.konto-fortschritt { height: 6px; border-radius: 999px; background: var(--nacht-10, #E7EAEE); overflow: hidden; }
.konto-fortschritt i { display: block; width: 50%; height: 100%; background: var(--gruen-tief); border-radius: 999px; }
.konto-schritte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.konto-schritt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; }
.konto-schritt b { display: block; font-size: .8125rem; font-weight: 600; color: var(--nacht); }
.konto-schritt small { display: block; font-size: .75rem; color: var(--schiefer); }
.konto-schritt-punkt { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--nacht-20, #C9D1DA); }
.konto-schritt--fertig .konto-schritt-punkt { border-color: var(--gruen-tief); background: var(--gruen-tief); }
.konto-schritt--fertig b, .konto-schritt--fertig small { color: var(--schiefer); }
.konto-schritt--dran { background: var(--gruen-zart, #EAF4EE); }
.konto-schritt--dran .konto-schritt-punkt { border-color: var(--gruen-tief); }
.konto-schritt-knopf { font-size: .75rem; font-weight: 600; color: var(--weiss); background: var(--gruen-tief); padding: 4px 10px; border-radius: 6px; }
/* Volle Größe für das echte Konto (App L208, /konto/einrichten; Maße der App-Werft, 26.09.2026). Die Klassen oben sind für
   das verkleinerte Bild auf frag-anna.de/konto bemessen. Breite des Balkens über Klassen, weil das Konto keine
   Inline-Stile erlaubt (CSP). Spezifität 0,2,1, damit sie die 50 % der Grundregel schlagen (App-Werft, 26.09.2026:
   eine Nullregel davor schlug sie, der Balken blieb leer). */
.konto-fortschritt--voll { height: 8px; }
.konto-fortschritt--voll + .konto-schritte, .konto-schritte--voll { margin-top: var(--a4); gap: 4px; }
.konto-fortschritt i.konto-fortschritt-0 { width: 0%; } .konto-fortschritt i.konto-fortschritt-10 { width: 10%; } .konto-fortschritt i.konto-fortschritt-20 { width: 20%; } .konto-fortschritt i.konto-fortschritt-30 { width: 30%; } .konto-fortschritt i.konto-fortschritt-40 { width: 40%; } .konto-fortschritt i.konto-fortschritt-50 { width: 50%; } .konto-fortschritt i.konto-fortschritt-60 { width: 60%; } .konto-fortschritt i.konto-fortschritt-70 { width: 70%; } .konto-fortschritt i.konto-fortschritt-80 { width: 80%; } .konto-fortschritt i.konto-fortschritt-90 { width: 90%; } .konto-fortschritt i.konto-fortschritt-100 { width: 100%; }
.konto-schritte--voll .konto-schritt { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px; border-radius: var(--r-12); min-height: 64px; color: inherit; text-decoration: none; }
.konto-schritte--voll a.konto-schritt:hover { background: var(--papier); }
.konto-schritte--voll a.konto-schritt--dran:hover { background: var(--gruen-zart); }
.konto-schritte--voll a.konto-schritt:focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.konto-schritte--voll .konto-schritt b { font-size: 1.0625rem; }
.konto-schritte--voll .konto-schritt small { font-size: .9375rem; margin-top: 2px; }
.konto-schritte--voll .konto-schritt-punkt { width: 22px; height: 22px; }
.konto-schritte--voll .konto-schritt--fertig b { color: var(--nacht); }
.konto-schritte--voll .konto-schritt-knopf { font-size: .9375rem; padding: 9px 18px; border-radius: var(--r-8); }
@media (max-width: 599px) {
  .konto-schritte--voll .konto-schritt { grid-template-columns: 22px minmax(0, 1fr); }
  .konto-schritte--voll .konto-schritt-knopf { grid-column: 2; justify-self: start; }
}

/* Seit den Konten der Vorführbüros (24.09.2026): die Farbe des Büros ist vorgewählt, auch als Startfarbe der
   Vorschau. k6 ist das Rotorange des Brandschutzbüros. */
.konto-farbe.k6 { --f: #B4410E; }
.konto-mini-modul--k1 { --mm-akzent: #1C7D57; --mm-zart: #E8F2EC; } .konto-mini-modul--k2 { --mm-akzent: #1F5FD1; --mm-zart: #E7EEFB; }
.konto-mini-modul--k3 { --mm-akzent: #8A5A00; --mm-zart: #F6EEDD; } .konto-mini-modul--k4 { --mm-akzent: #5B3FA6; --mm-zart: #EEEAF7; }
.konto-mini-modul--k5 { --mm-akzent: #B42318; --mm-zart: #FBE9E7; } .konto-mini-modul--k6 { --mm-akzent: #B4410E; --mm-zart: #FBECE4; }
.konto-beispiel-marke { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--papier); color: var(--schiefer); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.mm-kacheln i { overflow-wrap: anywhere; hyphens: auto; min-width: 0; }
/* Lange Leistungsnamen (»Brandschutznachweis«) brechen um, statt in das Etikett daneben zu laufen. */
/* Leistungsnamen nie mitten im Wort trennen (Jonathan, 26.09.2026, Foto: »Eige- / ner / Preis« neben einem langen Etikett).
   Umbruch nur zwischen Wörtern; die Etiketten rechts sind kurz (Amtlich, Beispiel). */
.konto-leistungen button > span { min-width: 0; overflow-wrap: normal; hyphens: manual; }
.konto-leistungen button > small { flex: none; white-space: nowrap; }