/* ==========================================================================
   Revier — internes Team-Cockpit von Frontvertrieb
   CI "Schwelle": Nachtschwarz + warmer Sand, einziger Akzent Violett→Pink.
   Dashboard-Dialekt der Marken-Formensprache:
     - HAUSNUMMERN statt Icon-Bibliothek: die Navigation traegt Mono-Nummern
       01–08 als Plaketten, wie Klingelschilder an einer Haustuer.
     - TUER-SILHOUETTE (oben rund, unten Standfuss) fuer Avatare, Badges
       und den Login — nie das uniforme Rundum-Radius-Einerlei.
     - LICHTSPALT nur am Login und im Hero, nie hinter Fliesstext.
   Kontraste: Fliesstext dunkel = Sand 82% (>= 8:1 auf Night), Fliesstext
   hell = #4F453A auf Sand (7:1), Pink-Varianten je Untergrund (FF7BC2 dunkel,
   93206F hell). Werte/Labels tragen Textfarben, nie die Akzentfarbe allein.
   ========================================================================== */

:root{
  --sand:      #EDE2CE;
  --sand-hi:   #F6EFE1;
  --sand-dim:  rgba(237,226,206,.82);
  --sand-dim2: rgba(237,226,206,.68);
  --ink:       #17120E;
  --ink-soft:  #4F453A;
  --pink:      #FF3EA5;
  --pink-lt:   #FF7BC2;
  --pink-dk:   #93206F;
  --violet:    #C13FE0;
  --void:      #0B070B;
  --night:     #100B10;
  --warn:      #F0A078;
  --line:      rgba(237,226,206,.12);
  --line-2:    rgba(237,226,206,.2);
  --line-lt:   rgba(23,18,14,.14);

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --rad: 14px;
  --rad-tur: 17px 17px 4px 4px;
  --grad: linear-gradient(120deg, #C13FE0, #FF3EA5 78%);
  --side-w: 252px;
}

*{box-sizing:border-box}
html{background:var(--void)}
body{
  margin:0; background:var(--void); color:var(--sand);
  font-family:var(--f-body); font-size:16px; line-height:1.58;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a:focus-visible, button:focus-visible{outline:2px solid var(--pink); outline-offset:3px}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--pink); outline-offset:1px}
h1,h2,h3{font-family:var(--f-display); font-weight:700; font-stretch:110%; letter-spacing:-.03em; margin:0; line-height:1.05}
[hidden]{display:none !important}

/* Mono-Kleinlabel ("Klingelschild-Schrift") */
.klab{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sand-dim2);
  margin:0 0 .9rem;
}
.klab--lt{color:var(--pink-lt)}
.klab--dk{color:var(--pink-dk)}
.klab--warn{color:var(--warn)}

/* Tuer-Glyphe */
.tur{display:inline-block; width:20px; height:20px; flex:none;
  background:url(assets/tuer-pink.svg) center/contain no-repeat}
.tur--sm{width:15px; height:15px}
.tur--lg{width:34px; height:34px}

/* Prototyp-Punkt (pulsierend, sparsam) */
.proto-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--warn); margin-right:8px; vertical-align:1px;
  animation:proto 2.6s ease-in-out infinite;
}
@keyframes proto{0%,100%{opacity:1}50%{opacity:.35}}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-mono); font-size:.82rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 26px; border-radius:12px 12px 4px 4px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn--grad{background:var(--grad); color:#140A11}
.btn--grad:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(255,62,165,.32)}
.btn--full{width:100%}
.btn__arr{transition:transform .18s ease}
.btn:hover .btn__arr{transform:translateX(4px)}

/* --- Formularfelder ------------------------------------------------------- */
.fld{display:block; margin-bottom:16px}
.fld__lab{
  display:block; font-family:var(--f-mono); font-size:.65rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sand-dim2);
  margin-bottom:7px;
}
.fld input, .fld select, .fld textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  background:rgba(237,226,206,.06); border:1px solid var(--line-2);
  color:var(--sand); font-family:var(--f-body); font-size:1rem;
}
.fld input::placeholder, .fld textarea::placeholder{color:rgba(237,226,206,.38)}
/* helle Variante (auf Sand-Karten) */
.fld--lt .fld__lab{color:var(--ink-soft)}
.fld--lt input, .fld--lt select, .fld--lt textarea{
  background:var(--sand-hi); border:1px solid var(--line-lt); color:var(--ink);
}
.fld--lt input::placeholder, .fld--lt textarea::placeholder{color:rgba(23,18,14,.38)}
.fld--lt select{appearance:auto}
.fld textarea{resize:vertical}

