/* ============================================================
   Prompt-Werkstatt – Stylesheet
   Modernes Dark-Theme (Standard) mit umschaltbarem Hell-Modus
   ============================================================ */

:root {
  --accent: #8b7cf6;
  --accent-2: #22d3ee;
  --radius: 14px;
  --radius-sm: 10px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

/* ---- Dark (Standard) ---- */
html[data-theme="dark"] {
  --bg: #0e0e12;
  --bg-glow: #17131f;
  --surface: #16161d;
  --surface-2: #1d1d26;
  --surface-3: #24242f;
  --border: #2a2a36;
  --border-strong: #3a3a48;
  --text: #ecebf1;
  --text-dim: #a3a1b0;
  --text-faint: #6f6d7d;
  --accent-soft: #271f47;
  --shadow: 0 18px 50px -20px rgba(0,0,0,.7);
  --good: #34d399; --warn: #fbbf24; --bad: #f87171; --info: #60a5fa;
}
/* ---- Hell ---- */
html[data-theme="light"] {
  --bg: #f6f5f3;
  --bg-glow: #efeaff;
  --surface: #ffffff;
  --surface-2: #f4f3f7;
  --surface-3: #ecebf1;
  --border: #e4e2ec;
  --border-strong: #d3d0de;
  --text: #1c1b22;
  --text-dim: #5f5d6b;
  --text-faint: #918fa0;
  --accent-soft: #ece8ff;
  --shadow: 0 18px 40px -24px rgba(60,40,120,.35);
  --good: #059669; --warn: #b45309; --bad: #dc2626; --info: #2563eb;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 600px at 80% -10%, var(--bg-glow), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--accent-soft), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Helles Design: ruhiger, neutraler Hintergrund statt des violetten Schleiers */
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 600px at 85% -10%, #eef2f8, transparent 60%),
    radial-gradient(1000px 520px at -10% 110%, #f2f5fa, transparent 55%),
    #fafbfc;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--accent); color: #fff; }
[x-cloak] { display: none !important; }

/* ---- Layout ---- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
/* Abdunkler hinter der mobilen Sidebar */
.scrim { display: none; }
.sidebar {
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  scrollbar-width: none; -ms-overflow-style: none;   /* Scrollbar ausblenden, Scrollen bleibt moeglich */
}
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.brand { display:flex; align-items:center; gap:10px; padding: 6px 10px 16px; }
.brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
  box-shadow: 0 6px 18px -6px var(--accent);
}
.brand b { font-family: var(--font-display); font-size: 15px; }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 14px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; transition: background .15s, color .15s; font-size: 13.5px;
}
.nav-item .ti { font-size: 18px; }
@media (hover:hover){ .nav-item:hover { background: var(--surface-2); color: var(--text); } }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item .count { margin-left: auto; font-size: 11px; background: var(--surface-3); color: var(--text-dim); padding: 1px 8px; border-radius: 8px; }
.nav-item.active .count { background: var(--accent); color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.main { min-width: 0; width: 100%; max-width: none; padding: clamp(16px, 2vw, 30px) clamp(16px, 2.6vw, 40px) 96px; }
.topbar { display:flex; align-items:center; gap: 14px; margin-bottom: 18px; }
.page-title { font-size: 21px; }

/* ---- Schnellerfassung ---- */
.capture {
  display:flex; align-items:flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; box-shadow: var(--shadow);
}
.capture:focus-within { border-color: var(--accent); }
.capture .ti-microphone { color: var(--accent); font-size: 20px; padding-top: 2px; }
.capture input { flex:1; background:none; border:none; color: var(--text); font-size: 14px; outline: none; }
.capture input::placeholder { color: var(--text-faint); }
/* Erfassungsfeld: mehrzeilig, waechst nach unten, bricht um (kein Horizontal-Scroll) */
.capture textarea { flex:1; min-width:0; background:none; border:none; color: var(--text); font-size: 14px; line-height: 1.5; font-family: inherit; outline: none; resize: none; overflow-y: auto; max-height: 40vh; padding: 2px 0; transition: min-height .18s ease; }
.capture textarea::placeholder { color: var(--text-faint); }
.capture .btn, .capture .chip { margin-top: 1px; }
/* Erfassung: Reihen-Wrapper am Desktop transparent (eine Zeile wie bisher); mobil = zwei Reihen (s.u.) */
.cap-row1, .cap-row2 { display: contents; }
.rec-ind { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-pulse { animation: recpulse 1s infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Buttons & Inputs ---- */
.btn {
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm);
  padding: 8px 13px; font-size: 13px; cursor: pointer; transition: all .15s;
}
@media (hover:hover){ .btn:hover { border-color: var(--accent); transform: translateY(-1px); } }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #6d5ee0); color: #fff; border: none;
  box-shadow: 0 8px 22px -10px var(--accent);
}
@media (hover:hover){ .btn-primary:hover { filter: brightness(1.08); } }
.btn-ghost { background: none; border: none; color: var(--text-dim); padding: 7px; border-radius: 8px; cursor:pointer; }
@media (hover:hover){ .btn-ghost:hover { background: var(--surface-2); color: var(--text); } }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Segment-Buttons (ersetzen Dropdowns: ein Klick, sofort sichtbar) */
.seg { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.seg-btn { display:inline-flex; align-items:center; gap:7px; font-size: 12.5px; cursor:pointer; background: var(--surface-2); color: var(--text-dim); border:1px solid var(--border); border-radius: 9px; padding: 6px 12px; transition: all .14s; }
@media (hover:hover){ .seg-btn:hover { color: var(--text); border-color: var(--border-strong); } }
.seg-btn.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
input[type=text], input[type=email], input[type=password], textarea, select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13.5px; font-family: inherit; outline: none; width: 100%;
  transition: border-color .15s;
}
@media (hover:hover){ input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover, select:hover { border-color: var(--border-strong); } }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
select { cursor: pointer; }
/* Klickbare Auswahlkaestchen + zugehoerige Labels */
input[type=checkbox], input[type=radio] { cursor: pointer; transition: transform .12s; }
@media (hover:hover){ input[type=checkbox]:hover, input[type=radio]:hover { transform: scale(1.18); } }
label:has(input[type=checkbox]), label:has(input[type=radio]) { transition: color .15s; }
@media (hover:hover){ label:has(input[type=checkbox]):hover, label:has(input[type=radio]):hover { color: var(--accent); } }
label.fld { display:block; font-size: 12px; color: var(--text-dim); margin: 12px 0 5px; }
textarea { resize: vertical; line-height: 1.6; }
textarea.code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 13px; }

/* ---- Chips & Filter ---- */
.chips { display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.chip {
  display:inline-flex; align-items:center; gap:6px; font-size: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--text-dim); border:1px solid transparent;
  border-radius: 9px; padding: 5px 11px; transition: all .15s;
}
@media (hover:hover){ .chip:hover { color: var(--text); } }
.chip.on { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.tint-preview { display:inline-flex; align-items:center; justify-content:center; min-width: 96px; height: 34px; border:1px solid var(--border); border-radius: 9px; font-size: 11px; color: var(--text-dim); }
.chip-x { cursor:pointer; opacity:.7; display:inline-block; transition: opacity .15s, color .15s, transform .12s; }
@media (hover:hover){ .chip-x:hover { opacity: 1; color: var(--accent); transform: scale(1.25); } }
.badge { font-size: 11px; padding: 2px 9px; border-radius: 8px; font-weight: 500; white-space: nowrap; }
/* Klickbares Status-Badge im Karten-Kopf */
.card-head .badge { transition: filter .15s, transform .12s, box-shadow .15s; }
@media (hover:hover){ .card-head .badge:hover { filter: brightness(1.18); transform: translateY(-1px); box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); } }
/* Status-Badge immer zeigen: es ist nicht nur Anzeige, sondern der UMSCHALTER
   (Tipp/Klick wechselt In Bearbeitung <-> Abgeschlossen) - gerade in gefilterten
   Listen der schnellste Weg, einen Prompt abzuschliessen. */
.st-inbox { background: var(--surface-3); color: var(--text-dim); }
.st-entwurf { background: rgba(251,191,36,.16); color: var(--warn); }
.st-fertig { background: rgba(52,211,153,.16); color: var(--good); }
.st-abgeschlossen, .st-getestet { background: rgba(52,211,153,.16); color: var(--good); }
.st-archiviert { background: var(--surface-3); color: var(--text-faint); }
.tag { display:inline-flex; align-items:center; font-size: 11px; background: var(--surface-2); color: var(--text-dim); padding: 2px 9px; border-radius: 8px; border:1px solid var(--border); white-space: nowrap; }
.tag .dot { width: 7px; height: 7px; margin-right: 5px; }
/* Projekt-Zuordnung auf der Karte (Ansicht "Alle Prompts"): deutlich abgesetztes Pill mit Ordner-Symbol */
.projtag { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11.5px; font-weight:600; line-height:1; padding:3px 10px; border-radius:999px; white-space:nowrap; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--border));
  background: color-mix(in srgb, var(--pc, var(--accent)) 16%, var(--surface)); color: var(--text); }
