/* leck.ai - Verkaufsseite fuer E-Mail-Adressen
   Optik bewusst dieselbe Familie wie das Webmail-Login:
   fast schwarz, Cyan-Akzent, abgeschnittene Ecken, Mono-Versalien.
   Keine externen Schriften oder Skripte - siehe Datenschutz. */

:root{
  --bg:        #05070a;
  --bg-2:      #090d13;
  --panel:     #0b1017;
  --line:      rgba(79,220,255,.16);
  --line-soft: rgba(255,255,255,.07);
  --fg:        #e6f1f6;
  --fg-dim:    #8fa3ad;
  --fg-faint:  #5c6d77;
  --cy:        #4fdcff;
  --cy-deep:   #1194b8;
  --warn:      #ffcf5c;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --cut: 14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* --- Hintergrund: Partikelfeld, Raster, Schimmer --------------------- */
#particles{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
}
.grid-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
  opacity:.5;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(79,220,255,.10), transparent 60%);
}

.wrap{position:relative; z-index:2}
.container{width:min(1120px, calc(100% - 2.5rem)); margin-inline:auto}

/* --- Kopfzeile -------------------------------------------------------- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.4rem 0;
  border-bottom:1px solid var(--line-soft);
}
.brand{
  font-family:var(--mono); font-size:.95rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6rem;
}
.brand .dot{width:8px;height:8px;background:var(--cy);box-shadow:0 0 12px var(--cy)}
.top nav{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center}
.top nav form{display:flex; align-items:center}
.top nav a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.top nav a:hover{color:var(--cy); border-bottom-color:var(--cy)}

/* --- Held ------------------------------------------------------------- */
.hero{padding:clamp(3rem,9vw,7rem) 0 clamp(2.5rem,6vw,4.5rem); text-align:center}
.kicker{
  font-family:var(--mono); font-size:clamp(.7rem,1.6vw,.85rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--cy); margin:0 0 clamp(1.4rem,4vw,2.4rem);
}
.kicker::before{content:"// "; color:var(--cy-deep)}

/* Die Schriftgroesse setzt app.js in Pixeln: sie wird so gewaehlt, dass
   auch das laengste Wort der Liste noch in die Zeile passt. Der Wert hier
   ist nur der Stand, bis das Skript gelaufen ist. */
