/* ABRECHNUNGS-PILOT (Testumgebung, 6.10.2026)

   Der Frage-Assistent ersetzt die sichtbare Oberflaeche des Werkzeugs. Die
   alte Seite bleibt im DOM: Rechnung, Brief, PDF und Word entstehen weiter
   dort (siehe assistent.js). Ausgeblendet wird sie erst, wenn assistent.js
   laeuft (body.mit-assistent) - faellt das Skript aus, steht das alte
   Werkzeug da statt einer leeren Seite.

   Farben und Masse aus dem Entwurf (Auftrag Abrechnungs-Pilot, "Look"). */

@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* IBM Plex Sans 1.1.0 (npm @ibm/plex-sans, fonts/complete), selbst gehostet
   wie die uebrigen Plex-Schnitte - kein Aufruf an ein fremdes CDN. */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

body.mit-assistent .toolbar,
body.mit-assistent .briefkopf,
body.mit-assistent #mobilbon,
body.mit-assistent header.top .einstieg{display:none !important}
/* NICHT display:none (gemessen 6.10.2026): Der PDF-Setzer liest den Brief
   ueber innerText. Fuer ein Element, das nicht gezeichnet wird, liefert
   innerText den Text ohne Zeilenumbrueche - im PDF stand dann "Erika
   BeispielIBAN DE89 ...Verwendungszweck:" in einer Zeile. visibility:hidden
   geht aus demselben Grund nicht (innerText laesst unsichtbaren Text weg).
   Also aus dem Bild geschoben, in normaler Breite; assistent.js setzt inert
   und aria-hidden, damit weder Tab noch Vorleser hineinlaufen. */
body.mit-assistent .cols,
body.mit-assistent .briefrahmen,
body.mit-assistent .brief-anlagen{position:absolute !important;left:-30000px !important;top:0 !important;width:1100px !important;pointer-events:none}

/* Das Lager haelt die Teile der alten Seite, die der Assistent einblendet
   (Dateiliste, Ladebalken, Fotostapel, Kaufkasten), solange er sie nicht
   zeigt. */
#as-lager{display:none}

.as-buehne{
  --as-grund:#F3F2EE; --as-text:#16202B; --as-neben:#4A5561; --as-linie:#D5D3CC;
  --as-blau:#1C2733; --as-blau-dunkel:#0F161E; --as-orange:#E07A1F;
  --as-gruen:#2F6B3A; --as-warn:#B4441C; --as-feinlinie:#E4E2DC;
  /* Runde 16: linksbuendig mit der Ueberschrift der Seite. Zentriert auf
     912 px stand die Karte rund 120 px eingerueckt unter einer Ueberschrift,
     die am linken Rand beginnt ("ungluecklich positioniert"). */
  display:grid; grid-template-columns:minmax(0,700px) minmax(0,280px);
  justify-content:start; gap:48px; align-items:start; margin:8px 0 40px;
  font-family:"IBM Plex Sans","IBM Plex Sans Condensed",system-ui,sans-serif;
}
@media(max-width:980px){ .as-buehne{grid-template-columns:minmax(0,1fr); gap:24px} }

.as{
  background:var(--as-grund); color:var(--as-text);
  border:1px solid var(--as-linie); border-radius:8px;
  /* Runde 16: keine feste Hoehe am Bildschirm - sie schob die Antworten an
     den unteren Rand und liess darueber eine grosse Luecke. Am Telefon
     bleibt sie (Knoepfe unter dem Daumen). */
  display:flex; flex-direction:column; box-sizing:border-box;
}
/* Runde 22: am Telefon keine Mindesthoehe mehr. 100vh ist auf iOS die
   Hoehe ohne Safari-Leisten; mit .as-luft (flex-grow) stand der Weiter-Knopf
   darunter, nach jedem Schrittwechsel wieder (Uygar, 10.10.2026). */
