/* ==========================================================================
   115grad Kundenportal – Design angelehnt an das Hauptsite-Theme
   (Farben, Fonts und Header-Optik aus styles.css von 115grad.com)
   ========================================================================== */

:root{
  --ink:#0a0a0d;
  --ink-soft:#4a4a52;
  --paper:#f3f1eb;
  --paper-dim:#e8e4d9;
  --paper-line:#d8d3c5;
  --signal:#ff4419;
  --signal-2:#ff2f7e;
  --violet:#8b5cf6;
  --lime:#c8ff4d;
  --muted-on-dark:rgba(243,241,235,.62);
  --faint-on-dark:rgba(243,241,235,.4);
  --line-dark:rgba(243,241,235,.14);
  --line-light:rgba(10,10,13,.12);
  --grad-accent:linear-gradient(100deg,var(--signal) 0%,var(--signal-2) 55%,var(--violet) 100%);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:'Space Grotesk',Arial,Helvetica,sans-serif;
  --font-body:'Inter',Arial,Helvetica,sans-serif;
  --ok:#1f6f5c;
  --ok-soft:#e3f3ee;
  --err:#b3261e;
  --err-soft:#fbe9e7;
  font-size:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper)}
body{
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:104px;
}
a{color:var(--signal);text-decoration:none}
em{font-style:normal}
button,input,textarea,select{font:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
::selection{background:var(--signal);color:#fff}

/* ---------- Header (identisch zur Hauptseite) ---------- */
.site-header{
  position:fixed;z-index:50;top:18px;left:2vw;right:2vw;height:66px;
  padding:0 14px 0 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border:1px solid var(--line-dark);border-radius:38px;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  background:rgba(10,10,13,.9);color:var(--paper);
}
.brand{justify-self:start;display:flex;align-items:baseline;gap:10px}
.logo{display:inline-flex;align-items:flex-start;font-family:var(--font-display);font-size:26px;line-height:1;letter-spacing:-.04em;font-weight:700;color:var(--paper)}
.logo i{font-style:normal;color:var(--signal);font-size:.55em;margin:.05em 0 0 .06em}
.brand-suffix{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-on-dark)}
.site-header nav{display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.06em;justify-self:center;color:var(--muted-on-dark)}
.site-header nav a{position:relative;padding:4px 0;color:var(--muted-on-dark);transition:color .2s ease}
.site-header nav a:hover{color:var(--paper)}
.header-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.header-cta,.header-login{display:inline-flex;align-items:center;border-radius:28px;padding:11px 18px;font-size:11px;letter-spacing:.04em;font-weight:600;transition:transform .3s var(--ease),background .25s ease,color .25s ease,border-color .25s ease}
.header-cta{background:var(--paper);color:var(--ink)}
.header-login{border:1px solid rgba(243,241,235,.32);color:var(--paper)}
.header-login:hover,.header-cta:hover{transform:translateY(-2px)}
.header-login:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (max-width:760px){
  .site-header{grid-template-columns:auto 1fr;padding:0 10px 0 20px}
  .site-header nav{display:none}
  .brand-suffix{display:none}
  .header-actions{gap:6px}
  .header-login{display:none}
  .header-cta,.header-login{padding:10px 14px}
}

/* ---------- Layout ---------- */
main.wrap{max-width:980px;margin:0 auto;padding:36px 24px 90px}
main.wrap.narrow{max-width:460px}
h1{font-size:1.7rem;margin:0 0 6px}
.lede{color:var(--ink-soft);margin:0 0 28px}

/* ---------- Cards / Forms ---------- */
.card{background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius-lg);padding:32px 34px;margin-bottom:22px;box-shadow:0 1px 2px rgba(10,10,13,.02)}
label{display:block;font-weight:600;font-size:.86rem;margin:16px 0 6px;font-family:var(--font-body)}
label.req::after{content:" *";color:var(--signal);font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--paper-line);border-radius:var(--radius-sm);
  font-size:.95rem;font-family:inherit;background:var(--paper);color:var(--ink);
  transition:border-color .2s ease,background .2s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);background:#fff}
textarea{resize:vertical;min-height:90px}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:4px}
fieldset{border:none;padding:0;margin:32px 0 0}
fieldset legend{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);padding:0 0 10px;border-bottom:2px solid var(--paper-dim);width:100%;margin-bottom:8px}
.checkbox-line{display:flex;align-items:center;gap:8px;margin-top:14px}
.checkbox-line input{width:auto}
.checkbox-line label{margin:0;font-weight:500}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:600px){.grid-2{grid-template-columns:1fr}}
.form-actions{margin-top:30px;display:flex;gap:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:30px;padding:14px 24px;font-size:11px;letter-spacing:.05em;font-weight:600;text-transform:uppercase;cursor:pointer;border:none;transition:transform .3s var(--ease),background .25s ease,color .25s ease,border-color .25s ease}
.btn-primary{background:var(--grad-accent);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line-light)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}
.btn-secondary:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-sm{padding:9px 16px;font-size:10px}

/* ---------- Flash messages ---------- */
.flash-wrap{max-width:980px;margin:0 auto;padding:0 24px}
.flash{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:22px;font-size:.92rem;font-weight:500}
.flash-success{background:var(--ok-soft);color:var(--ok)}
.flash-error{background:var(--err-soft);color:var(--err)}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--paper-line);font-size:.9rem}
th{color:var(--ink-soft);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
tr:hover td{background:var(--paper)}

/* ---------- Badges (Auftragsstatus) ---------- */
.badge{display:inline-block;padding:5px 13px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.02em}
.badge-neu{background:rgba(255,68,25,.12);color:var(--signal)}
.badge-in_bearbeitung{background:rgba(139,92,246,.14);color:var(--violet)}
.badge-wartet_auf_kunde{background:#fff4d6;color:#8a6300}
.badge-fertig{background:var(--ok-soft);color:var(--ok)}
.badge-storniert{background:var(--paper-dim);color:var(--ink-soft)}

/* ---------- Misc ---------- */
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty-state a{font-weight:600}

/* ---------- Footer ---------- */
.portal-footer{max-width:980px;margin:0 auto;padding:30px 24px 50px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-top:1px solid var(--paper-line)}
.portal-footer a{color:var(--ink-soft)}
.portal-footer a:hover{color:var(--signal)}