/* BETONGOLD: dunkle Grautöne mit Blaustich, kräftige Farben je Eigentümer. Farbschema nornix. */
@font-face { font-family: Archivo; src: url(/schrift/archivo.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url(/schrift/publicsans.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/schrift/jetbrainsmono.woff2) format('woff2'); font-weight: 100 800; font-display: swap; }
:root {
  --grund: #0E1317; --flaeche: #161D23; --flaeche2: #1C252D; --tief: #0A0E12; --linie: #242E36; --linie2: #32404B;
  --schrift: #E4EAEF; --weich: #A2B0BC; --blass: #75838F;
  --tuerkis: #4FC3C1; --tuerkis-f: #0F2B2B; --lila: #A392D9; --lila-f: #1E1A2E; --amber: #E0A93E; --amber-f: #2B2210;
  --blau: #6FA8FF; --blau-f: #13213A; --pink: #F08BB4; --pink-f: #2E1722; --gruen: #5FBE85; --gruen-f: #12261A; --rot: #E0705F; --rot-f: #2B1714;
  --radius: 16px; --kopf: Archivo, system-ui, sans-serif; --text: 'Public Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--schrift); font-family: var(--text); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
h1, h2, h3, h4 { font-family: var(--kopf); margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
a { color: var(--tuerkis); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.zahl { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.blass { color: var(--blass); } .weich { color: var(--weich); } .klein { font-size: 12.5px; } .rechts { text-align: right; }
.gut { color: var(--gruen); } .schlecht { color: var(--rot); } .warn { color: var(--amber); }

/* Gerüst */
.rahmen { display: grid; grid-template-columns: 228px 1fr; min-height: 100dvh; }
.seite { background: var(--tief); border-right: 1px solid var(--linie); padding: 18px 12px; position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; }
.marke { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-family: var(--kopf); font-weight: 800; font-size: 17px; letter-spacing: 0.06em; }
.marke img { width: 34px; height: 34px; }
.marke span b { color: var(--amber); font-weight: 800; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; color: var(--weich); font-weight: 550; }
.nav a svg { width: 19px; height: 19px; flex: none; }
.nav a:hover { background: var(--flaeche); color: var(--schrift); }
.nav a.an { background: var(--flaeche2); color: var(--schrift); box-shadow: inset 3px 0 0 var(--tuerkis); }
.seite .unten { margin-top: auto; display: grid; gap: 8px; }
.haupt { min-width: 0; padding: 18px 26px 90px; max-width: 1500px; width: 100%; }
.leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--grund) 78%, transparent); padding: 10px 0 14px; }
.leiste .platz { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--linie2); background: var(--flaeche); color: var(--weich); border-radius: 999px; padding: 7px 13px; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--f, var(--blass)); display: inline-block; }
.chip.an { background: color-mix(in srgb, var(--f, var(--tuerkis)) 18%, var(--flaeche)); border-color: var(--f, var(--tuerkis)); color: var(--schrift); }
.knopf { border: 1px solid var(--linie2); background: var(--flaeche2); border-radius: 12px; padding: 9px 14px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.knopf:hover { border-color: var(--tuerkis); }
.knopf.haupt-k { background: var(--tuerkis); color: #06201f; border-color: var(--tuerkis); }
.knopf.klein-k { padding: 5px 10px; font-size: 12.5px; border-radius: 9px; }
.knopf.rot-k { color: var(--rot); }
.umschalter { display: inline-flex; border: 1px solid var(--linie2); border-radius: 999px; overflow: hidden; background: var(--flaeche); }
.umschalter button { border: 0; background: none; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--weich); }
.umschalter button.an { background: var(--flaeche2); color: var(--schrift); box-shadow: inset 0 -2px 0 var(--amber); }

/* Karten */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.karte > h2, .karte > h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.karte > h2 .zusatz, .abschnitt .zusatz { margin-left: auto; font-family: var(--text); font-size: 12.5px; font-weight: 500; color: var(--blass); }
.gitter { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.abschnitt { margin: 26px 0 12px; display: flex; align-items: baseline; gap: 10px; }
.abschnitt h2 { font-size: 20px; }

.kachel { border-radius: var(--radius); padding: 16px 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--f) 22%, var(--flaeche)), var(--flaeche) 70%); border: 1px solid color-mix(in srgb, var(--f) 38%, var(--linie)); position: relative; overflow: hidden; min-width: 0; }
.kachel .name { color: var(--weich); font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.kachel .wert { font-family: var(--kopf); font-weight: 750; font-size: clamp(22px, 2.3vw, 32px); margin-top: 4px; letter-spacing: -0.02em; white-space: nowrap; }
.kachel .unter { color: var(--weich); font-size: 12.5px; margin-top: 3px; }
.kachel svg.zeichen { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; color: var(--f); opacity: 0.85; }
.mini { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 11px 14px; min-width: 0; }
.mini .name { color: var(--blass); font-size: 12px; font-weight: 600; }
.mini .wert { font-family: var(--kopf); font-weight: 700; font-size: 18px; white-space: nowrap; }

/* Ampel-Hinweise */
.hinweise { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hinweis { display: flex; gap: 11px; align-items: center; background: var(--f-f); border: 1px solid color-mix(in srgb, var(--f) 45%, transparent); border-radius: 14px; padding: 10px 14px; color: var(--schrift); }
.hinweis b { font-weight: 650; } .hinweis .p { width: 10px; height: 10px; border-radius: 50%; background: var(--f); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--f) 22%, transparent); }
.hinweis small { display: block; color: var(--weich); }