.projtag i { color: var(--pc, var(--accent)); font-size:13px; }
.projtag-inbox { --pc: var(--text-faint); }
.card-tags { display:inline-flex; align-items:center; gap: 6px; min-width: 0; }
/* Kopf-Tags bei zugeklappter Karte: Klick entfernt den Tag (oeffnet die Karte nicht) */
.card-tags .tag-rm { cursor: pointer; transition: border-color .14s, color .14s, opacity .14s; }
@media (hover:hover){ .card-tags .tag-rm:hover { border-color: var(--bad); color: var(--bad); } }

/* ---- Prompt-Karten ---- */
/* Bewusst immer EINE Spalte – uebersichtliche Liste, auch auf grossen Schirmen */
.cards { display:flex; flex-direction: column; gap: 7px; }
/* Gruppen-Ueberschrift bei Sortierung "Nach Tags" */
.cards-group-h { display:flex; align-items:center; gap: 8px; margin: 16px 2px 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.cards-group-h:first-child { margin-top: 2px; }
.cards-group-h .dot { width: 9px; height: 9px; }
.cards-group-h i { font-size: 15px; color: var(--text-faint); }
.cards-group-n { margin-left: 4px; font-weight: 600; color: var(--text-faint); background: var(--surface-2); border-radius: 8px; padding: 1px 8px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.list-head { display: flex; align-items: center; gap: 14px; margin: 0 0 10px 2px; }
.list-count { font-size: 12px; color: var(--text-faint); }
.selall { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; -webkit-user-select: none; user-select: none; }
.selall input { cursor: pointer; margin: 0; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin: 0 0 9px 2px; display:flex; align-items:center; gap: 6px; }
.filter-sep { margin-top: 30px; border-top: 1px solid var(--border); }
/* ---- Filterbereich (Desktop: immer offen, eine Zeile Status links / Sortierung rechts + Tags darunter;
   Handy: einklappbar mit beschrifteten Gruppen) ---- */
.filterbar-toggle { cursor: default; }
.filterbar-chev, .filterbar-badge, .fgroup-h { display: none; }   /* Desktop: kein Chevron/Badge/Gruppenlabel */
.frow { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fgroup .chips { margin: 0; }
.card {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--cardbg, var(--surface));
  overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .12s;
}
/* Linke Steuerspalten, beide vertikal zentriert (nicht oben haengend) */
.card-grip { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; padding-left: 4px; color: var(--text-faint); cursor: grab; font-size: 18px; border-radius: 8px; transition: color .15s; touch-action: none; }
.card-grip i { transition: transform .15s ease; }
/* statt Hintergrund: Icon vergroessern -> signalisiert, dass die ganze Zelle anfasst */
@media (hover:hover){ .card-grip:hover { color: var(--text); } }
@media (hover:hover){ .card-grip:hover i { transform: scale(1.35); } }
.card-grip:active { cursor: grabbing; }
@media (max-width: 720px) { .card-grip { width: 40px; font-size: 21px; } }
.card-sel { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; cursor: pointer; }
.card-sel .row-sel { cursor: pointer; margin: 0; pointer-events: none; transition: transform .15s ease; }   /* ganze Zelle (Label) faengt Klicks ab */
/* statt Hintergrund: Kaestchen vergroessern -> signalisiert Klickbarkeit der ganzen Zelle */
@media (hover:hover){ .card-sel:hover .row-sel { transform: scale(1.3); } }
.card-main { flex: 1; min-width: 0; }
/* Farbstreifen in der Projektfarbe (--proj wird je Karte gesetzt; Inbox = keiner) */
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--proj, transparent); z-index:1; }
@media (hover:hover){ .card:hover { border-color: var(--border-strong); } }
.card.open { border-color: var(--accent); box-shadow: var(--shadow); }
/* angepinnt -> per Flex-Reihenfolge nach oben (nicht in der Tag-Gruppierung, sonst risse es Karten aus ihrer Gruppe) */
.cards:not([data-sort="tags"]) .card.pinned { order: -1; }
/* angepinnt deutlich hervorheben (Desktop + Handy): Rahmen + Ring in der Projektfarbe (--proj), Fallback Akzent (Inbox/ohne Projekt) */
.card.pinned { border-color: var(--proj, var(--accent)); box-shadow: 0 0 0 1px var(--proj, var(--accent)), 0 4px 14px color-mix(in srgb, var(--proj, var(--accent)) 16%, transparent); }
/* Eck-Pin oben rechts: mobil ein Tipp-Schalter zum An-/Abpinnen (Desktop nutzt den Kopf-Pin).
   Standard versteckt; nur mobil bei zugeklappter Karte sichtbar. */
