/* KG Media Factory · Freelancer — Design-System
   Farb-Basis übernommen aus dem KGMF-Dashboard (kgmf_style.css):
   Signal-Grün #03FF8D auf Schwarz #0A0A0A, Karten #141414, Rahmen #2A2A2A.
   Die --panel/--line/--accent/--cta-Namen bleiben erhalten (HTML/JS nutzen sie),
   liegen jetzt aber auf den KGMF-Werten. Zum Anpassen an einen Kunden reicht es,
   die beiden Blöcke unten zu ändern. */
:root{ /* Light */
  --bg:#F0F0F0; --panel:#FFFFFF; --panel2:#FFFFFF; --line:#D0D0D0;
  --text:#0A0A0A; --muted:#3C3C3C;
  /* Akzent = Marken-Grün. --accent-ink liegt auf dem Grün (Text auf Grünflächen),
     --accent-text ist das lesbare Grün FÜR Text auf hellem Grund. */
  --accent:#03FF8D; --accent-hover:#00E07A; --accent-ink:#0A0A0A;
  --accent-text:#007A40; --accent-soft:#EAFFF5;
  /* CTA ist dasselbe Grün — eigene Namen, damit Buttons separat umfärbbar bleiben. */
  --cta:#03FF8D; --cta-hover:#00E07A; --cta-ink:#0A0A0A;
  --ok:#047A43; --err:#C62828; --warn:#9A6A00;
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 18px rgba(0,0,0,.07);
}
html[data-theme="dark"]{ /* Dark (Standard) */
  --bg:#0A0A0A; --panel:#141414; --panel2:#1A1A1A; --line:#2A2A2A;
  --text:#F0F0F0; --muted:#888888;
  --accent:#03FF8D; --accent-hover:#00E07A; --accent-ink:#0A0A0A;
  --accent-text:#03FF8D; --accent-soft:#041A0D;
  --cta:#03FF8D; --cta-hover:#00E07A; --cta-ink:#0A0A0A;
  --ok:#03FF8D; --err:#FF6060; --warn:#FFBE32;
  --shadow:0 1px 6px rgba(0,0,0,.5),0 4px 24px rgba(0,0,0,.45);
}
/* Schrift: vorerst System-Stack. Eigene Webfont hier per @font-face einbinden
   (Dateien nach assets/fonts/ legen — die CSP erlaubt nur 'self'). */
*{box-sizing:border-box}
/* display:flex/grid auf Elementen würde das hidden-Attribut sonst aushebeln (Overlay, Felder, Panels) */
[hidden]{display:none!important}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     background:var(--bg);color:var(--text);line-height:1.5;-webkit-text-size-adjust:100%;
     transition:background .25s ease,color .25s ease;overflow-x:hidden;min-height:100vh;
     padding-bottom:calc(24px + env(safe-area-inset-bottom))}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- Aurora-Hintergrund (aus dem KGMF-Dashboard) ----------
   Weiche, langsam wandernde Farbflächen auf schwarzem Grund. Die Glows sind
   Radial-Gradients mit weichem Auslauf statt filter:blur() — sieht gleich aus,
   kostet aber kaum GPU. */
:root{
  --aurora-green:rgba(3,255,141,.13); --aurora-violet:rgba(139,92,246,.14);
  --aurora-blue:rgba(56,130,246,.12);
}
html[data-theme="dark"]{
  --aurora-green:rgba(3,255,141,.15); --aurora-violet:rgba(139,92,246,.20);
  --aurora-blue:rgba(56,130,246,.16);
}
/* Nur transform und opacity werden animiert — beides läuft auf der GPU, kostet also
   auch bei langen Tabellen keine Scroll-Leistung. Die Dauern (24–34 s) sind so
   gewählt, dass die Bewegung wahrnehmbar ist, ohne die Aufmerksamkeit zu ziehen;
   das zusätzliche Auf- und Abblenden macht sie auch dann sichtbar, wenn eine Fläche
   gerade halb außerhalb des Bilds liegt. */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;
      border-radius:50%;will-change:transform,opacity}
body::before{width:90vmax;height:90vmax;top:-45vmax;left:-25vmax;
      background:radial-gradient(circle,var(--aurora-violet) 0%,transparent 65%);
      animation:aurora1 26s ease-in-out infinite alternate,
                aurorafade 19s ease-in-out infinite alternate}