/* Objektkarten */
.objekte { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.okarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; color: inherit; display: flex; flex-direction: column; transition: transform .12s, border-color .12s; border-top: 3px solid var(--f); }
.okarte:hover { transform: translateY(-2px); border-color: var(--f); }
.okarte .bild { height: 132px; background: linear-gradient(135deg, color-mix(in srgb, var(--f) 30%, var(--tief)), var(--tief)); background-size: cover; background-position: center; position: relative; }
.okarte .bild .marken { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.okarte .bild svg.haus { position: absolute; right: 14px; bottom: 8px; width: 64px; height: 64px; color: var(--f); opacity: .35; }
.okarte .in { padding: 13px 15px 14px; display: grid; gap: 9px; }
.okarte h3 { font-size: 16.5px; }
.okarte .ort { color: var(--blass); font-size: 12.5px; }
.okarte .zeile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.okarte .zeile div span { display: block; color: var(--blass); font-size: 11.5px; font-weight: 600; }
.okarte .zeile div b { font-family: var(--kopf); font-size: 15px; white-space: nowrap; }
.marke-k { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--f, var(--blass)) 24%, #0a0e12e6); color: var(--schrift); border: 1px solid color-mix(in srgb, var(--f, var(--blass)) 60%, transparent); backdrop-filter: blur(6px); white-space: nowrap; }
.lage-A { --f: var(--gruen); } .lage-B { --f: var(--tuerkis); } .lage-C { --f: var(--amber); } .lage-D { --f: var(--rot); }
.balken { height: 8px; border-radius: 99px; background: var(--tief); overflow: hidden; display: flex; gap: 2px; }
.balken i { display: block; height: 100%; background: var(--f, var(--tuerkis)); border-radius: 99px; }

/* Belegt-Punkt */
.sp { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; vertical-align: middle; cursor: help; background: var(--blass); flex: none; }
.sp.belegt { background: var(--gruen); } .sp.abgeleitet, .sp.plan, .sp.geschaetzt { background: var(--amber); } .sp.manuell { background: var(--blau); } .sp.offen { background: var(--blass); }
.legende { display: flex; gap: 14px; flex-wrap: wrap; color: var(--weich); font-size: 12.5px; align-items: center; }
.legende span { display: inline-flex; align-items: center; gap: 6px; } .legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--f); display: inline-block; }