@media(max-width:600px){
  .as{border-radius:6px}
  .as .as-luft{flex-grow:0;min-height:8px}
  .as .as-flaeche{padding:18px 16px 20px;gap:12px}
  .as .as-kopf{padding:12px 16px 0;gap:8px}
  .as .as-antwort,.as .as-haupt,.as .as-neben{min-height:50px}
  .as .as-unter{font-size:16px;line-height:1.45}
  .as .as-feld{height:52px}
  .as .as-feld input{font-size:22px}
}
.as *{box-sizing:border-box}
.as a{color:var(--as-blau)} .as a:hover{color:var(--as-blau-dunkel)}
.as button{font-family:inherit}
.as button:focus-visible,.as input:focus-visible,.as a:focus-visible,
.as-spalte a:focus-visible{outline:3px solid var(--as-blau);outline-offset:2px}
.as h2:focus{outline:none}
.as input[type=checkbox],.as input[type=radio]{width:22px;height:22px;accent-color:var(--as-blau);margin:0;flex-shrink:0}

/* Kopf: Zurueck, sieben Segmente, Schrittzeile */
.as-kopf{padding:16px 20px 0;display:flex;flex-direction:column;gap:10px}
.as-kopfzeile{display:flex;align-items:center;gap:12px}
.as-vorher{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--as-text);margin-left:-10px}
.as-segmente{flex-grow:1;display:flex;gap:4px}
.as-segmente i{flex:1;height:4px;border-radius:2px;background:var(--as-linie)}
.as-segmente i.an{background:var(--as-blau)}
/* Besuchte Abschnitte sind anklickbar - die Flaeche ist hoeher als der Strich. */
.as-segmente{align-items:center}
.as-segmente button{flex:1;height:20px;padding:0;border:0;cursor:pointer;
  background:linear-gradient(var(--as-blau),var(--as-blau)) center/100% 4px no-repeat}
.as-segmente button:hover{background-size:100% 6px}
.as-nachher{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:6px;cursor:pointer;color:var(--as-text);margin-right:-10px}
.as-nachher svg{transform:scaleX(-1)}
.as-nachher:disabled{opacity:.25;cursor:default}
/* Einordnung, nicht Ergebnis (Runde 16b): kleiner und grau. */
.as-verwaltung{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--as-feinlinie);
  color:var(--as-neben)}
.as-verwaltung .as-wer{font-size:13px}
.as-verwaltung .as-liste{font-size:14px!important}
.as-verwaltung .as-zeile{min-height:0;padding:4px 0;border:0;font-size:14px}
.as-verwaltung .as-zeile.summe{color:var(--as-text);font-weight:500}

/* Leichte Bewegung (Uygar, 7.10.2026: Wechsel "zu schnell, abgehakt").
   Nur opacity und transform, ohne fill-mode: Nach 0,25 s steht nichts mehr
   verschoben - der PDF-Setzer liest den Brief aus derselben Flaeche. */