.hero-mail{
  margin:0;
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(1.6rem, 6.4vw, 5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
  flex-direction:row;
  max-width:100%;
}
.hero-mail .tail{display:inline-block}
.hero{overflow-x:clip}
.hero-mail .at{color:var(--cy); text-shadow:0 0 28px rgba(79,220,255,.55); padding:0 .04em}
.hero-mail .domain{color:var(--fg)}

/* Der senkrechte Durchlauf vor dem @-Zeichen. Die Breite wird per JS auf
   das jeweils sichtbare Wort gesetzt, damit die ganze Zeile mittig bleibt
   und beim Wechsel weich nachrueckt statt zu springen. */
.sw{
  position:relative;
  display:inline-block;
  height:1.24em;
  overflow:hidden;
  vertical-align:bottom;
  text-align:right;
  transition:width .48s cubic-bezier(.22,.8,.24,1);
  color:var(--cy);
  text-shadow:0 0 26px rgba(79,220,255,.35);
}
.sw-track{display:block; will-change:transform; transition:transform .52s cubic-bezier(.22,.8,.24,1)}
.sw-item{display:block; height:1.24em; line-height:1.24em; white-space:nowrap; text-align:right}
.sw::before,.sw::after{
  content:""; position:absolute; left:0; right:0; height:.24em; z-index:2; pointer-events:none;
}
.sw::before{top:0;    background:linear-gradient(to bottom, var(--bg) 15%, transparent)}
.sw::after {bottom:0; background:linear-gradient(to top,    var(--bg) 15%, transparent)}

.hero-sub{
  margin:clamp(1.6rem,4vw,2.4rem) auto 0;
  max-width:56ch; color:var(--fg-dim);
  font-size:clamp(1rem,2.2vw,1.15rem);
}
.hero-sub strong{color:var(--fg); font-weight:600}

.cta-row{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
.btn{
  display:inline-block; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.7rem; border:1px solid var(--cy); color:#04222b;
  background:var(--cy); cursor:pointer;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition:background .18s, box-shadow .18s, transform .18s;
}
.btn:hover{background:#7ee8ff; box-shadow:0 0 30px rgba(79,220,255,.35); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--cy)}
.btn.ghost:hover{background:rgba(79,220,255,.10); color:#9ceeff}

/* --- Abschnitte ------------------------------------------------------- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-head{margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec-head .num{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--cy-deep); display:block; margin-bottom:.7rem;
}
.sec-head h2{
  margin:0; font-size:clamp(1.5rem,3.6vw,2.3rem); font-weight:650; letter-spacing:-.01em;
}
.sec-head p{margin:.8rem 0 0; color:var(--fg-dim); max-width:62ch}

/* 320px als Mindestbreite ergibt bei 1120px genau drei Spalten - sechs
   Karten fuellen damit zwei volle Reihen ohne leere Kaesten. */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1px; background:var(--line-soft)}
.card{background:var(--panel); padding:1.7rem 1.6rem; position:relative; overflow:hidden}
.card h3{
  margin:0 0 .6rem; font-size:1.02rem; font-weight:650;
  display:flex; align-items:center; gap:.6rem;
}
.card h3 .mark{font-family:var(--mono); color:var(--cy); font-size:.85rem}
.card p{margin:0; color:var(--fg-dim); font-size:.95rem}
.card::after{
  content:""; position:absolute; left:0; top:0; width:2px; height:0;
  background:var(--cy); transition:height .3s ease;
}
.card:hover::after{height:100%}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem}
.step{border-top:1px solid var(--line); padding-top:1.2rem}
.step .n{
  font-family:var(--mono); font-size:2rem; color:var(--cy); line-height:1;
  display:block; margin-bottom:.7rem; opacity:.85;
}
.step h3{margin:0 0 .4rem; font-size:1rem}
.step p{margin:0; color:var(--fg-dim); font-size:.94rem}

/* --- Formular --------------------------------------------------------- */
.form-panel{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line);
  padding:clamp(1.6rem,4vw,2.8rem);
  clip-path:polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.field{margin-bottom:1.2rem}
.field label{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:.5rem;
}
.field input, .field textarea{
  width:100%; background:#05080c; border:1px solid var(--line-soft);
  color:var(--fg); font-family:var(--mono); font-size:.98rem;
  padding:.85rem .95rem; outline:none; transition:border-color .18s, box-shadow .18s;
}
.field input:focus, .field textarea:focus{
  border-color:var(--cy); box-shadow:0 0 0 3px rgba(79,220,255,.12);
}
.field textarea{min-height:120px; resize:vertical; line-height:1.55}
.field .hint{font-size:.8rem; color:var(--fg-faint); margin-top:.4rem}
.field-inline{display:flex; align-items:stretch}
.field-inline input{border-right:none; min-width:0}
.field-inline .suffix{
  display:flex; align-items:center; padding:0 .95rem;
  border:1px solid var(--line-soft); border-left:none;
  background:#070b10; color:var(--cy); font-family:var(--mono); white-space:nowrap;
}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--fg-dim)}
.consent input{width:auto; margin-top:.25rem; accent-color:var(--cy)}
.consent a{color:var(--cy)}
.form-msg{
  margin-top:1rem; font-family:var(--mono); font-size:.85rem;
  padding:.85rem 1rem; display:none;
}
.form-msg.ok{display:block; border:1px solid var(--cy); color:var(--cy); background:rgba(79,220,255,.07)}
.form-msg.err{display:block; border:1px solid var(--warn); color:var(--warn); background:rgba(255,207,92,.07)}
.form-alt{margin-top:1.4rem; color:var(--fg-dim); font-size:.92rem}
.form-alt a{color:var(--cy)}

