/* RUDI Tagesplan – Apple Glasmorphism (Verschmelzung Tagesablauf + Aufgaben, 19.07.2026)
   Grundlayer 1:1 aus postfach.css Z. 1-65 (Pflicht-Kopie). */
@import url('/shared/fonts/inter.css');
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: linear-gradient(145deg, #eef2f7 0%, #e4ecf4 25%, #dfe8f0 50%, #e8eef5 75%, #f0f4f8 100%);
  --nav-bg: rgba(255,255,255,0.55);
  --nav-border: rgba(255,255,255,0.5);
  --card-bg: rgba(255,255,255,0.45);
  --card-border: rgba(255,255,255,0.6);
  --card-hover-bg: rgba(255,255,255,0.65);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.08);
  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-tertiary: #8e8e93;
  --badge-bg: rgba(4,179,214,0.1);
  --badge-color: #04b3d6;
  --toggle-bg: rgba(0,0,0,0.06);
  --toggle-knob: #fff;
  --input-bg: rgba(255,255,255,0.7);
  --input-border: rgba(0,0,0,0.08);
  --border-color: rgba(0,0,0,0.08);
  --accent: #04b3d6;
  /* Modul-spezifisch (aus tagesablauf.css uebernommen) */
  --kasten-bg: rgba(127,127,135,0.11);
  --kasten-border: rgba(127,127,135,0.45);
  --grid-line: rgba(127,127,135,0.28);
  --now: #ff5b52;
  --panel-solid: #ffffff;
}

[data-theme="dark"] {
  --bg: linear-gradient(145deg, #0a0d13 0%, #0e1420 20%, #101826 40%, #0d141d 60%, #0b0f16 80%, #0d1318 100%);
  --nav-bg: rgba(255,255,255,0.05);
  --nav-border: rgba(255,255,255,0.09);
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.1);
  --card-hover-bg: rgba(255,255,255,0.1);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.2);
  --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.3);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #636366;
  --badge-bg: rgba(4,179,214,0.15);
  --badge-color: #2cc5e4;
  --toggle-bg: rgba(255,255,255,0.1);
  --toggle-knob: #1c1c1e;
  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.1);
  --border-color: rgba(255,255,255,0.1);
  --accent: #2cc5e4;
  --kasten-bg: rgba(150,160,168,0.10);
  --kasten-border: rgba(150,160,168,0.35);
  --grid-line: rgba(150,165,172,0.22);
  --now: #ff6d64;
  --panel-solid: #1c242b;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  min-height: 100vh;
  background: var(--bg);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  transition: background 0.4s;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== CONTAINER + TABS (aus aufgaben.css) ===== */