body::after{width:80vmax;height:80vmax;top:-40vmax;right:-20vmax;
      background:radial-gradient(circle,var(--aurora-green) 0%,transparent 65%);
      animation:aurora2 30s ease-in-out infinite alternate,
                aurorafade 23s ease-in-out -7s infinite alternate}
.bgfx{position:fixed;z-index:-1;pointer-events:none;width:75vmax;height:75vmax;
      bottom:-40vmax;left:8vw;border-radius:50%;will-change:transform,opacity;
      background:radial-gradient(circle,var(--aurora-blue) 0%,transparent 65%);
      animation:aurora3 34s ease-in-out infinite alternate,
                aurorafade 17s ease-in-out -11s infinite alternate}
@keyframes aurora1{
  from{transform:translate(0,0) scale(1)}
  50% {transform:translate(16vw,11vh) scale(1.14)}
  to  {transform:translate(28vw,4vh) scale(.92)}
}
@keyframes aurora2{
  from{transform:translate(0,0) scale(1)}
  50% {transform:translate(-18vw,14vh) scale(.9)}
  to  {transform:translate(-8vw,5vh) scale(1.18)}
}
@keyframes aurora3{
  from{transform:translate(0,0) scale(1)}
  50% {transform:translate(20vw,-10vh) scale(1.12)}
  to  {transform:translate(36vw,-3vh) scale(.94)}
}
/* Leichtes Atmen — bewusst schwach, damit es nicht blinkt. */
@keyframes aurorafade{
  from{opacity:.75}
  to  {opacity:1}
}

/* ---------- Header ---------- */
header{padding:calc(26px + env(safe-area-inset-top)) 20px 20px;display:flex;flex-direction:column;
      align-items:center;gap:12px;text-align:center;position:relative}
header img.logo{height:64px;width:auto;max-width:280px;object-fit:contain;
      filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
header .titles h1{font-size:22px;margin:0;font-weight:800;letter-spacing:-.3px}
/* Unterzeile im Marken-Grün — wie die Kicker im KGMF-Dashboard. */
header .titles p{margin:4px 0 0;color:var(--accent-text);font-size:13px;font-weight:500;
      letter-spacing:.3px}
/* Angemeldete Person oben links, gegenüber dem Design-Schalter. */
.whoami{position:absolute;top:calc(18px + env(safe-area-inset-top));left:16px;
      display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.whoami span{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .whoami{position:static;justify-content:center;margin-bottom:4px}
  .whoami span{max-width:none}
}
.switch{position:absolute;top:calc(18px + env(safe-area-inset-top));right:16px;display:inline-flex;
      align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:12px;color:var(--muted)}
.switch .track{width:46px;height:26px;border-radius:9999px;background:var(--panel);border:1.5px solid var(--line);
      position:relative;transition:.2s}
.switch .knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
      background:var(--accent);transition:.25s cubic-bezier(.4,1.4,.5,1);
      box-shadow:0 0 8px rgba(3,255,141,.35);display:flex;align-items:center;justify-content:center;
      font-size:11px}
html[data-theme="light"] .switch .knob{left:23px}

/* ---------- Layout ---------- */
/* Breiter als eine Formular-Seite, weil die Freelancer-Tabelle viele Spalten hat. */
.wrap{max-width:1280px;margin:0 auto;padding:8px 16px 24px;display:flex;flex-direction:column;gap:28px}

/* ---------- Karten ---------- */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
      padding:20px 24px 24px;overflow:hidden;box-shadow:var(--shadow);
      transition:border-color .2s,box-shadow .2s;
      animation:cardIn .55s cubic-bezier(.2,.8,.3,1) backwards}