/* Tabellen */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; color: var(--blass); font-weight: 600; font-size: 12px; padding: 7px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; position: sticky; top: 0; background: var(--flaeche); }
td { padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.z, th.z { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.klick { cursor: pointer; } tr.klick:hover td { background: var(--flaeche2); }
.typ { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--f-f, var(--flaeche2)); color: var(--f, var(--weich)); white-space: nowrap; }
.t-reparatur, .t-wartung { --f: var(--blau); --f-f: var(--blau-f); } .t-schaden, .t-versicherungsfall { --f: var(--rot); --f-f: var(--rot-f); }
.t-mieterproblem, .t-rechtsstreit { --f: var(--pink); --f-f: var(--pink-f); } .t-modernisierung { --f: var(--gruen); --f-f: var(--gruen-f); } .t-leerstand { --f: var(--amber); --f-f: var(--amber-f); }

/* Ereignis-Liste */
.verlauf { display: grid; gap: 2px; }
.ev { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--linie); align-items: start; }
.ev:last-child { border-bottom: 0; }
.ev .d { color: var(--blass); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.ev .t b { font-weight: 620; } .ev .t small { display: block; color: var(--weich); margin-top: 2px; }
.ev .k { font-family: var(--mono); white-space: nowrap; }

/* Reiter */
.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: 18px 0 16px; overflow-x: auto; }
.reiter button { border: 0; background: none; padding: 10px 14px; color: var(--weich); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.reiter button.an { color: var(--schrift); border-color: var(--f, var(--tuerkis)); }

/* Objektkopf */
.okopf { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: stretch; }
.okopf .foto { border-radius: var(--radius); min-height: 190px; background: linear-gradient(135deg, color-mix(in srgb, var(--f) 30%, var(--tief)), var(--tief)); background-size: cover; background-position: center; border: 1px solid var(--linie); }
.zurueck { color: var(--weich); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.fakten div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linie); font-size: 13.5px; }
.fakten div span { color: var(--blass); } .fakten div b { font-weight: 600; text-align: right; }

/* Diagramme */
svg.dia { width: 100%; height: auto; display: block; overflow: visible; }
svg.dia text { font-family: var(--text); fill: var(--blass); font-size: 11px; }
svg.dia .wertt { fill: var(--schrift); font-family: var(--mono); font-size: 11px; }
svg.dia .achse { stroke: var(--linie); stroke-width: 1; }
svg.dia .mark { transition: opacity .1s; } svg.dia .mark:hover { opacity: .8; }
#tipp { position: fixed; z-index: 90; pointer-events: none; background: var(--tief); border: 1px solid var(--linie2); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; max-width: 280px; box-shadow: 0 8px 24px #0009; display: none; }
#tipp b { display: block; font-family: var(--kopf); }

/* Darlehen */
.dkarte { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--f); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 10px; }
.dkarte .kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dkarte .kopf h3 { font-size: 16px; }
.dkarte .werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.dkarte .werte div span { display: block; color: var(--blass); font-size: 11.5px; font-weight: 600; }
.dkarte .werte div b { font-family: var(--kopf); font-size: 15.5px; white-space: nowrap; }
.regler { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
input[type=range] { accent-color: var(--amber); flex: 1; min-width: 160px; }

/* Lage */
.punkte { display: grid; gap: 6px; }
.punkte div { display: grid; grid-template-columns: 128px 1fr 22px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--weich); }
.klasse-gross { font-family: var(--kopf); font-weight: 800; font-size: 34px; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--f) 22%, var(--tief)); color: var(--f); border: 1px solid var(--f); flex: none; }

