/* ===================================================================
   Werkbank — die gemeinsame Oberfläche
   Paket P3b, Werkbank Kern 1.3.0

   Namespaced BEM, Präfix cw-. Mobil zuerst: die Grundregeln gelten für
   das Handy, die Erweiterungen für größere Schirme stehen darunter.

   Die Farben sind die Hausfarben aus den Konzeptdokumenten. Sie stehen
   hier an einer Stelle; wer sie ändert, ändert sie einmal.
   =================================================================== */

:root {
    --cw-blau:        #196297;
    --cw-blau-dunkel: #0f3f62;
    --cw-blau-hell:   #e8f1f8;
    --cw-rot:         #B3352B;
    --cw-rot-hell:    #FBE5E3;
    --cw-gruen:       #2E7D52;
    --cw-gruen-hell:  #E3F2E9;
    --cw-orange:      #D97B19;
    --cw-orange-hell: #FBF0DA;
    --cw-gold:        #D4A84B;
    /* Seit 1.11.0. Die Aufgabentafel braucht fünf unterscheidbare Farben für
       fünf Spalten; ohne diesen Ton trügen "Geplant" und "In Arbeit" dasselbe
       Blau. Der Wert ist aus derselben Sättigung und Helligkeit gebildet wie
       die vier Farben darüber und nicht aus einer zweiten Tafel entnommen. */
    --cw-violett:     #684294;

    --cw-text:        #253238;
    --cw-text-leise:  #5C6B75;
    --cw-text-still:  #8b98a1;
    --cw-rand:        #E1E5EA;
    --cw-flaeche:     #FFFFFF;
    --cw-grund:       #F7F9FB;

    --cw-radius:      10px;
    --cw-radius-s:    6px;
    --cw-schatten:    0 1px 2px rgba(15,63,98,.08), 0 4px 12px rgba(15,63,98,.06);
    --cw-schatten-gross: 0 10px 40px rgba(15,63,98,.18);
    --cw-schrift:     'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

.cw-body {
    margin: 0;
    background: var(--cw-grund);
    color: var(--cw-text);
    font-family: var(--cw-schrift);
    font-size: 16px;          /* 16px, damit iOS beim Tippen nicht zoomt */
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.cw-symbole { display: none; }

.cw-symbol {
    width: 20px; height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cw-symbol--klein { width: 16px; height: 16px; }

.cw-app { min-height: 100vh; display: flex; flex-direction: column; }

/* ===================================================================
   Kopfleiste
   =================================================================== */

.cw-kopf {
    background: linear-gradient(135deg, var(--cw-blau-dunkel) 0%, var(--cw-blau) 60%, #2a7ab4 100%);
    color: #fff;
    padding: 10px 12px 12px;
    position: sticky; top: 0; z-index: 30;
    padding-top: max(10px, env(safe-area-inset-top));
}
.cw-kopf__reihe { display: flex; align-items: center; gap: 10px; }

.cw-kopf__menue {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    border-radius: var(--cw-radius-s);
    padding: 7px;
    display: inline-flex;
    cursor: pointer;
}
.cw-kopf__menue:hover { background: rgba(255,255,255,.24); }

.cw-kopf__marke { display: flex; flex-direction: column; color: #fff; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.cw-kopf__titel { font-size: 1.05rem; font-weight: 700; letter-spacing: .2px; }
.cw-kopf__betrieb { font-size: .78rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cw-kopf__person { display: flex; align-items: center; gap: 8px; }

.cw-marke-schild {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    padding: 4px 11px;
    font-size: .78rem; font-weight: 600;
    color: #fff; text-decoration: none;
    cursor: pointer;
}
.cw-marke-schild:hover { background: rgba(255,255,255,.26); }
/* Das Rollenschild ist eine Anzeige, kein Knopf — es reagiert auf nichts. */
.cw-marke-schild--still { cursor: default; }
.cw-marke-schild--still:hover { background: rgba(255,255,255,.15); }

/* Suchfeld — die Wissensbasis erscheint nicht als Menüpunkt, sondern hier. */
.cw-suche { display: flex; align-items: center; gap: 8px; margin-top: 10px; background: #fff; border-radius: var(--cw-radius); padding: 4px 6px 4px 10px; }
.cw-suche__symbol { color: var(--cw-text-leise); }
.cw-suche__feld { flex: 1 1 auto; border: 0; outline: 0; font: inherit; font-size: 1rem; padding: 8px 2px; background: transparent; color: var(--cw-text); min-width: 0; }
.cw-suche__knopf { border: 0; background: var(--cw-blau); color: #fff; font: inherit; font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: var(--cw-radius-s); cursor: pointer; }
.cw-suche__knopf:hover { background: var(--cw-blau-dunkel); }

/* ===================================================================
   Menü
   =================================================================== */

.cw-menue {
    background: var(--cw-flaeche);
    border-bottom: 1px solid var(--cw-rand);
    padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; z-index: 25;
}
/* Diese Zeile ist nicht überflüssig: "display: flex" aus der Regel darüber
   schlägt die eingebaute Regel des Browsers für hidden — ohne sie ließe sich
   das Menü auf dem Handy nicht zuklappen. */
.cw-menue[hidden] { display: none; }
.cw-menue__eintrag {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px;
    border: 0; background: transparent;
    color: var(--cw-text); font: inherit; text-align: left;
    border-radius: var(--cw-radius-s);
    text-decoration: none; cursor: pointer;
}
.cw-menue__eintrag:hover { background: var(--cw-blau-hell); }
.cw-menue__eintrag--aktiv { background: var(--cw-blau-hell); color: var(--cw-blau-dunkel); font-weight: 600; }
.cw-menue__trenner { height: 1px; background: var(--cw-rand); margin: 5px 8px; }

/* Die Startseite, seit 1.16.0 -------------------------------------------

   Alle anderen Punkte sind offene Flächen, die sich erst beim Draufzeigen
   einfärben; dieser ist von Anfang an gefüllt. Der Punkt ist nicht größer
   und nicht bunter als die übrigen -- er ist nur zugehörig statt daneben.
   Die Startseite ist keine weitere Funktion, sondern die Übersicht über
   drei von ihnen. */
.cw-menue__eintrag--start {
    background: var(--cw-blau-hell);
    color: var(--cw-blau-dunkel);
    font-weight: 600;
}
.cw-menue__eintrag--start:hover { background: var(--cw-blau-hell); filter: brightness(.96); }
.cw-menue__luecke { height: 6px; }

/* Die Verwaltungsgruppe, seit 1.16.0 ------------------------------------

   Bis 1.15.0 standen die Verwaltungspunkte als flache Fortsetzung derselben
   Reihe -- auf einem breiten Schirm zwölf Punkte nebeneinander, täglich
   Gebrauchtes gleich laut wie einmal Eingerichtetes. Der 1 Pixel hohe
   Trenner dazwischen trennte in einer waagerechten Reihe fast nichts. */
.cw-menue__gruppe { display: flex; flex-direction: column; }
.cw-menue__pille { width: 100%; }
.cw-menue__pille .cw-symbol--klein { margin-left: auto; transition: transform .15s; }
.cw-menue__gruppe--offen > .cw-menue__pille .cw-symbol--klein { transform: rotate(180deg); }
.cw-menue__gruppe--offen > .cw-menue__pille { background: var(--cw-blau-hell); color: var(--cw-blau-dunkel); }
.cw-menue__klappe { display: none; }
.cw-menue__gruppe--offen > .cw-menue__klappe { display: block; }

/* Auskunftsliste und Schnipsel, seit 1.16.0 (Sitemap-Paket 3) -----------

   Die Chatbot-Ansicht zeigt Angaben, die man liest und nicht ändert:
   Kennzeichen, freigegebene Webseiten, geführte Gespräche. Ein
   Eingabefeld dafür wäre eine Lüge — man kann darin nichts eintragen.
   Deshalb eine Beschreibungsliste und keine Feldreihe. */
.cw-daten {
    display: grid; grid-template-columns: 1fr; gap: 2px 16px;
    margin: 0 0 12px;
}
.cw-daten dt { color: var(--cw-text-leise); font-size: .85rem; }
.cw-daten dd { margin: 0 0 10px; color: var(--cw-text); }
.cw-daten code, .cw-code {
    font-family: ui-monospace, 'Consolas', monospace;
    font-size: .9rem; color: var(--cw-blau-dunkel);
}
.cw-code {
    display: block; white-space: pre; overflow-x: auto;
    background: var(--cw-grund); border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 12px; margin: 0 0 12px;
}

/* ===================================================================
   Inhalt und Flächen
   =================================================================== */

.cw-inhalt { flex: 1 1 auto; padding: 14px 12px 40px; max-width: 1180px; margin: 0 auto; width: 100%; }
.cw-laedt { color: var(--cw-text-leise); padding: 24px 0; }

.cw-titel { font-size: 1.35rem; font-weight: 700; margin: 4px 0 14px; }
.cw-untertitel { color: var(--cw-text-leise); margin: -8px 0 16px; font-size: .92rem; }

.cw-flaeche {
    background: var(--cw-flaeche);
    border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius);
    box-shadow: var(--cw-schatten);
    margin-bottom: 14px;
    overflow: hidden;
}
.cw-flaeche__kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cw-rand);
}
.cw-flaeche__titel { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.cw-flaeche__leib { padding: 12px 14px; }
.cw-flaeche__leib--eng { padding: 0; }

.cw-raster { display: grid; gap: 14px; grid-template-columns: 1fr; }

/* ===================================================================
   Listen
   =================================================================== */

.cw-liste { list-style: none; margin: 0; padding: 0; }
.cw-liste__eintrag {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cw-rand);
    text-decoration: none; color: inherit;
    background: transparent; border-left: 0; border-right: 0; border-top: 0;
    width: 100%; text-align: left; font: inherit; cursor: pointer;
}
.cw-liste__eintrag:last-child { border-bottom: 0; }
.cw-liste__eintrag:hover { background: var(--cw-blau-hell); }
.cw-liste__haupt { flex: 1 1 auto; min-width: 0; }
.cw-liste__zeile1 { font-weight: 600; }
.cw-liste__zeile2 { font-size: .84rem; color: var(--cw-text-leise); margin-top: 2px; }

/* Kein leerer Zustand ohne Hinweis — jede leere Liste erklärt, wie sie sich füllt. */
.cw-leer { padding: 18px 14px; color: var(--cw-text-leise); font-size: .92rem; }
.cw-leer strong { display: block; color: var(--cw-text); font-size: .96rem; margin-bottom: 3px; }

/* ===================================================================
   Schaltflächen
   =================================================================== */

.cw-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--cw-rand);
    background: var(--cw-flaeche);
    color: var(--cw-text);
    font: inherit; font-size: .9rem; font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--cw-radius-s);
    cursor: pointer;
    min-height: 42px;              /* bequem mit dem Daumen zu treffen */
}
.cw-knopf:hover:not(:disabled) { border-color: var(--cw-blau); color: var(--cw-blau-dunkel); }
.cw-knopf--haupt { background: var(--cw-blau); border-color: var(--cw-blau); color: #fff; }
.cw-knopf--haupt:hover:not(:disabled) { background: var(--cw-blau-dunkel); border-color: var(--cw-blau-dunkel); color: #fff; }
.cw-knopf--gefahr { background: var(--cw-rot); border-color: var(--cw-rot); color: #fff; }
.cw-knopf--gefahr:hover:not(:disabled) { background: #8f2a22; border-color: #8f2a22; color: #fff; }
.cw-knopf--still { background: transparent; border-color: transparent; color: var(--cw-text-leise); }
.cw-knopf--still:hover { background: var(--cw-blau-hell); }
.cw-knopf--nur-symbol { padding: 8px; min-height: 0; }
.cw-knopf--klein { font-size: .82rem; padding: 6px 10px; min-height: 34px; }
.cw-knopf:disabled { opacity: .55; cursor: not-allowed; }

.cw-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ein gesperrter Knopf steht nie allein: daneben steht, warum. */
.cw-gesperrt { display: flex; flex-direction: column; gap: 6px; }
.cw-gesperrt__grund {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: .84rem; color: var(--cw-text-leise);
    background: var(--cw-grund);
    border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 8px 10px;
}
.cw-gesperrt__grund .cw-symbol { color: var(--cw-text-still); margin-top: 1px; }

/* ===================================================================
   Formularfelder
   =================================================================== */

.cw-feld { margin-bottom: 14px; }
.cw-feld__marke { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 5px; }
.cw-feld__hilfe { font-size: .8rem; color: var(--cw-text-leise); margin-top: 4px; }

.cw-eingabe, .cw-mehrzeilig, .cw-auswahl {
    width: 100%;
    border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 10px 12px;
    font: inherit; font-size: 1rem;
    background: var(--cw-flaeche);
    color: var(--cw-text);
}
.cw-eingabe:focus, .cw-mehrzeilig:focus, .cw-auswahl:focus {
    outline: 2px solid var(--cw-blau);
    outline-offset: -1px;
    border-color: var(--cw-blau);
}
.cw-mehrzeilig { resize: vertical; min-height: 96px; line-height: 1.5; }
.cw-eingabe--zahl { text-align: right; font-variant-numeric: tabular-nums; }
.cw-eingabe--schmal { max-width: 160px; }

/* Offene Preise sind rot. Der wichtigste visuelle Hinweis im ganzen Produkt. */
.cw-eingabe--offen, .cw-eingabe--offen:focus {
    border-color: var(--cw-rot);
    background: var(--cw-rot-hell);
    border-width: 2px;
}
.cw-offen-text { color: var(--cw-rot); font-weight: 700; }

/* Auswahlknöpfe statt Platzhaltersyntax */
.cw-wahl { display: grid; gap: 8px; }
.cw-wahl__eintrag {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 11px 12px;
    cursor: pointer;
    background: var(--cw-flaeche);
}
.cw-wahl__eintrag:hover { border-color: var(--cw-blau); }
.cw-wahl__eintrag--gewaehlt { border-color: var(--cw-blau); background: var(--cw-blau-hell); box-shadow: inset 0 0 0 1px var(--cw-blau); }
.cw-wahl__eintrag--aus { opacity: .7; cursor: default; }
.cw-wahl__eintrag--aus:hover { border-color: var(--cw-rand); }
.cw-wahl__text { flex: 1 1 auto; min-width: 0; }
/* Beispiel und Erläuterung stehen untereinander — nebeneinander liefen
   "2026-A0001" und "Jahr, dann laufende Nummer" ohne Lücke zusammen. */
.cw-wahl__beispiel, .cw-wahl__hinweis { display: block; }
.cw-wahl__beispiel { font-family: ui-monospace, 'Consolas', monospace; font-size: .95rem; font-weight: 700; color: var(--cw-blau-dunkel); margin-bottom: 2px; }
.cw-wahl__hinweis { font-size: .8rem; color: var(--cw-text-leise); line-height: 1.4; }

/* Schalter */
.cw-schalter { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-bottom: 1px solid var(--cw-rand); }
.cw-schalter:last-child { border-bottom: 0; }
.cw-schalter__text { flex: 1 1 auto; min-width: 0; }
.cw-schalter__frage { font-weight: 600; }
.cw-schalter__erklaerung { font-size: .85rem; color: var(--cw-text-leise); margin-top: 4px; }
.cw-schalter__abweichung { font-size: .78rem; color: var(--cw-orange); margin-top: 5px; font-weight: 600; }

.cw-kippe { position: relative; flex: 0 0 auto; width: 52px; height: 30px; }
.cw-kippe input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cw-kippe__bahn { position: absolute; inset: 0; background: #c3ccd4; border-radius: 15px; transition: background .15s ease; pointer-events: none; }
.cw-kippe__knauf { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; pointer-events: none; }
.cw-kippe input:checked ~ .cw-kippe__bahn { background: var(--cw-gruen); }
.cw-kippe input:checked ~ .cw-kippe__knauf { transform: translateX(22px); }
.cw-kippe input:focus-visible ~ .cw-kippe__bahn { outline: 2px solid var(--cw-blau); outline-offset: 2px; }
.cw-kippe input:disabled ~ .cw-kippe__bahn { opacity: .5; }

/* ===================================================================
   Positionen der Angebots-Arbeitsfläche
   =================================================================== */

.cw-pos { border-bottom: 1px solid var(--cw-rand); padding: 12px 14px; }
.cw-pos:last-child { border-bottom: 0; }
.cw-pos--gruppe { background: var(--cw-blau-hell); font-weight: 700; }
.cw-pos--zwischensumme { background: var(--cw-grund); font-weight: 600; }
.cw-pos--alternative { background: #fffdf7; }
.cw-pos__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cw-pos__nummer { font-variant-numeric: tabular-nums; color: var(--cw-text-leise); font-size: .85rem; min-width: 34px; }
.cw-pos__art { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--cw-text-still); }
.cw-pos__werkzeug { margin-left: auto; display: flex; gap: 4px; }
.cw-pos__zeile { display: grid; gap: 8px; grid-template-columns: 1fr; }
.cw-pos__mengen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cw-pos__geld { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.cw-pos__summe { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding: 10px 0; }

/* Woher kommt dieser Preis? */
.cw-herkunft {
    margin-top: 8px;
    background: var(--cw-grund);
    border: 1px dashed var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 8px 10px;
    font-size: .82rem;
    color: var(--cw-text-leise);
    display: flex; align-items: flex-start; gap: 7px;
}
.cw-herkunft--eingetragen { border-style: solid; border-color: var(--cw-gold); background: #FFF8ED; }
.cw-herkunft--offen { border-color: var(--cw-rot); background: var(--cw-rot-hell); color: #7d241d; }

/* ===================================================================
   Meldungen und Hinweise
   =================================================================== */

.cw-hinweis {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: var(--cw-radius-s);
    padding: 11px 13px;
    font-size: .9rem;
    margin-bottom: 12px;
    border: 1px solid var(--cw-rand);
    background: var(--cw-grund);
}
.cw-hinweis--warnung { background: var(--cw-orange-hell); border-color: #e6c68a; color: #7a4708; }
.cw-hinweis--fehler  { background: var(--cw-rot-hell);    border-color: #e6b2ad; color: #7d241d; }
.cw-hinweis--gut     { background: var(--cw-gruen-hell);  border-color: #a9d5bd; color: #1d5c3b; }
.cw-hinweis .cw-symbol { margin-top: 1px; }

.cw-marke {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 3px 10px;
    font-size: .75rem; font-weight: 700;
    background: var(--cw-grund); color: var(--cw-text-leise);
    border: 1px solid var(--cw-rand);
}
.cw-marke--entwurf { background: var(--cw-orange-hell); color: #7a4708; border-color: #e6c68a; }
.cw-marke--fertig  { background: var(--cw-gruen-hell);  color: #1d5c3b; border-color: #a9d5bd; }
.cw-marke--offen   { background: var(--cw-rot-hell);    color: #7d241d; border-color: #e6b2ad; }

/* Die Sichtbarkeitsstufe eines Wissenseintrags — seit 1.14.0.
   "Intern" ist die Vorgabe und bekommt keine Marke; sie stünde an jedem
   Eintrag und sagte nichts. Extern ist der Zustand, der Aufmerksamkeit
   verdient: Dieser Satz kann bei einem Fremden landen. */
.cw-stufe--extern      { background: var(--cw-orange-hell); color: #7a4708; border-color: #e6c68a; }
.cw-stufe--vertraulich { background: var(--cw-rot-hell);    color: #7d241d; border-color: #e6b2ad; }

/* Schlagworte als Filterleiste — seit 1.14.0 (Wissensbasis). */
.cw-schlagworte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cw-schlagwort {
    border: 1px solid var(--cw-rand);
    background: var(--cw-flaeche);
    color: var(--cw-text);
    border-radius: 20px;
    padding: 5px 12px;
    font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer;
}
.cw-schlagwort:hover { border-color: var(--cw-blau); }
.cw-schlagwort--gewaehlt {
    background: var(--cw-blau-hell);
    border-color: var(--cw-blau);
    color: var(--cw-blau-dunkel);
}

.cw-meldung {
    position: fixed; left: 12px; right: 12px; bottom: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 60;
    background: var(--cw-text); color: #fff;
    border-radius: var(--cw-radius);
    padding: 12px 15px;
    box-shadow: var(--cw-schatten-gross);
    font-size: .92rem;
}
.cw-meldung--fehler { background: var(--cw-rot); }
.cw-meldung--gut    { background: var(--cw-gruen); }

/* ===================================================================
   Änderungsverlauf — aufklappbar
   =================================================================== */

.cw-klapp { border: 1px solid var(--cw-rand); border-radius: var(--cw-radius-s); background: var(--cw-flaeche); margin-top: 10px; }
.cw-klapp__knopf {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: 0; font: inherit; font-weight: 600; font-size: .9rem;
    padding: 11px 12px; cursor: pointer; text-align: left; color: var(--cw-text);
}
.cw-klapp__pfeil { transition: transform .15s ease; margin-left: auto; }
.cw-klapp--auf .cw-klapp__pfeil { transform: rotate(180deg); }
.cw-klapp__leib { border-top: 1px solid var(--cw-rand); padding: 4px 0; }

.cw-verlauf { list-style: none; margin: 0; padding: 0; }
.cw-verlauf__zeile { padding: 9px 13px; border-bottom: 1px solid var(--cw-rand); font-size: .88rem; }
.cw-verlauf__zeile:last-child { border-bottom: 0; }
.cw-verlauf__wer { color: var(--cw-text-leise); font-size: .8rem; margin-top: 2px; }

/* ===================================================================
   Tabellen (Preisstamm)
   =================================================================== */

.cw-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cw-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.cw-tabelle th, .cw-tabelle td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--cw-rand); }
.cw-tabelle th { background: var(--cw-grund); font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; color: var(--cw-text-leise); white-space: nowrap; }
.cw-tabelle td.cw-rechts, .cw-tabelle th.cw-rechts { text-align: right; font-variant-numeric: tabular-nums; }
.cw-tabelle tr:last-child td { border-bottom: 0; }

.cw-reiter { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--cw-rand); overflow-x: auto; }
.cw-reiter__knopf {
    border: 1px solid transparent; border-bottom: 0; background: transparent;
    font: inherit; font-size: .88rem; font-weight: 600; color: var(--cw-text-leise);
    padding: 9px 14px; border-radius: var(--cw-radius-s) var(--cw-radius-s) 0 0;
    cursor: pointer; white-space: nowrap;
}
.cw-reiter__knopf--aktiv { background: var(--cw-flaeche); border-color: var(--cw-rand); color: var(--cw-blau-dunkel); margin-bottom: -1px; }

/* ===================================================================
   Dialog
   =================================================================== */

.cw-dialog { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.cw-dialog[hidden] { display: none; }
.cw-dialog__hinter { position: absolute; inset: 0; background: rgba(15,63,98,.45); }
.cw-dialog__kasten {
    position: relative;
    background: var(--cw-flaeche);
    border-radius: var(--cw-radius) var(--cw-radius) 0 0;
    width: 100%; max-width: 620px;
    max-height: 92vh; display: flex; flex-direction: column;
    box-shadow: var(--cw-schatten-gross);
}
.cw-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cw-rand); }
.cw-dialog__titel { font-size: 1.05rem; margin: 0; }
.cw-dialog__leib { padding: 15px 16px; overflow-y: auto; }
.cw-dialog__fuss { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cw-rand); }

/* ===================================================================
   Fußleiste
   =================================================================== */

.cw-fuss {
    padding: 14px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--cw-rand);
    color: var(--cw-text-still);
    font-size: .78rem;
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}

/* ===================================================================
   Größere Schirme
   =================================================================== */

@media (min-width: 700px) {
    .cw-inhalt { padding: 20px 20px 48px; }
    .cw-kopf { padding: 12px 20px 14px; }
    .cw-suche { max-width: 560px; }
    .cw-daten { grid-template-columns: 220px 1fr; }
    .cw-daten dt { padding-top: 2px; }
    .cw-daten dd { margin-bottom: 4px; }
    .cw-pos__zeile { grid-template-columns: 2fr 1fr; align-items: start; }
    .cw-pos__geld { grid-template-columns: 1fr 1fr; }
    .cw-dialog { align-items: center; }
    .cw-dialog__kasten { border-radius: var(--cw-radius); }
}

@media (min-width: 1000px) {
    .cw-app { flex-direction: column; }
    .cw-menue {
        display: flex !important;
        position: sticky; top: 0;
        flex-direction: row; flex-wrap: wrap; gap: 4px;
        padding: 6px 20px;
    }
    .cw-kopf__menue { display: none; }
    .cw-raster--zwei { grid-template-columns: 2fr 1fr; }
    .cw-raster--drei { grid-template-columns: 1fr 1fr 1fr; }

    /* Auf dem breiten Schirm ist die Lücke waagerecht, und die
       Verwaltungsgruppe klappt nach unten auf statt die Zeile zu verlängern.
       Der Kasten sitzt an der Gruppe und nicht am Menü: Die Zeile darf
       umbrechen, und ein an der Zeile befestigter Kasten stünde dann an der
       falschen Stelle. */
    .cw-menue__luecke { height: auto; width: 16px; }
    .cw-menue__gruppe { position: relative; margin-left: 16px; }
    .cw-menue__gruppe--offen > .cw-menue__klappe {
        position: absolute; top: calc(100% + 4px); left: 0;
        min-width: 230px; padding: 4px;
        background: var(--cw-flaeche);
        border: 1px solid var(--cw-rand);
        border-radius: var(--cw-radius);
        box-shadow: var(--cw-schatten);
        z-index: 30;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Nachrichtliche Preisanzeige und Archivseite (Paket P6) ------------- */

/* Bewusst dieselbe gestrichelte Umrandung wie die Herkunftszeile, aber
   kuehler eingefaerbt: Beides sind Auskuenfte ueber einen Preis und keine
   Eingabefelder. Wer sie fuer eine Eingabe haelt, sucht den Knopf zum
   Uebernehmen — und den gibt es aus gutem Grund nicht (Entscheidung A6). */
.cw-archivpreis {
    margin-top: 6px;
    background: var(--cw-grund);
    border: 1px dashed var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 8px 10px;
    font-size: .82rem;
    color: var(--cw-text-leise);
    display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap;
}
.cw-archivpreis__fussnote {
    display: block; width: 100%;
    font-style: normal; font-size: .76rem; opacity: .8;
    padding-left: 24px;
}

.cw-archivzahl { display: block; font-size: 1.6rem; line-height: 1.2; }

.cw-archivbericht {
    margin-top: 14px;
    border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius-s);
    padding: 12px 14px;
    background: var(--cw-grund);
    font-size: .88rem;
}

/* Vorschlag zur neuen Aufgabe (Paket P7) ---------------------------- */

/* Die Flaeche hebt sich vom Formular darueber ab, ohne sich als eigenes
   Fenster aufzuspielen: Sie gehoert zum Eingabefeld und ist ein Zwischen-
   schritt, kein neuer Ort. Der blaue Balken links sagt "das hier kommt
   nicht von Ihnen, das ist ein Vorschlag". */
.cw-vorschlag {
    margin-bottom: 14px;
    background: var(--cw-grund);
    border: 1px solid var(--cw-rand);
    border-left: 3px solid var(--cw-blau);
    border-radius: var(--cw-radius-s);
    padding: 12px 12px 14px;
}
.cw-vorschlag__titel {
    display: flex; align-items: center; gap: 8px;
    font-size: .95rem; font-weight: 700;
    margin: 0 0 12px;
}
.cw-vorschlag__titel .cw-symbol { color: var(--cw-blau); }

.cw-vorschlag__text { min-height: 76px; }

/* Ein offenes Feld ist rot — dieselbe Farbe wie ein offener Preis, weil es
   dasselbe bedeutet: hier fehlt noch etwas. Wer die Farbe hier aendert,
   bringt dem Bediener zwei Sprachen fuer eine Sache bei. */
.cw-vorschlag__feld--offen .cw-eingabe,
.cw-vorschlag__feld--offen .cw-auswahl,
.cw-vorschlag__feld--offen .cw-eingabe:focus,
.cw-vorschlag__feld--offen .cw-auswahl:focus {
    border-color: var(--cw-rot);
    background: var(--cw-rot-hell);
    border-width: 2px;
}

/* Die leise Zeile unter einem Feld: woher der Wert kommt. Sie soll gelesen
   werden koennen, aber nicht mit dem Feld selbst um Aufmerksamkeit ringen. */
.cw-vorschlag__herkunft {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 5px 0 0;
    font-size: .8rem; line-height: 1.4;
    color: var(--cw-text-leise);
}
.cw-vorschlag__herkunft--offen { color: var(--cw-rot); font-weight: 700; }
.cw-vorschlag__herkunft--offen .cw-symbol { color: var(--cw-rot); margin-top: 1px; }

.cw-vorschlag__roh {
    margin: 5px 0 0;
    font-size: .8rem; line-height: 1.4;
    color: var(--cw-text-leise);
}

/* Vier Schaltflaechen, die auf 390 Punkten umbrechen duerfen. Keine feste
   Reihe: abgeschnittene Knoepfe sind schlimmer als eine zweite Zeile. */
.cw-vorschlag__knoepfe {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px;
}
.cw-vorschlag__knoepfe .cw-knopf { flex: 0 1 auto; }

/* ===================================================================
   Paket P3c — Rückweg, Umschalter, Board, Personen, Suchvorschläge
   Werkbank Kern 1.10.0
   =================================================================== */

/* Der Weg zurück, über jeder Überschrift einer Unteransicht.
   Ein Verweis, keine Schaltfläche: Er führt zu einer Adresse. */
.cw-hinauf {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cw-text-leise); text-decoration: none;
    font-size: .88rem; margin-bottom: 10px;
}
.cw-hinauf:hover { color: var(--cw-blau); text-decoration: underline; }

/* Die Zeile "27 Einträge stehen bereit" über der Liste der Wissenskachel */
.cw-flaeche__stand {
    margin: 0; padding: 10px 14px;
    border-bottom: 1px solid var(--cw-rand);
    color: var(--cw-text-leise); font-size: .88rem;
}
.cw-flaeche__leib--fuss { border-top: 1px solid var(--cw-rand); }

.cw-fliesstext p { margin: 0 0 10px; line-height: 1.55; }
.cw-fliesstext p:last-child { margin-bottom: 0; }

/* Suchvorschläge unter dem Suchfeld ---------------------------------- */
.cw-suche { position: relative; }
.cw-suche__verlauf {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--cw-flaeche); border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius); box-shadow: var(--cw-schatten-gross);
    padding: 6px; max-height: 320px; overflow-y: auto;
}
.cw-suche__verlauf[hidden] { display: none; }
.cw-suche__verlauf-titel {
    margin: 4px 8px 6px; font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--cw-text-still);
}
.cw-suche__verlauf-wort {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 0; background: transparent; font: inherit; color: var(--cw-text);
    text-align: left; padding: 8px 8px; border-radius: var(--cw-radius-s); cursor: pointer;
}
.cw-suche__verlauf-wort:hover { background: var(--cw-blau-hell); }

/* Umschalter Liste / Board ------------------------------------------- */
.cw-umschalter { display: inline-flex; gap: 2px; margin-bottom: 14px;
    background: var(--cw-rand); padding: 2px; border-radius: var(--cw-radius-s); }
.cw-umschalter__knopf {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--cw-text-leise); padding: 7px 14px;
    border-radius: calc(var(--cw-radius-s) - 1px); cursor: pointer;
}
.cw-umschalter__knopf--aktiv { background: var(--cw-flaeche); color: var(--cw-blau); box-shadow: var(--cw-schatten); }

/* Listenzeile mit Knopf am Rand --------------------------------------- */
.cw-liste__paar { display: flex; align-items: stretch; border-bottom: 1px solid var(--cw-rand); }
.cw-liste__paar:last-child { border-bottom: 0; }
.cw-liste__paar > .cw-liste__eintrag { flex: 1 1 auto; border-bottom: 0; min-width: 0; }

.cw-haken, .cw-zeilenknopf {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; border: 0; border-left: 1px solid var(--cw-rand);
    background: transparent; color: var(--cw-text-still); cursor: pointer;
}
.cw-haken:hover:not(:disabled) { background: var(--cw-gruen-hell); color: var(--cw-gruen); }
.cw-haken:disabled { opacity: .5; cursor: default; }
.cw-zeilenknoepfe { display: flex; flex: 0 0 auto; }
.cw-zeilenknopf { width: 42px; }
.cw-zeilenknopf:hover { background: var(--cw-blau-hell); color: var(--cw-blau); }
.cw-zeilenknopf--gefahr:hover { background: var(--cw-rot-hell); color: var(--cw-rot); }

/* Die Werkzeugleiste über Liste und Board ------------------------------
   Vier Filter, der Umschalter und der CSV-Export. Mobil zuerst: die
   Filter stehen untereinander, ab 700 px zu zweit, ab 1000 px zu viert
   neben den Schaltflächen. */
.cw-werkzeugleiste {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--cw-flaeche); border: 1px solid var(--cw-rand);
    border-radius: var(--cw-radius); box-shadow: var(--cw-schatten);
    padding: 12px 14px; margin-bottom: 14px;
}
.cw-werkzeugleiste__filter { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cw-werkzeugleiste__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cw-werkzeugleiste .cw-umschalter { margin-bottom: 0; }

.cw-filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cw-filter__marke {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--cw-text-leise);
}
.cw-auswahl--klein { font-size: .88rem; padding: 7px 9px; min-height: 38px; }

@media (min-width: 700px) {
    .cw-werkzeugleiste__filter { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
    .cw-werkzeugleiste { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .cw-werkzeugleiste__filter { grid-template-columns: repeat(4, 1fr); flex: 1 1 auto; max-width: 720px; }
    .cw-werkzeugleiste__knoepfe { flex: 0 0 auto; }
}

/* Kennzeichen ----------------------------------------------------------
   Fünf Farben für die Spalte, drei für Dringlichkeit und Wichtigkeit.
   Alle stammen aus der Hausfarbtafel ganz oben. */
.cw-kennz {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: .76rem; font-weight: 700; white-space: nowrap; color: #fff;
}
.cw-kennz--offen     { background: var(--cw-text-leise); }
.cw-kennz--geplant   { background: var(--cw-blau); }
.cw-kennz--in-arbeit { background: var(--cw-violett); }
.cw-kennz--wartet    { background: var(--cw-orange); }
.cw-kennz--erledigt  { background: var(--cw-gruen); }
.cw-kennz--hoch      { background: var(--cw-rot); }
.cw-kennz--mittel    { background: var(--cw-gold); color: var(--cw-text); }
.cw-kennz--niedrig   { background: var(--cw-gruen); }

.cw-still { color: var(--cw-text-still); }
.cw-textknopf {
    border: 0; background: transparent; font: inherit; padding: 0;
    color: var(--cw-blau); text-decoration: underline; cursor: pointer;
}

/* Die Aufgabentabelle --------------------------------------------------
   Neun Spalten, dunkle Kopfzeile, acht davon sortierbar; die Spalte mit
   den Schaltflächen nicht, dort gäbe es nichts zu ordnen.

   Die Kartenform unter 768 px ist als Höchstbreite geschrieben und nicht
   wie sonst als Mindestbreite. Grund: Die Grundform dieser Ansicht IST
   die Tabelle — das Blatt darüber baut sie bereits. Die Karte ist die
   Ausnahme, und Ausnahmen gehören dorthin, wo sie gelten. */
.cw-tabelle--aufgaben { min-width: 800px; }
.cw-tabelle--aufgaben th.cw-tabelle__kopf {
    background: var(--cw-blau-dunkel); color: #fff;
    text-transform: none; letter-spacing: 0;
    font-size: .82rem; font-weight: 600;
    padding: 0 11px; height: 42px; border-bottom: 0;
}
.cw-sortknopf {
    display: inline-flex; align-items: center; gap: 5px;
    width: 100%; height: 42px; padding: 0;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: .82rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
}
.cw-sortknopf:hover { text-decoration: underline; }
.cw-sortknopf__pfeil { display: inline-flex; opacity: .45; transition: transform .2s, opacity .2s; }
.cw-sortknopf--aktiv .cw-sortknopf__pfeil { opacity: 1; }
.cw-sortknopf__pfeil--auf { transform: rotate(180deg); }

.cw-tabelle--aufgaben tbody tr:hover { background: var(--cw-blau-hell); }
.cw-tabelle__zeile--erledigt { opacity: .62; }
.cw-tabelle__id { font-variant-numeric: tabular-nums; color: var(--cw-text-leise); width: 56px; }
.cw-tabelle__aufgabe { min-width: 220px; }
.cw-tabelle__aufgabe a { color: var(--cw-text); font-weight: 600; text-decoration: none; }
.cw-tabelle__aufgabe a:hover { color: var(--cw-blau); text-decoration: underline; }
.cw-tabelle__aktionen { width: 60px; }
.cw-tabelle__aktionen .cw-haken {
    width: 38px; height: 34px; border-left: 0; border-radius: var(--cw-radius-s);
}
.cw-tabelle__nichts td { padding: 22px 11px; text-align: center; color: var(--cw-text-leise); }
.cw-tabelle__stand {
    margin: 0; padding: 9px 14px; border-top: 1px solid var(--cw-rand);
    font-size: .82rem; color: var(--cw-text-leise);
}

@media (max-width: 767px) {
    .cw-tabelle--aufgaben,
    .cw-tabelle--aufgaben tbody,
    .cw-tabelle--aufgaben tr,
    .cw-tabelle--aufgaben td { display: block; width: auto; }
    .cw-tabelle--aufgaben { min-width: 0; }
    .cw-tabelle--aufgaben thead { display: none; }
    /* Die Kennzeichnung muss die Regel darüber schlagen, sonst gewinnt
       "display: block" und die Spalte steht wieder da. */
    .cw-tabelle--aufgaben td.cw-nur-breit { display: none; }

    .cw-tabelle--aufgaben tbody tr {
        position: relative;
        padding: 12px 56px 12px 14px;
        border-bottom: 1px solid var(--cw-rand);
    }
    .cw-tabelle--aufgaben tbody tr:last-child { border-bottom: 0; }
    .cw-tabelle--aufgaben td { padding: 2px 0; border-bottom: 0; }
    .cw-tabelle--aufgaben td[data-marke]::before {
        content: attr(data-marke) ": ";
        color: var(--cw-text-leise); font-size: .82rem;
    }
    .cw-tabelle__aufgabe { min-width: 0; padding-bottom: 6px; font-size: 1rem; }
    .cw-tabelle__aktionen { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; }
    .cw-tabelle__nichts td { padding: 22px 14px; }
}

/* Das Board ------------------------------------------------------------
   Ein Raster, kein Nebeneinander: fünf Spalten am Rechner, drei BEI 1200 px
   und darunter, zwei BEI 768 px, eine BEI 480 px.

   Die Grenzen standen hier bis core 1.11.0 als "unter 1200", "unter 768",
   "unter 480" und waren damit um je ein Pixel verschoben beschrieben. Der Bau
   stimmte, die Beschreibung nicht. Am 19.08.2026 auf beiden Seiten jeder
   Grenze im Browser nachgemessen: 1201 px ergibt fünf Spalten, 1200 px drei;
   769 px drei, 768 px zwei; 481 px zwei, 480 px eine.

   NOCH EIN PIXEL, ABSICHTLICH SO GELASSEN: Board und Tabelle brechen nicht
   an derselben Stelle um. Bei genau 768 px zeigt das Board schon zwei
   Spalten, die Tabelle ist dort noch eine Tabelle und wird erst bei 767 px zu
   Karten. Das fällt im Betrieb niemandem auf und ist deshalb nicht angeglichen
   worden — die 18 gemessenen Fälle des Browserlaufs hingen an genau diesen
   Grenzen. Wer sie einmal gemeinsam bewegt, muss den Versatz kennen.

   Das Auswahlfeld je Karte bleibt bis 1000 px stehen. Es ist der Weg auf
   dem Handy, wo nicht gezogen werden kann; ab 1000 px wäre es der zweite
   Weg für dieselbe Sache und nähme jeder Karte 34 px Höhe weg. */
.cw-board { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cw-board__spalte {
    background: var(--cw-flaeche); border: 2px solid var(--cw-rand);
    border-radius: var(--cw-radius); box-shadow: var(--cw-schatten);
    display: flex; flex-direction: column; min-width: 0; min-height: 180px;
    transition: border-color .2s, background .2s;
}
.cw-board__spalte--ziel { border-color: var(--cw-blau); background: var(--cw-blau-hell); }
.cw-board__kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 2px solid var(--cw-rand);
}
.cw-board__titel { font-size: .95rem; font-weight: 700; margin: 0; }
.cw-board__fach { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 60px; }
.cw-board__leer { margin: 0; padding: 10px; color: var(--cw-text-still); font-size: .85rem; text-align: center; }
.cw-marke--zahl { background: var(--cw-blau); color: #fff; border-color: var(--cw-blau); }

.cw-karte {
    border: 2px solid var(--cw-rand); border-radius: var(--cw-radius-s);
    background: var(--cw-flaeche); padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
}
.cw-karte:hover { border-color: var(--cw-blau); box-shadow: var(--cw-schatten); }
.cw-karte--zieht { opacity: .45; transform: rotate(2deg); }
.cw-karte__text { font-weight: 600; color: var(--cw-text); text-decoration: none; line-height: 1.3; }
.cw-karte__text:hover { color: var(--cw-blau); text-decoration: underline; }
.cw-karte__merkmale { display: flex; flex-wrap: wrap; gap: 3px 10px; }
.cw-karte__merkmal {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .8rem; color: var(--cw-text-leise); min-width: 0;
}
.cw-karte__merkmal--eilig { color: var(--cw-rot); font-weight: 600; }
.cw-karte__kennzeichen { display: flex; flex-wrap: wrap; gap: 4px; }
.cw-karte__wahl { font-size: .85rem; padding: 6px 8px; }

@media (min-width: 481px)  { .cw-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 769px)  { .cw-board { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
    .cw-karte__wahl { display: none; }
    .cw-karte { cursor: grab; }
    .cw-karte:active { cursor: grabbing; }
}
@media (min-width: 1201px) { .cw-board { grid-template-columns: repeat(5, 1fr); } }

/* Das Projektlaufwerk ---------------------------------------------------
   Sitemap-Paket 1, Core 1.13.0. Eigene Bausteine gibt es nur dort, wo die
   vorhandenen nicht tragen: die Ablagefläche, die Warteschlange, der
   Fortschritt und der Speicherstand. Tabelle, Reiter, Werkzeugleiste,
   Knöpfe und Kennzeichen sind die bestehenden.
   ------------------------------------------------------------------- */

.cw-verborgen {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.cw-reiter--haupt { padding: 0; margin: 0 0 14px; border-bottom: 1px solid var(--cw-rand); }

.cw-speicher {
    display: flex; align-items: center; gap: 6px; margin: 0 0 12px;
    font-size: .85rem; color: var(--cw-text-leise);
}
.cw-speicher--warnung  { color: var(--cw-orange); font-weight: 600; }
.cw-speicher--kritisch { color: var(--cw-rot); font-weight: 600; }

.cw-ablage {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 22px 14px; margin-bottom: 14px;
    border: 2px dashed var(--cw-rand); border-radius: var(--cw-radius-s);
    background: var(--cw-grund); text-align: center;
}
.cw-ablage--ziel { border-color: var(--cw-blau); background: var(--cw-blau-hell); }
.cw-ablage__satz { margin: 0; font-weight: 600; color: var(--cw-blau); }
.cw-ablage__wahl { cursor: pointer; }
.cw-ablage__hinweis { margin: 0; font-size: .8rem; color: var(--cw-text-still); }

.cw-ablage__liste { list-style: none; margin: 0 0 8px; padding: 0; }
.cw-ablage__eintrag {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; font-size: .88rem;
    border: 1px solid var(--cw-rand); border-radius: var(--cw-radius-s); margin-bottom: 4px;
}
.cw-ablage__eintrag--abgelehnt { border-color: var(--cw-rot); background: var(--cw-rot-hell); }

.cw-fortschritt {
    height: 6px; border-radius: 3px; background: var(--cw-rand);
    overflow: hidden; margin-bottom: 10px;
}
.cw-fortschritt__balken { height: 100%; background: var(--cw-blau); transition: width .2s ease; }
.cw-fortschritt__satz { margin: 0 0 4px; font-size: .85rem; color: var(--cw-text-leise); }

.cw-tabelle--dateien { min-width: 700px; }
.cw-tabelle--dateien td:first-child { width: 34px; color: var(--cw-text-still); }
.cw-tabelle--dateien a { color: var(--cw-blau); text-decoration: none; }
.cw-tabelle--dateien a:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .cw-tabelle--dateien,
    .cw-tabelle--dateien tbody,
    .cw-tabelle--dateien tr,
    .cw-tabelle--dateien td { display: block; width: auto; }
    .cw-tabelle--dateien { min-width: 0; }
    .cw-tabelle--dateien thead { display: none; }
    .cw-tabelle--dateien td.cw-nur-breit { display: none; }
    .cw-tabelle--dateien td:first-child { display: none; }
    .cw-tabelle--dateien tbody tr {
        position: relative; padding: 12px 14px;
        border-bottom: 1px solid var(--cw-rand);
    }
    .cw-tabelle--dateien tbody tr:last-child { border-bottom: 0; }
    .cw-tabelle--dateien td { padding: 2px 0; border-bottom: 0; }
    .cw-tabelle--dateien td[data-marke]::before {
        content: attr(data-marke) ": ";
        color: var(--cw-text-leise); font-size: .82rem;
    }
    .cw-tabelle--dateien .cw-tabelle__aktionen { padding-top: 8px; }
}