.wrap .card:nth-of-type(2){animation-delay:.08s}
.wrap .card:nth-of-type(3){animation-delay:.16s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(hover:hover){
  .card:hover{border-color:rgba(3,255,141,.3);
      box-shadow:0 4px 32px rgba(3,255,141,.08),var(--shadow)}
}
/* Grüne Linie über der Karte — Signatur-Element des KGMF-Dashboards. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
      background:linear-gradient(90deg,transparent,var(--accent),transparent)}
/* Überschrift links, dann Glossar-Link, rechts der Reload-Button. */
.cardhead{display:flex;align-items:center;gap:12px}
.cardhead h2{margin-right:auto}

/* Dezenter Textlink mit Icon (Glossar). */
.linkbtn{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
      background:none;border:none;padding:2px 0;font-family:inherit;font-size:12.5px;
      font-weight:650;color:var(--muted);cursor:pointer;
      transition:color .15s}
.linkbtn svg{opacity:.75;transition:opacity .15s}
@media(hover:hover){
  .linkbtn:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
  .linkbtn:hover svg{opacity:1}
}
.linkbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3);border-radius:5px}
.card h2{margin:0 0 6px;font-size:16px;font-weight:800;letter-spacing:-.15px}
.cardhead h2{margin-bottom:0}

/* Kleiner Icon-Button (Neu laden) — Nebenhandlung, daher zurückhaltend. */
.iconbtn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;
      justify-content:center;background:transparent;border:1.5px solid var(--line);
      border-radius:9999px;color:var(--muted);cursor:pointer;
      transition:border-color .15s,color .15s,background .15s}
@media(hover:hover){ .iconbtn:hover:not(:disabled){border-color:var(--accent);
      color:var(--accent-text);background:var(--accent-soft)} }
.iconbtn:disabled{opacity:.6;cursor:default}
.iconbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}
.iconbtn.busy svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card .lead{margin:0;color:var(--muted);font-size:13px}
.card .lead code{background:var(--accent-soft);border:1px solid var(--line);border-radius:6px;
      padding:1px 5px;font-size:12px;color:var(--accent-text)}

/* ---------- Formular ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
      letter-spacing:.6px}
.field .hint{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
input[type=text],input[type=date],select,textarea{
      width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);
      border-radius:9px;padding:10px 13px;font-size:14.5px;font-family:inherit;outline:none;
      transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
textarea{resize:vertical;min-height:64px;line-height:1.45}
input::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(3,255,141,.18)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
      linear-gradient(135deg,var(--muted) 50%,transparent 50%);
      background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
      background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}

/* ---------- Buttons ---------- */
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Reihe mit Nebenhandlungen — die Chips darin bleiben klein statt sich zu strecken. */
.btnrow.compact{margin-top:12px}
.btnrow.compact .chip{flex:0 0 auto}
.btn{flex:1 1 150px;padding:11px 18px;border-radius:9999px;font-size:14px;font-weight:700;font-family:inherit;
      cursor:pointer;border:1.5px solid var(--line);transition:transform .12s,box-shadow .2s,background .2s,
      border-color .2s,color .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--cta);color:var(--cta-ink);border-color:transparent;
      box-shadow:0 0 14px rgba(3,255,141,.25)}
@media(hover:hover){ .btn.primary:hover:not(:disabled){background:var(--cta-hover);
      box-shadow:0 0 22px rgba(3,255,141,.4)} }
.btn.ghost{background:transparent;color:var(--muted)}
@media(hover:hover){ .btn.ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent-text);
      background:var(--accent-soft)} }
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}

/* ---------- Status ---------- */
.status{min-height:20px;margin-top:10px;font-size:12.5px;font-weight:700;letter-spacing:.3px}
.status.ok{color:var(--accent-text)} .status.err{color:var(--err)} .status.busy{color:var(--muted)}
/* Quellenangabe neben der Trefferzahl — dezent, bricht auf Mobil in eigene Zeile. */
.status-src{margin-left:10px;font-weight:500;color:var(--muted);letter-spacing:0}
@media(max-width:640px){ .status-src{display:block;margin-left:0;margin-top:2px} }

/* ---------- Filterzeile ---------- */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.filters .field{margin-bottom:0;flex:1 1 190px;min-width:150px}
.filters .field.grow{flex:2 1 260px}
.field.project{margin-top:14px;margin-bottom:0}

/* Eingabefeld mit Lösch-X: dunkelgrau, erscheint nur bei Inhalt. */
.inputwrap{position:relative;display:flex}
input.hasclear{padding-right:42px}
.clearbtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);
      width:26px;height:26px;display:flex;align-items:center;justify-content:center;
      background:transparent;border:none;border-radius:9999px;
      color:var(--muted);font-size:13px;line-height:1;cursor:pointer;
      transition:color .15s,background .15s}
