/* ═══════════════════════════════════════════════════════════════
   NEOFORMA PORTAL UI v2 – Kundenportal-Designsystem
   Quelle: docs/plans/CC_CUSTOMER_PORTAL_DESIGN_V2.md, Mockup v2
   Keine externen Abhängigkeiten (keine CDNs, keine Icon-Fonts).
   Icons: CpIcon.razor (inline SVG).
   ═══════════════════════════════════════════════════════════════ */

/* ── Schrift: Hanken Grotesk, lokal gehostet ──
   TODO (einmalig): woff2-Dateien von https://fonts.google.com/specimen/Hanken+Grotesk
   herunterladen (Lizenz: SIL OFL) und nach wwwroot/fonts/ legen:
   HankenGrotesk-Regular.woff2 (400), -Medium (500), -SemiBold (600),
   -Bold (700), -ExtraBold (800).
   Bis dahin greift der System-Fallback. */
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;
  src:url('../fonts/HankenGrotesk-Regular.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500;font-display:swap;
  src:url('../fonts/HankenGrotesk-Medium.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:600;font-display:swap;
  src:url('../fonts/HankenGrotesk-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-display:swap;
  src:url('../fonts/HankenGrotesk-Bold.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:800;font-display:swap;
  src:url('../fonts/HankenGrotesk-ExtraBold.woff2') format('woff2')}

/* ── Token-Layer ── */
:root{
  --g:#00A072;             /* neoforma-green */
  --g-deep:#00815C;
  --g-tint:#EAF6F1;
  --ink:#101613;
  --ink-2:#4B5550;
  --ink-3:#98A29C;
  --paper:#FAFBFA;
  --card:#FFFFFF;
  --line:#E7EAE8;
  --line-strong:#D5DAD7;
  --ok:#0CBC87; --warn:#E8A317; --err:#F1556C; --info:#39AFD1;
  --r:6px;
  --font:'Hanken Grotesk',-apple-system,'Segoe UI',Roboto,sans-serif;
  --shadow:0 1px 2px rgba(16,22,19,.04),0 12px 32px -18px rgba(16,22,19,.14);
  --w:1560px;              /* Container-Breite */
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:var(--font);background:var(--paper);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;flex-direction:column}
.num{font-variant-numeric:tabular-nums}
a{color:var(--g-deep)}
svg.cp-i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-3px}
svg.cp-i--sm{width:14px;height:14px}

/* ── Impersonation-Banner ── */
.cp-impersonation{background:var(--warn);color:#3B2A05;padding:8px 40px;
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:.86rem;font-weight:600}

/* ═══════════ TOPBAR ═══════════ */
.cp-top{background:#fff;border-bottom:1px solid var(--line)}
.cp-top__in{max-width:var(--w);margin:0 auto;padding:0 40px;height:60px;
  display:flex;align-items:center;gap:44px}
.cp-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
/* Platzhalter-Mark – durch echtes neoforma-Logo (SVG) ersetzen */
.cp-logo__mark{width:30px;height:30px;border-radius:7px;background:var(--g);
  display:grid;place-items:center}
.cp-logo__mark svg{width:16px;height:16px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round}
.cp-logo__t{font-weight:700;font-size:1.06rem;letter-spacing:-.015em;white-space:nowrap}
.cp-logo__t span{font-weight:400;color:var(--ink-3)}
.cp-nav{display:flex;gap:2px;margin-right:auto;height:100%}
.cp-nav a{display:flex;align-items:center;padding:0 16px;text-decoration:none;
  color:var(--ink-2);font-weight:500;font-size:.9rem;
  border-bottom:2px solid transparent;transition:color .15s}
.cp-nav a:hover{color:var(--ink)}
.cp-nav a.active{color:var(--ink);border-bottom-color:var(--g);font-weight:600}
.cp-top__u{display:flex;align-items:center;gap:16px;font-size:.86rem;color:var(--ink-2)}
.cp-top__u .cp-sep{width:1px;height:22px;background:var(--line)}
.cp-btn-x{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:.86rem;font-weight:500;color:var(--ink-2);padding:6px 4px}
.cp-btn-x:hover{color:var(--err)}

/* ═══════════ PAGE-HEAD-BAND ═══════════ */
.cp-band{background:#fff;border-bottom:1px solid var(--line)}
.cp-band__in{max-width:var(--w);margin:0 auto;padding:30px 40px 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cp-crumb{font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.cp-band h1{font-weight:800;font-size:1.7rem;letter-spacing:-.025em;line-height:1.15}
.cp-band__sub{color:var(--ink-2);font-size:.92rem;margin-top:4px}
.cp-status-chip{display:flex;align-items:center;gap:10px;background:var(--g-tint);
  border:1px solid #CBE9DD;border-radius:99px;padding:9px 18px;
  font-weight:600;font-size:.88rem;color:var(--g-deep)}
.cp-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px rgba(12,188,135,.2);animation:cp-pulse 2.4s infinite}
.cp-dot--warn{background:var(--warn);box-shadow:0 0 0 4px rgba(232,163,23,.2)}
@keyframes cp-pulse{50%{box-shadow:0 0 0 7px rgba(12,188,135,.06)}}

/* ═══════════ LAYOUT / GRID ═══════════ */
.cp-main{max-width:var(--w);margin:0 auto;padding:32px 40px 72px;width:100%;flex:1}
.cp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.cp-span-12{grid-column:span 12}
.cp-span-8{grid-column:span 8}
.cp-span-6{grid-column:span 6}
.cp-span-4{grid-column:span 4}
/* Unabhängige Spalten-Flüsse (Haupt-/Seitenspalte stapeln eigenständig) */
.cp-col{display:flex;flex-direction:column;gap:16px}
.cp-col .cp-shead{margin-top:14px}
.cp-col .cp-shead:first-child{margin-top:0}
.cp-narrow{grid-column:span 12;max-width:720px;margin:0 auto;width:100%}

/* ═══════════ STAT-LEISTE ═══════════ */
.cp-stats{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cp-stat{padding:20px 26px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.cp-stat:last-child{border-right:none}
.cp-stat__l{font-size:.76rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:7px}
.cp-stat__l svg.cp-i{width:15px;height:15px;color:var(--g)}
.cp-stat__v{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.cp-stat__s{font-size:.8rem;color:var(--ink-3)}
.cp-stat__s.ok{color:var(--ok);font-weight:600}
.cp-stat__s.warn{color:var(--warn);font-weight:600}

/* ═══════════ SECTION-KOPF ═══════════ */
.cp-shead{grid-column:span 12;display:flex;align-items:center;
  justify-content:space-between;margin-top:14px}
.cp-shead h2{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.cp-shead h2::before{content:"";width:3px;height:18px;background:var(--g);border-radius:2px}
.cp-lnk{color:var(--g-deep);text-decoration:none;font-size:.86rem;font-weight:600;
  display:inline-flex;align-items:center;gap:5px}
.cp-lnk:hover{text-decoration:underline}

/* ═══════════ KARTEN + TABELLE ═══════════ */
.cp-card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.cp-card--pad{padding:22px 24px}
.cp-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.cp-tbl thead th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding:12px 22px;
  border-bottom:1px solid var(--line-strong);background:#FCFDFC}
.cp-tbl tbody td{padding:15px 22px;border-bottom:1px solid var(--line);vertical-align:middle}
.cp-tbl tbody tr:last-child td{border-bottom:none}
.cp-tbl tbody tr{transition:background .12s}
.cp-tbl tbody tr:hover{background:var(--g-tint)}
.cp-dname{font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.cp-dname svg.cp-i{color:var(--ink-3);width:16px;height:16px}
.cp-grade{display:inline-grid;place-items:center;width:28px;height:28px;
  border-radius:6px;font-weight:800;font-size:.85rem}
.cp-grade--a{background:rgba(12,188,135,.12);color:var(--ok)}
.cp-grade--b{background:rgba(57,175,209,.12);color:var(--info)}
.cp-grade--c{background:rgba(232,163,23,.15);color:var(--warn)}
.cp-grade--d,.cp-grade--f{background:rgba(241,85,108,.12);color:var(--err)}
.cp-tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;
  padding:4px 11px;border-radius:4px}
.cp-tag--ok{background:rgba(12,188,135,.1);color:var(--ok)}
.cp-tag--warn{background:rgba(232,163,23,.14);color:var(--warn)}
.cp-tag--err{background:rgba(241,85,108,.1);color:var(--err)}
.cp-tag--info{background:rgba(57,175,209,.12);color:var(--info)}
.cp-tag--mut{background:#F1F3F2;color:var(--ink-2)}
.cp-tag svg.cp-i{width:13px;height:13px}
.cp-act{color:var(--g-deep);text-decoration:none;font-weight:600;font-size:.85rem;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.cp-act:hover{text-decoration:underline}

/* ═══════════ LISTEN-ZEILEN (Tickets etc.) ═══════════ */
.cp-row{display:flex;align-items:center;gap:16px;padding:16px 24px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:background .12s}
.cp-row:last-child{border-bottom:none}
.cp-row:hover{background:var(--g-tint)}
.cp-state{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cp-state--open{background:var(--info)}
.cp-state--wait{background:var(--warn)}
.cp-state--done{background:var(--ok)}
.cp-row__b{flex:1;min-width:0}
.cp-row__t{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cp-row__m{font-size:.79rem;color:var(--ink-3);margin-top:1px;display:block}
.cp-row__nr{font-size:.78rem;font-weight:600;color:var(--ink-3)}
.cp-row > svg.cp-i{color:var(--ink-3);width:16px;height:16px}

/* ═══════════ BUTTONS ═══════════ */
.cp-btn{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff;
  border:none;cursor:pointer;border-radius:var(--r);padding:11px 18px;
  font-family:var(--font);font-weight:600;font-size:.9rem;text-decoration:none;
  transition:background .15s}
.cp-btn:hover{background:var(--g-deep)}
.cp-btn--ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)}
.cp-btn--ghost:hover{background:var(--g-tint);color:var(--ink);border-color:var(--g)}
.cp-btn--danger{background:var(--err)}
.cp-btn--danger:hover{background:#D63C55}
.cp-btn--sm{padding:7px 13px;font-size:.82rem}
.cp-btn:disabled{opacity:.55;cursor:default}
.cp-btn--on{background:var(--g-tint);color:var(--g-deep);border-color:var(--g)}
.cp-filters{display:flex;gap:8px;flex-wrap:wrap}

/* Seitenspalte: CTA + Kontakt gestapelt */
.cp-side{display:flex;flex-direction:column;gap:24px}

/* ═══════════ CTA (dunkel) + KONTAKT ═══════════ */
.cp-cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:26px;
  position:relative;overflow:hidden}
.cp-cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 55%,rgba(0,160,114,.25))}
.cp-cta h3{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.cp-cta p{font-size:.86rem;color:rgba(255,255,255,.65);margin-bottom:18px}
.cp-cta .cp-btn{position:relative}
.cp-contact h4{font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.cp-crow{display:flex;align-items:center;gap:11px;font-size:.88rem;
  padding:7px 0;color:var(--ink-2)}
.cp-crow svg.cp-i{color:var(--g);width:16px;height:16px}
.cp-crow b{color:var(--ink);font-weight:600}

/* ═══════════ FORMULARE (Login, Ticket-Neu, DNS-Editor) ═══════════ */
.cp-field{margin-bottom:18px}
.cp-label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.cp-input,.cp-select,.cp-textarea{width:100%;font-family:var(--font);font-size:.92rem;
  color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:10px 13px;transition:border-color .15s,box-shadow .15s}
.cp-input:focus,.cp-select:focus,.cp-textarea:focus{outline:none;border-color:var(--g);
  box-shadow:0 0 0 3px rgba(0,160,114,.15)}
.cp-hint{font-size:.76rem;color:var(--ink-3);margin-top:4px}
.cp-error{background:rgba(241,85,108,.08);border:1px solid rgba(241,85,108,.3);
  color:var(--err);border-radius:var(--r);padding:11px 14px;font-size:.87rem;
  display:flex;align-items:center;gap:9px;margin-bottom:16px}

/* Auth-Seiten (Login, 2FA, Invite) – zentrierte Karte */
.cp-auth{flex:1;display:grid;place-items:center;padding:40px 20px}
.cp-auth__card{width:100%;max-width:420px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:34px 36px}
.cp-auth__logo{display:flex;justify-content:center;margin-bottom:22px}
.cp-auth__card h1{font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
  text-align:center;margin-bottom:4px}
.cp-auth__sub{text-align:center;font-size:.87rem;color:var(--ink-2);margin-bottom:24px}
.cp-auth__hint{text-align:center;font-size:.82rem;color:var(--ink-3);margin-top:18px}
.cp-auth__hint a{color:var(--g-deep)}
.cp-btn--block{width:100%;justify-content:center}
.cp-check{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink-2);
  cursor:pointer;margin-bottom:18px}
.cp-check input{accent-color:var(--g);width:16px;height:16px}
.cp-qr{display:grid;place-items:center;margin:4px 0 16px}
.cp-qr img{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff}
.cp-secret{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;font-size:.8rem;color:var(--ink-3)}
.cp-secret code{font-family:ui-monospace,'Consolas',monospace;letter-spacing:.08em;
  background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:8px 10px;color:var(--ink)}

/* ═══════════ DNS-DETAILSEITE / EDITOR ═══════════ */
.cp-ok{background:rgba(12,188,135,.09);border:1px solid rgba(12,188,135,.3);
  color:var(--g-deep);border-radius:var(--r);padding:11px 14px;font-size:.87rem;
  display:flex;align-items:center;gap:9px;margin-bottom:16px}
.cp-break{word-break:break-all}
.cp-mono2{font-family:ui-monospace,'Consolas','Segoe UI Mono',monospace;font-size:.86rem}
.cp-field-row{display:flex;gap:16px;flex-wrap:wrap}
.cp-field-row .cp-field{flex:1;min-width:170px}
.cp-editor-h{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:16px;
  display:flex;align-items:center;gap:9px}
.cp-editor-actions{display:flex;gap:10px;margin-top:6px}
.cp-iact{background:none;border:none;cursor:pointer;color:var(--ink-3);
  padding:6px;border-radius:5px;display:inline-flex;align-items:center}
.cp-iact:hover{background:var(--g-tint);color:var(--ink)}
.cp-iact--danger:hover{color:var(--err);background:rgba(241,85,108,.08)}
.cp-lockmark{color:var(--ink-3);display:inline-flex;align-items:center}
tr.cp-locked td{background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(16,22,19,.02) 9px,rgba(16,22,19,.02) 18px)}

/* ═══════════ TICKET-VERLAUF (Chat) ═══════════ */
.cp-thread{display:flex;flex-direction:column;gap:16px}
.cp-msg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px}
.cp-msg--me{background:var(--g-tint);border-color:#CBE9DD}
.cp-msg__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.cp-msg__who{font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:9px}
.cp-msg__when{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.cp-msg__body{font-size:.92rem;color:var(--ink);line-height:1.6}
.cp-msg__body :first-child{margin-top:0}
.cp-msg__body :last-child{margin-bottom:0}
.cp-whotag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:4px;background:var(--ink);color:#fff}
.cp-whotag--me{background:var(--g);color:#fff}
.cp-reply{margin-top:20px}
.cp-reply__actions{display:flex;justify-content:flex-end;margin-top:12px}

/* ═══════════ EMPTY-STATE ═══════════ */
.cp-empty{text-align:center;padding:56px 20px;color:var(--ink-3)}
.cp-empty svg.cp-i{width:36px;height:36px;stroke-width:1.4;margin-bottom:12px;opacity:.6}
.cp-empty__t{font-weight:600;color:var(--ink-2)}

/* ═══════════ MODAL ═══════════ */
.cp-modal-backdrop{position:fixed;inset:0;background:rgba(16,22,19,.45);
  z-index:100;display:grid;place-items:center;padding:20px;
  animation:cp-fade .15s ease}
@keyframes cp-fade{from{opacity:0}to{opacity:1}}
.cp-modal{width:100%;max-width:560px;background:var(--card);border-radius:var(--r);
  box-shadow:0 24px 64px -16px rgba(16,22,19,.35);overflow:hidden;
  animation:cp-modal-in .18s ease}
@keyframes cp-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.cp-modal__head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--line)}
.cp-modal__head h3{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:9px}
.cp-modal__head h3 svg.cp-i{color:var(--g)}
.cp-modal__x{background:none;border:none;cursor:pointer;color:var(--ink-3);
  padding:6px;border-radius:4px;display:grid;place-items:center}
.cp-modal__x:hover{background:var(--g-tint);color:var(--ink)}
.cp-modal__body{padding:22px 24px;max-height:70vh;overflow-y:auto}
.cp-modal__foot{display:flex;justify-content:flex-end;gap:10px;
  padding:16px 24px;border-top:1px solid var(--line);background:#FCFDFC}
.cp-modal--danger .cp-modal__head h3 svg.cp-i{color:var(--err)}

/* Mehrzeilige/lange Werte (TXT/DKIM/SPF) */
.cp-textarea--mono{font-family:'Cascadia Mono','Consolas',monospace;font-size:.84rem;
  line-height:1.5;resize:vertical;min-height:96px;word-break:break-all}
.cp-val{font-family:'Cascadia Mono','Consolas',monospace;font-size:.82rem;
  display:inline-block;max-width:340px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle;color:var(--ink-2)}

/* ═══════════ FOOTER ═══════════ */
.cp-foot{border-top:1px solid var(--line);background:#fff;margin-top:auto}
.cp-foot__in{max-width:var(--w);margin:0 auto;padding:20px 40px;
  display:flex;align-items:center;gap:20px;font-size:.8rem;color:var(--ink-3)}
.cp-foot__in a{color:var(--ink-2);text-decoration:none}
.cp-foot__in a:hover{color:var(--g-deep)}
.cp-foot__r{margin-left:auto;display:flex;gap:20px}

/* ═══════════ ZUGÄNGLICHKEIT ═══════════ */
:focus-visible{outline:2px solid var(--g);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1100px){
  .cp-stats{grid-template-columns:repeat(2,1fr)}
  .cp-stat:nth-child(2){border-right:none}
  .cp-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cp-span-8,.cp-span-6,.cp-span-4{grid-column:span 12}
  .cp-top__in,.cp-band__in,.cp-main,.cp-foot__in{padding-left:20px;padding-right:20px}
  .cp-nav{display:none}
}