/* Hausverwaltung — Gestaltung
   Leitbild: ein Kontobuch, kein Dashboard. Zahlen stehen untereinander und
   fluchten, Farbe markiert nur den Zustand einer Zeile. Die eine auffällige
   Stelle ist der Monatsbalken oben; alles andere bleibt ruhig. */

:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --sunk:#F5F7F9;
  --ink:#16222B; --ink-2:#55656F; --ink-3:#8494A0;
  --line:#DCE3E8; --line-soft:#E9EEF1;

  --ok:#1C6B52;   --ok-bg:#E8F2ED;   --ok-rand:#7FBBA4;
  --open:#8A5A12; --open-bg:#FAF1E0; --open-rand:#D8B072;
  --late:#A33226; --late-bg:#FBEAE7; --late-rand:#D99288;

  --accent:#1A4A5E; --accent-ink:#FFFFFF; --accent-soft:#E6EEF2;
  --bar:#D3DBE1; --chip:#EBF0F3;

  --r:10px; --r-klein:6px;
  --schatten:0 1px 2px rgba(16,34,43,.06), 0 1px 10px rgba(16,34,43,.04);
  color-scheme:light; box-sizing:border-box;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0E1619; --surface:#172227; --sunk:#131D22;
  --ink:#E4ECEF; --ink-2:#9FB0B8; --ink-3:#73858E;
  --line:#26343B; --line-soft:#1F2C32;
  --ok:#74C5A7;   --ok-bg:#15291F;  --ok-rand:#2F6B55;
  --open:#DCAE68; --open-bg:#2A2015; --open-rand:#6E5527;
  --late:#EE9287; --late-bg:#2F1A18; --late-rand:#7A3A33;
  --accent:#86B8CC; --accent-ink:#0C1518; --accent-soft:#17262D;
  --bar:#26343B; --chip:#1C282E;
  --schatten:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}}
*{box-sizing:inherit}

/* Muss vor allem anderen stehen: sonst gewinnt ein display aus einer
   Klasse gegen das hidden-Attribut, und ausgeblendete Bereiche wie die
   Anmeldung bleiben sichtbar. */
[hidden]{display:none !important}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-variant-numeric:tabular-nums; -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

h1{margin:0;font-size:25px;font-weight:650;letter-spacing:-.021em;line-height:1.15}
h3{margin:0;font-size:15px;font-weight:620}
.muted{color:var(--ink-2)} .small{font-size:13px}
.wrap{max-width:1060px;margin:0 auto;padding:16px 14px 80px}

/* ---------- Reiter ---------- */
.tabs{
  position:sticky;top:0;z-index:5;display:flex;gap:0;overflow-x:auto;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:env(safe-area-inset-top,0px) 6px 0;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  border:0;background:none;padding:13px 14px 11px;cursor:pointer;color:var(--ink-2);
  white-space:nowrap;border-bottom:2.5px solid transparent;font-weight:550;letter-spacing:-.005em;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Schaltflächen ---------- */
.btn{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-klein);
  padding:8px 13px;cursor:pointer;font-weight:520;color:var(--ink);
  transition:border-color .12s ease, background .12s ease;
}
.btn:hover{border-color:var(--ink-3);background:var(--sunk)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.12);background:var(--accent)}
.btn.small{padding:6px 11px;font-size:13.5px}
.btn.link{border:0;background:none;padding:4px 2px;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.btn.link:hover{background:none}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- Monatskopf und Balken ---------- */
.month{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.month .nav{display:flex;gap:6px}
.month .nav .btn{padding:7px 13px;font-size:17px;line-height:1}
.month h1{font-size:25px}

.tally{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 14px;margin-bottom:14px;box-shadow:var(--schatten);
}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nums div{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-2);min-width:0}
.nums b{font-size:21px;font-weight:620;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nums .late b{color:var(--late)}

.track{height:7px;border-radius:99px;background:var(--bar);margin-top:16px;overflow:hidden}
.track span{display:block;height:100%;width:0;border-radius:99px;background:var(--ok);
  transition:width .45s cubic-bezier(.4,0,.2,1)}

/* ---------- Werkzeugleiste ---------- */
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tools input{
  flex:1 1 180px;min-width:0;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-klein);background:var(--surface);
}
.tools input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.seg{display:inline-flex;background:var(--chip);border-radius:var(--r-klein);padding:3px;gap:2px}
.seg button{
  border:0;background:none;padding:7px 12px;border-radius:4px;cursor:pointer;
  color:var(--ink-2);font-size:13.5px;font-weight:530;white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,34,43,.1)}