.hidden { display: none !important; }
.container { width: min(1420px, calc(100% - 28px)); margin: 18px auto 50px; }
.mode-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.mode-tab, .filter-chip { border: 1px solid rgba(127,127,135,.45); background: rgba(127,127,135,.11); color: var(--text-primary); border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 650; cursor: pointer; min-height: 40px; white-space: nowrap; }
.mode-tab.active, .filter-chip.active { background: #04b3d6; border-color: #04b3d6; color: #fff; }
.kasten, .zahl-karte { background: rgba(127,127,135,.11); border: 1px solid rgba(127,127,135,.45); border-radius: 12px; }
.kasten { padding: 16px; }
.kasten h2 { font-size: 1rem; margin-bottom: 12px; }
.zahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.zahl-karte { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zahl-karte span { color: var(--text-secondary); font-size: .86rem; }
.zahl-karte strong { font-size: 1.55rem; }
.zahl-karte.alarm { background: rgba(207,34,46,.14); border-color: rgba(207,34,46,.55); color: #cf222e; }
.quick-add { margin-bottom: 12px; }
.quick-row { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(180px, 1fr) 150px auto; gap: 9px; }
input, select, textarea { width: 100%; color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 9px; padding: 10px 11px; font: inherit; }
textarea { resize: vertical; }
button { font-family: inherit; }
.primaer { border: 0; border-radius: 9px; padding: 10px 17px; background: #04b3d6; color: #fff; font-weight: 700; cursor: pointer; min-height: 40px; }
button:disabled { opacity: .5; cursor: wait; }
.details-block { margin-top: 10px; }
.details-block summary { color: var(--text-secondary); cursor: pointer; font-weight: 650; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.form-grid label { display: grid; gap: 5px; color: var(--text-secondary); font-size: .84rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .check { display: flex; align-items: center; gap: 7px; color: var(--text-primary); }
.check input { width: auto; }
.mehrere { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.mehrere label { display: flex; gap: 5px; align-items: center; padding: 7px 9px; border: 1px solid rgba(127,127,135,.35); border-radius: 8px; }
.mehrere input { width: auto; }
.zonen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.zone { min-height: 180px; }
.aufgaben-liste, .karten-liste { display: flex; flex-direction: column; gap: 8px; }
.aufgabe-zeile { width: 100%; display: grid; grid-template-columns: 10px minmax(120px, 2fr) minmax(100px, 1fr) auto auto; align-items: center; gap: 9px; padding: 10px; text-align: left; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; }
.prio-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text-tertiary); }
.prio-punkt.wichtig { background: #cf222e; }
.zeile-titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.zeile-meta { color: var(--text-secondary); font-size: .8rem; }
.status { display: inline-block; border-radius: 999px; padding: 3px 8px; font-size: .72rem; font-weight: 750; white-space: nowrap; background: rgba(127,127,135,.16); }
.status.angenommen { background: rgba(4,179,214,.16); color: #0086a0; }
.status.wartet_abnahme { background: rgba(225,139,20,.18); color: #a35c00; }
.status.erledigt { background: rgba(45,164,78,.16); color: #218739; }
.status.abgelehnt, .status.verpasst { background: rgba(207,34,46,.16); color: #cf222e; }
.leer { color: var(--text-tertiary); padding: 10px 2px; font-size: .86rem; }
.alle-block { margin-bottom: 20px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chip { padding: 6px 10px; font-size: .78rem; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 12px; }
.serie-karte, .info-karte { padding: 12px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--card-bg); }
.karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.karten-meta { color: var(--text-secondary); font-size: .8rem; margin-top: 4px; }
.kanal { color: #0086a0; font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.toggle { width: auto; }
.hinweis { margin-top: 9px; font-size: .84rem; }
.hinweis-klein { color: var(--text-secondary); font-size: 0.85rem; margin: 4px 0 10px; }
.mit-abstand { margin-top: 24px; }
.fehler { color: #cf222e; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }
.art-badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(127,127,135,.45); }
.art-badge.serie { color: #04b3d6; }
.art-badge.anzeige { color: #8a7ce6; }
.serie-karte.klickbar { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.serie-karte.klickbar:hover { border-color: #04b3d6; transform: translateY(-1px); box-shadow: var(--card-shadow); }
.serie-karte.inaktiv { opacity: .6; }
.karten-aktionen { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bearbeiten-hinweis { font-size: .75rem; color: var(--text-secondary); }
.karten-beschreibung { font-size: .85rem; color: var(--text-secondary); margin-top: 4px; white-space: pre-wrap; }

/* Backlog-Zone "Ohne Termin" — eigener Akzent (blau) */
.zone-blau h2 { color: #3d8bd4; border-bottom-color: rgba(61,139,212,.4); }
[data-theme="dark"] .zone-blau h2 { color: #6fb4f0; }
.zone h2 { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 2px solid transparent; }
.zone-rot h2 { color: #cf222e; border-bottom-color: rgba(207,34,46,.4); }
.zone-tuerkis h2 { color: #0086a0; border-bottom-color: rgba(4,179,214,.4); }
.zone-orange h2 { color: #a35c00; border-bottom-color: rgba(225,139,20,.4); }
[data-theme="dark"] .zone-rot h2 { color: #ff7b72; }
[data-theme="dark"] .zone-tuerkis h2 { color: #4dd8f0; }
[data-theme="dark"] .zone-orange h2 { color: #f0b429; }
.karte-abnahme strong { color: #a35c00; }
.karte-erledigt strong { color: #218739; }
[data-theme="dark"] .karte-abnahme strong { color: #f0b429; }
[data-theme="dark"] .karte-erledigt strong { color: #4ecb71; }

.aufgabe-zeile { border-left: 4px solid transparent; transition: transform .2s ease, box-shadow .2s ease; }
.aufgabe-zeile:hover { transform: translateY(-1px); box-shadow: var(--card-shadow); }
.aufgabe-zeile.s-offen { border-left-color: rgba(127,127,135,.6); }
.aufgabe-zeile.s-angenommen { border-left-color: #04b3d6; }
.aufgabe-zeile.s-wartet_abnahme { border-left-color: #e18b14; }
.aufgabe-zeile.s-erledigt { border-left-color: #2da44e; }
.aufgabe-zeile.s-abgelehnt, .aufgabe-zeile.s-verpasst { border-left-color: #cf222e; }
.aufgabe-zeile.ueberfaellig { border-left-color: #cf222e; background: rgba(207,34,46,.07); }
.zeile-einplanen { border: 0; background: rgba(4,179,214,.14); color: #0086a0; border-radius: 8px; padding: 7px 11px; font-weight: 700; font-size: .78rem; cursor: pointer; min-height: 40px; }
[data-theme="dark"] .zeile-einplanen { color: #4dd8f0; }
.einplanen-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; padding: 10px; margin-top: 6px; background: rgba(127,127,135,.08); border-radius: 8px; }
.einplanen-form label { display: grid; gap: 4px; font-size: .78rem; color: var(--text-secondary); }

/* ===== MODALS (aus aufgaben.css) ===== */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.modal-inhalt { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: var(--bg); background-size: 400% 400%; border: 1px solid rgba(127,127,135,.45); border-radius: 14px; padding: 22px; }
.modal-schliessen { position: absolute; top: 4px; right: 6px; z-index: 2; border: 0; background: transparent; color: inherit; font-size: 28px; cursor: pointer; min-width: 44px; min-height: 44px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0; }
.detail-grid div, .timeline-zeile, .nachweis { padding: 9px; background: rgba(127,127,135,.1); border-radius: 8px; }
.detail-grid small { color: var(--text-secondary); display: block; }
.timeline, .nachweise { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.timeline-zeile, .nachweis { font-size: .86rem; }
.nachweis img { width: 110px; height: 80px; object-fit: cover; border-radius: 7px; cursor: zoom-in; }
.nachweis audio { width: 100%; margin: 6px 0; }
.detail-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nacharbeit-feld { width: 100%; }
.foto-modal { overflow: hidden; }
.foto-modal .modal-schliessen { color: #fff; font-size: 36px; }
.foto-modal img { max-width: 95vw; max-height: 90vh; object-fit: contain; }

/* Skeleton */
.skelett-zeile { height: 46px; border-radius: 9px; border: 1px solid rgba(127,127,135,.18); background: linear-gradient(90deg, rgba(127,127,135,.08) 25%, rgba(127,127,135,.18) 50%, rgba(127,127,135,.08) 75%); background-size: 200% 100%; animation: schimmer 1.2s linear infinite; }
@keyframes schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.haken-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-theme="dark"] .haken-overlay { background: rgba(15,17,23,.55); }
.haken-overlay svg { width: 96px; height: 96px; }
.haken-overlay circle { stroke: #2da44e; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: hakenKreis .45s ease-out forwards; }
.haken-overlay path { stroke: #2da44e; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: hakenStrich .3s ease-out .3s forwards; }
@keyframes hakenKreis { to { stroke-dashoffset: 0; } }
@keyframes hakenStrich { to { stroke-dashoffset: 0; } }

/* ===== FAHRPLAN-TAB (Zeitleiste, aus tagesablauf.css uebernommen/angepasst) ===== */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--kasten-bg); border: 1px solid var(--kasten-border); border-radius: 12px; overflow-x: auto; max-width: 100%; }
.seg button { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 500; min-height: 40px; padding: 8px 16px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg button.active { background: var(--panel-solid); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.14); }
.toolbar .spacer { flex: 1; }
.datum-nav { display: inline-flex; align-items: center; gap: 4px; }
.datum-nav button { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--kasten-border); background: var(--kasten-bg); color: var(--text-secondary); font-size: 16px; cursor: pointer; }
.datum-nav button:hover { border-color: var(--accent); color: var(--accent); }
#fpHeute { font-size: 13px; font-weight: 650; padding: 0 14px; width: auto; }
.datum-label { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.now-badge { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; background: var(--kasten-bg); border: 1px solid var(--kasten-border); border-radius: 12px; padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; }
.now-badge b { color: var(--now); font-weight: 600; margin: 0 4px; }

.layout { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
.layout.team-board { grid-template-columns: 1fr; }
.team-board #fpPalettePanel { display: none; }
.panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.panel h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); padding: 10px 13px 0; }
.panel .panel-body { padding: 9px 13px 12px; }

.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--border-color); font-size: 13px; color: var(--text-secondary); }
.zoom { display: flex; gap: 6px; }
.zoom button { min-width: 40px; min-height: 40px; font-size: 18px; cursor: pointer; color: var(--text-secondary); background: var(--kasten-bg); border: 1px solid var(--kasten-border); border-radius: 10px; transition: border-color .15s, color .15s; }
.zoom button:hover { border-color: var(--accent); color: var(--accent); }
.tl-scroll { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }
.tl-inner { position: relative; margin: 10px 0; }

.axis-label { position: absolute; left: 0; width: 52px; text-align: right; padding-right: 8px; font-size: 11px; color: var(--text-tertiary); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.grid-line { position: absolute; left: 60px; right: 12px; height: 1px; background: var(--grid-line); transform: translateY(-50%); }
.col-heads { display: flex; gap: 6px; padding: 8px 14px 8px 62px; border-bottom: 1px solid var(--border-color); }
.col-heads span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ohne-Uhrzeit-Leiste */
.ohne-uhrzeit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-color); }
.ohne-uhrzeit .oz-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; width: 100%; }
.oz-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--kasten-bg); border: 1px solid var(--cat, var(--kasten-border)); font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.oz-pill .ico { color: var(--cat, var(--text-tertiary)); font-weight: 700; }
.oz-pill.dim { opacity: .55; }

/* Block-Grundgerueste: Info-Baustein + T-Karte teilen sich die Geometrie */
.block { position: absolute; left: 62px; right: 14px; border-radius: 12px; background-color: var(--panel-solid); background-image: linear-gradient(var(--kasten-bg), var(--kasten-bg)); border: 1px solid var(--kasten-border); padding: 5px 9px 5px 14px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; z-index: 1; transition: box-shadow .15s, border-color .15s; }
.block:not(.karte) { cursor: grab; }
.block.karte { cursor: pointer; }
.block.dragging { cursor: grabbing; opacity: .92; }
.block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cat, var(--accent)); }
.block .fill { position: absolute; left: 0; top: 0; width: 100%; background: var(--cat, var(--accent)); opacity: .10; height: 0; pointer-events: none; }
.block:hover { border-color: var(--cat, var(--accent)); box-shadow: var(--card-hover-shadow); }
.block.sel { border-color: var(--cat, var(--accent)); box-shadow: 0 0 0 2px var(--cat, var(--accent)) inset, var(--card-shadow); }
.block.active { box-shadow: 0 0 0 1px var(--now), var(--card-shadow); }
.b-time { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.b-title { font-size: 13px; font-weight: 600; line-height: 1.22; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handle { position: absolute; left: 0; right: 0; height: 10px; cursor: ns-resize; }
.handle.top { top: 0; }
.handle.bot { bottom: 0; }
.block.slim .handle { height: 6px; }
.block.slim .b-status { display: none; }

/* T-Karten-Status: dreifach redundant (Rand + Icon + Textbadge), nie Farbe als Flaeche */
.block.st-kommend { --cat: rgba(127,127,135,.7); }
.block.st-jetzt { --cat: #e8a13d; border-color: #e8a13d; }
.block.st-ueberfaellig { --cat: #e0322b; border-color: #e0322b; }
.block.st-verpasst { --cat: #e0322b; border-color: #e0322b; opacity: .55; }
.block.st-erledigt { --cat: #30b855; border-color: #30b855; opacity: .55; }
.b-status { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 750; margin-top: 2px; color: var(--cat, var(--text-tertiary)); }
.b-status .ico { font-size: 12px; line-height: 1; }
.b-marker { position: absolute; top: 4px; right: 6px; display: flex; gap: 3px; font-size: 12px; opacity: .85; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .block.st-ueberfaellig { animation: tkartePuls 2.2s ease-in-out infinite; }
  @keyframes tkartePuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,50,43,.28); } 50% { box-shadow: 0 0 0 6px rgba(224,50,43,0); } }
}

.now-line { position: absolute; left: 52px; right: 12px; height: 2px; background: var(--now); transform: translateY(-50%); z-index: 4; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--now); transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(255,91,82,0.22); }
@media (prefers-reduced-motion: no-preference) {
  .now-line::before { animation: nowPulse 2.4s ease-in-out infinite; }
  @keyframes nowPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,91,82,0.22); } 50% { box-shadow: 0 0 0 8px rgba(255,91,82,0.08); } }
}

.side { display: flex; flex-direction: column; gap: 16px; }
.palette { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; color: var(--text-primary); min-height: 40px; padding: 8px 13px; border-radius: 12px; background: var(--kasten-bg); border: 1px solid var(--kasten-border); cursor: pointer; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--cat); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat); flex: none; }
.hint { font-size: 12px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.45; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.field label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select, .field textarea { font: inherit; font-size: 14px; color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; padding: 9px 10px; width: 100%; min-height: 40px; }
.field textarea { resize: vertical; min-height: 64px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { font: inherit; font-size: 13px; color: var(--text-primary); min-height: 40px; padding: 9px 14px; border-radius: 10px; cursor: pointer; background: var(--kasten-bg); border: 1px solid var(--kasten-border); transition: border-color .15s, color .15s; }
.btn:hover { border-color: var(--accent); }
.btn.danger:hover { border-color: var(--now); color: var(--now); }
.empty { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }

/* Mobil-Hinweis (Fahrplan-Tab < 700px) */
.mobil-hinweis { display: none; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.mobil-hinweis strong { font-size: 1rem; }
.mobil-hinweis span { color: var(--text-secondary); font-size: .88rem; }

.b-status.im-modal { position: static; }
.nachtrag-foto { display: block; margin-top: 6px; font-size: .8rem; color: var(--text-secondary); }
.nachtrag-foto input { margin-top: 4px; }

/* Toasts (Serien-/Nachtrag-Fehlermeldungen) */
.toast-host { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, 92vw); }
.toast { pointer-events: auto; background: var(--panel-solid); color: var(--text-primary); border: 1px solid rgba(207,34,46,.5); border-radius: 12px; padding: 10px 16px; font-size: 13px; box-shadow: var(--card-hover-shadow); }

/* View-Transitions / reduzierte Bewegung */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .skelett-zeile { animation: none; }
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
  .zahlen-grid { grid-template-columns: repeat(2, 1fr); }
  .zonen-grid, .zweispaltig { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  #fpBody { display: none; }
  .mobil-hinweis { display: flex; }
}
@media (max-width: 650px) {
  .quick-row { grid-template-columns: 1fr; }
  .aufgabe-zeile { grid-template-columns: 9px 1fr auto; }
  .aufgabe-zeile .empfaenger { display: none; }
  .aufgabe-zeile .faellig { grid-column: 2; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .einplanen-form { grid-template-columns: 1fr; }
}

/* ===== Steckbrett (T-Karten-Board wie das Wandbrett, Standard-Ansicht des Fahrplans) ===== */
.ansicht-seg { flex: 0 0 auto; }
.brett {
  background: rgba(127, 127, 135, .11);
  border: 1px solid rgba(127, 127, 135, .45);
  border-radius: 12px;
  padding: 10px 12px 12px;
}
.brett-raster { display: grid; gap: 0 8px; align-content: start; }
.bk-ecke { margin-bottom: 5px; }
.bk-schild {
  margin-bottom: 5px; padding: 4px 10px; text-align: center;
  font-size: .95rem; font-weight: 700; color: var(--text-primary);
  background: var(--card-bg);
  border: 1px solid rgba(127, 127, 135, .5); border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-schild .anzahl { font-size: .76rem; font-weight: 600; color: var(--text-secondary); margin-left: 7px; }
.bk-zeit { display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 5px 0 0; font-variant-numeric: tabular-nums; }
.bk-zeit span { font-size: .72rem; font-weight: 600; color: var(--text-secondary); opacity: .75; }
.bk-zeit.voll span {
  font-size: .8rem; font-weight: 800; color: var(--text-primary); opacity: 1;
  padding: 1px 6px; background: var(--card-bg);
  border: 1px solid rgba(127, 127, 135, .45); border-radius: 4px;
}
/* Schienen: feste Hoehe, mehrere Karten derselben Halbstunde stecken NEBENeinander */
.bk-schiene {
  height: 100%; padding: 2px 3px; overflow: hidden;
  display: flex; align-items: stretch; gap: 3px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  border-bottom: 1px solid rgba(127, 127, 135, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .035) 100%);
}
.bk-schiene.stunde { border-bottom-color: rgba(127, 127, 135, .55); }
.bk-schiene.jetzt-schiene { box-shadow: inset 3px 0 0 var(--accent); }

.bk {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 2px 9px 3px; text-align: left;
  font: inherit; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .2);
  border-left: 7px solid rgba(0, 0, 0, .28);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.bk:active { transform: translateY(1px); }
.bk-name { flex: 1; min-width: 0; font-size: .95rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-ico { font-size: 1rem; font-weight: 800; }
.bk-foto { font-size: .6rem; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .16); }

/* Statusfarben — Flaeche + Zeichen (Wort steht im Detail); in Light wie Dark lesbar */
.bk.st-kommend { background: #eef0f2; border-left-color: #98a0aa; color: #22262c; }
.bk.st-jetzt { background: #f4a03c; border-left-color: #b96a12; color: #2a1c05; }
.bk.st-ueberfaellig { background: #e2564a; border-left-color: #9c2018; color: #2b0906; }
.bk.st-erledigt { background: #93d3a8; border-left-color: #2f8551; color: #0d2a19; opacity: .62; }
.bk.st-verpasst { background: #c9ccd1; border-left-color: #7b3b36; color: #3a2320; opacity: .68; }
.bk.info {
  background: rgba(255, 255, 255, .42); border-style: dashed;
  border-left-style: solid; border-left-width: 5px; border-left-color: var(--cat, #8e8e93);
  box-shadow: none; color: var(--text-primary);
}
[data-theme="dark"] .bk.info { background: rgba(255, 255, 255, .09); }
.bk.info .bk-name { font-size: .88rem; font-weight: 600; }

.brett-legende {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(127, 127, 135, .35);
}
.brett-legende .titel { font-size: .7rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.brett-legende .muster {
  font-size: .78rem; font-weight: 700; padding: 2px 9px 3px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .2); border-top: 5px solid rgba(0, 0, 0, .25);
}
.brett-legende .muster.st-kommend { background: #eef0f2; color: #22262c; }
.brett-legende .muster.st-jetzt { background: #f4a03c; color: #2a1c05; }
.brett-legende .muster.st-ueberfaellig { background: #e2564a; color: #2b0906; }
.brett-legende .muster.st-erledigt { background: #93d3a8; color: #0d2a19; }
.brett-legende .hint-tippen { margin-left: auto; font-size: .76rem; color: var(--text-secondary); }

@media (max-width: 700px) { .brett { display: none; } }

/* ===== Karten-Look: Kartenkopf, Papierkante, leicht schief gesteckt ===== */
.bk {
  position: relative;
  border-top-width: 5px; border-top-style: solid; border-top-color: rgba(0, 0, 0, .22);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 42%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .3) inset;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bk:nth-child(odd) { transform: rotate(-.25deg); }
.bk:nth-child(even) { transform: rotate(.2deg); }
.bk:hover { transform: rotate(0deg) translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, .3); z-index: 3; }
.bk.info { border-top-color: var(--cat, #8e8e93); }

/* ===== Umsteck-Modus ===== */
.umstecken-btn {
  flex: 0 0 auto; min-height: 40px; padding: 8px 16px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text-secondary); background: var(--kasten-bg);
  border: 1px solid var(--kasten-border); border-radius: 12px;
}
.umstecken-btn[aria-pressed="true"] {
  color: #2a1c05; background: #f4a03c; border-color: #b96a12;
  box-shadow: 0 0 0 3px rgba(244, 160, 60, .3);
}
.brett.umstecken .bk-schiene { background: linear-gradient(180deg, rgba(244,160,60,.1) 0%, rgba(244,160,60,.04) 100%); }
.brett.umstecken .bk:not(.fixiert) { cursor: grab; }
.brett.umstecken .bk.fixiert { opacity: .45; cursor: not-allowed; }
.bk-schiene.drop-ziel { outline: 2px dashed #b96a12; outline-offset: -2px; background: rgba(244, 160, 60, .25); }
.bk.wird-gezogen { opacity: .3; }
.bk-flug {
  position: fixed; z-index: 120; pointer-events: none; margin: 0;
  transform: rotate(-2deg) scale(1.04);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
}
.umstecken-hinweis {
  margin-top: 8px; padding: 7px 12px; border-radius: 8px;
  font-size: .82rem; font-weight: 600; color: #7a4a08;
  background: rgba(244, 160, 60, .18); border: 1px solid rgba(185, 106, 18, .45);
}
[data-theme="dark"] .umstecken-hinweis { color: #f4c48a; }
/* Kartenkopf bleibt durchgezogen — nur die Seiten der Info-Bloecke sind gestrichelt */
.bk.info { border-top-style: solid; }

/* ===== Routinen-Board (Board-Umbau des Routinen-Tabs, 20.07.2026) — nutzt .brett/.bk-* 1:1 ===== */
.bk-rhythmus { font-size: .6rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; opacity: .82; }
.bk-pausiert { font-size: .6rem; font-weight: 800; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .22); }
.bk.pausiert { opacity: .5; filter: grayscale(.5); }
.bk-schiene.bk-leer { cursor: pointer; }
.bk-schiene.bk-leer:hover { background: rgba(4, 179, 214, .12); }

.brett-legende .muster.info {
  background: rgba(255, 255, 255, .42); border-style: dashed; color: var(--text-primary);
}
[data-theme="dark"] .brett-legende .muster.info { background: rgba(255, 255, 255, .09); }
.legende-filter { display: flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 2px; font-size: .78rem; color: var(--text-secondary); cursor: pointer; }
.legende-filter input { width: auto; }

.baustein-zeile { display: flex; align-items: center; gap: 8px; }
.farbpunkt { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #8e8e93; }
.nachweis-wahl { display: flex; flex-direction: column; gap: 8px; }
.nachweis-wahl label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-primary); }
.nachweis-wahl input { width: auto; }
.nachweis-wahl small { color: var(--text-secondary); }
.nachweis-wahl label:has(input:disabled), .feld-checkbox:has(input:disabled) { opacity: .5; }
/* Papierkorb-Ansicht (20.07.): pausierte Routinen/Bloecke als Liste */
.pk-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pk-zeile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(127,127,135,.11); border: 1px solid rgba(127,127,135,.45); border-radius: 12px;
}
.pk-punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.pk-text { flex: 1; min-width: 0; }
.pk-text strong { display: block; }
.pk-text small { color: var(--text-secondary); line-height: 1.4; }
@media (max-width: 560px) {
  .pk-zeile { flex-wrap: wrap; }
  .pk-text { flex-basis: 100%; }
}

/* Aenderungs-Journal (20.07.) */
.btn.klein { min-height: 30px; padding: 4px 10px; font-size: 12px; margin-left: 8px; }
.rt-journal-titel { margin-top: 16px; }
.journal-diffs { font-size: .8rem; color: var(--text-secondary); }
.journal-meta { font-weight: 400; font-size: .8rem; color: var(--text-secondary); }
.feld-checkbox { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: var(--text-primary); }
.feld-checkbox input { width: auto; }

.rt-mobil-hinweis { display: none; }
@media (max-width: 700px) { .rt-mobil-hinweis { display: block; } }

/* ===== Kartenoptik v2 (20.07.): echte Steckkarte statt Farbbalken =====
   Hoehere Schienen geben der Karte Flaeche; Reiter oben, Papierkante, sichtbare
   Schraeglage und angehobene Ecke. Gilt fuer BEIDE Bretter (Tagesplan + Routinen). */
.bk-schiene { padding: 3px 4px; gap: 4px; }
.bk {
  position: relative;
  flex-direction: column; align-items: stretch; justify-content: center;
  gap: 1px;
  padding: 8px 10px 7px;
  border-radius: 4px;
  border-top-width: 9px;                       /* der Kartenreiter */
  border-left-width: 1px;
  border-left-color: rgba(0, 0, 0, .18);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.05) 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.5) inset;
}
.bk::after {                                    /* angehobene Ecke unten rechts */
  content: ''; position: absolute; right: 0; bottom: 0;
  border-width: 0 0 10px 10px; border-style: solid;
  border-color: transparent transparent rgba(0,0,0,.14) transparent;
}
.bk:nth-child(odd) { transform: rotate(-.55deg); }
.bk:nth-child(even) { transform: rotate(.45deg); }
.bk:hover { transform: rotate(0deg) translateY(-2px) scale(1.01); box-shadow: 0 7px 14px rgba(0,0,0,.32); z-index: 4; }
.bk-name { font-size: 1rem; line-height: 1.2; }
.bk-zeile2 {                                    /* zweite Zeile: Uhrzeit + Marken */
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; opacity: .72;
}
.bk-ico { position: absolute; top: 6px; right: 8px; font-size: .95rem; }
.bk.info { border-top-width: 9px; }
.bk.info .bk-name { font-size: .92rem; }

/* Herausziehen: langsamer, groesser, mit Drehung — man soll es sehen */
.bk-flug { transform-origin: center center; }

/* ===== Kartenoptik v3 (20.07.): ECHTE T-Karten-Form =====
   Wie das physische Steckkarten-Set: breiter Kopfbalken oben (liegt in der Schiene auf),
   darunter der schmalere Kartenkoerper. Die Kontur kommt aus clip-path — deshalb hier
   kein border/box-shadow (die wuerden abgeschnitten), sondern drop-shadow, das der Form
   folgt. Kopfhoehe/Schulter bewusst in PIXEL (Prozent wuerde mit der Textposition und
   unterschiedlich hohen Schienen auseinanderlaufen). */
.bk {
  --t-kopf: 13px;             /* Hoehe des Kopfbalkens */
  --t-schulter: 9px;          /* Einzug des Koerpers links/rechts */
  clip-path: polygon(
    0 0, 100% 0,
    100% var(--t-kopf),
    calc(100% - var(--t-schulter)) var(--t-kopf),
    calc(100% - var(--t-schulter)) 100%,
    var(--t-schulter) 100%,
    var(--t-schulter) var(--t-kopf),
    0 var(--t-kopf)
  );
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .38));
  justify-content: flex-start;
  padding: calc(var(--t-kopf) + 3px) calc(var(--t-schulter) + 7px) 4px;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.16) 0, rgba(0,0,0,.16) var(--t-kopf),
      rgba(255,255,255,.5) var(--t-kopf), rgba(255,255,255,.06) 76%, rgba(0,0,0,.06) 100%);
}
.bk::after { content: none; }                   /* Eselsohr passt nicht zur T-Kontur */
.bk:hover { transform: rotate(0deg) translateY(-2px) scale(1.015); filter: drop-shadow(0 5px 6px rgba(0,0,0,.42)); }
.bk-ico { top: calc(var(--t-kopf) + 2px); right: calc(var(--t-schulter) + 6px); font-size: .9rem; opacity: .85; }
.bk-foto { background: rgba(0, 0, 0, .2); }
/* Info-Bloecke behalten die T-Form, bleiben aber blass; Kopfbalken = Baustein-Farbe */
.bk.info {
  border: none;
  background-color: rgba(255, 255, 255, .5);
  background-image:
    linear-gradient(180deg, var(--cat, #8e8e93) 0, var(--cat, #8e8e93) var(--t-kopf),
      rgba(255,255,255,.55) var(--t-kopf), rgba(255,255,255,.15) 100%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
}
[data-theme="dark"] .bk.info { background-color: rgba(255, 255, 255, .12); }
.bk-schiene { padding: 2px 4px 3px; }
.brett-legende .muster, .legende .muster { border-top-width: 7px; }

/* Tafel-Hintergrund abdunkeln, damit die T-Kontur der Karten sichtbar wird
   (auf fast weissem Grund verschwimmt die Schulter des T). */
.brett { background: rgba(118, 124, 134, .2); border-color: rgba(110, 116, 126, .5); }
[data-theme="dark"] .brett { background: rgba(255, 255, 255, .07); }
.bk-schiene {
  border-top-color: rgba(255, 255, 255, .34);
  border-bottom-color: rgba(90, 96, 106, .34);
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(0,0,0,.06) 100%);
}
.bk-schiene.stunde { border-bottom-color: rgba(80, 86, 96, .55); }
.bk.st-kommend { background-color: #e4e7ec; }
.bk-zeit.voll span { background: #fff; }

/* Echte Tafel-Anmutung: erst auf einem satten Grau wird die T-Kontur der Karten
   sichtbar (helle Karte auf heller Flaeche = keine Form erkennbar). */
.brett {
  background: linear-gradient(180deg, #c2c7ce 0%, #b4b9c1 100%);
  border-color: #9aa0a9;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .14);
}
[data-theme="dark"] .brett {
  background: linear-gradient(180deg, #3d424a 0%, #343941 100%);
  border-color: #4d535c;
}
.bk-schiene {
  border-top-color: rgba(255, 255, 255, .42);
  border-bottom-color: rgba(70, 76, 86, .38);
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.07) 100%);
}
[data-theme="dark"] .bk-schiene { border-top-color: rgba(255,255,255,.1); border-bottom-color: rgba(0,0,0,.45); }
.bk-zeit span { color: #4b5058; }
[data-theme="dark"] .bk-zeit span { color: #c4c9d1; }
.bk-schild { border-color: #969ca5; }
.brett-legende { border-top-color: rgba(80, 86, 96, .4); }
.brett-legende .titel, .brett-legende .hint-tippen { color: #4b5058; }
[data-theme="dark"] .brett-legende .titel, [data-theme="dark"] .brett-legende .hint-tippen { color: #c4c9d1; }

/* ===== Vollfarbige Karten (20.07., GF-Wunsch): die ganze Karte traegt EINE Farbe =====
   Wie das physische Set — komplett flach durchgefaerbt, kein Kopfbalken-Ton, Text in dunkler Tinte. */
.bk {
  background-image: none;
  color: #14181d;
}
.bk .bk-zeile2 { opacity: .8; }
.bk.st-kommend { background-color: #d7dbe1; }
.bk.st-jetzt { background-color: #f4a03c; }
.bk.st-ueberfaellig { background-color: #e2564a; color: #240704; }
.bk.st-erledigt { background-color: #6fbf8b; color: #0b2416; }
.bk.st-verpasst { background-color: #b9bdc4; color: #33231f; }
/* Info-Bloecke: komplett flach in der Baustein-Farbe */
.bk.info, [data-theme="dark"] .bk.info {
  background-color: var(--cat, #8e8e93);
  background-image: none;
  color: #14181d;
}
.bk.info .bk-name { font-weight: 650; }
.bk.pausiert { filter: grayscale(.7) drop-shadow(0 1px 1px rgba(0,0,0,.3)); opacity: .55; }

/* ===== Detail-Modal in der Farbe der aufgerufenen Karte (GF-Wunsch 20.07.) =====
   Fixe Tinte + helle Felder statt Theme-Variablen — die Flaeche ist immer hell-farbig,
   egal ob Light oder Dark Mode. Das Modal traegt dieselbe T-Kontur wie die Karten (.bk). */
.modal-inhalt.vollfarbe {
  --t-kopf: 44px;
  --t-schulter: 26px;
  background: var(--modal-farbe, var(--bg));
  color: #14181d;
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--t-kopf),
    calc(100% - var(--t-schulter)) var(--t-kopf),
    calc(100% - var(--t-schulter)) 100%,
    var(--t-schulter) 100%,
    var(--t-schulter) var(--t-kopf),
    0 var(--t-kopf)
  );
  border: none;
  border-radius: 0;
  padding: calc(var(--t-kopf) + 12px) calc(var(--t-schulter) + 20px) 20px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
  scrollbar-width: none;   /* Scrollbalken wuerde von der Schulter-Kontur zerschnitten */
}
.modal-inhalt.vollfarbe::-webkit-scrollbar { display: none; }
.modal-inhalt.vollfarbe .modal-schliessen { top: 0; right: 8px; }
@media (max-width: 560px) { .modal-inhalt.vollfarbe { --t-schulter: 14px; } }
.modal-inhalt.vollfarbe h2, .modal-inhalt.vollfarbe h3, .modal-inhalt.vollfarbe .b-status { color: inherit; }
.modal-inhalt.vollfarbe .detail-grid div, .modal-inhalt.vollfarbe .timeline-zeile,
.modal-inhalt.vollfarbe .nachweis { background: rgba(255,255,255,.35); }
.modal-inhalt.vollfarbe .detail-grid small, .modal-inhalt.vollfarbe .leer, .modal-inhalt.vollfarbe .hint,
.modal-inhalt.vollfarbe .hinweis-klein, .modal-inhalt.vollfarbe .field label { color: rgba(20,24,29,.72); }
.modal-inhalt.vollfarbe input, .modal-inhalt.vollfarbe select, .modal-inhalt.vollfarbe textarea {
  background: rgba(255,255,255,.78); color: #14181d; border-color: rgba(0,0,0,.28);
}
.modal-inhalt.vollfarbe .btn { background: rgba(255,255,255,.5); color: #14181d; border-color: rgba(0,0,0,.3); }
.modal-inhalt.vollfarbe .fehler { background: rgba(255,255,255,.85); color: #a01a24; padding: 8px 10px; border-radius: 8px; }

/* ===== Runde Ecken fuer die T-Kontur (GF 20.07.) =====
   shape() zeichnet dieselbe T-Form mit abgerundeten Ecken. Browser ohne shape()-Support
   ignorieren die Deklaration und behalten die eckige polygon()-Form von oben. */
.bk { --t-r: 3px; --t-ri: 2.5px; }
.modal-inhalt.vollfarbe { --t-r: 10px; --t-ri: 8px; }
.bk, .modal-inhalt.vollfarbe {
  clip-path: shape(
    from 0 var(--t-r),
    curve to var(--t-r) 0 with 0 0,
    line to calc(100% - var(--t-r)) 0,
    curve to 100% var(--t-r) with 100% 0,
    line to 100% calc(var(--t-kopf) - var(--t-r)),
    curve to calc(100% - var(--t-r)) var(--t-kopf) with 100% var(--t-kopf),
    line to calc(100% - var(--t-schulter) + var(--t-ri)) var(--t-kopf),
    curve to calc(100% - var(--t-schulter)) calc(var(--t-kopf) + var(--t-ri)) with calc(100% - var(--t-schulter)) var(--t-kopf),
    line to calc(100% - var(--t-schulter)) calc(100% - var(--t-r)),
    curve to calc(100% - var(--t-schulter) - var(--t-r)) 100% with calc(100% - var(--t-schulter)) 100%,
    line to calc(var(--t-schulter) + var(--t-r)) 100%,
    curve to var(--t-schulter) calc(100% - var(--t-r)) with var(--t-schulter) 100%,
    line to var(--t-schulter) calc(var(--t-kopf) + var(--t-ri)),
    curve to calc(var(--t-schulter) - var(--t-ri)) var(--t-kopf) with var(--t-schulter) var(--t-kopf),
    line to var(--t-r) var(--t-kopf),
    curve to 0 calc(var(--t-kopf) - var(--t-r)) with 0 var(--t-kopf)
  );
}

/* ===== DE/RO-Sprachumschalter im Header (data-header-extra) ===== */
.tp-lang { display: inline-flex; gap: 3px; }
.tp-lang-btn {
  min-width: 38px; min-height: 38px; padding: 5px 9px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--text-secondary, #636366);
  background: rgba(127,127,135,.12);
  border: 1px solid rgba(127,127,135,.34);
  border-radius: 9px; transition: background .15s, color .15s, border-color .15s;
}
.tp-lang-btn:hover { border-color: var(--accent, #04b3d6); color: var(--accent, #04b3d6); }
.tp-lang-btn.aktiv {
  color: #fff; background: var(--accent, #04b3d6); border-color: var(--accent, #04b3d6);
}

/* ===== Ansicht "Offen/Erledigt" (22.07.): zwei Spalten, Karte nach rechts = erledigt =====
   Karten-Optik (.bk), Flug-Klon (.bk-flug) und .wird-gezogen kommen aus dem Steckbrett. */
.sp-board { margin-top: 10px; }
.sp-hinweis {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  font-size: .82rem; line-height: 1.35; color: var(--text-secondary);
  background: var(--kasten-bg); border: 1px solid var(--kasten-border);
}
.sp-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.sp-spalte {
  display: flex; flex-direction: column; min-height: 320px;
  border-radius: 12px; background: var(--kasten-bg); border: 1px solid var(--kasten-border);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sp-schild {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; padding: 10px 13px; font-size: .95rem; font-weight: 800;
  border-bottom: 1px solid var(--kasten-border);
  background: rgba(127, 127, 135, .07); border-radius: 12px 12px 0 0;
}
.sp-schild .anzahl {
  min-width: 26px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font-size: .82rem; font-weight: 800; color: var(--text-secondary);
  background: rgba(127, 127, 135, .18);
}
.sp-schild.offen { box-shadow: inset 4px 0 0 #98a0aa; }
.sp-schild.erledigt { box-shadow: inset 4px 0 0 #2f8551; }
.sp-inhalt { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 14px; }
.sp-gruppe {
  margin-top: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.sp-gruppe:first-child { margin-top: 0; }
.sp-leer { padding: 22px 4px; text-align: center; font-size: .84rem; color: var(--text-secondary); }

/* Karten stehen hier gerade (kein Steck-Schiefstand) und sind hoehere Touch-Ziele.
   WICHTIG: .bk traegt fuer die Steckbrett-Schiene (Flex-ZEILE) `flex: 1 1 0` und .bk-name
   `flex: 1`. In dieser Spalte (Flex-SPALTE) heisst das „Hoehe 0, Rest gleichmaessig teilen"
   — die Karten wuerden sich ueberlappen und die Titel abschneiden. Darum hier feste
   Eigenhoehe fuer Karte und Titel. */
.bk.sp-karte { flex: 0 0 auto; min-height: 52px; transform: none; cursor: grab; }
/* Platz fuer das absolut gesetzte Status-Icon oben rechts — sonst laeuft ein langer
   Titel darunter durch, statt vorher mit … abzubrechen. */
.bk.sp-karte .bk-name { flex: 0 0 auto; padding-right: 22px; }
.bk.sp-karte:hover { transform: translateY(-1px); }
.bk.sp-karte.fixiert { cursor: default; }
.bk-fuer {
  margin-left: auto; font-size: .68rem; font-weight: 700; opacity: .8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
/* Gemeldet, aber noch nicht abgenommen: steht rechts, ist aber blass und gestrichelt
   umrandet — erst die Vier-Augen-Abnahme macht die Karte voll gruen. */
.bk.sp-karte.st-erledigt { opacity: .92; }
.bk.sp-karte.sp-wartet { opacity: .6; outline: 2px dashed rgba(47, 133, 81, .75); outline-offset: -3px; }

.sp-spalte.drop-ziel {
  background: rgba(48, 184, 85, .16); border-color: #2f8551;
  box-shadow: 0 0 0 3px rgba(48, 184, 85, .22);
}
.sp-spalte[data-ziel="offen"].drop-ziel { background: var(--kasten-bg); border-color: var(--kasten-border); box-shadow: none; }

/* ===== Erledigen-Blatt (kompakte Abfrage beim Umstecken) ===== */
#fpBlatt .modal-inhalt.blatt { width: min(440px, 100%); }
.bl-karte { margin: 2px 0 12px; font-size: 1.02rem; font-weight: 700; }
.bl-hinweis {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 9px; font-size: .82rem; line-height: 1.35;
  background: rgba(255, 255, 255, .42); border: 1px solid rgba(0, 0, 0, .16);
}
.bl-feld { margin-bottom: 13px; }
.bl-feld label { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 700; }
.bl-feld textarea { width: 100%; min-height: 74px; padding: 9px 11px; font: inherit; font-size: .9rem; border-radius: 9px; }
.bl-foto-btn {
  width: 100%; min-height: 48px; padding: 12px 16px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 700;
  border-radius: 10px; border: 1px solid rgba(0, 0, 0, .28); background: rgba(255, 255, 255, .55); color: #14181d;
}
.bl-foto-btn:hover { background: rgba(255, 255, 255, .75); }
.bl-vorschau {
  display: block; width: 100%; max-height: 190px; margin-top: 9px;
  object-fit: cover; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .22);
}
/* Am Handy braucht es hier nichts: #fpBody ist unter 700px komplett aus,
   stattdessen greift der Hinweis auf "Mein Tag" (.mobil-hinweis). */