/* KURTH Kundenportal – Markenregeln wie Kurth Web (gemeinsam/marke.css): Schwarz/Weiss, Grau nur funktional,
   League Spartan (lokal), 8-pt-Raster, eckig, keine Schatten, keine Verläufe. */
@font-face { font-family:"League Spartan"; src:url("schrift/LeagueSpartan-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"League Spartan"; src:url("schrift/LeagueSpartan-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
:root { --schwarz:#000; --ink2:#1A1A1A; --grau:#6E6E6E; --linie:#D9D9D9; --flaeche:#F2F2F2; --radius:2px; --schrift:"League Spartan", Arial, sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; background:#fff; color:var(--schwarz); font-family:var(--schrift); font-size:16px; line-height:1.5; }
body { min-height:100vh; display:flex; flex-direction:column; }
[hidden] { display:none !important; }
a { color:inherit; }
h1 { font-size:clamp(26px,3.2vw,40px); line-height:1.1; letter-spacing:-.02em; margin:0 0 16px; }
h2 { font-size:20px; margin:40px 0 16px; padding-top:24px; border-top:1px solid var(--linie); }
.kp-wrap { max-width:1120px; margin:0 auto; padding-inline:16px; width:100%; }
.kp-haupt { flex:1; padding-block:40px 64px; outline:none; }
.kp-eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grau); margin:0 0 8px; }
.kp-text { margin:0 0 24px; }
.kp-grau { color:var(--grau); }
.kp-klein { font-size:14px; }
.kp-hinweis { background:var(--flaeche); padding:16px; border-radius:var(--radius); margin:0 0 16px; }

/* Kopf und Fuss */
.kp-kopf { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--linie); }
.kp-kopf-zeile { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kp-marke { display:flex; align-items:center; gap:14px; text-decoration:none; }
.kp-quadrat { display:block; width:34px; height:34px; }
.kp-titel { font-weight:700; font-size:16px; letter-spacing:.02em; }
.kp-konto { display:flex; align-items:center; gap:16px; font-size:14px; }
.kp-konto-text { color:var(--grau); }
.kp-fuss { border-top:1px solid var(--linie); padding-block:24px; font-size:13px; color:var(--grau); }

/* Knöpfe und Formulare */
.kp-primaer, .kp-sekundaer { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:var(--radius);
  font-family:var(--schrift); font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
.kp-primaer { background:var(--schwarz); color:#fff; border:1px solid var(--schwarz); }
.kp-primaer:hover { background:var(--ink2); }
.kp-primaer:disabled { opacity:.4; cursor:not-allowed; }
.kp-sekundaer { background:#fff; color:var(--schwarz); border:1px solid var(--schwarz); }
.kp-sekundaer:hover { background:var(--flaeche); }
.kp-link { background:none; border:0; padding:0; font-family:var(--schrift); font-size:14px; font-weight:700; color:var(--schwarz); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.kp-karte { border:1px solid var(--linie); border-radius:var(--radius); padding:32px 24px; }
.kp-schmal { max-width:480px; margin:24px auto; }
.kp-formular { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.kp-formular label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; }
.kp-formular input { font-family:var(--schrift); font-size:16px; min-height:48px; padding:0 12px; border:1px solid var(--grau); border-radius:var(--radius); background:#fff; color:var(--schwarz); }
.kp-formular input:focus { outline:2px solid var(--schwarz); outline-offset:1px; }
:focus-visible { outline:2px solid var(--schwarz); outline-offset:2px; }
.kp-fehler { border:1px solid var(--schwarz); border-left-width:4px; padding:12px 16px; margin:0 0 16px; }
.kp-warnung { border:1px solid var(--schwarz); border-left-width:4px; background:var(--flaeche); padding:12px 16px; margin:0 0 24px; }

/* Übersicht */
.kp-kopfzeile { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.kp-kopfzeile h1 { margin:0; }
.kp-reiter { display:flex; gap:24px; border-bottom:1px solid var(--linie); margin:8px 0 24px; }
.kp-reiter button { background:none; border:0; border-bottom:2px solid transparent; padding:8px 0; margin-bottom:-1px; font-family:var(--schrift); font-size:15px; font-weight:700; color:var(--grau); cursor:pointer; }
.kp-reiter button[aria-selected="true"] { color:var(--schwarz); border-bottom-color:var(--schwarz); }
.kp-tabelle { width:100%; border-collapse:collapse; font-size:15px; }
.kp-tabelle th { text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grau); font-weight:700; padding:8px 12px 8px 0; border-bottom:1px solid var(--schwarz); }
.kp-tabelle td { padding:14px 12px 14px 0; border-bottom:1px solid var(--linie); vertical-align:top; }
.kp-auftrag-link { font-weight:700; text-underline-offset:4px; }
.kp-stand { display:inline-block; font-size:13px; font-weight:700; padding:3px 10px; border:1px solid var(--schwarz); border-radius:var(--radius); white-space:nowrap; }
.kp-stand-abgeschlossen, .kp-stand-storniert { border-color:var(--linie); color:var(--grau); }
.kp-stand-bereit, .kp-stand-teilgeliefert { background:var(--schwarz); color:#fff; }
.kp-termin { font-size:12px; font-weight:700; letter-spacing:.04em; padding:1px 6px; border-radius:var(--radius); margin-left:4px; }
.kp-termin-bestaetigt { background:var(--schwarz); color:#fff; }
.kp-termin-voraussichtlich { border:1px dashed var(--grau); color:var(--grau); }

/* Auftrag */
.kp-eckdaten { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px 24px; margin:24px 0; padding:0; }
.kp-eckdaten dt { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--grau); font-weight:700; }
.kp-eckdaten dd { margin:4px 0 0; }
.kp-aktion { border:2px solid var(--schwarz); padding:16px; font-weight:700; }
.kp-positionen { display:flex; flex-direction:column; gap:16px; }
.kp-position { border:1px solid var(--linie); border-radius:var(--radius); padding:16px; }
.kp-position header { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.kp-pos-nr { font-size:13px; color:var(--grau); font-weight:700; }
.kp-pos-stand { margin-left:auto; font-size:13px; font-weight:700; }
.kp-pos-mass, .kp-mengen { margin:6px 0 0; font-size:15px; }
.kp-schritte { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; }
.kp-schritt { display:flex; flex-direction:column; border:1px solid var(--linie); border-radius:var(--radius); padding:6px 10px; font-size:14px; min-width:96px; }
.kp-schritt small { font-size:12px; color:var(--grau); }
.kp-schritt-erledigt { border-color:var(--schwarz); }
.kp-schritt-erledigt small::before { content:"✓ "; color:var(--schwarz); }
.kp-schritt-laeuft { background:var(--schwarz); color:#fff; border-color:var(--schwarz); }
.kp-schritt-laeuft small { color:#fff; }
.kp-schritt-entfaellt { text-decoration:line-through; color:var(--grau); }
.kp-liste { list-style:none; margin:0; padding:0; }
.kp-liste li { padding:12px 0; border-bottom:1px solid var(--linie); display:flex; flex-wrap:wrap; gap:4px 12px; }
.kp-dok { font-weight:700; text-underline-offset:4px; }

/* Schmale Bildschirme: Tabelle als Karten */
@media (max-width: 720px) {
  .kp-tabelle thead { display:none; }
  .kp-tabelle, .kp-tabelle tbody, .kp-tabelle tr, .kp-tabelle td { display:block; width:100%; }
  .kp-tabelle tr { border-bottom:1px solid var(--linie); padding:12px 0; }
  .kp-tabelle td { border:0; padding:4px 0; display:flex; gap:12px; }
  .kp-tabelle td::before { content:attr(data-titel); flex:0 0 120px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--grau); font-weight:700; }
  .kp-pos-stand { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }