/* ============================================================
   BEST LIFE KUNDENPORTAL — Styles
   Tokens strikt aus dem Brand Guide v2 (wie css/styles.css).
   ============================================================ */

:root {
  --pink:        #C0006E;
  --pink-deep:   #8A0050;
  --aubergine:   #1A0818;
  --black:       #0D080D;
  --glow:        #3D1A3A;
  --lavender:    #F4F0F4;
  --gray:        #998899;
  --white:       #FFFFFF;

  --white-72:    rgba(255,255,255,.72);
  --pink-glow:   rgba(192,0,110,.35);
  --line:        rgba(153,136,153,.22);
  --card:        rgba(244,240,244,.04);

  --font-display: "Arial Black", "Arial Bold", Arial, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  --fs-800: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  --fs-700: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  --fs-600: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-400: clamp(.95rem, .92rem + .2vw, 1.0625rem);
  --fs-300: .8125rem;

  --radius: 3px;
  --radius-card: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: 1.65;
  color: var(--white-72);
  background: var(--aubergine);
  min-height: 100vh;
}

::selection { background: var(--pink); color: var(--white); }

h1, h2, h3 { font-family: var(--font-display); color: var(--white); line-height: 1.15; }

a { color: inherit; }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pink);
}

/* ---------- Login ---------- */
.login {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--glow) 0%, transparent 70%),
    var(--black);
}
.login[hidden] { display: none; }

.login-card {
  width: min(420px, 100%);
  background: var(--aubergine);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  box-shadow: 0 0 80px var(--pink-glow);
}
.login-card img { height: 40px; margin-bottom: 1.5rem; }
.login-card h1 { font-size: var(--fs-700); margin-bottom: .35rem; }
.login-card p  { color: var(--gray); font-size: var(--fs-300); margin-bottom: 1.75rem; }

.login-card label {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-300);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .4rem;
}
.login-card input {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--white);
  font: inherit;
  padding: .75rem .9rem;
  margin-bottom: 1.1rem;
  transition: border-color var(--dur-fast, .22s);
}
.login-card input:focus { outline: none; border-color: var(--pink); }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-300);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--white);
  background: var(--pink);
  border: none; border-radius: var(--radius);
  padding: .85rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: filter .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--pink-deep);
  color: var(--white-72);
}
.btn-sm { padding: .55rem 1rem; }

.login-fehler {
  color: #ff7aa8;
  font-size: var(--fs-300);
  margin: -.5rem 0 .9rem;
}

.login-demo {
  margin-top: 1rem; text-align: center;
  font-size: var(--fs-300); color: var(--gray);
}
.login-demo button {
  background: none; border: none; cursor: pointer;
  color: var(--pink); font: inherit; text-decoration: underline;
}

/* ---------- Layout ---------- */
.portal { display: none; }
.portal.aktiv { display: block; }

.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Sidebar */
.side {
  border-right: 1px solid var(--line);
  padding: 2rem 1.5rem;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--black) 0%, var(--aubergine) 40%);
}
.side img { height: 34px; align-self: flex-start; margin-bottom: 2.5rem; }
.side nav { display: flex; flex-direction: column; gap: .25rem; }
.side nav a {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--gray);
  font-size: var(--fs-300);
  letter-spacing: .06em;
  transition: color .22s, background .22s;
}
.side nav a:hover { color: var(--white); background: var(--card); }
.side nav a.aktiv { color: var(--white); background: var(--card); box-shadow: inset 2px 0 0 var(--pink); }

