/* Mieterportal — eine Datei, keine Bibliothek.
   Warum ohne Framework: die Seite muss auf einem alten Telefon in einer
   schlechten Verbindung aufgehen. Alles hier sind rund 4 KB. */
:root{
  /* NOVAC-SOLUTIONS: heller Grund, fast-schwarze Schrift, kein Farbton — wie
     novac-solutions.com. Bis zum 03.09.2026 stand es umgekehrt (schwarz mit
     weisser Schrift); getauscht auf Vorgabe der Auftraggeberin, seither traegt
     bold. das dunkle Bild. Unterschiede entstehen durch Flaeche, Rahmen und
     Gewicht, nicht durch Farbe. */
  --grund:#fafafa;             /* Hintergrund der Seite */
  --karte:#ffffff;             /* Flaechen, damit eine Karte vom Grund abhebt */
  --text:#0a0a0a;
  --leise:#6b6b6b;
  --linie:#e2e2e2;
  --akzent:#0a0a0a;            /* Knopf und Link */
  --akzent-dunkel:#000000;
  --knopf-text:#ffffff;        /* Schrift AUF dem Knopf */
  --gut:#0a0a0a;               /* „erledigt": volle Flaeche */
  --gut-text:#ffffff;
  --warten:#6b6b6b;            /* „in Arbeit": nur Rahmen und Schrift */
  --rand:12px;
  /* Avenir Next ist die Schrift von NOVAC-SOLUTIONS (Vorgabe 03.09.2026).
     Sie ist eine gekaufte Schrift von Monotype und liegt NICHT bei einem
     Web-Anbieter: auf Apple-Geraeten ist sie ab Werk installiert und wird
     benutzt, auf Windows und Android nicht. Deshalb steht dahinter Mulish —
     dieselbe geometrische Anmutung, frei verfuegbar, wird nachgeladen. Ohne
     diesen Ersatz faellt die Seite dort auf Arial zurueck und sieht fremd aus.
     Fuer Avenir Next auf ALLEN Geraeten braucht es eine Weblizenz (Karte
     134555). */
  --schrift:"Avenir Next","Avenir",Mulish,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --zahlen:inherit;
  --hinweis-flaeche:#f0f0f0; --hinweis-linie:#d6d6d6; --hinweis-text:#0a0a0a;
  /* Der Fehlerkasten ist umgekehrt zur Seite — in einer schwarz-weissen Marke
     ist das der lauteste verfuegbare Unterschied. */
  --fehler-flaeche:#0a0a0a; --fehler-linie:#0a0a0a; --fehler-text:#ffffff;
  --rot:#c62828; --rot-flaeche:#fdeceb; --rot-text:#8c1d18;
  --blase-aus:#f0f0f0; --blase-aus-linie:#d6d6d6;
}

/* --- Die Marken. Werte aus den Hub-Karten der Creative Direction, nicht
   geschaetzt: betahouse 133032, coFlat 134153 (beide gelesen 03.09.2026).
   NOVAC steht oben noch auf der Zwischenloesung Blau/Grau — dort fehlt ein
   Brandsheet, siehe Karte 134555.
   Nur Farben werden hier gesetzt; die Schrift haengt am Kopf der Seite, weil
   nur die web-lizenzierten Schnitte geladen werden duerfen. --- */