/* --- Fusszeile -------------------------------------------------------- */
footer{
  border-top:1px solid var(--line-soft); padding:2.2rem 0 3rem;
  color:var(--fg-faint); font-size:.86rem;
}
.foot-row{display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; align-items:center}
footer nav{display:flex; gap:1.4rem; flex-wrap:wrap}
footer a{color:var(--fg-dim); text-decoration:none; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase}
footer a:hover{color:var(--cy)}
.fps{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--fg-faint); opacity:.75}

/* --- Rechtstexte ------------------------------------------------------ */
.doc{max-width:78ch; padding:clamp(2.5rem,6vw,4.5rem) 0}
.doc h1{font-size:clamp(1.7rem,4vw,2.5rem); margin:0 0 .4rem}
.doc .doc-sub{font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 2.5rem}
.doc h2{font-size:1.15rem; margin:2.4rem 0 .7rem; color:var(--fg); border-left:2px solid var(--cy); padding-left:.8rem}
.doc h3{font-size:1rem; margin:1.6rem 0 .5rem; color:var(--fg)}
.doc p, .doc li{color:var(--fg-dim)}
.doc ul, .doc ol{padding-left:1.3rem}
.doc li{margin-bottom:.45rem}
.doc a{color:var(--cy)}
.doc address{font-style:normal; font-family:var(--mono); color:var(--fg); line-height:1.9}
.todo{
  display:inline-block; background:rgba(255,207,92,.12); border:1px dashed var(--warn);
  color:var(--warn); font-family:var(--mono); font-size:.85rem; padding:.1rem .5rem;
}
.doc-note{
  border:1px dashed var(--warn); background:rgba(255,207,92,.07); color:var(--warn);
  padding:1rem 1.2rem; font-size:.9rem; margin-bottom:2.5rem;
}
.back{display:inline-block; margin-top:3rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cy); text-decoration:none}

/* --- schmale Schirme -------------------------------------------------- */
/* Auf schmalen Schirmen bekommt die Domain eine eigene Zeile. In einer
   einzigen Zeile muesste die Schrift sonst auf Kleingedrucktes schrumpfen,
   damit auch das laengste Wort noch danebenpasst. */
@media (max-width:700px){
  .hero-mail{flex-direction:column; align-items:center}
  .sw{text-align:center}
  .sw-item{text-align:center}
}

@media (max-width:640px){
  body{font-size:16px}
  .two{grid-template-columns:1fr}
  .top{flex-direction:column; align-items:flex-start; gap:.8rem}
  .top nav{gap:1.1rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sw,.sw-track{transition:none}
  #particles{display:none}
  .btn:hover{transform:none}
}

/* ====================================================================== *
 * Ab hier: Kundenbereich, Ausschreibung und Verwaltung.
 * Gleiche Sprache wie oben - dunkel, Cyan, abgeschnittene Ecken.
 * ====================================================================== */

.schmal{width:min(720px, calc(100% - 2.5rem))}
.gross{font-size:1.35em}
.mono{font-family:var(--mono)}
.stark{color:var(--fg); font-weight:600}
.leise{color:var(--fg-faint)}
.fliesstext{font:inherit; letter-spacing:0; text-transform:none; color:var(--fg-dim); margin:0 0 .6rem}
.freiwillig{color:var(--fg-faint); text-transform:none; letter-spacing:0}
.zurueck{margin:0 0 1.2rem}
.zurueck a{font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cy); text-decoration:none}
.unterkopf{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cy-deep); margin:0 0 1rem; font-weight:600;
}
.leerstelle{color:var(--fg-dim); padding:2rem 0; border-top:1px solid var(--line-soft)}
.leerstelle a{color:var(--cy)}