@media(hover:hover){ .clearbtn:hover{color:var(--text);background:var(--line)} }
.clearbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}
/* Werte mit Tooltip-Erklärung dezent als solche kennzeichnen. */
.hashint{cursor:help;text-decoration:underline dotted;text-underline-offset:3px;
      text-decoration-color:var(--muted)}

/* ---------- Schnellzugriff (zwei Stufen) ---------- */
.quick{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.quick-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.quick-label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
      letter-spacing:.6px;white-space:nowrap;min-width:96px}
.quick-chips,.quick-types{display:flex;flex-wrap:wrap;gap:6px;flex:1}
/* Städte-Reihe gehört sichtbar zum gewählten Gewerk — daher eingerückt und abgesetzt. */
.quick-row.cities{padding:8px 0 0;border-top:1px solid var(--line)}
.quick-row.cities .quick-label{color:var(--accent-text)}
/* Gewerk-Buttons: mit Icon, etwas kräftiger als die Städte-Chips. */
.typechip{gap:6px;padding:5px 13px}
.typechip svg{flex-shrink:0;opacity:.8}
.typechip.active svg{opacity:1}
/* Dunkelgraues Rücksetz-Kreuz am Ende der Reihe. */
.chip.xbtn{flex-shrink:0;padding:4px 11px;color:var(--muted);font-size:12px}
@media(hover:hover){ .chip.xbtn:hover{color:var(--text);border-color:var(--muted);
      background:var(--panel2)} }
.chip{display:inline-flex;align-items:center;gap:6px;background:transparent;
      border:1px solid var(--line);border-radius:9999px;padding:4px 12px;
      font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;
      transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
@media(hover:hover){ .chip:hover{border-color:rgba(3,255,141,.45);color:var(--accent-text);
      background:var(--accent-soft)} }
.chip.active{border-color:rgba(3,255,141,.6);color:var(--accent-text);background:var(--accent-soft)}
.chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}
.chip-n{font-size:10.5px;font-weight:800;opacity:.7}

/* ---------- Datentabelle ---------- */
/* Kein eigener Scrollbalken für die Tabelle — gescrollt wird nur die Seite. Waagerecht
   darf der Rahmen scrollen, damit die acht Spalten auf schmalen Geräten erreichbar
   bleiben; eine Höhenbegrenzung gibt es nicht mehr, dafür sorgt die Blätterung. */
.tablewrap{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);
      overflow-x:auto;background:var(--bg);-webkit-overflow-scrolling:touch}
table.datatable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.datatable th,table.datatable td{padding:9px 12px;text-align:left;vertical-align:top;
      border-bottom:1px solid var(--line)}
/* Kopfzeile im Grün-Ton der KGMF-Karten-Header. */
/* Kein position:sticky mehr: der Rahmen ist wegen overflow-x ein eigener Scroll-Kontext,
   ein klebender Kopf würde dort ohnehin nicht an der Fensterkante haften. Bei maximal
   100 Zeilen je Seite ist er auch nicht nötig. */
table.datatable thead th{background:var(--accent-soft);
      font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
      color:var(--accent-text);white-space:nowrap}
table.datatable thead th[data-sort]{cursor:pointer;user-select:none}
@media(hover:hover){ table.datatable thead th[data-sort]:hover{color:var(--text)} }
table.datatable thead th[aria-sort=ascending]::after{content:" ▲";font-size:9px}
table.datatable thead th[aria-sort=descending]::after{content:" ▼";font-size:9px}
table.datatable tbody tr:last-child td{border-bottom:none}
table.datatable tbody tr:nth-child(even){background:var(--panel)}
@media(hover:hover){ table.datatable tbody tr:hover{background:rgba(3,255,141,.08)} }
table.datatable td.name{font-weight:700;min-width:170px}
table.datatable td.contact{white-space:nowrap;font-size:12.5px}
table.datatable td.nowrap{white-space:nowrap}
table.datatable a{color:var(--accent-text);text-decoration:none}
@media(hover:hover){ table.datatable a:hover{text-decoration:underline} }
/* Klemmung auf einem inneren div — auf der td selbst würde display:-webkit-box
   die Tabellenzeile zerlegen. */