[data-marke="betahouse"]{
  --akzent:#4752c1;            /* Indigo */
  --knopf-text:#ffffff;
  --gut-text:#ffffff;
  --hinweis-flaeche:#ecebfa; --hinweis-linie:#c8c6ef; --hinweis-text:#2b2f6b;
  --fehler-flaeche:#fdeceb; --fehler-linie:#f5c6c3; --fehler-text:#8c1d18;
  --rot:#c62828; --rot-flaeche:#fdeceb; --rot-text:#8c1d18;
  --blase-aus:#ecebfa; --blase-aus-linie:#c8c6ef;
  --akzent-dunkel:#333c95;
  --grund:#f4ead8;             /* Sand */
  --karte:#ffffff;
  --text:#221f20;              /* Graffiti */
  --linie:#e4d8c2;
  --leise:#6d6663;
  --gut:#3f7a1f;               /* aus Lime Green abgedunkelt, damit es liest */
  --warten:#c2470f;            /* Neon Orange abgedunkelt */
  --rand:18px;
  --schrift:"Nunito Sans","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
[data-marke="bold"]{
  /* bold. — aus „WISSEN: BOLD. PROJECT HUB" (134155): Primary #0A0A0A,
     Background #FAFAFA, Surface #F0F0F0. Seit dem 03.09.2026 traegt bold. das
     UMGEKEHRTE Bild: schwarzer Grund, weisse Schrift — getauscht mit
     NOVAC-SOLUTIONS auf Vorgabe der Auftraggeberin. Schrift und die kantigen
     Ecken bleiben bold. eigen. */
  --grund:#000000;
  --karte:#0f0f0f;
  --text:#ffffff;
  --leise:#a1a1a1;
  --linie:#2b2b2b;
  --akzent:#ffffff;
  --akzent-dunkel:#d9d9d9;
  --knopf-text:#000000;
  --gut:#ffffff;
  --gut-text:#000000;
  --warten:#c9c9c9;
  --rand:4px;                  /* kantig, nicht rund */
  --schrift:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --hinweis-flaeche:#141414; --hinweis-linie:#3a3a3a; --hinweis-text:#ffffff;
  --fehler-flaeche:#ffffff; --fehler-linie:#ffffff; --fehler-text:#000000;
  --rot:#ff6b6b; --rot-flaeche:#3a1414; --rot-text:#ffd6d6;
  --blase-aus:#171717; --blase-aus-linie:#3a3a3a;
}
[data-marke="bold"] h1,[data-marke="bold"] h2{font-weight:900;letter-spacing:-.03em}
/* betahouse Disco-Farben (Schalter oben, Vorgabe 07.09.2026) */
[data-marke="betahouse"][data-ansicht="disco"]{
  --grund:#0b0714;--karte:rgba(22,15,38,.88);--text:#f6f1ff;--linie:#3a2b5c;
  --leise:#c3b4e3;--akzent:#ff3fa4;--akzent-dunkel:#d61f86;--knopf-text:#ffffff;
  --hinweis-flaeche:#22163a;--hinweis-linie:#5a3d8f;--hinweis-text:#f6f1ff;
  --blase-aus:#22163a;--blase-aus-linie:#5a3d8f;--gut:#2fd27a;--gut-text:#061a10;
  --rot:#ff6b6b;--rot-flaeche:#3a1414;--rot-text:#ffd6d6;
  background:#0b0714}
[data-marke="coflat"]{
  --akzent:#35404a;            /* Slate Blue */
  --knopf-text:#ffffff;
  --gut-text:#ffffff;
  --hinweis-flaeche:#d4e8f4; --hinweis-linie:#a8bac9; --hinweis-text:#25313b;
  --fehler-flaeche:#fdeceb; --fehler-linie:#f5c6c3; --fehler-text:#8c1d18;
  --rot:#c62828; --rot-flaeche:#fdeceb; --rot-text:#8c1d18;
  --blase-aus:#d4e8f4; --blase-aus-linie:#a8bac9;
  --akzent-dunkel:#232c34;
  --grund:#f3eee6;             /* Warm White */
  --karte:#f8faf9;             /* Off White */
  --text:#403e3e;              /* Charcoal */
  --linie:#dcd7cd;
  --leise:#6f7a83;
  --gut:#2f6b4f;
  --warten:#9a6a12;
  --rand:12px;
  --schrift:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --zahlen:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:17px/1.55 var(--schrift)}
a{color:var(--akzent)}
.kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 18px;background:var(--karte);border-bottom:1px solid var(--linie)}
.marke{font-weight:700;letter-spacing:-.3px;text-decoration:none;color:var(--text);
  display:flex;align-items:center}
/* Die Hoehe setzt die Vorlage je Marke; hier steht nur, dass die Breite
   mitwaechst und das Bild nicht am Text klebt. */
.marke .logo{width:auto;display:block}
.kopf-titel{color:var(--leise);font-size:14px}
.kopf-nav{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:14px;flex-wrap:wrap}
.inline{display:inline}
button.link{background:none;border:0;padding:0;color:var(--akzent);
  font:inherit;font-size:14px;cursor:pointer;text-decoration:underline}
.inhalt{max-width:680px;margin:0 auto;padding:18px}
h1{font-size:24px;margin:6px 0 6px;line-height:1.25}
h2{font-size:18px;margin:0 0 10px}
p{margin:0 0 12px}
.leise{color:var(--leise)}
.klein{font-size:14px}
.schritt{display:inline-block;font-size:14px;font-weight:600;color:var(--leise);
  text-transform:uppercase;letter-spacing:.4px;margin:0 0 4px}
/* Sprung-Link: unsichtbar, bis er per Tastatur den Fokus bekommt. */
.sprung{position:absolute;left:-9999px;top:8px;background:var(--karte);color:var(--text);
  padding:10px 14px;border:2px solid var(--akzent);border-radius:8px;z-index:9}
.sprung:focus{left:8px}
/* Sichtbarer Fokus auf allem, was man druecken kann (Regel 9). */
a:focus-visible,button:focus-visible,.knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.card{background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);
  padding:18px;margin:0 0 16px}