/* Meldungen ------------------------------------------------------------ */
.meldung{
  font-family:var(--mono); font-size:.85rem; padding:.85rem 1rem; margin:0 0 1.2rem;
  border:1px solid var(--line-soft);
}
.meldung.ok{border-color:var(--cy); color:var(--cy); background:rgba(79,220,255,.07)}
.meldung.warn{border-color:var(--warn); color:var(--warn); background:rgba(255,207,92,.07)}
.meldung.hinweis{border-color:var(--line); color:var(--fg-dim); background:rgba(79,220,255,.04)}
.meldung a{color:inherit; text-decoration:underline}
.meldung.liste{list-style:none; padding-left:1rem}
.meldung.liste li{margin:.2rem 0}

/* Knöpfe, die eigentlich Links sind ------------------------------------ */
.linkbutton{
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
  padding:0 0 2px; line-height:inherit;
  border-bottom:1px solid transparent;
}
.linkbutton:hover{color:var(--cy); border-bottom-color:var(--cy)}
.linkbutton.leise{color:var(--fg-faint); letter-spacing:.1em}
.linkbutton.leise:hover{color:var(--warn); border-bottom-color:var(--warn)}
.btn.klein{padding:.45rem .9rem; font-size:.68rem; --cut:8px}
.rueckzug{margin-top:2rem; text-align:center}