table.datatable td.note{max-width:280px;color:var(--muted)}
table.datatable td.note div,table.datatable td.cost div{cursor:pointer}
table.datatable td.note div.clamp,table.datatable td.cost div.clamp{
      display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
      -webkit-box-orient:vertical;overflow:hidden}
/* Kosten: Betrag kräftig, Anmerkung darunter klein und grau. */
table.datatable td.cost{max-width:220px;color:var(--muted)}
.cost-amount{font-weight:800;color:var(--text);white-space:nowrap}
.cost-detail{margin-top:2px;font-size:12px}
/* Projekt gibt es selten — wenn doch, als eigene Zeile mit Label. */
.note-project{margin-top:5px;font-size:12px;color:var(--text)}
.note-project-label{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:5px;
      background:var(--accent-soft);border:1px solid rgba(3,255,141,.3);
      color:var(--accent-text);font-size:9.5px;font-weight:800;letter-spacing:.5px;
      text-transform:uppercase;vertical-align:1px}
.empty{margin:16px 0 0;color:var(--muted);font-size:13px;text-align:center}

/* ---------- Blätterung ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;
      flex-wrap:wrap;margin-top:14px}
.pager-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pager-info{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.pager-size{display:flex;align-items:center;gap:8px}
.pager-size .quick-label{min-width:0}
.pager .chip:disabled{opacity:.4;cursor:default}
@media(hover:hover){ .pager .chip:disabled:hover{border-color:var(--line);color:var(--muted);
      background:transparent} }
@media(max-width:640px){
  .pager{flex-direction:column;align-items:stretch;gap:10px}
  .pager-nav{justify-content:space-between}
}

/* Name als Auslöser des Steckbriefs — sieht wie ein Link aus, ist aber ein Button.
   Das Ausweis-Icon davor zeigt, dass sich hier etwas öffnet. */
.namebtn{display:inline-flex;align-items:center;gap:7px;
      background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;
      color:var(--accent-text);cursor:pointer;text-align:left;letter-spacing:inherit}
.namebtn svg{flex-shrink:0;opacity:.65;transition:opacity .15s,transform .12s}
@media(hover:hover){
  .namebtn:hover{text-decoration:underline}
  .namebtn:hover svg{opacity:1;transform:scale(1.12)}
}
.namebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ---------- Steckbrief (Lightbox) ---------- */
body.noscroll{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.82);
      display:flex;align-items:center;justify-content:center;padding:20px;
      overflow-y:auto;-webkit-overflow-scrolling:touch}
.lightbox-inner{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);
      overflow-y:auto;background:var(--panel);border:1px solid var(--line);
      border-radius:14px;padding:26px 26px 22px;box-shadow:0 24px 80px rgba(0,0,0,.55);
      animation:pfPop .18s ease}
@keyframes pfPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
/* Grüne Oberkante wie bei den Karten. */
.lightbox-inner::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
      border-radius:14px 14px 0 0;
      background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.lightbox-close{position:absolute;top:14px;right:14px;width:32px;height:32px;
      display:flex;align-items:center;justify-content:center;
      background:transparent;border:1.5px solid var(--line);border-radius:9999px;
      color:var(--muted);font-size:14px;line-height:1;cursor:pointer;
      transition:border-color .15s,color .15s}
@media(hover:hover){ .lightbox-close:hover{border-color:var(--err);color:var(--err)} }
.lightbox-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}

.pf-head{padding-right:40px}
/* Nur der Steckbrief hat ein Bild — Glossar und Mailfluss nutzen .pf-head ohne Zusatz. */
.pf-head.with-avatar{display:flex;align-items:flex-start;gap:14px;padding-right:48px}
.pf-head-text{flex:1;min-width:0}
.pf-avatar{position:relative;z-index:2;flex-shrink:0;width:76px;height:76px;
      border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
      background:var(--panel2);border:2px solid rgba(3,255,141,.35)}
.pf-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Beim Überfahren wächst der ganze Kreis über seinen Platz hinaus — per transform,
   damit das Layout nicht springt. Ursprung oben rechts: das Bild wächst nach innen
   in die Karte und bleibt so innerhalb der Lightbox sichtbar. */