.card-pinmark { position: absolute; top: 0; right: 0; z-index: 3; display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: none; background: none; color: var(--text-faint); border-bottom-left-radius: 14px;
  font-size: 17px; cursor: pointer; }
/* nicht angepinnt: klarer Umriss in kontrastsicherer Kartenfarbe (gut sichtbar auch auf getoenten Karten) */
.card:not(.pinned) .card-pinmark { color: var(--cardtext, var(--text-dim)); opacity: .85; }
.card.pinned .card-pinmark { color: #fff; background: var(--proj, var(--accent)); }   /* angepinnt: gefuelltes Badge in Projektfarbe */
@media (max-width: 760px) { .card:not(.open) .card-pinmark { display: flex; } }        /* mobil: immer tippbar (An-/Abpinnen) */
.card.open .card-pinmark { display: none; }                                /* im Vollbild-Editor aus */
/* Gruppe "Angepinnt": Ueberschrift per Flex-Order ueber die gepinnten Karten (order:-1);
   nur sichtbar, solange wirklich eine Karte angepinnt ist (sofortiges Ein-/Ausblenden via :has) */
.pin-group-h { order: -2; }
.pin-group-h i { color: var(--accent); }
.cards:not(:has(.card.pinned)) .pin-group-h { display: none; }
/* etwas Luft zwischen angepinnten und uebrigen Karten -> Trennung wird offensichtlich
   (erste nicht angepinnte Karte, die direkt auf eine angepinnte folgt; nicht in der Tag-Gruppierung) */
.cards:not([data-sort="tags"]) .card.pinned + .card:not(.pinned) { margin-top: 22px; }
/* Platzhalter: pulsierender, gestrichelter Akzent-Slot (wohin die Karte faellt) */
.card.sortable-ghost { background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: var(--radius); animation: ghostpulse 1.1s ease-in-out infinite; }
.card.sortable-ghost > * { visibility: hidden; }
@keyframes ghostpulse {
  0%, 100% { border-color: var(--accent); background: var(--accent-soft); }
  50%      { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
}
/* schwebende Karte unter Finger/Cursor: angehoben, vergroessert, Akzent-Glow.
   scale/rotate sind eigene Properties -> stoeren Sortables translate NICHT.
   rotate steuert JS geschwindigkeitsabhaengig (Tilt in Bewegungsrichtung). */
.card.sortable-drag {
  opacity: 1 !important;
  scale: 1.04;
  border-color: var(--accent);
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 2px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
  cursor: grabbing;
  z-index: 9999;
  will-change: transform, scale, rotate;
  transition: scale .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease;
}
.card.sortable-chosen { box-shadow: 0 0 0 2px var(--accent); }
/* Multi-Drag: per Auswahl-Kaestchen markierte Karten (SortableJS MultiDrag selectedClass).
   Dezenter Akzentrahmen zeigt die Auswahl; ziehst du eine davon am Greifer, kommen alle
   markierten Karten live mit (das Plugin faltet sie waehrend des Ziehens zusammen). */
.card.cpm-msel { box-shadow: 0 0 0 2px var(--accent); }
/* Multi-Drag: das schwebende (gefaltete) Drag-Bild bekommt angedeutete, versetzte
   Kartenkanten DAHINTER -> sichtbar, dass mehrere Karten zusammen gezogen werden.
   Umgesetzt ueber gestapelte Box-Schatten (werden hinter dem Karten-Hintergrund gemalt,
   gucken nur versetzt hervor). Nur optisch, kein Zaehler. Trigger: data-dragstack. */
.card.sortable-drag[data-dragstack] {
  overflow: visible;   /* sonst klippt .card{overflow:hidden} das Badge/den Stapel-Ueberstand */
  box-shadow:
    6px 6px 0 0 var(--surface), 6px 6px 0 1px var(--accent),       /* erste Karte dahinter */
    13px 13px 0 0 var(--surface), 13px 13px 0 1px var(--accent),   /* zweite Karte dahinter */
    0 30px 60px rgba(0,0,0,.45), 0 0 0 2px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Zaehler-Badge (runder Kreis, oben rechts) – Anzahl steckt in data-dragstack */
.card.sortable-drag[data-dragstack]::after {
  content: attr(data-dragstack);
  position: absolute; top: -12px; left: -12px;
  min-width: 28px; height: 28px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 2px var(--surface);
  z-index: 5; pointer-events: none;
}
/* Abgelegte Karte gleitet vom Loslass-Punkt (--fx/--fy) sichtbar an ihren Platz - ohne Bounce */
@keyframes cardGlide {
  from { transform: translate(var(--fx,0), var(--fy,0)) scale(1.04); }
  to   { transform: translate(0px, 0px) scale(1); }
}
body.is-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
/* (entfernt) Das Abdunkeln/Schrumpfen der anderen Karten beim Ziehen verschob deren
   linke Kante nach rechts (scale um die Mitte) -> war urspruenglich nicht so. */
.card-head { position: relative; display:flex; align-items:center; gap: 11px; padding: 5px 15px 6px; cursor: pointer; transition: background .15s; border-bottom: 1px solid transparent; }
@media (hover:hover){ .card-head:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); } }
@media (hover:hover){ .card-head:hover .chev { color: var(--text-dim); } }
/* dezente Trennlinie nur zugeklappt; 1px ist immer reserviert (border transparent) -> beim
   Aufklappen kein Sprung. Abstaende sind in beiden Zustaenden identisch (Text bleibt an Ort) */
.card:not(.open) .card-head { border-bottom-color: var(--border); }
/* Beim Aufklappen: Toenung bleibt erhalten (zeigt die Priorisierung); die Textfarbe
   wird per --cardtext kontrastsicher gewaehlt (siehe cardText() in app.js). */
.card.open { background: linear-gradient(90deg, var(--accent-soft), transparent 60%) left top / 100% var(--toph, 46px) no-repeat, var(--cardbg, var(--surface)); }
/* "Nur linker Streifen": kein Flaechen-Verlauf; linker Balken zeigt den Tag-Verlauf
   (vertikal), bei fehlenden Tags die Projektfarbe. */
html[data-cardtint="links"] .card { background: var(--surface); }
html[data-cardtint="links"] .card.open { background: linear-gradient(90deg, var(--accent-soft), transparent 60%) left top / 100% var(--toph, 46px) no-repeat, var(--surface); }
html[data-cardtint="links"] .card::before { width: 8px; background: var(--cardbar, var(--proj, transparent)); }
html[data-cardtint="links"] .card-grip { padding-left: 12px; }
/* Ganzflaechige Toenung ("voll"): Text auf der Toenung bekommt die kontrastsichere
   Farbe (--cardtext). Nur hier, weil im "links"-Modus der Text auf neutralem Grund liegt.
   Bedienelemente (eigener Hintergrund) bleiben bei ihren Standardfarben. */
html[data-cardtint="voll"] .card-edit { color: var(--cardtext, var(--text)); }
html[data-cardtint="voll"] .card-render { color: var(--cardtext, var(--text)); }
/* Aufgeklappt liegt der Editor in einem neutralen Rahmen -> normale Textfarbe */
html[data-cardtint="voll"] .card.open .card-edit { color: var(--text); }
html[data-cardtint="voll"] .card.open .card-render { color: var(--text); }   /* beim Bearbeiten neutraler Grund -> normale Textfarbe */
html[data-cardtint="voll"] .card.open .cardsec-h { color: var(--cardtext, var(--text-faint)); }
html[data-cardtint="voll"] .card.open .cardsec .fld { color: var(--cardtext, var(--text-dim)); opacity: .82; }
html[data-cardtint="voll"] .card.open .editor-hint { color: var(--cardtext, var(--text-faint)); opacity: .85; }
/* Versionsanzeige (v1 …) bei getoenten Karten kontrastsicher statt blass */
html[data-cardtint="voll"] .card-meta { color: var(--cardtext, var(--text-faint)); opacity: .68; }
/* Kopf-Icons (Tag/Projekt/Kopieren/Pin/Chevron) ebenso kontrastsicher; :where() haelt
   die Spezifitaet niedrig, damit Hover/aktiv-Zustaende weiter gewinnen */
html[data-cardtint="voll"] :where(.card-ico, .card-pin, .chev) { color: var(--cardtext, var(--text-faint)); opacity: .72; }
.grip { color: var(--text-faint); cursor: grab; font-size: 18px; }
.grip:active { cursor: grabbing; }
.card-title { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.open .card-title { white-space: normal; }
.card-meta { font-size: 12px; color: var(--text-faint); }
.card-metawrap { display: contents; }   /* Desktop: transparent (Version+Schrift bleiben im Kopf); mobil absolut (s.u.) */
.chev { color: var(--text-faint); transition: transform .2s; }
.card.open .chev { transform: rotate(180deg); }
.card-pin { color: var(--text-faint); background:none; border:none; cursor:pointer; font-size: 17px; padding: 3px; transition: color .15s, transform .12s, background .15s; }
@media (hover:hover){ .card-pin:hover { color: var(--accent); transform: scale(1.15); } }
/* Angepinnt: groessere, vollfarbige, abgesetzte Stecknadel (weisse gefuellte Nadel auf Badge in Projektfarbe, Fallback Akzent) */
.card-pin.on { color: #fff; opacity: 1; background: var(--proj, var(--accent)); border-radius: 999px; font-size: 20px;
  width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--proj, var(--accent)) 45%, transparent); }