/* Tabellen ------------------------------------------------------------- */
.tabelle-huelle{overflow-x:auto; border:1px solid var(--line-soft)}
.tabelle{width:100%; border-collapse:collapse; font-size:.92rem}
.tabelle th{
  text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-faint); font-weight:500;
  padding:.9rem 1rem; border-bottom:1px solid var(--line-soft); background:var(--bg-2);
  white-space:nowrap;
}
.tabelle td{padding:.85rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover{background:rgba(79,220,255,.035)}
.tabelle tr.hervor{background:rgba(79,220,255,.06)}
.tabelle.schlank{border:0; font-size:.88rem}
.tabelle.schlank td{padding:.5rem .6rem}
.tabelle .at{color:var(--cy)}

/* Zustandsmarken ------------------------------------------------------- */
.marke{
  display:inline-block; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.28rem .6rem;
  border:1px solid var(--line-soft); color:var(--fg-dim); white-space:nowrap;
}
.marke-neu           {border-color:var(--cy); color:var(--cy)}
.marke-in_pruefung   {border-color:#7d8f99; color:#9fb3bd}
.marke-angeboten     {border-color:var(--warn); color:var(--warn)}
.marke-zugesagt      {border-color:#48d597; color:#48d597; background:rgba(72,213,151,.08)}
.marke-abgelehnt,
.marke-zurueckgezogen{border-color:#c76a6a; color:#c76a6a}
.marke-erledigt      {border-color:#5c6d77; color:#5c6d77}

/* Beschreibungslisten -------------------------------------------------- */
.daten{display:grid; grid-template-columns:minmax(140px,auto) 1fr; gap:.55rem 1.4rem; margin:0}
.daten dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-faint); padding-top:.15rem;
}
.daten dd{margin:0; color:var(--fg-dim)}

/* Auffälliger Kasten für den nächsten Schritt --------------------------- */
.form-panel.betont{border-color:var(--cy); box-shadow:0 0 40px rgba(79,220,255,.07) inset}
.form-panel h3:first-child{margin-top:0}
.field select{
  width:100%; background:#05080c; border:1px solid var(--line-soft); color:var(--fg);
  font-family:var(--mono); font-size:.98rem; padding:.85rem .95rem;
}
.field select:focus{border-color:var(--cy); outline:none}

/* Kennzahlen in der Verwaltung ----------------------------------------- */
.kennzahlen{display:flex; gap:1px; background:var(--line-soft); flex-wrap:wrap; margin-bottom:2rem}
.kennzahl{
  flex:1 1 130px; background:var(--panel); padding:1.1rem 1.2rem;
  text-decoration:none; display:block; border-top:2px solid transparent;
}
.kennzahl:hover{background:#0e141d}
.kennzahl.aktiv{border-top-color:var(--cy)}
.kennzahl .wert{display:block; font-family:var(--mono); font-size:1.7rem; color:var(--fg); line-height:1.1}
.kennzahl .marke-text{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-faint); margin-top:.35rem;
}

.raster-zwei{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start}
@media (max-width:900px){ .raster-zwei{grid-template-columns:1fr} }

/* Blättern ------------------------------------------------------------- */
.blaettern{margin-top:1.5rem; font-family:var(--mono); font-size:.8rem}
.blaettern svg{width:1rem; height:1rem; vertical-align:-2px}
.blaettern a, .blaettern span{color:var(--fg-dim); text-decoration:none; padding:.3rem .55rem; display:inline-block}
.blaettern a:hover{color:var(--cy)}

/* Anreißer auf der Startseite ------------------------------------------ */
.ticker{
  display:flex; align-items:center; gap:1px; flex-wrap:wrap;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.ticker-kopf{
  padding:.8rem 1rem; background:var(--bg-2); font-family:var(--mono);
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cy-deep);
}
.ticker-eintrag{
  padding:.8rem 1rem; background:var(--panel); text-decoration:none;
  display:flex; gap:.9rem; align-items:baseline; flex:1 1 auto;
}
.ticker-eintrag:hover{background:#0e141d}
.ticker-adresse{font-family:var(--mono); color:var(--fg); font-size:.92rem}
.ticker-adresse .at{color:var(--cy)}
.ticker-preis{font-family:var(--mono); color:var(--cy); font-size:.92rem; margin-left:auto}
.ticker-mehr{
  padding:.8rem 1rem; background:var(--bg-2); text-decoration:none;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
}
.ticker-mehr:hover{color:var(--cy)}

/* ====================================================================== *
 * Nachtraege aus der Pruefung: Kontrast, Fokus, schmale Schirme.
 * ====================================================================== */

:root{
  /* Alt war #5c6d77 - das ergab auf dem Panel 3,55:1 und lag damit unter
     den geforderten 4,5:1. Betroffen war JEDE Formularbeschriftung, jeder
     Tabellenkopf und jede Datumsspalte. Neu: 5,5:1 bei gleichem Farbton. */
  --fg-faint: #7a8d96;
  --gruen:    #48d597;
}

/* --- Sprungmarke ------------------------------------------------------ */
.sprung{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--cy); color:#04222b; padding:.8rem 1.2rem;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
}
.sprung:focus{left:0}
main:focus{outline:none}

/* --- Fokus sichtbar machen -------------------------------------------- *
 * clip-path beschneidet auch den Fokusrahmen. Deshalb wird der Zuschnitt
 * bei Tastaturfokus aufgehoben und stattdessen ein Rahmen gezeichnet.     */
.btn:focus-visible{
  clip-path:none;
  outline:2px solid var(--cy);
  outline-offset:3px;
}
a:focus-visible,
.linkbutton:focus-visible,
.kennzahl:focus-visible,
.ticker-eintrag:focus-visible,
.untermenue a:focus-visible,
.tabelle-huelle:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--cy);
  outline-offset:2px;
}

/* --- Untermenü der Bereiche ------------------------------------------- */
.untermenue{
  display:flex; gap:1px; background:var(--line-soft); flex-wrap:wrap;
  margin-bottom:clamp(1.6rem,4vw,2.4rem); border:1px solid var(--line-soft);
}
.untermenue a{
  padding:.8rem 1.1rem; background:var(--panel); text-decoration:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
  border-bottom:2px solid transparent;
}
.untermenue a:hover{color:var(--fg); background:#0e141d}
.untermenue a[aria-current=page]{color:var(--cy); border-bottom-color:var(--cy)}

/* --- Meldungen -------------------------------------------------------- */
.meldungen{padding-top:1.2rem}
.meldung-kopf{margin:0 0 .4rem; font-weight:600}
.meldung strong{color:inherit}

/* --- Aufgabenliste ---------------------------------------------------- */
.aufgaben{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft)}
.aufgabe{
  background:var(--panel); padding:1.1rem 1.3rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border-left:3px solid transparent;
}
.aufgabe.dringend{border-left-color:var(--warn); background:linear-gradient(90deg, rgba(255,207,92,.06), var(--panel) 40%)}
.aufgabe .was{flex:1 1 320px; color:var(--fg-dim)}
.aufgabe .gruppe{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cy-deep); display:block; margin-bottom:.25rem;
}
.aufgabe.dringend .gruppe{color:var(--warn)}

