/* KG Media Factory · Outreach — Design-System
   Farb-Basis wie in den übrigen KGMF-Apps: Signal-Grün #03FF8D auf Schwarz #0A0A0A,
   Karten #141414, Rahmen #2A2A2A. Zum Anpassen an einen Kunden reicht es, die beiden
   :root-Blöcke unten zu ändern.
   Diese Datei ist die entschlackte Fassung des Freelancer-Stylesheets: Tabelle, Karten,
   Formular, Lightbox und Anmeldeseite sind geblieben — Schnellzugriff, Steckbrief-Fotos,
   Anfahrt-Kacheln, Kachelraster und Scorecard sind weg, weil es sie hier nicht gibt. */
: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);
  /* Sagt dem Browser, in welcher Helligkeit er eigene Bedienelemente zeichnen soll —
     betrifft Autofill, Scrollbalken und die Passwort-Augen-Symbole. */
  color-scheme:light;
}
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);
  color-scheme:dark;
}
/* 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 ----------
   Logo, Titel und Team-Bild bilden eine Gruppe, mittig über dem Content. Das Logo stand
   früher in einer eigenen Zeile darüber — davor gesetzt spart es eine Zeile Höhe.
   Design-Schalter, Nutzer und Rollen-Badges stehen rechtsbündig in .headright. */
header{padding:calc(18px + env(safe-area-inset-top)) 20px 16px;
      display:flex;justify-content:center;text-align:left;position:relative}
/* Rechte Spalte: Design-Schalter oben, darunter Nutzer und Rollen — rechtsbündig.
   Bewusst absolut: im Fluss würde ihre Breite die Gruppe aus der Mitte schieben. */
.headright{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;
      display:flex;flex-direction:column;align-items:flex-end;gap:8px}
header img.logo{height:58px;width:auto;max-width:240px;object-fit:contain;flex-shrink:0;
      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}
/* Die Gruppe selbst zentriert; der Text darin bleibt linksbündig, damit Titel und
   Unterzeile aneinander ausgerichtet sind. */
header .titlerow{display:flex;align-items:center;justify-content:center;gap:16px;
      flex-wrap:wrap}
/* Angemeldete Person und Rollen in der rechten Spalte. */
.whoami{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
      font-size:11.5px;color:var(--muted)}
.whoami-top{display:flex;align-items:center;gap:8px}
/* Bewusst auf die ID gemünzt: die Rollen-Badges sind ebenfalls Spans und sollen
   weder abgeschnitten noch mit Ellipse versehen werden. */
.whoami #whoamiMail{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Rollen als dezente Pillen mit dünner Linie — zeigt auf einen Blick, welche
   Berechtigungen im Token stehen. */
.whoami-roles{display:flex;flex-wrap:wrap;gap:4px}
.rolebadge{padding:1px 7px;border:1px solid var(--line);border-radius:9999px;
      font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      color:var(--muted);white-space:nowrap;cursor:default}
/* Ab hier reicht die Breite nicht mehr, um die zentrierte Gruppe und die rechte Spalte
   nebeneinander zu setzen, ohne dass sie sich überlagern: die Gruppe braucht rund 780 px,
   die rechte Spalte bis zu 330 px, und bei echter Zentrierung zählt der breitere Abstand
   doppelt. Darunter also stapeln — Gruppe mittig, rechte Spalte rechtsbündig darunter. */
@media(max-width:1440px){
  header{flex-direction:column;align-items:center;gap:10px}
  .headright{position:static;align-self:flex-end}
}
@media(max-width:640px){
  .whoami #whoamiMail{max-width:none}
}
/* Seitennavigation neben dem Titel — echte Seiten statt Lightboxen, deshalb als eigene
   grüne Buttons und nicht als dezenter .linkbtn-Textlink.
   Kein fester px-Wert: align-items default (stretch) zieht jeden Button auf die Breite
   des längsten Labels — der Container selbst sitzt an dessen Inhalt. */
.navstack{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.navbtn{display:inline-flex;align-items:center;justify-content:flex-start;gap:7px;
      padding:6px 16px;border-radius:9999px;border:1.5px solid transparent;
      font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.1px;
      text-decoration:none;white-space:nowrap;cursor:pointer;
      background:var(--cta);color:var(--cta-ink);box-shadow:0 0 12px rgba(3,255,141,.22);
      transition:background .15s,box-shadow .15s,color .15s,border-color .15s,opacity .15s}
.navbtn svg{flex-shrink:0;opacity:.85}
@media(hover:hover){ .navbtn:hover{background:var(--cta-hover);
      box-shadow:0 0 18px rgba(3,255,141,.35)} }
.navbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,255,141,.3)}

