/* * wetter.css - Layout und Struktur (themenunabhängig) * Version: 1.7.0 * * Alle Farben/Radien/Schatten kommen aus den CSS-Variablen des Themes * (wetter-theme-default.css). Mobile-first, mit Breakpoints für Tablet * (>=640px) und Desktop (>=960px). * * Changelog: * 1.7.0 Burger-Menue unter 640px: .wetter-navtoggle (drei Balken, wird beim * Oeffnen zum X) sitzt rechts aussen in der Titelzeile, .wetter-nav * klappt darunter als volle Zeile auf. Greift nur bei aktivem * JavaScript (Klasse "wetter-js" auf ), ohne JS bleibt die * Navigation wie bisher sichtbar. Ab 640px unveraendertes Layout. * 1.6.2 Kleine Stundenbeschriftung oben im Meteogramm (.wetter-meteo__lbl * --hour). * 1.6.1 Mobil-Layout repariert: .wetter-cols, .wetter-colmain und * .wetter-side nutzen jetzt minmax(0, 1fr) statt 1fr und haben * min-width: 0. Grid-Items haben sonst min-width: auto und * uebernehmen die Mindestbreite ihres breitesten Kindes - das * 700px breite Meteogramm-SVG hat damit die ganze linke Spalte und * die Seite aufgezogen (html.scrollWidth 754 statt 390), statt im * eigenen Container zu scrollen. Am Desktop war das nicht sichtbar, * weil dort schon minmax(0, ...) stand. Zusaetzlich .wetter-meteo * mit min-width: 0 und der Scroll-Container mit max-width: 100%. * 1.6.0 Stile fuer das Meteogramm (.wetter-meteo__*): Inline-SVG in einem * waagrecht scrollbaren Container (min-width 700px, damit die * Beschriftung am Handy lesbar bleibt), Spuren-, Symbol- und * Rasterfarben durchgehend aus den Theme-Variablen. * 1.5.2 Stationsname in der Uebersichtstabelle als Link (.wetter-stations__link). * 1.5.1 .wetter-metric__note steht in eigener Zeile (display:block). * Stationstabelle mit duennen Gitternetzlinien (Rahmen je Zelle), * Werte rechtsbuendig, Seehoehe-Spalte entfaellt. * 1.5.0 Zusatz-Zeile .wetter-metric__note (nicht umbrechend, 1px groesser) * fuer Temperatur-Vergleich und 24h-Summen. Generische ausklappbare * Box .wetter-collapse (Basis fuer ORF-Prognose-Optik) und Stile fuer * die Stationsuebersicht (.wetter-stations__*: scrollbare Tabelle mit * Sticky-Kopf, Hervorhebung der aktuellen Station). * 1.4.1 ORF-Prognose am Desktop skaliert (--forecast-scale), Body overflow. * 1.4.0 Linker Spalten-Wrapper (.wetter-colmain); Stile für ausklappbare * ORF-Prognose-Box (.wetter-forecast) inkl. iFrame und Chevron. * 1.3.1 Mond als Bild-Overlay (Schatten/Aufhellung) statt gezeichneter Scheibe. * 1.3.0 Datum in Karten-Titeln, Astro-Sub-Zeile, grafische Mondscheibe. * 1.2.1 Kennzahlen-Zeile unter dem Chart (Temp Max/Min, Sonne, Regen). * 1.2.0 Volle Bildschirmbreite; neues Raster (Chart voll breit, darunter * Messwerte links / Sonne-Mond rechts); Chart höher am Desktop. * 1.1.0 Stile für die Fehlerseiten (404/500) ergänzt. * 1.0.0 Erstfassung. */ /* ------------------------------------------------------------------ * * Grundlagen * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.wetter-body { margin: 0; font-family: var(--wetter-font); font-size: 16px; line-height: 1.5; color: var(--wetter-text); background: var(--wetter-bg); } .wetter-body--centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } a { color: var(--wetter-primary); } a:hover { color: var(--wetter-primary-dark); } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--wetter-primary); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------------ * * Container / Karten * ------------------------------------------------------------------ */ .wetter-container { width: 100%; max-width: none; margin: 0 auto; padding: 16px; } .wetter-card { background: var(--wetter-surface); border: 1px solid var(--wetter-border); border-radius: var(--wetter-radius); box-shadow: var(--wetter-shadow); padding: 18px; } .wetter-card__title { margin: 0 0 14px; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; } .wetter-card__date { font-weight: 400; font-size: .82rem; color: var(--wetter-text-muted); margin-left: 6px; } /* ------------------------------------------------------------------ * * Kopfzeile * ------------------------------------------------------------------ */ .wetter-header { background: var(--wetter-surface); border-bottom: 1px solid var(--wetter-border); box-shadow: var(--wetter-shadow-sm); } .wetter-header__inner { max-width: none; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } /* Burger-Schalter: nur mobil und nur mit aktivem JavaScript sichtbar. Ohne JS (keine Klasse "wetter-js" auf ) bleibt die Navigation wie bisher offen stehen. */ .wetter-navtoggle { display: none; order: 2; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--wetter-border); border-radius: var(--wetter-radius-sm); background: var(--wetter-surface); color: var(--wetter-text); cursor: pointer; } .wetter-js .wetter-navtoggle { display: flex; } .wetter-navtoggle:hover { background: var(--wetter-surface-2); } .wetter-navtoggle__bar { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } .wetter-navtoggle[aria-expanded="true"] .wetter-navtoggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .wetter-navtoggle[aria-expanded="true"] .wetter-navtoggle__bar:nth-child(2) { opacity: 0; } .wetter-navtoggle[aria-expanded="true"] .wetter-navtoggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .wetter-brand { display: flex; align-items: baseline; gap: 8px; font-family: var(--wetter-font-display); font-weight: 700; font-size: 1.25rem; color: var(--wetter-text); text-decoration: none; margin-right: auto; } .wetter-brand__mark { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--wetter-primary), var(--wetter-accent)); display: inline-block; align-self: center; } .wetter-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } /* Mobil mit JavaScript: Navigation ausgeblendet, klappt unter der Titelzeile ueber die volle Breite auf. */ .wetter-js .wetter-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--wetter-border); } .wetter-js .wetter-nav.is-open { display: flex; } .wetter-js .wetter-nav .wetter-nav__link { display: block; padding: 10px 12px; border-radius: var(--wetter-radius-sm); font-size: 1rem; } .wetter-js .wetter-nav .wetter-user { justify-content: space-between; padding: 4px 12px; } .wetter-nav__link { display: inline-block; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-size: .92rem; color: var(--wetter-text-muted); } .wetter-nav__link:hover { background: var(--wetter-surface-2); color: var(--wetter-text); } .wetter-user { font-size: .88rem; color: var(--wetter-text-muted); display: inline-flex; align-items: center; gap: 8px; } /* ------------------------------------------------------------------ * * Steuerung (Ort / Zeitraum / Datum) * ------------------------------------------------------------------ */ .wetter-controls { display: grid; gap: 14px; margin-bottom: 16px; } .wetter-controls__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .wetter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .wetter-field__label { font-size: .8rem; font-weight: 600; color: var(--wetter-text-muted); } .wetter-select, .wetter-input { font: inherit; color: var(--wetter-text); background: var(--wetter-surface); border: 1px solid var(--wetter-border); border-radius: var(--wetter-radius-sm); padding: 9px 11px; min-height: 42px; } .wetter-select:focus, .wetter-input:focus { border-color: var(--wetter-primary); outline: none; box-shadow: 0 0 0 3px var(--wetter-primary-tint); } .wetter-select { min-width: 200px; } .wetter-select--narrow { min-width: 150px; } .wetter-daterange { display: flex; align-items: flex-end; gap: 8px; } .wetter-daterange .wetter-input { min-width: 150px; } /* Schnellauswahl Zeitraum als Chips */ .wetter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .wetter-chip { font: inherit; font-size: .9rem; cursor: pointer; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--wetter-border); background: var(--wetter-surface); color: var(--wetter-text-muted); text-decoration: none; } .wetter-chip:hover { border-color: var(--wetter-primary); color: var(--wetter-text); } .wetter-chip--active { background: var(--wetter-primary); border-color: var(--wetter-primary); color: #fff; } /* ------------------------------------------------------------------ * * Hauptraster * ------------------------------------------------------------------ */ .wetter-content { display: grid; gap: 16px; } /* Achtung: ueberall minmax(0, 1fr) statt 1fr. Grid-Items bekommen sonst min-width: auto und koennen nicht unter ihre Inhaltsbreite schrumpfen - ein breites Kind (z. B. das Meteogramm-SVG) sprengt dann die ganze Spalte und damit die Seite. */ .wetter-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .wetter-side { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; } /* Linke Spalte: Messwerte + ORF-Prognose gestapelt */ .wetter-colmain { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; } /* ------------------------------------------------------------------ * * Meteogramm (Inline-SVG, kein JavaScript) * ------------------------------------------------------------------ */ /* Die Karte selbst darf nie breiter werden als ihre Spalte; die Breite des SVG traegt deshalb nichts zur Mindestbreite bei, gescrollt wird nur innen. */ .wetter-meteo { min-width: 0; overflow: hidden; } .wetter-meteo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .wetter-meteo__title { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; } .wetter-meteo__time { font-size: .82rem; color: var(--wetter-text-muted); } /* Waagrecht scrollbar: unter 700px Breite wird das SVG nicht weiter verkleinert, sonst wird die Beschriftung am Handy unlesbar. */ .wetter-meteo__scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; } .wetter-meteo__svg { display: block; width: 100%; min-width: 700px; height: auto; } /* Hintergrund: Nacht und bereits vergangener Teil des Laufs */ .wetter-meteo__night, .wetter-meteo__past { fill: var(--wetter-text); opacity: .05; } /* Raster: duenn alle 3 h, kraeftiger um 12 Uhr, am kraeftigsten um Mitternacht */ .wetter-meteo__tick { stroke: var(--wetter-border); stroke-width: 1; } .wetter-meteo__tick--noon { stroke: var(--wetter-border); stroke-width: 1.8; } .wetter-meteo__midnight { stroke: var(--wetter-text-muted); stroke-width: 1; opacity: .5; } .wetter-meteo__grid { stroke: var(--wetter-border); stroke-width: 1; opacity: .7; } .wetter-meteo__grid--zero { stroke: var(--wetter-series-nie); stroke-width: 1; opacity: 1; } .wetter-meteo__axis { stroke: var(--wetter-text-muted); stroke-width: 1; opacity: .5; } /* Beschriftung */ .wetter-meteo__lbl { font-size: 12px; fill: var(--wetter-text-muted); } .wetter-meteo__lbl--day { font-size: 13px; fill: var(--wetter-text); font-weight: 600; } .wetter-meteo__lbl--hour { font-size: 10px; fill: var(--wetter-text-muted); } .wetter-meteo__lbl--temp { fill: var(--wetter-series-temp); font-weight: 600; } .wetter-meteo__lbl--now { fill: var(--wetter-text); font-weight: 600; } /* Spuren */ .wetter-meteo__temp { fill: none; stroke: var(--wetter-series-temp); stroke-width: 2; stroke-linejoin: round; } .wetter-meteo__rain { fill: var(--wetter-series-nie); } .wetter-meteo__snow { fill: var(--wetter-series-gust); } .wetter-meteo__son { fill: var(--wetter-series-son); } .wetter-meteo__tcc { fill: var(--wetter-text-muted); } .wetter-meteo__windarea { fill: var(--wetter-series-wind); opacity: .18; } .wetter-meteo__wind { fill: none; stroke: var(--wetter-series-wind); stroke-width: 1.6; } .wetter-meteo__gust { fill: none; stroke: var(--wetter-series-gust); stroke-width: 1.4; stroke-dasharray: 3 2; } .wetter-meteo__arrow { fill: none; stroke: var(--wetter-text-muted); stroke-width: 1.2; stroke-linecap: round; } /* Jetzt-Marker */ .wetter-meteo__now { stroke: var(--wetter-text); stroke-width: 1.2; } .wetter-meteo__nowdot { fill: var(--wetter-text); } /* Wettersymbole */ .wetter-meteo__sun { fill: var(--wetter-series-son); } .wetter-meteo__cloud { fill: var(--wetter-text-muted); } .wetter-meteo__cloud--light { fill: var(--wetter-border); } .wetter-meteo__drop { stroke: var(--wetter-series-nie); stroke-width: 1.4; stroke-linecap: round; } .wetter-meteo__flake { fill: none; stroke: var(--wetter-series-gust); stroke-width: 1.2; stroke-linecap: round; } .wetter-meteo__fog { stroke: var(--wetter-text-muted); stroke-width: 1.2; stroke-linecap: round; } .wetter-meteo__bolt { fill: var(--wetter-series-son); } /* Unsichtbare Trefferflaeche je Stunde, traegt den -Tooltip */ .wetter-meteo__hit { fill: transparent; } /* ------------------------------------------------------------------ * * ORF-Prognose (ausklappbar) * ------------------------------------------------------------------ */ .wetter-forecast { padding: 0; overflow: hidden; } .wetter-forecast__summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; } .wetter-forecast__summary::-webkit-details-marker { display: none; } .wetter-forecast__summary:hover { background: var(--wetter-surface-2); } .wetter-forecast__title { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; } .wetter-forecast__hint { margin-left: auto; font-size: .82rem; color: var(--wetter-text-muted); } .wetter-forecast__chevron { width: 9px; height: 9px; border-right: 2px solid var(--wetter-text-muted); border-bottom: 2px solid var(--wetter-text-muted); transform: rotate(45deg); transition: transform .18s ease; flex: 0 0 auto; margin-top: -3px; } .wetter-forecast[open] .wetter-forecast__chevron { transform: rotate(225deg); margin-top: 3px; } .wetter-forecast__body { border-top: 1px solid var(--wetter-border); background: #fff; overflow: hidden; } .wetter-forecast__frame { display: block; width: 100%; height: 360px; /* Startwert; JS passt an den Inhalt an */ border: 0; overflow: hidden; transform-origin: top left; } /* ------------------------------------------------------------------ * * Generische ausklappbare Box (gleiche Optik wie die ORF-Prognose) * ------------------------------------------------------------------ */ .wetter-collapse { padding: 0; overflow: hidden; } .wetter-collapse__summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; } .wetter-collapse__summary::-webkit-details-marker { display: none; } .wetter-collapse__summary:hover { background: var(--wetter-surface-2); } .wetter-collapse__title { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; } .wetter-collapse__hint { margin-left: auto; font-size: .82rem; color: var(--wetter-text-muted); } .wetter-collapse__chevron { width: 9px; height: 9px; border-right: 2px solid var(--wetter-text-muted); border-bottom: 2px solid var(--wetter-text-muted); transform: rotate(45deg); transition: transform .18s ease; flex: 0 0 auto; margin-top: -3px; } .wetter-collapse[open] .wetter-collapse__chevron { transform: rotate(225deg); margin-top: 3px; } .wetter-collapse__body { border-top: 1px solid var(--wetter-border); } /* ------------------------------------------------------------------ * * Stationsuebersicht (Tabelle aller oeffentlichen Stationen) * ------------------------------------------------------------------ */ .wetter-stations__body { padding: 0; } .wetter-stations__status { padding: 14px 18px; color: var(--wetter-text-muted); font-size: .9rem; } .wetter-stations__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wetter-stations__table { width: 100%; border-collapse: collapse; font-size: .9rem; } .wetter-stations__table th, .wetter-stations__table td { padding: 7px 12px; text-align: right; white-space: nowrap; border: 1px solid var(--wetter-border); } .wetter-stations__table th { position: sticky; top: 0; background: var(--wetter-surface-2); font-weight: 600; font-size: .82rem; color: var(--wetter-text-muted); } .wetter-stations__table th.is-left, .wetter-stations__table td.is-left { text-align: left; } .wetter-stations__table td.is-left { font-weight: 600; } .wetter-stations__link { color: var(--wetter-primary); text-decoration: none; } .wetter-stations__link:hover, .wetter-stations__link:focus { text-decoration: underline; } .wetter-stations__table tbody tr:hover td { background: var(--wetter-surface-2); } .wetter-stations__table tr.is-current td { background: rgba(228, 87, 46, 0.10); } .wetter-stations__table tr.is-current .wetter-stations__link { color: var(--wetter-series-temp); } /* ------------------------------------------------------------------ * * Aktuelle Messwerte * ------------------------------------------------------------------ */ .wetter-now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 12px; } .wetter-now__station { font-size: 1.1rem; font-weight: 700; margin: 0; } .wetter-now__time { font-size: .85rem; color: var(--wetter-text-muted); } .wetter-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .wetter-metric { background: var(--wetter-surface-2); border-radius: var(--wetter-radius-sm); padding: 12px; } .wetter-metric__label { font-size: .78rem; color: var(--wetter-text-muted); display: block; margin-bottom: 3px; } .wetter-metric__value { font-size: 1.35rem; font-weight: 700; line-height: 1.15; } .wetter-metric__sub { font-size: .76rem; color: var(--wetter-text-muted); margin-top: 2px; } /* Zusatzzeile (Temp-Vergleich, 24h-Werte): 1px groesser als __sub, steht immer in einer eigenen Zeile (Umbruch davor) und bricht als Ganzes nie mitten im Text um. */ .wetter-metric__note { display: block; margin-top: 3px; font-size: calc(.76rem + 1px); color: var(--wetter-text-muted); white-space: nowrap; } .wetter-metric--temp .wetter-metric__value { color: var(--wetter-series-temp); } /* Webcam */ .wetter-webcam { margin-top: 14px; } .wetter-webcam img { width: 100%; border-radius: var(--wetter-radius-sm); border: 1px solid var(--wetter-border); } .wetter-webcam__caption { font-size: .76rem; color: var(--wetter-text-muted); margin-top: 6px; } /* ------------------------------------------------------------------ * * Chart * ------------------------------------------------------------------ */ .wetter-chart__canvas-wrap { position: relative; width: 100%; height: 320px; } .wetter-chart__stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--wetter-border); font-size: .85rem; } .wetter-chart__stat { font-weight: 700; } .wetter-chart__stat-label { color: var(--wetter-text-muted); font-weight: 600; } .wetter-chart__toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .wetter-toggle { font: inherit; font-size: .82rem; cursor: pointer; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--wetter-border); background: var(--wetter-surface); color: var(--wetter-text-muted); display: inline-flex; align-items: center; gap: 7px; } .wetter-toggle__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--wetter-primary)); } .wetter-toggle--off { opacity: .45; } /* ------------------------------------------------------------------ * * Sonne / Mond / Empfehlungen * ------------------------------------------------------------------ */ .wetter-astro__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .wetter-astro__item { display: flex; flex-direction: column; gap: 2px; } .wetter-astro__label { font-size: .76rem; color: var(--wetter-text-muted); } .wetter-astro__value { font-weight: 600; } .wetter-astro__sub { font-size: .74rem; color: var(--wetter-text-muted); margin-top: 1px; } .wetter-moon-illum { display: flex; align-items: center; gap: 16px; } .wetter-moon-illum__pct { font-size: 1.15rem; font-weight: 700; } .wetter-moon-illum__phase { font-weight: 600; margin-top: 2px; } .wetter-moon-illum__sub { font-size: .8rem; color: var(--wetter-text-muted); margin-top: 1px; } .wetter-moon { position: relative; flex: 0 0 auto; line-height: 0; } .wetter-moon__img { display: block; width: 100%; height: 100%; border-radius: 50%; } .wetter-moon__overlay { position: absolute; inset: 0; } .wetter-recos { margin-top: 14px; display: grid; gap: 10px; } .wetter-reco { background: var(--wetter-surface-2); border-radius: var(--wetter-radius-sm); padding: 10px 12px; } .wetter-reco__title { font-weight: 600; font-size: .9rem; margin-bottom: 4px; } .wetter-reco__line { font-size: .82rem; margin: 2px 0; } .wetter-reco__plus { color: var(--wetter-accent); } .wetter-reco__minus { color: var(--wetter-danger); } /* ------------------------------------------------------------------ * * Hinweise / Meldungen * ------------------------------------------------------------------ */ .wetter-alert { background: var(--wetter-danger-tint); color: var(--wetter-danger); border: 1px solid var(--wetter-danger); border-radius: var(--wetter-radius-sm); padding: 10px 12px; font-size: .9rem; margin-bottom: 14px; } .wetter-empty { color: var(--wetter-text-muted); font-size: .92rem; padding: 24px 0; text-align: center; } /* ------------------------------------------------------------------ * * Buttons * ------------------------------------------------------------------ */ .wetter-btn { font: inherit; cursor: pointer; border: 1px solid var(--wetter-border); background: var(--wetter-surface); color: var(--wetter-text); border-radius: var(--wetter-radius-sm); padding: 10px 16px; min-height: 42px; } .wetter-btn:hover { border-color: var(--wetter-primary); } .wetter-btn--primary { background: var(--wetter-primary); border-color: var(--wetter-primary); color: #fff; width: 100%; font-weight: 600; } .wetter-btn--primary:hover { background: var(--wetter-primary-dark); border-color: var(--wetter-primary-dark); } /* ------------------------------------------------------------------ * * Login * ------------------------------------------------------------------ */ .wetter-login { width: 100%; max-width: 380px; } .wetter-login__card { padding: 26px; } .wetter-login__title { margin: 0 0 2px; font-size: 1.4rem; } .wetter-login__sub { margin: 0 0 18px; color: var(--wetter-text-muted); font-size: .9rem; } .wetter-form { display: grid; gap: 14px; } .wetter-form .wetter-input { width: 100%; } .wetter-login__back { display: inline-block; margin-top: 16px; font-size: .85rem; } /* ------------------------------------------------------------------ * * Fehlerseiten (404 / 500) * ------------------------------------------------------------------ */ .wetter-error { width: 100%; max-width: 460px; } .wetter-error__card { padding: 30px; text-align: center; } .wetter-error__code { font-family: var(--wetter-font-display); font-weight: 700; font-size: 3.4rem; line-height: 1; letter-spacing: -.01em; background: linear-gradient(135deg, var(--wetter-primary), var(--wetter-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .wetter-error__title { margin: 10px 0 6px; font-size: 1.25rem; } .wetter-error__text { margin: 0 auto 20px; color: var(--wetter-text-muted); max-width: 34ch; } .wetter-error__ref { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: var(--wetter-radius-sm); background: var(--wetter-surface-2); color: var(--wetter-text-muted); font-size: .82rem; } .wetter-error__ref code { color: var(--wetter-text); font-weight: 600; } .wetter-error__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ------------------------------------------------------------------ * * Fußzeile * ------------------------------------------------------------------ */ .wetter-footer { max-width: none; margin: 8px auto 28px; padding: 16px; color: var(--wetter-text-muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; } /* ------------------------------------------------------------------ * * Tablet * ------------------------------------------------------------------ */ @media (min-width: 640px) { /* Ab hier wieder waagrechte Navigation, kein Burger-Schalter */ .wetter-js .wetter-navtoggle { display: none; } .wetter-js .wetter-nav { display: flex; order: 0; flex-basis: auto; flex-direction: row; align-items: center; gap: 6px; padding-top: 0; margin-top: 0; border-top: 0; } .wetter-js .wetter-nav .wetter-nav__link { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .92rem; } .wetter-js .wetter-nav .wetter-user { padding: 0; } .wetter-container { padding: 22px; } .wetter-metrics { grid-template-columns: repeat(3, 1fr); } .wetter-chart__canvas-wrap { height: 380px; } } /* ------------------------------------------------------------------ * * Desktop * ------------------------------------------------------------------ */ @media (min-width: 960px) { .wetter-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } .wetter-metrics { grid-template-columns: repeat(3, 1fr); } .wetter-chart__canvas-wrap { height: 460px; } /* ORF-Prognose am Desktop vergrössern: Inhalt bleibt im (perfekten) mobilen Layout und wird auf die volle Spaltenbreite skaliert. Faktor bei Bedarf hier anpassen (z. B. 1.8 oder 2.2). */ .wetter-forecast__frame { --forecast-scale: 2; width: calc(100% / var(--forecast-scale)); transform: scale(var(--forecast-scale)); } } @media (min-width: 1400px) { .wetter-metrics { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------------ * * Reduzierte Bewegung * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }