/* FUG - Fernwärme Ulm Template creation Date: 2026-10-23 Author: Sebastian Osinski http://www.sebbi.net https://ddm-friends.de */ /* =========================================================================== FARBEN Verbindlich: docs/design-guideline.md (Kapitel 2). Kurzfassung: FUG-Rot #c20016 Marke, Schaltflaechen, Links, aktive Zustaende, Kennzahlen - max. ca. 3 % der Seite, dazu hoechstens ein rotes Band je Seite. Graustufen kuehles "Slate"-Grau: ink #1d2127 (Headlines, dunkle Flaechen), #454b54 Fliesstext, #646a74 Metatext, darunter Linien und helle Flaechen. Funktion Orange (Waerme, Warnung), Gruen (Erneuerbare, Erfolg), Blau (nur Grafiken/Netzplan: Ruecklauf, Strom) - nur mit Bedeutung, nie als Schmuck. Kontraste (WCAG AA, Fliesstext ab 4.5:1): Rot auf Weiss/lg/g 6.4 / 5.8 / 5.3 Weiss auf Rot/Dunkelrot 6.4 / 8.5 dg auf Weiss/lg/g 8.8 / 8.0 / 7.4 muted auf Weiss/lg 4.9 / 5.0 Weiss auf ink 16.2 #b9bec6 auf ink 8.7 ink auf Orange 7.6 green-text auf Weiss 5.1 VERBOTEN: Rot auf ink (2.5), weisse Schrift auf Orange/Gruen, Lesetext in mg. Je Farbe gibt es dasselbe Muster: .x_bg Hintergrund .x Textfarbe .x_highlight faerbt Headlines und Hervorhebungen im Abschnitt .x_links faerbt die Links im Abschnitt .x_hover faerbt Text und Rahmen beim Ueberfahren .x_border Rahmenfarbe .x_important ueberschreibt alles darunter (Notnagel, sparsam einsetzen) Dunkle Flaechen (ink, dg2, Rot) bekommen zusaetzlich .ddm_ondark: Text, Headlines, Dachzeilen, Links und Fokusring werden hell (siehe unten). Die Werte stehen als Variablen bereit, damit Module und Abschnitte sie nutzen koennen, ohne den Hexwert zu wiederholen. =========================================================================== */ :root{ --color-red: #c20016; --color-dred: #9e0012; /* Hover/aktiv zu Rot */ --color-red-tint: #fdf1f2; /* sehr helle rote Flaeche: Hinweise, Auswahl */ --color-orange: #ff9933; /* Waerme in Grafiken, Warnhinweise (dunkle Schrift) */ --color-green: #75ae1c; /* Erneuerbare, Erfolg (Flaechen/Icons) */ --color-green-text: #4f7a12; /* Erfolg als Text */ --color-green-tint: #f1f7e8; /* Flaeche Erfolgshinweis */ --color-blue: #1f6fb2; /* NUR Grafiken/Netzplan: Ruecklauf, Strom */ --color-ink: #1d2127; /* Headlines, dunkle Flaechen (Footer) */ --color-dg2: #2b3038; /* Text auf Akzentflaechen, zweite dunkle Flaeche */ --color-dg: #454b54; /* Fliesstext */ --color-muted: #646a74; /* Metatext: Datum, Bildunterschrift, Hinweis */ --color-mg: #8a909a; /* Icons, deaktiviert - kein Lesetext */ --color-line: #d5d9de; /* Linien, Trenner, Feldrahmen */ --color-g: #e9ebee; /* graue Abschnittsflaeche, Karten-Hover */ --color-lg: #f3f4f6; /* helle Abschnittsflaeche, Tabellenkopf */ --color-lg2: #f8f9fa; /* sehr helle Flaeche: Formulare, Platzhalter */ --color-white: #ffffff; --color-black: #000000; /* Rollen - werden von .ddm_ondark umgestellt */ --color-head: var(--color-ink); /* Headlines */ --color-eyebrow: var(--color-red); /* Dachzeile (h6 / .font_h6) */ --color-keyword: var(--color-red); /* Schlagwort in Headlines (.ddm_keyword) */ --color-keyword-bar: transparent; /* Balken unter dem Schlagwort (nur dunkel) */ --color-meta: var(--color-muted); /* .muted */ --color-focus: var(--color-red); /* Fokusring */ } /* ===== WEISS ===== */ .white_bg, .white_bg_onHover:hover, body, html{ background-color: var(--color-white); } .white, .white_highlight b, .white_highlight strong, .white_highlight h1, .white_highlight h2, .white_highlight h3, .white_highlight h4, .white_highlight h5, .white_highlight h6, .white_links a, .white_hover:hover{ color: var(--color-white); } .white_highlight{ --color-head: var(--color-white); } .white_important *{ color: var(--color-white) !important; } .white_border, .white_hover:hover{ border-color: var(--color-white); } .white_trans{ background: rgba(255, 255, 255, 0.9); } .white_trans:hover{ background: rgba(255, 255, 255, 0.97); } /* ===== TRANSPARENT ===== */ .transparent{ background-color: transparent; } /* ===== ROT #c20016 ===== */ .red_bg, .red_bg_onHover:hover{ background-color: var(--color-red); } .red, .red_highlight b, .red_highlight strong, .red_highlight h1, .red_highlight h2, .red_highlight h3, .red_highlight h4, .red_highlight h5, .red_highlight h6, .red_links a, .red_hover:hover{ color: var(--color-red); } .red_highlight{ --color-head: var(--color-red); } .red_important *{ color: var(--color-red) !important; } .red_border, .red_hover:hover, .contentbutton.bordered.red_border{ border-color: var(--color-red); } .red_trans{ background: rgba(194, 0, 22, 0.9); } /* ===== DUNKELROT #9e0012 (Hover) ===== */ .dred_bg, .dred_bg_onHover:hover{ background-color: var(--color-dred); } .dred, .dred_links a, .dred_hover:hover{ color: var(--color-dred); } .dred_border, .dred_hover:hover{ border-color: var(--color-dred); } /* ===== ROT HELL #fdf1f2 (Hinweise, Auswahl) ===== */ .redtint_bg, .redtint_bg_onHover:hover{ background-color: var(--color-red-tint); } /* ===== ORANGE #ff9933 (nur mit dunkler Schrift) ===== */ .orange_bg, .orange_bg_onHover:hover{ background-color: var(--color-orange); } .orange, .orange_highlight b, .orange_highlight strong, .orange_highlight h1, .orange_highlight h2, .orange_highlight h3, .orange_highlight h4, .orange_highlight h5, .orange_highlight h6, .orange_links a, .orange_hover:hover{ color: var(--color-orange); } .orange_important *{ color: var(--color-orange) !important; } .orange_border, .orange_hover:hover, .contentbutton.bordered.orange_border{ border-color: var(--color-orange); } /* ===== GRUEN #75ae1c / #4f7a12 (Text) ===== */ .green_bg{ background-color: var(--color-green); } .greentint_bg{ background-color: var(--color-green-tint); } .green, .green_links a{ color: var(--color-green-text); } .green_border{ border-color: var(--color-green); } /* ===== BLAU #1f6fb2 (nur Grafiken/Netzplan) ===== */ .blue_bg{ background-color: var(--color-blue); } .blue{ color: var(--color-blue); } .blue_border{ border-color: var(--color-blue); } /* ===== INK #1d2127 (Headlines, dunkle Flaechen) ===== */ .ink_bg{ background-color: var(--color-ink); } .ink, .ink_links a, .ink_highlight b, .ink_highlight strong, .ink_highlight h1, .ink_highlight h2, .ink_highlight h3, .ink_highlight h4, .ink_highlight h5, .ink_highlight h6, .ink_hover:hover{ color: var(--color-ink); } .ink_highlight{ --color-head: var(--color-ink); } .ink_border{ border-color: var(--color-ink); } /* ===== DUNKELGRAU #454b54 (Fliesstext) ===== */ .dg_bg{ background-color: var(--color-dg); } .dg, .dg_links a, .dg_highlight b, .dg_highlight strong, .dg_highlight h1, .dg_highlight h2, .dg_highlight h3, .dg_highlight h4, .dg_highlight h5, .dg_highlight h6, .dg_hover:hover, body, html{ color: var(--color-dg); } .dg_important *{ color: var(--color-dg) !important; } .dg_border{ border-color: var(--color-dg); } /* ===== SEHR DUNKELGRAU #2b3038 ===== */ .dg2_bg{ background-color: var(--color-dg2); } .dg2, .dg2_links a, .dg2_highlight b, .dg2_highlight strong, .dg2_highlight h1, .dg2_highlight h2, .dg2_highlight h3, .dg2_highlight h4, .dg2_highlight h5, .dg2_highlight h6, .dg2_hover:hover{ color: var(--color-dg2); } .dg2_border{ border-color: var(--color-dg2); } /* ===== METATEXT #646a74 ===== */ .muted, .muted_links a{ color: var(--color-meta); } /* ===== MITTELGRAU #8a909a (Icons, deaktiviert) ===== */ .mg_bg{ background-color: var(--color-mg); } .mg{ color: var(--color-mg); } .mg_border{ border-color: var(--color-mg); } /* ===== GRAU #e9ebee (Flaeche) ===== */ .g_bg{ background-color: var(--color-g); } .g_border{ border-color: var(--color-g); } /* ===== HELLGRAU #f3f4f6 ===== */ .lg_bg{ background-color: var(--color-lg); } .lg_border{ border-color: var(--color-lg); } /* ===== SEHR HELLGRAU #f8f9fa ===== */ .lg2_bg{ background-color: var(--color-lg2); } .lg2_border{ border-color: var(--color-lg2); } /* ===== LINIE #d5d9de ===== */ .line_bg{ background-color: var(--color-line); } .line_border{ border-color: var(--color-line); } /* ===== SCHWARZ ===== */ .black_bg{ background-color: var(--color-black); } .black, .black_links a, .black_hover:hover{ color: var(--color-black); } .black_border{ border-color: var(--color-black); } /* =========================================================================== DUNKLE FLAECHEN
(auch dg2_bg, red_bg, dred_bg): Text weiss, Links weiss (Linie beim Ueberfahren), Dachzeile weiss, Schlagwort weiss mit rotem Balken, Fokusring weiss. Steht nach den *_links-Klassen, damit es .red_links auf dunklen Flaechen schlaegt. =========================================================================== */ .ddm_ondark{ --color-head: var(--color-white); --color-eyebrow: var(--color-white); --color-keyword: var(--color-white); --color-keyword-bar: var(--color-red); --color-meta: #b9bec6; --color-focus: var(--color-white); color: var(--color-white); } .ddm_ondark a{ color: var(--color-white); } .red_bg.ddm_ondark, .dred_bg.ddm_ondark{ --color-keyword-bar: rgba(255, 255, 255, 0.6); --color-meta: var(--color-red-tint); } /* ===== ABDUNKLUNG (Bild-Overlays, Ton ink) ===== */ .overlay_mask{ background-color: rgba(29, 33, 39, 0.4); } .overlay_mask.light{ background-color: rgba(29, 33, 39, 0.2); } .overlay_mask.middark{ background-color: rgba(29, 33, 39, 0.6); } .overlay_mask.dark{ background-color: rgba(29, 33, 39, 0.8); } .overlay_mask.light.darkenOnHover:hover{ background-color: rgba(29, 33, 39, 0.4); } /* Verlauf fuer Text auf Fotos (Hero): von links dunkel nach rechts frei. Bis zum Ende der Textspalte (ca. 60 % der Breite) bleibt er >= 0.65 dicht, damit weisse Schrift auch vor hellem Himmel >= 4.5:1 erreicht; mobil (Text ueber die volle Breite) gleichmaessig dicht, siehe responsive.css. */ .overlay_grad{ position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(29, 33, 39, 0.85) 0%, rgba(29, 33, 39, 0.72) 55%, rgba(29, 33, 39, 0) 90%); }