/* Die Schriften standen bis zum 11.09.2026 in einer eigenen Datei.
   Zwei Stilvorlagen sind zwei blockierende Anfragen vor dem ersten
   Bild auf dem Schirm; bei 1,4 kB lohnt die zweite Runde nicht. */
/* ==========================================================================
   Schrift — selbst gehostet (DSGVO), identisch mit www.leads2mail.de
   --------------------------------------------------------------------------
   Eine variable Datei je Zeichenbereich statt sechs Einzelschnitte: Archivo
   traegt 100–900 in 68 kB. Vorher lagen hier zehn Dateien fuer Newsreader
   und Hanken Grotesk — die Serife der Ueberschriften gehoerte zum alten
   CRM-Design und hat mit der Startseite nichts gemein.

   Nicht ueber fonts.googleapis.com laden: das schickt die IP jedes
   Nutzers an Google (LG Muenchen I, 20.01.2022 — 3 O 17493/20).
   ========================================================================== */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/archivo-var-latin.92895abae7c5.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/archivo-var-latin-ext.288d2a1c9f04.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   leads2mail CRM — Stilsystem „Modernist", 09.09.2026
   --------------------------------------------------------------------------
   Dieselbe Handschrift wie www.leads2mail.de. Wer sich auf der Startseite
   entscheidet und dann den Zugang anlegt, soll nicht das Gefuehl haben,
   bei einem anderen Anbieter gelandet zu sein.

   Was sich gegenueber dem alten CRM-Design aendert:

     · Schrift  Archivo in einer Familie. Vorher trugen die Ueberschriften
                Newsreader (Serife) und der Fliesstext Hanken Grotesk —
                zwei Schriften, die auf der Startseite nicht vorkommen.
     · Grund    Reinweiss statt Sandton #f1f2ee; der Arbeitsbereich liegt
                auf einem Hauch #fafbfd, damit weisse Karten sich absetzen.
     · Blau     Koenigsblau #2f5cff wie auf der Startseite (5,0:1 auf Weiss).
     · Gliederung  Linien statt Schatten. Ein Schatten unter jeder Karte
                laesst eine Arbeitsflaeche unruhig wirken; 1 px reicht.
     · Rundung  Die --rund-Staffel der Startseite: Knoepfe und Abzeichen
                voll rund, Karten 14 px.

   Die alten Variablennamen (--blue, --ink, --line, --radius, --font-display,
   --muted …) bleiben bestehen und zeigen auf die neuen Werte. Zwoelf
   Vorlagen greifen darauf zu; sie umzubenennen haette nichts verbessert
   und haette jede Datei angefasst, in der ein Fehler unbemerkt bleibt.
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Das Attribut `hidden` muss gewinnen — IMMER.
   Der Browser setzt dafuer `display:none`, aber jede Klassenregel mit
   eigenem `display` schlaegt das: Autorenregeln gehen vor der Vorgabe des
   Browsers. `.zustimmung{display:flex}` hat deshalb die Bestaetigung
   „Sparte kostenpflichtig buchen" dauerhaft eingeblendet, obwohl das
   Skript sie versteckt hatte. Sichtbar war nur das Ergebnis: ein Kunde,
   der eine Hausnummer berichtigt, sah eine Kaufbestaetigung.
   Dasselbe galt fuer die Vorschlagsliste unter der Branchensuche. */
[hidden]{display:none !important}
:root{
  /* --- Stilsystem der Startseite --- */
  --bg:#ffffff;
  --grund:#fafbfd;
  --ink:#0f1524;
  --ink-70:#575d6a;      /* kleine Beschriftungen — 6,6:1 auf Weiss */
  --ink-55:#7b7e87;      /* nur fuer grosse Schrift */
  --kb:#2f5cff;          /* Signalton                — 5,0:1 */
  --kb-700:#1c3bb5;      /* Links, Kennziffern       — 9,0:1 */
  --kb-100:#eaefff;
  --kb-200:#d6e0ff;
  --linie:#d5dae4;
  --linie-weich:#eef1f6;
  --nav:#171d2b;
  --rund-s:8px; --rund-m:14px; --rund-l:22px; --rund-voll:999px;
  --f:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- Bruecke fuer die bestehenden Vorlagen --- */
  --navy:#171d2b; --navy2:#212a3d; --blue:#2f5cff; --blue-d:#1c3bb5;
  --cyan:#38bdf8; --text:#575d6a; --muted:#575d6a;
  --line:#d5dae4; --hairline:#eef1f6; --radius:14px; --shadow:none;
  --font-display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --green:#177a3d; --red:#c62828; --amber:#8a5208;
}
body{font-family:var(--f);background:var(--bg);color:var(--ink-70);font-size:15px;
  line-height:1.62;font-variant-numeric:tabular-nums;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--kb-700);text-decoration:none}