.card h2 a{text-decoration:none;color:var(--text)}
.zeile{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--linie);font-size:15px}
.zeile:last-child{border-bottom:0}
.zeile dt{color:var(--leise);margin:0}
.zeile dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--zahlen)}
dl{margin:0}
.knopf{display:inline-block;background:var(--akzent);color:var(--knopf-text);border:0;
  border-radius:10px;padding:13px 18px;min-height:48px;font:inherit;font-weight:600;
  text-decoration:none;cursor:pointer}
.knopf:hover{background:var(--akzent-dunkel)}
.knopf.leer{background:var(--karte);color:var(--akzent);border:1px solid var(--linie)}
.knopf.breit{display:block;width:100%;text-align:center}
.liste{list-style:none;margin:0;padding:0}
.liste li{border-bottom:1px solid var(--linie)}
.liste li:last-child{border-bottom:0}
.liste a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 2px;text-decoration:none;color:var(--text)}
.liste a:hover{background:var(--grund)}
/* Eine Zeile, die KEIN Link ist: die Rechnung traegt einen eigenen Knopf.
   Ohne diese Regeln griff `.liste a` und machte den PDF-Knopf zur Zeile. */
.liste li.rechnung{display:flex;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px solid var(--linie)}
.liste li.rechnung:last-child{border-bottom:0}
.liste li.rechnung .zeile{flex:1;display:block;padding:0;border-bottom:0}
.liste li.rechnung a.knopf{display:inline-block;padding:6px 10px;font-size:13px;
  background:var(--akzent);color:var(--knopf-text)}
.liste li.rechnung a.knopf:hover{background:var(--akzent-dunkel)}
/* Ohne die zwei Farbzeilen gewann `.liste a` (Textfarbe) ueber `.knopf`
   (Knopffarbe): schwarze Schrift auf schwarzem Knopf (Befund 05.09.2026). */
.marke-punkt{font-size:13px;color:var(--leise)}
/* Der Stand steht in FORM, nicht in Farbe: „erledigt" ist eine volle
   Flaeche, „in Arbeit" ein Rahmen, alles andere leise. So liest er sich auch
   in einer schwarz-weissen Marke und fuer Menschen, die Farben schlecht
   unterscheiden. */
.stand{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 9px;
  border-radius:999px;background:transparent;color:var(--leise);
  border:1px solid var(--linie);white-space:nowrap}
.stand.eingegangen{color:var(--text);border-color:var(--text)}
.stand.in_bearbeitung,.stand.pruefung{color:var(--warten);border-color:var(--warten)}
.stand.extern{color:var(--leise);border-color:var(--leise);border-style:dashed}
.stand.erledigt{background:var(--gut);color:var(--gut-text);border-color:var(--gut)}
.stand.weitergeleitet{color:var(--leise);border-color:var(--linie)}
label{display:block;font-weight:600;font-size:16px;margin:18px 0 6px}
/* Pflicht ist mit rotem * markiert und oben erklaert (Vorgabe 07.09.2026). */
label .pflicht{color:var(--rot);font-weight:700}
input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],select,textarea{
  width:100%;padding:12px 13px;min-height:48px;border:1px solid var(--linie);border-radius:10px;
  font:inherit;background:var(--karte);color:var(--text);
  /* Der Browser faerbt Felder sonst nach SEINEM Schema. */
  color-scheme:light}