/* ==========================================================================
   LOGIN — die Schwelle vor dem Cockpit
   ========================================================================== */
.login{
  min-height:100vh; display:grid; place-items:center; padding:32px 20px;
  position:relative; overflow:hidden; isolation:isolate;
}
.login__slit{
  position:absolute; top:-12%; width:46vw; height:130%; z-index:-1; opacity:.5;
  background:linear-gradient(120deg, rgba(193,63,224,.34), rgba(255,62,165,.06) 62%, transparent);
  filter:blur(2px);
}
.login__slit--l{left:-18vw; clip-path:polygon(0 0, 100% 18%, 62% 100%, 0 100%)}
.login__slit--r{right:-20vw; transform:scaleX(-1);
  clip-path:polygon(0 0, 100% 12%, 70% 100%, 0 100%); opacity:.32}
.login__card{
  width:min(430px, 100%); background:var(--night);
  border:1px solid var(--line-2); border-bottom-width:0;
  border-radius:26px 26px 6px 6px;   /* Tuerblatt */
  padding:40px 36px 30px; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.login__card::after{  /* Tuerschwelle als Lichtkante statt Unterkante */
  content:""; position:absolute; left:-1px; right:-1px; bottom:0; height:3px;
  background:var(--grad); border-radius:2px;
}
.login__brand{display:flex; align-items:center; gap:13px; margin-bottom:2.2rem}
.login__brand strong{font-family:var(--f-display); font-stretch:112%; font-size:1.12rem; letter-spacing:-.02em; display:block}
.login__brand-sub{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pink-lt)}
.login__hl{font-size:clamp(2.5rem,7vw,3.1rem); letter-spacing:-.04em; line-height:.95; margin-bottom:.7rem}
.login__lede{color:var(--sand-dim); margin:0 0 1.8rem; font-size:1.02rem}
.login__note{
  margin:1.4rem 0 0; font-size:.8rem; color:var(--sand-dim2); line-height:1.5;
  border-top:1px dashed var(--line); padding-top:1rem;
}

/* ==========================================================================
   APP-RAHMEN
   ========================================================================== */
.app{display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh}

/* --- Seitenleiste --------------------------------------------------------- */
.side{
  background:var(--void); border-right:1px solid var(--line);
  padding:22px 16px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh; min-width:0;
}
.side__brand{display:flex; align-items:center; gap:11px; padding:4px 10px}
.side__brand-txt strong{font-family:var(--f-display); font-stretch:112%; font-size:1.02rem; letter-spacing:-.02em; display:block; line-height:1.1}
.side__brand-txt span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink-lt)}