.switch{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 ---------- */
/* Breit genug für die Tabelle, ohne dass die Karten auseinanderfallen. */
.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}
/* Alle Textfelder statt einer Aufzählung einzelner type-Werte: type=email, type=tel und
   type=password fielen sonst durchs Raster und wurden vom Browser in seiner eigenen
   Optik gezeichnet (im Dark Mode ein hellgrauer Kasten) — genau der Unterschied, der in
   der Bearbeitenmaske bei E-Mail und Telefonnummer und auf der Anmeldeseite zu sehen war.
   Ausgenommen sind nur Ankreuz- und Auswahlfelder, die eigene Größen haben. */
input:not([type=checkbox]):not([type=radio]),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)}
/* Vom Browser oder einem Passwort-Manager ausgefüllte Felder: Chrome legt sonst einen
   hellen Hintergrund darüber, den man nur per Inset-Schatten übermalen kann — Farbe
   direkt setzen greift dort nicht. Die sehr lange Transition verhindert das kurze
   Aufblitzen des hellen Standardwerts. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
      -webkit-box-shadow:0 0 0 1000px var(--panel2) inset!important;
      box-shadow:0 0 0 1000px var(--panel2) inset!important;
      -webkit-text-fill-color:var(--text)!important;
      caret-color:var(--text);
      transition:background-color 9999s ease-out 0s}
input:autofill{background:var(--panel2);color:var(--text)}
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)}
/* Beim Laden steht der Spinner vor dem Text, deshalb hier als Zeile ausrichten.
   Nur im Ladezustand — die Fertig- und Fehlermeldungen bleiben normaler Textfluss,
   damit die Quellenangabe daneben auf Mobil weiter umbrechen kann. */
.status.busy{display:flex;align-items:center;gap:8px}
/* 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}

/* 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)}

.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.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}

/* ---------- Datentabelle ---------- */
/* Kein eigener Scrollbalken für die Tabelle — gescrollt wird nur die Seite. Waagerecht
   darf der Rahmen scrollen, damit alle Spalten auf schmalen Geräten erreichbar bleiben;
   eine Höhenbegrenzung gibt es nicht, 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} }
.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 .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}
}

/* Erste Spalte als Auslöser der Detailansicht — sieht wie ein Link aus, ist aber ein
   Button, weil sie keine eigene Adresse hat. */
.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}
/* FLP-Nummer unter dem Namen: eigene Zeile, am Icon des Namens ausgerichtet. */

/* ---------- Lightbox (Rahmen der Detailansicht) ---------- */
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)}

/* ---------- Detailansicht (Inhalt der Lightbox) ----------
   Bewusst schlicht: Kopf mit Titel und Badges, darunter Feld für Feld. Die Felder kommen
   so, wie n8n sie liefert — deshalb ein Aufbau, der mit beliebig vielen und beliebig
   langen Werten zurechtkommt, statt einer festen Spaltenaufteilung. */
.pf-head{padding-right:40px}
.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-sub{margin:8px 0 0;font-size:13px;color:var(--muted)}

.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)}
/* Ein Feld je Zeile: Bezeichnung klein und grau darüber, Wert darunter in Textgröße.
   Lange Werte (Notizen, Mailverläufe) brechen um, statt die Lightbox zu sprengen. */
.pf-fields{display:flex;flex-direction:column;gap:10px}
.pf-field{padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
      border-radius:9px}
.pf-field-label{display:block;font-size:10px;font-weight:800;letter-spacing:.6px;
      text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pf-field-value{margin:0;font-size:13.5px;line-height:1.55;white-space:pre-wrap;
      overflow-wrap:break-word;word-break:break-word}
.pf-field-value a{color:var(--accent-text);text-decoration:none}
@media(hover:hover){ .pf-field-value a:hover{text-decoration:underline} }
/* Ladepunkt — dreht sich per @keyframes spin (siehe oben bei den Karten). */
.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}

/* Hinweiszeile in der Detailansicht (etwa: keine gefüllten Felder). */
.pf-msg{margin:0;font-size:13px;color:var(--muted)}
.pf-msg.err{color:var(--err)}

/* ---------- Fuß ---------- */
.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}
/* Anmeldeseite: eine schmale Karte, mittig — die Tabellenbreite braucht sie nicht. */
.wrap.login{max-width:460px;padding-top:24px}

@media(max-width:480px){
  /* Rechts bleibt Platz für den Design-Schalter, sonst läuft der Titel darunter. */
  header{padding:calc(20px + env(safe-area-inset-top)) 66px 16px 16px}
  header img.logo{height:50px}
  .card{padding:18px 16px 20px}
  .btn{flex-basis:100%}
  .lightbox{padding:10px}
  .lightbox-inner{padding:22px 18px 18px}
}

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