@media (hover:hover){ .card-pin.on:hover { color: #fff; transform: scale(1.12); } }
.card-ico { color: var(--text-faint); background:none; border:none; cursor:pointer; font-size: 16px; padding: 3px; transition: color .15s, transform .12s; }
@media (hover:hover){ .card-ico:hover:not(:disabled) { color: var(--accent); transform: scale(1.18); } }
.card-ico:disabled { opacity: .35; cursor: default; }
@media (hover:hover){ .card-ico:disabled:hover { color: var(--text-faint); } }
/* Schriftgroessen-Pille: kompakt, animiert, faerbt sich bei != 100% in Akzent */
.fontpill { display: inline-flex; align-items: center; gap: 1px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: 999px; padding: 2px; cursor: default; transition: border-color .2s, background .2s, box-shadow .2s; }
@media (hover:hover){ .fontpill:hover { border-color: var(--border-strong); } }
.fontpill.active { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); box-shadow: 0 0 0 1px var(--accent) inset, 0 2px 12px -3px color-mix(in srgb, var(--accent) 60%, transparent); }
.fontpill button { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border: none; background: none; color: var(--text-dim); cursor: pointer; border-radius: 999px; font-size: 14px; transition: transform .14s cubic-bezier(0.34,1.56,0.64,1), background .15s, color .15s, box-shadow .15s; }
/* Hover-Fuellung nur auf echten Hover-Geraeten (Maus) -> auf Touch kein "kleben bleibendes" Hervorheben */
@media (hover: hover) {
  .fontpill button:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent), #6d5ee0); color: #fff; transform: scale(1.2); box-shadow: 0 3px 10px -2px var(--accent); }
}
.fontpill button:active:not(:disabled) { transform: scale(.8); background: linear-gradient(135deg, var(--accent), #6d5ee0); color: #fff; }
.fontpill button:disabled { opacity: .3; cursor: default; }
.fontpill .pct { min-width: 32px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; transition: transform .2s cubic-bezier(0.34,1.56,0.64,1), color .15s, text-shadow .15s; }
.fontpill.active .pct { color: var(--accent); }
.fontpill .pct.bump { transform: scale(1.5); color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 75%, transparent); }
/* Immer sichtbarer Inhalt in der Uebersicht (Klick oeffnet den Editor) */
.card-preview { padding: 2px 16px 15px 15px; cursor: pointer; color: var(--text); }
.card-preview > :first-child { margin-top: 0; }
/* Inline-Editierfeld in der Karte (immer sichtbar, waechst mit) */
/* Zugeklappte Karte: gerenderte Markdown-Ansicht (formatiert, klickbar zum Oeffnen) */
.card-render { padding: 8px 16px 7px 15px; font-family: var(--font-body); font-size: var(--cardfont, 14px); line-height: 1.5; color: var(--text); cursor: text; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.card-render:empty::before { content: "Prompt-Text…"; color: var(--text-faint); }
/* Beim Bearbeiten: neutraler, lesbarer Untergrund OHNE Layout-Verschiebung
   (nur Hintergrund/innerer Rahmen, gleiche Maße -> Text/Cursor springen nicht) */
.card.open .card-render { background: var(--surface); border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border); min-height: 110px; }
.card.open .card-render:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.card-render > :first-child { margin-top: 0; }
.card-render > :last-child { margin-bottom: 0; }
.card-render h2 { font-family: var(--font-display); font-size: 1.16em; font-weight: 700; margin: 9px 0 3px; }
.card-render h3 { font-family: var(--font-display); font-size: 1.07em; font-weight: 700; margin: 8px 0 3px; }
.card-render h4 { font-size: 1em; font-weight: 700; margin: 6px 0 2px; }
.card-render ul { margin: 4px 0; padding-left: 20px; }
.card-render li { margin: 1px 0; }
.card-render blockquote { margin: 5px 0; padding: 2px 0 2px 11px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.card-render code { background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; font-size: .9em; }
.card-render a { color: var(--accent); text-decoration: underline; }
.card-render strong { font-weight: 700; }
.card-render .mdsp { height: 7px; }
.card-edit { display:block; width:100%; box-sizing:border-box; border:none; background:none; resize:none; overflow:hidden; margin:0; padding: 0 16px 5px 15px; font-family: var(--font-body); font-size: var(--cardfont, 14px); line-height: 1.45; color: var(--text); }
.card-edit::placeholder { color: var(--text-faint); }
.card-edit:focus { outline: none; }
/* Werkzeugleiste unter dem Text (im aufgeklappten Zustand) */
/* Werkzeugleiste: ueberlagert den Kopf ueber dem Feld; absolut -> Text springt nicht.
   Morpht beim Bearbeiten ein (opacity + leichtes Hochschieben). */
.cb-toolbar { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  opacity: 0; transform: translateY(3px) scale(.98); transform-origin: left center; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease; }
.cb-toolbar.on { opacity: 1; transform: none; }
/* Leere Leistenbereiche lassen Klicks zur Kopfzeile durch (= Karte schliessen); nur Knoepfe fangen ab */
.cb-toolbar.on .fmt-btn, .cb-toolbar.on .cb-done { pointer-events: auto; }
.cb-toolbar.on .tagtoggle { pointer-events: auto; }
/* Tag-Zuweisung in der Werkzeugleiste (gleiche Hoehe wie die Formatierknoepfe) */
.cb-tags { display: inline-flex; align-items: center; gap: 5px; flex: none; padding-left: 4px; }
.cb-tags-ico { color: var(--text-faint); font-size: 15px; flex: none; }
/* Tag-Toggle: zugewiesen = farbig gefuellt (.on), Klick togglet; kein x */
.tagtoggle { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: background .14s, color .14s, border-color .14s; }
.tagtoggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--text-faint)); }
@media (hover:hover){ .tagtoggle:hover { color: var(--text); border-color: var(--tc, var(--border-strong)); } }
.tagtoggle.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 22%, var(--surface)); color: var(--text); font-weight: 600; }
.tagtoggle-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
/* Echter Morph: vorhandene Kopf-Steuerelemente blenden weg, waehrend die Leiste einblendet
   (gleicher Platz, Karte springt nicht) */
