/* ══════════════════════════════════════════════════════════════════════ WEATHERHUNTERS — Forecast-Layout (25.08.2026) ══════════════════════════════════════════════════════════════════════ Ein eigenes Stylesheet und kein Block in dashboard.css — weil es an ZWEI Stellen gebraucht wird: auf /forecasts/ und im Adminpanel. Das Panel laedt dashboard.css nicht (nur wh-system.css und admin.css), und der Betreiber hat am 25.08.2026 angeordnet, dass die drei Tageskacheln dort "genau so" aussehen wie auf der Seite. Eine Kopie in admin.css waere am Tag der ersten Aenderung eine Abweichung. Deshalb steht hier ausschliesslich, was BEIDE brauchen, und alles davon greift nur auf die Tokens aus wh-system.css zu (--wh-*) — die sind in beiden Umgebungen da. Die Tokens aus style.css (--gold, --txt, --bg-card) gibt es im Panel NICHT; wer sie hier benutzt, baut eine Kachel, die im Adminpanel farblos ist. Eingebunden wird das Stylesheet an genau zwei Stellen: includes/community.php — nur fuer die Seite "forecasts" admin/index.php — fuer das ganze Panel (eine Zeile) ── Die Stufenfarben ──────────────────────────────────────────────── Sie sind die eine Sache auf dieser Seite, die nicht Geschmack ist: Der Leser soll die Stufe erkennen, bevor er ein Wort gelesen hat, und er kennt die Skala vom Vorbild. Die Toene sind deshalb die des Vorbilds, nur eine Spur entsaettigt, damit sie neben dem gedeckten Portalgrund nicht wie ein Fremdkoerper leuchten. Zu jeder Farbe gehoert eine ZWEITE: die Schrift, die darauf steht. Gelb mit weisser Schrift ist unlesbar, Rot mit dunkler ebenso. --fc-c ist die Flaeche, --fc-fg die Schrift darauf. Wer eine Stufe hinzufuegt, setzt beide oder baut einen unlesbaren Balken. TSTM mint Gewitter, keine Unwettergefahr Level 1 gruen 5 % Level 2 gelb 15 % dunkle Schrift — Pflicht, nicht Wahl Level 3 orange 30 % Level 4 rot 50 % Level 5 magenta 80 % ══════════════════════════════════════════════════════════════════════ */ .fc-lv-none { --fc-c: rgba(255,255,255,.14); --fc-fg: rgba(255,255,255,.55); } .fc-lv-tstm { --fc-c: #86D9A6; --fc-fg: #0E2A1B; } .fc-lv-1 { --fc-c: #2FB344; --fc-fg: #06220E; } .fc-lv-2 { --fc-c: #EDE30D; --fc-fg: #2A2600; } .fc-lv-3 { --fc-c: #FF8C00; --fc-fg: #2B1500; } .fc-lv-4 { --fc-c: #E01B1B; --fc-fg: #FFFFFF; } .fc-lv-5 { --fc-c: #FF2FB4; --fc-fg: #2A0018; } /* ── Tag 4 bis 8: die Mittelfrist-Skala ────────────────────────────── Ab dem 24.08.2026 tragen die ferneren Tage keine Stufen mehr, sondern Wahrscheinlichkeiten: 15 % und 30 % fuer Unwetter. Die Farben sind mit ABSICHT die von Level 2 und Level 3 — dieselbe Wahrscheinlichkeit soll dieselbe Anmutung haben, sonst saehe ein 30-%-Tag in der Kurzfrist anders aus als in der Mittelfrist. Was den Skalenwechsel klarmacht, ist der TEXT in der Zelle ("30% Severe" statt "LEVEL 3") und die Legendenzeile unter der Skala, nicht die Farbe. Eigene Klassen und keine Wiederverwendung von .fc-lv-2/.fc-lv-3: Wer eines Tages Level 3 umfaerbt, soll damit nicht ungefragt die 30-%-Zelle mit umfaerben. */ .fc-lv-p15 { --fc-c: #EDE30D; --fc-fg: #2A2600; } .fc-lv-p30 { --fc-c: #FF8C00; --fc-fg: #2B1500; } /* ═══ 1. KOPF-BANNER ═══════════════════════════════════════════════ Die Farbe der hoechsten aktiven Stufe, in voller Breite. Beim Vorbild ist das ein durchgefaerbter Balken; hier ist es eine kraeftige Kante links plus ein Hauch derselben Farbe im Grund. Warum nicht der volle Balken: Das Portal ist dunkel und ruhig, und ein magentafarbenes Rechteck ueber die ganze Breite waere das lauteste Element auf jeder Seite — auch an den 360 Tagen im Jahr, an denen die Lage ruhig ist. Die Kante sagt dasselbe und schreit nicht. Die Stufe selbst steht daneben trotzdem in Volltonfarbe: Wer nur hinsieht, hat die Auskunft. Auf "kein Gebiet" (fc-lv-none) faellt das Banner damit von allein ins Graue zurueck — ohne eine einzige Sonderregel. */ .fc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 1.25rem 0; padding: .85rem 1.1rem; border-radius: var(--wh-r-sm, 8px); border: 1px solid var(--wh-line, rgba(255,255,255,.1)); border-left: 5px solid var(--fc-c); /* Zwei Mal background, und das ist Absicht: color-mix() kennt nicht jeder Browser. Kennt er es nicht, faellt die zweite Zeile als Ganzes weg — und ohne die erste stuende das Banner dann ohne Grund da. Die erste ist der Rueckfall, die zweite die Kuer. */ background: var(--wh-bg-raised, #191b1f); background: linear-gradient(90deg, color-mix(in srgb, var(--fc-c) 14%, transparent), transparent 60%), var(--wh-bg-raised, #191b1f); color: var(--wh-text, #f1f1f3); font-size: .95rem; line-height: 1.4; } .fc-banner-level { display: inline-block; padding: .2rem .6rem; border-radius: var(--wh-r-btn, 3px); background: var(--fc-c); color: var(--fc-fg); font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .fc-banner-sep { color: var(--wh-text-faint, rgba(255,255,255,.36)); } .fc-banner-upd { color: var(--wh-text-dim, rgba(255,255,255,.58)); font-variant-numeric: tabular-nums; } .fc-banner-head { font-weight: 600; } /* ═══ 2. DIE DREI KACHELN ══════════════════════════════════════════ Drei GLEICH GROSSE Spalten — 1fr und nicht auto, damit ein Tag mit langem Datum die anderen beiden nicht schmaler macht. Am Handy untereinander (ganz unten in der Media Query). Der Kartenstapel ist der Kern dieser Seite: .fc-map der Rahmen. position:relative, damit das Overlay einen Bezug hat, an dem es sich festmachen kann. .fc-map-base die Grundkarte. GEWOEHNLICH im Fluss — sie allein bestimmt die Hoehe. Waeren beide Bilder absolut, haette der Rahmen die Hoehe null. .fc-map-ov das Overlay. inset:0 zieht es auf genau denselben Rahmen, object-fit:fill fuellt ihn ohne Rand. object-fit:fill sieht nach dem falschen Wert aus und ist der richtige: Overlay und Grundkarte haben dieselben Abmessungen, also soll das Overlay genau auf die Karte gezogen werden. contain wuerde bei einem um ein Pixel abweichenden Seitenverhaeltnis einen Rand lassen und alle Gebiete um diesen Rand verschieben — ein Fehler, den man nicht sieht und der die Vorhersage falsch macht. Gedehnt um ein Pixel sieht niemand. */ .fc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; } .fc-tile { display: flex; flex-direction: column; padding: .9rem; border-radius: var(--wh-r-sm, 8px); border: 1px solid var(--wh-line, rgba(255,255,255,.1)); background: var(--wh-surface, rgba(255,255,255,.04)); text-align: center; } .fc-tile-day { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wh-text-faint, rgba(255,255,255,.36)); } .fc-tile-date { margin-top: .1rem; font-size: .95rem; font-weight: 600; color: var(--wh-text, #f1f1f3); font-variant-numeric: tabular-nums; } .fc-tile-level { margin: .45rem 0 .7rem; font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: .04em; color: var(--fc-c); text-shadow: 0 1px 12px color-mix(in srgb, var(--fc-c) 35%, transparent); } /* "Kein Gebiet" ist kein Schriftzug, der leuchtet: kleiner, ruhiger, ohne Schein. Er sagt, dass nichts zu melden ist — und soll nicht aussehen wie eine Meldung. */ .fc-tile-level.fc-lv-none { font-size: 1.05rem; font-weight: 600; text-shadow: none; } .fc-map { position: relative; margin-top: auto; overflow: hidden; border-radius: var(--wh-r-input, 4px); background: #0f1216; line-height: 0; } /* Seit ToDo #16 (26.08.2026) steckt die Grundkarte in einem : eine WebP-Zweitvariante mit dem PNG als Rueckfall. Das ist von Haus aus ein INLINE-Kasten. Ohne diese Zeile stuende zwischen .fc-map und dem Bild eine Zeilenbox — und damit die Zeilenhoehe des Elternteils unter der Karte, als schmaler Streifen in der Hintergrundfarbe. Das line-height:0 an .fc-map faengt den Fall zwar heute schon ab; die Regel hier macht ihn gar nicht erst moeglich, unabhaengig davon, was ein spaeteres Design an .fc-map schreibt. Alle Regeln zur Karte haengen weiterhin an der KLASSE .fc-map-base und nicht an der Verschachtelung — deshalb wirkt der zusaetzliche Kasten sonst nirgends. Wer hier einmal einen Selektor wie ".fc-map > img" einfuehrt, bricht die Kachel. Seit ToDo #42 (26.08.2026) gilt dieselbe Regel fuer ein ZWEITES : das des Overlays. Sie braucht dafuer keine Aenderung, und das ist kein Zufall, sondern die Probe darauf, dass sie richtig geschrieben ist. Fuer die Lage des Overlays aendert der zusaetzliche Kasten nichts. Das ist die heikelste Stelle der ganzen Seite, deshalb ausgeschrieben: .fc-map-ov ist position:absolute mit inset:0. Sein Bezugsrahmen ist der naechste Vorfahre MIT position — und das hat hier nur display:block, kein position. Der Bezug bleibt also .fc-map, exakt wie vor dem 26.08.2026. Das leere bleibt als Block ohne Inhalt im Fluss stehen. Es hat damit die Hoehe null und schiebt nichts; das line-height:0 an .fc-map deckt den Rest. Drei Aenderungen wuerden die Gebiete verschieben, und alle drei sehen nach Aufraeumen aus: position:relative an ".fc-map picture" — dann klebte das Overlay am leeren Kasten der Hoehe null statt an der Karte. display:contents am Overlay- — nimmt dem die Wirkung, das PNG kaeme zurueck. .fc-map-ov an das statt an das — dann laege das Bild ungedehnt in einem gedehnten Kasten. Die Klasse gehoert an das . Immer. */ .fc-map picture { display: block; } .fc-map-base { display: block; width: 100%; height: auto; } .fc-map-ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } /* Ohne Grundkarte: ein dunkles Feld mit Hinweis statt eines leeren Kastens. 4:3 ist geraten und nur da, damit die Kachel eine Hoehe hat — sobald eine echte Karte da ist, gibt sie das Verhaeltnis vor. */ .fc-map-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 1rem; border: 1px dashed var(--wh-line-strong, rgba(255,255,255,.18)); line-height: 1.4; } .fc-map-empty span { font-size: .78rem; color: var(--wh-text-faint, rgba(255,255,255,.36)); } /* ═══ 2b. DIE LIGHTBOX ZU DEN KACHELN ══════════════════════════════ Angeordnet am 25.08.2026: Ein Klick auf eine Tageskachel zeigt dieselbe Karte gross. Das Markup dazu steht in fcLightboxHtml() (includes/forecast.php) und wird vom Skript dort an den Seitenkoerper gehaengt. ── Warum hier feste Farben stehen ────────────────────────────── Ueberall sonst in dieser Datei kommen die Farben aus den Tokens des Designsystems. Die Lightbox kann das nicht: Ihr Rahmen sitzt zur Laufzeit direkt am , waehrend die Startseite die Tokens nur INNERHALB von .fc-home setzt (die Bruecke in index.php). Ein var(--wh-surface) waere dort leer. Ein dunkler Grund und weisse Schrift sind ohnehin das, was eine Lightbox will — in jeder der drei Umgebungen dasselbe. Die Stufenfarbe im Kopf ist die Ausnahme und funktioniert: Die .fc-lv-*-Regeln ganz oben stehen ohne Vorfahren-Bedingung, also traegt ein sein --fc-c auch am Seitenkoerper. ── Das Verhaeltnis 1125:1200 ─────────────────────────────────── Es wird nicht gerechnet, sondern vom Bild getragen: Die Grundkarte ist ein gewoehnliches mit width:auto und height:auto, begrenzt nur durch max-width/max-height. Damit behaelt sie ihr natuerliches Verhaeltnis, egal wie das Fenster steht, und .fc-lb-map schrumpft auf genau ihre Groesse. Das Overlay liegt mit inset:0 und object-fit:fill darauf — dasselbe Muster wie in der Kachel, aus demselben Grund (siehe oben). Die zweite max-height-Zeile mit dvh ist keine Doppelung: Auf dem iPhone rechnet Safari vh gegen den Schirm OHNE Adressleiste, das Bild waere unten angeschnitten. Browser ohne dvh ueberlesen die Zeile und behalten die vh-Zeile darueber. */ .fc-lb { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: zoom-out; } /* Der Attributselektor ist spezifischer als .fc-lb — deshalb gewinnt display:none, obwohl er hier oben drueber steht. Das Skript schaltet nur lb.hidden um und braucht keine Klasse. */ .fc-lb[hidden] { display: none; } .fc-lb-box { display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 100%; max-height: 96vh; max-height: 96dvh; cursor: auto; } .fc-lb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .1rem .5rem; padding: 0 3rem; font-size: .92rem; font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.85); text-align: center; } .fc-lb-day { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); } .fc-lb-sep { color: rgba(255,255,255,.3); } .fc-lb-level { font-weight: 800; letter-spacing: .03em; color: var(--fc-c, #ffffff); } /* "Kein Gebiet" traegt als Flaechenfarbe ein fast unsichtbares Weiss — als SCHRIFT auf schwarzem Grund waere das nicht lesbar. Derselbe Gedanke wie bei .fc-tile-level.fc-lv-none. */ .fc-lb-level.fc-lv-none { font-weight: 600; color: rgba(255,255,255,.6); } .fc-lb-map { position: relative; min-height: 0; overflow: hidden; border-radius: var(--wh-r-input, 4px); background: #0f1216; line-height: 0; } .fc-lb-base { display: block; width: auto; height: auto; max-width: 92vw; max-height: calc(92vh - 3rem); max-height: calc(92dvh - 3rem); } .fc-lb-ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; } .fc-lb-ov[hidden] { display: none; } /* 44 Pixel sind kein Geschmack, sondern das Mindestmass fuer eine Flaeche, die ein Daumen treffen soll. env(safe-area-inset-*) haelt den Knopf am iPhone unter der Kerbe. */ .fc-lb-x { position: absolute; top: max(.6rem, env(safe-area-inset-top)); right: max(.6rem, env(safe-area-inset-right)); z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.55); color: #ffffff; font-size: 1.7rem; line-height: 1; cursor: pointer; } .fc-lb-x:hover { background: rgba(0,0,0,.85); border-color: rgba(255,255,255,.45); } .fc-lb-x:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; } /* Nur die oeffentliche Kachel ist anklickbar — im Adminpanel setzt fcTileHtml() das data-Attribut nicht, und dort bleibt der Zeiger ein Zeiger. Ein Zeigefinger auf etwas, das nichts tut, ist ein Versprechen, das die Seite bricht. */ .fc-tile[data-fc-zoom] { cursor: zoom-in; } .fc-tile[data-fc-zoom]:focus-visible { outline: 2px solid var(--wh-gold, #c8a24a); outline-offset: 2px; } /* ═══ 3.+4. DIE BEIDEN TABELLEN ════════════════════════════════════ Beide liegen in .fc-scroll. Der Grund steht in wh-system.css schon einmal (html,body{overflow-x:clip}): Eine Tabelle, die breiter ist als das Handy, darf die SEITE nicht breiter machen — sonst verrutscht alles andere mit. Sie scrollt in ihrem eigenen Kasten oder gar nicht. */ .fc-block { margin: 1.5rem 0; } .fc-block > h2 { margin: 0 0 .2rem; font-size: 1.25rem; } .fc-block-sub { margin: 0 0 .7rem; font-size: .85rem; color: var(--wh-text-dim, rgba(255,255,255,.58)); } .fc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--wh-r-input, 4px); } .fc-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; } .fc-tbl th, .fc-tbl td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--wh-line, rgba(255,255,255,.1)); vertical-align: middle; } .fc-tbl tr:last-child th, .fc-tbl tr:last-child td { border-bottom: 0; } .fc-tbl th { color: var(--wh-text-dim, rgba(255,255,255,.58)); font-weight: 600; white-space: nowrap; } .fc-tbl thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wh-text-faint, rgba(255,255,255,.36)); } /* Die farbige Zelle — in der Skala das Stufenfeld, in der Tag-1-bis-8-Tabelle die Aussage des Tages. Beide dieselbe Klasse, weil sie dasselbe sind: ein Wert in seiner Farbe. */ .fc-cell { background: var(--fc-c); color: var(--fc-fg); font-weight: 700; white-space: nowrap; } /* "Kein Gebiet" bleibt gedaempft — keine Flaeche, nur Text. Ein grauer Balken hat dieselbe Wucht wie ein roter und meint das Gegenteil. */ .fc-cell.fc-lv-none { background: transparent; color: var(--wh-text-faint, rgba(255,255,255,.36)); font-weight: 500; } .fc-scale-pct { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wh-text, #f1f1f3); } .fc-scale-name { color: var(--wh-text, #f1f1f3); } /* ── Die beiden Tornado-Schraffuren unter Level 5 ───────────── Sie sind keine weitere Stufe, sondern ein Muster, das im Vorbild UEBER einem schon gefaerbten Gebiet liegt. Deshalb bekommen sie auch keinen Balken in Stufenbreite, sondern ein Quadrat: eine Musterprobe. Ein voller farbiger Balken haette die Wucht einer sechsten Stufe und wuerde genau das Falsche behaupten. Gebaut aus repeating-linear-gradient und sonst nichts. Eine Bilddatei waere ein zweiter Request fuer zwei Dutzend Pixel, und sie liesse sich weder umfaerben noch scharf skalieren. Sig. Severe Tornado weisse Diagonalstreifen, 45 Grad Extreme Severe Tornado tuerkises Kreuzraster, 45 und -45 Grad Die Periode ist 8 px bei 3 px Strich. Enger wird das Muster auf einem Handydisplay zu einer einfarbigen Flaeche — dann sieht der Leser zwei Quadrate und keinen Unterschied. */ /* Das Feld selbst bleibt leer und durchsichtig: .fc-cell setzt sonst var(--fc-c) als Flaeche, und die gibt es in dieser Zeile nicht. */ .fc-tor-cell { background: transparent; } .fc-tor-sw { display: inline-block; width: 2.2rem; height: 1.5rem; border-radius: 2px; vertical-align: middle; background-color: var(--wh-bg, #131417); } .fc-tor-sig { border: 1px solid rgba(255, 255, 255, .55); background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) 3px, transparent 3px, transparent 8px ); } /* Zwei Lagen desselben Musters, die zweite gespiegelt. Beide sind an ihren Luecken durchsichtig, also kreuzen sie sich zum Raster — das ist der ganze Trick, und er braucht kein zweites Element. */ .fc-tor-ext { border: 1px solid #2EE6E6; background-image: repeating-linear-gradient(45deg, #2EE6E6 0, #2EE6E6 3px, transparent 3px, transparent 8px), repeating-linear-gradient(-45deg, #2EE6E6 0, #2EE6E6 3px, transparent 3px, transparent 8px); } /* Die Beschriftungen. Die zweite traegt die Farbe ihres Musters und steht fett da — nicht als Zierde: Sie ist die schaerfste Aussage, die diese Skala kennt, und das Vorbild hebt sie genauso hervor. */ .fc-tor-sig-lbl { color: var(--wh-text, #f1f1f3); } .fc-tor-ext-lbl { color: #2EE6E6; font-weight: 700; } .fc-foot { margin: .6rem 0 0; font-size: .78rem; color: var(--wh-text-faint, rgba(255,255,255,.36)); } /* Die Tag-Spalte schmal halten, damit die farbige Zelle die Breite bekommt — sie ist die Auskunft, "Tag 4" ist nur die Beschriftung. */ .fc-days-tbl th:first-child { width: 6.5rem; } /* ── Die Laenderspalte ───────────────────────────────────────────── Flaggen, sonst nichts. Der Landesname steht im title- und im aria-label-Attribut jeder einzelnen — ausgeschrieben waere die Zelle bei acht Laendern breiter als die halbe Tabelle. Die Zeile darf hier NICHT umbruchgesperrt werden (kein white-space:nowrap wie bei .fc-cell): Acht Flaggen in einer Zeile sprengten auf dem Handy die Tabelle, und die Tabelle scrollt zwar in .fc-scroll, aber lesbarer ist ein Umbruch. */ .fc-days-tbl td:last-child { width: 40%; } .fc-ctry { display: inline-flex; flex-wrap: wrap; gap: .15rem .3rem; align-items: center; line-height: 1.4; } .fc-ctry-f { font-size: 1.05rem; cursor: help; } .fc-ctry-none { color: var(--wh-text-faint, rgba(255,255,255,.36)); } /* Die Legendenzeile unter der Risiko-Skala: Sie sagt, dass die Tabelle darunter fuer Tag 4 bis 8 eine ANDERE Skala benutzt. Ohne sie waere "30% Severe" neben "LEVEL 3" ein Widerspruch, den der Leser selbst aufloesen muesste. */ .fc-scale-mid { margin: .35rem 0 0; font-size: .78rem; line-height: 1.6; color: var(--wh-text-dim, rgba(255,255,255,.58)); } .fc-scale-mid .fc-chip { display: inline-block; margin: 0 .15rem; padding: .05rem .4rem; border-radius: var(--wh-r-input, 4px); background: var(--fc-c); color: var(--fc-fg); font-weight: 700; font-size: .72rem; white-space: nowrap; } /* ═══ 5. GUELTIGKEITSZEILE ═════════════════════════════════════════ */ .fc-validity { margin: 1.1rem 0; padding: .7rem .9rem; border-left: 3px solid var(--wh-line-strong, rgba(255,255,255,.18)); font-size: .85rem; line-height: 1.7; color: var(--wh-text-dim, rgba(255,255,255,.58)); } .fc-validity strong { color: var(--wh-text, #f1f1f3); font-weight: 600; } .fc-validity .fc-vd { white-space: nowrap; } /* ═══ 6. WARNTEXT UND ARCHIV ═══════════════════════════════════════ Diese Regeln standen bis zum 25.08.2026 in dashboard.css. Sie sind hierher gezogen, weil jetzt ALLES mit dem Praefix fc- an einem Ort steht — und weil die Archivzeile ihre Farbe ab sofort aus derselben Quelle nimmt wie Banner, Kachel und Tabelle (--fc-c). Vorher gab es dafuer einen zweiten Satz Klassen (fc-l0 … fc-l3) mit eigenen Toenen; bei sechs Stufen waeren daraus zwei Skalen geworden, die sich auseinanderentwickeln. */ .fc-post { padding: 1.5rem 1.75rem; border-radius: var(--wh-r, 12px); border-left: 4px solid var(--fc-c, rgba(255,255,255,.14)); } .fc-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .7rem; } .fc-post-head h2 { margin: 0; font-size: 1.35rem; } .fc-badge { display: inline-block; padding: .25rem .7rem; border-radius: var(--wh-r-pill, 999px); background: var(--fc-c); color: var(--fc-fg); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .fc-issued { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--wh-text-dim, rgba(255,255,255,.58)); } .fc-body { margin-top: .3rem; font-size: .95rem; line-height: 1.7; } .fc-archive { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; } .fc-arch-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.1rem; border-radius: var(--wh-r, 12px); border-left: 4px solid var(--fc-c, rgba(255,255,255,.14)); color: var(--wh-text, #f1f1f3); text-decoration: none; transition: transform .2s ease; } .fc-arch-row:hover { transform: translateX(2px); } .fc-arch-date { flex: 0 0 auto; font-size: .8rem; color: var(--wh-text-dim, rgba(255,255,255,.58)); font-variant-numeric: tabular-nums; } .fc-arch-title { flex: 1 1 auto; font-weight: 600; font-size: .95rem; } /* ═══ ADMINPANEL ═══════════════════════════════════════════════════ Nur was das Panel zusaetzlich braucht: die Bedienfelder UNTER den Kacheln. Die Kacheln selbst sind oben schon fertig — genau das war der Auftrag. .fc-adm-tiles setzt die Kacheln und ihre Formularfelder in dieselbe Rasterspalte, damit Feld und Kachel zusammenbleiben, wenn das Fenster schmal wird. */ .fc-adm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.2rem; } .fc-adm-col { display: flex; flex-direction: column; gap: .6rem; } .fc-adm-col .fc-tile { margin: 0; } .fc-adm-fields { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; border-radius: var(--wh-r-input, 4px); border: 1px solid var(--wh-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.025); } .fc-adm-fields label { display: block; margin-bottom: .15rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wh-text-faint, rgba(255,255,255,.36)); } .fc-adm-fields input, .fc-adm-fields select { width: 100%; } .fc-adm-note { margin: 0; font-size: .75rem; color: var(--wh-text-faint, rgba(255,255,255,.36)); } /* Die Grundkarte gilt fuer ALLE Forecasts — sie gehoert deshalb sichtbar nicht zum Formular des einen, der gerade offen ist. Der abgesetzte Rahmen ist die Ansage. */ .fc-adm-base { margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: var(--wh-r-sm, 8px); border: 1px dashed var(--wh-line-strong, rgba(255,255,255,.18)); background: rgba(255,255,255,.02); } .fc-adm-base h3 { margin: 0 0 .35rem; font-size: 1rem; } .fc-adm-base-prev { max-width: 320px; margin-top: .7rem; border-radius: var(--wh-r-input, 4px); border: 1px solid var(--wh-line, rgba(255,255,255,.1)); } .fc-adm-base-prev img { display: block; width: 100%; height: auto; border-radius: inherit; } .fc-adm-rows { display: flex; flex-direction: column; gap: .5rem; } .fc-adm-row { display: grid; grid-template-columns: 5rem minmax(9rem, 14rem) 1fr; align-items: center; gap: .6rem; } .fc-adm-row > span { font-weight: 600; font-size: .85rem; color: var(--wh-text-dim, rgba(255,255,255,.58)); } /* ── Die Laenderauswahl im Panel ─────────────────────────────────── Ein
und KEIN