@media(hover:hover){
  .pf-avatar:not(.placeholder){cursor:zoom-in;transform-origin:top right;
      transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,
                 border-color .28s ease}
  .pf-avatar:not(.placeholder):hover{transform:scale(2.3);z-index:6;
      border-color:var(--accent);box-shadow:0 10px 34px rgba(0,0,0,.5)}
  /* In der Empfängerliste sitzt das Bild links — von dort nach rechts aufziehen. */
  .pf-avatar.small:not(.placeholder){transform-origin:left center}
  .pf-avatar.small:not(.placeholder):hover{transform:scale(2.6)}
}
/* Kleine Variante für Listen. */
.pf-avatar.small{width:40px;height:40px;border-width:1.5px}
.pf-avatar.small.placeholder svg{width:24px;height:24px}
/* Ohne Foto: gestrichelter Rand und Piktogramm — der fehlende Eintrag soll auffallen. */
.pf-avatar.placeholder{border-style:dashed;border-color:var(--line);color:var(--muted)}
.pf-avatar.placeholder svg{width:44px;height:44px}
.pf-head h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.2px}
.pf-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pf-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:9999px;
      font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
      color:var(--muted);border:1px solid var(--line)}
.pf-badge.accent{color:var(--accent-text);background:var(--accent-soft);
      border-color:rgba(3,255,141,.35)}
.pf-city{margin:8px 0 0;font-size:13px;color:var(--muted)}

/* Drei kurze Buttons, die zusammen in eine Zeile passen. */
.pf-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pf-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:9999px;
      border:1.5px solid var(--line);font-size:13px;font-weight:700;white-space:nowrap;
      color:var(--text);text-decoration:none;
      transition:border-color .15s,background .15s,color .15s}
.pf-btn svg{flex-shrink:0;opacity:.85}
.pf-btn.primary svg{opacity:1}
/* Nummer und Adresse im Klartext unter den Buttons. */
.pf-section p.pf-contact,.pf-contact{margin:10px 0 0;font-size:12.5px;color:var(--muted);
      word-break:break-word;user-select:all}
@media(hover:hover){ .pf-btn:hover{border-color:var(--accent);color:var(--accent-text);
      background:var(--accent-soft)} }
.pf-btn.primary{background:var(--cta);color:var(--cta-ink);border-color:transparent;
      box-shadow:0 0 14px rgba(3,255,141,.25)}
@media(hover:hover){ .pf-btn.primary:hover{background:var(--cta-hover);color:var(--cta-ink)} }

.pf-section{margin-top:22px}
.pf-section h4{margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.8px;
      text-transform:uppercase;color:var(--accent-text)}
.pf-section p{margin:0;font-size:14px;line-height:1.55}

/* Anfahrt */
.pf-dist{display:flex;flex-direction:column;gap:8px}
.pf-dist-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
      padding:9px 12px;background:var(--accent-soft);border:1px solid rgba(3,255,141,.22);
      border-radius:9px}
.pf-dist-from{font-size:13px;font-weight:700;min-width:150px}
/* Drehort-Zeile: die eigentliche Frage, daher kräftiger abgesetzt. */
.pf-dist-row.project{background:var(--cta);border-color:transparent;
      box-shadow:0 0 14px rgba(3,255,141,.22)}
.pf-dist-row.project .pf-dist-from,
.pf-dist-row.project .pf-dist-val,
.pf-dist-row.project .pf-dist-meta{color:var(--cta-ink)}
.pf-dist-row.project .pf-dist-meta{opacity:.75}
.pf-dist-val{font-size:15px;font-weight:800;color:var(--accent-text)}
.pf-dist-meta{font-size:12px;color:var(--muted)}
.pf-dist-msg{font-size:13px;color:var(--muted)}
/* Ladeanzeige der Strecken-Berechnung */
.pf-loading{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);
      padding:9px 12px;background:var(--accent-soft);border:1px solid rgba(3,255,141,.22);
      border-radius:9px}
.spinner{flex-shrink:0;width:15px;height:15px;border-radius:50%;
      border:2px solid rgba(3,255,141,.25);border-top-color:var(--accent);
      animation:spin .8s linear infinite}
@media (prefers-reduced-motion: reduce){
  .spinner{animation-duration:2s}
  .iconbtn.busy svg{animation-duration:2s}
}
.pf-dist-msg.err{color:var(--err)}
.pf-dist-src{margin:2px 0 0;font-size:11px;color:var(--muted);opacity:.75}

