:root {
  --grund: #f6f3ee;
  --flaeche: #fffdf9;
  --flaeche-2: #efebe4;
  --linie: #e2dcd2;
  --text: #24221e;
  --text-2: #6b655a;
  --text-3: #9a9385;
  --akzent: #9c5a3c;
  --akzent-2: #f3e6de;
  --gruen: #2f6b4a;
  --gruen-2: #e3efe7;
  --gelb: #9a6b12;
  --gelb-2: #f7ecd4;
  --rot: #a3372b;
  --rot-2: #f6e1dd;
  --blau: #2c5d85;
  --blau-2: #e2ecf4;
  --schatten: 0 1px 2px rgba(40, 32, 20, .06), 0 6px 24px rgba(40, 32, 20, .07);
  --r: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Rahmen, Titel und Fokus als Werte, damit ein Anzug (anzug.css aus deklarationen/anzug.json) sie setzen kann;
     die Vorgaben hier sind das bisherige Aussehen */
  --titel: var(--serif);
  --titel-gewicht: 600;
  --fokus: #c9a38f;
  --nav-grund: #201e1a;
  --nav-text: #eae4d8;
  --nav-text-2: #a79f90;
  --nav-hover: #2d2a25;
  --nav-an: #37332c;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--grund); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titel); font-weight: var(--titel-gewicht); letter-spacing: -.01em; margin: 0; }
h1 { font-size: 30px; line-height: 1.15; }
h2 { font-size: 21px; }
h3 { font-size: 16px; font-family: var(--sans); font-weight: 650; letter-spacing: 0; }
.klein { font-size: 12.5px; color: var(--text-2); }
.leise { color: var(--text-3); }
.zahl { font-variant-numeric: tabular-nums; }

/* Rahmen */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.nav { position: sticky; top: 0; height: 100vh; padding: 22px 14px; background: var(--nav-grund); color: var(--nav-text); display: flex; flex-direction: column; gap: 4px; }
.marke { font-family: var(--sans); font-weight: 700; letter-spacing: .22em; font-size: 17px; padding: 4px 12px 2px; }
.marke .logo { display: block; width: 150px; max-width: 100%; height: auto; margin-bottom: 18px; }
.nav-reiter { display: flex; flex-direction: column; gap: 4px; }
.marke-unter { font-size: 11.5px; color: var(--nav-text-2); padding: 0 12px 18px; letter-spacing: .02em; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--nav-text); font-weight: 500; }
.nav a:hover { background: var(--nav-hover); }
.nav a.an { background: var(--nav-an); color: #fff; }
.nav .zaehler { margin-left: auto; background: var(--akzent); color: #fff; border-radius: 99px; font-size: 11.5px; padding: 1px 7px; font-weight: 700; }
.nav .fuss { margin-top: auto; font-size: 11.5px; color: var(--nav-text-2); padding: 12px; line-height: 1.4; }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .9; }
main { padding: 28px 34px 80px; max-width: 1480px; width: 100%; }

/* Bausteine */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: var(--schatten); }
.karte.innen { padding: 18px 20px; }
.reihe { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spalte { display: flex; flex-direction: column; gap: 12px; }
.raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 10px; border: 1px solid var(--linie); background: var(--flaeche); cursor: pointer; font-weight: 550; text-decoration: none; white-space: nowrap; transition: transform .06s ease, background .15s; }
.knopf:hover { background: var(--flaeche-2); }
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--text); color: #fff; border-color: var(--text); }
.knopf.haupt:hover { background: #3b372f; }
.knopf.akzent { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf.gruen { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.knopf.klein { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.knopf[disabled] { opacity: .5; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); white-space: nowrap; }
.chip.gruen { background: var(--gruen-2); color: var(--gruen); }
.chip.gelb { background: var(--gelb-2); color: var(--gelb); }
.chip.rot { background: var(--rot-2); color: var(--rot); }
.chip.blau { background: var(--blau-2); color: var(--blau); }
.chip.akzent { background: var(--akzent-2); color: var(--akzent); }
.wahl { display: inline-flex; background: var(--flaeche-2); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.wahl button { border: 0; background: transparent; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--text-2); }
.wahl button.an { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
label.feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); font-weight: 550; }
input[type=text], input[type=number], input[type=tel], input[type=email], select, textarea { background: #fff; border: 1px solid var(--linie); border-radius: 9px; padding: 7px 10px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: 0; }
table.liste { width: 100%; border-collapse: collapse; }
table.liste th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
table.liste td { padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste td.z, table.liste th.z { text-align: right; white-space: nowrap; }
table.liste tr.klickbar { cursor: pointer; }
table.liste tr.klickbar:hover td { background: #faf7f2; }
table.liste tr.an td { background: var(--akzent-2); }
.herkunft { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.raumwahl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; margin-bottom: 14px; padding: 10px 12px; background: var(--flaeche-2); border-radius: var(--r); }
.geschoss-name { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-2); min-width: 46px; }
.geschoss-raeume { display: flex; flex-wrap: wrap; gap: 6px; }
.geschoss-raeume button { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 9px; padding: 6px 11px; cursor: pointer; font-size: 13px; color: var(--text); }
.geschoss-raeume button b { font-weight: 600; }
.geschoss-raeume button .zahl { color: var(--text-2); }
.geschoss-raeume button .lage { color: var(--text-3); font-size: 12px; }
.hinweis-offen { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.geschoss-raeume button .lage.offen { color: var(--gelb); font-weight: 600; }
.geschoss-raeume button.an { border-color: var(--akzent); background: var(--akzent-2); box-shadow: inset 0 0 0 1px var(--akzent); }
.bereich { padding: 12px 0; border-top: 1px solid var(--linie); }
.bereich-raeume { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bereich-raeume .chip { font-size: 13px; padding: 4px 11px; }
.betrachter { position: fixed; inset: 0; z-index: 100; background: #111; overflow: hidden; touch-action: none; display: grid; place-items: center; }
.betrachter img { max-width: 100vw; max-height: 100vh; background: #fff; transform-origin: center center; user-select: none; -webkit-user-select: none; }
.betrachter-knoepfe { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 8px; }
.betrachter-knoepfe .knopf { min-width: 48px; justify-content: center; }
.projekt-titel { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin: 18px 0 22px; overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.an { color: var(--text); border-color: var(--akzent); }
.tabs a .chip { margin-left: 6px; }
.tabs .tab-symbol, .tabs .kurz, #ansicht .kurz, #schnitte .kurz, #fugen-rot .kurz { display: none; }
.leer { padding: 30px; text-align: center; color: var(--text-3); }

/* Projektfortschritt */
.stufen { display: flex; gap: 0; margin-top: 14px; flex-wrap: wrap; }
.stufe { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-3); padding-right: 14px; }
.stufe::after { content: ""; width: 26px; height: 2px; background: var(--linie); margin-left: 6px; }
.stufe:last-child::after { display: none; }
.stufe .punkt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linie); display: grid; place-items: center; font-size: 11px; }
.stufe.fertig { color: var(--gruen); }
.stufe.fertig .punkt { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.stufe.jetzt { color: var(--text); }
.stufe.jetzt .punkt { border-color: var(--akzent); background: var(--akzent-2); }

/* Projektliste */
.projekt { padding: 18px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: transform .12s, box-shadow .12s; }
.projekt:hover { transform: translateY(-2px); }
.projekt .kom { font-family: var(--titel); font-size: 20px; font-weight: 600; }

/* Artikel */
.artikel { overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .12s; }
.artikel:hover { transform: translateY(-2px); }
.artikel .bild { aspect-ratio: 4/3; background: var(--flaeche-2) center/cover no-repeat; }
.artikel .text { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.galerie { display: flex; flex-direction: column; gap: 10px; }
.galerie .gross { aspect-ratio: 16/10; background: var(--flaeche-2) center/cover no-repeat; border-radius: 12px; }
.galerie .daumen { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.galerie .klein-bild { aspect-ratio: 1; background: var(--flaeche-2) center/cover no-repeat; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.galerie .klein-bild:hover { border-color: var(--akzent); }
.herkunft-marke { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; }
.herkunft-marke.hersteller { background: var(--blau-2); color: var(--blau); }
.herkunft-marke.vorfuehrung { background: var(--gelb-2); color: var(--gelb); }
.herkunft-marke.betrieb { background: var(--gruen-2); color: var(--gruen); }
.herkunft-marke.gemessen { background: var(--akzent-2); color: var(--akzent); }
.fakten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.fakten dt { color: var(--text-2); font-size: 13px; }
.fakten dd { margin: 0; }

/* Visualizer */
.vis { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.buehne { position: relative; height: min(68vh, 640px); border-radius: var(--r); overflow: hidden; background: #e9e5dd; }
.buehne .ueber { position: absolute; left: 14px; top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.buehne .unten { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; pointer-events: none; }
/* Die Infokaesten unten sind nur Anzeige: Tipps gehen durch, sonst faengt im
   Foto der Kasten "Angebot live" die vierte Ecke ab (gemessen in der Kette). */
.buehne .unten > * { pointer-events: none; }
.glas { background: rgba(255, 253, 249, .88); backdrop-filter: blur(8px); border-radius: 12px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.knopf.glas#fugen-rot.an { background: #e0241b; color: #fff; }
.buehne canvas.flach { width: 100%; height: 100%; object-fit: contain; padding: 64px 18px 92px; box-sizing: border-box; display: block; }
.warte { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(233,229,221,.5); font-weight: 600; color: var(--text-2); opacity: 0; pointer-events: none; transition: opacity .2s; }
.warte.an { opacity: 1; }
.panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.panel h3 { display: flex; justify-content: space-between; align-items: center; }
.fliesenwahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fliesenwahl button { border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: var(--flaeche-2); cursor: pointer; text-align: left; }
.fliesenwahl button.an { border-color: var(--akzent); }
.fliesenwahl .bild { aspect-ratio: 1; background: center/cover no-repeat; }
.fliesenwahl .name { font-size: 11px; padding: 4px 6px; line-height: 1.25; font-weight: 600; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.kennzahl { background: var(--flaeche-2); border-radius: 10px; padding: 9px 11px; }
.kennzahl .w { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kennzahl .n { font-size: 11.5px; color: var(--text-2); }
.farben { display: flex; gap: 6px; }
.farben button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--linie); cursor: pointer; }
.farben button.an { box-shadow: 0 0 0 2px var(--akzent); }
.versionen { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.version { flex: none; width: 150px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--flaeche-2); cursor: pointer; }
.version.an { border-color: var(--akzent); }
.version .bild { aspect-ratio: 4/3; background: center/cover no-repeat #ddd6ca; }
.version .t { font-size: 11.5px; padding: 5px 7px; line-height: 1.3; }

/* Raum */
.raum { display: grid; grid-template-columns: 1fr 460px; gap: 18px; align-items: start; }
.plan { height: min(66vh, 620px); background: #fbfaf7; border-radius: var(--r); overflow: hidden; touch-action: pan-x pan-y; }
.plan svg { width: 100%; height: 100%; display: block; }
.plan .wand { stroke: #2a2723; stroke-width: 60; stroke-linecap: round; }
.plan .masz { font: 650 130px var(--sans); fill: var(--akzent); cursor: pointer; paint-order: stroke; stroke: #fbfaf7; stroke-width: 30px; }
.plan .ecke { fill: #fff; stroke: var(--akzent); stroke-width: 22; cursor: grab; }
.plan .ecke-name { font: 700 110px var(--sans); fill: var(--text-3); }
.oeffnung-zeile { display: grid; grid-template-columns: 88px 78px repeat(4, minmax(52px, 1fr)) 30px; gap: 5px; align-items: center; }
.oeffnung-zeile input, .oeffnung-zeile select { padding: 5px 6px; font-size: 13px; }

/* Verlauf */
.verlauf { display: flex; flex-direction: column; gap: 0; }
.ereignis { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.ereignis .symbol { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--flaeche-2); }
.ereignis.kundenentscheidung { background: linear-gradient(90deg, var(--gruen-2), transparent 70%); border-radius: 10px; padding-left: 6px; }
.ereignis.kundenentscheidung .symbol { background: var(--gruen); color: #fff; }
.ereignis.preis .symbol, .ereignis.waechter .symbol { background: var(--gelb-2); }
.ereignis.bestaetigung .symbol, .ereignis.bestellung .symbol { background: var(--gruen-2); }

/* WhatsApp */
.telefon { background: #efe7de; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.blase { background: #fff; border-radius: 12px 12px 12px 3px; padding: 8px 12px; max-width: 88%; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 14px; }
.blase .wer { font-size: 11.5px; color: var(--gruen); font-weight: 700; }

/* Modal */
.schleier { position: fixed; inset: 0; background: rgba(28, 25, 20, .45); display: grid; place-items: center; z-index: 50; padding: 20px; animation: auf .15s ease; }
.fenster { background: var(--flaeche); border-radius: 18px; max-width: 920px; width: 100%; max-height: 90vh; overflow: auto; padding: 24px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
@keyframes auf { from { opacity: 0; } }
.schritte { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.schritt { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.schritt.da { opacity: 1; transform: none; }
.schritt .haken { width: 30px; height: 30px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; font-weight: 800; }
.schritt.fehler .haken { background: var(--rot); }
.hinweis { border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.hinweis.gelb { background: var(--gelb-2); color: #6d4c0e; }
.hinweis.gruen { background: var(--gruen-2); color: #1f4a33; }
.hinweis.blau { background: var(--blau-2); color: #1f4460; }
.hinweis.rot { background: var(--rot-2); color: #6f2319; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: 420px; background: #24221e; color: #fff; padding: 14px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: auf .2s; }
.summen { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; max-width: 360px; margin-left: auto; }
.summen .brutto { font-size: 20px; font-weight: 750; border-top: 2px solid var(--text); padding-top: 6px; }
.gruppe-kopf td { background: var(--flaeche-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); padding: 6px 10px !important; }
.regel { padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.regel code { background: var(--flaeche-2); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.regel .wd { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--akzent); margin-right: 6px; }

@media (max-width: 1100px) {
  .vis, .raum { grid-template-columns: 1fr !important; }
}
/* Smartphone (Owner 2026-10-14: "nicht rechts die Spalte mit den Tabs sondern Tabs oben angereiht ... die tabs
   übersicht, raum, visualizer ... sind tabs die beim smartphone im footer sein sollen"): die Hauptnavigation steht oben
   als eine Reihe, die Reiter eines Projekts sitzen als feste Leiste unten, mit Symbol und kurzem Namen. */
@media (max-width: 760px) {
  .app { display: block; }
  .nav { position: sticky; top: 0; height: auto; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0 6px; z-index: 40; }
  .nav .marke { padding: 0 16px; }
  .nav .marke .logo { width: 104px; margin-bottom: 0; }
  .nav .marke-unter, .nav .fuss { display: none; }
  .nav-reiter { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 10px; }
  .nav-reiter::-webkit-scrollbar { display: none; }
  .nav a { flex: none; gap: 6px; font-size: 13px; padding: 7px 10px; }
  .nav a svg { width: 16px; height: 16px; }
  main { padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  .stufen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px 0 14px; }
  .stufe { flex: none; font-size: 12px; padding-right: 10px; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 0; box-shadow: 0 -4px 18px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); overflow: visible; }
  .tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; font-size: 11px; font-weight: 600; border-bottom: 0; border-top: 2px solid transparent; margin: 0; position: relative; }
  .tabs a.an { color: var(--akzent); border-top-color: var(--akzent); }
  .tabs .tab-symbol { display: block; width: 22px; height: 22px; }
  .tabs .tab-symbol svg { width: 22px; height: 22px; }
  .tabs .lang { display: none; }
  .tabs .kurz { display: inline; }
  .tabs a .chip { position: absolute; top: 3px; right: 50%; margin-right: -22px; padding: 0 5px; font-size: 10px; background: var(--akzent); color: #fff; }
  .galerie { grid-template-columns: 1fr; }
  .buehne { height: 54vh; }
  .oeffnung-zeile { grid-template-columns: repeat(3, 1fr) 28px; }
  #ansicht .lang, #schnitte .lang, #fugen-rot .lang { display: none; }
  #ansicht .kurz, #schnitte .kurz, #fugen-rot .kurz { display: inline; }
  .raumwahl { grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; }
  .geschoss-name { margin-top: 4px; }
  /* kein seitliches Scrollen (Owner 2026-10-14): die Raeume brechen um */
}
/* Footer (Owner 2026-10-14): fester Teil der App auf jeder Seite; links der Inhalt der Seite, rechts immer Zurück.
   Breit beginnt er neben der Seitenleiste, schmal geht er über die ganze Breite und trägt im Projekt die Reiter. */
.fussleiste { position: fixed; left: 232px; right: 0; bottom: 0; z-index: 45; display: flex; align-items: stretch; min-height: 56px;
  background: var(--flaeche); border-top: 1px solid var(--linie); box-shadow: 0 -4px 18px rgba(0,0,0,.06); padding-bottom: env(safe-area-inset-bottom); }
.fuss-inhalt { flex: 1; min-width: 0; display: flex; overflow: hidden; }
.fuss-inhalt > * { flex: 1; min-width: 0; }
.anlegen { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border: 0; border-right: 1px solid var(--linie); background: none;
  color: var(--akzent); font: 600 14px var(--sans); cursor: pointer; }
.anlegen svg { width: 20px; height: 20px; }
.anlegen-liste { display: grid; gap: 8px; margin-top: 14px; }
.anlegen-liste .knopf { justify-content: flex-start; gap: 10px; padding: 12px 14px; }
.anlegen-liste .knopf svg { width: 18px; height: 18px; }
.anlegen-liste .knopf .klein { margin-left: auto; }
.anlegen-liste .knopf:disabled { opacity: .55; cursor: default; }
.zurueck { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border: 0; border-left: 1px solid var(--linie); background: none;
  color: var(--text); font: 600 14px var(--sans); cursor: pointer; }
.zurueck svg { width: 20px; height: 20px; }
.zurueck:hover:not(:disabled) { color: var(--akzent); }
.zurueck:disabled { color: var(--text-3); cursor: default; }
.toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  .fussleiste { left: 0; }
  .fussleiste .tabs { position: static; box-shadow: none; border-top: 0; padding-bottom: 0; grid-auto-columns: minmax(0, 1fr); }
  /* bis zu sechs Reiter plus Anlegen und Zurück auf 360 px: die Namen werden schmal statt die Knöpfe zu überdecken */
  .fussleiste .tabs a { padding-left: 0; padding-right: 0; font-size: 10.5px; letter-spacing: -.01em; }
  .fussleiste .tabs .kurz { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .zurueck, .anlegen { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 8px 7px; font-size: 10.5px; }
  .zurueck svg, .anlegen svg { width: 22px; height: 22px; }
}
.vis > *, .raum > *, .spalte > * { min-width: 0; }
.karte.innen { overflow-x: auto; }
@media (max-width: 760px) {
  .fakten { grid-template-columns: 1fr; gap: 2px 0; }
  .fakten dd { margin-bottom: 8px; }
  .kopfzeile .knopf { white-space: normal; }
}
/* Durchgehend verlegen (Owner 2026-10-14): Raeume eines Geschosses zu einem Verlegemuster verbinden */
.verbund-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.haken { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche); font-size: 13px; cursor: pointer; }
.haken:has(input:checked) { border-color: var(--akzent); background: var(--akzent-2); }
.haken input { accent-color: var(--akzent); margin: 0; }
.geschoss-raeume button .lage.verbund { color: var(--akzent); font-weight: 600; }
/* Fugen hervorheben: zwei Regler, Farbe (Farbton) und Linienstaerke, nur Ansicht */
.fugen-regler { display: flex; gap: 14px; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.fugen-regler label { display: flex; align-items: center; gap: 6px; }
.fugen-regler input[type=range] { width: 110px; accent-color: hsl(var(--ton, 3) 80% 48%); }
#fugen-ton { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; background: linear-gradient(90deg, hsl(0 80% 48%), hsl(60 80% 48%), hsl(120 80% 48%), hsl(180 80% 48%), hsl(240 80% 48%), hsl(300 80% 48%), hsl(359 80% 48%)); }
#fugen-ton::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--ton, 3) 80% 48%); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
#fugen-ton::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: hsl(var(--ton, 3) 80% 48%); border: 2px solid #fff; }
.fugen-regler b { min-width: 44px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .fugen-regler { flex-wrap: wrap; gap: 8px; } .fugen-regler input[type=range] { width: 90px; } }
/* Viewer (Owner 2026-10-14): im Bild nur das Bild; eine Leiste am Rand, oben, unten, links oder rechts, mit dem Knopf
   fuer das Dialogfeld und dem Live-Preis. Das Dialogfeld liegt ueber dem Viewer. */
.viewer { position: relative; display: flex; gap: 10px; }
.viewer.leiste-oben { flex-direction: column; }
.viewer.leiste-unten { flex-direction: column-reverse; }
.viewer.leiste-links { flex-direction: row; }
.viewer.leiste-rechts { flex-direction: row-reverse; }
.viewer .buehne { flex: none; min-width: 0; }
.viewer.leiste-links .buehne, .viewer.leiste-rechts .buehne { flex: 1 1 0; }
.viewer-leiste { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); flex-wrap: wrap; }
.viewer.leiste-links .viewer-leiste, .viewer.leiste-rechts .viewer-leiste { flex-direction: column; align-items: stretch; width: 190px; flex: none; }
.viewer-leiste #viewer-menue { gap: 8px; display: inline-flex; align-items: center; }
.viewer-leiste #viewer-menue svg { width: 18px; height: 18px; }
.viewer-leiste #viewer-menue[aria-expanded="true"] { border-color: var(--akzent); color: var(--akzent); }
.leiste-live { margin-left: auto; text-align: right; line-height: 1.25; }
.viewer.leiste-links .leiste-live, .viewer.leiste-rechts .leiste-live { margin-left: 0; text-align: left; }
.leiste-live .preis { font-size: 18px; font-weight: 750; }
.leiste-liefer { max-width: 320px; }
.viewer-dialog { position: absolute; z-index: 30; top: 12px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: 0 12px 36px rgba(0,0,0,.18); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.viewer-dialog .wahl { margin-top: 4px; flex-wrap: wrap; }
.viewer-dialog .fugen-regler { padding: 0; flex-wrap: wrap; }
.viewer-dialog .knopf.an { border-color: var(--akzent); }
.buehne canvas.flach { padding: 18px; }
@media (max-width: 760px) {
  .viewer.leiste-links .viewer-leiste, .viewer.leiste-rechts .viewer-leiste { width: 112px; padding: 8px; gap: 8px; }
  .viewer.leiste-links .leiste-liefer, .viewer.leiste-rechts .leiste-liefer, .viewer.leiste-links .leiste-zusatz, .viewer.leiste-rechts .leiste-zusatz { display: none; }
  .leiste-live .preis { font-size: 16px; }
  .leiste-liefer { max-width: none; flex-basis: 100%; }
}
.viewer-dialog[hidden] { display: none; }

/* Raumleiste und Raeume-Dialog (Owner 2026-10-14: nicht seitlich scrollen, Raeume im Dialog waehlen) */
.raumleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; padding: 8px 10px; background: var(--flaeche-2); border-radius: var(--r); }
.raumleiste #raeume-waehlen { display: inline-flex; align-items: center; gap: 8px; }
.raumleiste #raeume-waehlen svg { width: 18px; height: 18px; }
.raum-chips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.raum-chips button { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--linie); background: var(--flaeche); border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.raum-chips button.an { border-color: var(--akzent); background: var(--akzent-2); box-shadow: inset 0 0 0 1px var(--akzent); }
.raum-chips button .zahl { color: var(--text-2); }
.raum-chips button .lage { font-size: 12px; }
.raum-chips button .lage.offen { color: var(--gelb); font-weight: 600; }
.raum-chips button .lage.verbund { color: var(--akzent); font-weight: 600; }
#raum-dialog { display: flex; flex-direction: column; gap: 12px; }
.dialog-gruppe .geschoss-name { margin-bottom: 6px; }
.geschoss-raeume button.aktiv { box-shadow: inset 0 0 0 2px var(--akzent); }
.geschoss-raeume button .lage.aktiv { color: var(--akzent); font-weight: 700; }
/* Grundriss 2D (Owner 2026-10-15): das SVG fuellt die Buehne; ein Finger scrollt die Seite, zwei zoomen */
.buehne .grundriss-feld { position: absolute; inset: 0; background: #fbfaf7; }
.buehne .grundriss-feld svg { width: 100%; height: 100%; display: block; touch-action: pan-x pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.wahl.mehr { flex-wrap: wrap; }

/* PLAIT Feedback oben rechts, ueber allem; die Kopfzeile der Seiten laesst ihm Platz */
.plait-feedback { position: fixed; top: 12px; right: 14px; z-index: 50; line-height: 0; }
.kopfzeile { padding-right: 46px; }
/* Grundriss zeichnen (Owner 2026-10-19: "Ganz normal mit finger oder s-pen soll man linien ziehen können"): die
   Zeichenflaeche nimmt fast den ganzen Bildschirm, oben eine schmale Kopfzeile und eine Leiste mit Symbolen. Eine
   Tafel erscheint nur, wenn etwas angetippt ist, und liegt UEBER der Flaeche (am Handy unten, am Rechner rechts). */
body.zeichner-offen { overflow: hidden; }
.zeichner { position: fixed; inset: 0; z-index: 60; background: var(--grund); display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.zeichner-kopf { display: flex; align-items: center; gap: 6px; padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--flaeche); border-bottom: 1px solid var(--linie); min-width: 0; }
.zeichner-kopf .zn-name { flex: 1 1 80px; min-width: 0; font-weight: 600; padding: 6px 8px; }
.zeichner-kopf select { padding: 5px 4px; max-width: 76px; }
.zn-fassung { white-space: nowrap; }
.zn-knopf { min-width: 34px; height: 34px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche); font-size: 16px; line-height: 1; cursor: pointer; color: inherit; }
.zeichner-leiste { display: flex; gap: 2px; align-items: center; padding: 4px 8px; background: var(--flaeche); border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.zeichner-leiste::-webkit-scrollbar { display: none; }
.zn-werkzeug { flex: 0 0 auto; width: 34px; height: 38px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #3b3832; cursor: pointer; padding: 0; }
.zn-werkzeug svg { width: 21px; height: 21px; }
.zn-werkzeug.an { background: var(--gruen-2); border-color: var(--gruen); color: var(--gruen); }
.zn-werkzeug:disabled { opacity: .35; cursor: default; }
.zn-trenner { flex: 0 0 1px; height: 24px; background: var(--linie); margin: 0 2px; }
.zeichner-flaeche { position: relative; min-height: 0; background: #fbfaf7; overflow: hidden; }
.zeichner-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.zeichner-flaeche svg [data-mass] { cursor: pointer; }
.zn-meldung { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100% - 20px); font-size: 13px; color: var(--text-2); background: rgba(255, 253, 249, .9); border-radius: 8px; padding: 3px 8px; pointer-events: none; }
.zn-meldung:empty { display: none; }
.zn-meldung.rot { color: var(--rot); }
.zeichner-tafel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 46vh; overflow: auto; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--flaeche); border-top: 1px solid var(--linie); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.zeichner-tafel[hidden] { display: none; }
.zn-titel { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.zn-tafel-zu { margin-left: auto; }
.zn-felder { display: flex; flex-wrap: wrap; gap: 8px; }
.zn-felder .feld { flex: 1 1 120px; }
.zn-oeffnung { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--linie); font-size: 13.5px; }
.zn-oeffnung input { width: 56px; padding: 4px 6px; }
.zn-eingabe { position: absolute; z-index: 3; display: flex; gap: 6px; align-items: center; background: var(--flaeche); border: 1px solid var(--gruen); border-radius: 12px; padding: 6px 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.zn-eingabe[hidden] { display: none; }
.zn-eingabe input { width: 92px; font-size: 18px; padding: 6px 8px; }
@media (min-width: 900px) {
  .zeichner-tafel { left: auto; top: 0; width: 360px; max-height: none; border-top: 0; border-left: 1px solid var(--linie); box-shadow: -8px 0 24px rgba(0, 0, 0, .06); }
}

/* Plan hochgeladen, ganzer Grundriss (Owner 2026-10-19): Vorschau im Planfenster, Kanten antippen fuer die Massprobe */
.plan-vorschau { margin-top: 8px; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; background: #fff; }