/* ---------- Haus als Abschnitt ---------- */
.obj{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--schatten);
}
.obj h2{
  margin:0;padding:12px 16px;font-size:14.5px;font-weight:620;letter-spacing:-.005em;
  background:var(--sunk);border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.obj h2 small{font-weight:480;color:var(--ink-2);font-size:12.5px;white-space:nowrap}

.mrow{
  display:grid;grid-template-columns:minmax(0,1fr) 108px minmax(150px,max-content) auto;
  gap:12px;align-items:center;padding:11px 16px 11px 13px;
  border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;
}
.mrow:last-child{border-bottom:0}
.mrow:hover{background:var(--sunk)}
.who{min-width:0}
.who b{display:block;font-weight:580;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who div{font-size:12.5px;color:var(--ink-2);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt{text-align:right;font-variant-numeric:tabular-nums;font-size:16px;font-weight:580;letter-spacing:-.01em}
.amt small{display:block;font-size:11px;font-weight:450;color:var(--ink-3);letter-spacing:0}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;
  border-radius:99px;font-size:12.5px;font-weight:550;line-height:1.3;white-space:nowrap;
  background:var(--open-bg);color:var(--open);box-shadow:inset 0 0 0 1px var(--open-rand);
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill small{font-weight:450;opacity:.85;font-size:11.5px}
.pill.paid{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-rand)}
.pill.late{background:var(--late-bg);color:var(--late);box-shadow:inset 0 0 0 1px var(--late-rand)}

.mrow:has(.pill.paid){border-left-color:var(--ok-rand)}
.mrow:has(.pill.late){border-left-color:var(--late-rand);background:var(--late-bg)}

/* ---------- Aufträge ---------- */
.task{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r);padding:13px 15px;margin-bottom:10px;box-shadow:var(--schatten);
}
.task.done{opacity:.62;border-left-color:var(--ok-rand)}
.task .chk{margin:2px 0 0}
.task input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent);cursor:pointer}
.ttl{font-weight:580;letter-spacing:-.005em;line-height:1.35}
.task.done .ttl{text-decoration:line-through;text-decoration-thickness:1px}
.meta{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.desc{margin-top:7px;white-space:pre-wrap;font-size:14px;color:var(--ink-2);line-height:1.5}
.tacts{display:flex;gap:6px;align-items:flex-start}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:550;background:var(--chip);color:var(--ink-2);
}
.chip.urg{background:var(--late-bg);color:var(--late);box-shadow:inset 0 0 0 1px var(--late-rand)}
.chip.late{background:var(--late-bg);color:var(--late)}
.chip.soon{background:var(--open-bg);color:var(--open)}
.chip.done{background:var(--ok-bg);color:var(--ok)}

.notes{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft)}
.note{display:flex;gap:8px;font-size:13px;color:var(--ink-2);padding:3px 0}
.note .w{color:var(--ink-3);flex:0 0 auto;font-size:12px}
.addnote{display:flex;gap:6px;margin-top:7px}
.addnote input{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--sunk);font-size:13.5px}
.addnote input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}

.fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fotos a{display:block;flex:0 0 auto;line-height:0;border-radius:var(--r-klein);overflow:hidden;
  border:1px solid var(--line);background:var(--sunk)}
.fotos img{width:104px;height:104px;min-width:104px;max-width:none;object-fit:cover;display:block;
  transition:transform .15s ease}
.fotos a:hover img{transform:scale(1.04)}

/* ---------- Zähler ---------- */
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.counts span{
  display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
  font-size:12px;color:var(--ink-2);box-shadow:var(--schatten);
}
.counts .l b{font-size:19px;font-weight:620;color:var(--ink);letter-spacing:-.02em}

