/* =====================================================================
   HausBlick – Gestaltung

   Farbwelt, Schrift und Kopfzeile folgen VermögensBlick in dessen
   Fassung vom 21.09.2026: die Farbwelt VERMURO – tiefes Anthrazit,
   ruhige grün-schwarze Oberflächen, Smaragd als Akzent, gebrochenes
   Weiß und Salbeigrau für die Schrift.

   Achtung beim Abgleich: Bis zum 20.09.2026 führte dort Gold auf Navy;
   der Heizungsraum hat noch jenen Stand. Maßgeblich ist VermögensBlick
   selbst, nicht die Kopie in einem anderen Projekt.

   Hell ist der Normalfall. Dunkel folgt der Systemeinstellung und lässt
   sich über data-theme erzwingen.

   Fürs Telefon gedacht: eine Spalte, Leiste unten. Am Rechner wird
   daraus eine Seitenleiste und ein mehrspaltiges Raster.
   ===================================================================== */

:root, :root[data-theme="light"] {
  color-scheme: light;
  --navy:#16211C;                      /* Flächenfarbe: Kopf, Hauptknopf */
  --accent:#167A49;                    /* Smaragd, als Schriftfarbe */
  --bg:#F5F6F8; --surface:#FFFFFF; --stripe:#FAFBFC; --row-hover:#EFF1F4;
  --border:#DDE2EA; --text:#10151C; --muted:#66707E;
  --header-bg:#EEF2EF; --header-text:#16211C;
  --nav-text:rgba(22,33,28,.72); --nav-muted:rgba(22,33,28,.48);
  --nav-active-bg:rgba(22,122,73,.10);
  --brand-light:#16211C;
  --knopf-text:#F2F3EF; --knopf-flaeche:#16211C;
  --red:#B83B3B; --red-flaeche:rgba(184,59,59,.10);
  --ok-bg:#E7F5EE; --ok-text:#16714F;
  --warn-bg:#FBF3E2; --warn-text:#8A5B14;
  --radius:10px; --radius-klein:8px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --navy:#16211C; --accent:#69D899;
    --bg:#080C0B; --surface:#0E1412; --stripe:#111A17; --row-hover:#111A17;
    --border:#22302B; --text:#F2F3EF; --muted:#98A49E;
    --header-bg:#080C0B; --header-text:#F2F3EF;
    --nav-text:rgba(255,255,255,.68); --nav-muted:rgba(255,255,255,.38);
    --nav-active-bg:rgba(105,216,153,.10);
    --brand-light:#F2F3EF;
    --knopf-text:#080C0B; --knopf-flaeche:#69D899;
    --red:#EF7777; --red-flaeche:rgba(239,119,119,.14);
    --ok-bg:#12301F; --ok-text:#5FD3A0;
    --warn-bg:#302512; --warn-text:#DBA95E;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy:#16211C; --accent:#69D899;
  --bg:#080C0B; --surface:#0E1412; --stripe:#111A17; --row-hover:#111A17;
  --border:#22302B; --text:#F2F3EF; --muted:#98A49E;
  --header-bg:#080C0B; --header-text:#F2F3EF;
  --nav-text:rgba(255,255,255,.68); --nav-muted:rgba(255,255,255,.38);
  --nav-active-bg:rgba(105,216,153,.10);
  --brand-light:#F2F3EF;
  --knopf-text:#080C0B; --knopf-flaeche:#69D899;
  --red:#EF7777; --red-flaeche:rgba(239,119,119,.14);
  --ok-bg:#12301F; --ok-text:#5FD3A0;
  --warn-bg:#302512; --warn-text:#DBA95E;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: inherit; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .98rem; }
a { color: var(--accent); }
.verborgen { display: none !important; }
.leise { color: var(--muted); }
.klein { font-size: .84rem; }

/* --- Knöpfe und Felder -------------------------------------------
   Wie in VermögensBlick: die Fläche des Hauptknopfs ist das dunkle
   Anthrazit, nicht der Akzent. Im dunklen Thema verschwände es im
   Untergrund – dort trägt der Smaragd die Fläche.

   Dieser Wechsel steht als Farbwert je Thema in --knopf-flaeche und
   NICHT als zusätzliche Regel für "button". Eine solche Regel wog
   schwerer als "button.still" und färbte am 25.09.2026 auch die stillen
   Knöpfe smaragdgrün – mit heller Schrift darauf, also unlesbar. */
button, .knopf {
  font: inherit; font-size: .88rem; font-weight: 550; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  padding: 9px 15px; background: var(--knopf-flaeche); color: var(--knopf-text);
  text-decoration: none; display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.12); }
