/* Kundenportal: Ergänzungen zu prototyp.css (Basis wird als /portal/assets/basis.css mitgeliefert). */
body.tk-portal{min-height:100vh;display:flex;flex-direction:column}
#portal-app{flex:1;display:flex;flex-direction:column}
#portal-app.pt-ganz{display:block}
.pt-start{min-height:100vh}

/* Kopf */
.p-top-in .pt-logo{display:flex;align-items:center}
.p-top-in img.logo-l,.p-top-in img.logo-d{width:150px;height:auto;display:block}
.p-top-in img.logo-d{display:none}
[data-theme="dark"] .p-top-in img.logo-l{display:none}
[data-theme="dark"] .p-top-in img.logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .p-top-in img.logo-l{display:none}:root:not([data-theme="light"]) .p-top-in img.logo-d{display:block}}
.p-tabs a .tcnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--coral);color:#0a1018;font-size:11px;font-weight:700;margin-left:4px}
.preview-bar .pt-vorschau-ende{margin-left:6px;color:#eef3f9;border:1px solid rgba(255,255,255,.25);border-radius:7px;padding:2px 9px;font-size:12.5px}
.preview-bar .pt-vorschau-ende:hover{border-color:#fff}

/* Anmelden */
.login-art .pt-logo-w{width:190px;height:auto;position:relative;z-index:1}
.login-art .claim{position:relative;z-index:1}
.login-box form{margin:0}
.login-box .field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.login-box .field input{width:100%;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);padding:0 13px;font-size:15px}
.login-box .field input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.sent-ok.pt-an{display:flex;gap:10px;align-items:flex-start}
.pt-fehler{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--coral-t);color:var(--coral-text);font-size:13.5px;margin:14px 0}
.login-box > .btn + .login-note,.login-box .pt-fehler + .btn{margin-top:14px}
.pt-vorschau-wahl{margin-top:22px}
.pt-vorschau-wahl .card-h h2{display:flex;gap:8px;align-items:center;font-size:15px}
.pt-vorschau-wahl p{margin:0 0 12px}
.pt-firmen{display:flex;flex-wrap:wrap;gap:6px}

/* Inhalt */
.p-main{width:100%}
.p-hello h1 .pn{color:var(--coral)}
.pt-kacheln{margin-bottom:18px}
.svc{color:inherit}
.svc .s-ic.pt-blau{background:var(--blue-t);color:var(--blue-text)}
.svc .s-ic.pt-koralle{background:var(--coral-t);color:var(--coral-text)}
.pt-intro{margin:0 0 16px;max-width:62ch}
.pt-hbar{grid-template-columns:minmax(90px,170px) minmax(0,1fr) 40px}
.pt-tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pt-tabelle .tbl{width:100%}
.pt-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pt-kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:8px 18px;margin:0;font-size:14px}
.pt-kv dt{color:var(--muted)}
.pt-kv dd{margin:0;font-weight:500}
.pt-vertraege{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pt-ok{display:inline-flex;gap:5px;align-items:center;color:var(--blue-text);font-weight:600}
.pt-hinweis{font-size:13px;margin:14px 0 0}
.pt-hinweis a{color:var(--blue-text);font-weight:600}
.pt-leer{text-align:center;padding:42px 24px}
.pt-leer .pt-leer-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--blue-t);color:var(--blue-text);margin-bottom:14px}
.pt-leer h2{font-size:19px}
.pt-leer p{max-width:52ch;margin:8px auto 0}
.pt-skelett{display:grid;gap:18px}
.pt-skelett .skelett-block{height:120px;background:linear-gradient(90deg,var(--surface) 0,var(--surface-2) 50%,var(--surface) 100%);background-size:200% 100%;animation:ptGlanz 1.4s linear infinite;border:1px solid var(--line-soft)}
.pt-skelett .skelett-block.gross{height:280px}
@keyframes ptGlanz{to{background-position:-200% 0}}
.thumbs button:disabled{opacity:.45;cursor:not-allowed}
.report .btn{flex:none}

/* Diagramm-Tooltip */
.pt-chart{position:relative}
.pt-tip{position:absolute;top:6px;background:var(--ink-2);color:#eef3f9;font-size:12px;padding:5px 9px;border-radius:8px;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow)}

/* Fuß */
.pt-fuss{max-width:1180px;width:100%;margin:0 auto;padding:18px 28px 28px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--faint);border-top:1px solid var(--line-soft)}
.pt-fuss a{color:var(--muted)}
.pt-fuss a:hover{color:var(--text)}