.card-head > :not(.cb-toolbar) { transition: opacity .2s ease, transform .2s ease; }
.card.open .card-head > :not(.cb-toolbar) { opacity: 0; transform: scale(.94); pointer-events: none; }
.cb-toolbar::-webkit-scrollbar { height: 0; }
.cb-toolbar .cb-sep { flex: none; }
.cb-toolbar .fmt-btn { flex: none; }
/* Baustein-Knopf mit Aufklapp-Menue in der Leiste */
.cb-bs { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 26px; border-radius: 7px; color: var(--text-dim); cursor: pointer; font-size: 15px; transition: background .14s, color .14s; }
@media (hover:hover){ .cb-bs:hover { background: var(--surface); color: var(--accent); } }
.cb-bs-menu { position: absolute; top: 120%; left: 0; z-index: 20; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; width: 240px; max-width: 70vw; box-shadow: var(--shadow); white-space: normal; }
.cb-bs-item { padding: 7px 9px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12.5px; }
@media (hover:hover){ .cb-bs-item:hover { background: var(--surface-2); } }
.cb-save { flex: none; display: inline-flex; align-items: center; color: var(--text-faint); font-size: 15px; margin: 0 2px; }
.cb-save.saving { color: var(--warn); }
.cb-save.saved { color: var(--good); }
.cb-done { flex: none; }
/* Werkzeug-Zeile unter dem Feld (Baustein/Verlauf/Auswahl) */
.cb-tools { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0 12px; }
.cb-tools .tool { font-size: 12px; }
.cb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
/* Markdown-Formatierleiste (kompakte Icon-Gruppe) */
.cb-fmt { display:inline-flex; align-items:center; gap: 1px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.fmt-btn { display:inline-flex; align-items:center; justify-content:center; width: 27px; height: 26px; border: none; background: none; color: var(--text-dim); cursor: pointer; border-radius: 7px; font-size: 15px; transition: background .14s, color .14s, transform .12s; }
@media (hover:hover){ .fmt-btn:hover { background: var(--surface); color: var(--accent); transform: scale(1.12); } }
.fmt-btn:active { transform: scale(.9); }
/* WYSIWYG-Editor-Container (Toast UI) */
.cb-wys { margin: 8px 15px 0; }
.cb-wys .toastui-editor-defaultUI { border-radius: 11px; }
.tool:disabled { opacity: .4; cursor: default; }
@media (hover:hover){ .tool:disabled:hover { color: var(--text-dim); border-color: var(--border); transform: none; } }
.tool.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.card.open .card-edit { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; box-sizing: border-box; width: calc(100% - 30px); margin: 8px 15px 0; padding: 12px 14px; min-height: 150px; transition: border-color .15s; }
.card.open .card-edit:focus { border-color: var(--accent); }
.card.open .editor-hint { padding: 0 15px; margin-top: 7px; }
.cb-history { margin: 9px 15px 0; }
.sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; }
.card-body { border-top: 1px solid var(--border); padding: 6px 15px 14px; }
/* Klar gegliederte Abschnitte im aufgeklappten Zustand */
.cardsec { padding: 14px 0; border-top: 1px solid var(--border); }
.cardsec:first-child { border-top: none; }
.cardsec-h { display:flex; align-items:center; gap: 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-faint); margin-bottom: 11px; }
.cardsec-h i { font-size: 14px; color: var(--accent); }
.field + .field { margin-top: 13px; }
.cardsec .fld { margin: 0 0 6px; font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 13px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
/* Aktionsleiste unten: primaere Aktion links, destruktive rechts abgesetzt */
.card-actions { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--border); }
@media (hover:hover){ .card-actions .danger:hover { color: var(--bad); border-color: var(--bad); } }
.toolbar { display:flex; align-items:center; gap: 7px; flex-wrap: wrap; }
.tool { display:inline-flex; align-items:center; gap:6px; font-size: 12px; color: var(--text-dim); background: var(--surface-2); border:1px solid var(--border); border-radius: 9px; padding: 6px 10px; cursor:pointer; transition: all .15s; }
@media (hover:hover){ .tool:hover { color: var(--text); border-color: var(--accent); } }
.sep { width:1px; height: 18px; background: var(--border); }
.editor { width:100%; min-height: 140px; }
.editor-hint { display:flex; align-items:flex-start; gap: 5px; font-size: 11px; color: var(--text-faint); margin-top: 9px; }
.editor-hint code { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 4px; font-family: ui-monospace, monospace; font-size: .95em; }
.save-state { display:inline-flex; align-items:center; gap:6px; font-size: 12px; color: var(--text-faint); }
.save-state.saving { color: var(--warn); }
.save-state.saved { color: var(--good); }
.save-ind { font-size: 11px; white-space: nowrap; transition: opacity .2s; }
.save-ind.saving { color: var(--warn); }
.save-ind.saved { color: var(--good); }