@keyframes asRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes asReinZurueck{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes asEinblenden{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.as.as-rein > .as-flaeche{animation:asRein .26s ease-out}
.as.as-rein-zurueck > .as-flaeche{animation:asReinZurueck .26s ease-out}
.as-einblenden{animation:asEinblenden .25s ease-out}
.as-haupt,.as-neben,.as-antwort,.as-modus-wahl button{transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.as-haupt:active,.as-neben:active,.as-antwort:active{transform:scale(.985)}
.as-antwort:hover{border-color:var(--as-blau)}
@media(prefers-reduced-motion:reduce){
  .as.as-rein > .as-flaeche,.as.as-rein-zurueck > .as-flaeche,.as-einblenden{animation:none}
  .as-haupt:active,.as-neben:active,.as-antwort:active{transform:none}
}
.as-schritt{font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--as-neben)}

.as-flaeche{flex-grow:1;display:flex;flex-direction:column;padding:24px;gap:14px}
.as-flaeche.start{padding:28px 24px 24px}
.as-marke{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.as-startmitte{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:24px 0}
.as-gross{margin:0;font-size:34px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
.as-frage{margin:0;font-size:27px;line-height:1.2;font-weight:600}
@media(max-width:400px){ .as-gross{font-size:30px} .as-frage{font-size:24px} }
.as-unter{margin:0;font-size:17px;line-height:1.5;color:var(--as-neben)}
.as-lead{margin:0;font-size:18px;line-height:1.5;color:var(--as-neben)}
.as-haken{display:flex;flex-direction:column;gap:10px;font-size:16px}
.as-haken div{display:flex;gap:10px;align-items:center}
.as-kasten{padding:14px 16px;background:#fff;border:1px solid var(--as-linie);border-radius:6px;font-size:15px;line-height:1.5}
.as-kasten.spalte{display:flex;flex-direction:column;gap:8px}
.as-luft{flex-grow:1;min-height:24px}
.as-knoepfe{display:flex;flex-direction:column;gap:10px}

.as-haupt{width:100%;min-height:56px;background:var(--as-blau);color:#fff;border:none;border-radius:6px;
  font-size:18px;font-weight:600;cursor:pointer;padding:10px 16px;flex-shrink:0}
.as-haupt:hover{background:var(--as-blau-dunkel)}
.as-haupt[disabled]{background:#8A97A6;cursor:not-allowed}
.as-haupt .klein{display:block;font-size:13px;font-weight:400}
.as-neben{width:100%;min-height:56px;background:#fff;color:var(--as-text);border:1.5px solid var(--as-text);
  border-radius:6px;font-size:17px;font-weight:500;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:10px 16px}
.as-antwort{width:100%;min-height:56px;padding:14px 18px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;text-align:left;font-size:17px;line-height:1.3;font-weight:500;color:var(--as-text);
  background:#fff;border:1.5px solid var(--as-text);border-radius:6px;cursor:pointer}
.as-antwort svg{flex-shrink:0}
.as-link{align-self:flex-start;min-height:44px;padding:0;background:none;border:none;color:var(--as-blau);
  font-size:15px;font-weight:500;text-decoration:underline;cursor:pointer;text-align:left}
.as-link.mitte{align-self:center}
a.as-haupt{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}
a.as-haupt:hover{color:#fff}

/* Eingaben */
.as-label{font-size:15px;font-weight:500}
.as-feld{display:flex;align-items:center;background:#fff;border:1.5px solid var(--as-text);border-radius:6px;
  padding:0 18px;height:60px;flex-shrink:0}
.as-feld input{flex-grow:1;min-width:0;border:none;background:transparent;font-family:"IBM Plex Mono",monospace;
  font-size:26px;font-weight:500;color:var(--as-text);outline:none}
.as-feld span{font-size:22px;color:var(--as-neben)}
.as-feld.klein{height:56px;padding:0 12px}
.as-feld.klein input{font-size:22px} .as-feld.klein span{font-size:18px}
.as-feld:focus-within{outline:3px solid var(--as-blau);outline-offset:2px}
.as-feld input:focus-visible{outline:none}
.as-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.as-zwei > div{display:flex;flex-direction:column;gap:6px}
/* Runde 19: Felder "Fuer das Anschreiben" - Beschriftung dicht am Feld, PLZ schmal. */
.as-eingabe{display:flex;flex-direction:column;gap:6px;min-width:0}
.as-zwei.as-plzort{grid-template-columns:minmax(0,8em) minmax(0,1fr)}
.as-text{height:52px;padding:0 14px;border:1.5px solid var(--as-text);border-radius:6px;font-size:17px;
  font-family:inherit;color:var(--as-text);background:#fff;width:100%}
.as-text.fehlt{border-color:var(--as-warn)}
.as-fehler{font-size:14px;line-height:1.4;color:var(--as-warn)}
.as-wahl{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16px;cursor:pointer;line-height:1.35}
.as-wahl.oben{align-items:flex-start}
.as-wahl.oben input{margin-top:1px}

/* Monatszaehler */
.as-zaehler{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px}
.as-zaehler button{width:56px;height:56px;background:#fff;border:1.5px solid var(--as-text);border-radius:6px;
  font-size:26px;cursor:pointer;color:var(--as-text)}
.as-zaehler button[disabled]{opacity:.35;cursor:not-allowed}
.as-zaehler .wert{min-width:140px;text-align:center}
.as-zaehler .gross{font-family:"IBM Plex Mono",monospace;font-size:40px;font-weight:500}
.as-zaehler .klein{font-size:15px;color:var(--as-neben)}
.as-ab{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px}
.as-ab > div{display:flex;align-items:center;gap:6px}
.as-ab button{width:44px;height:44px;background:#fff;border:1.5px solid var(--as-text);border-radius:6px;
  font-size:20px;cursor:pointer;color:var(--as-text)}
.as-ab b{min-width:48px;text-align:center;font-weight:500}

/* Listen mit Linien */
.as-liste{display:flex;flex-direction:column;border-top:1px solid var(--as-linie)}
.as-zeile{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--as-linie);font-size:16px}
.as-zeile.fein{padding:8px 0;border-bottom-color:var(--as-feinlinie);font-size:14px}
.as-zeile.summe{border-bottom:2px solid var(--as-text)}
.as-zeile .num,.as-num{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.as-zeile .leise{color:var(--as-neben)}
.as-pruef{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--as-linie)}
.as-pruef svg{flex-shrink:0;margin-top:1px}
.as-pruef div{display:flex;flex-direction:column;gap:2px}
.as-pruef b{font-size:16px;font-weight:500}
.as-pruef span{font-size:14px;line-height:1.4;color:var(--as-neben)}
.as-posten{display:flex;align-items:center;gap:14px;min-height:52px;border-bottom:1px solid var(--as-linie);font-size:15px;cursor:pointer}
.as-posten .bez{flex-grow:1;line-height:1.35;padding:6px 0}
.as-posten .num{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.as-gruppe{font-size:14px;font-weight:600;color:var(--as-neben);margin-top:10px}

/* Pruefbogen in "Alle Posten ansehen" (7.10.2026) */
.as-pz{border-bottom:1px solid var(--as-linie)}
.as-pz-zeile{display:flex;align-items:center;gap:12px;min-height:52px}
.as-pz-platz{width:22px;flex-shrink:0}
.as-pz-k{flex-grow:1;min-width:0;display:flex;align-items:baseline;gap:8px;background:none;border:none;padding:8px 0;
  text-align:left;cursor:pointer;color:var(--as-text);font-size:15px;line-height:1.35;min-height:44px}
.as-pz-h{width:12px;flex-shrink:0;color:var(--as-gruen);font-weight:600}
.as-pz-k .bez{flex-grow:1;min-width:0}
.as-pz-rand{display:block;font-size:12.5px;color:var(--as-neben)}
.as-pz.verdacht .as-pz-rand{color:var(--as-warn);font-weight:600}
.as-pz.verdacht .num{color:var(--as-warn)}
.as-pz.misch .as-pz-rand{color:#8A5E0F}
.as-pz-f{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--as-neben);white-space:nowrap}
.as-pz-k .num{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.as-pz-d{padding:0 0 12px 34px;font-size:14px;line-height:1.45;color:var(--as-neben);display:flex;flex-direction:column;gap:4px;min-width:0}
.as-pz-rw{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--as-text);overflow-wrap:anywhere}
.as-pz-bild{overflow-x:auto;max-width:100%;margin-top:6px;border:1px solid var(--as-linie);background:#fff;overscroll-behavior-x:contain}
.as-pz-bild canvas{display:block}
.as-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Der Ausschnitt ist breiter als der Kasten (Lesegroesse) - ohne min-width:0
   waechst jedes Flex-Kind mit ihm, und die Seite laeuft am Telefon quer
   (wie am 3.10. im Pruefbogen gemessen). */
.as-flaeche,.as-liste,.as-pz{min-width:0}
/* Am Telefon steht die Fundstelle unter der Bezeichnung statt daneben. */
@media(max-width:600px){
  .as-pz-k{display:grid;grid-template-columns:12px minmax(0,1fr) auto;column-gap:8px;row-gap:2px}
  .as-pz-h{grid-column:1;grid-row:1} .as-pz-k .bez{grid-column:2;grid-row:1}
  .as-pz-k .num{grid-column:3;grid-row:1} .as-pz-f{grid-column:2;grid-row:2}
  .as-pz-d{padding-left:0}
}

.as-geprueft{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;
  border:1.5px solid var(--as-gruen);border-radius:6px;font-size:16px;line-height:1.45}
.as-geprueft strong{font-weight:600;color:var(--as-gruen)}
.as-geprueft.offen{border-color:var(--as-warn)}
.as-geprueft.offen strong{color:var(--as-warn)}
.as-geprueft.neutral{border-color:var(--as-linie)}
.as-geprueft svg{flex-shrink:0}
.as-erledigt{display:flex;flex-direction:column;gap:8px}
.as-erledigt .kopf{font-size:14px;font-weight:600;color:var(--as-neben)}
.as-erledigt div.p{display:flex;gap:10px;font-size:14px;line-height:1.45}
.as-erledigt svg{flex-shrink:0;margin-top:1px}

/* Ergebnis */
.as-wer{font-size:15px;font-weight:600;color:var(--as-neben)}
.as-betrag{font-family:"IBM Plex Mono",monospace;font-size:42px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.as-betrag.haben{color:var(--as-gruen)}
.as-warntext{font-size:14px;line-height:1.45;color:var(--as-warn)}
.as-leise{font-size:14px;line-height:1.45;color:var(--as-neben)}
.as-zeichen{display:flex;gap:10px;font-size:15px;line-height:1.45}
.as-zeichen.gruen{color:var(--as-gruen)}
.as-zeichen svg{flex-shrink:0}
.as-docs{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--as-neben)}
.as-docs b{font-weight:600}
.as-garantie{font-size:13px;color:var(--as-neben);text-align:center}

/* Teile der alten Seite im Assistenten */
body.mit-assistent .as .briefrahmen{position:static !important;left:auto !important;width:auto !important;
  pointer-events:auto;padding:0;margin:0 -8px}
.as .brief.zeigen{margin-bottom:0}
.as-teilen{display:flex;flex-wrap:wrap;gap:10px}
.as-teilen button{min-height:44px}
.as-slot .files{margin:0}
.as-slot .bar{margin:4px 0 0}
.as-slot #freiBox .kaufzeile{flex-wrap:wrap}
.as-offenlegung{font-size:13px;line-height:1.5;color:var(--as-neben)}
.as-datei{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Umschalter Assistent / klassisch und Weg zum Beispiel (7.10.2026).
   Steht ueber beiden Ansichten; in der klassischen auf voller Breite. */
.as-modus{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  max-width:1028px;margin:14px 0 12px;font-family:"IBM Plex Sans","IBM Plex Sans Condensed",system-ui,sans-serif}
body:not(.mit-assistent) .as-modus{max-width:none}
.as-modus-wahl{display:flex}
.as-modus-wahl button{min-height:44px;padding:8px 16px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  background:#fff;color:#16202B;border:1.5px solid #16202B}
.as-modus-wahl button:first-child{border-radius:6px 0 0 6px}
.as-modus-wahl button:last-child{border-radius:0 6px 6px 0;border-left:0}
.as-modus-wahl button[aria-pressed="true"]{background:#1C2733;border-color:#1C2733;color:#fff}
.as-modus-bsp{min-height:44px;padding:0;background:none;border:none;font:inherit;font-size:15px;font-weight:500;
  color:#1C2733;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.as-modus button:focus-visible{outline:3px solid #1C2733;outline-offset:2px}
@media(max-width:420px){ .as-modus-wahl button{padding:8px 12px;font-size:14px} }

/* Rechte Spalte (Web) */
.as-spalte{display:flex;flex-direction:column;gap:22px;font-size:15px;line-height:1.5;color:var(--as-text,#16202B);
  font-family:"IBM Plex Sans","IBM Plex Sans Condensed",system-ui,sans-serif}
.as-spalte h2{font-size:14px;font-weight:600;color:var(--as-neben);margin:0 0 6px;letter-spacing:.02em}
.as-spalte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.as-spalte a{color:var(--as-blau)}
.as-spalte .vertrauen li{display:flex;gap:10px;align-items:flex-start}
.as-spalte svg{flex-shrink:0;margin-top:2px}
/* Am Telefon 44 px Tippziel auch fuer die Verweise der Spalte. */
@media(max-width:600px){ .as-spalte ul:not(.vertrauen){gap:0} .as-spalte ul:not(.vertrauen) a{display:inline-block;padding:11px 0} }
/* Im Schritt Grundsteuer kein "x" an der Dateiliste - es loeschte dort auch
   die Hausgeldabrechnung (Hausverwaltung Runde 2, 7.10.2026). */
.as-ohne-entf .entf{display:none}