@media (max-width:900px){
  .p-top-in img.logo-l,.p-top-in img.logo-d{width:124px}
  .pt-fuss{padding:16px}
  .contact{grid-template-columns:minmax(0,1fr)}
  .contact .ph{width:84px;height:96px;font-size:26px}
  .p-hello .seg{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .rate{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  .report{flex-wrap:wrap;padding:14px 16px}
  .hide-m{display:none}
  .pt-kv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Urteil oben auf der Übersicht (H14): Ampel wie Heute v3, grün = im Ziel */
:root{--pt-gut:#1f9d6b;--pt-mittel:#d99a12;--pt-schlecht:#e5484d;--pt-offen:#9aa6b2}
[data-theme="dark"]{--pt-gut:#3cc48d;--pt-mittel:#f0b43a;--pt-schlecht:#ff6b70;--pt-offen:#7a8ba0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pt-gut:#3cc48d;--pt-mittel:#f0b43a;--pt-schlecht:#ff6b70;--pt-offen:#7a8ba0}}
.pt-urteil{padding:20px 22px;margin-bottom:18px;border-left:4px solid var(--pt-ampel,var(--pt-offen))}
.pt-ampel-gut{--pt-ampel:var(--pt-gut)}.pt-ampel-mittel{--pt-ampel:var(--pt-mittel)}.pt-ampel-schlecht{--pt-ampel:var(--pt-schlecht)}.pt-ampel-offen{--pt-ampel:var(--pt-offen)}
.pt-urteil-kopf{display:flex;align-items:center;gap:10px}
.pt-urteil-kopf h2{font-size:20px;letter-spacing:-.02em;margin:0}
.pt-punkt{width:12px;height:12px;border-radius:50%;background:var(--pt-ampel);box-shadow:0 0 0 4px color-mix(in srgb,var(--pt-ampel) 22%,transparent);flex:none}
.pt-urteil-satz{margin:8px 0 0;font-size:15px;line-height:1.5;max-width:70ch}
.pt-teile{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:72ch}
.pt-teile li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.pt-punkt.klein{width:9px;height:9px;margin-top:7px;box-shadow:none}
.pt-einschaetzung{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.pt-ein-l{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pt-einschaetzung p{margin:6px 0 4px;font-size:15px;line-height:1.5;max-width:70ch;white-space:pre-line}
.pt-ein-von{font-size:12.5px;color:var(--faint)}
.pt-urteil .btn{margin-top:14px}

/* Handy (H27): untere Leiste statt Reiterleiste, Anruf-Knopf statt Reiter „Ihr Ansprechpartner“ */
.pt-leiste{display:none}
.pt-mehr .row{width:100%;text-align:left;color:inherit}
@media (max-width:900px){
  .p-tabs{display:none}
  .p-top-in .pt-kopf-knoepfe{display:none}
  .p-main{padding-bottom:110px}
  .pt-fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .pt-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line)}
  .pt-leiste a{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;font-size:11.5px;font-weight:600;color:var(--muted)}
  .pt-leiste a.on{color:var(--text);background:var(--ink-t)}
  .pt-leiste .pt-li{position:relative;display:inline-flex}
  .pt-leiste .pt-ln{position:absolute;top:-5px;right:-11px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--coral);color:#0a1018;font-size:10.5px;font-weight:700;display:grid;place-items:center}
  .pt-leiste a.pt-anruf{flex:0 0 auto;padding:0 14px;background:var(--blue);color:#0a1018}
}

@media (prefers-reduced-motion:reduce){.pt-skelett .skelett-block{animation:none}.p-main{animation:none}}

/* Logo des Kunden im Kopf (08.10.2026): festes Quadrat, Initialen als Rückfall, Bild auf Weiß (auch im Dunkelmodus) */
.p-top-in .pt-pl{display:inline-flex;align-items:center;gap:10px}
.pt-klogo{position:relative;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;overflow:hidden;background:var(--blue-t);color:var(--blue-text);font:700 11px/1 "Schibsted Grotesk",sans-serif;letter-spacing:-.02em}
.pt-klogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
.pt-klogo.mit-bild{box-shadow:inset 0 0 0 1px var(--line-soft)}
.pt-klogo-mobil{display:none}
@media (max-width:900px){.p-top-in .pt-pl{display:none}.pt-klogo-mobil{display:inline-flex;margin-left:auto}.pt-klogo-mobil .pt-klogo{width:32px;height:32px;font-size:12px}}