.card-body, .card-title { overflow-wrap: anywhere; }

/* ---- Tag-Editor (Chips) ---- */
/* Tag-Schnellzugriff: native Popover-API + sanfte Einblendung (@starting-style) */
.tagbtn { color: var(--text-faint); }
@media (hover:hover){ .tagbtn:hover { color: var(--accent); } }
.tagpop {
  position: fixed; margin: 0; inset: auto; width: 290px; max-width: 92vw;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow); padding: 12px;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .15s ease, transform .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
}
.tagpop:popover-open { opacity: 1; transform: none; }
@starting-style { .tagpop:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
.tagpop::backdrop { background: transparent; }
/* Projekt-Zuweisung im Popover (gleicher Stil wie Tags) */
.projpop { width: 230px; }
/* Tag-Schnellanlage im Popover */
.tagnew { width: 100%; box-sizing: border-box; margin-bottom: 9px; padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; outline: none; }
.tagnew:focus { border-color: var(--accent); }
.popsep { height: 1px; background: var(--border); margin: 6px 2px; }
.popitem.danger { color: var(--bad); }
.popitem.danger i { color: var(--bad); }
.poplist { display: flex; flex-direction: column; gap: 2px; }
.popitem { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; color: var(--text); font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
@media (hover:hover){ .popitem:hover { background: var(--surface-2); } }
.popitem.on { background: var(--accent-soft); }
.popitem .dot { width: 10px; height: 10px; flex: none; }
/* Aufklapp-Panel (z.B. Stapelaktion "In Projekt verschieben") - tippbare Auswahl statt Dropdown */
.popmenu { position: absolute; top: 120%; left: 0; z-index: 30; min-width: 210px; max-height: 50vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 6px; box-shadow: var(--shadow); }
/* Versions-Diff (Gegenueberstellung der Aenderungen) */
/* Diff-Box (in der Versions-Gegenueberstellung) */
.diff { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; max-height: 340px; overflow: auto; }
.difftitle { margin-bottom: 6px; }
/* Versions-Gegenueberstellung (zwei frei waehlbare Fassungen) */
.vcmp-bar { display:flex; align-items:center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 12.5px; }
.vcmp-result:not(:empty) { margin: 4px 0 12px; }
.vcmp-pick { flex: none; display:inline-flex; align-items:center; justify-content:center; cursor: pointer; }
.vcmp-pick input { cursor: pointer; margin: 0; }
.vcompare { display:flex; gap: 12px; align-items: flex-start; }
.vcompare-side { flex: 1 1 0; min-width: 0; }
.vcompare-h { font-size: 12px; margin-bottom: 6px; display:flex; align-items:center; gap: 5px; }
.vcompare-h i { color: var(--accent); font-size: 13px; }
@media (max-width: 640px) { .vcompare { flex-direction: column; } }
.diff ins { background: color-mix(in srgb, var(--good) 26%, transparent); color: var(--text); text-decoration: none; border-radius: 3px; }
.diff del { background: color-mix(in srgb, var(--bad) 24%, transparent); color: var(--text); text-decoration: line-through; border-radius: 3px; }
/* Import-Vorschau: voller Text mit Umbruch, Scroll bei sehr langem */
.imp-prev { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; max-height: 150px; overflow: auto; }
/* Import-Raster (Excel-artige Vorschau) */
.imp-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.imp-table th, .imp-table td { border: 1px solid var(--border); padding: 6px 9px; text-align: left; vertical-align: top; max-width: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }
.imp-table th { background: var(--surface-2); font-weight: 600; }
.imp-table td { cursor: pointer; }
.imp-table .selcol { background: var(--accent-soft); }

/* ---- Farbwähler (Swatches statt Hex-Codes) ---- */
.swatch-pick { width: 24px; height: 24px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: transform .12s; }
@media (hover:hover){ .swatch-pick:hover { transform: scale(1.12); } }
.swatch-pick.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }

/* ---- Formular-Raster (stapelt auf kleinen Schirmen) ---- */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.preview pre { background: var(--surface-2); border:1px solid var(--border); border-radius: 8px; padding: 10px; overflow:auto; }
.preview code { background: var(--surface-2); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }

/* Versionsverlauf */
.versions { margin-top: 12px; border-top:1px solid var(--border); padding-top: 10px; }
.vitem { display:flex; align-items:center; gap: 10px; padding: 6px 2px; font-size: 12.5px; }
.vitem .vd { width:8px; height:8px; border-radius:50%; border:1px solid var(--border-strong); }
.vitem.cur .vd { background: var(--accent); border-color: var(--accent); }

/* ---- Projektkacheln ---- */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tile { border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 16px; cursor:pointer; transition: all .16s; }
@media (hover:hover){ .tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } }
.tile-add { border-style: dashed; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color: var(--text-faint); min-height: 104px; }