/* ---------- Karten und Tabellen ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--schatten);
}
.kap{width:100%;border-collapse:collapse;font-size:14px}
.kap th{
  text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  padding:8px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap;
}
.kap td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.kap td small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.kap tr:last-child td{border-bottom:0}
.kap tr.o td{background:var(--sunk);font-weight:600}
.kap input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--sunk)}
.kap input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}

/* ---------- Einheiten bearbeiten ---------- */
.ed-obj{margin-bottom:16px}
.ed-obj h4{margin:0 0 7px;font-size:13px;font-weight:620;color:var(--ink-2)}
.ed-row{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr auto;gap:8px;align-items:center;
  padding:5px 0;border-bottom:1px solid var(--line-soft)}
.ed-row:last-child{border-bottom:0}
.ed-head{font-size:11.5px;font-weight:600;color:var(--ink-2);border-bottom:1.5px solid var(--line);padding-bottom:7px}
.ed-row label{font-size:12px;color:var(--ink-2)}
.ed-row input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-klein);background:var(--sunk)}
.ed-row input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
.ed-row.gone input{opacity:.5;text-decoration:line-through}
.newobj{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.plus{font-size:18px;line-height:1}

/* ---------- Formulare und Dialoge ---------- */
.form{display:flex;flex-direction:column;gap:11px}
.form label,.g2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);font-weight:520}
.form input,.form select,.form textarea,.g2 input,.g2 select,.g2 textarea{
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--sunk);color:var(--ink);
}
.form input:focus,.form select:focus,.form textarea:focus,
.g2 input:focus,.g2 select:focus,.g2 textarea:focus{
  outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)
}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

.dlg{
  border:0;border-radius:14px;padding:0;background:var(--surface);color:var(--ink);
  width:min(560px,94vw);box-shadow:0 20px 60px rgba(16,34,43,.3);
}
.dlg::backdrop{background:rgba(16,34,43,.45)}
.dlg h3{padding:16px 18px 0}
.dlg .form,.dlg .g2{padding:14px 18px}
.foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;
  border-top:1px solid var(--line-soft);background:var(--sunk);
  border-radius:0 0 14px 14px;margin-top:4px}

/* ---------- Anmeldung ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--accent-soft) 100%)}
.loginbox{width:min(400px,100%);display:flex;flex-direction:column;gap:12px;padding:26px 24px;
  box-shadow:0 10px 40px rgba(16,34,43,.12)}
.loginbox h1{font-size:23px}
.loginbox label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);font-weight:520}
.loginbox input{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-klein);background:var(--sunk)}
.loginbox input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
.loginbox .btn{margin-top:4px;padding:11px}

/* ---------- Hinweise ---------- */
.msg{font-size:13px;color:var(--ink-2);margin:0;min-height:1em}
.warn{background:var(--late-bg);color:var(--late);border:1px solid var(--late-rand);
  border-radius:var(--r-klein);padding:10px 13px;margin-bottom:12px;font-size:13.5px}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--r);
  padding:26px 18px;text-align:center;color:var(--ink-2);font-size:14px}
.wait{color:var(--ink-3);font-size:13px;padding:14px 2px}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:760px){
  .wrap{padding:12px 11px 80px}
  .nums{grid-template-columns:1fr 1fr;gap:12px}
  .nums b{font-size:19px}
  .counts{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr}
  .ed-row{grid-template-columns:1fr 1fr;gap:7px}

  .mrow{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"who amt" "pill pill" "acts acts";
    gap:8px 12px;padding:12px 14px 12px 11px}
  .who{grid-area:who} .amt{grid-area:amt}
  .mrow > .pill{grid-area:pill;justify-self:start}
  .acts{grid-area:acts;justify-content:flex-start}
  .acts .btn{flex:1 1 auto}
  .task{grid-template-columns:auto minmax(0,1fr)}
  .tacts{grid-column:1 / -1;justify-content:flex-end;border-top:1px solid var(--line-soft);padding-top:9px}
  .kap{font-size:13.5px}
  .kap th,.kap td{padding:7px 8px}
}
@media (max-width:420px){
  .fotos img{width:84px;height:84px;min-width:84px}
}

/* ---------- Grundregeln, die überall greifen ----------
   Diese Elemente kommen ohne eigene Klasse vor: die vier Dialoge sind
   schlicht <dialog>, und Formularfelder stecken meist direkt in <label>. */