.nav{display:flex; flex-direction:column; gap:4px; flex:1; overflow:auto; min-width:0}
.nav__it{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:10px 10px; border-radius:11px 11px 4px 4px; color:var(--sand-dim);
  border:1px solid transparent; transition:background .15s ease, color .15s ease;
}
.nav__it:hover{background:rgba(237,226,206,.05); color:var(--sand)}
.nav__no{
  font-family:var(--f-mono); font-size:.68rem; font-weight:500; color:var(--sand-dim2);
  border:1px solid var(--line-2); border-radius:7px 7px 2px 2px;
  padding:3px 6px; min-width:30px; text-align:center; flex:none;
  transition:all .15s ease;
}
.nav__lab{font-size:.95rem}
.nav__cnt{
  margin-left:auto; font-family:var(--f-mono); font-size:.66rem;
  color:var(--sand-dim2);
}
.nav__it.is-on{background:rgba(255,62,165,.1); color:var(--sand-hi); border-color:rgba(255,62,165,.28)}
.nav__it.is-on .nav__no{background:var(--grad); color:#140A11; border-color:transparent; font-weight:500}
.nav__it.is-on .nav__cnt{color:var(--pink-lt)}

.side__user{
  display:flex; align-items:center; gap:11px; border-top:1px solid var(--line);
  padding:16px 6px 2px;
}
.plaque{
  display:inline-grid; place-items:center; width:38px; height:44px; flex:none;
  border-radius:var(--rad-tur); background:var(--grad); color:#140A11;
  font-family:var(--f-mono); font-size:.78rem; font-weight:500;
}
.plaque--line{background:none; border:1.5px solid var(--pink); color:var(--pink-lt)}
.side__user-txt{min-width:0}
.side__user-txt strong{display:block; font-size:.88rem; line-height:1.2}
.side__user-txt span{display:block; font-size:.7rem; color:var(--sand-dim2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side__out{color:var(--sand-dim2); font-size:1rem; padding:6px; margin-left:auto; border-radius:8px}
.side__out:hover{color:var(--warn)}

/* --- Hauptbereich --------------------------------------------------------- */
.main{
  background:var(--night); min-width:0; display:flex; flex-direction:column;
  /* Tuerraster-Hauch: Zellen in Tuerproportion 1:2.2, kaum sichtbar */
  background-image:
    linear-gradient(rgba(237,226,206,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,226,206,.028) 1px, transparent 1px);
  background-size:64px 141px;
}
.top{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:30px 34px 20px; border-bottom:1px solid var(--line);
}
.top__title{font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-.035em}
.top__date{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand-dim2); display:block; margin-top:6px}
.top__proto{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sand-dim2); white-space:nowrap;
  border:1px dashed var(--line-2); border-radius:9px 9px 3px 3px; padding:7px 12px;
}
.tab{padding:28px 34px 20px; animation:tabin .3s ease}
@keyframes tabin{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
.foot{
  margin-top:auto; display:flex; align-items:center; gap:10px;
  padding:18px 34px 24px; color:var(--sand-dim2); font-size:.78rem;
  border-top:1px solid var(--line);
}

/* --- Karten (Grundtypen) --------------------------------------------------- */
.card{
  background:rgba(237,226,206,.045); border:1px solid var(--line);
  border-radius:var(--rad); padding:22px 24px; position:relative; overflow:hidden;
}
.card--sand{background:var(--sand); border-color:transparent; color:var(--ink)}
.card--sand p{color:var(--ink-soft)}
.card--hero{
  background:linear-gradient(150deg, #1C0F1B, var(--night) 58%);
  border-color:rgba(255,62,165,.3);
}
.card--hero::before{ /* Lichtspalt aus der oberen Ecke */
  content:""; position:absolute; top:-30%; right:-6%; width:46%; height:160%;
  background:linear-gradient(200deg, rgba(193,63,224,.3), transparent 62%);
  clip-path:polygon(28% 0, 100% 0, 100% 100%, 58% 100%); pointer-events:none;
}
.card--warn{border-color:rgba(240,160,120,.35); background:rgba(240,160,120,.06)}
.card--warn__txt{margin:0; color:var(--sand-dim); font-size:.92rem}
.card__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.card__hint{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand-dim2)}
.card--sand .card__hint{color:var(--ink-soft)}
.card__hl{font-size:1.45rem; letter-spacing:-.03em; margin-bottom:.5rem}
.card__hl--dk{color:var(--ink)}

/* ==========================================================================
   01 UEBERSICHT — bewusst asymmetrisches Raster
   ========================================================================== */
.ov{
  display:grid; gap:18px;
  grid-template-columns:repeat(6, 1fr);
  grid-template-areas:
    "hero hero hero chart chart chart"
    "k1   k1   k2   k2    k3    k3"
    "feed feed feed feed  feed  feed";
}
.ov__hero{grid-area:hero; display:flex; flex-direction:column; justify-content:center; padding:28px 30px}
.ov__chart{grid-area:chart}
.ov__kpi--a{grid-area:k1}
.ov__kpi--b{grid-area:k2}
.ov__kpi--c{grid-area:k3}
.ov__feed{grid-area:feed}

.ov__hero-row{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.ov__big{
  font-family:var(--f-mono); font-weight:500; font-size:clamp(3.4rem,6vw,5rem);
  line-height:1; letter-spacing:-.04em; color:var(--sand-hi);
}
.ov__hero-sub{margin:.8rem 0 0; color:var(--sand-dim); font-size:.95rem}
.ov__hero-sub strong{color:var(--pink-lt); font-weight:600}
.ov__hero-door{
  position:absolute; right:26px; bottom:-6px; width:74px; height:150px;
  border:1.5px solid rgba(255,62,165,.34); border-bottom:0;
  border-radius:37px 37px 0 0; opacity:.9; pointer-events:none;
}
.ov__hero-door::after{content:""; position:absolute; right:12px; top:52%; width:7px; height:7px; border-radius:50%; background:var(--pink)}
.delta{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
  padding:5px 10px; border-radius:8px 8px 3px 3px; border:1px solid var(--line-2);
  color:var(--sand-dim);
}
.delta--up{color:var(--pink-lt); border-color:rgba(255,62,165,.4)}

.kpi{
  font-family:var(--f-mono); font-weight:500; font-size:2.5rem; line-height:1;
  letter-spacing:-.03em; color:var(--sand-hi); display:block;
}
.kpi small{font-size:1.3rem; color:var(--sand-dim)}
.kpi__sub{display:block; margin-top:.55rem; font-size:.8rem; color:var(--sand-dim2)}

/* Balkendiagramm (eine Serie → keine Legende; Werte in Textfarbe) */
.bars{display:flex; align-items:flex-end; gap:9px; height:150px; margin-top:18px}
.bars__col{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; position:relative}
.bars__val{font-family:var(--f-mono); font-size:.72rem; color:var(--ink); opacity:0}
.bars__col.is-max .bars__val, .bars__col:hover .bars__val{opacity:1}
.bars__bar{
  width:100%; max-width:34px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--violet), var(--pink-dk));
  min-height:3px; transition:filter .15s ease;
}
.bars__col:hover .bars__bar{filter:brightness(1.15)}
.bars__col.is-zero .bars__bar{background:var(--line-lt)}
.bars__day{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.bars__col.is-today .bars__day{color:var(--pink-dk); font-weight:500}

/* Aktivitaeten */
.feed{list-style:none; margin:0; padding:0}
.feed li{
  display:flex; align-items:baseline; gap:14px; padding:11px 2px;
  border-top:1px dashed var(--line); font-size:.92rem;
}
.feed li:first-child{border-top:0}
.feed__t{font-family:var(--f-mono); font-size:.7rem; color:var(--sand-dim2); flex:none; width:86px}
.feed__who{color:var(--pink-lt); font-weight:600}
.feed li span:last-child{color:var(--sand-dim)}

/* ==========================================================================
   02 ERFASSUNG
   ========================================================================== */
.erf{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:start}
.erf__form{padding:28px 30px}
.erf__intro{margin:0 0 1.6rem; font-size:.95rem}
.erf__grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.erf__w2{grid-column:span 2}
.erf__ok{
  margin:1rem 0 0; padding:12px 16px; border-radius:10px;
  background:rgba(147,32,111,.12); border:1px solid rgba(147,32,111,.3);
  color:var(--pink-dk); font-size:.92rem; font-weight:600;
}
.erf__side{display:flex; flex-direction:column; gap:18px}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.steps li{display:flex; gap:15px; padding:13px 0; border-top:1px dashed var(--line); align-items:flex-start}
.steps li:first-child{border-top:0; padding-top:2px}
.steps__no{
  display:inline-grid; place-items:center; width:30px; height:35px; flex:none;
  border-radius:11px 11px 3px 3px; border:1.5px solid var(--pink);
  color:var(--pink-lt); font-family:var(--f-mono); font-size:.8rem; font-weight:500;
}
.steps li div strong{display:block; font-size:.95rem}
.steps li div span{display:block; font-size:.84rem; color:var(--sand-dim2); margin-top:2px}

/* ==========================================================================
   03 KONTAKTE
   ========================================================================== */
.kon__bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:20px}
.seg{
  display:inline-flex; border:1px solid var(--line-2); border-radius:12px 12px 4px 4px;
  padding:4px; gap:4px; background:rgba(237,226,206,.04);
}
.seg__b{
  padding:8px 18px; border-radius:9px 9px 3px 3px; font-family:var(--f-mono);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sand-dim);
}
.seg__b.is-on{background:var(--grad); color:#140A11; font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
  padding:7px 13px; border-radius:9px 9px 3px 3px; border:1px solid var(--line-2);
  color:var(--sand-dim); transition:all .15s ease;
}
.chip b{font-weight:500; color:var(--sand-dim2); margin-left:5px}
.chip:hover{border-color:var(--pink); color:var(--sand)}
.chip.is-on{background:rgba(255,62,165,.12); border-color:var(--pink); color:var(--pink-lt)}
.chip.is-on b{color:var(--pink-lt)}