/* bold. ist die dunkle Marke: dort braucht das Feld das dunkle Schema, sonst
   schreibt der Browser weisse Schrift auf weissen Grund. */
[data-marke="bold"] input,[data-marke="bold"] textarea,
[data-marke="bold"] select{background:var(--grund);color-scheme:dark}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akzent);border-color:var(--akzent)}
.feldhinweis{font-size:14.5px;color:var(--leise);margin:5px 0 0}
.wahl{display:block;border:1px solid var(--linie);border-radius:10px;
  padding:12px;margin:8px 0;font-weight:400;cursor:pointer}
.wahl input{margin-right:9px}
.haken{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:16px 0 0}
.haken input{margin-top:4px}
/* Fehler am Feld: ROT, mit Hinweis was zu tun ist (Vorgabe 07.09.2026), und das
   Feld selbst bekommt den roten Rand. Der rote Kasten oben listet alles auf. */
.feld-fehler{color:var(--rot);font-size:15px;margin:5px 0 0;font-weight:700}
.feld.hat-fehler input,.feld.hat-fehler textarea,.feld.hat-fehler select,
.feld.hat-fehler .wahl{border:2px solid var(--rot)}
.fehler.rot{background:var(--rot-flaeche);border-color:var(--rot);color:var(--rot-text)}
.fehlerliste{margin:8px 0 0;padding-left:20px}
.fehlerliste a{color:inherit}
.hinweis{background:var(--hinweis-flaeche);border:1px solid var(--hinweis-linie);
  color:var(--hinweis-text);border-radius:12px;padding:13px 15px;margin:0 0 16px}
.brauchen{margin:6px 0 12px;font-size:14px}
.feld[hidden],.brauchen[hidden]{display:none}
/* Der Fehlerkasten ist absichtlich UMGEKEHRT zur Seite: in einer schwarz-
   weissen Marke ist das der lauteste verfuegbare Unterschied. */
.fehler{background:var(--fehler-flaeche);border:2px solid var(--fehler-linie);
  color:var(--fehler-text);border-radius:12px;padding:13px 15px;margin:0 0 16px;
  font-weight:600}
.verlauf{margin:0;padding:0;list-style:none}
.blase{border-radius:12px;padding:12px 14px;margin:0 0 10px;font-size:15px}
.blase.aus{background:var(--blase-aus);border:1px solid var(--blase-aus-linie)}
.blase.ein{background:var(--grund);border:1px solid var(--linie)}
.blase .wer{display:block;font-size:12.5px;color:var(--leise);margin:0 0 4px}
.code{font-size:30px;letter-spacing:8px;text-align:center;font-weight:700}
.fuss{max-width:720px;margin:0 auto;padding:10px 18px 34px;color:var(--leise);
  font-size:14px;display:flex;flex-direction:column;gap:4px}
.beendet{opacity:.72}
.trenner{border:0;border-top:1px solid var(--linie);margin:18px 0}
@media (max-width:520px){
  .inhalt{padding:14px}
  .card{padding:15px;border-radius:12px}
  .zeile{font-size:14.5px}
}

/* --- Sprache und Ansicht im Kopf (07.09.2026) --- */
/* Kleine Knoepfe (Kopf, Fuss, Listen): sehen aus wie Knoepfe, nicht wie Links
   (Vorgabe 07.09.2026: alles, was ein Knopf ist, sieht wie einer aus). */
.knopf.klein{padding:8px 14px;min-height:40px;font-size:14.5px;line-height:1.2;display:inline-flex;align-items:center}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px}
.fuss .knopf.klein{margin-left:8px;vertical-align:middle}
/* Segment-Schalter DE | EN: die Wahl ist gefuellt, der Rest umrandet. */
.segment{display:inline-flex;border:1px solid var(--linie);border-radius:999px;overflow:hidden;background:var(--karte)}
.segment a{text-decoration:none;color:var(--text);font-weight:600;font-size:14px;padding:8px 14px;min-height:40px;display:inline-flex;align-items:center}
.segment a.aktiv{background:var(--akzent);color:var(--knopf-text)}
.segment a:focus-visible{outline-offset:-3px}
/* Kippschalter (role=switch): Bahn und Knopf, an = Knopf rechts und farbig. */
.schalter{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text);font-weight:600;font-size:14px;min-height:40px;padding:0 4px}
.schalter-emoji{font-size:18px;line-height:1}
.schalter-bahn{position:relative;display:inline-block;width:46px;height:26px;border-radius:999px;background:var(--linie);transition:background .2s}
.schalter-knopf{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--karte);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s}
.schalter[aria-checked="true"] .schalter-bahn{background:var(--akzent)}
.schalter[aria-checked="true"] .schalter-knopf{left:23px}