label{display:grid;gap:5px;font-size:12.5px;color:var(--ink-2);font-weight:520}
label input,label select,label textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--sunk);color:var(--ink);
}
label input:focus,label select:focus,label textarea:focus{
  outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)
}
label.inline{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:9px;font-size:14px;color:var(--ink);font-weight:450}
label.inline input{width:auto}

dialog{
  border:0;border-radius:14px;padding:0;background:var(--surface);color:var(--ink);
  width:min(600px,95vw);max-height:92vh;box-shadow:0 20px 60px rgba(16,34,43,.3);
}
dialog::backdrop{background:rgba(16,34,43,.45)}
dialog h3{padding:16px 18px 0}
dialog .form,dialog .g2{padding:14px 18px}

.tools input[type=search],.tools select{
  border:1px solid var(--line);border-radius:var(--r-klein);padding:9px 12px;background:var(--surface)
}
.tools input[type=search]{flex:1 1 180px;min-width:170px}

.obj h2+.mrow{border-top:0}
.chk{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.ed-row.gone input:not([type=checkbox]){text-decoration:line-through;opacity:.55}
.ed-row.gone input[type=checkbox]{text-decoration:none;opacity:1}
.kap th:first-child,.kap td:first-child{text-align:left}

/* ---------- Renovierungen ---------- */
.reno-haus{margin:18px 0 9px;font-size:13px;font-weight:620;color:var(--ink-2);
  letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.reno{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 15px;margin-bottom:12px;box-shadow:var(--schatten)}
.reno-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.reno-preis{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.reno .desc{margin:2px 0 10px}

/* Bildpaare: je Stelle eine Kachel, links vorher, rechts nachher */
.paare{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:6px}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:0;border:1px solid var(--line);
  border-radius:var(--r-klein);background:var(--sunk);overflow:hidden;cursor:pointer;text-align:left;
  position:relative;transition:border-color .12s ease, box-shadow .12s ease}
.paar:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.paar.ohne-nachher{border-color:var(--open-rand)}
.paar-seite{position:relative;display:block;aspect-ratio:4/3;background:var(--surface)}
.paar-seite img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.paar-leer{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:600;
  color:var(--ink-3);background:repeating-linear-gradient(45deg,var(--sunk),var(--sunk) 6px,var(--surface) 6px,var(--surface) 12px)}
.paar.ohne-nachher .paar-seite:last-child .paar-leer{color:var(--open);background:var(--open-bg)}
.paar-schild{position:absolute;left:5px;bottom:5px;font-size:10.5px;font-weight:600;
  background:rgba(16,34,43,.72);color:#fff;padding:2px 6px;border-radius:3px;white-space:nowrap}
.paar-notiz{grid-column:1 / -1;font-size:12px;color:var(--ink-2);padding:5px 8px 6px;
  background:var(--surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.reno-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line-soft)}
.counts .offen b{color:var(--open)}

/* Erfassen: mehrere Fotos */
.fotofeld{display:flex;flex-direction:column;gap:7px}
.fotofeld > span{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.fotoknopf{display:block;text-align:center;padding:14px 12px;border:1.5px dashed var(--line);
  border-radius:var(--r-klein);background:var(--sunk);color:var(--ink-2);font-size:13.5px;
  cursor:pointer;font-weight:520}
.fotoknopf:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.mini-bilder{display:flex;flex-wrap:wrap;gap:6px}
.mini-bild{position:relative;width:64px;height:64px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.mini-bild img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.mini-weg{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;
  background:rgba(16,34,43,.75);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}

/* Fenster fuer ein Bildpaar */
.f-paar{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 18px 0}
.f-seite{display:flex;flex-direction:column;gap:8px}
.f-kopf{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.f-kopf span{color:var(--ink-2);font-size:12px;font-variant-numeric:tabular-nums}
.f-seite a{display:block;line-height:0;border-radius:var(--r-klein);overflow:hidden;border:1px solid var(--line)}
.f-seite img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;max-width:none}
.f-leer{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:14px;font-size:13px;
  color:var(--ink-2);border:1.5px dashed var(--line);border-radius:var(--r-klein);background:var(--sunk)}
.f-seite .btn{text-align:center;cursor:pointer}
#fDlg{width:min(760px,96vw)}

@media (max-width:560px){
  .paare{grid-template-columns:1fr}
  .f-paar{grid-template-columns:1fr}
}