* { box-sizing: border-box; margin: 0; }
body { background: #14161a; color: #e8ecef; font-family: -apple-system, Helvetica, sans-serif;
       min-height: 100vh; display: flex; align-items: stretch; }
aside { width: 230px; flex-shrink: 0; background: #101216; border-right: 1px solid #2a323b;
        padding: 26px 16px; display: flex; flex-direction: column; gap: 26px;
        position: sticky; top: 0; height: 100vh; }
.marke { cursor: pointer; border-bottom: 3px solid #4EC9E9; padding-bottom: 16px; }
h1 { font-style: italic; font-weight: 900; letter-spacing: 3px; font-size: 22px; line-height: 1.15; }
h1 span { color: #4EC9E9; }
.sub { color: #8b98a5; font-weight: 700; letter-spacing: 3px; font-size: 12px; margin-top: 6px; }
nav { display: flex; flex-direction: column; gap: 4px; }
nav button { background: none; border: none; border-left: 3px solid transparent; color: #8b98a5;
             font-size: 15px; font-weight: 800; padding: 11px 14px; cursor: pointer;
             border-radius: 10px; text-align: left; }
nav button:hover:not(:disabled) { color: #e8ecef; }
nav button.aktiv { color: #4EC9E9; background: #1a2026; border-left-color: #4EC9E9; }
nav button:disabled { opacity: .38; cursor: not-allowed; }
nav button small { font-weight: 400; font-size: 11px; }
main { flex: 1; padding: 30px min(4vw, 44px) 60px; }
main section { display: none; }
main section.aktiv { display: block; max-width: 860px; margin: 0 auto; }
/* Der Konfigurator darf in die Breite (Philipp, 19.08.: „die Seite wird nicht
   komplett benutzt") – Vorschau und Vorlagen-Karten profitieren von jedem
   Zentimeter. Die 1500 px sind eine Obergrenze für Ultrabreit-Monitore; die
   schmalen 860 px bleiben bewusst für die Formular-Reiter (Lesbarkeit). */
#tab-konfigurator.aktiv { max-width: 1500px; }
h2 { font-size: 16px; letter-spacing: 1px; color: #8b98a5; margin: 26px 0 12px; }
.fehlertext { color: #ff7a6e; margin-top: 14px; min-height: 20px; }
.bald { color: #8b98a5; padding: 40px 0; text-align: center; }
/* Start */
.statzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px; padding: 18px; text-align: center; }
.statwert { font-size: 34px; font-weight: 900; color: #4EC9E9; }
.statname { color: #8b98a5; font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-top: 4px; }
.kartenzeile { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.proof-karte { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px; padding: 10px; }
.proof-karte img { width: 100%; aspect-ratio: 1.414; object-fit: cover; border-radius: 8px;
                   background: #fff; cursor: zoom-in; display: block; }
.pk-name { font-size: 12px; margin-top: 8px; word-break: break-all; }
.pk-datum { font-size: 11px; color: #8b98a5; margin: 2px 0 8px; }
.pk-finder { width: 100%; padding: 7px; border-radius: 8px; border: none; background: #2a323b;
             color: #e8ecef; font-size: 12px; font-weight: 700; cursor: pointer; }
/* Proofs (wie bisher) */
#drop { border: 2px dashed #3a424c; border-radius: 14px; padding: 44px 20px;
        text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
#drop.aktiv { border-color: #4EC9E9; background: #1a2026; }
#drop strong { font-size: 18px; }
#drop small { color: #8b98a5; display: block; margin-top: 8px; }
#vorschau { display: none; margin-top: 14px; padding: 10px 14px; background: #1a2026;
            border-radius: 10px; align-items: center; gap: 12px; }
#vorschau.da { display: flex; }
#vorschau img { max-height: 64px; max-width: 160px; border-radius: 6px; background: #fff; }
#vorschau .name { font-size: 14px; color: #8b98a5; word-break: break-all; }
label { display: block; margin: 22px 0 6px; color: #8b98a5; font-size: 13px;
        font-weight: 700; letter-spacing: 1px; }
input[type=text], input[type=password] { width: 100%; padding: 12px 14px; border-radius: 10px;
        border: 1px solid #3a424c; background: #1a2026; color: #e8ecef; font-size: 16px; }
input[type=text]:focus, input[type=password]:focus { outline: none; border-color: #4EC9E9; }
#produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px; margin-top: 22px; }
.kachel { padding: 18px 14px; border-radius: 12px; border: 1px solid #3a424c; background: #1a2026;
          text-align: center; cursor: pointer; font-weight: 800; font-size: 15px;
          transition: border-color .15s, transform .05s; }
.kachel:hover { border-color: #4EC9E9; }
.kachel:active { transform: scale(.97); }
.kachel small { display: block; font-weight: 400; color: #8b98a5; margin-top: 5px; font-size: 12px; }
.kachel.aus { opacity: .38; cursor: not-allowed; }
.kachel.aus:hover { border-color: #3a424c; }
#status { margin-top: 20px; min-height: 24px; font-size: 15px; }
#status.fehler { color: #ff7a6e; }
#status.laeuft { color: #4EC9E9; }
#ergebnis { display: none; margin-top: 18px; }
#ergebnis.da { display: block; }
#pdfbild { width: 100%; border: 1px solid #3a424c; border-radius: 10px; background: #fff;
           display: block; cursor: zoom-in; }
.knoepfe { display: flex; gap: 10px; margin-top: 12px; }
.knoepfe button { flex: 1; padding: 13px; border-radius: 10px; border: none; font-size: 15px;
                  font-weight: 800; cursor: pointer; }
#finder { background: #4EC9E9; color: #14161a; }
#neu { background: #2a323b; color: #e8ecef; }
#verfolgen-neu { background: #2a323b; color: #4EC9E9; }
/* Übersicht */
#suche { margin-bottom: 16px; }
.leer { color: #5a646f; font-size: 13px; }
.datei-karte { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px; padding: 10px; }
.kartenzeile.breit { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.proof-thumb { width: 100%; aspect-ratio: 1.414; object-fit: cover; border-radius: 8px;
               background: #fff; cursor: zoom-in; display: block; margin-bottom: 8px; }
.pk-name.titel { font-size: 15px; font-weight: 800; margin-top: 0; }
/* Designs (Vorlagen) */
#vorlagen-drop { border: 2px dashed #3a424c; border-radius: 14px; padding: 34px 20px;
                 text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
                 margin-bottom: 10px; }
#vorlagen-drop.aktiv { border-color: #4EC9E9; background: #1a2026; }
#vorlagen-drop strong { font-size: 17px; }
#vorlagen-drop small { color: #8b98a5; display: block; margin-top: 8px; }
.verwenden { width: 100%; padding: 8px; border-radius: 8px; border: none; background: #4EC9E9;
             color: #14161a; font-size: 13px; font-weight: 800; cursor: pointer; margin-bottom: 6px; }
/* Konfigurator */
.kf-lage { display: grid; grid-template-columns: minmax(320px, 1.4fr) minmax(260px, 1fr);
           gap: 24px; align-items: start; }
@media (max-width: 900px) { .kf-lage { grid-template-columns: 1fr; } }
/* Board bleibt beim Rollen stehen (23.08.2026, Philipps Wunsch): Die
   Reglertafel ist auch mit zugeklappten Paletten laenger als ein kleiner
   Bildschirm - wer unten an Outline-Staerke oder Loeschknopf arbeitet, sah
   sonst nicht mehr, was er tut. Zwei Bedingungen:
   - nur im Zweispalter; darunter stehen Board und Tafel untereinander, dort
     wuerde ein klebendes Board die Regler verdecken.
   - nur bei hohem genug Fenster: waere die linke Spalte hoeher als der
     Schirm, klebte ihr Kopf oben fest und man kaeme nie an den
     Speichern-Knopf darunter.
   align-items: start steht schon an .kf-lage - ohne das wuerde die Spalte
   auf volle Zeilenhoehe gestreckt und koennte gar nicht kleben. */
@media (min-width: 901px) and (min-height: 620px) {
  .kf-links { position: sticky; top: 12px; }
}
#kf-vorschau { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px;
               padding: 12px; }
#kf-vorschau svg { display: block; width: 100%; height: auto; border-radius: 6px;
                   touch-action: none; }
#kf-element-leiste { display: flex; align-items: center; gap: 12px;
                     flex-wrap: wrap; margin-bottom: 14px; }
#kf-text-plus { background: #2a323b; color: #e8ecef; border: none; border-radius: 10px;
                padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
#kf-text-plus:hover { color: #4EC9E9; }
.kf-tipp { color: #8b98a5; font-size: 13px; }
/* Maximal DREI Vorlagen-Karten nebeneinander (Philipp, 19.08.) – auf breiten
   Monitoren werden die Karten dadurch richtig groß statt zur Briefmarken-
   Galerie zu schrumpfen. Schmale Fenster brechen auf 2 bzw. 1 um. */
.kf-vorlagenliste { display: grid; grid-template-columns: repeat(3, 1fr);
                    gap: 16px; margin-bottom: 20px; }
@media (max-width: 900px) {
  .kf-vorlagenliste { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kf-vorlagenliste { grid-template-columns: 1fr; }
}
.kf-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
#kf-zurueck { background: #2a323b; color: #e8ecef; border: none; border-radius: 10px;
              padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
#kf-zurueck:hover { color: #4EC9E9; }
#kf-editor-titel { color: #8b98a5; font-size: 14px; font-weight: 700; }
#kf-galerie h2 { margin-top: 26px; }
.kf-vorlage { background: #1a2026; border: 2px solid #3a424c; border-radius: 12px;
              padding: 0 0 10px; cursor: pointer; display: flex;
              flex-direction: column; overflow: hidden; text-align: left; }
.kf-vorlage:hover { border-color: #4EC9E9; }
.kf-vorlage.gewaehlt { border-color: #4EC9E9; box-shadow: 0 0 0 2px rgba(78,201,233,.35); }
/* Fester Bildkasten (25.08.2026): vorher bestimmte das Seitenverhaeltnis
   der Vorlage die Kartenhoehe – Board (1,2:1) und Staender-Seitenansicht
   (2,4:1) standen dadurch ungleich hoch nebeneinander. Jetzt gibt der
   Kasten das Mass vor, das SVG passt sich ein (Regel in KF_KARTEN_STIL). */
.kf-vorlage-bild { position: relative; width: 100%; aspect-ratio: 3 / 2;
                   background: #14181d; margin-bottom: 8px; line-height: 0; }
/* Das Vorlagen-SVG liegt in einem Shadow-Root (siehe kfKartenVorschau in
   studio.js) – dorthin reicht diese Datei NICHT hinein. Die Groesse der
   Vorschau steht deshalb in KF_KARTEN_STIL, nicht hier. */
/* Produktkarte in einer Hülle (15.10.2026): darüber liegt beim Inhaber das
   Kästchen „Für andere sichtbar"; abgewählte Produkte stehen abgedunkelt da */
.kf-produkt-huelle { position: relative; display: flex; }
.kf-produkt-huelle > .kf-vorlage { flex: 1; }
.kf-vorlage.versteckt { opacity: .45; }
.kf-produkt-schalter { position: absolute; top: 10px; right: 10px;
                       background: rgba(20,24,29,.88); color: #e8ecef;
                       border: 1px solid #3a424c; border-radius: 8px;
                       padding: 4px 9px; font-size: 12px; font-weight: 700;
                       cursor: pointer; user-select: none; }
.kf-produkt-schalter input { vertical-align: -2px; margin: 0 2px 0 0; cursor: pointer; }
.kf-vorlage-name { color: #e8ecef; font-size: 15px; font-weight: 800; padding: 0 10px; }
.kf-vorlage-produkt { color: #8b98a5; font-size: 12px; padding: 2px 10px 0; }
.kf-unternav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px;
               border-bottom: 1px solid #2a323b; padding-bottom: 10px; }
.kf-unternav button { background: none; border: none; color: #8b98a5;
                      border-radius: 8px; padding: 8px 12px; font-size: 14px;
                      font-weight: 700; cursor: pointer; }
.kf-unternav button:hover { color: #e8ecef; background: #1a2026; }
.kf-unternav button.aktiv { color: #14161a; background: #4EC9E9; }
/* Kreuz am Reiter eines freien Textfeldes (23.08.2026, Philipp: "wenn man da
   drauf gedrueckt hat, dass man das Feld dann loeschen kann"). Sichtbar am
   aufgeschlagenen Reiter und beim Darueberfahren - nicht dauerhaft an allen,
   sonst ist die Reiterzeile ein Nadelkissen. Name/Nummer bekommen keins:
   die legt der Konfigurator selbst wieder an. */
.kf-unternav button .kf-slot-weg { display: none; margin-left: 7px;
                                   font-weight: 400; opacity: .7; }
.kf-unternav button.aktiv .kf-slot-weg,
.kf-unternav button:hover .kf-slot-weg { display: inline; }
.kf-unternav button .kf-slot-weg:hover { opacity: 1; color: #b3261e; }
.kf-gruppe { display: none; }
.kf-gruppe.aktiv { display: block; }
.kf-leer-hinweis { color: #8b98a5; font-size: 14px; line-height: 1.6; }
#kf-auswahl input[type="text"] { margin-bottom: 8px; }
#kf-text-inhalt { width: 100%; padding: 12px 14px; border-radius: 10px;
                  border: 1px solid #3a424c; background: #14181d; color: #e8ecef;
                  font-size: 15px; font-family: inherit; resize: vertical;
                  margin-bottom: 8px; }
#kf-text-inhalt:focus { outline: none; border-color: #4EC9E9; }
#kf-text-label small { color: #8b98a5; font-weight: 400; text-transform: none;
                       letter-spacing: 0; }
#kf-entfernen { background: none; border: none; color: #ff7a6e; font-size: 14px;
                font-weight: 700; cursor: pointer; padding: 8px 0 0; }
/* Seit die Palette der volle HKS-Fächer ist (87 Farben statt 10, 21.08.2026),
   waere die Kachelwand hoeher als der Bildschirm – die Reglertafel bekommt
   deshalb einen eigenen Rollbereich. Höhe so gewählt, dass fünf Reihen
   sichtbar sind. Seit die Zeilen aufklappbar sind (22.08.) ist immer nur
   EINE Palette offen - die darf dann auch ganz zu sehen sein: 340 px fassen
   alle 87 Kacheln ohne Roller, auf kleinen Schirmen deckelt 62vh (23.08.,
   Philipp: "die farben sind nicht mehr so sichtbar"). Die gewaehlte Farbe
   wird beim Zeichnen hereingerollt, falls doch gerollt werden muss.
   ACHTUNG (23.08.2026): Hier standen bis eben die Konfliktzeilen eines
   nicht aufgeloesten Merges (Pi-Stand gegen Vault-Stand). Der CSS-Parser
   frisst mit so einer Zeile die NAECHSTE Regel mit – hier .kf-farbfeld,
   also Groesse und Rahmen aller Farbkacheln: die Palette war nur noch ein
   Streifen winziger Punkte. Marker in CSS/JS nie stehen lassen. */
.kf-farbzeile { margin-bottom: 6px; }
.kf-farbfelder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
                 max-height: min(62vh, 340px); overflow-y: auto; padding-right: 4px;
                 scrollbar-width: thin; }
.kf-farbfelder::-webkit-scrollbar { width: 8px; }
.kf-farbfelder::-webkit-scrollbar-thumb { background: #3a424c; border-radius: 4px; }
/* Luft in der aufgeklappten Zeile (22.08.) – rechts bleibt Platz fuer den Roller */
.kf-farbzeile > .kf-farbfelder { padding: 2px 4px 10px 0; }
.kf-farbfeld { width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
               border: 2px solid #3a424c; }
.kf-farbfeld.gewaehlt { border-color: #4EC9E9; box-shadow: 0 0 0 2px #4EC9E9; }
/* Neue Zeile je Farbfamilie (kfFarbfelderFuellen, 16.10.2026) */
.kf-farb-umbruch { flex-basis: 100%; height: 0; }
.kf-farbfeld.keine { background: linear-gradient(135deg, transparent 44%, #ff7a6e 46%,
                     #ff7a6e 54%, transparent 56%), #1a2026; }
.kf-logoliste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* Logo-Kacheln: das Logo IST die Beschriftung (Philipp 19.08.: „die Logos
   sieht man sehr schlecht, den Text braucht man nicht"). Heller Grund, weil
   die meisten Marken-Logos dunkel sind; Namen stehen nur noch im Tooltip. */
.kf-logo { background: #e9ecef; border: 1px solid #3a424c; border-radius: 10px;
           padding: 12px; cursor: pointer; display: flex; align-items: center;
           justify-content: center; width: 100%; min-height: 110px; }
.kf-logo:hover { border-color: #4EC9E9; }
/* Fassungen für dunkle Flächen (…-weiss, …-dunkel) waeren auf dem hellen
   Grund unsichtbar – sie bekommen ihren eigenen (21.08.2026). */
.kf-logo-dunkel { background: #15181C; }
.kf-logo img { width: 100%; max-height: 86px; object-fit: contain; }
.kf-logo span, .kf-logo .kf-logo-unter { display: none; }
.kf-upload-knopf { display: inline-block; background: #2a323b; color: #e8ecef;
                   border-radius: 10px; padding: 10px 16px; font-size: 14px;
                   font-weight: 700; cursor: pointer; margin-bottom: 14px;
                   text-transform: none; letter-spacing: 0; }
.kf-upload-knopf:hover { color: #4EC9E9; }
#kf-proof { width: 100%; padding: 14px; border-radius: 10px; border: none;
            background: #4EC9E9; color: #14161a; font-size: 16px; font-weight: 800;
            cursor: pointer; margin: 8px 0 14px; }
.kf-speichern-zeile { display: grid; grid-template-columns: 1fr auto; gap: 8px;
                      margin-bottom: 14px; }
.kf-speichern-zeile button { background: #2a323b; color: #e8ecef; border: none;
                             border-radius: 10px; padding: 0 20px; font-size: 14px;
                             font-weight: 700; cursor: pointer; }
#kf-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#kf-status.fehler { color: #ff7a6e; }
#kf-status.laeuft { color: #4EC9E9; }
/* .unsichtbar steht ganz am Ende der Datei – siehe Begründung dort. */
/* Lieferscheine */
#ls-name, #ls-zusatz, #ls-strasse { margin-bottom: 8px; }
.ls-pos { display: grid; grid-template-columns: 80px 1fr 38px; gap: 8px; margin-bottom: 8px; }
.ls-pos button { border: none; background: #2a323b; color: #ff7a6e; border-radius: 10px;
                 font-size: 16px; cursor: pointer; }
#ls-plus { background: none; border: 1px dashed #3a424c; color: #8b98a5; border-radius: 10px;
           padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
#ls-plus:hover { color: #4EC9E9; border-color: #4EC9E9; }
#ls-erstellen { width: 100%; padding: 14px; border-radius: 10px; border: none;
                background: #4EC9E9; color: #14161a; font-size: 16px; font-weight: 800;
                cursor: pointer; }
#ls-status { margin-top: 14px; min-height: 22px; font-size: 15px; }
#ls-status.fehler { color: #ff7a6e; }
#ls-status.laeuft { color: #4EC9E9; }
/* Kunden */
select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a424c;
         background: #1a2026; color: #e8ecef; font-size: 15px; }
select:focus { outline: none; border-color: #4EC9E9; }
#kd-suche { margin-bottom: 16px; }
#kd-name, #kd-zusatz, #kd-strasse { margin-bottom: 8px; }
.kunde-karte .kd-adresse { color: #8b98a5; font-size: 13px; line-height: 1.5; margin: 6px 0; }
.kd-kartenknoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kd-knoepfe { display: flex; gap: 10px; margin-top: 18px; }
#kd-speichern { background: #4EC9E9; color: #14161a; border: none; border-radius: 10px;
                padding: 13px 26px; font-size: 15px; font-weight: 800; cursor: pointer; }
.kd-neben { background: #2a323b; color: #e8ecef; border: none; border-radius: 10px;
            padding: 13px 22px; font-size: 14px; font-weight: 700; cursor: pointer; }
/* Nebenknöpfe im Konfigurator (Knopf-Prüfung 16.10.2026): „Originalfarben" und
   im Ausgabe-Reiter „Anordnung als Vorschaubild festlegen", „Vorschaubild
   zurücksetzen", „…Produktbild…" hatten keine Regel (.kf-neben gab es nicht)
   und zeigten den weißen Standardknopf des Browsers – wie F-013. Gleicher Stil
   wie .kd-neben, etwas kompakter. */
.kf-neben, #kf-logo-farbe-zurueck { display: block; margin-top: 10px; background: #2a323b;
    color: #e8ecef; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px;
    font-size: 13px; font-weight: 700; cursor: pointer; }
.kf-neben:hover, #kf-logo-farbe-zurueck:hover { background: #35404a; }
.kf-neben.aktiv { border-color: #4EC9E9; color: #4EC9E9; }
.kf-neben.unsichtbar { display: none; }
#kd-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#kd-status.fehler { color: #ff7a6e; }
#kd-status.laeuft { color: #4EC9E9; }
/* Preise */
.preis-zeile { display: grid; grid-template-columns: 1fr 130px 38px; gap: 8px; margin-bottom: 8px; }
.preis-zeile.griffzeile { grid-template-columns: 26px 1fr 130px 38px; }
.griff { display: flex; align-items: center; justify-content: center; color: #5a646f;
         font-size: 15px; letter-spacing: -2px; cursor: grab; user-select: none;
         border-radius: 8px; }
.griff:hover { color: #4EC9E9; background: #1a2026; }
.preis-zeile.zieht { opacity: .4; }
nav button.zieht { opacity: .4; }
.preis-zeile button { border: none; background: #2a323b; color: #ff7a6e; border-radius: 10px;
                      font-size: 16px; cursor: pointer; }
#preise-speichern { background: #4EC9E9; color: #14161a; border: none; border-radius: 10px;
                    padding: 11px 26px; font-size: 14px; font-weight: 800; cursor: pointer; }
#preise-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#preise-status.fehler { color: #ff7a6e; }
#preise-status.laeuft { color: #4EC9E9; }
/* Benutzer & Berechtigungen */
/* Konto-Menü (DESIGN-15): klappt beim Drüberfahren auf, Klick auf den Namen
   schaltet es zusätzlich um (Handys kennen kein Hover – .offen kommt aus JS) */
#wer { position: relative; margin: -14px 0 4px; }
.wer-zeile { color: #8b98a5; font-size: 13px; font-weight: 700; cursor: pointer;
             padding: 4px 0; }
.wer-zeile::after { content: " ▾"; color: #5a646f; font-size: 10px; }
.wer-zeile:hover { color: #e8ecef; }
.wer-menue { display: none; flex-direction: column; align-items: flex-start;
             gap: 2px; padding: 4px 0 6px; }
#wer:hover .wer-menue, #wer.offen .wer-menue { display: flex; }
.wer-menue button { background: none; border: none; color: #8b98a5;
                    font-size: 12px; font-weight: 700; cursor: pointer;
                    padding: 3px 0; text-align: left; }
.wer-menue button:hover { color: #4EC9E9; }
.abmelden { text-decoration: underline; }

/* Gespeicherte Designs als Liste (DESIGN-15) */
.kf-designliste { display: flex; flex-direction: column; gap: 8px;
                  max-width: 640px; }
.kf-design-zeile { display: flex; align-items: center; gap: 8px;
                   background: #1a2026; border: 1px solid #3a424c;
                   border-radius: 12px; padding: 10px 14px; }
.kf-design-info { flex: 1; display: flex; align-items: center; gap: 10px;
                  background: none; border: none; color: #e8ecef;
                  cursor: pointer; text-align: left; padding: 0; min-width: 0; }
.kf-design-name { font-weight: 800; font-size: 14px; }
.kf-design-status { font-size: 11px; font-weight: 700; padding: 2px 8px;
                    border-radius: 999px; background: #2a323b; color: #8b98a5; }
.kf-design-status.s-gespeichert { background: #1f3a2a; color: #6fd08c; }
/* Statusfarben der Stufe 16: Eingereicht wartet (blau), Abgelehnt rot,
   Freigegeben = kräftiges Grün (in Produktion) */
.kf-design-status.s-eingereicht { background: #1c2f42; color: #6db4e8; }
.kf-design-status.s-abgelehnt { background: #3a2023; color: #ff8d80; }
.kf-design-status.s-freigegeben { background: #14532d; color: #86efac; }
.kf-design-proof { width: 74px; aspect-ratio: 1.414; object-fit: cover;
                   border-radius: 6px; background: #fff; cursor: zoom-in;
                   flex-shrink: 0; }
/* Vorschau des gespeicherten Designs (21.08.2026). Der Inhalt liegt in
   einem Shadow-Root, deshalb steht die Groesse dort in KF_KARTEN_STIL. */
/* position: relative ist hier PFLICHT (25.08.2026): Die Vorschau im
   Shadow-Root setzt ihr SVG absolut (KF_KARTEN_STIL, fuer den festen
   Bildkasten der Karten). Ohne Bezugsrahmen sucht es sich den naechsten
   positionierten Vorfahren, entkommt der Zeile und deckt die ganze Seite
   zu - "Meine Designs" zeigte dann statt der Liste ein riesiges Design.
   overflow: hidden allein rettet das nicht: geclippt wird nur, was dieser
   Kasten auch enthaelt. */
.kf-design-bild { position: relative; width: 108px; aspect-ratio: 1.2;
                  flex-shrink: 0;
                  border-radius: 8px; overflow: hidden; background: #0f1317;
                  border: 1px solid #3a424c; cursor: pointer;
                  display: flex; align-items: center; }
.kf-design-bild:hover { border-color: #4EC9E9; }
.kf-designliste.breit { max-width: 980px; }
/* Schriftwahl mit Hover-Vorschau (21.08.2026): Knopf + eigene Liste,
   jeder Eintrag in seiner Schrift */
.kf-schriftwahl { position: relative; }
#kf-schrift-knopf {
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px;
  border: 1px solid #3a424c; background: #232a32; color: #e8ecef;
  font-size: 14px; cursor: pointer;
}
#kf-schrift-knopf::after { content: "▾"; float: right; color: #8b98a5; }
#kf-schrift-knopf:hover { border-color: #4EC9E9; }
#kf-schrift-liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 320px; overflow-y: auto; border-radius: 10px;
  border: 1px solid #3a424c; background: #1a2026;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
#kf-schrift-liste button {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: 0; color: #e8ecef; font-size: 16px;
  cursor: pointer;
}
#kf-schrift-liste button:hover, #kf-schrift-liste button:focus {
  background: #26313b; color: #4EC9E9; outline: none;
}

/* Verweis aus der Galerie in den Reiter „Meine Designs" */
.kf-verweis { background: none; border: none; padding: 0; font: inherit;
              color: #4EC9E9; font-weight: 700; cursor: pointer;
              text-decoration: underline; }
.kf-design-mini.gut { background: #14532d; color: #86efac; }
/* Hiess bis 07.09.2026 .kf-nur-kunde und war fuer alle ausser Kunden
   ausgeblendet. Damit kam der Inhaber nie an "Design abschicken" - und hatte
   folglich nie etwas freizugeben (Philipp: "ich wuerde es gerne freigeben
   koennen ... aber auch als inhaber"). Jetzt fuer jeden sichtbar, der den
   Konfigurator bedienen darf; die Rechte prueft ohnehin der Server. */
.kf-abschicken-block { margin-top: 18px; border-top: 1px solid #2a323b;
                       padding-top: 4px; }
#kf-abschicken { width: 100%; padding: 13px; border-radius: 10px; border: none;
                 background: #4EC9E9; color: #14161a; font-size: 15px;
                 font-weight: 800; cursor: pointer; }
#kf-abschicken:hover { filter: brightness(1.1); }
/* Farbpalette druckverbindlich (DESIGN-17) */
/* 87 Palettenzeilen sind laenger als jeder Bildschirm – eigener Rollbereich,
   damit "+ Farbe" und "Palette speichern" darunter erreichbar bleiben. */
#palette-liste { max-height: 60vh; overflow-y: auto; padding-right: 6px;
                 scrollbar-width: thin; }
.palette-zeile { display: grid; align-items: center; gap: 8px; margin-bottom: 6px;
                 grid-template-columns: 1fr 52px 64px 64px 64px 64px 34px;
                 max-width: 640px; }
/* Familien-Überschrift in der sortierten Palette (16.10.2026) */
.palette-familie { color: #8b98a5; font-size: 11px; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; max-width: 640px; margin: 16px 0 8px;
                   padding-bottom: 4px; border-bottom: 1px solid #2a323b; }
.palette-familie:first-child { margin-top: 0; }
.palette-titel { color: #8b98a5; font-size: 11px; font-weight: 700;
                 text-transform: uppercase; }
.palette-zeile input[type=number] { width: 100%; padding: 8px; border-radius: 8px;
                 border: 1px solid #3a424c; background: #1a2026; color: #e8ecef; }
.palette-zeile input[type=color] { width: 100%; height: 34px; padding: 0;
                 border: 1px solid #3a424c; border-radius: 8px; background: none; }
.palette-zeile .pal-name { padding: 8px 10px; font-size: 14px; }

/* Aufträge aus Kunden-Freigaben (DESIGN-16) */
.pk-kunde { display: inline-block; font-size: 11px; font-weight: 700;
            padding: 2px 8px; border-radius: 999px; background: #1c2f42;
            color: #6db4e8; margin-bottom: 6px; }
.kf-design-unter { color: #5a646f; font-size: 12px; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.kf-design-mini { background: #2a323b; border: none; color: #e8ecef;
                  border-radius: 8px; padding: 6px 10px; font-size: 12px;
                  font-weight: 700; cursor: pointer; }
.kf-design-mini.loesch { color: #ff8d80; }

/* Kunden-Sicht (body.rolle-kunde, DESIGN-15): interne Werkzeuge weg,
   eigener Logo-Block nur dort sichtbar */
body.rolle-kunde .kf-intern { display: none; }
body:not(.rolle-kunde) #kf-eigene-block { display: none; }
#kf-eigene-block { margin-top: 18px; border-top: 1px solid #2a323b;
                   padding-top: 14px; }
.kf-rechte-zeile { display: flex; align-items: flex-start; gap: 8px;
                   font-size: 13px; color: #e8ecef; margin: 10px 0;
                   cursor: pointer; }
.kf-rechte-zeile input { margin-top: 2px; }
.kf-upload-knopf.aus { opacity: .45; pointer-events: none; }
.kf-eigenes-logo { display: inline-flex; flex-direction: column; gap: 4px;
                   align-items: stretch; margin: 0 8px 8px 0; }

/* Designs auf der Kunden-Karte (DESIGN-15) */
.kd-designs { margin: 10px 0 4px; }
.kd-designs-titel { font-size: 12px; font-weight: 800; color: #8b98a5;
                    text-transform: uppercase; margin-bottom: 6px; }
.kd-design-zeile { display: flex; align-items: center; justify-content:
                   space-between; gap: 10px; padding: 4px 0; font-size: 13px; }

/* Konten-Liste nach Rollen gruppiert (DESIGN-15) */
.konten-gruppe { font-size: 13px; font-weight: 800; color: #8b98a5;
                 text-transform: uppercase; margin: 18px 0 8px; }
.konto-neu select { background: #1a2026; border: 1px solid #3a424c;
                    color: #e8ecef; border-radius: 8px; padding: 8px 10px;
                    font-size: 13px; }
.konto-karte { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px;
               padding: 14px; margin-bottom: 10px; }
.konto-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.konto-name { flex: 1; font-weight: 800; font-size: 15px; }
.konto-mini { background: #2a323b; border: none; color: #e8ecef; border-radius: 8px;
              padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.konto-mini.loesch { color: #ff7a6e; }
.rechte-zeile { display: flex; flex-wrap: wrap; gap: 6px; }
.recht { background: none; border: 1px solid #3a424c; color: #5a646f; border-radius: 999px;
         padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.recht:hover:not(:disabled) { border-color: #8b98a5; color: #8b98a5; }
.recht.an { border-color: #4EC9E9; color: #4EC9E9; background: rgba(78,201,233,.10); }
.recht:disabled { opacity: .55; cursor: default; }
.konto-neu { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 14px; }
.konto-neu button { background: #4EC9E9; color: #14161a; border: none; border-radius: 10px;
                    padding: 12px 20px; font-size: 14px; font-weight: 800; cursor: pointer; }
#konten-status { margin-top: 10px; min-height: 20px; font-size: 14px; }
#konten-status.fehler { color: #ff7a6e; }
/* Einstellungen */
.hinweistext { color: #8b98a5; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.einst-knopf { margin-top: 16px; padding: 12px 26px; border-radius: 10px; border: none;
               background: #4EC9E9; color: #14161a; font-size: 14px; font-weight: 800;
               cursor: pointer; }
#pw-status, #fd-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#pw-status.fehler, #fd-status.fehler { color: #ff7a6e; }
#pw-status.laeuft, #fd-status.laeuft { color: #4EC9E9; }
/* Lager */
.lager-zeile { display: grid; grid-template-columns: 26px 1fr 90px 90px 90px 38px; gap: 8px; margin-bottom: 8px; }
.lager-zeile button { border: none; background: #2a323b; color: #ff7a6e; border-radius: 10px;
                      font-size: 16px; cursor: pointer; }
.lager-zeile.knapp input { border-color: #ff9f43; }
.lager-kopf { display: grid; grid-template-columns: 26px 1fr 90px 90px 90px 38px; gap: 8px;
              color: #8b98a5; font-size: 11px; font-weight: 700; letter-spacing: 1px;
              text-transform: uppercase; margin: 16px 0 6px; }
#lager-warnung { color: #ff9f43; margin-top: 10px; min-height: 20px; font-weight: 700; }
#lager-speichern { background: #4EC9E9; color: #14161a; border: none; border-radius: 10px;
                   padding: 11px 26px; font-size: 14px; font-weight: 800; cursor: pointer; }
#lager-plus, #preise-plus { background: none; border: 1px dashed #3a424c; color: #8b98a5; border-radius: 10px;
              padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
#lager-plus:hover, #preise-plus:hover { color: #4EC9E9; border-color: #4EC9E9; }
#lager-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#lager-status.fehler { color: #ff7a6e; }
#lager-status.laeuft { color: #4EC9E9; }
/* Kalkulator */
.kalk-karte { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px; padding: 12px; }
.kalk-knoepfe { display: flex; gap: 6px; margin-top: 8px; }
.kalk-knoepfe .weg { flex: 0 0 38px; color: #ff7a6e; }
.kalk-daten { grid-template-columns: 1fr 1fr 1fr; margin-top: 6px; }
#kalk-plus { background: none; border: 1px dashed #3a424c; color: #8b98a5; border-radius: 10px;
             padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; margin: 4px 0 6px; }
#kalk-plus:hover { color: #4EC9E9; border-color: #4EC9E9; }
#kalk-ergebnis { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px;
                 padding: 14px 16px; margin: 16px 0; display: grid; gap: 6px;
                 font-size: 14px; color: #8b98a5; }
#kalk-ergebnis b { color: #e8ecef; }
#kalk-ergebnis .kalk-vk { font-size: 16px; }
#kalk-ergebnis .kalk-vk b { color: #4EC9E9; font-size: 20px; }
#kalk-speichern { width: 100%; padding: 14px; border-radius: 10px; border: none; background: #4EC9E9;
                  color: #14161a; font-size: 15px; font-weight: 800; cursor: pointer; }
#kalk-status { margin-top: 12px; min-height: 22px; font-size: 15px; }
#kalk-status.fehler { color: #ff7a6e; }
#kalk-status.laeuft { color: #4EC9E9; }
/* Rechnungen */
#re-name, #re-zusatz, #re-strasse { margin-bottom: 8px; }
.re-plz-ort { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
input.fehlt, .re-pos input.fehlt { border-color: #ff7a6e; background: rgba(255,122,110,.07); }
input.optional::placeholder { color: #5a646f; }
textarea, input[type=date], input[type=number] {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #3a424c;
  background: #1a2026; color: #e8ecef; font-size: 16px; font-family: inherit; }
textarea:focus, input[type=date]:focus, input[type=number]:focus { outline: none; border-color: #4EC9E9; }
/* Die kleinen Pfeile am Zahlenfeld hell darstellen – sonst sind sie auf dem
   dunklen Hintergrund kaum zu sehen (Philipp, 17.08.) */
input[type=number], input[type=date] { color-scheme: dark; }
/* €-Zeichen fest im Feld */
.euro-feld { position: relative; display: block; }
.euro-feld input { width: 100%; padding-right: 46px; text-align: right; }
.euro-feld::after { content: "€"; position: absolute; right: 28px; top: 50%;
                    transform: translateY(-50%); color: #4EC9E9; font-weight: 700;
                    pointer-events: none; }
.re-daten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.re-pos { display: grid; grid-template-columns: 80px 1fr 120px 38px; gap: 8px; margin-bottom: 8px; }
.re-pos button { border: none; background: #2a323b; color: #ff7a6e; border-radius: 10px;
                 font-size: 16px; cursor: pointer; }
.re-fusszeile { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 16px; }
#re-plus { background: none; border: 1px dashed #3a424c; color: #8b98a5; border-radius: 10px;
           padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
#re-plus:hover { color: #4EC9E9; border-color: #4EC9E9; }
#re-summe { font-size: 18px; font-weight: 900; color: #4EC9E9; }
#re-erstellen { width: 100%; padding: 14px; border-radius: 10px; border: none; background: #4EC9E9;
                color: #14161a; font-size: 16px; font-weight: 800; cursor: pointer; }
#re-status { margin-top: 14px; min-height: 22px; font-size: 15px; }
#re-status.fehler { color: #ff7a6e; }
#re-status.laeuft { color: #4EC9E9; }
/* Aufträge / Status */
.status-box { position: relative; margin-bottom: 8px; }
.badge { background: none; border: 1px solid; border-radius: 999px; padding: 4px 10px;
         font-size: 12px; font-weight: 700; cursor: pointer; width: 100%; }
.verfolgen { width: 100%; padding: 5px; border-radius: 999px; border: 1px dashed #3a424c;
             background: none; color: #8b98a5; font-size: 12px; font-weight: 700; cursor: pointer; }
.verfolgen:hover { color: #4EC9E9; border-color: #4EC9E9; }
.status-menue { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #1a2026;
                border: 1px solid #3a424c; border-radius: 10px; padding: 6px; display: flex;
                flex-direction: column; gap: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
/* Textfarbe gehoert in die CSS, nicht in jeden Aufruf (07.09.2026): Das
   Status-Menue setzt an jedem Knopf eine eigene Farbe per JavaScript, deshalb
   fiel jahrelang nicht auf, dass hier gar keine steht. Das Design-Auswahlmenue
   an der Auftragskarte tut das nicht - seine Eintraege standen schwarz auf
   dunkel (Philipp: "man sieht es nicht richtig"). Die Inline-Farben des
   Status-Menues stechen diese Regel weiterhin. */
.status-menue button { background: none; border: none; text-align: left; padding: 7px 10px;
                       border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer;
                       color: #e8ecef; }
.status-menue button:hover { background: #2a323b; }
.status-menue .entfernen { color: #ff7a6e; border-top: 1px solid #2a323b; margin-top: 4px; }
.proof-karte.fertig, .datei-karte.fertig { opacity: .55; }
/* Platzhalter für ein fehlendes Bild – eigener Name, weil .fehlt die leeren
   Pflichtfelder markiert (F-004: das Seitenverhältnis blies die Eingabefelder auf). */
.datei-fehlt { width: 100%; aspect-ratio: 1.414; display: flex; align-items: center; justify-content: center;
         background: #2a323b; color: #ff7a6e; border-radius: 8px; font-weight: 700; }
/* Kundenliste: Steuerzeile mit Sortierung und Archiv-Schalter */
.kd-steuerung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                margin: 10px 0 16px; color: #8b98a5; font-size: 13px; font-weight: 700; }
.kd-steuerung label { margin: 0; letter-spacing: 1px; }
.kd-steuerung select { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; }
.kd-schalter { display: flex; align-items: center; gap: 7px; cursor: pointer;
               letter-spacing: 0; text-transform: none; font-weight: 700; }
.kd-schalter input { width: auto; margin: 0; cursor: pointer; }
#kd-anzahl { margin-left: auto; color: #5a646f; font-weight: 400; }

/* Konfigurator: Farbzeile zeigt ihre eigene Farbe, lässt sich hervorheben und
   auf-/zuklappen (22.08.2026) – zugeklappt bleibt eine Liste aller Farben des
   Designs stehen, die Palette kommt erst beim Aufklappen. */
.kf-farbpunkt { display: inline-block; width: 13px; height: 13px; border-radius: 4px;
                border: 1px solid #4a545e; margin-right: 8px; vertical-align: -2px;
                flex: none; }
/* Die Zeile muss von selbst sagen "hier ist etwas dahinter" (Philipp
   23.08.2026: "bei den Farben kann man nicht erkennen, dass man es
   aufklappen kann"). Vorher war sie nur Text mit einem blassen Haekchen
   rechts. Jetzt dieselbe Karte wie die Kategorien der Logo-Bibliothek:
   Rahmen, eigene Flaeche, beim Darueberfahren heller, offen tuerkiser
   Rahmen. */
.kf-farbzeile { border: 1px solid #2a323b; border-radius: 10px; background: #171c22;
                padding: 0 10px; margin: 0 0 8px;
                transition: background .2s, box-shadow .2s, border-color .2s; }
.kf-farbzeile:hover { border-color: #4a545e; background: #1a2026; }
.kf-farbzeile[open] { border-color: #4EC9E9; background: #1a2026; }
.kf-farbzeile.hervor { background: #1a2026; box-shadow: inset 3px 0 0 #4EC9E9; }
/* Punkt fuer "keine Farbe" (Textfuellung/Outline aus) - gleiche Schraege wie
   das durchgestrichene Palettenfeld, damit man es wiedererkennt. */
.kf-farbpunkt.ohne { background: linear-gradient(135deg, transparent 38%, #ff7a6e 42%,
                     #ff7a6e 58%, transparent 62%), #1a2026; }
.kf-farbzeile > summary { cursor: pointer; display: flex; align-items: center;
                          padding: 10px 0; list-style: none; }
.kf-farbzeile > summary::-webkit-details-marker { display: none; }
/* Pfeil in der Signalfarbe, auch zugeklappt (Philipp 23.08.2026: "vielleicht
   die Pfeile in einer anderen Farbe machen, damit man es sieht"). Grau ging
   auf dem dunklen Grund unter - Tuerkis ist im Studio ueberall das Zeichen
   fuer "hier kann man etwas tun". */
.kf-farbzeile > summary::after { content: "⌄"; color: #4EC9E9; font-size: 20px;
                                 line-height: 1; margin-left: 10px; flex: none; }
.kf-farbzeile > summary:hover::after { color: #9ce8fb; }
.kf-farbzeile[open] > summary::after { content: "⌃"; color: #4EC9E9; }
.kf-farbzeile > summary:hover .kf-farb-titel { color: #4EC9E9; }
.kf-farb-titel { color: #8b98a5; font-size: 13px; font-weight: 700;
                 letter-spacing: 1px; }
/* Name der aktuell gewählten Palettenfarbe – die Info, die man zugeklappt
   braucht. Rechtsbündig, damit die Zeilen eine Kante bilden. */
.kf-farb-wert { color: #5a646f; font-size: 12px; margin-left: auto;
                text-align: right; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
#kf-vorschau svg { cursor: pointer; }
#kf-vorschau #kf-overlay text, #kf-vorschau #kf-overlay image { cursor: move; }

/* Hinweisleiste „nur Rechnungen von …" über der Rechnungsliste */
.filterleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                background: #1a2026; border-left: 3px solid #4EC9E9;
                border-radius: 10px; padding: 11px 16px; margin-bottom: 14px;
                color: #e8ecef; font-size: 14px; font-weight: 700; }
.filterleiste button { background: #2a323b; color: #4EC9E9; border: none;
                       border-radius: 8px; padding: 7px 14px; font-size: 13px;
                       font-weight: 800; cursor: pointer; }
.filterleiste button:hover { background: #35404a; }

/* Löschknopf im Konfigurator: klar abgesetzt und als Gefahr erkennbar */
.kf-trenner { border: none; border-top: 1px solid #2a323b; margin: 22px 0 14px; }
#kf-entfernen.gefahr, #kf-logo-entfernen.gefahr { background: #2a1a1c; color: #ff7a6e; border: 1px solid #6b2a2e;
                       border-radius: 10px; padding: 11px 16px; font-size: 14px;
                       font-weight: 800; cursor: pointer; width: 100%; }
#kf-entfernen.gefahr:hover, #kf-logo-entfernen.gefahr:hover { background: #3a2024; }
.kf-hinweis { display: block; color: #8b98a5; font-size: 12px; line-height: 1.5;
              margin-top: 8px; }

/* Lightbox */
#gross { display: none; position: fixed; inset: 0; background: rgba(10, 12, 14, .92);
         z-index: 50; align-items: center; justify-content: flex-start; flex-direction: column; gap: 14px;
         padding: 30px; overflow: auto; }
#gross.da { display: flex; }
#grossbild { max-width: 92vw; max-height: 78vh; border-radius: 8px; background: #fff; cursor: zoom-in; }
/* Gezoomt = Blattbreite füllt das Fenster, danach wird gescrollt.
   Früher stand hier max-width/max-height: none, also die volle Pixelgröße
   des Vorschaubilds. Seit die Vorschau auf dem Pi mit 150 dpi statt 72 dpi
   gerendert wird (2946x4167 statt 1414x2000), war das so nah dran, dass man
   nur noch weiße Fläche sah. */
#grossbild.zoom { max-width: none; max-height: none; height: auto;
                  cursor: zoom-out; }
/* Beim Zoomen oben/links ausrichten: mittig zentrierter Inhalt, der breiter
   als der Behälter ist, lässt sich sonst nicht bis zum linken Rand scrollen. */
#gross.gezoomt { align-items: flex-start; }
/* Grossansicht eines gezeichneten Designs (24.08.2026). Gleiche Maße wie
   #grossbild, aber ein Halter mit Shadow-Root: Vorlagen-SVGs vergeben ihre
   Klassennamen sonst global und faerben andere Vorschauen um (19.08., Apex). */
#gross-svg { display: none; max-width: 92vw; max-height: 78vh; border-radius: 8px;
             background: #fff; cursor: zoom-in; line-height: 0; }
#gross-svg.da { display: block; }
#gross-svg.zoom { max-width: none; max-height: none; cursor: zoom-out; }
#gross-x { position: fixed; top: 18px; right: 22px; background: none; border: none; color: #e8ecef;
           font-size: 26px; cursor: pointer; }
#gross-finder { padding: 11px 22px; border-radius: 10px; border: none; background: #4EC9E9;
                color: #14161a; font-weight: 800; font-size: 14px; cursor: pointer; }
.kf-logo-aus { opacity: .4; }

/* Logo-Bibliothek als Akkordeon (Vorbild Backyard Design, 19.08.2026):
   Kategorie aufklappen -> Marken-Kacheln -> Fassungen */
.kf-kategorie { border: 1px solid #2a323b; border-radius: 12px; margin-bottom: 8px;
                background: #171c22; }
.kf-kategorie > summary { cursor: pointer; padding: 12px 14px; display: flex;
                          align-items: center; justify-content: space-between;
                          gap: 10px; list-style: none; }
.kf-kategorie > summary::-webkit-details-marker { display: none; }
/* Gleiche Sprache wie bei den Farbzeilen (23.08.2026) - hier war der Pfeil
   sogar noch blasser. */
.kf-kategorie > summary::after { content: "⌄"; color: #4EC9E9; font-size: 20px;
                                 line-height: 1; }
.kf-kategorie > summary:hover::after { color: #9ce8fb; }
.kf-kategorie[open] > summary::after { content: "⌃"; }
/* Eigener Bereich: steht oben, offen, und ist am Türkisrand zu erkennen. */
.kf-kat-eigen { border-color: #4EC9E9; }
.kf-kat-eigen > summary .kf-kat-name { color: #4EC9E9; }
.kf-kategorie > summary:hover .kf-kat-name { color: #4EC9E9; }
.kf-kat-name { font-weight: 800; font-size: 14px; letter-spacing: .5px;
               text-transform: uppercase; }
.kf-kat-zahl { color: #5a646f; font-size: 11px; margin-left: auto;
               margin-right: 6px; }
.kf-markenliste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
                  padding: 0 12px 12px; align-items: start; }
@media (max-width: 700px) { .kf-markenliste { grid-template-columns: 1fr; } }
.kf-marke { display: flex; flex-direction: column; gap: 6px; }
.kf-logo-unter { color: #5a646f; font-size: 11px; display: block; }
.kf-fassungen { display: flex; flex-direction: column; gap: 8px;
                border-left: 2px solid #2a323b; padding-left: 8px; }
.kf-fassung { display: flex; flex-direction: column; gap: 4px; }
.kf-fassung .kf-logo { min-height: 90px; }
.kf-fassung-knoepfe { display: flex; gap: 4px; }
.kf-fassung-knoepfe .kf-design-mini { flex: 1; font-size: 11px; padding: 4px 6px; }
#kf-logo-auswahl { background: #1a2026; border: 1px solid #3a424c;
                   border-radius: 12px; padding: 4px 14px 14px; margin-bottom: 14px; }

/* Aufgeklappte Marke: Kachel weg, schlichte Kopfzeile statt doppeltem Logo
   (Philipp 19.08.) – die offene Marke nimmt dafür die volle Breite. */
.kf-marke-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 0 6px;
                 font-weight: 800; font-size: 13px; letter-spacing: .5px;
                 text-transform: uppercase; }
.kf-marke-zurueck { background: #2a323b; border: none; color: #e8ecef;
                    border-radius: 8px; padding: 4px 10px; font-size: 14px;
                    font-weight: 800; cursor: pointer; }
.kf-marke-zurueck:hover { color: #4EC9E9; }
.kf-marke-offen { grid-column: 1 / -1; }

/* Hilfsklasse zum Ausblenden – ganz am Ende UND mit !important, weil sie
   IMMER gewinnen muss. Vorher stand sie mitten in der Datei: jede später
   notierte display-Regel (z. B. .kf-fassungen { display: flex }) hat sie bei
   gleicher Spezifität ausgehebelt, und Elemente blieben sichtbar, obwohl der
   Code sie versteckt hatte. Genau daran ist am 19.08.2026 die aufklappbare
   Logo-Bibliothek gescheitert – sie war nie zugeklappt. */
.unsichtbar { display: none !important; }

/* „nach vorn“ an der Vorlagen-Kachel (nur Inhaber, 20.08.2026) */
.kf-vorlage-vor { background: #2a323b; border: none; color: #8b98a5; font-size: 11px;
                  font-weight: 700; border-radius: 8px; padding: 4px 8px; cursor: pointer;
                  margin: 6px 10px 10px; align-self: flex-start; }
.kf-vorlage-vor:hover { color: #4EC9E9; }
/* Beliebtheit an der Vorlagen-Kachel (nur Inhaber, 16.10.2026) – ersetzt „nach vorn“ */
.kf-vorlage-beliebt { color: #8b98a5; font-size: 11px; font-weight: 700;
                      margin: 6px 10px 10px; align-self: flex-start; }

/* Magnet/Hilfslinien-Schalter (20.08.2026) */
.kf-magnet { margin-left: auto; background: #2a323b; border: none; color: #8b98a5;
             border-radius: 10px; padding: 8px 14px; font-size: 13px;
             font-weight: 700; cursor: pointer; white-space: nowrap; }
.kf-magnet.an { color: #4EC9E9; }
.kf-magnet:hover { color: #e8ecef; }

/* Regler sichtbar machen (Philipp 20.08.: „das Größe-Teil fällt nicht auf,
   da weiß man oft nicht, was man damit machen kann"). Die Standarddarstellung
   von input[type=range] verschwindet im dunklen Layout fast völlig. */
.kf-rechts input[type=range], #kf-logo-auswahl input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 28px; background: none; cursor: grab; margin: 2px 0 6px; }
.kf-rechts input[type=range]:active, #kf-logo-auswahl input[type=range]:active { cursor: grabbing; }
.kf-rechts input[type=range]::-webkit-slider-runnable-track,
#kf-logo-auswahl input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px; background: #2a323b; border: 1px solid #3a424c; }
.kf-rechts input[type=range]::-moz-range-track,
#kf-logo-auswahl input[type=range]::-moz-range-track {
  height: 8px; border-radius: 999px; background: #2a323b; border: 1px solid #3a424c; }
.kf-rechts input[type=range]::-webkit-slider-thumb,
#kf-logo-auswahl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #4EC9E9; border: 2px solid #14161a; margin-top: -8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.kf-rechts input[type=range]::-moz-range-thumb,
#kf-logo-auswahl input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #4EC9E9;
  border: 2px solid #14161a; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* Aktueller Wert direkt am Beschriftungstext */
/* Der Wert neben dem Regler ist ein Knopf: antippen, Zahl eintippen, fertig
   (Philipp 20.08.). Sieht aus wie Text, verhaelt sich wie ein Eingabefeld. */
.kf-wert { float: right; color: #4EC9E9; font-weight: 800; letter-spacing: 0;
           text-transform: none; background: none; border: 0; padding: 0 2px;
           font: inherit; font-weight: 800; cursor: text; border-radius: 4px; }
.kf-wert:hover { background: rgba(78, 201, 233, .14); }
.kf-wert-feld { width: 4.5em; background: #10171d; color: #4EC9E9;
                border: 1px solid #4EC9E9; border-radius: 4px; padding: 1px 4px;
                font: inherit; font-weight: 800; text-align: right; }
/* Kundenansicht des Rechnungs-Reiters: nur die Liste, kein Formular. */
body.rolle-kunde #re-hinweis,
body.rolle-kunde #tab-rechnungen > label,
body.rolle-kunde #re-kunde, body.rolle-kunde #re-name, body.rolle-kunde #re-zusatz,
body.rolle-kunde #re-strasse, body.rolle-kunde .re-plz-ort,
body.rolle-kunde .re-daten, body.rolle-kunde #re-positionen,
body.rolle-kunde .re-fusszeile, body.rolle-kunde #re-erstellen,
body.rolle-kunde #re-status, body.rolle-kunde #re-liste .pk-finder {
  display: none !important;
}
/* Inhaber-Galerie: fremde Designs klar abgetrennt (21.08.2026) */
.kf-fremde-titel { margin: 26px 0 2px; font-size: 15px; letter-spacing: .4px;
                   color: #8b98a5; text-transform: uppercase; }
.kf-fremde-hinweis { margin: 0 0 10px; font-size: 12.5px; color: #5a646f; }

/* Der „+ Text"-Reiter ist ein Werkzeug, kein Bereich – deshalb abgesetzt */
#kf-text-plus { color: #4EC9E9; }

.kf-wert-feld::-webkit-outer-spin-button,
.kf-wert-feld::-webkit-inner-spin-button { margin: 0; }

/* Rueckmeldung direkt unter dem geklickten Knopf (21.08.2026) – siehe
   kfEinblenden. Kein Schweben: sie steht in der Spalte und schiebt kurz
   auf, damit sie im Blickfeld liegt, wo man gerade arbeitet. */
#kf-toast {
  margin: 8px 0 0; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  background: #14532d; color: #86efac; border: 1px solid #1f7a44;
  display: none;
}
#kf-toast.da { display: block; }
#kf-toast.fehler { background: #3a2023; color: #ff8d80; border-color: #6b3a38; }
/* Bereiche, unter denen eine Meldung erscheinen darf */
.kf-speichern-schnell, .kf-meldeplatz { position: relative; }

/* Speichern-Zeile direkt unter dem Board (21.08.2026) */
.kf-speichern-schnell { display: flex; gap: 8px; margin: 12px 0 0; }
.kf-speichern-schnell input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 9px;
  border: 1px solid #3a424c; background: #232a32; color: #e8ecef;
  font-size: 13px;
}
.kf-speichern-schnell button {
  padding: 9px 18px; border-radius: 9px; border: 0; cursor: pointer;
  background: #4EC9E9; color: #0e1116; font-weight: 800; font-size: 13px;
  white-space: nowrap;
}
.kf-speichern-schnell button:hover { background: #6fd6f0; }

/* „Login: guest" auf der Kundenkarte (21.08.2026) */
.kd-login { font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
            color: #ffb45c; border: 1px solid #6b4f2a; background: #2f2617;
            border-radius: 6px; padding: 2px 8px; white-space: nowrap; }

/* Proof endgültig löschen (Übersicht, nur Inhaber – 21.08.2026) */
.pk-finder.loesch { color: #ff8d80; border-color: #5a3b38; }
.pk-finder.loesch:hover { background: #3a2b2a; }

/* --- Staender im Konfigurator (DESIGN-18) --- */
/* Produktwahl (Seite 1): dieselben Karten wie die Galerie */
/* (Hoehe kommt jetzt vom festen Bildkasten in .kf-vorlage-bild) */
/* Luft wie beim Editor-Kopf (.kf-kopf): der Zurueck-Knopf sass sonst direkt
   auf der ersten Design-Karte (Philipp 25.08.: „fuehlt sich zu nah dran").
   Der Hinweistext bringt seinen eigenen Abstand mit - in der Flex-Zeile
   verschoebe der die Zeile gegen den Knopf, deshalb hier abgeraeumt. */
.kf-galerie-kopf { display: flex; align-items: center; gap: 14px;
                   margin-bottom: 18px; }
.kf-galerie-kopf .hinweistext { margin-bottom: 0; }
#kf-galerie-zurueck, #kf-groessen-zurueck { background: #2a323b; color: #e8ecef; border: none;
    border-radius: 10px; padding: 10px 16px; font-size: 14px;
    font-weight: 700; cursor: pointer; flex-shrink: 0; }
#kf-galerie-zurueck:hover, #kf-groessen-zurueck:hover { color: #4EC9E9; }

/* Board-Größen (DESIGN-20): Umrisse im gemeinsamen Maßstab, gestrichelt
   dahinter das größte Board als Vergleich */
#kf-galerie-groesse { color: #e8ecef; font-size: 14px; flex-shrink: 0; }
#kf-galerie-groesse:empty { display: none; }
.kf-groesse .kf-vorlage-bild svg { display: block; }
.kf-groesse-vergleich { fill: none; stroke: #3a424c; stroke-width: 3;
                        stroke-dasharray: 12 9; }
.kf-groesse-board { fill: #2a323b; stroke: #4EC9E9; stroke-width: 4; }
.kf-groesse:hover .kf-groesse-board { fill: #23404b; }
.kf-groesse text { fill: #e8ecef; font: 800 46px system-ui, sans-serif;
                   text-anchor: middle; dominant-baseline: central; }
.pk-groesse { display: inline-block; font-size: 11px; font-weight: 700;
              padding: 2px 8px; border-radius: 999px; background: #22343a;
              color: #4EC9E9; margin: 0 0 6px 4px; }

/* Ansichten-Umschalter im Editor-Kopf (nur Mehrflaechen-Produkte) */
#kf-ansichten { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#kf-ansichten.unsichtbar { display: none; }
#kf-ansichten button { background: #2a323b; border: none; color: #8b98a5;
    border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700;
    cursor: pointer; }
#kf-ansichten button:hover { color: #e8ecef; }
#kf-ansichten button.aktiv { color: #4EC9E9; box-shadow: inset 0 0 0 1px #4EC9E9; }
#kf-ansichten #kf-rueckseite { margin-left: 8px; }
#kf-getrennt-label { color: #8b98a5; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; gap: 6px; margin-left: 8px;
    cursor: pointer; user-select: none; }
#kf-getrennt-label.unsichtbar { display: none; }

/* Rueckseite ansehen: die Vorderseiten-Elemente uebernimmt der Spiegel,
   getrennte B-Elemente erscheinen NUR dort. Gilt auch fuer die
   Outline-Kopien (sie tragen die Seite ihres Elements mit).
   BEWUSST visibility statt display (25.08.2026): Der Spiegel setzt die
   Zwillinge ueber den GEMESSENEN Kasten des Originals - auf display:none
   misst sich das Original als 0x0, und die Rueckseite waere leer bzw.
   verrutscht. visibility haelt das Layout, blendet aber aus und nimmt die
   Elemente auch aus dem Klick-Test. */
#kf-svg.kf-zeige-b #kf-overlay > text:not([data-seite="b"]),
#kf-svg.kf-zeige-b #kf-overlay > image:not([data-seite="b"]),
#kf-svg.kf-zeige-b #kf-outline-ebene > *:not([data-seite="b"]) { visibility: hidden; }
#kf-svg:not(.kf-zeige-b) #kf-overlay > [data-seite="b"],
#kf-svg:not(.kf-zeige-b) #kf-outline-ebene > [data-seite="b"] { visibility: hidden; }

/* Die Rueckseite ist seit 27.08.2026 BEARBEITBAR: Man greift dort den
   Zwilling, gezogen wird das Original (kfZeigerRunter). Die alte Regel
   sperrte das Overlay komplett - "nur zum Ansehen". Philipp: "wenn man auf
   die gespiegelte seite geht kann man nichts mehr verschieben".
   Die Kulisse und die gespiegelte Vorlagen-Kopie duerfen keine Klicks
   abfangen, sonst liegt der Zwilling darunter und ist nicht greifbar. */
#kf-spiegel-vorlage, [data-kf-kulisse] { pointer-events: none; }

/* Blaetter-Pfeile neben der Vorschau (DESIGN-18, Backyard-Vorbild):
   Pfeil | Board | Pfeil, das Label darunter sagt, welche Ansicht laeuft */
#kf-buehne { display: flex; align-items: center; gap: 8px; }
#kf-buehne #kf-vorschau { flex: 1 1 auto; min-width: 0; }
.kf-blaettern { flex: 0 0 auto; background: #2a323b; border: none;
    color: #8b98a5; border-radius: 50%; width: 42px; height: 42px;
    font-size: 24px; line-height: 1; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 4px; }
.kf-blaettern:hover { color: #4EC9E9; background: #323b46; }
.kf-blaettern.unsichtbar { display: none; }
#kf-ansicht-label { text-align: center; color: #8b98a5; font-size: 13px;
    font-weight: 700; margin: 8px 0 2px; }
#kf-ansicht-label.unsichtbar { display: none; }

/* Vorschaubild-Auswahl im Ausgabe-Reiter (DESIGN-18) */
#kf-vorschau-ansicht { margin-bottom: 8px; }
#kf-vorschau-ansicht:disabled { opacity: .65; }
#kf-produktbild.aktiv { color: #4EC9E9; box-shadow: inset 0 0 0 1px #4EC9E9; }

/* Vorlagen nach Produkt gruppiert (25.08.2026) */
.vorlagen-gruppe { color: #8b98a5; font-size: 13px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    margin: 22px 0 10px; }
.vorlagen-gruppe:first-child { margin-top: 6px; }

/* Stornierte Rechnungen und Stornorechnungen (25.08.2026) */
.proof-karte.storniert { opacity: .55; }
.proof-karte.storniert .pk-name { text-decoration: line-through; }
.pk-storno { font-size: 12px; font-weight: 700; color: #ff8d80;
    padding: 2px 10px 0; }
.proof-karte.ist-storno .pk-storno { color: #4EC9E9; }



/* ---- Kundenkonto als GANZE Seite (25.08.2026, Vorbild Backyard) ----
   Solange sie offen ist, traegt der body .konto-seite: die Seitenleiste
   weicht und der Inhalt laeuft ueber die volle Breite. Zurueck geht es
   ueber den Knopf im Kopfbanner (Kunden sehen ihn nicht - fuer sie IST
   das Konto die Anwendung). */
body.konto-seite aside { display: none; }
body.konto-seite main { padding: 0; }
body.konto-seite main section.aktiv { max-width: none; margin: 0; }

#mk-kopf { position: relative; padding: 46px 40px 40px; text-align: center;
    background: radial-gradient(120% 140% at 50% 0%, #1d2b36 0%, #14161a 60%);
    border-bottom: 3px solid #4EC9E9; }
#mk-kopf h2 { margin: 0 0 10px; font-size: 40px; letter-spacing: 2px;
    font-weight: 900; font-style: italic; color: #ffffff; text-transform: uppercase; }
#mk-unter { margin: 0; color: #9fb0bd; font-size: 16px; }
#mk-zurueck { position: absolute; left: 22px; top: 22px;
    background: #2a323b; border: 1px solid #4EC9E9; color: #4EC9E9;
    border-radius: 10px; padding: 10px 16px; font-size: 14px;
    font-weight: 800; cursor: pointer; }
#mk-zurueck:hover { background: #4EC9E9; color: #14161a; }
#mk-zurueck.unsichtbar { display: none; }

#mk-nav { background: #1c2b36; border-bottom: 1px solid #0f1519; }
.mk-nav-innen { max-width: 1100px; margin: 0 auto; display: flex;
    flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 20px; }
#mk-nav button { background: none; border: none; color: #cfe0ea;
    padding: 16px 18px; font-size: 14px; font-weight: 800; cursor: pointer;
    letter-spacing: 1px; text-transform: uppercase; border-bottom: 3px solid transparent; }
#mk-nav button:hover { color: #ffffff; }
#mk-nav button.aktiv { color: #ffffff; border-bottom-color: #4EC9E9; }
#mk-nav #mk-abmelden { margin-left: auto; color: #ff9c92; }
#mk-nav button.unsichtbar { display: none; }

.mk-inhalt { max-width: 1100px; margin: 0 auto; padding: 30px 20px 70px; }
.mk-seite.unsichtbar { display: none; }
.mk-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
    align-items: start; }
@media (max-width: 900px) { .mk-spalten { grid-template-columns: 1fr; } }
.mk-inhalt h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900;
    font-style: italic; text-transform: uppercase; letter-spacing: 1px; }
.mk-block { background: #1a2026; border: 1px solid #3a424c; border-radius: 12px;
    padding: 18px 20px 22px; }
.mk-zeile { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
/* Knöpfe „Angaben speichern" / „Passwort ändern" (F-013, Tim 15.10.2026: „sehr
   klein und komisch angeordnet") – vorher ohne eigene Gestaltung, also der
   kleine weiße Standardknopf des Browsers direkt am letzten Feld. Jetzt wie
   die übrigen Hauptknöpfe des Studios. */
.mk-block button { display: block; margin-top: 18px; background: #4EC9E9; color: #14161a;
    border: none; border-radius: 10px; padding: 12px 22px; font-size: 14px;
    font-weight: 800; cursor: pointer; }
.mk-block button:hover { background: #6fd5ef; }
.mk-block button:disabled { opacity: .6; cursor: default; }
.mk-bestellung { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; background: #1a2026; border: 1px solid #3a424c;
    border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.mk-b-name { color: #e8ecef; font-size: 14px; font-weight: 700; }
.kf-design-text { flex: 1 1 auto; min-width: 0; }

/* Erfolgsmeldung auf der Kontoseite – sichtbar, nicht nur eine Textzeile */
#mk-meldung.gut { background: #14301f; border: 1px solid #2f7d4f;
    color: #86efac; border-radius: 10px; padding: 12px 14px;
    font-weight: 700; margin-bottom: 14px; }
#mk-meldung.fehler { background: #34211f; border: 1px solid #7d3a2f;
    color: #ffb3a7; border-radius: 10px; padding: 12px 14px;
    font-weight: 700; margin-bottom: 14px; }

/* Rand-Wahl im Konfigurator (23.09.2026): kein Rand / Rahmen / Ecken.
   Steht über der Farbliste, weil der Rand eine eigene Farbe mitbringt. */
.kf-randwahl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
               margin: 0 0 12px; }
.kf-randtitel { font-size: 13px; font-weight: 800; color: #e8ecef;
                margin-right: 4px; }
.kf-randwahl button { background: #171c22; border: 1px solid #2a323b;
                      border-radius: 10px; color: #8b98a5; padding: 8px 14px;
                      font-size: 13px; font-weight: 700; cursor: pointer; }
.kf-randwahl button:hover { color: #e8ecef; border-color: #3a424c; }
.kf-randwahl button.aktiv { color: #14161a; background: #4EC9E9;
                            border-color: #4EC9E9; }