/* ---------- Gestaltungsraster ---------------------------------------- Ein Akzent, ruhige Flächen, Zahlen in Tabellenziffern. Abstände folgen einer 4er-Skala, damit nichts „ungefähr" ausgerichtet ist. */ :root{ color-scheme:light dark; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --r-xs:4px; --r-sm:8px; --r-md:16px; --r-lg:24px; --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f7; --line:#dde3ed; --fg:#111823; --fg-2:#43506680; --dim:#5a6880; --accent:#0a63d4; --accent-fg:#ffffff; --temp:#d92d20; --dew:#0a7fc4; --rain:#1a5fbf; --prob:#4696d8; --wind:#5b46c8; --gust:#c9c2f2; --cloud:#4a5670; --ok:#0f7a4d; --warn:#9c6207; --warn-bg:#fdf3e3; --warn-line:#e9d3a8; --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18); } @media (prefers-color-scheme: dark){ :root{ --bg:#0b0f16; --surface:#141a24; --surface-2:#1b2231; --line:#273044; --fg:#e9eef7; --fg-2:#8fa0bd66; --dim:#94a3bd; --accent:#4d9dff; --accent-fg:#06101f; --temp:#ff6a58; --dew:#49b8ff; --rain:#3d86e8; --prob:#7fd0ff; --wind:#a396ff; --gust:#3b3566; --cloud:#c3cee2; --ok:#3ecf8e; --warn:#e3a94a; --warn-bg:#2a2214; --warn-line:#5a4a24; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7); } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-variant-numeric:tabular-nums; overscroll-behavior-y:contain; padding:0 env(safe-area-inset-right) calc(var(--s6) + env(safe-area-inset-bottom)) env(safe-area-inset-left); } .app{max-width:1240px;margin:0 auto;padding:0 var(--s4)} @media (min-width:600px){ .app{padding:0 var(--s5)} } /* ---------- Kopfzeile ---------- */ header{ position:sticky; top:0; z-index:10; padding:calc(var(--s3) + env(safe-area-inset-top)) 0 var(--s2); /* Deutlich durchscheinend: Man soll sehen, dass die Seite unter dem Kopf weiterläuft, statt an einer Wand zu enden. */ background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:saturate(1.8) blur(18px); -webkit-backdrop-filter:saturate(1.8) blur(18px); border-bottom:1px solid transparent; transition:border-color .2s; } header.pinned{border-bottom-color:var(--line)} .hrow{display:flex;align-items:center;gap:var(--s3)} .hplace{flex:1;min-width:0} /* Sechs Symbolknöpfe fordern 252 px und schrumpfen nicht. Bei 390 px blieben dem Ortsnamen 94 px, bei 320 px noch 24 – er verschwand hinter drei Punkten. Unterhalb von 430 px bekommt er deshalb eine eigene Zeile. */ @media (max-width:430px){ .hrow{flex-wrap:wrap} .hplace{flex:1 0 100%} .hbtns{width:100%;justify-content:space-between} } h1{margin:0;font-size:clamp(19px,4.4vw,24px);font-weight:640;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sub{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Am Telefon wären von den 98 Zeichen der Quellenangabe nur rund 120 px sichtbar – ein Fünftel. Und weil es dort kein Überfahren gibt, hilft auch der Tooltip nicht. Deshalb zwei Zeilen statt einer abgeschnittenen. */ @media (max-width:640px){ .sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;line-height:1.35} /* Die entsprechende Regel fuer .sep-meta stand frueher hier – wirkungslos: Die Basisregel von .sep-meta kommt weiter unten in der Datei und hat dieselbe Spezifitaet, setzte also „nowrap" wieder durch. Gemessen: 818 px Text in einem 523 px breiten Kasten, einzeilig abgeschnitten. Die Regel steht jetzt direkt hinter der Basisregel. */ } .hbtns{display:flex;gap:var(--s2);flex:0 0 auto} button{font:inherit;color:inherit} .iconbtn{ width:44px;height:44px;display:grid;place-items:center;cursor:pointer; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); font-size:17px;line-height:1;color:var(--fg); transition:background .15s,border-color .15s,transform .08s; } /* Gezeichnete Symbole: eine Strichstärke, keine Flächen, folgen der Textfarbe */ .iconbtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;display:block} .iconbtn:hover{border-color:var(--dim)} .iconbtn:active{transform:scale(.96);background:var(--surface-2)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)} /* ---------- Segmentierte Regler ---------- */ /* Die Regler sitzen in der Kopfzeile und bleiben dadurch über jedem Ortsblock stehen – so muss man beim zweiten und jedem weiteren Ort nicht nach oben scrollen. Die Ortsleiste selbst scrollt waagerecht, wenn sie zu lang wird. */ .controls{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);padding:var(--s2) 0 var(--s2)} /* ---------- Zeile im eingeklappten Zustand ---------- Sie erscheint nur, solange die Regler verborgen sind, und nennt den Stand: Ort, Zeitraum und wie viele Orte gespeichert sind. Ein Tipp öffnet die Regler – dieselbe Wirkung wie der Pfeil, nur auffindbar. */ .reglerzeile{display:none;width:100%;margin-top:var(--s2);padding:7px var(--s3); border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface); color:var(--dim);font-size:12.5px;text-align:left;cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reglerzeile::after{content:" · Einstellungen";color:var(--accent)} .reglerzeile:hover{border-color:var(--dim);color:var(--fg)} /* Nur dort, wo die Regler von sich aus eingeklappt starten. Auf breiten Schirmen klappt der Kopf erst beim Scrollen zu – dort weiß man, was dahinter liegt, und die Zeile fräße 34 der 68 eingesparten Bildpunkte wieder auf. */ @media (max-width:899px){ header.kompakt .reglerzeile{display:block} } #topSentinel{height:1px} #btnRegler svg{transition:transform .2s} /* Die Kopfzeile lässt sich auf jeder Breite zusammenklappen – der Pfeil ist überall sichtbar. Früher galt beides erst ab 900 px: Auf dem Telefon setzte das Programm zwar die Klasse „kompakt", es gab dort aber weder eine Regel, die sie umsetzt, noch einen Knopf, um wieder aufzuklappen. Die Regler belegten damit 178 px, bevor überhaupt Wetter zu sehen war. */ #btnRegler{display:grid} header.kompakt .controls{display:none} /* eindeutig, ohne Zwischenzustände */ header.kompakt #btnRegler svg{transform:rotate(0deg)} header:not(.kompakt) #btnRegler svg{transform:rotate(180deg)} @media (max-width:899px){ /* Auf schmalen Schirmen nähme die feste Leiste zu viel Platz: dort scrollt sie mit. */ header{position:static} } .seg{display:flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-md);overflow-x:auto;scrollbar-width:none;max-width:100%} .seg::-webkit-scrollbar{display:none} /* Läuft die Leiste über den Rand hinaus, blendet der rechte Rand weich aus – sonst sähe die abgeschnittene Schaltfläche wie ein Fehler aus. */ .seg.mehr{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)} .seg button{ flex:0 0 auto;min-height:34px;padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:transparent; color:var(--dim);font-size:13.5px;font-weight:520;cursor:pointer;white-space:nowrap; transition:background .15s,color .15s; } .seg button:hover{color:var(--fg)} .seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);font-weight:620; box-shadow:0 1px 2px rgba(16,24,40,.10)} .seg .lbl{align-self:center;padding:0 var(--s2) 0 var(--s1);color:var(--dim);font-size:11.5px; text-transform:uppercase;letter-spacing:.06em} /* Auf schmalen Schirmen ist der Platz zu kostbar für Wortmarken: Was die Leisten bedeuten, sagen die Knöpfe selbst. Für Screenreader bleibt aria-label. */ @media (max-width:640px){ .seg .lbl{display:none} } /* ---------- Ein Ort in der Leiste ---------- Name und Nebenknopf sehen aus wie eine Pille, sind aber zwei Schaltflächen: Auswählen und Behalten beziehungsweise Entfernen sind verschiedene Dinge und dürfen nicht in einem Knopf stecken. */ .ortchip{display:inline-flex;align-items:stretch;flex:0 0 auto;border-radius:var(--r-sm); background:transparent;transition:background .15s, transform .16s ease} .ortchip.aktiv{background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.10)} .ortchip .ort-name{border-radius:var(--r-sm) 0 0 9px} .ortchip:not(.aktiv):not(.neu) .ort-name{border-radius:var(--r-sm)} .ortchip.aktiv .ort-name,.ortchip.neu .ort-name{padding-right:var(--s2)} .ortchip.aktiv .ort-name[aria-pressed="true"]{background:transparent;box-shadow:none} /* Ob ein Ort gespeichert ist, sagt allein der Nebenknopf: ein Stern heißt „noch nicht behalten, hier tippen", ein Kreuz „gespeichert, hier entfernen". Ein zusätzlicher gestrichelter Rahmen wäre dieselbe Aussage ein zweites Mal – und am aktiven Chip sähe er aus wie ein Fokusring. */ .ort-weg,.ort-merken{flex:0 0 auto;min-height:34px;padding:0 8px 0 2px;border:0;background:transparent; color:var(--dim);font-size:15px;line-height:1;cursor:pointer;border-radius:0 var(--r-sm) var(--r-sm) 0; transition:color .15s} .ort-weg:hover{color:var(--temp)} .ort-merken{font-size:14px} .ort-merken:hover{color:var(--warn)} .ort-weg:focus-visible,.ort-merken:focus-visible,.ort-plus:focus-visible, .st-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* Handlung, keine Auswahl: gestrichelt und ohne gedrückt-Zustand. */ /* Während des Sortierens darf die Leiste nicht mitscrollen, sonst kämpfen Ziehen und Scrollen gegeneinander. */ .seg.sortiert{touch-action:none;cursor:grabbing} .ortchip.zieht{transition:none;z-index:2;position:relative;cursor:grabbing; box-shadow:0 6px 18px -6px rgba(16,24,40,.45)} .seg.sortiert .ortchip:not(.zieht){pointer-events:none} .seg .ort-plus{flex:0 0 auto;min-width:36px;min-height:34px;margin-left:4px;padding:0 10px; border:1px dashed var(--dim);border-radius:var(--r-sm);background:transparent;color:var(--dim); font-size:17px;line-height:1;cursor:pointer;transition:color .15s,border-color .15s} .seg .ort-plus:hover{color:var(--accent);border-color:var(--accent)} /* ---------- Stufenschalter ---------- */ .stepper{display:inline-flex;align-items:center;flex:0 0 auto;gap:0; border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden} .st-knopf{min-width:30px;min-height:34px;padding:0;border:0;background:transparent; color:var(--fg);font-size:15px;line-height:1;cursor:pointer} .st-knopf:hover:not(:disabled){background:var(--surface)} .st-knopf:disabled{color:var(--fg-2);cursor:default} /* Breiter, seit dort „1 von 2 Orten" statt „1 Ort" steht. */ .st-wert{padding:0 var(--s2);color:var(--fg);font-size:13px;font-weight:560;white-space:nowrap; min-width:92px;text-align:center} /* Am Finger bedient: die kleinen Nebenknöpfe brauchen mehr Fläche als am Zeiger. Unter 44 px trifft man Stern, Kreuz und Plus sonst nur mit Glück. */ @media (pointer:coarse){ .seg button,.ort-weg,.ort-merken,.seg .ort-plus,.st-knopf{min-height:40px} .ort-weg,.ort-merken{padding-right:12px;padding-left:4px} .seg .ort-plus{min-width:44px} .st-knopf{min-width:38px} } /* ---------- Karten ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--shadow)} .grid{display:grid;gap:var(--s4);align-items:start} /* Rasterkinder haben von sich aus min-width:auto und können damit nicht unter ihre Inhaltsbreite schrumpfen. Eine einzige lange Zeile – etwa die Quellen- angabe – drückt dann das ganze Raster über den Bildschirmrand hinaus. */ .grid > *{min-width:0} /* Schmale Schirme: je Block erst die aktuelle Lage, dann das Diagramm, dann die übrigen Karten. Der Behälter „rail" löst sich dazu auf (display:contents), damit seine Karten unmittelbar im Raster liegen. Welchem Block ein Element gehört, steht in --b; app.js setzt die Zahl beim Erzeugen des Blocks. So bleiben die Blöcke auch bei fünf Orten sauber getrennt. */ @media (max-width:1023px){ .rail{display:contents} .place-sep {order:calc(var(--b,1) * 10)} .alerts {order:calc(var(--b,1) * 10 + 1)} .nowcard {order:calc(var(--b,1) * 10 + 2)} .chartcard {order:calc(var(--b,1) * 10 + 3)} .dayscard {order:calc(var(--b,1) * 10 + 4)} .stationcard {order:calc(var(--b,1) * 10 + 5)} } /* Ab Tablet quer: Diagramm links, Kartenspalte rechts. Die Kartenspalte bestimmt ihre Höhe aus ihrem Inhalt; das Diagramm nimmt die Höhe der Zeile mit, damit beide Spalten unten bündig abschließen. Eine Rückkopplung entsteht dabei nicht: die Höhe der Karten hängt nicht vom Diagramm ab, und das Diagramm hat unabhängig davon eine Mindesthöhe. */ @media (min-width:1024px){ /* Eine Zahl für beide Raster: Die Kartenspalte unten und die Wertespalte in der Lagekarte müssen dieselbe Kante haben, sonst steht der senkrechte Trennstrich neben der Kante der Karte darunter. */ :root{--spalte-rechts:360px} .grid{grid-template-columns:minmax(0,1fr) var(--spalte-rechts);align-items:start} .rail{display:flex;flex-direction:column;gap:var(--s4);min-width:0} .chartcard{grid-column:1;align-self:stretch} /* Seit die Lagekarte darüber steht, ist oben bereits Höhe verbraucht – das Diagramm darf entsprechend flacher beginnen, sonst endet die Kartenspalte daneben lange vor ihm. Zwei Selektoren, damit diese Regel die weiter unten stehende Grundregel schlägt: Ein Media-Block erhöht die Spezifität nicht. */ .chartcard .chartwrap{height:auto;flex:1 1 auto;min-height:clamp(340px, 40vh, 540px)} .rail{grid-column:2} .nowcard, .dayscard, .stationcard{padding:var(--s4) var(--s5)} .vals div{font-size:14px} } @media (min-width:1440px){ :root{--spalte-rechts:400px} .grid{grid-template-columns:minmax(0,1fr) var(--spalte-rechts)} .nowcard .temp-gross{font-size:52px} .nowcard .sym-gross{font-size:58px} .vals div{font-size:14.5px;padding:7px 0} .day{font-size:14px;padding:8px 0} } /* Aktuelle Lage – gilt für beide Orte, deshalb keine reinen ID-Selektoren mehr */ .nowcard{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)} .nowcard[hidden]{display:none} .nowhead{display:flex;align-items:center;gap:var(--s4)} .nowcard .sym-gross{font-size:clamp(40px,9vw,54px);line-height:1;flex:0 0 auto} .nowcard .temp-gross{font-size:clamp(36px,8vw,46px);font-weight:680;letter-spacing:-.03em; line-height:1.05} .nowcard .lage-text{color:var(--dim);font-size:13.5px;margin-top:2px} /* Der Kleidungshinweis steht unter der Wetterlage – etwas kräftiger gesetzt, weil er die Frage beantwortet, wegen der die meisten überhaupt nachsehen. */ .kleidung{margin-top:6px;font-size:13.5px;font-weight:560;color:var(--fg); line-height:1.35;cursor:default;display:flex;flex-direction:column;gap:1px} /* Schirm und Wind stehen in der zweiten Zeile – sie ergänzen die Kleidung, ersetzen sie nicht. */ .kleidung .kl-zusatz{font-weight:520} .kleidung[hidden]{display:none} .kleidung:focus-visible{outline:2px solid var(--accent);outline-offset:3px; border-radius:var(--r-xs)} /* ---------- Biowetter ---------- Zeile A sitzt unter dem Kleidungshinweis, bewusst leiser gesetzt: Sie ist eine Zusatzinformation, keine Warnung. Karte B klappt darunter ueber die volle Kartenbreite auf – in der schmalen Textspalte neben dem Symbol haette die Tabelle am Telefon keinen Platz. */ .bio{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:6px;margin-top:2px;padding:3px 0;min-height:24px; font-size:13px;line-height:1.35;color:var(--dim);cursor:pointer;border-radius:var(--r-xs)} .bio[hidden],.bio-karte[hidden]{display:none} /* Die Zeile fuellt ihre Spalte, bestimmt aber nicht mit, wie breit die Spalte wird. Ohne das zog der lange Satz auf dem Desktop die erste Rasterspalte von 345 auf 751 px auf, und das Regenradar daneben schrumpfte von 415 auf 17 px (gemessen bei 1440 px). Zuerst stand hier "width:0;min-width:100%". Das ist ein Zirkel – die Prozentangabe haengt von der Breite des Elternteils ab, die vom Inhalt abhaengt – und Safari springt bei so etwas beim Scrollen zwischen zwei Layouts hin und her. "contain:inline-size" sagt dasselbe ohne Zirkel: Die Eigenbreite der Zeile zaehlt nicht, sie dehnt sich einfach auf die Spalte. Dazu "width:100%": Ohne Angabe blieb die Zeile in Chromium 0 px breit, weil ein Element mit inline-size-Containment nicht mehr von selbst die Blockbreite annimmt. Das Prozent ist hier unbedenklich, denn dank Containment traegt die Zeile nichts mehr zur Breite des Elternteils bei – der Zirkel ist aufgeloest. */ .bio{contain:inline-size;width:100%} .nowhead > div:last-child{flex:1 1 auto;min-width:0} .bio:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .bio-text{min-width:0} .bio-pfeil::after{content:"›";display:inline-block;font-weight:600;transition:transform .15s} .bio[aria-expanded="true"] .bio-pfeil::after{transform:rotate(90deg)} .bio-punkt{display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:50%; margin-right:5px;vertical-align:0;box-sizing:border-box} .bio .bio-punkt{margin-right:0;transform:translateY(-1px)} .bio-punkt.r0{background:var(--ok)} .bio-punkt.r1{border:1.5px solid var(--dim)} .bio-punkt.r2{background:var(--warn)} .bio-punkt.r3{background:var(--temp)} .bio-karte{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)} .bio-tab{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px} .bio-tab th,.bio-tab td{padding:4px 0;border-bottom:1px solid var(--line);text-align:left; font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bio-tab thead th{color:var(--dim);font-size:12px;font-weight:560;white-space:normal;line-height:1.25;vertical-align:bottom} .bio-tab thead th:first-child{width:31%} .bio-tab tbody th{color:var(--dim);padding-right:var(--s2);white-space:normal;line-height:1.3} .bio-empf,.bio-legende,.bio-quelle{margin:var(--s2) 0 0;font-size:12px;line-height:1.5;color:var(--dim)} .bio-empf b{font-weight:560;color:var(--fg)} .bio-legende{display:flex;flex-wrap:wrap;gap:2px var(--s3)} .bio-quelle a{color:inherit} /* Nur fuer Vorleseprogramme sichtbar */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Wertepaare – gleiche Sprache in „Jetzt" und in der Stationskarte */ .vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 var(--s4)} .vals div{display:flex;justify-content:space-between;gap:var(--s2);font-size:13.5px; padding:6px 0;border-bottom:1px solid var(--line)} /* Alles, was eine Erklärung trägt, verhält sich gleich: Zeiger, Hervorhebung, Fokus */ .vals div[data-hilfe]{cursor:pointer;border-radius:var(--r-xs);margin:0 -6px;padding-left:6px; padding-right:6px;transition:background .15s} .vals div[data-hilfe]:hover, .vals div[data-hilfe]:focus-visible{background:var(--surface-2)} .vals span{color:var(--dim)} .vals b{font-weight:600;white-space:nowrap} /* Warnhinweis */ #warn{display:none;margin-bottom:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-md); background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--fg);font-size:13.5px} /* Diagramm */ .chartcard{overflow:hidden;padding:0;display:flex;flex-direction:column} .chartwrap{position:relative;overflow:hidden; height:clamp(430px, 64vh, 880px)} .scroller:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* „pan-x pan-y" statt „pan-x": Mit „pan-x" allein war senkrechtes Wischen auf dem Diagramm nicht etwa an die Seite weitergereicht, sondern unterbunden – wer den Finger auf dem Diagramm aufsetzte und nach oben wischte, bewegte gar nichts. Mit beiden Achsen nimmt der Block die Waagerechte, die Seite bekommt die Senkrechte. Das Spreizen bleibt trotzdem dem Diagramm vorbehalten: Es waere nur mit „pinch-zoom" in der Liste erlaubt, und das steht dort nicht. */ .scroller{touch-action:pan-x pan-y;position:absolute;inset:0 0 0 56px;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:thin;overscroll-behavior-x:contain} .axis{position:absolute;left:0;top:0;width:56px;height:100%;z-index:2;background:var(--surface); border-right:1px solid var(--line);pointer-events:none} /* Unsichtbare Trefferflächen über der Achsenspalte für Erklärungen */ .axis-hit{position:absolute;left:0;width:56px;z-index:3;cursor:pointer;background:transparent; border-radius:var(--r-xs);transition:background .15s} .axis-hit:hover, .axis-hit:focus-visible{background:color-mix(in srgb, var(--accent) 12%, transparent)} canvas{display:block} /* Die Zeichenfläche ist nur so breit wie das Sichtfenster und bleibt beim Scrollen stehen; die Breite des Zeitraums trägt der Platzhalter darunter. So bleibt die Auflösung auch bei sieben Tagen voll erhalten. */ .cspan{position:relative;height:100%} .cspan > canvas{position:sticky;left:0;top:0} .legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4); border-top:1px solid var(--line);color:var(--dim);font-size:12px;flex:0 0 auto} .lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .lg[data-key]{cursor:pointer;border-radius:var(--r-xs);padding:6px 8px;margin:-4px -4px; min-height:28px;transition:background .15s,color .15s} .lg[data-key]:hover, .lg[data-key]:focus-visible{background:var(--surface-2);color:var(--fg)} .hint-line{white-space:normal;color:var(--dim);font-style:italic} .hint-line:empty{display:none} .sw{width:16px;height:3px;border-radius:var(--r-xs);flex:0 0 auto} .sw-temp{background:var(--temp)} .sw-dew{background:var(--dew)} .sw-spanne{background:color-mix(in srgb, var(--temp) 30%, transparent);border-radius:var(--r-xs)} .sw-rain{background:var(--rain)} .sw-prob{background:var(--prob)} .sw-cloud{background:var(--cloud)} .sw-wind{background:var(--wind)} /* Stationsmesswerte */ .stationcard{padding:var(--s4)} .stationcard[hidden]{display:none} .stationcard h2, .dayscard h2{ margin:0;font-size:15px;line-height:1.35;font-weight:660;letter-spacing:-.01em} .dayscard h2 small{font-size:12px;color:var(--dim);font-weight:450;letter-spacing:0} .st-meta{margin:2px 0 var(--s3);color:var(--dim);font-size:11.5px;line-height:1.5} .stationcard>time{display:block;margin-top:var(--s3);color:var(--dim); font-size:11.5px;line-height:1.6} .stationcard>time sup{color:var(--dim)} .vals sup{font-size:9px;vertical-align:super;margin-left:2px;color:var(--dim)} /* Tagesübersicht */ .dayscard{padding:var(--s4)} .dayscard[hidden]{display:none} .days{display:flex;flex-direction:column} .days-scale{display:grid;grid-template-columns:3.4em 1.7em 2.5em 1fr 2.5em;align-items:center; gap:var(--s2);margin-bottom:var(--s2);color:var(--dim);font-size:11px} .days-scale span:nth-child(1){grid-column:3;text-align:right} .days-scale span:nth-child(2){grid-column:4;text-align:center;letter-spacing:.02em} .days-scale span:nth-child(3){grid-column:5} .day{display:grid;grid-template-columns:3.4em 1.7em 2.5em 1fr 2.5em auto;align-items:center; gap:var(--s2);padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px} .day:last-child{border-bottom:0} .day[role="button"]{cursor:pointer;border-radius:var(--r-sm);transition:background .15s} .day[role="button"]:hover, .day[role="button"]:focus-visible{background:var(--surface-2)} .day .wd{color:var(--dim)} /* Das Sinnbild des Tages – dieselbe Zeichnung wie in der Symbolreihe des Diagramms, nur kleiner. Es beantwortet die Frage „wie wird der Tag?" schneller als jede Zahl. Für Vorleseprogramme steht die Wetterlage im Erklärtext der Zeile, das SVG selbst ist aria-hidden. */ .day .dsym{display:flex;justify-content:center;color:var(--dim)} .day .dsym .wsym{width:19px;height:19px} .day .lo{color:var(--dim);text-align:right;font-variant-numeric:tabular-nums} .day .hi{font-weight:640;font-variant-numeric:tabular-nums} .day .bar{position:relative;overflow:visible;height:7px;border-radius:var(--r-xs); background:var(--surface-2);min-width:48px} .day .bar > i{position:absolute;top:0;bottom:0;border-radius:var(--r-xs); background:linear-gradient(90deg,var(--dew),var(--temp))} .day .rain{color:var(--rain);font-size:12.5px;text-align:right;min-width:5.4em;white-space:nowrap} .day .rain.dry{color:var(--dim)} /* Unter 360 px passte eine Tageszeile nicht mehr in die Karte (gemessen bei 320 px: Seite 342 px breit, seitlich verschiebbar). */ @media (max-width:359px){ .day{gap:var(--s1);grid-template-columns:3em 1.5em 2.3em 1fr 2.3em auto} .day .bar{min-width:24px} .day .rain{min-width:4em} } /* Fußzeile über die volle Breite der Karten, in Spalten umbrechend */ footer{margin-top:var(--s5);padding:var(--s4) 0 0;border-top:1px solid var(--line); color:var(--dim);font-size:clamp(11px,1.05vw,12.5px);line-height:1.6; display:grid;gap:var(--s2) var(--s5); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} footer a{color:var(--dim)} footer b{color:var(--fg);font-weight:600} .foot-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:flex-start} @media (max-width:599px){ footer{grid-template-columns:1fr;gap:var(--s2)} } /* ---------- Nachfrage vor der Standortbestimmung ---------- Vorher lag das als blasse Karte zwischen den anderen: über die volle Breite gezogen, die Knöpfe eng am linken Rand, der Fußtext an der Kante – es sah aus wie eine Randnotiz und nicht wie eine Frage, die eine Antwort braucht. Jetzt derselbe Aufbau wie das Suchblatt: abgedunkelter Grund, eine ruhige Karte in der Mitte, begrenzte Zeilenbreite. Auf dem Telefon kommt sie von unten, am Rechner steht sie mittig. */ #ortfrage{position:fixed;inset:0;z-index:25;overscroll-behavior:contain;display:flex;align-items:flex-end;justify-content:center; background:rgba(8,12,20,.45);backdrop-filter:blur(3px)} #ortfrage[hidden]{display:none} .ortfrage-box{width:100%;max-width:460px;background:var(--surface); border:1px solid var(--line);box-shadow:var(--shadow); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); max-height:86vh;overflow:auto} @media (min-width:600px){ #ortfrage{align-items:center} .ortfrage-box{border-radius:var(--r-lg);padding-bottom:var(--s5)} } .ortfrage-titel{margin:0 0 var(--s3);font-size:17px;font-weight:640;letter-spacing:-.01em;color:var(--fg)} .ortfrage-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--dim)} /* Gleich breite Schaltflächen: Abbrechen darf nicht kleiner wirken als Zustimmen. Untereinander erst, wenn es nebeneinander zu eng würde. */ .ortfrage-knoepfe{display:flex;gap:var(--s3);margin:var(--s4) 0 0; padding-top:var(--s4);border-top:1px solid var(--line)} .ortfrage-knoepfe button{flex:1 1 0;min-width:0;min-height:46px;padding:0 var(--s3); border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2); color:var(--fg);font:inherit;font-size:14px;font-weight:600;cursor:pointer} .ortfrage-knoepfe button:hover{border-color:var(--dim)} /* Der bestätigende Knopf gefüllt und rechts – genau so sieht die Abfrage aus, die der Browser unmittelbar danach zeigt („Blockieren" links, „Erlauben" rechts gefüllt). Zwei aufeinanderfolgende Fenster sollen nicht verschieden aussprechen, was dasselbe bedeutet. Beide Schaltflächen bleiben gleich groß; Abbrechen ist nicht schwerer zu treffen. */ #ortfrageJa{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)} #ortfrageJa:hover{filter:brightness(1.08)} .ortfrage-knoepfe button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (max-width:399px){ .ortfrage-knoepfe{flex-direction:column} } .ortfrage-fuss{margin:var(--s3) 0 0;color:var(--dim);font-size:12px;line-height:1.5} /* Nicht unterstrichen – aber auch nicht allein an der Farbe erkennbar. Gemessen betrug der Helligkeitsunterschied zwischen dem Blau des Verweises und dem Grau des Fließtextes nur 1,01:1: Beide sind fast gleich hell, sie unterscheiden sich praktisch nur im Farbton. Wer Farben schlecht trennt, sähe den Verweis nicht. Deshalb zusätzlich halbfett – ein Merkmal, das keine Farbe ist (WCAG 1.4.1) – und beim Überfahren oder Tastaturfokus zusätzlich eine Unterstreichung. */ .ortfrage-fuss a{color:var(--accent);font-weight:640;text-decoration:none} .ortfrage-fuss a:hover, .ortfrage-fuss a:focus-visible{text-decoration:underline} /* ---------- Ortssuche ---------- */ /* Gesperrter Grund, solange ein Fenster darüber liegt – gesetzt von dialogSperre() in app.js. Der Innenabstand ersetzt die Breite der verschwindenden Bildlaufleiste, damit die Seite nicht seitlich springt. */ html.dialog-offen{overflow:hidden;padding-right:var(--leiste,0px)} #sheet{position:fixed;inset:0;z-index:20;overscroll-behavior:contain;display:none;align-items:flex-end;justify-content:center; background:rgba(8,12,20,.45);backdrop-filter:blur(3px)} #sheet.on{display:flex} #sheetBox{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom)); max-height:82vh;overflow:auto;box-shadow:var(--shadow)} @media (min-width:600px){ #sheet{align-items:center} #sheetBox{border-radius:var(--r-lg);padding-bottom:var(--s4)} } #q{width:100%;min-height:48px;padding:0 var(--s3);border-radius:var(--r-sm);border:1px solid var(--line); background:var(--surface-2);color:var(--fg);font-size:16px} #q:focus{outline:2px solid var(--accent);outline-offset:1px} .hint{color:var(--dim);font-size:12px;padding:var(--s2) 2px 0} .res{display:flex;justify-content:space-between;align-items:center;gap:var(--s3); min-height:52px;padding:var(--s2) 2px;border-bottom:1px solid var(--line);cursor:pointer} .res:hover{color:var(--accent)} .sheet-foot{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)} .linkbtn{min-height:44px;width:100%;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--surface-2);color:var(--fg);font:inherit;font-weight:560;cursor:pointer} .linkbtn:hover{border-color:var(--dim)} #linkOut{width:100%;margin-top:var(--s2);padding:10px;border-radius:var(--r-sm); border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font-size:13px} .res small{color:var(--dim)} #toast{position:fixed;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none; bottom:calc(var(--s5) + env(safe-area-inset-bottom));background:#0e1626ee;color:#fff; padding:10px 18px;border-radius:999px;font-size:13.5px;opacity:0;transition:opacity .25s} #toast.on{opacity:1} #toast.lang{max-width:min(560px, calc(100vw - 2*var(--s4)));white-space:normal;text-align:left; border-radius:var(--r-md);line-height:1.5;padding:var(--s3) var(--s4)} #toast .undo{margin-left:var(--s2);background:none;border:0;color:var(--accent); font:inherit;font-weight:600;cursor:pointer;text-decoration:underline} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ---------- Druckansicht ---------- Bisher gab es keine: Auf Papier landeten die feststehende Kopfzeile, die Regler, dunkle Flächen und abgeschnittene Schatten. Gedruckt gehören die Werte, nicht die Bedienung. Das Diagramm gibt naturgemäß nur den sichtbaren Ausschnitt wieder – für das ganze Bild gibt es die Schaltfläche „Als Bild sichern". */ @media print{ :root{color-scheme:light} body{background:#fff;color:#000} header{position:static;background:none;backdrop-filter:none;border:0} /* Bedienelemente gehören nicht aufs Papier – die Legende dagegen schon: Sie erklärt, was die Kurven bedeuten, und ist Information, keine Steuerung. In der ersten Fassung hatte ich sie versehentlich mit ausgeblendet. */ .controls,.hbtns,.reglerzeile,#toast,#sheet,#ortfrage,#btnRegler{display:none!important} .card,.chartcard,.nowcard,.dayscard,.stationcard{background:#fff;border:1px solid #999; box-shadow:none;break-inside:avoid;page-break-inside:avoid} .place-sep{break-after:avoid;page-break-after:avoid} main.grid{display:block} .rail{display:block} /* Die Positionierung des Diagramms bleibt unangetastet: Achse und Zeichen- fläche liegen absolut übereinander, und die Zeichenflächen sind auf den sichtbaren Ausschnitt bemessen. Auf „static" umgestellt, rutschte die Achse über das Diagramm statt daneben. Gedruckt wird also der Ausschnitt, der auch am Bildschirm zu sehen ist. (Hier stand einmal, das ganze Bild bekomme man über „Als Bild sichern" – das stimmt nicht: Diese Schaltfläche kopiert dieselbe Zeichenfläche und damit denselben Ausschnitt. Wer mehr sehen will, wählt einen kürzeren Zeitraum oder zoomt heraus.) */ } /* ---------- Rechtsseite ---------- */ .prose{max-width:75ch;padding-bottom:var(--s6)} .prose .card{padding:var(--s5);margin-bottom:var(--s4)} .prose h2{margin:0 0 var(--s4);font-size:clamp(18px,3.4vw,22px);font-weight:640;letter-spacing:-.02em} .prose h3{margin:var(--s5) 0 var(--s2);font-size:15px;font-weight:620} .prose h3:first-of-type{margin-top:var(--s4)} .prose p{margin:0 0 var(--s3);font-size:14.5px;line-height:1.65;color:var(--fg)} .prose ul{margin:0 0 var(--s3);padding-left:1.2em} .prose li{font-size:14.5px;line-height:1.65;margin-bottom:var(--s2)} .prose a{color:var(--accent)} .prose .adr{padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);line-height:1.7} /* ---------- Quellenliste auf der Rechtsseite ---------- Begriff links, Beschreibung rechts: Wer eine bestimmte Quelle sucht, findet sie an der Kante, ohne den Fließtext zu lesen. Auf schmalen Schirmen kippt das Paar untereinander, sonst bliebe für die Beschreibung zu wenig übrig. */ .quellen{margin:var(--s4) 0 var(--s4)} .quellen > div{display:grid;grid-template-columns:12em 1fr;gap:2px var(--s4); padding:var(--s3) 0;border-top:1px solid var(--line)} .quellen > div:first-child{border-top:0;padding-top:0} .quellen dt{grid-column:1;color:var(--fg);font-weight:620;line-height:1.4} .quellen dt a{display:block;font-weight:450;font-size:.92em} .quellen dd{grid-column:2;margin:0} .quellen .q-lizenz{color:var(--dim);font-size:.92em;margin-top:2px} @media (max-width:599px){ .quellen > div{grid-template-columns:1fr;gap:var(--s1)} .quellen dt, .quellen dd{grid-column:1} .quellen dt a{display:inline-block;margin-right:var(--s2)} } .prose .note{color:var(--dim);font-size:12.5px;display:flex;flex-wrap:wrap;gap:var(--s3); justify-content:space-between} a.iconbtn{text-decoration:none} .legalnav{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 0 var(--s4)} .legalnav a{min-height:38px;display:inline-flex;align-items:center;padding:0 var(--s3); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm); color:var(--dim);font-size:13.5px;text-decoration:none} .legalnav a:hover{color:var(--fg);border-color:var(--dim)} .prose .src{color:var(--dim);font-size:12.5px} .prose section{scroll-margin-top:96px} /* ---------- Amtliche Warnungen ---------- */ .alerts{display:grid;gap:var(--s2);margin-bottom:var(--s4)} .alerts:empty{display:none} /* Die Stufen sev-minor bis sev-extreme werden zur Laufzeit als "sev-" + severity zusammengesetzt. Sie sehen für jede statische Prüfung ungenutzt aus – sie sind es nicht. */ .alert{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md); border:1px solid var(--warn-line);background:var(--warn-bg);font-size:13.5px;line-height:1.5} .alert .ic{flex:0 0 auto;display:flex;align-items:center;color:var(--warn)} .alert .ic .wsym{width:20px;height:20px} .alert b{display:block;font-size:14px;margin-bottom:2px} .alert small{display:block;color:var(--dim);margin-top:var(--s1)} .alert.sev-severe{border-color:#e0703a;background:color-mix(in srgb,#e0703a 12%,transparent)} .alert.sev-extreme{border-color:#d92d20;background:color-mix(in srgb,#d92d20 14%,transparent)} /* Auf der roetlichen Flaeche reicht --dim im Hellmodus nicht (4,2:1). */ .alert.sev-severe small, .alert.sev-extreme small{color:var(--fg)} /* ---------- Detailkarte zur angetippten Stunde ---------- */ .detail{border-top:1px solid var(--line);padding:var(--s3) var(--s4)} .detail[hidden], .alerts[hidden]{display:none} .dt-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)} .dt-head .sym{font-size:26px} .dt-head .when{font-weight:640;font-size:14.5px} .dt-head .tmp{margin-left:auto;font-size:22px;font-weight:680;letter-spacing:-.02em} .dt-close{margin-left:var(--s2);width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line); background:var(--surface);cursor:pointer;font-size:14px;line-height:1} /* Enger gesetzt, seit die Karte dauerhaft mitläuft: Sie soll unter dem Diagramm eine Zeile Information sein, keine zweite Tafel. */ /* Die Spalten waren mit 104 px zu schmal: Das breiteste Paar („Bewölkung gesamt 37 %") braucht gemessen 151 px. Beschriftungen brachen deshalb innerhalb der Zelle um – und weil ein Wert mit einer Stelle mehr („7 %" zu „57 %") den Umbruch auslöste, wechselte die Karte beim Überfahren zwischen 288 und 306 px Höhe. Alles darunter zitterte im Takt der Maus mit. Jetzt sind die Spalten breit genug, und nowrap schließt aus, dass eine Zeilenhöhe überhaupt noch vom Inhalt abhängen kann. */ .dt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:0 var(--s3)} .dt-grid div{display:flex;justify-content:space-between;gap:var(--s2);font-size:12.5px;padding:3px 0; border-bottom:1px solid var(--line);white-space:nowrap} .dt-grid span{color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis} .dt-grid b{font-weight:600;flex:0 0 auto} /* Die Herkunftszeile gehoert ans Ende, rechts. Ohne diese Regel bestimmt die Spaltenzahl, wo sie landet: bei 2 und 4 Spalten rechts unten, bei 3 Spalten allein links (gemessen bei 390, 430, 768, 1024 und 1440 px Fensterbreite). Fest an die letzte Spalte geheftet sitzt sie ueberall gleich. */ .dt-grid div:last-child{grid-column:-2 / -1} /* Über die ganze Breite der Karte – ohne Kappung. */ .dt-note{margin:var(--s3) 0 0;color:var(--dim);font-size:12px;line-height:1.55} /* ---------- Zweiter Ort ---------- */ .chartcard[hidden]{display:none} /* Mehrere Orte: jeder Block bekommt eine Trennzeile mit dem Ortsnamen. Aufbau darunter identisch zum ersten Block. */ .place-sep{display:flex;align-items:center;gap:var(--s4);min-width:0} .place-sep[hidden]{display:none} .sep-text{min-width:0} .place-sep h2{margin:0;font-size:19px;line-height:1.3;font-weight:680;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sep-meta{margin:1px 0 0;color:var(--dim);font-size:12.5px;line-height:1.4; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Auf schmalen Schirmen zwei Zeilen statt einer abgeschnittenen: Dort gibt es kein Ueberfahren, der Tooltip hilft also nicht weiter. */ @media (max-width:640px){ .sep-meta{white-space:normal;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical} } .sep-meta b{color:var(--ok);font-weight:600} .place-sep::after{content:"";flex:1;height:1px;background:var(--line);align-self:center} /* Jede Trennzeile ausser der obersten braucht Luft zum Block darueber. Vorher stand hier "#sep2" – gemessen bekam die dritte Trennzeile dadurch 0 statt 24 px, ab drei Orten klebte der dritte Block am zweiten. Die Zahl der Bloecke ist nur durch die Zahl gespeicherter Orte begrenzt. */ .place-sep:not(#sep1){margin-top:var(--s5)} .rail[hidden]{display:none} /* ---------- Kartenspalte ohne Kästen ---------- Drei Rahmen, drei Hintergründe und drei Radien für drei Textblöcke sind zwei Auszeichnungen zu viel. Getrennt wird über Abstand und Schriftgewicht; nur das Diagramm behält seine Fläche, weil eine Zeichenfläche einen Grund braucht. */ @media (min-width:1024px){ .rail{gap:var(--s5)} .nowcard,.dayscard,.stationcard{background:transparent;border:0;border-radius:0; box-shadow:none;padding:0 0 0 var(--s2)} /* Die Lagekarte beantwortet die erste Frage und steht deshalb über der ganzen Breite, noch vor dem Diagramm: Zahl links, Regenradar in der Mitte, die übrigen Werte rechts. */ .nowcard{grid-column:1 / -1;display:grid;align-items:center;gap:var(--s4); /* Letzte Spalte und Spaltenabstand wie im Raster darunter – dadurch fällt der Trennstrich vor den Werten genau auf die linke Kante der Kartenspalte. Die Null-Untergrenzen lassen die Karte schrumpfen, statt die Seite über den Rand zu schieben. */ grid-template-columns:minmax(0,auto) minmax(0,1fr) var(--spalte-rechts); border-left:0;padding:var(--s2) 0 var(--s4)} .nowcard .nowhead{margin:0} .nowcard .radar{border-top:0;margin-top:0;padding-top:0; border-left:1px solid var(--line);padding-left:var(--s4)} .nowcard .vals{border-left:1px solid var(--line);padding-left:var(--s4)} .dayscard,.stationcard{border-left:1px solid var(--line);padding-left:var(--s4)} /* Die Biowetter-Karte steht hier in eigener Zeile unter allen drei Spalten. Ohne diese Regel wurde sie zum zweiten Rasterelement: 9 px breit (gemessen bei 1440 px), und Radar und Werte rutschten eine Zelle weiter. */ .nowcard .bio-karte{grid-column:1 / -1;order:5;max-width:44rem} .dayscard h2,.stationcard h2{font-size:12px;font-weight:640;letter-spacing:.08em; text-transform:uppercase;color:var(--dim)} } /* Beim Ortswechsel blendet das Diagramm kurz ab, statt hart umzuspringen – so bleibt erkennbar, dass derselbe Zeitraum, nur ein anderer Ort gemeint ist. */ /* ---------- Wettersinnbilder im Dokument ---------- Einfarbig, gestrichen, dieselbe Strichstärke wie die Symbole im Kopf. Die Farbe kommt vom umgebenden Text, damit sie sich in jede Umgebung einfügen. */ .wsym{width:1.5em;height:1.5em;display:block;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .wsym.gross{width:1em;height:1em} .dt-head .sym .wsym{width:24px;height:24px;color:var(--dim)} .wsym.mini{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:3px; stroke-width:2} /* Ebene für die Marke: liegt über dem Diagramm, nimmt aber keine Zeiger an, damit Klicks und Ziehen weiterhin die Zeichenfläche darunter erreichen. */ .marke{position:absolute;top:0;pointer-events:none;z-index:3} /* Zeigt die Karte die laufende Stunde, ist sie ruhiger gesetzt als eine festgehaltene Auswahl. */ .detail.laufend{opacity:.85} .chartwrap{transition:opacity .18s ease} .chartcard.laedt .chartwrap{opacity:.3} /* ---------- Zustand beim Start ---------- Zwischen dem ersten Bild und den fertigen Daten stand die Seite mit leeren Kaesten da: ein Punkt als Sinnbild, ein Gedankenstrich als Temperatur und eine grosse leere Flaeche. Das las sich wie ein Fehler. Die Klasse steht schon im HTML, gilt also ab dem allerersten Bild, und wird entfernt, sobald Daten vorliegen – oder wenn eine Fehlermeldung erscheint. */ .js.startet #nowSym, .js.startet #nowTemp{visibility:hidden} .js.startet .chartwrap::after{ content:"Wetterdaten werden geladen …"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:13.5px; } /* ---------- Regenradar der nächsten zwei Stunden ---------- Fünfundzwanzig Balken, einer je Fünf-Minuten-Schritt. Der kräftige Teil ist Regen genau über dem Ort, der blasse dahinter Regen im Umkreis von zwei Kilometern – so sieht man auch, wenn ein Schauer knapp vorbeizieht. */ .radar{border-top:1px solid var(--line);margin-top:var(--s3);padding-top:var(--s3); display:flex;flex-direction:column;gap:6px} .radar[hidden]{display:none} .radar-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)} .radar-kopf b{font-size:14px;font-weight:620;letter-spacing:-.01em} .radar.regnet .radar-kopf b{color:var(--rain)} .radar-marke{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em; white-space:nowrap} .radar-streifen{display:flex;align-items:flex-end;gap:1px;height:34px; background:linear-gradient(to top,var(--surface-2) 0,transparent 100%); border-radius:var(--r-xs);padding:2px 0} .radar-streifen .rb{position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:1px} /* blasser Balken: Umgebung – liegt hinter dem kräftigen */ .radar-streifen .rb::before,.radar-streifen .rb::after{content:"";position:absolute; left:0;right:0;bottom:0;border-radius:1px} .radar-streifen .rb::before{height:var(--hn,0);background:var(--prob);opacity:.28} .radar-streifen .rb::after{height:var(--h,0);background:var(--rain)} .radar-streifen .rb.nah::before{opacity:.45} /* Grundlinie, damit trockene Abschnitte nicht als Lücke wirken */ .radar-streifen .rb{box-shadow:inset 0 -1px 0 var(--line)} /* Die Marken sitzen zeitrichtig, nicht gleichmäßig verteilt – deshalb absolut gesetzt statt über ein Flex-Raster. */ .radar-achse{position:relative;height:1.35em;font-size:10.5px;color:var(--dim); font-variant-numeric:tabular-nums} .radar-achse span{position:absolute;top:0;white-space:nowrap} /* Die Dichte der Uhrzeiten bestimmt app.js aus der tatsächlichen Breite des Streifens – eine Bildschirmabfrage wäre hier das falsche Maß. */ .radar:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)} @media (min-width:1024px){ .place-sep, .alerts{grid-column:1 / -1} } /* ---------- Manuelles Farbschema ---------- */ :root[data-theme="dark"]{ color-scheme:dark; --fg-2:#8fa0bd66; --bg:#0b0f16; --surface:#141a24; --surface-2:#1b2231; --line:#273044; --fg:#e9eef7; --dim:#94a3bd; --accent:#4d9dff; --accent-fg:#06101f; --temp:#ff6a58; --dew:#49b8ff; --rain:#3d86e8; --prob:#7fd0ff; --wind:#a396ff; --gust:#3b3566; --cloud:#c3cee2; --ok:#3ecf8e; --warn:#e3a94a; --warn-bg:#2a2214; --warn-line:#5a4a24; --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7); } :root[data-theme="light"]{ color-scheme:light; --fg-2:#43506680; --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef1f7; --line:#dde3ed; --fg:#111823; --dim:#5a6880; --accent:#0a63d4; --accent-fg:#ffffff; --temp:#d92d20; --dew:#0a7fc4; --rain:#1a5fbf; --prob:#4696d8; --wind:#5b46c8; --gust:#c9c2f2; --cloud:#4a5670; --ok:#0f7a4d; --warn:#9c6207; --warn-bg:#fdf3e3; --warn-line:#e9d3a8; --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18); } /* Sichtbarer Fehlerzustand, wenn keinerlei Daten vorliegen */ #fehler{padding:var(--s5);margin-bottom:var(--s4);border-color:var(--warn-line); background:var(--warn-bg)} #fehler[hidden]{display:none} #fehler b{display:block;font-size:16px;margin-bottom:var(--s2)} #fehler p{margin:0 0 var(--s2);font-size:13.5px;line-height:1.6;color:var(--dim)} #fehler .linkbtn{width:auto;padding:0 var(--s4);margin-top:var(--s2)}