/* ---- Stapelaktionen ---- */
.bulkbar { display:flex; align-items:center; gap: 14px; background: var(--accent-soft); border:1px solid var(--accent); border-radius: var(--radius-sm); padding: 9px 14px; margin: 10px 0; }
.bulkbar .act { display:inline-flex; align-items:center; gap:6px; font-size: 12.5px; cursor:pointer; color: var(--text); }
.act { transition: color .15s; }
@media (hover:hover){ .act:hover { color: var(--accent); } }
/* Mausover-Effekte fuer restliche klickbare Elemente (Mindeststandard) */
.capture .ti-microphone { display: inline-block; transition: color .15s, transform .12s; }
@media (hover:hover){ .capture .ti-microphone:hover { color: var(--accent); transform: scale(1.18); } }
.linkact { transition: color .15s; }
@media (hover:hover){ .linkact:hover { color: var(--accent); } }
.pickopt { transition: background .14s, color .14s; }
@media (hover:hover){ .pickopt:hover { background: var(--surface-2); color: var(--text); } }
input[type="color"] { transition: border-color .15s, transform .12s; }
@media (hover:hover){ input[type="color"]:hover { border-color: var(--border-strong); transform: scale(1.05); } }

/* ---- Suche ---- */
.searchbox { display:flex; align-items:center; gap: 10px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 11px 14px; box-shadow: var(--shadow); }
.searchbox input { background:none; border:none; flex:1; font-size: 15px; color: var(--text); outline:none; }
.hl { background: rgba(251,191,36,.22); color: var(--warn); border-radius: 3px; padding: 0 2px; }
.result { display:flex; gap: 11px; padding: 12px 13px; border:1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor:pointer; transition: all .14s; }
@media (hover:hover){ .result:hover { border-color: var(--accent); background: var(--surface); } }

/* ---- Tabellen/Listen ---- */
.list-row { display:flex; align-items:center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 5px; }

