/* shell.css — the chrome of design 3a: millimetre paper, floating glass panels, header, KPI strip, three-column body, HERLEITUNG bar, status bar. Replaces the old layout.css. Loaded after components.css so it wins on the geometry the components used to set for themselves. The one hard rule of this screen: everything visible at once. No tabs, no accordions, no modals on the analysis screen. The § evidence viewer is the single exception -- it is a document reader, not part of the result. */ /* ---- 1. the canvas ---------------------------------------------------- */ html, body { height: 100%; } body { margin: 0; padding: var(--pad-canvas); max-width: none; box-sizing: border-box; font-family: var(--font-ui); color: var(--txt); background-color: var(--canvas); /* Two grids, 48 px and 8 px: architect's millimetre paper. The fine grid sits at .018 alpha so it reads as texture, not as content. */ background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 48px 48px, 48px 48px, 8px 8px, 8px 8px; background-attachment: fixed; display: flex; flex-direction: column; gap: var(--gutter); /* auto, not hidden: on a window smaller than the layout's minimum the page scrolls instead of silently clipping columns at the edges. */ overflow: auto; } /* Bright paper: the tiny checkbox in the status bar flips this class on . Only the millimetre paper and the translucent bars change -- the panels stay the same dark glass, so nothing else re-themes. */ /* Auf hellem Papier bleibt das Glas DUNKEL und weitgehend deckend. Der helle Anflug des Normalfalls waere hier heller Text auf hellem Grund -- also unlesbar. Etwas Luft ist trotzdem drin (.9 -> .82), damit auch in diesem Modus das Raster durchschimmert; weiter aufmachen laesst sich das nur zusammen mit einer dunkleren Textfarbe, und das waere ein zweites Thema, kein Variablentausch. */ body.bg-bright { --canvas: #e9e7e2; --glass: rgba(22, 22, 22, .82); --bar-glass: rgba(30, 27, 24, .84); --status-glass: rgba(18, 18, 18, .82); --overlay-box: rgba(28, 28, 28, .78); --shadow-frame: 0 24px 60px rgba(0, 0, 0, .28); --shadow-panel: 0 12px 34px rgba(0, 0, 0, .25); background-image: linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); } body.detail-open { overflow: auto; } *, *::before, *::after { box-sizing: border-box; } /* .panel and several bars set display:flex, which beats the UA's [hidden]. Stated once here so a hidden attribute keeps meaning hidden. */ [hidden] { display: none !important; } /* Every interactive element gets the same focus ring. Declared once, here, so nothing can quietly ship without one. */ :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* ---- 2. the panel ----------------------------------------------------- */ .panel { border-radius: var(--r-panel); border: 1px solid var(--hair); box-shadow: var(--shadow-panel); background: var(--glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); overflow: hidden; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* Auch die Zeichnungsfenster tragen jetzt Glas -- ausdruecklich gewuenscht («jedes Fenster»). Frueher waren sie undurchsichtig (--draw) mit der Begruendung, Glas hinter Karte oder 3D-Szene mache die Zeichnung matschig. Das gilt hier nicht: Karte und Canvas sind eigene, deckende Kinder im Panel; das Glas wirkt nur auf den Rand um sie herum. Was durchscheint, ist das Millimeterpapier, nicht die Zeichnung. */ .panel.is-drawing { background: var(--glass); } /* A blurred child ignores the parent's corner clip in WebKit, so the title bar has to carry the radius itself -- 1 px inside the panel's 18. */ .panel-title { flex: none; border-radius: var(--r-inner) var(--r-inner) 0 0; display: flex; align-items: center; gap: 8px; padding: 0 15px; height: 36px; font: 700 12px/1 var(--font-ui); letter-spacing: .11em; text-transform: lowercase; color: var(--lbl); border-bottom: 1px solid var(--hair-soft); background: rgba(255, 255, 255, .02); } .panel-title .t-note { margin-left: auto; letter-spacing: .04em; text-transform: none; font: 700 13px/1 var(--font-num); color: var(--txt3); } .panel-body { flex: 1 1 auto; min-height: 0; position: relative; } .panel-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 15px; height: 32px; border-top: 1px solid var(--hair-soft); font: 700 13px/1 var(--font-num); color: var(--txt3); } .panel-foot .f-right { margin-left: auto; color: var(--txt2); } .panel-foot .f-acc { color: var(--acc); } /* ---- 3. header -------------------------------------------------------- */ /* .panel is a column; the header is the one panel laid out across. */ #topbar { flex: none; height: 70px; flex-direction: row; align-items: stretch; gap: 0; } #brand { flex: none; margin: 7px 0 7px 7px; padding: 0 16px; border-radius: var(--r-brand); background: var(--acc); color: #0c0c0c; display: flex; flex-direction: column; justify-content: center; gap: 2px; } #brand .b-name { font: 800 15.5px/1 var(--font-ui); letter-spacing: .1em; } #brand .b-sub { font: 700 12px/1 var(--font-num); letter-spacing: .1em; opacity: .82; } /* Header cells: a kicker over a value, flush left, hairline between. */ .hcell { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 16px; min-width: 0; border-left: 1px solid var(--hair-soft); } .hcell:first-of-type { border-left: none; } .hcell .k { display: flex; align-items: baseline; gap: 8px; font: 700 12px/1 var(--font-ui); letter-spacing: .1em; color: var(--lbl); text-transform: lowercase; } .hcell .v { font: 700 17.5px/1.2 var(--font-num); color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hcell .v .acc { color: var(--acc); } #hcell-adresse { flex: 1 1 auto; margin-left: 14px; } #hcell-auswahl { flex: 0 1 300px; } /* The address input sits inside its header cell and looks like the value it replaces -- no box, no border, until it is focused. */ #address-form { display: contents; margin: 0; } #address-input { width: 100%; padding: 0; border: none; background: none; font: 700 17.5px/1.2 var(--font-num); color: var(--txt); } #address-input::placeholder { color: var(--faint); } #address-input:focus { outline: none; } #hcell-adresse:focus-within { background: rgba(255, 255, 255, .03); } .btn-capsule { flex: none; margin: 9px 8px; border: none; cursor: pointer; border-radius: 999px; display: flex; align-items: center; padding: 0 18px; font: 800 15.5px/1 var(--font-ui); letter-spacing: .1em; transition: background .15s, color .15s; } #analyse-btn { width: 186px; background: var(--acc); color: #0c0c0c; } #analyse-btn:hover:not([disabled]) { background: var(--acc2); } #pdf-btn, #detail-btn { background: #212121; color: var(--txt2); } #pdf-btn { width: 150px; } #detail-btn { width: 116px; font-size: 13.5px; } #pdf-btn:hover:not([disabled]), #detail-btn:hover:not([disabled]) { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); } .btn-capsule[disabled] { opacity: .38; cursor: default; } /* ---- 4. KPI strip ----------------------------------------------------- */ #kpis { flex: none; flex-direction: row; height: 90px; } .kpi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 18px; border-left: 1px solid var(--hair-soft); } .kpi:first-child { border-left: none; background: color-mix(in srgb, var(--acc) 10%, transparent); } .kpi .k { font: 700 12px/1 var(--font-ui); letter-spacing: .1em; color: var(--lbl); text-transform: lowercase; } .kpi .v { font: 700 29px/1.1 var(--font-num); color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi .s { font: 700 13px/1.2 var(--font-num); color: var(--txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi:first-child .v { color: var(--acc); } /* ---- 5. body: three columns ------------------------------------------- */ /* The analysis screen is the flex child that takes the remaining height; without this the three columns collapse to their content and the log, the isometry and the Kennwerte panel all end up a few lines tall. */ #screen-analyse { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--gutter); } #dash { flex: 1 1 auto; min-height: 0; /* Side columns give way before anything is cut off: 460/440 when the window is wide, down to 300 when it is not; below the sum of the minimums the body scrolls (see the body rule above). */ display: grid; grid-template-columns: minmax(300px, 460px) minmax(320px, 1fr) minmax(300px, 440px); gap: var(--gutter); } #col-left, #col-mid { display: flex; flex-direction: column; gap: var(--gutter); min-width: 0; min-height: 0; } #pane-map { flex: 0 0 392px; } #pane-log { flex: 1 1 auto; } #pane-iso { flex: 1 1 62%; } #pane-plan { flex: 1 1 38%; min-height: 190px; } /* Map, 3D scene and plan all fill their panel body completely. */ #map, #viewer { position: absolute; inset: 0; } #map { background: var(--draw); } #floorplan { position: absolute; inset: 0; overflow: hidden; } #floorplan svg { width: 100%; height: 100%; display: block; } /* ---- 6. (frei) -------------------------------------------------------- Die HERLEITUNG-Leiste ist entfernt: die Herleitung erscheint als Popover direkt neben der Kennwert-Zeile (#kw-tip in panels.css). */ /* ---- 7. status bar ---------------------------------------------------- */ #statusbar { flex: none; height: 34px; flex-direction: row; align-items: center; gap: 0; padding: 0 14px; background: var(--status-glass); font: 700 13px/1 var(--font-num); color: var(--txt3); overflow: hidden; } /* The bright-paper switch: deliberately tiny and unlabelled. Leftmost so the bar's overflowing right side can never clip it away. */ #statusbar #bg-toggle { flex: none; margin: 0 10px 0 0; width: 11px; height: 11px; accent-color: var(--acc); cursor: pointer; } #statusbar #bg-toggle + span { border-left: none; padding-left: 0; } /* Jeder Abschnitt darf schrumpfen und mit Ellipse enden — vorher ragte der rechte Rand auf schmalen Fenstern mitten im Wort aus dem Bild. */ #statusbar > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; border-left: 1px solid var(--hair-soft); white-space: nowrap; } #statusbar > span:first-child { border-left: none; padding-left: 0; } #statusbar .live { color: var(--acc); } #statusbar #status-msg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--txt2); } #statusbar #status-msg.error { color: #ef9a9a; } #statusbar .stamp { margin-left: auto; color: var(--faint); } #statusbar .stamp a { color: inherit; text-decoration: none; } #statusbar .stamp a:hover { color: var(--acc); } /* ---- 8. the detail screen -------------------------------------------- The four things design 3a has no slot for -- the Zonen-Steckbrief and zoning excerpt, the Prüfliste, Quellen & Kosten, and the Grundbuch input form -- plus the Ablauf & Normkette panel. Same chrome, same paper, one scrolling column. It is deliberately a second SCREEN and not a drawer or a tab: the analysis screen keeps its promise that nothing on it is hidden, and this one is reached by a named button, not by a click that makes part of the result disappear. */ #screen-detail { display: none; } body.detail-open #screen-analyse { display: none !important; } body.detail-open #screen-detail { display: flex; flex-direction: column; gap: var(--gutter); flex: 1 1 auto; } body.detail-open #kpis { display: none; } #screen-detail .panel { flex: none; } #screen-detail .panel-body { padding: 16px 18px 20px; overflow: visible; } #screen-detail h2 { font: 700 13.5px/1.3 var(--font-ui); letter-spacing: .11em; text-transform: lowercase; color: var(--lbl); margin: 1.4rem 0 .5rem; } #screen-detail .panel-body > h2:first-child { margin-top: 0; } #screen-detail h3 { font: 700 14.5px/1.3 var(--font-ui); color: var(--txt); margin: 1rem 0 .4rem; } /* ---- 9. print ---------------------------------------------------------- */ @media print { body { display: block; padding: 0; background: #fff; } #topbar, #screen-analyse, #screen-detail { display: none !important; } } /* ---- 10. small screens: iPhone & schmale Fenster ----------------------- Bewusst am ENDE der Datei, nicht oben (Ausnahme vom Prepend-Protokoll wie die geordneten Rechts-Pipelines): diese Bloecke ueberschreiben die Desktop-Regeln oben bei GLEICHER Spezifitaet, und die Kaskade entscheidet nach Reihenfolge — weiter oben eingefuegt wuerden sie stillschweigend verlieren. Unter 980 px (Summe der drei Spalten-Minima plus Raender) wird aus den drei Spalten EINE: Karte, Isometrie, Plan, Kennwerte, Protokoll unter- einander. Die Zeichnungen behalten feste Hoehen, alles andere waechst mit dem Inhalt, und die SEITE scrollt als Ganzes — verschachtelte Scroll- flaechen sind auf dem Telefon unbrauchbar. */ @media (max-width: 980px) { html, body { height: auto; } body { padding: 8px; gap: 8px; } /* Kopf: Marke + Adresse in einer Zeile, Auswahl und Knoepfe brechen um. */ #topbar { height: auto; flex-wrap: wrap; align-items: center; } #brand { margin: 7px; } #hcell-adresse { flex: 1 1 220px; margin-left: 0; padding: 6px 12px; } #hcell-auswahl { flex: 1 1 130px; padding: 6px 12px; } .btn-capsule { flex: 1 1 auto; justify-content: center; margin: 0 7px 8px; min-height: 40px; } /* Kopfzahlen: zwei je Zeile statt fuenf nebeneinander. */ #kpis { height: auto; flex-wrap: wrap; } .kpi { flex: 1 1 40%; min-width: 40%; padding: 10px 14px; border-left: none; border-top: 1px solid var(--hair-soft); } .kpi:nth-child(-n+2) { border-top: none; } /* Eine Spalte. display:contents loest die beiden Spalten-Wrapper auf, damit `order` die Panels als Geschwister sortieren kann. */ #screen-analyse { flex: none; min-height: auto; } #dash { display: flex; flex-direction: column; flex: none; min-height: auto; gap: 8px; } #col-left, #col-mid { display: contents; } #pane-map { order: 1; flex: none; height: 320px; } #pane-iso { order: 2; flex: none; height: 360px; } #pane-plan { order: 3; flex: none; height: 320px; } #pane-kw { order: 4; flex: none; } #pane-log { order: 5; flex: none; height: 300px; } #kennwerte { flex: none; overflow: visible; } /* Varianten-Karten duerfen seitlich scrollen statt zu quetschen. */ #variants { overflow-x: auto; } .variant { min-width: 150px; } /* Fingerziele. */ #iso-controls button, .plan-zoom button { width: 34px; height: 34px; } /* iOS Safari zoomt beim Fokussieren in jedes Eingabefeld unter 16 px — ab 16 px unterbleibt genau dieser Sprung. Die 16 sind hier also eine UNTERGRENZE mit Wirkung, kein Schriftgrad nach Geschmack: beim Hochskalieren der Oberflaeche wurde daraus 18.5, was die Bedingung weiter erfuellt — unter 16 darf dieser Wert nie fallen. */ #address-input { font-size: 18px; } /* Auf schmalem Schirm stehen die Kennzahlen zu zweit nebeneinander. Bei 29 px passte «1761.9 m³» nicht mehr in die halbe Breite, und abge- schnitten wurde ausgerechnet die EINHEIT — eine Zahl ohne Einheit ist in diesem Werkzeug keine Aussage. Lieber etwas kleiner und vollstaendig. */ .kpi .v { font-size: 23px; } .hcell .v { font-size: 17px; } } /* ---- 9. Kapitälchen ---------------------------------------------------- Beschriftungen, Knöpfe und Überschriften laufen in Kapitälchen. Zwei Fallen, die diese Regeln erklären: 1. `font-variant-caps` wirkt NICHT auf Grossbuchstaben. Wo bisher `text-transform: lowercase` stand, wäre nichts zu sehen gewesen — der Browser hat schon Versalien und kann sie nicht ein zweites Mal verkleinern. Deshalb steht dort jetzt `lowercase`: der Text kommt klein an und wird als Kapitälchen gesetzt. Das gilt auch für die Beschriftungen, die im HTML gross geschrieben sind («ANALYSIEREN»). 2. Die Kurzform `font:` setzt `font-variant` still auf `normal` zurück. Genau diese Kurzform steht in rund zwanzig Regeln in css/. Eine pauschale Regel auf `body` wäre dort also wirkungslos gewesen, ohne dass es irgendwo auffällt. Darum wird `font-variant-caps` hier je Selektor gesetzt — und zwar NACH den Regeln, die die Kurzform benutzen, damit die Kaskade in die richtige Richtung läuft. Menlo führt keine echten Kapitälchen; der Browser verkleinert dafür Versalien. Das ist synthetisch, aber bei diesen Schriftgraden (9–13 px, weit gesperrt) nicht von echten zu unterscheiden. Fliesstext bleibt bewusst aussen vor: Protokollzeilen, Hinweise und die Beleg-Texte sind ganze Sätze, und ganze Sätze in Kapitälchen liest niemand gern. Kapitälchen sind hier eine Auszeichnung, keine Grundschrift. */ #brand .b-name, #brand .b-sub, .panel-title, .hcell .k, .kpi .k, #screen-detail h2, .kw-group-head, .ng-head, .ng-sec h4, .ovl .o-k, .combo-opt .opt-kind, #pane-ablauf > summary, .nk-ebene, .nk-rang, .nk-messweise i, .nk-grundlage i, .zone-proof-btn, /* #screen-detail h3 setzt seine Schrift mit der Kurzform `font:` und schlaegt mit seiner ID-Spezifitaet die Klasse .steckbrief-h — die Kapitälchen kamen dort deshalb nicht an. Beide Selektoren stehen hier, der spezifischere zuerst gefunden; das ist genau die Falle aus Punkt 2 oben, einmal real. */ #screen-detail h3, .steckbrief-h, .btn-capsule, #screen-detail button, #iso-controls button, .plan-zoom button, #statusbar .live { font-variant-caps: small-caps; text-transform: lowercase; } /* Ziffern und Einheiten sind keine Buchstaben — Kapitälchen ändern an ihnen nichts, aber `lowercase` würde ein «M²» zu «m²» machen und ein EGRID kleinschreiben. Die Zahlenfelder bleiben deshalb unangetastet. */ .kpi .v, .hcell .v, .panel-foot, #statusbar .stamp, #status-stand, #status-timings, #status-msg { text-transform: none; } /* ---- 10. Glaskante ----------------------------------------------------- Die Lichtbrechung selbst (js/ui/liquid-glass.js) traegt nur Chromium: ein SVG-Filter als `backdrop-filter` ist sonst nirgends implementiert. Was eine Scheibe ausserdem als Scheibe lesbar macht, laesst sich aber ohne Filter bauen und laeuft ueberall — auch in Safari: .panel::before die Fase. Ein heller Verlauf oben links, ein dunkler unten rechts, nur im Randstreifen sichtbar. Gemacht mit zwei uebereinandergelegten Verlaeufen und einer Maske aus zwei Farbverlaeufen, damit die Mitte frei bleibt. .panel::after die Lichtkante: ein 1 px schmaler Streifen entlang der Oberkante, wo eine echte Scheibe das Licht spiegelt. Beide liegen ueber dem Inhalt und muessen daher pointer-events: none tragen — sonst faengt die Fase Klicks ab, die der Karte darunter gelten. Beide sind rein dekorativ und deshalb aria-hidden von Natur aus (Pseudoelemente ohne Inhalt tauchen im Accessibility-Baum nicht auf). */ .panel { position: relative; } .panel::before, .panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; } /* Fase: hell von oben links, dunkel nach unten rechts. Die Maske schneidet alles bis auf den Randstreifen weg — ohne sie liegt ein Schleier ueber dem ganzen Fenster statt einer Kante an seinem Rand. */ .panel::before { background: linear-gradient(145deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .03) 22%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .08) 82%, rgba(0, 0, 0, .15) 100%); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px; } /* Lichtkante oben — eine Scheibe faengt das Licht an ihrer Oberkante. Schmal und kurz: ueber die volle Breite gezogen wirkt sie wie ein Strich, nicht wie eine Spiegelung. */ .panel::after { background: linear-gradient(to bottom, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, 0) 1.2px), radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%); opacity: .9; } /* Innenschatten und Tiefe. Der Schlagschatten stand schon in .panel; hier kommt die Innenkante dazu, die dem Fenster Dicke gibt. */ .panel { box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(0, 0, 0, .18); } /* Laeuft die echte Brechung, darf die gemalte Fase zurueckhaltender sein -- sonst liegen zwei Kanten uebereinander. Die Klasse setzt js/ui/liquid-glass.js, nachdem es sich fuer zustaendig erklaert hat. */ .has-liquid-glass .panel::before { opacity: .5; } /* ---- 11. Startbild ----------------------------------------------------- Vor der ersten Suche fuellt das Adressfeld den Schirm. Danach ruecken Kopfzeile und Auswertung an ihren Platz — dieselben Elemente, nur anders angeordnet: `#address-form` gibt sein `display: contents` auf und wird zur Spalte. Es gibt bewusst KEIN zweites Eingabefeld fuer das Startbild; zwei Felder waeren zwei Zustaende, die auseinanderlaufen koennen. */ #start-lead { display: none; } body.start { justify-content: center; align-items: center; } body.start #screen-analyse, body.start #screen-detail, body.start #statusbar { display: none !important; } body.start #topbar { height: auto; flex-direction: column; align-items: stretch; width: min(760px, 100%); padding: 34px 34px 30px; gap: 20px; } body.start #brand { align-self: flex-start; margin: 0; padding: 8px 16px; } body.start #start-lead { display: block; } body.start #start-lead h1 { margin: 0 0 10px; font: 800 30px/1.15 var(--font-ui); letter-spacing: .01em; color: var(--txt); font-variant-caps: normal; text-transform: none; } body.start #start-lead p { margin: 0; max-width: 62ch; font: 700 14.5px/1.55 var(--font-ui); color: var(--txt3); font-variant-caps: normal; text-transform: none; } /* Die Kopfzeile ist eine Reihe, das Startbild eine Spalte. */ body.start #address-form { display: flex; flex-direction: column; gap: 14px; } body.start #hcell-auswahl, body.start #pdf-btn, body.start #detail-btn { display: none; } body.start #hcell-adresse { flex: none; margin: 0; padding: 14px 18px; border: 1px solid var(--hair); border-radius: 16px; background: rgba(255, 255, 255, .04); } body.start #hcell-adresse:focus-within { border-color: var(--acc); background: rgba(255, 255, 255, .05); } /* Das grosse Feld ist der Grund, warum dieses Bild existiert. */ body.start #address-input { font-size: 26px; line-height: 1.25; } body.start #analyse-btn { width: 100%; margin: 0; justify-content: center; height: 52px; } /* Die Vorschlagsliste haengt am Feld und muss die neue Breite mitnehmen. */ body.start .combo-list { font-size: 15px; } @media (max-width: 980px) { body.start #topbar { padding: 24px 20px 22px; } body.start #start-lead h1 { font-size: 23px; } body.start #address-input { font-size: 20px; } } /* ---- 12. Arealmodus ---------------------------------------------------- Der Haken sitzt in der Auswahl-Zelle und erscheint erst, wenn mehr als eine Parzelle gewaehlt ist — bei einer einzigen gaebe es nichts zusammenzufassen, und ein Schalter ohne Wirkung ist schlimmer als keiner. */ .hcell-opt { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 700 12px/1 var(--font-ui); letter-spacing: .05em; color: var(--txt3); cursor: pointer; user-select: none; font-variant-caps: small-caps; text-transform: lowercase; } .hcell-opt input { accent-color: var(--acc); width: 14px; height: 14px; margin: 0; cursor: pointer; } .hcell-opt:hover { color: var(--txt2); } #hcell-auswahl:has(#areal-opt:not([hidden])) { justify-content: center; } /* Die Einzelauswertungen als kompakte Reihe: je Parzelle eine Zeile mit den Schlagzahlen, damit «getrennt gerechnet» am Bildschirm nicht bloss eine Behauptung ist. */ #einzeln { display: none; } body.modus-einzeln #einzeln { display: block; } #einzeln .ez-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 4px 16px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--row-rule); font: 700 13px/1.3 var(--font-num); color: var(--txt2); } #einzeln .ez-row:first-child { border-top: none; } #einzeln .ez-row.is-total { color: var(--txt); border-top: 1px solid var(--hair); margin-top: 3px; } #einzeln .ez-p { color: var(--txt3); } #einzeln .ez-row.is-anchor .ez-p { color: var(--acc); } /* ---- 13. Kennzahlen je Parzelle --------------------------------------- Getrennt gerechnet ersetzt eine Zeile JE PARZELLE das Band aus fuenf Kacheln. Keine Summe: in diesem Modus sind die Parzellen eigene Baugrundstuecke, und eine addierte Gebaeudehoehe waere Unsinn. Was sich sinnvoll addieren laesst, steht in der Liste unter der Isometrie. */ #kpis.kpis-einzeln { height: auto; flex-direction: column; align-items: stretch; padding: 4px 0; } #kpis.kpis-einzeln .kpi-row { display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); gap: 0 14px; align-items: baseline; padding: 9px 16px; border-top: 1px solid var(--row-rule); } #kpis.kpis-einzeln .kpi-row:first-child { border-top: none; } #kpis.kpis-einzeln .kpi-row.is-anchor { background: color-mix(in srgb, var(--acc) 8%, transparent); } #kpis .kr-p { font: 700 13px/1.2 var(--font-ui); letter-spacing: .06em; color: var(--txt2); font-variant-caps: small-caps; text-transform: lowercase; } #kpis .kpi-row.is-anchor .kr-p { color: var(--acc); } #kpis .kr-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #kpis .kr-c i { font: 700 11px/1 var(--font-ui); letter-spacing: .08em; color: var(--lbl); font-style: normal; font-variant-caps: small-caps; text-transform: lowercase; } #kpis .kr-c b { font: 700 19px/1.15 var(--font-num); color: var(--txt); } #kpis .kr-c u { font: 700 11px/1.2 var(--font-num); color: var(--txt3); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 980px) { #kpis.kpis-einzeln .kpi-row { grid-template-columns: 1fr 1fr; } #kpis.kpis-einzeln .kr-p { grid-column: 1 / -1; } }