/* Notizen */
.pf-notes{display:flex;flex-direction:column;gap:8px}
.pf-note{padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
      border-radius:9px}
.pf-note-label{display:block;font-size:10px;font-weight:800;letter-spacing:.6px;
      text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pf-note p{margin:0;font-size:13.5px;line-height:1.55}

.pf-id{margin:20px 0 0;font-size:10.5px;color:var(--muted);opacity:.7;letter-spacing:.5px}

/* ---------- Anfragen ---------- */
.req-detail{margin-top:16px;padding:14px 16px;background:var(--panel2);
      border:1px solid var(--line);border-radius:10px}
.req-detail h4{margin:0 0 8px;font-size:13px;font-weight:800}
.req-text p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--muted)}
.req-text p:last-child{margin-bottom:0}

/* Auswahlleiste über der Tabelle */
.pickbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
      flex-wrap:wrap;margin-top:16px;padding:10px 14px;border-radius:10px;
      background:var(--accent-soft);border:1px solid rgba(3,255,141,.3)}
.pickbar-info{font-size:12.5px;font-weight:650;color:var(--accent-text)}
.pickbar-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Grüner Handlungs-Chip — nur dort, wo wirklich etwas ausgelöst wird. */
.chip.accent{background:var(--cta);color:var(--cta-ink);border-color:transparent}
@media(hover:hover){ .chip.accent:hover:not(:disabled){background:var(--cta-hover);
      color:var(--cta-ink)} }
.chip:disabled{opacity:.45;cursor:default}

/* Auswahlspalte erscheint nur, wenn eine Anfrage gewählt ist. */
table.datatable:not(.picking) .pickcell{display:none}
table.datatable .pickcell{width:34px;text-align:center}
table.datatable .pickcell input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* ---------- Anfrage versenden ---------- */
.lightbox-inner.wide{max-width:680px}
.mail-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.mail-step{padding:3px 10px;border-radius:9999px;font-size:10.5px;font-weight:800;
      letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
      border:1px solid var(--line)}
.mail-step.active{color:var(--accent-ink);background:var(--cta);border-color:transparent}
.mail-step.done{color:var(--accent-text);background:var(--accent-soft);
      border-color:rgba(3,255,141,.35)}

.mail-people{display:flex;flex-direction:column;gap:6px}
.mail-person{display:flex;align-items:center;gap:12px;padding:10px 12px;
      background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.mail-person-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mail-person-name{font-size:13.5px;font-weight:700}
.mail-person-meta{font-size:11.5px;color:var(--muted)}
.mail-person-mail{font-size:12px;color:var(--accent-text);word-break:break-all}
.mail-person-mail.warn{color:var(--warn)}
/* Entfernen-Kreuz in der Empfängerliste — anders als im Eingabefeld nicht absolut. */
.clearbtn.static{position:static;transform:none;flex-shrink:0}

.mail-tabs{display:flex;flex-wrap:wrap;gap:6px}
/* ebenfalls mit p davor — gleiche Ursache wie bei p.mail-done */
.mail-note,.pf-section p.mail-note{margin:14px 0 0;font-size:12px;color:var(--muted)}
.mail-note.demo{color:var(--warn)}
.mail-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:22px}
#mailBody{min-height:260px;font-size:13.5px;line-height:1.55}
/* Betreff steht zwischen Namens-Chips und Textfeld — hier braucht es Luft. */
.field.subject{margin:22px 0 20px}
.field.subject label{margin-bottom:2px}
#mailSubject{font-size:14.5px;font-weight:650}

/* Empfängeradresse: die wichtigste Zeile des Schritts, daher gross und abgesetzt. */
.mail-to{display:flex;flex-direction:column;gap:2px;margin-top:14px;padding:11px 14px;
      background:var(--accent-soft);border:1px solid rgba(3,255,141,.3);border-radius:10px}
.mail-to-label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
      color:var(--muted)}
.mail-to-mail{font-size:16px;font-weight:800;color:var(--accent-text);word-break:break-all}
.mail-to-who{font-size:12px;color:var(--muted)}
.mail-to.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);
      border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.mail-to.warn .mail-to-mail{font-size:14px;color:var(--warn)}