button.still { background: var(--surface); color: var(--text); border-color: var(--border); }
button.still:hover { background: var(--row-hover); filter: none; }
button.winzig { padding: 6px 10px; font-size: .78rem; }
button:disabled { background: var(--stripe); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
label { display: block; font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
input, select, textarea {
  display: block; width: 100%; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-klein); padding: 9px 12px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- Kopfzeile mit der Marke ---------------------------------------
   Aufbau wie in VermögensBlick: Zeichen, Dachmarke, Produktname mit dem
   zweiten Wortteil im Akzent, darunter die Zeile, die sagt, worum es geht. */
header.kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--header-bg); color: var(--header-text);
  border-bottom: 1px solid var(--border);
}
.marke { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Das Zeichen war bis zum 26.09.2026 ein V – das stand für die Dachmarke
   VERMURO. Die ist auf Wunsch des Nutzers weg, jedes Projekt steht für
   sich. Ein V über „HausBlick" hätte für nichts mehr gestanden, also ein
   Haus: links das ruhige Anthrazit, rechts der Akzent, wie gehabt. */
.marke-zeichen {
  width: 30px; height: 30px; flex: 0 0 auto; display: inline-block;
  background: linear-gradient(90deg, var(--brand-light) 0 50%, var(--accent) 50% 100%);
  clip-path: polygon(50% 2%, 98% 42%, 84% 42%, 84% 96%, 16% 96%, 16% 42%, 2% 42%);
}
.marke-wort { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.marke-wort b { font-size: 17px; letter-spacing: .24em; font-weight: 500; }
.marke-wort > span { margin-top: 5px; font-size: 13px; letter-spacing: .02em; color: var(--header-text); }
.marke-wort > span em { color: var(--accent); font-style: normal; }
.marke-zeile { display: block; margin-top: 5px; color: var(--nav-muted); font-size: 10px;
  font-weight: 450; letter-spacing: .015em; line-height: 1.2; }
.kopf .fuellung { flex: 1; }
.baustand { font-size: 10px; color: var(--nav-muted); font-variant-numeric: tabular-nums; cursor: help; }

/* --- Gerüst -------------------------------------------------------- */
#huelle { display: flex; min-height: 100%; flex-direction: column; }
.unten { display: flex; flex-direction: column; flex: 1; min-height: 0; }
main { padding: 18px 16px 90px; }
nav.leiste {
  position: fixed; inset: auto 0 0 0; display: flex; background: var(--surface);
  border-top: 1px solid var(--border); padding: 6px 4px env(safe-area-inset-bottom);
}
nav.leiste a {
  flex: 1; text-align: center; padding: 9px 4px; font-size: .72rem; font-weight: 550;
  color: var(--nav-text); text-decoration: none; border-radius: var(--radius-klein);
}
nav.leiste a.aktiv { color: var(--accent); background: var(--nav-active-bg); }
nav.leiste a span { display: block; font-size: 1.05rem; line-height: 1.3; }
/* Am Telefon passen unten fünf Einträge; der Rest steht in der Seitenleiste
   am Rechner und unter „Mehr". */
nav.leiste a.nur-breit { display: none; }
.nur-schmal { display: block; }

/* --- Karten und Listen --------------------------------------------- */
.tafel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px; margin-bottom: 15px;
}
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tafel-kopf small { color: var(--muted); }
.tafel.dringend { border-color: var(--red); }
.tafel.dringend .tafel-kopf h2 { color: var(--red); }

.zeile { border-top: 1px solid var(--border); padding: 12px 0; display: flex; gap: 12px; align-items: flex-start; }
.zeile:first-of-type { border-top: 0; }
.zeile-text { flex: 1; min-width: 0; }
.zeile-text h3 { overflow-wrap: anywhere; }
.zeile-text p { margin: 4px 0 0; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.zeile-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Am Telefon würden die Knöpfe den Titel auf zwei Zeichen je Zeile quetschen.
   Dort stehen sie deshalb unter dem Text und nicht daneben. */
@media (max-width: 899px) {
  .zeile { flex-wrap: wrap; }
  .zeile-knoepfe { flex-basis: 100%; justify-content: flex-start; }
  .zeile-knoepfe:empty { display: none; }
}

/* --- Enger am Telefon -----------------------------------------------
   Gemessen an einem Bildschirmfoto vom 25.09.2026: die Liste bestand
   mehr aus Knöpfen und Luft als aus Aufgaben. Kleiner wird hier alles
   außer den Eingabefeldern – unter 16 Pixel zoomt iOS beim Antippen
   die ganze Seite heran, und das ist schlimmer als ein großes Feld. */
@media (max-width: 899px) {
  body { font-size: 14px; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: .98rem; }
  h3 { font-size: .92rem; }
  main { padding: 14px 12px 82px; }
  .tafel { padding: 13px; margin-bottom: 11px; border-radius: 9px; }
  .tafel-kopf { margin-bottom: 8px; }
  .zeile { padding: 10px 0; gap: 8px; }
  .zeile-text p { font-size: .78rem; margin-top: 3px; }
  .zeile-knoepfe { gap: 5px; margin-top: 7px; }
  button, .knopf { font-size: .82rem; padding: 8px 13px; }
  button.winzig { font-size: .75rem; padding: 6px 10px; }
  .reiter { gap: 5px; margin-bottom: 11px; }
  .reiter button { font-size: .76rem; padding: 6px 9px; }
  .filter { gap: 6px; margin-bottom: 11px; }
  .marker { font-size: .66rem; padding: 2px 7px; margin-right: 4px; }
  .warnzeile { padding: 9px 12px; font-size: .82rem; margin-bottom: 11px; }
  .app-fuss { font-size: 9px; margin-top: 22px; }
  .lego-bild { width: 60px; height: 60px; }
  /* Eingabefelder bleiben bei 16 px, nur enger. */
  input, select, textarea { padding: 8px 10px; }
  .dialog-fuss { gap: 6px; }
}
.leer { border: 1px dashed var(--border); border-radius: var(--radius-klein); padding: 17px; color: var(--muted); font-size: .86rem; }

.marker { display: inline-block; font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--stripe); border: 1px solid var(--border); color: var(--muted); margin-right: 6px; }
.marker.spaet, .marker.hoch { background: var(--red-flaeche); color: var(--red); border-color: transparent; }
.marker.fertig { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.marker.firma { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }

.werte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
.wert { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.wert strong { display: block; font-size: 1.7rem; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.wert span { font-size: .78rem; color: var(--muted); }
.wert.dringend strong { color: var(--red); }

/* Reiter über den Aufgaben: Haus, Garten, Büro, Shopping */
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.reiter button {
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  font-weight: 550;
}
.reiter button.aktiv {
  background: var(--knopf-flaeche); color: var(--knopf-text); border-color: var(--knopf-flaeche);
}
.reiter button small { opacity: .7; font-weight: 600; }

/* --- Fotos und Zettel ------------------------------------------------ */
.foto {
  display: block; max-width: 220px; max-height: 165px; width: auto; height: auto;
  border-radius: var(--radius-klein); border: 1px solid var(--border);
  background: var(--stripe); object-fit: cover;
}
.foto.vorschau { max-width: 100%; max-height: 220px; }
.zettel-notiz { margin: 8px 0 0; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
select.zuordnen { margin-top: 10px; max-width: 320px; font-size: .85rem; }

/* Die Warnzeile über den Aufgaben – die einzige Erinnerung, die es gibt. */
.warnzeile {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-klein);
  background: var(--stripe); border: 1px solid var(--border);
  color: var(--muted); font-size: .88rem;
}
.warnzeile.spaet { background: var(--red-flaeche); border-color: transparent; color: var(--red); }
.warnzeile strong { font-weight: 550; }
.warnzeile a, .warnzeile .glatt { color: inherit; }

/* Ein Knopf, der wie Text aussieht – für Stellen, an denen ein Wort im
   Satz anklickbar sein soll, ohne dass daneben ein Kasten steht. */
button.glatt {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
button.glatt:hover { filter: none; opacity: .75; }

/* Der Hinweis unter der Empfängerauswahl */
.hinweis { margin-top: 8px; color: var(--muted); }
.hinweis.verborgen-an { color: var(--ok-text); }

/* Zähler an einem Navigationspunkt */
.zaehler:not(:empty) {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 20px;
  background: var(--accent); color: var(--knopf-text);
  font-size: .68rem; font-style: normal; font-weight: 600; vertical-align: middle;
}

/* Am Telefon ist ein Navigationspunkt zu schmal für „Eingang 2" in einer
   Zeile – der Zähler rutschte unter die Beschriftung und machte die
   Leiste höher. Dort sitzt er deshalb über dem Zeichen. */
@media (max-width: 899px) {
  nav.leiste a { position: relative; }
  nav.leiste .zaehler:not(:empty) {
    position: absolute; top: 2px; left: 50%; margin-left: 2px;
  }
}

/* Sprungliste unter „Mehr" – nur am Telefon nötig */
.sprungliste { display: grid; gap: 8px; margin-bottom: 15px; }
.sprungliste a {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  color: var(--text); text-decoration: none; font-weight: 550;
}
.sprungliste a em { font-style: normal; color: var(--muted); font-weight: 400; }

/* --- Punkte im Vorhaben ---------------------------------------------
   Eine Liste zum Abhaken: der Haken vorn, der Text daneben. Bewusst
   enger als eine Aufgabenzeile – hier stehen viele kurze Punkte
   untereinander. */
.punkt { display: flex; gap: 10px; align-items: flex-start;
  border-top: 1px solid var(--border); padding: 10px 0; cursor: pointer; }
.punkt:first-of-type { border-top: 0; }
.punkt-text { flex: 1; min-width: 0; }
.punkt-text p { margin: 3px 0 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.punkt-notiz { white-space: pre-wrap; }
.punkt.fertig .punkt-text h3 { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.punkt-knoepfe { flex: 0 0 auto; }

/* Der Haken ist groß genug fürs Antippen unterwegs – 30 Pixel sind am
   Telefon die Untergrenze für etwas, das man im Gehen trifft. */
.haken {
  width: 30px; height: 30px; flex: 0 0 auto; padding: 0; margin-top: 1px;
  border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--knopf-text);
  font-size: .95rem; line-height: 1;
}
.haken.an { background: var(--knopf-flaeche); border-color: var(--knopf-flaeche); }

/* Schnellerfassung: eine Zeile, Enter genügt. */
.schnellzeile { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px;
  border-top: 1px dashed var(--border); padding-top: 14px; }
.schnellzeile input { flex: 1; min-width: 150px; }
.schnellzeile button { flex: 0 0 auto; }

.erledigt-block summary { cursor: pointer; font-weight: 550; font-size: .95rem; }
.erledigt-block[open] summary { margin-bottom: 8px; }

.termin-kopf h1 { margin-bottom: 6px; }
.termin-kopf p { margin: 4px 0 0; }

/* LEGO: das Bild steht vorn, weil man beim Zuordnen einer Lieferung
   danach sucht und nicht nach der Nummer. */
.lego-zeile { align-items: flex-start; }
.lego-bild {
  width: 72px; height: 72px; flex: 0 0 auto; object-fit: contain;
  background: var(--stripe); border: 1px solid var(--border);
  border-radius: var(--radius-klein);
}
.lego-bild.kein-bild { visibility: hidden; }

/* Der Streifen unter einem Eintrag: was hängt daran? */
.anhang { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border); }
.anhang-teil { max-width: 240px; }
.anhang-teil .foto { max-width: 150px; max-height: 110px; }
.anhang-teil .zettel-notiz { font-size: .85rem; margin-top: 4px; }
.anhang-teil button { margin-top: 6px; }

/* Der Spruch selbst ist der Inhalt – er darf größer sein als die Angaben drumherum. */
.spruch {
  margin: 0; font-size: 1.05rem; line-height: 1.45; overflow-wrap: anywhere;
  border-left: 3px solid var(--accent); padding-left: 12px;
}

/* Die Auswahl im „+ Neu"-Dialog */
button.wahl { text-align: left; padding: 14px 16px; }
button.wahl strong { display: block; font-size: .95rem; }
button.wahl small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; }

.filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter input, .filter select { width: auto; flex: 1; min-width: 140px; }
.wippe { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-klein); overflow: hidden; }
.wippe button { border-radius: 0; background: var(--surface); color: var(--muted); border: 0; }
.wippe button.aktiv { background: var(--knopf-flaeche); color: var(--knopf-text); }

/* --- Fuß ------------------------------------------------------------ */
.app-fuss {
  margin-top: 30px; padding: 16px 2px 4px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 10px; line-height: 1.55;
}
.app-fuss b { color: var(--text); font-weight: 550; }

/* --- Dialog --------------------------------------------------------- */
dialog {
  width: min(620px, calc(100% - 20px)); max-height: 92vh;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
}
dialog::backdrop { background: rgba(13, 17, 23, .45); }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.felder .breit { grid-column: 1 / -1; }
.dialog-fuss { display: flex; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.dialog-fuss .fuellung { flex: 1; }
.dialog-fuss .nebensache { color: var(--muted); }
.dialog-fuss .nebensache:hover { color: var(--text); }
/* Die Zeile ist antippbar – das darf man sehen. */
.zeile[data-oeffnet] { cursor: pointer; }
.zeile[data-oeffnet]:hover { background: var(--row-hover); }
.fehler { color: var(--red); font-size: .84rem; min-height: 1.2em; }

/* --- Anmeldung ------------------------------------------------------ */
.tor { max-width: 430px; margin: 7vh auto; padding: 0 16px; }
.tor .tafel { padding: 24px; }
.tor .marke { margin-bottom: 18px; }
.tor p { color: var(--muted); font-size: .88rem; }
.tor label { margin-top: 14px; }
.tor button { width: 100%; margin-top: 14px; }
.tor .app-fuss { margin-top: 20px; }

#meldung:not(:empty) {
  margin: 0 16px 14px; padding: 11px 14px; border-radius: var(--radius-klein);
  background: var(--ok-bg); color: var(--ok-text); font-size: .86rem;
}
#meldung.schlecht { background: var(--red-flaeche); color: var(--red); }

/* --- Am Rechner ----------------------------------------------------- */
@media (min-width: 900px) {
  .unten { flex-direction: row; }
  /* Der Kopf scrollt bewusst mit: bliebe er stehen, schöbe sich die
     klebende Seitenleiste darunter. */
  nav.leiste {
    position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; width: 210px;
    flex-direction: column; border-top: 0; border-right: 1px solid var(--border);
    padding: 18px 12px; background: var(--header-bg);
  }
  nav.leiste a, nav.leiste a.nur-breit { text-align: left; font-size: .92rem; padding: 10px 14px; display: flex; gap: 10px; align-items: center; }
  .nur-schmal { display: none; }
  nav.leiste a span { font-size: 1rem; }
  nav.leiste a:hover { color: var(--header-text); background: var(--nav-active-bg); }
  .rechts { flex: 1; min-width: 0; }
  header.kopf { padding: 16px 28px; }
  main { padding: 22px 28px 40px; max-width: 1100px; }
  .werte { grid-template-columns: repeat(4, 1fr); }
  .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: start; }
}

/* Gefuehrte Bestandsaufnahme */
.bestand-schritte { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
.bestand-fragen { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.bestand-frage small { display:block; }
#bestand-dialog { width:min(760px,94vw); max-height:90vh; overflow:auto; }
#ansicht .tafel { margin:1.2rem 0; padding:1.2rem; border:1px solid #ddd; border-radius:12px; }
#ansicht .zeile-text { white-space:pre-line; }

/* Fachmodul-Pfade dürfen die mobile Übersicht nicht verbreitern. */
.fach-pfad{overflow-wrap:anywhere} #ansicht details li{overflow-wrap:anywhere}

/* Vollständige Technikansichten im gemeinsamen HausBlick-Rahmen. */
.technik-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.technik-kopf{padding:8px 0}.technik-kopf h1{margin:8px 0}
.technik-frame{width:100%;min-height:800px;height:calc(100dvh - 210px);border:1px solid var(--linie,#d3dad4);border-radius:12px;background:#080c0b}
@media(max-width:700px){.technik-frame{min-height:650px;height:calc(100dvh - 210px)}.zeile{flex-wrap:wrap}}
.lego-setbild { width:120px; height:100px; object-fit:contain; background:white; border-radius:8px; }
.lego-katalogteil { display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid #ddd; }
.lego-katalog { display:grid; gap:.65rem; }
.lego-katalog input,.lego-katalog select { max-width:100%; }