.side-foot {
  margin-top: auto;
  font-size: var(--fs-300); color: var(--gray);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.side-foot button {
  background: none; border: none; color: var(--pink);
  font: inherit; font-size: var(--fs-300); cursor: pointer; padding: 0;
  text-decoration: underline;
}

/* Main */
main { padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 5rem; }

section { margin-bottom: 4.5rem; scroll-margin-top: 2rem; }
section > h2 { font-size: var(--fs-700); margin: .3rem 0 1.5rem; }

/* ---------- Kopf ---------- */
.kopf { margin-bottom: 3rem; }
.kopf h1 { font-size: var(--fs-800); margin: .3rem 0 .5rem; }
.kopf p { color: var(--gray); }
.kopf strong { color: var(--white); font-weight: normal; }

.hinweis {
  margin-top: 1.25rem;
  border: 1px solid var(--pink-deep);
  border-left: 3px solid var(--pink);
  border-radius: var(--radius-card);
  background: var(--card);
  padding: .9rem 1.1rem;
  font-size: var(--fs-300);
  color: var(--white-72);
}

/* ---------- Karten-Grids ---------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { font-size: var(--fs-400); }
.card p { font-size: var(--fs-300); color: var(--gray); }
.card .cta { margin-top: auto; padding-top: .75rem; }

/* ---------- Kontingente ---------- */
.tank .zahlen {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: .25rem .75rem;
}
.tank .rest {
  font-family: var(--font-mono);
  font-size: var(--fs-600);
  color: var(--white);
}
.tank .rest b { color: var(--pink); font-weight: normal; }
.balken {
  height: 6px; border-radius: 3px;
  background: rgba(153,136,153,.18);
  overflow: hidden;
}
.balken i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  border-radius: 3px;
  box-shadow: 0 0 12px var(--pink-glow);
}

/* ---------- Pipeline ---------- */
.pipeline { display: flex; flex-direction: column; gap: 0; }
.stufe {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 1rem;
  padding-bottom: 1.6rem;
  position: relative;
}
.stufe::before {
  content: "";
  position: absolute; left: 13px; top: 26px; bottom: 0;
  width: 2px; background: var(--line);
}
.stufe:last-child::before { display: none; }
.punkt {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .7rem;
  border: 2px solid var(--line);
  color: var(--gray);
  background: var(--aubergine);
  z-index: 1;
}
.stufe.done  .punkt { border-color: var(--pink-deep); color: var(--pink); }
.stufe.aktiv .punkt { border-color: var(--pink); background: var(--pink); color: var(--white); box-shadow: 0 0 16px var(--pink-glow); }
.stufe .label { display: block; margin-bottom: .1rem; }
.stufe.offen .label { color: var(--gray); }
.stufe h3 { font-size: var(--fs-400); }
.stufe.offen h3 { color: var(--gray); }
.stufe p { font-size: var(--fs-300); color: var(--gray); max-width: 60ch; }
.stufe.aktiv h3::after {
  content: "HIER STEHEN WIR";
  font-family: var(--font-mono); font-size: .65rem;
  letter-spacing: .15em; color: var(--pink);
  margin-left: .75rem; vertical-align: middle;
}

.steps { margin-top: 2rem; }
.steps h3 { font-size: var(--fs-400); margin-bottom: .75rem; }
.steps ol { list-style: none; counter-reset: s; }
.steps li {
  counter-increment: s;
  padding: .6rem 0 .6rem 2.2rem;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-300);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: .65rem;
  font-family: var(--font-mono); color: var(--pink);
}

/* ---------- Calls ---------- */
.tag {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
  border: 1px solid var(--line); color: var(--gray);
}
.tag.inklusive      { border-color: var(--pink-deep); color: var(--pink); }
.tag.freigeschaltet { background: var(--pink); border-color: var(--pink); color: var(--white); }
.card .mit { color: var(--white-72); font-size: var(--fs-300); }
.card .preis { font-family: var(--font-mono); color: var(--white); font-size: var(--fs-300); }

/* ---------- Rechnungen ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-300); }
th, td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-mono); font-weight: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray); font-size: .7rem;
}
td { color: var(--white-72); }
td.betrag { font-family: var(--font-mono); color: var(--white); }
.status {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
}
.status.bezahlt { color: var(--lavender); border: 1px solid var(--line); }
.status.offen   { color: var(--white); background: var(--pink-deep); }

/* ---------- Kontakt ---------- */
.kontakt-card a { color: var(--pink); text-decoration: none; font-size: var(--fs-300); }
.kontakt-card a:hover { text-decoration: underline; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 1.25rem;
  }
  .side img { margin-bottom: 1rem; }
  .side nav { flex-direction: row; flex-wrap: wrap; gap: .35rem; }
  .side nav a { padding: .45rem .7rem; }
  .side nav a.aktiv { box-shadow: inset 0 -2px 0 var(--pink); }
  .side-foot { display: none; }
  main { padding-top: 1.75rem; }
}