@import url('/static/fonts/fonts.css'); @import url('/static/tokens.css'); /* Lieferte vor dem Frontend-Wechsel Tailwinds Preflight über NiceGUI. Ohne den Reset addiert der Browser Padding und Border auf jede `width: 100%`: .card wurde dadurch 344px breit, wo .result-list 316px anbietet, und die Sidebar bekam einen horizontalen Scrollbalken. */ *, *::before, *::after { box-sizing: border-box; } /*

ist per UA-Stylesheet bold; Bungee liegt nur als 400er-Schnitt vor und wuerde synthetisch gefettet — sichtbar als ungleichmaessig verdickte Glyphen unter dem 3px-Stroke. */ .font-3d-bungee { font-family: 'Bungee', cursive; font-weight: 400; color: var(--title); -webkit-text-stroke: 3px var(--c); paint-order: stroke fill; text-shadow: 1px 1px 0 var(--c), 2px 2px 0 var(--c), 3px 3px 0 var(--c), 4px 4px 0 var(--c), 5px 5px 0 var(--c), 6px 6px 0 var(--c); text-transform: uppercase; font-size: 1em; letter-spacing: 3px; line-height: 1; margin: 0; } /* Die Schriftgroesse hier steuert den ganzen Block: der Titel erbt sie per font-size:1em, das Radio haengt mit height:1.3em daran. Eine Stelle statt zwei, sonst laufen Schrift und Bild beim Skalieren auseinander. Titel plus Radio brauchen rund das 14-fache der Schriftgröße an Breite; die calc-Stufe lässt genau so viel übrig, dass die 284px Badges daneben passen. Ab 1196px steht der Titel auf vollen 3.5rem, darunter skaliert er, statt wie vorher rechts aus dem Viewport zu laufen. */ .header-deco { display: inline-flex; align-items: flex-end; gap: 0.6em; margin: 0; padding: 0; font-size: clamp(1.5rem, calc((100vw - 356px) / 15), 3.5rem); min-width: 0; } .header-deco h1 { margin: 0; padding: 0; } .header-deco img { height: 1.3em; width: auto; flex-shrink: 0; } html, body { height: 100%; margin: 0; } /* Vollbild-Flex-Kontext, den früher Tailwinds w-full/h-screen-Klassen am ui.column() lieferten (der selbst schon eine Flex-Column war). Ohne das wächst die Sidebar über alle Cards, #map bleibt 0px hoch. Der Mobile-Block weiter unten überschreibt height/overflow gezielt. */ .layout-root { display: flex; flex-direction: column; height: 100vh; overflow: hidden; gap: 0 !important; } /* [hidden] steht nur im UA-Stylesheet — jede eigene display-Regel auf einem Element gewinnt dagegen unabhängig von der Spezifität (CSS-Cascade-Level, nicht Selector-Spezifität). Ohne diese Regel rendert z.B. .card trotz hidden-Attribut, weil .card selbst display:flex setzt. Generelle Regel statt Einzel-Overrides pro Selektor (.card[hidden], #empty-state[hidden], …), weil hidden im Markup an mehreren Stellen genutzt wird (.card, #back-all, .card-distance, #empty-state) und jede zukünftige Stelle sonst denselben Bug erneut einbauen kann. !important nötig, weil einzelne Regeln (z.B. .card mit display:flex) sonst wieder gewinnen würden. */ [hidden] { display: none !important; } body { background: var(--bg) !important; font-family: 'Space Mono', monospace !important; /* Quasar setzte hier bis zum Frontend-Wechsel 14px; ohne die Angabe erbt jedes Element ohne eigene font-size den Browser-Default von 16px. Heute traegt jeder Textknoten seine eigene Groesse, die Regel haelt nur die Basis fuer alles Kuenftige auf der Skala. */ font-size: var(--fs-body); color: var(--c); } /* Material Symbols */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; vertical-align: middle; /* .section-label/.legend-label setzen text-transform:uppercase und vererben es an dieses Span. Material Symbols löst die Ligatur nur für den exakten Kleinbuchstaben-Iconnamen auf ("calendar_month") — in Großschreibung ("CALENDAR_MONTH") bricht die Ligatur und der Iconname erscheint als Text. */ text-transform: none; } .material-symbols-outlined.ms-filled { font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important; } /* width/height/box-shadow halten den Select auf derselben Kante und Höhe wie die Buttons darüber. Ohne width:100% ist ein nativ gerendert wird, zeichnet WebKit es als Systemcontrol und laesst den box-shadow weg — auf iOS Safari stand das Feld deshalb ohne Schatten da, waehrend die Buttons daneben einen hatten. Der native Pfeil faellt damit weg, das Dreieck kommt als SVG nach (Farbe hart, weil eine data-URI kein var(--c) aufloest; sie entspricht --c). */ .neo-select { appearance: none; -webkit-appearance: none; /* Ohne explizite Farbe faerbt WebKit den Text des Feldes in der System-Akzentfarbe (blau). color allein reicht auf iOS nicht immer, -webkit-text-fill-color gewinnt dort gegen die UA-Regel. Im @supports-Block steht color bereits, den sieht Safari aber nicht. */ color: var(--c); -webkit-text-fill-color: var(--c); width: 100%; border: var(--border) solid var(--c); border-radius: 0; box-shadow: var(--shadow-control); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 10px center; height: 28px; padding: 0 26px 0 10px; font: 700 var(--fs-md) 'Space Mono', monospace; transition: transform 80ms, box-shadow 80ms; } /* Diagonal wie .card und .legend-reset: das Control wandert um so viel, wie der Schatten schrumpft. Runde 1 hatte es auf die rein vertikale Bewegung von .neo-btn umgestellt. */ .neo-select:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--c); } /* :active/:open statt :focus: der Fokus bleibt nach dem Klick bestehen, das Feld stand deshalb dauerhaft eingedrueckt und ohne Schatten da. Den Tastatur-Indikator liefert select:focus-visible aus tokens.css. */ .neo-select:active, .neo-select:open { transform: translate(2px, 2px); box-shadow: none; } /* Aufgeklappte Optionsliste im Projektstil. Vor dem Frontend-Wechsel war die Stadtauswahl ein Quasar-Widget, also normales HTML — Grund, Markierung und Schrift liessen sich frei setzen. Ein natives