/* --- betahouse Disco: dunkel, bunte Lichter, die an- und ausgehen (Vorgabe
   07.09.2026). Nur ueber den Schalter, nur bei betahouse; wer Bewegung nicht
   vertraegt (prefers-reduced-motion), bekommt die Farben ohne Animation. --- */
[data-ansicht="disco"] body{background:transparent;position:relative;isolation:isolate;min-height:100vh}
[data-ansicht="disco"] body::before,[data-ansicht="disco"] body::after{
  content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;filter:blur(28px)}
[data-ansicht="disco"] body::before{
  background:
    radial-gradient(circle at 18% 28%,rgba(255,63,164,.55),transparent 38%),
    radial-gradient(circle at 78% 22%,rgba(63,182,255,.5),transparent 40%),
    radial-gradient(circle at 62% 78%,rgba(255,215,64,.45),transparent 38%);
  animation:disco-drift 16s ease-in-out infinite alternate,disco-licht 3.2s ease-in-out infinite}
[data-ansicht="disco"] body::after{
  background:
    radial-gradient(circle at 70% 60%,rgba(120,255,140,.4),transparent 36%),
    radial-gradient(circle at 25% 75%,rgba(160,80,255,.5),transparent 42%);
  animation:disco-drift 21s ease-in-out infinite alternate-reverse,disco-licht 4.7s ease-in-out infinite reverse}
@keyframes disco-drift{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(6%,-5%) rotate(18deg) scale(1.15)}}
@keyframes disco-licht{0%,100%{opacity:1}45%{opacity:.25}55%{opacity:.9}}
[data-ansicht="disco"] .card{backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 12px 40px rgba(0,0,0,.45)}
[data-ansicht="disco"] .kopf{background:rgba(11,7,20,.75);backdrop-filter:blur(8px)}
[data-ansicht="disco"] .knopf{box-shadow:0 0 18px rgba(255,63,164,.55);animation:disco-puls 2.4s ease-in-out infinite}
[data-ansicht="disco"] .knopf.leer{box-shadow:none;animation:none}
@keyframes disco-puls{0%,100%{box-shadow:0 0 12px rgba(255,63,164,.4)}50%{box-shadow:0 0 26px rgba(63,182,255,.7)}}
[data-ansicht="disco"] input,[data-ansicht="disco"] textarea,[data-ansicht="disco"] select{background:var(--hinweis-flaeche);color:var(--text);color-scheme:dark}
@media (prefers-reduced-motion:reduce){
  [data-ansicht="disco"] body::before,[data-ansicht="disco"] body::after,[data-ansicht="disco"] .knopf{animation:none}
}

