/* Kundenseiten im Aufbau der Mail (Guido, 29.09.2026: „das gesamte Immotool durchforsten … Seiten, die noch nicht
   in unserem neuen Design sind … umbauen, farblich und formenmäßig, Apple-Vorgaben").

   Vorbild ist die Angebotsseite (angebot.html, 28.09.2026: „nicht wie die Mail"): heller Grund, Logo oben auf dem
   Grund statt Navy-Band, weiße Karten mit großen Rundungen ohne Rahmen, Gruppen in Hellgrau, Kapsel-Knöpfe,
   Zustand als farbiger Punkt statt getönter Fläche. Schrift seit 08.10.2026 wie in den Mails und auf der Objektseite
   (Daniel: „in unseren Fonts … so wie die Mails“): Josefin Sans für Titel und Knöpfe, Raleway für Text — 450,
   graue Texte 500, Ziffern auf der Linie (vorher Systemschrift).
   Werte aus mail.py: NAVY, TINTE, GEDAEMPFT, LINIE, CREME (Grund), CREME_TIEF (Gruppe).

   Eingebunden über _kopfband.html — der Kopf steht in jeder öffentlichen Seite im <body>, also NACH den
   seiteneigenen Stilen und nach bewerbung.css/interessent.css: bei gleicher Spezifität gewinnt diese Datei. */

@font-face{font-family:"Josefin Sans";font-style:normal;font-weight:100 700;font-display:swap;
  src:url("schriften/JosefinSans-Variable.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("schriften/Raleway-Variable.woff2") format("woff2")}

:root{
  --k-navy:#14213D; --k-tinte:#243049; --k-gedaempft:#6B6B70; --k-linie:#E5E5EA; --k-grund:#F2F1EE;
  --k-gruppe:#F5F5F7; --k-gruen:#1E7A4A; --k-rot:#B42318; --k-orange:#FCA311; --k-orange-text:#9A5F07;
  --k-schrift:"Raleway",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --k-titel:"Josefin Sans","Raleway",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Werte, die die Seiten selbst benutzen, in die neue Farbwelt */
  --navy:#14213D; --navy-tief:#0F1A30; --tinte:#243049; --gedaempft:#6B6B70; --linie:#E5E5EA;
  --gold-tief:#14213D; --ok:#1E7A4A; --ok-zart:#F5F5F7; --flaeche:#F5F5F7;
  --schrift:var(--k-schrift); --schrift-titel:var(--k-titel);
}
html{background:var(--k-grund) !important;-webkit-text-size-adjust:100%}
body{background:var(--k-grund) !important;color:var(--k-tinte) !important;font-family:var(--k-schrift) !important;
  -webkit-font-smoothing:antialiased;font-size:16px;font-weight:450;font-variant-numeric:lining-nums}
body :is(input,select,textarea){font-family:var(--k-schrift) !important}
body button{font-family:var(--k-titel) !important}

/* Kopf: das Logo auf dem Grund, mittig — wie oben in der Mail */
.kopfband{background:none !important;border:0 !important;padding:28px 16px 18px !important;margin:0 calc(50% - 50vw) 0 !important;
  text-align:center;line-height:0;box-shadow:none !important}
.kopfband img{width:240px !important;max-width:64% !important;height:auto}
@media (max-width:480px){ .kopfband{padding-top:20px !important} }

/* Überschriften: Josefin Sans in 600, Navy, keine Versalien — Größen wie Mail und Objektseite */
h1,h2,h3,h4,legend,.titel{font-family:var(--k-titel) !important;letter-spacing:0 !important;text-transform:none !important}
h1{font-size:26px !important;line-height:1.2 !important;font-weight:600 !important;color:var(--k-navy) !important}
h2,legend{font-size:18px !important;line-height:1.3 !important;font-weight:600 !important;color:var(--k-navy) !important}
h3{font-size:16px !important;font-weight:600 !important;color:var(--k-navy) !important}
@media (max-width:480px){ h1{font-size:24px !important} }

/* Karten: weiß, große Rundung, kein Rahmen, kein Schatten — der Grund trägt die Ebene */
:is(.kasten,.blatt,.karte,.box,.k,.formular,.inhalt-karte,.dok){background:#fff !important;border:0 !important;border-radius:24px !important;
  box-shadow:none !important;corner-shape:round !important}
.kasten{padding:26px 28px 24px !important}
@media (max-width:480px){ .kasten{padding:22px 20px 20px !important;border-radius:20px !important} }
/* Karten in Karten (Personen, Uploads, Stufen): Gruppe in Hellgrau statt Rahmen */
:is(.kasten,.blatt,.karte) :is(.kasten,.person,.upload,.stufe,.gruppe,.feldgruppe,.tarif,.karte){background:var(--k-gruppe) !important;border:0 !important;
  border-radius:16px !important;box-shadow:none !important}
.person-titel,.feld-titel{font-family:var(--k-schrift) !important;font-weight:650 !important;color:var(--k-navy) !important;letter-spacing:0 !important;text-transform:none !important}

/* Zeilen „Objekt · Termin · Für": eingelassene Liste wie in der Mail */
.zeile{border-top:.5px solid var(--k-linie) !important;font-size:15px !important}
.zeile span:first-child{color:var(--k-gedaempft) !important;font-weight:500}
.zeile span:last-child{color:var(--k-navy) !important;font-weight:600 !important}

/* Felder */
label{font-family:var(--k-schrift) !important;text-transform:none !important;letter-spacing:0 !important;color:var(--k-gedaempft);font-size:13px;font-weight:500}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=hidden]),select,textarea{
  font-size:16px !important;color:var(--k-tinte) !important;background:#fff !important;border:1px solid var(--k-linie) !important;border-radius:12px !important;
  min-height:44px;padding:10px 14px !important;box-shadow:none !important;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;corner-shape:round !important}