/* Bestätigungsschritt bekommt bewusst viel Luft — hier wird nur gelesen. */
#mailStep3 .pf-section{margin-top:32px}
/* Als p.mail-done geschrieben, weil `.pf-section p{margin:0}` sonst gewinnt
   (höhere Spezifität) und der Abstand zur Empfängerbox verschluckt wird. */
.pf-section p.mail-done{display:flex;flex-direction:column;gap:4px;margin:0 0 34px;
      font-size:14.5px;font-weight:700;line-height:1.5;color:var(--accent-text)}
/* Betreff in eigener Zeile, etwas ruhiger als die Anzahl darüber. */
.mail-done-subject{font-weight:650;color:var(--text)}
.mail-done-list{margin:0;padding:18px 18px 18px 38px;display:flex;flex-direction:column;
      gap:11px;font-size:13px;line-height:1.5;color:var(--muted);
      background:var(--panel2);border:1px solid var(--line);border-radius:10px}
.mail-done-list li.warn{color:var(--warn)}
/* Bestätigung nach dem Versenden. */
.pf-section p.mail-sent{margin:26px 0 0;padding:12px 14px;border-radius:10px;
      font-size:13.5px;font-weight:700;color:var(--accent-text);
      background:var(--accent-soft);border:1px solid rgba(3,255,141,.35)}
#mailStep3 .mail-note{margin-top:24px;line-height:1.55}
#mailStep3 .mail-actions{margin-top:32px}

/* ---------- Datenpflege (Formular) ---------- */
/* Deutlich abgesetzt von der Kontaktzeile — andere Handlung, andere Ebene. */
.pf-edit{margin-top:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.form-grid .field{margin-bottom:0}
/* Lange Freitexte über die ganze Breite. */
.form-grid .field.wide{grid-column:1 / -1}
.form-grid textarea{min-height:56px}
@media(max-width:560px){ .form-grid{grid-template-columns:1fr} }

.mail-note.ok{color:var(--accent-text)}
.mail-note.err{color:var(--err)}
.mail-note.busy{color:var(--muted)}

/* Sicherheitsabfrage vor dem Schreiben. */
.form-confirm{margin-top:22px;padding:14px 16px;border-radius:10px;
      background:color-mix(in srgb,var(--warn) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.form-confirm-text{margin:0;font-size:13px;line-height:1.55;color:var(--text)}
.form-confirm .mail-actions{margin-top:16px}

/* ---------- Glossar ---------- */
.gl-list{display:flex;flex-direction:column;gap:2px;margin-top:20px}
.gl-item{padding:11px 0;border-top:1px solid var(--line)}
.gl-item:first-child{border-top:none;padding-top:0}
.gl-term{margin:0 0 3px;font-size:14px;font-weight:800;color:var(--accent-text)}
/* Ausgeschriebene Form hinter der Abkürzung, in der Textfarbe. */
.gl-full{margin-left:8px;font-weight:650;color:var(--text)}
.gl-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

.foot{max-width:1280px;margin:0 auto;padding:2px 16px 8px;color:var(--muted);font-size:11.5px;
      text-align:center;letter-spacing:.3px;opacity:.7}
.foot b{font-weight:700}

@media(max-width:480px){
  header{padding:calc(20px + env(safe-area-inset-top)) 16px 16px}
  header img.logo{height:56px}
  .card{padding:18px 16px 20px}
  .btn{flex-basis:100%}
  .lightbox{padding:10px}
  .lightbox-inner{padding:22px 18px 18px}
  /* Auf dem Handy etwas kleiner, damit Name und Badges daneben Platz behalten. */
  .pf-avatar{width:62px;height:62px}
  .pf-avatar.placeholder svg{width:36px;height:36px}
  /* Auch auf dem Handy in einer Reihe — die Beschriftungen sind kurz genug. */
  .pf-btn{flex:0 1 auto;padding:8px 12px;font-size:12.5px}
  .pf-dist-from{min-width:0;flex-basis:100%}
}

/* Nutzer mit reduzierter Bewegung: Deko-Animationen aus */
@media (prefers-reduced-motion: reduce){
  .card,body::before,body::after,.bgfx{animation:none!important}
}
@media print{
  body::before,body::after,.bgfx{display:none!important}
}