/* Sprachwahl (08.09.2026): alle Sprachen als Kacheln, im CI der Marke */
.sprachen{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.sprachen .sprache-knopf{min-width:120px;text-align:center}
.sprache-andere .zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sprache-andere input[type=text]{flex:1;min-width:200px}

/* ---- Freundebuch (C3b) — Papier, Polaroid, Handschrift, Sticker ---- */
.fb-seite{position:relative;background:var(--papier,#f3eee6);border:1px solid var(--linie);border-radius:14px;padding:22px 22px 18px;margin:0 0 18px;
  box-shadow:0 2px 0 rgba(0,0,0,.04),0 14px 30px -18px rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(transparent 0 31px,rgba(0,0,0,.06) 31px 32px);background-attachment:local}
.fb-formular{background-image:none}
.fb-hand{font-family:"Caveat","Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:1.25em;line-height:1.25}
.fb-kopf{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.fb-kopf-text{flex:1 1 260px;min-width:0}
.fb-name{margin:0 0 4px;font-size:1.55rem}
.fb-wort{font-size:1.6em;margin:6px 0 0}
.fb-polaroid{background:#fff;padding:10px 10px 30px;border:1px solid #e5e0d6;box-shadow:0 8px 18px -10px rgba(0,0,0,.4);transform:rotate(-3deg);width:170px;flex:0 0 auto;position:relative}
.fb-polaroid img,.fb-kein-foto{display:block;width:150px;height:150px;object-fit:cover;background:#ece6dc}
.fb-kein-foto{display:flex;align-items:center;justify-content:center;font-size:64px;color:#b9b0a3;font-weight:700}
.fb-polaroid-text{position:absolute;left:0;right:0;bottom:4px;text-align:center;color:#403e3e}
.fb-antworten{margin:14px 0 0;padding:0}
.fb-antwort{padding:6px 0 4px;border-bottom:1px dashed rgba(0,0,0,.12)}
.fb-antwort dt{font-size:13.5px;color:var(--leise);text-transform:uppercase;letter-spacing:.04em}
.fb-antwort dd{margin:2px 0 0;font-size:1.15rem;overflow-wrap:anywhere}
.fb-dimensionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 18px;margin-top:14px}
.fb-dim{display:flex;flex-direction:column;gap:3px}
.fb-schieber{display:inline-flex;gap:5px;vertical-align:middle}
.fb-schieber i{width:14px;height:14px;border-radius:50%;border:2px solid var(--akzent);display:inline-block;background:transparent}
.fb-schieber i.an{background:var(--akzent)}
.fb-gruss{margin-top:16px}
.fb-sticker{position:absolute;width:38px;height:38px;border-radius:50%;opacity:.85;pointer-events:none}
.fb-sticker-1{top:-10px;right:26px;background:radial-gradient(circle at 35% 35%,#ffd86b,#f2a93b);transform:rotate(12deg)}
.fb-sticker-2{bottom:14px;right:-8px;width:26px;height:26px;background:radial-gradient(circle at 35% 35%,#9fd8c5,#3aa88a)}
.fb-zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px}
.fb-frage label,.fb-frage .label{display:block;margin-bottom:4px}
.fb-frage input[type=text],.fb-frage textarea{font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:1.25rem;background:rgba(255,255,255,.65)}
.fb-farben{display:inline-flex;gap:8px;flex-wrap:wrap}
.fb-farbe{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--linie);position:relative;cursor:pointer;display:inline-block}
.fb-farbe input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fb-farbe input:checked+span{position:absolute;inset:-5px;border:2px solid var(--akzent);border-radius:50%}
.fb-haken{display:flex;flex-wrap:wrap;gap:8px}
.fb-haken .wahl{display:inline-flex;align-items:center;padding:6px 10px;margin:0}
.fb-emoji input{width:5em;font-size:1.6rem;text-align:center}
.fb-wer li{padding:4px 0}
@media (max-width:520px){.fb-polaroid{transform:none;width:100%;max-width:220px}.fb-polaroid img,.fb-kein-foto{width:100%;height:auto;aspect-ratio:1}}

/* ---- Team-Seite: Zimmer-Tabelle und Bewerbungskarten (lesbar statt gequetscht, 10.09.2026) ---- */
.tz{width:100%;border-collapse:collapse;font-size:15px}
.tz th{text-align:left;font-weight:600;color:var(--leise);font-size:13px;text-transform:uppercase;letter-spacing:.04em;padding:6px 10px 8px;border-bottom:1px solid var(--linie)}
.tz td{padding:9px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
.tz tr:last-child td{border-bottom:0}
.tz .preis{white-space:nowrap;font-weight:600}
.tb{padding:18px 20px;margin-bottom:14px}
.tb-kopf{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tb-name{font-size:1.2rem;font-weight:700;margin:0}
.tb-kontakt{color:var(--leise);font-size:14.5px;margin:2px 0 0}
.tb-score{display:inline-flex;align-items:center;gap:8px;background:var(--akzent);color:var(--knopf-text);border-radius:999px;padding:6px 14px;font-weight:700;white-space:nowrap}
.tb-score.aus{background:transparent;color:var(--rot,#b3261e);border:1px solid var(--rot,#b3261e)}
.tb-fakten{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.tb-fakten li{background:var(--grund);border:1px solid var(--linie);border-radius:999px;padding:4px 11px;font-size:14px}
.tb-fakten li b{font-weight:600}
.tb-grund{margin:12px 0 0;font-size:15px}
.tb-votum{margin:10px 0 0;font-size:14.5px;color:var(--leise)}
.tb-vorstellung{margin:10px 0 0;font-style:italic;color:var(--text);border-left:3px solid var(--linie);padding-left:12px}
.tb-links{margin:10px 0 0;font-size:14.5px}
.tb-links a{margin-right:14px}
.tb-aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--linie)}
.tb-aktionen form{display:inline-flex;gap:8px;align-items:center;margin:0}
.tb-aktionen input[type=url]{width:200px}
.tb-aktionen input[type=datetime-local]{width:210px}
.tb-aktionen .rechts{margin-left:auto}
.tb.aus{opacity:.85}

/* ---- Startseite: Hero, Zimmerkarten, Schritte (10.09.2026) ---- */
.inhalt.breit{max-width:960px}
.hero{padding:26px 0 18px}
.hero-claim{margin:0 0 6px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);font-weight:700}
.hero-titel{font-size:clamp(28px,4.2vw,40px);line-height:1.15;margin:0 0 12px;max-width:26ch}
.hero-text{font-size:17px;line-height:1.5;color:var(--text);max-width:60ch;margin:0 0 18px}
.abschnitt{margin:26px 0 12px;font-size:20px}
.zk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.zk{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);overflow:hidden;text-decoration:none;color:var(--text);
  transition:transform .15s ease,box-shadow .15s ease}
.zk:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(0,0,0,.35)}
.zk-bild{position:relative;height:150px;background:linear-gradient(135deg,var(--ton,#cfe3f7),#ffffff 140%);display:flex;align-items:flex-end;padding:14px}
.zk-buchstabe{font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:96px;line-height:1;color:rgba(0,0,0,.18);position:absolute;right:16px;top:8px}
.zk-badge{background:var(--karte);border:1px solid var(--linie);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600}
.zk-text{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.zk-titel{margin:0;font-size:18px;font-weight:700}
.zk-ort{margin:0;color:var(--leise);font-size:14.5px}
.zk-merkmale{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.zk-merkmale li{background:var(--grund);border:1px solid var(--linie);border-radius:999px;padding:3px 10px;font-size:13px}
.zk-wer{margin:4px 0 0;font-size:14.5px}
.zk-preis{margin:auto 0 0;padding-top:10px;font-size:20px}
.zk-preis strong{font-weight:700}
.schritte{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.schritte li{display:flex;gap:12px;align-items:flex-start;background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);padding:14px 16px;font-size:15px}
.schritt-nr{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--akzent);color:var(--knopf-text);display:inline-flex;align-items:center;justify-content:center;font-weight:700}

/* ---- Freundebuch 2 (C6, Karte 136359): Blätter, Fortschritt, echte Schieber, Emoji-Chips, Lückensätze, Social ---- */
.fb-fortschritt{height:10px;border-radius:999px;background:var(--linie);overflow:hidden;margin:8px 0 4px}
.fb-fortschritt-balken{display:block;height:100%;background:var(--akzent);border-radius:999px;transition:width .3s}
.fb-blaetter{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:10px 0 16px}
.fb-blaetter li a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px 6px 6px;border:1px solid var(--linie);border-radius:999px;
  text-decoration:none;color:var(--text);font-size:14px;background:var(--karte)}
.fb-blaetter li.aktiv a{border-color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent);font-weight:700}
.fb-blaetter li.fertig .fb-blatt-nr{background:var(--gut);color:var(--gut-text)}
.fb-blatt-nr{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--linie);font-weight:700;font-size:13px}
.fb-blatt-titel{margin:0 0 14px}
.fb-blatt-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px dashed rgba(0,0,0,.15)}
.fb-blatt-nav .knopf:last-child{margin-left:auto}
/* Echte Schieber: ein Griff auf einer Bahn, die Pole an den Enden — die Punkte von C3b sind weg. */
.fb-schieber-feld label{margin-bottom:6px}
.fb-range{display:grid;grid-template-columns:minmax(70px,1fr) minmax(140px,3fr) minmax(70px,1fr);align-items:center;gap:10px}
.fb-pol{font-size:13.5px;color:var(--leise);line-height:1.2}
.fb-pol-l{text-align:right}
.fb-range input[type=range]{width:100%;margin:0;height:40px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;border:0;padding:0}
.fb-range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:rgba(0,0,0,.14)}
.fb-range input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:rgba(0,0,0,.14)}
.fb-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--akzent);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fb-range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--akzent);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fb-range input[type=range]:focus-visible{outline:2px solid var(--akzent);outline-offset:4px;border-radius:999px}
/* Dieselbe Bahn auf der fertigen Seite — nur zum Ansehen. */
.fb-spur{display:grid;grid-template-columns:minmax(60px,1fr) minmax(100px,2fr) minmax(60px,1fr);align-items:center;gap:8px;font-size:13px;color:var(--leise)}
.fb-spur-links{text-align:right}
.fb-spur-bahn{position:relative;height:8px;border-radius:999px;background:rgba(0,0,0,.14);display:block}
.fb-spur-bahn i{position:absolute;top:-6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--akzent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
  left:0;transform:translateX(calc(var(--l,0) * 1%))}
.fb-abschnitt{margin:18px 0 6px;font-size:1rem}
/* Emoji-Chips: antippen statt Häkchen. */
.fb-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0}
.fb-chip{position:relative;display:inline-block;cursor:pointer;margin:0}
.fb-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fb-chip span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid var(--linie);background:rgba(255,255,255,.75);font-size:15px}
.fb-chip em{font-style:normal;font-size:1.25em;line-height:1}
.fb-chip input:checked+span,.fb-chip.an span{background:var(--akzent);color:var(--knopf-text);border-color:var(--akzent)}
.fb-chip input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.fb-chip a,a.fb-chip{text-decoration:none;color:inherit}
.fb-eigene{display:inline-block;width:auto;min-width:160px;margin:0 8px 8px 0;font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:1.2rem;background:rgba(255,255,255,.65)}
/* Lückensätze: die Pflichtangaben als Sätze mit Lücken. */
.fb-luecken{font-size:1.45rem;line-height:2.1;margin:0 0 6px}
.fb-luecke{display:inline-block;width:auto;min-width:6ch;max-width:100%;padding:2px 8px;margin:0 2px;border:0;border-bottom:2px dashed rgba(0,0,0,.35);border-radius:0;background:rgba(255,255,255,.55);
  font-size:inherit;line-height:1.3;vertical-align:baseline}
.fb-luecke.hat-fehler{border-bottom-color:var(--rot)}
select.fb-luecke{font-family:var(--schrift);font-size:1rem}
.fb-luecke:focus{outline:none;border-bottom-color:var(--akzent);background:#fff}
.fb-gemeinsam{background:rgba(255,255,255,.7);border:1px dashed rgba(0,0,0,.25);border-radius:12px;padding:10px 14px;margin:10px 0 4px}
.fb-gemeinsam .fb-chips{margin:8px 0 0}
.fb-frage-titel{font-size:13.5px;color:var(--leise);text-transform:uppercase;letter-spacing:.04em}
.fb-emoji-gross{font-size:1.3em}
.fb-social{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.fb-social .fb-chip span{background:rgba(255,255,255,.85);color:var(--text)}
.fb-social-zeichen{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--akzent);margin-right:4px}
.fb-social-instagram .fb-social-zeichen{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);border-radius:4px}
.fb-social-tiktok .fb-social-zeichen{background:#0a0a0a;border-radius:50%}
.fb-social-linkedin .fb-social-zeichen{background:#0a66c2;border-radius:2px}
.fb-social-spotify .fb-social-zeichen{background:#1db954;border-radius:50%}
@media (max-width:520px){
  .fb-range{grid-template-columns:1fr 1fr;grid-template-areas:"in in" "l r"}
  .fb-range input[type=range]{grid-area:in}.fb-pol-l{grid-area:l;text-align:left}.fb-pol-r{grid-area:r;text-align:right}
  .fb-spur{grid-template-columns:1fr 1fr;grid-template-areas:"b b" "l r"}
  .fb-spur-bahn{grid-area:b}.fb-spur-links{grid-area:l;text-align:left}.fb-spur-rechts{grid-area:r;text-align:right}
  .fb-luecken{font-size:1.25rem}
}