a:hover{color:var(--kb);text-decoration:underline}
:focus-visible{outline:3px solid var(--kb);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* Deutsche Komposita sind laenger als ein Handybildschirm — ohne Trennung
   schiebt ein einziges Wort die ganze Seite waagerecht. hyphens:auto
   braucht lang="de", das steht im <html>. */
h1,h2,h3,h4{font-family:var(--f);font-weight:800;letter-spacing:-.02em;color:var(--ink);
  hyphens:auto;overflow-wrap:break-word;line-height:1.14}
h1{font-size:clamp(25px,3vw,32px);margin-bottom:6px}
h2{font-size:20px;margin-bottom:14px}
h3{font-size:17px}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.sub{color:var(--ink-70);margin-bottom:26px;max-width:66ch;font-size:15px}

/* Die Kleinmarke der Startseite: Grossbuchstaben, weit gesperrt, blau.
   Sie sagt, in welchem Bereich man ist, ohne der Ueberschrift Gewicht
   zu nehmen. */
.marke,.plate{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--kb-700);margin:0 0 12px;display:block}

/* ---------- Karten ---------- */
.card{background:var(--bg);border:1px solid var(--linie);border-radius:var(--rund-m);
  padding:24px;margin-bottom:20px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f);font-weight:700;font-size:14px;border:2px solid transparent;
  border-radius:var(--rund-voll);padding:11px 22px;cursor:pointer;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--kb);color:#fff;border-color:var(--kb)}
.btn-primary:hover{background:var(--kb-700);border-color:var(--kb-700);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--linie)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-danger{background:transparent;color:var(--red);border-color:#f0c9c9}
.btn-danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-sm{padding:7px 15px;font-size:13px}
.btn-block{width:100%;justify-content:center}

/* ---------- Formulare ---------- */
label{display:block;font-weight:700;color:var(--ink);font-size:13.5px;margin:16px 0 6px}
input,select,textarea{width:100%;padding:11px 14px;border:1px solid var(--linie);
  border-radius:var(--rund-s);font-size:15px;font-family:inherit;background:var(--bg);
  color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--kb);
  box-shadow:0 0 0 3px var(--kb-200)}
input[type=checkbox],input[type=radio]{width:auto}
.help{font-size:13px;color:var(--ink-70);margin-top:5px;line-height:1.6}
.errorlist{list-style:none;color:var(--red);font-size:13px;margin-top:5px;font-weight:600}
.form-row{margin-bottom:6px}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--linie)}
th{color:var(--ink-70);font-weight:800;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;border-bottom:2px solid var(--linie);vertical-align:bottom}
td{color:var(--ink-70);vertical-align:top}
td:first-child{color:var(--ink);font-weight:600}

/* ---------- Abzeichen, Meldungen ---------- */
.badge{display:inline-block;padding:4px 12px;border-radius:var(--rund-voll);
  font-size:12px;font-weight:700;letter-spacing:.01em}