:is(input,select,textarea):focus{outline:none !important;border-color:var(--k-navy) !important;box-shadow:0 0 0 3px rgba(20,33,61,.12) !important}
input:is([type=checkbox],[type=radio]){accent-color:var(--k-navy)}
input[type=file]::file-selector-button{border:0;border-radius:999px;background:var(--k-gruppe);color:var(--k-navy);font:600 14px var(--k-titel);padding:8px 14px;margin-right:10px;cursor:pointer}

/* Knöpfe: Navy-Kapsel, normale Schreibweise; „leise" = getönte Kapsel (Zweitaktion) */
button,input[type=submit],a.knopf,.knopf{font-family:var(--k-titel) !important;text-transform:none !important;letter-spacing:0 !important;
  border-radius:999px !important;font-weight:600 !important;corner-shape:round !important;-webkit-tap-highlight-color:transparent}
button:not(.leise):not(.person-weg):not(.upload-weg):not(.klein-knopf):not(.rund),input[type=submit],a.knopf:not(.leise):not(:has(button)){
  background:var(--k-navy);color:#fff;border:0 !important;min-height:48px;padding:0 24px;font-size:16.5px !important}
:is(button,a.knopf).leise{background:var(--k-gruppe) !important;color:var(--k-navy) !important;border:0 !important}
button:active,a.knopf:active{transform:scale(.97)}
button:focus-visible,a:focus-visible{outline:2px solid var(--k-navy) !important;outline-offset:2px}
a{color:var(--k-navy)}
/* Grüne Hauptknöpfe (Download, Suchagent) bleiben Navy — Grün ist Zustand, keine Aktion */
:is(button,a.knopf):is(.gruen,.ok,.gut){background:var(--k-navy) !important}

/* Hinweise, Fußzeile */
.hinweis,.klein,.leise-text{color:var(--k-gedaempft) !important;font-weight:500}
.obj,.unter,.ort{font-weight:500}
.fuss{color:var(--k-gedaempft) !important;font-size:12px !important;line-height:1.7;font-weight:500}
.fuss a{color:var(--k-gedaempft) !important}

/* Zustände: weiße bzw. graue Fläche, Farbe nur im Punkt (Farbkonzept) — statt grüner/goldener Kästen */
:is(.stand:has(.stand-zeichen),.meldung,.erfolg,.ok-box,.fertig,.danke-box){background:var(--k-gruppe) !important;color:var(--k-tinte) !important;border:0 !important;
  border-radius:16px !important;box-shadow:none !important}
:is(.stand,.meldung).fehler{color:var(--k-rot) !important}
.stand-zeichen{background:var(--k-gruen) !important}
/* Mitarbeiter-Kasten (Einladung): Gruppe mit kleinem Kopf statt Goldrahmen */
.makler{border:0 !important;background:#fff !important}
.makler h2{font-size:13px !important;letter-spacing:0 !important;color:var(--k-orange-text) !important;font-weight:650 !important}

/* Farbige Oberkanten der alten Karten weg */
[class*="kasten"],.blatt{border-top:0 !important}

@media (prefers-reduced-motion:reduce){ button,a.knopf,input,select,textarea{transition:none} }

/* Rechtstexte (Impressum, Datenschutz): Zweispalter am Handy untereinander — Bezeichnung über dem Wert */
:is(.kasten,.blatt) table{width:100%;border-collapse:collapse}
:is(.kasten,.blatt) :is(td,th){overflow-wrap:anywhere}
@media (max-width:560px){
  :is(.kasten,.blatt) :is(table,tbody,tr,td,th){display:block;width:auto !important}
  :is(.kasten,.blatt) tr{padding:10px 0;border-top:.5px solid var(--k-linie)}
  :is(.kasten,.blatt) tr:first-child{border-top:0}
  :is(.kasten,.blatt) :is(td,th){padding:1px 0 !important;border:0 !important;text-align:left !important}
  :is(.kasten,.blatt) tr > :first-child{font-size:13px;color:var(--k-gedaempft)}
}

/* Kundenkonto (_konto_rahmen.html): Zustände in normaler Schreibweise, Verträge als Gruppe, kleine Knöpfe in Listen */
.stand{text-transform:none !important;letter-spacing:0 !important}
.vertrag{border:0 !important;background:var(--k-gruppe) !important;border-radius:16px !important}
.vorgang a.knopf,.kopf form button,.kopf a.knopf{min-height:32px !important;padding:0 14px !important;font-size:14px !important;
  background:var(--k-gruppe) !important;color:var(--k-navy) !important;border:0 !important;display:inline-flex;align-items:center;text-decoration:none}
details summary{font-family:var(--k-schrift) !important}

/* Dokumente zum Unterschreiben (unterschreiben.html): weiße Karte, fertig = grüner Haken, kein grüner Grund */
.dok{padding:20px !important;margin-bottom:12px !important}
.dok.fertig{background:#fff !important}
a.knopf:has(> button){background:none !important;padding:0 !important;min-height:0 !important}
.datei{border:1.5px dashed rgba(20,33,61,.2) !important;border-radius:16px !important;background:var(--k-gruppe) !important}

/* Einzelkarten mittig (Link abgelaufen, Danke-Seiten); alte Goldlinks in Grau */
.k{margin-left:auto !important;margin-right:auto !important}
a[style*="96620A"],a[style*="96620a"]{color:var(--k-gedaempft) !important}
/* Erfolg (Vertrag fertig, Unterlagen vollständig): Gruppe mit grünem Punkt statt grüner Fläche */
:is(.ok,.erledigt-box):not(button):not(a){background:var(--k-gruppe) !important;border:0 !important;border-radius:16px !important;position:relative;padding-left:34px !important}
:is(.ok,.erledigt-box):not(button):not(a)::before{content:"";position:absolute;left:15px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--k-gruen)}

/* Keine Versalien-Zeilen (Farbkonzept/HIG): Schritt-Leiste, Abschnittsköpfe, Trenner in normaler Schreibweise */
:is(.schritte li,.schritt-kopf small,.abschnitt-titel,.trenner,.geduld-zahlen small,.m,.kicker,.dach){text-transform:none !important;letter-spacing:0 !important}
.schritte li{font-size:11.5px !important}
.schritte li.aktiv{color:var(--k-navy) !important}
.schritte li.aktiv::before,.schritte li.fertig::before{background:var(--k-navy) !important;border-color:var(--k-navy) !important;color:#fff !important}
/* orange Unterstreichung der Schritt-Leiste → Navy (Orange nur als Tupfer) */
.schritte::after,.schritte li.aktiv::after{background-color:var(--k-navy)}
.abschnitt-titel{font-size:13px !important;color:var(--k-gedaempft) !important;font-weight:600 !important}
.fortschritt i{background:var(--k-navy) !important}
a[style*="FCA311"],a[style*="fca311"]{color:var(--k-navy) !important}
.kasten{max-width:760px;box-sizing:border-box}
/* Grüner Großknopf (Suchagent) → Navy-Kapsel in normaler Schreibweise */
.knopfgruen{background:var(--k-navy) !important;font-family:var(--k-titel) !important;text-transform:none !important;letter-spacing:0 !important;
  border-radius:999px !important;font-size:16px !important;display:inline-flex !important;align-items:center;justify-content:center;gap:8px}
/* Wallet-Hinweis: „In Safari öffnen" als Hauptknopf, „Link kopieren" als getönte Zweitaktion */
a.knopf:not(:has(button)){display:inline-flex !important;align-items:center;justify-content:center;text-decoration:none !important;box-sizing:border-box}
p > a.knopf:only-child:not(:has(button)){display:flex !important}
button.kopieren{background:var(--k-gruppe) !important;color:var(--k-navy) !important;width:100%;margin-top:10px}
/* Erklärungen zum Bestätigen (Mitmieter, Bürge) und gewählte Optionen: Gruppe statt Beige (--akzent-zart) */
:root{--akzent-zart:#F5F5F7;--gold-bg:#F5F5F7;--akzent:#14213D;--sand:#E5E5EA}
.erklaerung{background:var(--k-gruppe) !important;border:0 !important;border-radius:16px !important}
:is(.wahl,.schalter,.upload){border-radius:14px !important}
/* Stand der Bewerbung (stand.html): offene Punkte und Rückfragen als Gruppe statt Beige mit Goldkante */
:is(.fehlt,.offen-liste){background:var(--k-gruppe) !important;border:0 !important;border-radius:16px !important}
.beteiligt i{background:var(--k-gruppe) !important;color:var(--k-navy) !important}
div[style*="FFF6E5"]{background:var(--k-gruppe) !important;border-left:0 !important;border-radius:14px !important}