/* ---- Login & schmale Karten ---- */
.center-screen { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 20px; }
.auth-card { width: 360px; max-width: 100%; background: var(--surface); border:1px solid var(--border); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.panel { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.panel h3 { font-size: 15px; margin-bottom: 6px; }
.muted { color: var(--text-dim); font-size: 13px; }
.faint { color: var(--text-faint); font-size: 12px; }

/* ---- Flash ---- */
.flash { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; border:1px solid var(--border); }
.flash.info { background: var(--accent-soft); border-color: var(--accent); }
.flash.error { background: rgba(248,113,113,.14); border-color: var(--bad); color: var(--bad); }
.flash.success { background: rgba(52,211,153,.14); border-color: var(--good); color: var(--good); }

/* ---- Modal ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index: 50; padding: 20px; }
.modal { background: var(--surface); border:1px solid var(--border-strong); border-radius: 16px; padding: 22px; width: 440px; max-width: 100%; box-shadow: var(--shadow); }

/* ---- Auswahl-Popover (Baustein speichern) ---- */
.sel-pop { position: absolute; z-index: 40; background: var(--surface); border:1px solid var(--accent); border-radius: 10px; padding: 7px; box-shadow: var(--shadow); }

/* ---- Animationen ---- */
@keyframes fadeup { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.cards > .card, .grid > .tile, .result { animation: fadeup .28s ease both; }
.cards > .card:nth-child(2){animation-delay:.03s}.cards > .card:nth-child(3){animation-delay:.06s}
.cards > .card:nth-child(4){animation-delay:.09s}.cards > .card:nth-child(5){animation-delay:.12s}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Responsiv / Mobil ---- */
.menu-btn { display:none; }
.m-editbar { display: none; }           /* mobile Formatleiste: nur Handy + offene Karte (s.u.) */
.projtag-m { display: none; }           /* Projekt-Pill in Projekt-/Inbox-Listen: nur mobil */
.fab { display: none; }                 /* Schnell-Erfassen-Knopf nur mobil (s.u.) */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* Schwebender Schnell-Erfassen-Knopf */
  .fab { display: inline-flex; align-items: center; justify-content: center; position: fixed;
    right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; color: #fff;
    font-size: 26px; background: linear-gradient(135deg, var(--accent), #6d5ee0);
    box-shadow: 0 10px 24px -6px var(--accent); }
  .fab:active { transform: scale(.94); }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 30; width: 248px; max-width: 84vw; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); background: var(--surface);
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); }
  .sidebar.open { transform: none; }
  .menu-btn { display: inline-flex; }
  /* Safe-Area (iOS Notch / Home-Indicator) */
  .main { padding: 16px calc(16px + env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 29; }
  .capture { flex-wrap: wrap; }
  /* Erfassungsfeld mobil: einzeilig solange NICHT fokussiert (ueberschreibt autogrow-Inline-Hoehe),
     beim Reinklicken aufziehen */
  .capture textarea:not(:focus) { height: 42px !important; min-height: 42px; overflow: hidden; }
  .capture textarea:focus { min-height: 110px; }
  /* Mobil: zwei Reihen. Reihe 1 = Textfeld ueber volle Breite (Mikro davor); Reihe 2 = Projektauswahl + "Hinzufuegen". */
  .cap-row1 { display: flex; flex: 1 1 100%; align-items: center; gap: 10px; min-width: 0; }
  .cap-row2 { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; }
  .cap-row1 textarea { flex: 1; min-width: 0; }
  .cap-row2 .chip { margin-top: 0; }
  .cap-row2 .btn-primary { margin-left: auto; }   /* "Hinzufuegen" rechts */
  /* Reihe 2 nur zeigen, wenn fokussiert ODER Text vorhanden (.cap-on) -> erscheint beim Reinklicken;
     bleibt sichtbar/tippbar solange man tippt (wichtig wg. iOS: Buttons bekommen beim Tap keinen Fokus). */
  .capture:not(:focus-within):not(.cap-on) .cap-row2 { display: none; }
  /* Filter mobil: einklappbar (Standard zu) + beschriftete Gruppen untereinander */
  .filterbar-toggle { cursor: pointer; }
  .filterbar-chev { display: inline-block; margin-left: auto; transition: transform .2s; font-size: 17px; }
  .filterbar.open .filterbar-chev { transform: rotate(180deg); }
  .filterbar-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
  .filterbar:not(.open) .filterbar-body { display: none; }
  .fgroup-h { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 12px 2px 5px; }
  .frow { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 0; }
  .filterbar { margin-bottom: 18px; }   /* Abstand zur Liste / "Alle auswaehlen" */
  .vcompare { flex-direction: column; gap: 16px; }   /* Versionsvergleich mobil untereinander statt nebeneinander */
  .bulkbar { flex-wrap: wrap; gap: 10px; }
  .bulkbar form { flex-wrap: wrap; }
  .list-row { flex-wrap: wrap; }
  .toolbar { gap: 6px; }

  /* Touch-Ziele: sicher tippbare Mindestgroessen (~44px) */
  .card-ico, .card-pin { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .btn-ghost { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .btn-sm { padding: 10px 14px; font-size: 13px; }
  .nav-item { padding: 12px; }
  .fontpill button { width: 36px; height: 36px; font-size: 17px; }
  .fontpill .pct { min-width: 42px; font-size: 13px; }
  .fmt-btn { width: 40px; height: 38px; font-size: 17px; }
  .badge { padding: 7px 12px; font-size: 12px; }

  /* Schlanke Karte: selten genutzte Aktions-Icons raus; tippbar bleiben Tag-Knopf (+Tag) und
     Kopieren (in der oberen Leiste). Version (card-meta) und Schrift-Pille bleiben sichtbar. */
  .card-head .card-ico, .card-head .card-pin { display: none; }
  .card-head .card-ico.tagbtn:not(.projbtn) { display: inline-flex; width: 34px; height: 30px; font-size: 17px; }
  .card-metawrap .card-ico.card-copy { display: inline-flex; width: 30px; height: 30px; font-size: 16px; }

  /* ===== "Du bekommst was du siehst": Die Karte sieht offen (= bearbeiten) EXAKT aus wie in
     der Liste - kein Vollbild, kein Umbau, nichts verrutscht. Die Struktur-Regeln gelten daher
     fuer ZU UND OFFEN gleichermassen; nur die Textkuerzung haengt am Zustand. ===== */

  /* Kopf mobil: Status oben links, Tags darunter ueber volle Breite. */
  .card .card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .card .card-head .hspace { display: none; }
  .card .card-head .chev { display: none; }
  .card .card-head .badge { order: -1; }
  .projtag-m { display: inline-flex; }   /* Projekt-Pill mobil in JEDER Liste (Zuweisung per Tipp) */
  .card .card-head .projtag { order: -1; align-self: flex-end; }   /* oben bleiben, aber rechtsbuendig */
  .card .card-tags { width: 100%; flex-wrap: wrap; row-gap: 4px; }

  /* card-head static -> der absolute Metawrap bezieht sich auf die KARTE (obere Leiste). */
  .card .card-head { position: static; }
  /* Schrift-Pille + Version + Kopieren auf Hoehe des Eck-Pins, links daneben */
  .card .card-metawrap { position: absolute; top: 0; right: 42px; z-index: 4;
    height: 34px; display: flex; align-items: center; gap: 8px; }
  .card .card-metawrap .fontpill { padding: 1px; }
  .card .card-metawrap .fontpill button { width: 24px; height: 24px; font-size: 14px; }
  .card .card-metawrap .fontpill .pct { min-width: 30px; font-size: 11px; }
  /* Version tippbar (oeffnet den Verlauf unter der Karte) */
  .card .card-vbtn { padding: 6px 4px; cursor: pointer; }

  /* Greifer + Auswahlkaestchen mobil als schmale Leiste OBEN (Kopfbereich) statt voller linker Spalten
     -> Inhalt (card-main) nutzt die volle Breite. DOM-Reihenfolge bleibt (Greifer vor Kaestchen). */
  .card { flex-wrap: wrap; align-items: center; }
  .card > .card-grip { order: 1; width: 40px; height: 38px; }
  .card > .card-sel  { order: 2; width: 40px; height: 38px; }
  .card > .card-main { order: 3; flex: 1 1 100%; min-width: 0; }

  /* Lange Vorschau zugeklappt auf ~5 Zeilen kuerzen; sanftes Ausblenden nur, wenn wirklich abgeschnitten.
     Beim Bearbeiten (offen) klappt der Text nur NACH UNTEN voll aus - die angetippte Stelle bleibt stehen. */
  .card:not(.open) .card-render { max-height: 7.6em; overflow: hidden; }
  .card:not(.open) .card-render.is-clamped { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }

  /* ===== Offene Karte (bearbeiten): gleiche Optik wie zu - nur dezenter Akzentrahmen.
     Saemtliche Desktop-Morphs (Kopf wird Werkzeugleiste, Editor-Kasten, Aufklapp-Panel) aus. ===== */
  .card.open { background: var(--cardbg, var(--surface)); }                       /* kein Akzent-Verlauf oben */
  .card.open .card-head > :not(.cb-toolbar) { opacity: 1; transform: none; pointer-events: auto; }
  .card .cb-toolbar { display: none; }                                            /* Formatleiste kommt unten (m-editbar) */
  .card.open .card-render { background: none; box-shadow: none; border-radius: 0; min-height: 0; }
  .card.open .card-body { display: none !important; }                             /* kein Aufklapp-Panel mobil */
  .card.open .card-pinmark { display: flex; }                                     /* Eck-Pin bleibt, wie zu */
  /* Toenungs-Modi: offene Karte behaelt exakt die Optik der zugeklappten */
  html[data-cardtint="links"] .card.open { background: var(--surface); }
  html[data-cardtint="voll"] .card.open .card-render { color: var(--cardtext, var(--text)); }
  .cb-history { margin: 8px 6px 4px; }

  /* Beim Bearbeiten den Schnell-Erfassen-Knopf ausblenden (Platz fuer die Formatleiste) */
  body:has(.card.open) .fab { display: none; }

  /* Schlanke Formatleiste: schwebt ueber der Bildschirmtastatur (--kb aus visualViewport) */
  .card.open .m-editbar {
    display: flex; align-items: center; gap: 2px;
    position: fixed; left: 12px; right: 12px;
    bottom: calc(12px + var(--kb, 0px) + env(safe-area-inset-bottom));
    z-index: 80; padding: 6px 8px;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
  }
  .m-editsave { display: inline-flex; align-items: center; justify-content: center; width: 32px; margin-left: auto; color: var(--text-faint); font-size: 16px; }
  .m-editsave.saved { color: var(--good); }
  .m-editdone { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: #fff; border: none; font-weight: 600; font-size: 13.5px; cursor: pointer; }
}
/* Eingabe darf immer schrumpfen -> kein horizontaler Ueberlauf */
.capture input { min-width: 0; }

/* Mobile Schnellerfassung (PWA) */
.mcap { max-width: 460px; margin: 0 auto; padding: 18px; }
.mic-big { width: 76px; height: 76px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border:none; display:flex; align-items:center; justify-content:center; font-size: 32px; cursor:pointer; margin: 0 auto; transition: all .15s; }
.mic-big.rec { background: rgba(248,113,113,.2); color: var(--bad); animation: pulse 1.3s infinite; }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(248,113,113,.4);} 50%{ box-shadow: 0 0 0 14px rgba(248,113,113,0);} }