.b-draft{background:var(--linie-weich);color:var(--ink-70)}
.b-running{background:#e3f4ea;color:#0f5c2e}
.b-paused{background:#fbeedb;color:#7a4805}
.b-done{background:var(--kb-100);color:var(--kb-700)}
.b-ok{background:#e3f4ea;color:#0f5c2e}
.b-no{background:#fbe6e6;color:#9b1c1c}
.msg{padding:14px 18px;border-radius:var(--rund-m);margin-bottom:14px;font-size:14px;
  font-weight:600;border:1px solid transparent}
.msg.success{background:#e3f4ea;border-color:#bfe3cd;color:#0f5c2e}
.msg.error{background:#fbe6e6;border-color:#f0c9c9;color:#9b1c1c}
.msg.info{background:var(--kb-100);border-color:var(--kb-200);color:var(--kb-700)}
.msg.warning{background:#fbeedb;border-color:#eed6ac;color:#7a4805}

/* ---------- Kennzahlen ---------- */
.stat{text-align:left}
.stat .n{font-size:clamp(26px,2.6vw,34px);font-weight:800;color:var(--kb);line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block}
.stat .l{display:block;margin-top:10px;color:var(--ink-70);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.5}

.muted{color:var(--ink-70)}.mt{margin-top:18px}.mb{margin-bottom:18px}
.mono{font-variant-numeric:tabular-nums}
.progress{height:8px;background:var(--linie-weich);border-radius:var(--rund-voll);
  overflow:hidden;margin:10px 0}
.progress>i{display:block;height:100%;background:var(--kb)}
.inline{display:inline}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.spacer{flex:1}
.empty{text-align:center;padding:44px 20px;color:var(--ink-70);border:1px dashed var(--linie);
  border-radius:var(--rund-m)}

/* ---------- Seitenleiste ----------------------------------------------
   Sechs gleichrangige Bereiche links, immer sichtbar. Der dunkle Grund
   ist derselbe wie die Kopfleiste der Startseite (#171d2b), damit die
   Marke an beiden Orten gleich sitzt.
   --------------------------------------------------------------------- */
.huelle{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.seitenleiste{background:var(--nav);color:#c6d0e2;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.sl-marke-zeile{padding:0 20px;height:58px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid rgba(198,208,226,.14)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;
  letter-spacing:-.02em;color:#fff}
.brand:hover{color:#fff;text-decoration:none}
.brand .m{display:grid;place-items:center}
.brand .m svg{width:26px;height:26px;flex:none;display:block}
/* Der Abstand im Flex-Behaelter gilt zwischen den Textknoten — ohne
   eigenes <span> wuerde „leads 2 mail" auseinandergerissen. */
.brand .word{white-space:nowrap}
.brand em{font-style:normal;color:var(--cyan)}
.sl-gruppe{padding:16px 12px 8px}
.sl-titel{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8b98b4;
  font-weight:800;padding:0 10px 10px}
.seitenleiste a.sl{display:flex;align-items:center;gap:11px;padding:10px 14px;
  border-radius:var(--rund-voll);color:#c6d0e2;font-weight:600;font-size:14px;line-height:1.3}
.seitenleiste a.sl:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.seitenleiste a.sl.an{background:var(--kb);color:#fff}
.sl-nr{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--rund-voll);
  flex:none;background:rgba(198,208,226,.16);color:#c6d0e2;font-size:11px;font-weight:800}
/* Weiss auf 26 % Weiss ueber Koenigsblau ergibt 3,28:1 — bei 11 px ist die
   Grenze 4,5. Umgekehrt gelesen stimmt es: weisse Scheibe, blaue Ziffer,
   9,0:1. Die Markierung wird dadurch sogar deutlicher. */
.seitenleiste a.sl.an .sl-nr{background:#fff;color:var(--kb-700)}
.sl-fuss{margin-top:auto;padding:16px 22px 22px;border-top:1px solid rgba(198,208,226,.14);
  font-size:13.5px}
.sl-fuss .wer{color:#8b98b4;display:block;margin-bottom:8px;word-break:break-all;
  font-size:12.5px}
.sl-fuss form{margin:0}
/* 66 x 22 px — unter den 24, die WCAG 2.5.8 fuer Bedienelemente verlangt.
   Polster statt groesserer Schrift: der Text soll ruhig bleiben. */
.sl-fuss button{background:none;border:0;padding:8px 0;cursor:pointer;color:#c6d0e2;
  font:inherit;font-weight:700;min-height:40px;display:inline-flex;align-items:center}
.sl-fuss button:hover{color:#fff}
.sl-schalter{display:none}
/* Der Menue-Schalter gehoert nur auf schmale Fenster. Sonst stuende das
   Wort „Menue" auch am grossen Bildschirm neben der Marke — ein Schalter
   fuer eine Leiste, die ohnehin offen ist. */
.sl-schalter-etikett{display:none}

.inhalt{display:flex;flex-direction:column;min-width:0;background:var(--grund)}
.inhalt main{flex:1;padding:34px 0 70px}

/* ---------- Kopfleiste (Altbestand, vor der Seitenleiste) ---------- */
header.top{background:var(--nav);color:#fff;position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.nav{display:flex;gap:20px;align-items:center}
.nav a{color:#c6d0e2;font-weight:600;font-size:14px}
.nav a:hover{color:#fff;text-decoration:none}
.nav .step{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  border-radius:var(--rund-voll);white-space:nowrap;transition:background .15s,color .15s}
.nav .step b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(198,208,226,.18);color:#c6d0e2;font-size:11px;font-weight:800}
.nav .step:hover{background:rgba(255,255,255,.08)}
.nav .step.an{background:var(--kb);color:#fff}
.nav .step.an b{background:rgba(255,255,255,.26);color:#fff}
.nav a.an{color:#fff}
.nav-trenner{width:1px;height:22px;background:rgba(198,208,226,.22);margin:0 4px}
.nav .who{color:#8b98b4;font-size:13px}
.nav a.who:hover{color:#fff;text-decoration:none}
.nav a.who.an{color:#fff}
/* Abmelden ist ein Formular (Django 5 verbietet GET), soll aber wie die
   anderen Navigationslinks aussehen. */
.nav form.abmelden{margin:0;display:inline}
.nav form.abmelden button{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:#c6d0e2;font-weight:600;font-size:14px}
.nav form.abmelden button:hover{color:#fff}
@media(max-width:1100px){.nav{gap:10px}.nav .step{padding:6px 9px}.nav .step span{display:none}}

/* ---------- Fusszeile ---------- */
.fusszeile{border-top:1px solid var(--linie);padding:22px 0;margin-top:20px;
  background:var(--bg)}
.fusszeile .wrap{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-70)}

/* ---------- Schmale Fenster ---------- */
@media(max-width:760px){
  .grid.c2,.grid.c3{grid-template-columns:1fr}
  .nav a.hideable{display:none}
  .wrap{padding:0 18px}
  .card{padding:18px;border-radius:var(--rund-m)}
  .inhalt main{padding:24px 0 56px}
}

/* Auf 375 px hat eine dreispaltige Tabelle keinen Platz. Sie bricht dann
   die Ueberschriften auf vier Zeilen um und schiebt Abzeichen ueber den
   Inhalt — gemessen auf /profile/, wo „ANSCHRIFT IN DER FUSSZEILE
   VERWENDET" senkrecht stand. Statt sie zu quetschen, darf sie waagerecht
   scrollen; display:block macht daraus einen scrollbaren Kasten, ohne dass
   die Vorlagen ein Wrapper-<div> brauchen. */
@media(max-width:760px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
        white-space:nowrap;max-width:100%}
  table td.umbruch,table td[data-umbruch]{white-space:normal;min-width:14ch}
  th,td{padding:9px 12px 9px 0}
}

@media(max-width:900px){
  .huelle{grid-template-columns:1fr}
  .seitenleiste{position:static;height:auto}
  .sl-gruppe{display:none}
  .seitenleiste:has(.sl-schalter:checked) .sl-gruppe,
  .seitenleiste:has(.sl-schalter:checked) .sl-fuss{display:block}
  .sl-fuss{display:none}
  .sl-marke-zeile{padding:0 18px;height:54px}
  .sl-schalter-etikett{display:inline-block;color:#c6d0e2;
    border:2px solid rgba(198,208,226,.34);padding:7px 16px;
    border-radius:var(--rund-voll);font-size:13px;font-weight:700;cursor:pointer}
}
/* ---------- An- und Abmeldung ----------
   Ein schmaler Streifen in der Mitte: hier gibt es genau eine Aufgabe,
   und alles, was daneben steht, ist Ablenkung davon. */
.anmeldung{max-width:430px;margin:24px auto}
.anmeldung--breit{max-width:480px}
.anmeldung__wechsel{text-align:center;font-size:14px}
.mitgebracht{margin:-14px 0 22px;padding:11px 15px;border:1px solid var(--kb-200);
  border-radius:var(--rund-s);background:var(--kb-100);color:var(--kb-700);
  font-size:14px}
.mitgebracht strong{font-weight:800}

/* Zustimmung: Haken links, Text daneben. Die Grundregel setzt jedes label
   auf display:block und jedes Eingabefeld auf volle Breite — genau falsch
   fuer ein Kontrollkaestchen, das zu seinem Satz gehoert. */
.zustimmung{display:flex;gap:11px;align-items:flex-start;margin:22px 0 4px;
  padding:14px 16px;border:1px solid var(--linie);border-radius:var(--rund-s);
  background:#fcfdff}
.zustimmung input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:2px;
  accent-color:var(--kb);cursor:pointer}
.zustimmung label{margin:0;font-weight:400;font-size:14px;line-height:1.6;
  color:var(--ink-70);cursor:pointer}
.zustimmung label a{font-weight:700}

/* Anschrift: Straße neben Hausnummer, PLZ neben Ort — wie auf einem
   Briefkopf. Die schmale Spalte ist fest, die weite nimmt den Rest. */
.anschrift{display:grid;grid-template-columns:1fr 110px;gap:0 12px}
.anschrift:has(.anschrift--weit:last-child){grid-template-columns:110px 1fr}
.anschrift__marke{margin:18px 0 2px;font-weight:800;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--kb-700)}
.anschrift__grund{margin:0 0 4px}
@media(max-width:520px){
  .anschrift,.anschrift:has(.anschrift--weit:last-child){grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- Sparten als buchbare Module (11.09.2026) ----------
   Jede Sparte ist ein Modul mit eigenem Preis. Deshalb keine nackte
   Kaestchenliste, sondern Karten: Der Kunde soll sehen, dass er hier
   etwas BUCHT und nicht nur etwas ankreuzt. */
/* `minmax(0,1fr)` statt `1fr`: eine 1fr-Spalte schrumpft NICHT unter die
   Mindestbreite ihres Inhalts. „Gebäudereinigung" plus Kästchen plus
   Innenabstand braucht rund 180 px — dreimal nebeneinander sprengte das
   jede Karte, die schmaler ist als 560 px, und der dritte Eintrag stand
   ausserhalb des Rahmens. Die Fensterbreite half nicht: das Fenster war
   breit, die SPALTE war eng. */
.sparten-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin:8px 0 0}
/* Die Sonderregel fuer das Profil ist seit dem 12.09.2026 ueberfluessig:
   `auto-fit` mit echter Mindestbreite legt dort von selbst eine Spalte
   je Zeile. Zwei Regeln fuer dieselbe Sache laufen frueher oder spaeter
   auseinander. */
.sparten-wahl label{display:flex;gap:10px;align-items:flex-start;margin:0;
  padding:14px 15px;border:1px solid var(--linie);border-radius:var(--rund-s);
  background:#fcfdff;font-weight:600;font-size:14px;color:var(--ink);
  cursor:pointer;line-height:1.4;transition:border-color .15s,background .15s}
.sparten-wahl label:hover{border-color:var(--kb)}
.sparten-wahl input{width:17px;height:17px;flex:none;margin-top:1px;
  accent-color:var(--kb);cursor:pointer}
.sparten-wahl label:has(input:checked){border-color:var(--kb);background:var(--kb-100)}
.sparten-preis{margin:12px 0 0;padding:11px 15px;border:1px solid var(--kb-200);
  border-radius:var(--rund-s);background:var(--kb-100);color:var(--kb-700);
  font-size:14px;font-weight:600}
.sparten-preis b{font-weight:800}
@media(max-width:700px){
  .sparten-wahl{grid-template-columns:1fr}
}

/* Die Zustimmung zur kostenpflichtigen Buchung steht direkt unter der
   Spartenwahl und faellt durch den blauen Rand auf — sie ist kein
   Kleingedrucktes, sondern der Moment, in dem Geld zugesagt wird.
   Die Regeln dazu stehen weiter unten bei „Der Kaufknopf sitzt IN der
   Buchungsbox" — dort, wo auch der Knopf beschrieben ist. */
/* --------------------------------------------------------- Kündigung
   Eigene Karte, bewusst ruhig gehalten. Rot ist hier nur der Knopf:
   Kündigen ist kein Fehler und keine Warnung, sondern ein Recht des
   Kunden. Was rot sein MUSS, ist der Satz über den Datenzugriff — der
   ist die eine Folge, die man nicht rückgängig machen kann. */
.kuendigung{margin-top:26px}
.kuendigung__daten{display:grid;grid-template-columns:1fr auto;gap:7px 20px;
  margin:16px 0;font-size:.93rem;align-items:baseline}
.kuendigung__daten dt{color:var(--muted)}
.kuendigung__daten dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kuendigung__folge{background:#fef2f2;border:1px solid #fecaca;
  border-left:3px solid #dc2626;border-radius:9px;padding:14px 16px;
  color:#991b1b;font-size:.92rem;margin:16px 0}
.kuendigung__spaet{background:#fffbeb;border:1px solid #fde68a;
  border-left:3px solid var(--amber);border-radius:9px;padding:14px 16px;
  color:#92400e;font-size:.92rem;margin:16px 0}
.kuendigung__stand{margin:14px 0;font-size:.98rem}
.kuendigung .zustimmung{margin:16px 0}
.kuendigung form{margin-top:8px}

/* ------------------------------------------------ Abschnitte im Profil
   Trennt Firmendaten von Abonnement. Eine Linie darunter statt einer
   Fläche dahinter: das Design dieser Anwendung trennt mit Linien, nicht
   mit Kästen — und zwei Kastensorten übereinander (Abschnitt UM Karte)
   lassen die Karte flach wirken.
   Der erste Abschnitt braucht keinen Abstand nach oben, die folgenden
   schon — sonst klebt „Abonnement" an der Karte darüber und liest sich
   wie deren Fußnote. */
.abschnitt{font-family:var(--font-display);font-size:16px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  margin:34px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
/* Die Marke INNERHALB einer Karte („Ihre Anschrift") muss dem Abschnitt
   nachgeordnet bleiben. Blau und versal war sie stärker als die
   Überschrift darüber — die Seite las sich dadurch flach, als stünde
   alles auf einer Ebene. Der Abschnitt traegt jetzt die Tintenfarbe. */
.abschnitt:first-of-type{margin-top:4px}

/* ------------------------------------------- Profil: zwei Spalten
   Firmendaten links, Abonnement rechts (Andreas, 11.09.2026).

   Die Reihen stehen AUSDRÜCKLICH, in beiden Breiten. Grund ist nicht die
   Optik, sondern die Eingabetaste: Enter in einem Textfeld löst den
   ersten Absendeknopf des Formulars aus. „Speichern" muss deshalb im
   Quelltext VOR „Vertrag kündigen" stehen — angezeigt wird es trotzdem
   darunter. Ohne grid-row stünde der Knopf zwischen den Bereichen.

   Mobil zuerst: eine Spalte ist die Vorgabe, zwei gibt es erst ab
   980 px. Darunter stünden zwei Formularspalten zu je 300 px
   nebeneinander — Straße und Hausnummer bekämen 140 px, und das
   Nebeneinander, das Ordnung stiften soll, erzeugte Enge.

   `align-items:start`: ohne das zöge die kürzere Spalte ihre Karten auf
   die Höhe der längeren und hinge unten in der Luft. */
.profil-raster{display:grid;gap:0 28px}
.profil-spalte{min-width:0}
.profil-spalte--links{grid-row:1}
.profil-spalte--rechts{grid-row:2}
.profil-raster__breit{grid-row:3}

@media(min-width:980px){
  .profil-raster{grid-template-columns:1fr 1fr;align-items:start}
  .profil-spalte--links{grid-column:1;grid-row:1}
  .profil-spalte--rechts{grid-column:2;grid-row:1}
  .profil-raster__breit{grid-column:1/-1;grid-row:2}
}

/* Der Kaufknopf sitzt IN der Buchungsbox, unter der Zustimmung. Getrennte
   Kästen für „bestätigen" und „kaufen" hätten die beiden Hälften einer
   Entscheidung auseinandergezogen. */
.buchung{margin-top:14px;padding:14px 16px;border:1px solid var(--kb-200);
  border-radius:var(--rund-s);background:var(--kb-100)}
.buchung .zustimmung{margin:0;border:0;background:none;padding:0}
.buchung label{color:var(--ink)}
.buchung__tat{margin-top:14px}

/* Mengenangabe unter der Bundesland-Liste. Die Zahl je Land steht in
   .ew — bis zum 12.09.2026 war das die Einwohnerzahl („ew"), jetzt sind
   es Betriebe. Der Klassenname bleibt, damit die Stilregeln für Abstand
   und Ausrichtung nicht doppelt gepflegt werden müssen. */
.laenderliste .ew.leer{opacity:.45}
.bestandszahl{margin-top:14px;padding:12px 15px;border:1px solid var(--kb-200);
  border-radius:var(--rund-s);background:var(--kb-100);color:var(--kb-700);
  font-size:14px}
.bestandszahl b{font-weight:800}
.bestandszahl .klein{color:var(--muted);font-weight:400}

/* ------------------------------------------- Daten nicht kopierbar
   Andreas, 12.09.2026: „es sind keine daten aus dem crm mit copy paste
   kopierbar".

   Was das leistet und was NICHT: Es verhindert das beiläufige Markieren
   und Kopieren mit der Maus — das, was ein Kunde im Alltag tut. Es
   verhindert NICHT, dass jemand den Quelltext der Seite ansieht oder die
   Entwicklerwerkzeuge öffnet; im Browser liegen die Daten nun einmal
   vor. Eine Sperre, die als undurchdringlich verkauft wird, wiegt in
   falscher Sicherheit.

   Ausgenommen bleiben Eingabefelder: Der Kunde muss seine EIGENEN
   Angaben bearbeiten, einfügen und korrigieren können. Eine Sperre, die
   auch das Passwortfeld erfasst, ist keine Sicherung, sondern ein
   Hindernis. */
.inhalt{-webkit-user-select:none;user-select:none}
.inhalt input,.inhalt textarea,.inhalt select,.inhalt [contenteditable]{
  -webkit-user-select:text;user-select:text}

/* ------------------------------------------------ Projektansicht
   Die Telefonliste ist eine ARBEITSLISTE, keine Übersicht: Der Kunde
   geht sie von oben nach unten durch. Deshalb sortiert nach Zustand
   (offen zuerst) und jede Zeile mit ihrem eigenen kleinen Formular —
   ein Sammelformular über 500 Zeilen schickt bei jedem Vermerk alles
   mit und überschreibt, was nebenher ein zweiter Browser geändert hat. */
.fertig-am{font-family:var(--font-display);font-size:1.7rem;font-weight:800;
  color:var(--ink);margin:10px 0 6px;font-variant-numeric:tabular-nums}
.anrufliste td{vertical-align:top}
.anrufliste tr.a-erreicht,.anrufliste tr.a-interesse{background:#f0fdf4}
.anrufliste tr.a-kein{opacity:.55}
.anruf-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.anruf-form select{width:auto;min-width:150px}
.anruf-form input[type=text]{width:auto;min-width:160px;flex:1}
a.tel{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
@media(max-width:900px){
  .anruf-form{flex-direction:column;align-items:stretch}
  .anruf-form select,.anruf-form input[type=text]{width:100%}
}

/* Die Zahlungspflicht fällt ab — sie ist die eine Erklärung auf dieser
   Seite, die Geld kostet. Kein rotes Warnfeld: Bestellen ist kein
   Fehler. Ein kräftigerer Rahmen genügt, damit niemand hinterher sagen
   kann, er habe es überlesen. */
.zustimmung.zahlungspflicht{border-color:var(--kb);border-width:2px;
  background:var(--kb-100)}
.zustimmung.zahlungspflicht label{font-weight:600}
/* Während gerechnet wird, bleibt die alte Zahl stehen und wird blass —
   ein leeres Feld sähe aus, als wäre die Auswahl ohne Treffer. */
.bestandszahl.rechnet{opacity:.5}

/* ==========================================================================
   VEREDELUNG — 12.09.2026
   --------------------------------------------------------------------------
   Andreas: „mach das komplette CRM luxuriöser."

   Was NICHT gemacht wird, weil es das Gegenteil bewirkt
   ----------------------------------------------------
   Keine Schlagschatten, keine Verläufe über Flächen, kein Glanz. Das
   Designsystem dieser Anwendung trennt mit LINIEN — Schatten darüber
   gelegt ergibt kein teures, sondern ein unentschiedenes Bild. Kein
   zweiter Akzentton neben dem Königsblau: Zwei Signalfarben heben sich
   gegenseitig auf.

   Woran Wertigkeit in einer Arbeitsoberfläche wirklich hängt
   ----------------------------------------------------------
   An der Präzision der Kleinteile. Ziffern, die untereinander stehen.
   Haarlinien, die genau eine Haarlinie breit sind. Abstände, die einem
   Raster folgen statt dem Zufall. Text, der in der Laufweite auf seine
   Größe abgestimmt ist — Versalien brauchen Luft, Überschriften brauchen
   das Gegenteil.

   Genau das macht den Unterschied zwischen „sieht gut aus" und „fühlt
   sich wertig an", und es kostet keine einzige zusätzliche Farbe.
   ========================================================================== */

/* --- Ziffern stehen untereinander -----------------------------------------
   Der größte Einzelgewinn. Proportionale Ziffern lassen jede Tabelle,
   jede Frist und jeden Betrag leicht tanzen; in einer Oberfläche, die
   Zahlen zeigt, liest sich das unruhig, ohne dass man sagen kann warum. */
.stat .n, .fertig-am, td, th, .sl-nr, .kuendigung__daten dd,
.bestandszahl, .laenderliste .ew, a.tel, .mono, .badge{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

/* --- Überschriften: enger, ruhiger ---------------------------------------
   Archivo läuft in großen Graden zu weit. Negative Laufweite ab 20px ist
   kein Stilmittel, sondern optischer Ausgleich. */
h1{letter-spacing:-.022em;font-weight:800;line-height:1.12}
h2{letter-spacing:-.014em;font-weight:700}
.card > strong{display:block;letter-spacing:-.006em;font-size:15.5px;
  font-weight:700;color:var(--ink);margin-bottom:4px}

/* --- Versalien brauchen Luft --------------------------------------------- */
.abschnitt{letter-spacing:.11em}
th{letter-spacing:.07em;font-weight:700;color:var(--ink-55);
  padding-bottom:11px;border-bottom-color:var(--linie)}
.sl-titel{letter-spacing:.12em;font-size:10.5px;color:#7d8aa6}
.stat .l{letter-spacing:.08em}

/* --- Karten: mehr Raum, weichere Kante -----------------------------------
   24px Innenabstand war knapp: Der Inhalt stößt an, und Enge liest sich
   billig. 28px und eine hellere Linie geben derselben Karte Ruhe, ohne
   dass etwas hinzugefügt wird. */
.card{padding:28px;border-color:#e3e7ef;border-radius:16px}
.card + .card{margin-top:18px}
.grid{gap:20px}

/* --- Eingabefelder: höher, mit klarem Fokusring --------------------------
   Der Fokus war eine gefärbte Kante — auf einem hellen Grund kaum zu
   sehen. Ein Ring in der hellen Signalfarbe zeigt ohne Lärm, wo man ist,
   und erfüllt zugleich die Tastaturbedienung. */
input,select,textarea{padding:12px 15px;border-radius:10px;
  border-color:#dbe0ea;transition:border-color .12s,box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:#c3cad9}
input:focus,select:focus,textarea:focus{border-color:var(--kb);
  box-shadow:0 0 0 3px var(--kb-100)}
.form-row label{font-size:13px;letter-spacing:.004em}

/* --- Schaltflächen: Pille bleibt, Proportion wird genauer ----------------- */
.btn{border-radius:var(--rund-voll);letter-spacing:.004em;
  transition:background .12s,border-color .12s,color .12s}
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--kb-200)}

/* --- Tabellen: Zeilen atmen, Zahlen rechts ------------------------------- */
th,td{padding-top:15px;padding-bottom:15px;border-bottom-color:var(--linie-weich)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:#fbfcfe}

/* --- Seitenleiste: Tiefe durch Material, nicht durch Schatten -------------
   Ein sehr flacher Verlauf nach unten und eine Haarlinie an der Kante.
   Beides ist einzeln kaum wahrnehmbar; zusammen wirkt die Fläche wie
   Material statt wie Farbe. */
.seitenleiste{background:linear-gradient(180deg,#1a2130 0%,#141a27 100%);
  border-right:1px solid rgba(255,255,255,.06)}
.sl-gruppe{padding:18px 12px 10px}
.seitenleiste a.sl{border-radius:11px;padding:10px 13px;letter-spacing:.002em;
  transition:background .12s,color .12s}
.seitenleiste a.sl:hover{background:rgba(255,255,255,.055)}

/* Die Kennziffer: Ring statt Fläche. Eine gefüllte Scheibe neben jedem
   Eintrag ist sechsmal dasselbe Gewicht; ein Ring tritt zurück und lässt
   die Beschriftung führen — bis er der aktive ist. */
.sl-nr{background:transparent;border:1px solid rgba(198,208,226,.28);
  color:#93a1bd;font-size:11.5px;font-weight:700;width:23px;height:23px}
.seitenleiste a.sl:hover .sl-nr{border-color:rgba(198,208,226,.5);color:#cfd8e8}

/* Der aktive Eintrag: die Pille bleibt, bekommt aber eine Lichtkante oben
   und eine ruhige Fassung. Flaches Vollblau wirkt aufgeklebt. */
.seitenleiste a.sl.an{
  background:linear-gradient(180deg,#3a66ff 0%,#2a53f0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 0 0 1px rgba(58,102,255,.35);
  font-weight:700}
.seitenleiste a.sl.an .sl-nr{background:#fff;border-color:#fff;
  color:var(--kb-700);font-weight:800}

.sl-fuss{border-top-color:rgba(198,208,226,.1)}
.sl-fuss .wer{font-size:11.5px;letter-spacing:.02em}

/* --- Kennzahlen: die Zahl trägt, die Beschriftung dient ------------------- */
.stat .n{letter-spacing:-.028em;font-weight:800}

/* --- Kleinteile ---------------------------------------------------------- */
.badge{font-weight:700;letter-spacing:.02em;padding:5px 13px}
.msg{border-radius:12px}
hr,.nav-trenner{border-color:var(--linie-weich)}

/* Auf schmalen Schirmen bleibt alles wie es war — dort zählt Platz mehr
   als Ruhe, und 28px Innenabstand fressen ein Drittel der Breite. */
@media(max-width:640px){
  .card{padding:20px;border-radius:14px}
  .grid{gap:14px}
}

/* Zellen, die nicht umbrechen dürfen: Ein Datum über zwei Zeilen und
   eine Marke, die mitten im Wort bricht, lassen eine Tabelle unfertig
   wirken — und die Zeile wird höher, ohne dass Inhalt hinzukommt. */
td.nowrap,.badge.nowrap,th.nowrap{white-space:nowrap}
.tat-spalte{white-space:nowrap;text-align:right}
.tat-spalte .btn{margin-left:6px}
@media(max-width:900px){
  .tat-spalte{white-space:normal;text-align:left}
  .tat-spalte .btn{margin:4px 6px 0 0}
}

/* --- Trichter: vier gleiche Kacheln in der Reihenfolge des Ablaufs -------
   Ein Raster aus drei plus zwei Kacheln liest sich als Zufall; die
   Kacheln werden verschieden breit und sitzen versetzt. Vier gleiche
   Spalten zeigen, was die Zahlen sind: Stufen eines Ablaufs.
   `1fr` reicht hier, weil in den Kacheln nur kurze Zahlen stehen. */
.trichter{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-bottom:24px;align-items:stretch}
.trichter .card{margin:0;display:flex;flex-direction:column;justify-content:center}
.stat__neben{margin-top:8px;color:var(--kb-700);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
@media(max-width:980px){.trichter{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.trichter{grid-template-columns:1fr}}

/* Die Spartenwahl bricht um, statt abzuschneiden.

   Der Fehler und warum er zweimal auftrat: „Gebäudereinigung" ist EIN
   WORT. Es kann nicht umbrechen, seine Mindestbreite steht fest —
   gemessen 204 px samt Kästchen und Innenabstand. Jede Rastergrenze
   darunter schneidet es ab, egal wie man es umbricht; mein erster
   Versuch mit 190 px tat genau das.

   `auto-fit` legt so viele Spalten nebeneinander, wie bei DIESER
   Mindestbreite wirklich passen — drei auf dem breiten Schirm, zwei in
   der Profilspalte, eine auf dem Handy. Ohne Medienabfrage, und ohne
   dass jemand die Breiten pflegen muss, wenn eine vierte Sparte
   dazukommt. */
.sparten-wahl{grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr))}
.sparten-wahl label{min-width:0}