/* Dokumente */
.ablage { border: 2px dashed var(--linie2); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--weich); background: var(--flaeche); display: grid; gap: 10px; justify-items: center; }
.ablage.drueber { border-color: var(--tuerkis); background: var(--tuerkis-f); }
.such { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.such input[type=search] { flex: 1; min-width: 200px; }
input[type=search], input[type=text], input[type=password], input[type=number], input[type=date], select, textarea { background: var(--tief); border: 1px solid var(--linie2); border-radius: 11px; padding: 9px 12px; outline: none; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--tuerkis); }
.dok { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; padding: 9px 6px; border-bottom: 1px solid var(--linie); cursor: pointer; align-items: center; }
.dok:hover { background: var(--flaeche2); }
.dok .e { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; font-family: var(--mono); background: var(--f-f, var(--flaeche2)); color: var(--f, var(--weich)); text-transform: uppercase; }
.dok .n { min-width: 0; } .dok .n b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok .n small { color: var(--blass); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok .n em { color: var(--weich); font-style: normal; font-size: 12.5px; display: block; }

/* Schichten: Fenster, Assistent */
.dunkel { position: fixed; inset: 0; background: #05080bcc; z-index: 50; display: grid; place-items: center; padding: 14px; backdrop-filter: blur(3px); }
.fenster { background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 18px; width: min(720px, 100%); max-height: 92dvh; overflow: auto; padding: 18px 20px; }
.fenster.breit { width: min(1100px, 100%); height: 92dvh; display: flex; flex-direction: column; }
.fenster .kopfz { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fenster .kopfz h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenster iframe, .fenster .vorschau { flex: 1; border: 0; width: 100%; background: var(--tief); border-radius: 12px; min-height: 300px; }
.fenster .vorschau { display: grid; place-items: center; overflow: auto; } .fenster .vorschau img { max-width: 100%; max-height: 100%; }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.formular label { display: grid; gap: 4px; font-size: 12px; color: var(--blass); font-weight: 600; } .formular label.voll { grid-column: 1 / -1; }
.formular input, .formular select, .formular textarea { width: 100%; color: var(--schrift); font-size: 14px; font-weight: 400; }
.fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

.assi-knopf { position: fixed; right: 20px; bottom: 20px; z-index: 40; border: 0; border-radius: 999px; padding: 13px 18px; font-weight: 700; background: linear-gradient(135deg, var(--tuerkis), var(--lila)); color: #0b1216; box-shadow: 0 10px 30px #000a; display: inline-flex; gap: 9px; align-items: center; }
.assi { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--tief); border-left: 1px solid var(--linie2); z-index: 60; display: flex; flex-direction: column; box-shadow: -20px 0 50px #000a; }
.assi header { padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linie); }
.assi header h2 { flex: 1; }
.assi .lauf { flex: 1; overflow: auto; padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.blase { padding: 10px 13px; border-radius: 14px; max-width: 92%; white-space: pre-wrap; overflow-wrap: anywhere; }
.blase.sven { background: var(--tuerkis-f); border: 1px solid color-mix(in srgb, var(--tuerkis) 40%, transparent); justify-self: end; }
.blase.assi-b { background: var(--flaeche); border: 1px solid var(--linie); }
.blase .q { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.blase .q a { font-size: 12px; border: 1px solid var(--linie2); border-radius: 99px; padding: 3px 9px; color: var(--weich); cursor: pointer; }
.assi form { display: flex; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }
.assi form input { flex: 1; min-width: 0; }
.vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; }
.vorschlaege button { border: 1px solid var(--linie2); background: var(--flaeche); border-radius: 99px; padding: 7px 11px; font-size: 12.5px; color: var(--weich); text-align: left; }
.tippt { display: inline-flex; gap: 4px; } .tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--weich); animation: h 1s infinite; } .tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes h { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

#meldung { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 95; background: var(--flaeche2); border: 1px solid var(--linie2); border-radius: 12px; padding: 10px 14px; max-width: min(520px, 92vw); display: none; box-shadow: 0 10px 30px #000a; font-size: 13.5px; }

/* Anmeldung */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: radial-gradient(900px 500px at 20% 10%, #4fc3c11f, transparent), radial-gradient(800px 500px at 85% 90%, #a392d922, transparent), var(--grund); }
.anmeldung form { width: min(380px, 100%); background: var(--flaeche); border: 1px solid var(--linie2); border-radius: 22px; padding: 28px; display: grid; gap: 14px; }
.anmeldung .marke { padding: 0; font-size: 22px; } .anmeldung .marke img { width: 46px; height: 46px; }
.anmeldung input { width: 100%; font-size: 16px; padding: 12px 14px; }
.anmeldung button { padding: 12px; justify-content: center; font-size: 15px; }

.leer { color: var(--blass); padding: 18px; text-align: center; border: 1px dashed var(--linie2); border-radius: 14px; }
.untennav { display: none; }

@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .rahmen { grid-template-columns: 1fr; } .seite { display: none; }
  .haupt { padding: 8px 14px 150px; }
  .g2 { grid-template-columns: 1fr; } .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okopf { grid-template-columns: 1fr; } .okopf .foto { min-height: 160px; }
  .untennav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #0a0e12f2; backdrop-filter: blur(10px); border-top: 1px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .untennav a { display: grid; justify-items: center; gap: 2px; color: var(--blass); font-size: 10.5px; font-weight: 600; padding: 5px 0; }
  .untennav a svg { width: 21px; height: 21px; } .untennav a.an { color: var(--tuerkis); }
  .assi-knopf { bottom: calc(74px + env(safe-area-inset-bottom)); right: 14px; padding: 12px 15px; }
  .formular { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 70px 1fr; } .ev .k { grid-column: 2; }
  h1 { font-size: 22px; }
  .leiste { top: 0; }
}

/* Symbole: feste Größe, sonst füllen sie den ganzen Knopf */
svg:not(.dia) { width: 18px; height: 18px; flex: none; }
.ablage > svg { width: 34px; height: 34px; color: var(--tuerkis); }
.kachel svg.zeichen { width: 26px; height: 26px; }
.okarte .bild svg.haus { width: 64px; height: 64px; }
.klasse-gross svg { width: 28px; height: 28px; }