.leads{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.lead{
  display:grid; grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto;
  gap:6px 18px; align-items:center;
  background:rgba(237,226,206,.045); border:1px solid var(--line);
  border-radius:var(--rad); padding:14px 18px 14px 14px; position:relative;
}
.lead::before{ /* Status-Kante: Tuerspalt links */
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:2px; background:var(--st, var(--line-2));
}
.lead--ok{--st:var(--pink)}
.lead--ki{--st:var(--violet)}
.lead--ne{--st:var(--warn)}
.lead--neu{--st:rgba(237,226,206,.55)}
.lead--storno{--st:rgba(237,226,206,.22)}
.lead__who{display:flex; align-items:center; gap:12px; min-width:0}
.lead__name{font-family:var(--f-display); font-stretch:106%; font-weight:700; font-size:1.02rem; letter-spacing:-.015em}
.lead__meta{font-size:.84rem; color:var(--sand-dim2); line-height:1.45; min-width:0}
.lead__meta a{color:var(--sand-dim); text-decoration-color:var(--line-2)}
.lead__wish{font-size:.8rem; color:var(--sand-dim2)}
.lead__wish b{color:var(--sand-dim); font-weight:600}
.lead__right{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
.lead__date{font-family:var(--f-mono); font-size:.66rem; color:var(--sand-dim2); letter-spacing:.06em}
.lead--storno .lead__name{text-decoration:line-through; text-decoration-color:rgba(237,226,206,.4); color:var(--sand-dim)}

.badge{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 11px; border-radius:8px 8px 3px 3px;
  border:1px solid var(--line-2); color:var(--sand-dim);
}
.badge::before{content:""; width:7px; height:8px; border-radius:3px 3px 1px 1px; background:var(--st, var(--line-2))}
.badge--ok{--st:var(--pink); border-color:rgba(255,62,165,.5); color:var(--pink-lt); background:rgba(255,62,165,.1)}
.badge--ki{--st:var(--violet); border-color:rgba(193,63,224,.5); color:#DB9BEC}
.badge--ne{--st:var(--warn); border-color:rgba(240,160,120,.45); color:var(--warn)}
.badge--neu{--st:rgba(237,226,206,.55); color:var(--sand-dim)}
.badge--storno{--st:rgba(237,226,206,.22); color:var(--sand-dim2)}
.kon__empty{color:var(--sand-dim2); padding:30px 4px; font-size:.95rem}

/* ==========================================================================
   04 MEIN TEAM
   ========================================================================== */
.team{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tm{
  background:rgba(237,226,206,.045); border:1px solid var(--line);
  border-radius:var(--rad); padding:20px 22px;
}
.tm--self{background:linear-gradient(150deg, #1C0F1B, var(--night) 62%); border-color:rgba(255,62,165,.3); grid-column:1 / -1}
.tm__head{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.tm__name{font-size:1.12rem; letter-spacing:-.02em}
.tm__role{display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand-dim2); margin-top:3px}
.tm__trend{margin-left:auto}
.tm__stats{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:14px}
.tm__stat b{display:block; font-family:var(--f-mono); font-weight:500; font-size:1.5rem; color:var(--sand-hi); line-height:1.15}
.tm__stat span{font-size:.72rem; color:var(--sand-dim2)}
.quota{height:7px; border-radius:4px; background:rgba(237,226,206,.1); overflow:hidden}
.quota i{display:block; height:100%; border-radius:4px; background:var(--grad)}
.tm__quota-lab{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.66rem; color:var(--sand-dim2); margin-top:7px}
.tm__quota-lab b{color:var(--sand-dim); font-weight:500}

/* ==========================================================================
   05 STRUKTUR
   ========================================================================== */
.str{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; align-items:start}
.str__txt{margin:0; color:var(--ink-soft); font-size:.95rem}
.tree{list-style:none; margin:0; padding:0}
.tree ol{list-style:none; margin:0; padding-left:26px; position:relative}
.tree ol::before{content:""; position:absolute; left:9px; top:-6px; bottom:22px; width:1.5px; background:var(--line-2)}
.tree li{position:relative; padding-top:12px}
.tree ol li::before{content:""; position:absolute; left:-17px; top:34px; width:15px; height:1.5px; background:var(--line-2)}
.node{
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(237,226,206,.05); border:1px solid var(--line);
  border-radius:12px 12px 4px 4px; padding:9px 16px 9px 9px;
}
.node--lead{border-color:rgba(255,62,165,.4); background:rgba(255,62,165,.07)}
.node div strong{font-size:.93rem; display:block; line-height:1.2}
.node div span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand-dim2); display:block}
.node .plaque{width:31px; height:36px; font-size:.66rem}
.node__ok{margin-left:10px; font-family:var(--f-mono); font-size:.68rem; color:var(--pink-lt); white-space:nowrap}

/* ==========================================================================
   06 KARTE
   ========================================================================== */
.map{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start}
.map__svg{margin-top:14px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.map__svg svg{width:100%; height:auto}
.areas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.area{
  display:flex; align-items:center; gap:14px;
  background:rgba(237,226,206,.045); border:1px solid var(--line);
  border-radius:var(--rad); padding:14px 18px 14px 14px;
}
.area__no{
  display:inline-grid; place-items:center; width:32px; height:38px; flex:none;
  border-radius:var(--rad-tur); border:1.5px solid var(--pink);
  color:var(--pink-lt); font-family:var(--f-mono); font-size:.72rem; font-weight:500;
}
.area__txt{min-width:0; flex:1}
.area__txt strong{display:block; font-size:.97rem; letter-spacing:-.01em}
.area__txt span{font-size:.78rem; color:var(--sand-dim2)}
.area__n{font-family:var(--f-mono); font-size:.72rem; color:var(--sand-dim); text-align:right; line-height:1.5; white-space:nowrap}
.area__n b{color:var(--pink-lt); font-weight:500}

/* ==========================================================================
   07 QUALITAET
   ========================================================================== */
.qua{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
  grid-template-areas:"rings rings rings rings rings rings" "tab tab tab tab note note"}
.qua__rings{grid-area:rings; display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.qua__table-card{grid-area:tab}
.qua__note{grid-area:note}
.ring-card{display:flex; align-items:center; gap:20px; padding:20px 22px;
  background:rgba(237,226,206,.045); border:1px solid var(--line); border-radius:var(--rad)}
.ring{width:92px; height:92px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--rc, var(--pink)) calc(var(--p)*1%), rgba(237,226,206,.1) 0);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
  mask:radial-gradient(circle at 50% 50%, transparent 55%, #000 56%);
}
.ring-card__txt b{display:block; font-family:var(--f-mono); font-weight:500; font-size:1.7rem; color:var(--sand-hi); line-height:1.2}
.ring-card__txt strong{display:block; font-size:.86rem; font-weight:600; margin-top:2px}
.ring-card__txt span{display:block; font-size:.72rem; color:var(--sand-dim2); margin-top:3px}
.qua__scroll{overflow-x:auto}
.qtab{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
.qtab th{
  text-align:left; font-family:var(--f-mono); font-size:.62rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sand-dim2);
  padding:8px 12px; border-bottom:1px solid var(--line-2);
}
.qtab td{padding:11px 12px; border-bottom:1px dashed var(--line); color:var(--sand-dim)}
.qtab td:first-child{color:var(--sand); font-weight:600}
.qtab tr:last-child td{border-bottom:0}
.qtab .num{font-family:var(--f-mono); font-size:.84rem}
.qtab .qbar{display:flex; align-items:center; gap:10px; min-width:130px}
.qtab .qbar i{display:block; height:6px; border-radius:3px; background:var(--grad)}
.qua__txt{margin:0; font-size:.93rem}

/* ==========================================================================
   08 ABRECHNUNG
   ========================================================================== */
.abr{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  grid-template-areas:"hero hero" "detail hist"}
.abr__hero{grid-area:hero; padding:28px 30px}
.abr__detail{grid-area:detail}
.abr__hist{grid-area:hist}
.pay{list-style:none; margin:0; padding:0}
.pay li{display:flex; align-items:baseline; gap:14px; padding:12px 2px; border-top:1px dashed var(--line)}
.pay li:first-child{border-top:0}
.pay li.pay--sum{border-top:1px solid var(--line-2); margin-top:6px; padding-top:14px}
.pay__lab{flex:1; font-size:.92rem; color:var(--sand-dim)}
.pay__lab small{display:block; font-size:.74rem; color:var(--sand-dim2)}
.pay__val{font-family:var(--f-mono); font-size:.95rem; color:var(--sand-hi); white-space:nowrap}
.pay--sum .pay__lab{color:var(--sand); font-weight:600}
.pay--sum .pay__val{font-size:1.15rem; color:var(--pink-lt)}
.hist{list-style:none; margin:0; padding:0}
.hist li{display:flex; align-items:center; gap:14px; padding:13px 2px; border-top:1px dashed var(--line)}
.hist li:first-child{border-top:0}
.hist__m{flex:1}
.hist__m strong{display:block; font-size:.95rem}
.hist__m span{font-size:.76rem; color:var(--sand-dim2)}
.hist__v{font-family:var(--f-mono); font-size:1rem; color:var(--sand-hi)}
.hist__tag{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:7px 7px 2px 2px; border:1px solid var(--line-2); color:var(--sand-dim2)}
.hist__tag--open{border-color:rgba(240,160,120,.5); color:var(--warn)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px){
  .ov{grid-template-areas:
    "hero hero hero hero hero hero"
    "chart chart chart chart chart chart"
    "k1 k1 k2 k2 k3 k3"
    "feed feed feed feed feed feed"}
  .qua{grid-template-areas:"rings rings rings rings rings rings" "tab tab tab tab tab tab" "note note note note note note"}
  .team{grid-template-columns:1fr}
  .str, .map{grid-template-columns:1fr}
}
@media (max-width: 960px){
  .app{grid-template-columns:1fr}
  .side{
    position:sticky; top:0; height:auto; z-index:50; flex-direction:row;
    align-items:center; gap:14px; padding:10px 16px;
    border-right:0; border-bottom:1px solid var(--line);
  }
  .side__brand{padding:0}
  .side__brand-txt span{display:none}
  .nav{flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:6px; padding:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav__it{padding:7px 11px; white-space:nowrap; flex:none}
  .nav__cnt{display:none}
  .side__user{border-top:0; padding:0}
  .side__user-txt{display:none}
  .side__out{display:none}
  .side__user .plaque{width:32px; height:37px; font-size:.68rem}
  .top{padding:22px 20px 16px}
  .top__proto{display:none}
  .tab{padding:20px 16px}
  .foot{padding:16px 20px 22px}
  .erf{grid-template-columns:1fr}
  .erf__grid{grid-template-columns:1fr}
  .erf__w2{grid-column:auto}
  .qua__rings{grid-template-columns:1fr}
  .abr{grid-template-columns:1fr; grid-template-areas:"hero" "detail" "hist"}
  .ov{grid-template-areas:"hero hero hero hero hero hero" "chart chart chart chart chart chart" "k1 k1 k1 k2 k2 k2" "k3 k3 k3 k3 k3 k3" "feed feed feed feed feed feed"}
  .lead{grid-template-columns:auto 1fr}
  .lead__meta{grid-column:1 / -1}
  .lead__right{flex-direction:row; align-items:center; justify-content:space-between; grid-row:1; grid-column:1 / -1}
  .ov__hero-door{display:none}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}