/* Minimales, neutrales Grundgerüst. Light/Dark über data-theme am . */ :root { --bg: #f7f8fb; --surface: #ffffff; --text: #1a1d24; --muted: #5b6472; --border: #e2e6ee; --accent: #2f6df6; --accent-text: #ffffff; --error-bg: #fdecec; --error-text: #a11919; --flash-bg: #eaf3ff; --flash-text: #1c4bb0; --radius: 10px; } :root[data-theme="dark"] { --bg: #0e1119; --surface: #161b26; --text: #e7ebf3; --muted: #9aa4b4; --border: #262d3b; --accent: #4d82ff; --accent-text: #ffffff; --error-bg: #3a1d1d; --error-text: #ff9d9d; --flash-bg: #14243f; --flash-text: #a9c8ff; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { font-weight: 600; text-decoration: none; color: var(--text); } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .theme-toggle, .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; } .theme-toggle svg, .icon-btn svg { width: 1.15rem; height: 1.15rem; } /* Nur das zum Theme passende Icon zeigen. */ :root[data-theme="light"] .ic-dark { display: none; } :root[data-theme="dark"] .ic-light { display: none; } .container { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem; } .container-wide { max-width: 1100px; } h1 { font-size: 1.5rem; margin: 0 0 1rem; } .muted { color: var(--muted); } .card { display: flex; flex-direction: column; gap: 0.85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 1rem 0; } label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); } input, select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.55rem 0.7rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } button[type="submit"], .btn { align-self: start; font: inherit; font-weight: 600; color: var(--accent-text); background: var(--accent); border: none; border-radius: 8px; padding: 0.6rem 1.1rem; cursor: pointer; } .flash { background: var(--flash-bg); color: var(--flash-text); padding: 0.7rem 1rem; border-radius: 8px; } .error { background: var(--error-bg); color: var(--error-text); padding: 0.7rem 1rem; border-radius: 8px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 0.05rem 0.35rem; font-size: 0.9em; } /* --------------------------------------------------------------------------- Wetter-Ansichten. Erweitert die Tokens oben um einen Warnton fuer den "Werte sind veraltet"-Hinweis. --------------------------------------------------------------------------- */ :root { --warn-bg: #fff5e6; --warn-text: #8a5300; } :root[data-theme="dark"] { --warn-bg: #33260f; --warn-text: #ffcf8a; } /* Button-Varianten: eine Primaeraktion je Seite, alles andere ruhig. */ a.btn { display: inline-block; text-decoration: none; } .btn-leise { background: var(--surface); color: var(--text); border: 1px solid var(--border); } .btn-gefahr { background: transparent; color: var(--error-text); border: 1px solid var(--border); } .btn-primary { background: var(--accent); color: var(--accent-text); border: none; } .seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .seitenkopf h1 { margin: 0; } h2 { font-size: 1.15rem; margin: 0; } .klein { font-size: 0.85rem; } /* Nur fuer Screenreader sichtbar (Label ueber dem Suchfeld). */ .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; } .leerhinweis { align-items: flex-start; } .wetter-icon { width: 2rem; height: 2rem; flex: none; } .ortkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ortkopf h2 { margin: 0; } .ortkopf p { margin: 0.15rem 0 0; } .jetzt { display: flex; align-items: center; gap: 0.75rem; } .jetzt .wetter-icon { width: 2.75rem; height: 2.75rem; } .jetzt p { margin: 0; } .temperatur { font-size: 1.75rem; font-weight: 600; line-height: 1.1; } .hinweis { margin: 0; background: var(--warn-bg); color: var(--warn-text); padding: 0.7rem 1rem; border-radius: 8px; } /* Kennzahlen zum aktuellen Wetter. */ .werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--border); } .werte dt { font-size: 0.8rem; color: var(--muted); } .werte dd { margin: 0.1rem 0 0; font-weight: 600; } /* Sieben Tage: auf schmalen Displays horizontal scrollbar statt gequetscht. Abstand und Trennlinie liefert der umgebende .block. */ .vorhersage { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(4.5rem, 1fr); gap: 0.5rem; overflow-x: auto; } .tag { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.35rem; border-radius: 8px; text-align: center; } .tag p { margin: 0; } .tag-heute { background: var(--bg); outline: 1px solid var(--border); } .tagname { font-weight: 600; } .tagtemp { white-space: nowrap; } .abrufzeit { margin: 0; } /* --------------------------------------------------------------------------- Werteskalen. Temperatur: divergierende Skala kalt<->warm in sieben Stufen mit neutralem Grau in der Mitte. Fester Wertebereich, damit dieselbe Temperatur immer dieselbe Farbe hat. Die Stufen sind gerechnet, nicht geschaetzt (monotone Helligkeit, sichtbare Abstaende, hellstes Ende >= 2:1 zur Kartenflaeche) — dunkel ist eine eigene Auswahl, keine Umkehrung. Farbe sitzt ausschliesslich auf kleinen Balken; Zahlen bleiben in Textfarbe, damit die Werte auch ohne Farbwahrnehmung lesbar sind. Regenwahrscheinlichkeit: bewusst OHNE Farbton. Ein blauer Regenbalken waere von der kalten Seite der Temperaturskala nicht zu unterscheiden. --------------------------------------------------------------------------- */ :root { --t-1: #1c5cab; --t-2: #3987e5; --t-3: #86b6ef; --t-4: #b8b7ad; --t-5: #e8827e; --t-6: #d64b47; --t-7: #a82a27; } :root[data-theme="dark"] { --t-1: #9ec5f4; --t-2: #5598e7; --t-3: #2a78d6; --t-4: #57564f; --t-5: #b53a36; --t-6: #e05e5b; --t-7: #f08a86; } .tempbalken { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--border); } .t-1 { background: var(--t-1); } .t-2 { background: var(--t-2); } .t-3 { background: var(--t-3); } .t-4 { background: var(--t-4); } .t-5 { background: var(--t-5); } .t-6 { background: var(--t-6); } .t-7 { background: var(--t-7); } .t-leer { background: var(--border); } /* Regenbalken: Spur plus Fuellung, Breite in Zehnerschritten (CSP erlaubt keine Inline-Styles, deshalb Klassen statt berechneter Prozentwerte). */ .regenbalken { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; } .regenfuellung { display: block; height: 100%; border-radius: 2px; background: var(--muted); } .b-0 { width: 0; } .b-10 { width: 10%; } .b-20 { width: 20%; } .b-30 { width: 30%; } .b-40 { width: 40%; } .b-50 { width: 50%; } .b-60 { width: 60%; } .b-70 { width: 70%; } .b-80 { width: 80%; } .b-90 { width: 90%; } .b-100 { width: 100%; } /* Nur so hoch, dass die Zeile nicht springt, wenn kein Wert steht. */ .regenwert { margin: 0; min-height: 1.2em; } .block { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--border); } h3 { font-size: 0.95rem; margin: 0; color: var(--muted); font-weight: 600; } /* Stundenstreifen: gleiche Mechanik wie die Tagesspalten, nur schmaler. */ .stundenstreifen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.4rem, 1fr); gap: 0.4rem; overflow-x: auto; } .stunde { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 0.3rem; border-radius: 8px; text-align: center; } .stunde p { margin: 0; } .stundenzeit { font-weight: 600; font-size: 0.9rem; } .stundentemp { font-size: 0.95rem; white-space: nowrap; } .ikon-klein .wetter-icon { width: 1.5rem; height: 1.5rem; } /* Tageswechsel im Streifen sichtbar machen, ohne eine zweite Farbe einzufuehren. */ .tagwechsel { border-left: 1px solid var(--border); } .legende { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.7rem; padding: 0 0.25rem 0.5rem; } .legende-eintrag { display: inline-flex; align-items: center; gap: 0.3rem; } .legende-farbe { display: inline-block; width: 1.1rem; height: 4px; border-radius: 2px; } .legende-hinweis { flex-basis: 100%; } /* Ortsverwaltung: Suche und Listen. */ .suchzeile { display: flex; gap: 0.5rem; flex-wrap: wrap; } .suchzeile input { flex: 1 1 14rem; } .suchzeile button { align-self: stretch; } .trefferliste, .ortliste { list-style: none; margin: 0; padding: 0; } .trefferliste li, .ortliste li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-top: 1px solid var(--border); } .trefferliste li > div, .ortliste li > div { display: flex; flex-direction: column; } .trefferliste form, .ortliste form { margin: 0; }