/* 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-inline-start: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;inset-inline-start:-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{inset-inline-start: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:end;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-inline-end: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-inline-start: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)}
.absaetze{white-space:pre-line;overflow-wrap:anywhere}
.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-inline-start: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}
/* Haushalt (30.09.2026): eine Karte je Person im Formular. */
fieldset.person{border:1px solid var(--linie);border-radius:10px;padding:12px 14px 14px;margin:0 0 14px;min-width:0}
fieldset.person legend{padding:0 6px}
fieldset.person.hat-fehler{border:2px solid var(--rot)}
/* Nur fuer Vorleseprogramme sichtbar (Beschriftung der Sprachauswahl, 01.10.2026). */
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Schrift von rechts nach links (Paschtu, Dari, 01.10.2026): Pfeile zeigen in Leserichtung. */
[dir="rtl"] .pfeil{display:inline-block;transform:scaleX(-1)}

/* Beschriftung (beschriftung.py, 03.10.2026): das Schild als Schild; betahouse in der Haus-Schrift */
.beschr-schild{display:inline-block;min-width:220px;max-width:100%;margin:6px 0;padding:12px 18px;border:1px solid var(--text);
  border-radius:6px;background:var(--karte);color:var(--text);font-size:19px;line-height:1.35;white-space:pre-line}
.beschr-schild.haus-schrift{font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue",cursive}
.beschr-schild div:empty::before{content:"…";color:var(--leise)}
.beschr-schild .schild-wofuer{display:block;font-family:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin-bottom:4px}
.beschr-schild.schild-tuer{font-size:26px;padding:18px 24px;margin-left:8px}

/* Inserate-Übersicht für den Telefonservice (Karte 140211) */
.eckdaten{border-collapse:collapse;margin:8px 0;width:100%}
.eckdaten th{text-align:start;font-weight:600;padding:3px 12px 3px 0;vertical-align:top;white-space:nowrap;width:1%}
.eckdaten td{padding:3px 0}
/* Bezahlte Rechnungen hinter einem Aufklapper (Vorgabe 13.10.2026): die
   Zeile muss wie ein Knopf aussehen, sonst findet sie niemand. */
.aufklapper{margin-top:8px}
.aufklapper>summary{cursor:pointer;font-weight:600;padding:12px 2px;min-height:48px;
  box-sizing:border-box;display:flex;align-items:center;gap:8px;list-style:none;
  border-top:1px solid var(--linie)}
.aufklapper>summary::-webkit-details-marker{display:none}
.aufklapper>summary::before{content:"\203A";display:inline-block;transition:transform .15s;
  font-size:20px;line-height:1}
.aufklapper[open]>summary::before{transform:rotate(90deg)}
.aufklapper>summary:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}