/* --- Preisangabe ------------------------------------------------------ */
.preis{display:inline-flex; flex-direction:column; gap:.15rem}
.preis strong{color:var(--fg); font-size:1.05em}
.preis-gross strong{font-size:1.8em; line-height:1.1}
.preis-zusatz{font-size:.78rem; color:var(--fg-faint)}

/* --- Feldfehler ------------------------------------------------------- */
.feldfehler{
  margin:.4rem 0 0; font-size:.85rem; color:var(--warn);
  font-family:var(--mono);
}
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true]{
  border-color:var(--warn) !important;
}
.pflichthinweis{font-size:.85rem; color:var(--fg-faint); margin:0 0 1.4rem}

/* --- Bestätigter/Nicht bestätigter Zustand ---------------------------- */
.marke-abgelaufen{border-color:var(--warn); color:var(--warn)}
.marke-beobachtet{border-color:var(--cy-deep); color:var(--cy)}
.marke-ja{border-color:var(--gruen); color:var(--gruen)}
.marke-nein{border-color:#c76a6a; color:#c76a6a}
.marke-offen{border-color:var(--warn); color:var(--warn)}
.marke-bezahlt{border-color:var(--gruen); color:var(--gruen); background:rgba(72,213,151,.08)}
.marke-storniert{border-color:#5c6d77; color:#8fa3ad}
.marke-fuehrt{border-color:var(--gruen); color:var(--gruen)}
.marke-ueberboten{border-color:var(--warn); color:var(--warn)}

/* --- Bankverbindung --------------------------------------------------- */
.bankkasten{
  border:1px solid var(--cy); background:rgba(79,220,255,.05);
  padding:1.2rem 1.4rem; font-family:var(--mono); font-size:.95rem;
}
.bankkasten dl{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; margin:0}
.bankkasten dt{color:var(--fg-faint); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
.bankkasten dd{margin:0; color:var(--fg); user-select:all}

/* --- Tabellen: erreichbar und auf kleinen Schirmen lesbar -------------- */
.tabelle-huelle:focus{outline:2px solid var(--cy); outline-offset:2px}

@media (max-width:640px){
  /* Aus jeder Zeile wird eine Karte, die Spaltennamen wandern nach vorn. */
  .tabelle thead{position:absolute; left:-9999px}
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td{display:block; width:100%}
  .tabelle tr{border-bottom:1px solid var(--line-soft); padding:.6rem 0}
  .tabelle td{
    border:0; padding:.35rem 1rem;
    display:flex; gap:1rem; justify-content:space-between; align-items:baseline;
  }
  .tabelle td::before{
    content:attr(data-spalte);
    font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--fg-faint); flex:0 0 auto;
  }
  .tabelle td:empty{display:none}
}

@media (max-width:520px){
  .daten{grid-template-columns:1fr; gap:.15rem 0}
  .daten dd{margin-bottom:.8rem}
  .bankkasten dl{grid-template-columns:1fr; gap:.1rem}
  .bankkasten dd{margin-bottom:.7rem}
}

/* --- Nur für Vorlesegeräte -------------------------------------------- */
.nur-vorlesen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Kleinteiliges ---------------------------------------------------- */
.hinweiskasten{
  border-left:2px solid var(--cy); padding:.2rem 0 .2rem 1rem;
  color:var(--fg-dim); font-size:.94rem; margin:1rem 0;
}
.knopfreihe{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem}
.zeitrest{font-family:var(--mono); font-size:.8rem; color:var(--warn)}
.summe{font-family:var(--mono); font-size:1.6rem; color:var(--fg)}

/* --- Suchzeile in der Verwaltung -------------------------------------- */
.suchzeile{
  display:flex; gap:.8rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.5rem;
}
.suchzeile .field{margin:0; flex:1 1 200px}
.suchzeile .field input, .suchzeile .field select{padding:.7rem .8rem; font-size:.9rem}

/* --- Ausklapp-Menü in Tabellen ---------------------------------------- */
.ausklapp{position:relative; display:inline-block}
.ausklapp summary{list-style:none; cursor:pointer}
.ausklapp summary::-webkit-details-marker{display:none}
.ausklapp-inhalt{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:10;
  background:var(--bg-2); border:1px solid var(--line); padding:.8rem 1rem;
  min-width:250px; display:flex; flex-direction:column; gap:.6rem; text-align:left;
}
.ausklapp-inhalt form{display:flex; flex-direction:column; gap:.35rem}
.ausklapp-inhalt input{
  background:#05080c; border:1px solid var(--line-soft); color:var(--fg);
  font-family:var(--mono); font-size:.85rem; padding:.5rem .6rem; width:100%;
}
@media (max-width:640px){
  .ausklapp-inhalt{position:static; min-width:0}
}

/* --- Verlauf eines Vorgangs ------------------------------------------- */
.verlauf{list-style:none; padding:0; margin:0 0 1.5rem; counter-reset:schritt}
.verlauf li{
  position:relative; padding:.55rem 0 .55rem 2rem;
  color:var(--fg-faint); font-size:.94rem;
}
.verlauf li::after{
  content:""; position:absolute; left:6px; top:1.7rem; bottom:-.2rem; width:1px;
  background:var(--line-soft);
}
.verlauf li:last-child::after{display:none}
.verlauf .punkt{
  position:absolute; left:0; top:.85rem; width:13px; height:13px;
  border:2px solid var(--line-soft); background:var(--bg); border-radius:50%;
}
.verlauf li.erledigt{color:var(--fg-dim)}
.verlauf li.erledigt .punkt{border-color:var(--gruen); background:var(--gruen)}
.verlauf li.erledigt::after{background:var(--gruen); opacity:.4}
.verlauf li.jetzt{color:var(--fg); font-weight:600}
.verlauf li.jetzt .punkt{border-color:var(--cy); box-shadow:0 0 0 4px rgba(79,220,255,.15)}
.verlauf li.aus{color:var(--fg-faint); text-decoration:line-through}

/* --- Kleinigkeiten ---------------------------------------------------- */
.hero-mail{margin:0}
.sec-head h1{margin:0; font-size:clamp(1.5rem,3.6vw,2.3rem); font-weight:650; letter-spacing:-.01em}
.doc h1{margin-top:0}

/* --- Nachbesserung: Preis im Fliesstext und Verweise -------------------- *
 * Der Preis stand als zweizeilige Spalte auch mitten im Satz - das riss die
 * Zeile auseinander. Gestapelt wird nur noch die grosse Fassung.            */
.preis{display:inline; }
.preis .preis-zusatz{display:inline; margin-left:.4rem}
.preis .preis-zusatz::before{content:"("}
.preis .preis-zusatz::after{content:")"}
.preis-gross{display:inline-flex; flex-direction:column; gap:.15rem}
.preis-gross .preis-zusatz{display:block; margin-left:0}
.preis-gross .preis-zusatz::before,
.preis-gross .preis-zusatz::after{content:none}

/* Verweise im Inhalt tragen die Hausfarbe. Ohne diese Regel faellt der
   Browser auf sein eigenes Blau zurueck - auf dunklem Grund kaum lesbar. */
.form-panel a:not(.btn),
.fliesstext a,
.daten a,
.hint a,
.aufgabe a:not(.btn),
.leerstelle a,
.hinweiskasten a,
.pflichthinweis a,
main p a:not(.btn),
main li a:not(.btn){
  color:var(--cy);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-panel a:not(.btn):hover,
.fliesstext a:hover,
main p a:not(.btn):hover{color:#9ceeff}