/* =============================================================== /einsatzgebiete/ — SEITENLOKALE REGELN (EIN-S-01 bis EIN-S-07) Unveraendert aus dem CURRENT-Prototyp uebernommen, Reihenfolge gleich. =============================================================== */ /* ================================================================ /einsatzgebiete/ - Phase 10.3D, Fassung 2 Seitenspezifische Regeln EIN-S-01 bis EIN-S-08. Grundlage: Designsystem 9B.1 (unveraendert), Template T3E nach 9B.2 Abschnitt E (Orientierungsseite, drei Ebenen, keine Ortsliste), T3-Rhythmus wie auf der CURRENT-Technikseite, Blatt 6 der 9B.2-Seitenmatrix, Grenzen 0-639 / 640-1023 / ab 1024. ================================================================ */ /* --------------------------------------------------------------- EIN-S-01 BUEHNE GEGENSTAND: dunkle T3-Buehne der Einsatzgebietsseite. AUSGANGSPROBLEM: Die globale .hero-Komponente ist auf den typografischen Marken-Hero der Startseite ausgelegt (Claimgroesse, Kickerbreite). Eine Orientierungsseite braucht eine flachere Buehne mit H1 und Einordnungssatz, ohne CTA und ohne Bild. LOESUNG: eigene Klasse mit reduziertem Innenabstand und eigener H1-Kurve; der H1 "Einsatzgebiet: Mittelhessen und darueber hinaus" bleibt wortgleich. Die angeschnittene V-Markenflaeche bleibt die des Designsystems - Deckkraft und Anschnitt werden NICHT veraendert. WARUM KEINE GLOBALE AENDERUNG: alle Selektoren haengen an .einhero. --------------------------------------------------------------- */ .einhero{padding:var(--s9) 0 calc(var(--s8) + 30px)} .einhero .in{max-width:var(--wrap)} .einhero .heroin{max-width:880px} .einhero .lbl{color:var(--gold);margin-bottom:var(--s4)} .einhero h1{margin:0 0 var(--s5);font-size:clamp(27px,4.4vw,48px); font-weight:600;letter-spacing:-.024em;line-height:1.1} .einhero .lead{color:var(--n300);max-width:60ch} .einhero .diag{background:#fff} .einhero .herogrid{display:block} /* --------------------------------------------------------------- EIN-S-02 ZONENBAND - DREI INFORMATIONSSTUFEN, KEINE KARTE GEGENSTAND: die Gebietsdarstellung in M3. AUSGANGSPROBLEM: Phase 7 verlangt eine Gebietsdarstellung ohne Linkliste, 9B.2 nennt drei Ebenen. Jede geografische Darstellung - Karte, Kreis, Flaeche - wuerde eine harte Einsatzgrenze behaupten, die es nicht gibt. LOESUNG: drei Informationszeilen aus Label, Gebiet und Erklaerung. Ab 1024 px dreispaltig, darunter gestapelt in der Reihenfolge Label, Gebiet, Erklaerung. Keine Flaeche, kein Kreis, kein Radius, keine Kartenoptik. F2: mehr vertikaler Raum, kraeftigere Gebietszeile, durchgehende linke Statuskante statt nur einer Punktmarke - die Stufen sollen als Struktur lesbar sein, nicht als Aufzaehlung. WARUM KEINE GLOBALE AENDERUNG: neue Additivklasse ohne Bezug zu .facts. --------------------------------------------------------------- */ .einzone{border-top:1px solid var(--n200);margin-top:var(--s6)} .einzone .z{display:grid;grid-template-columns:1fr;gap:10px; padding:var(--s6) 0 var(--s6) var(--s5);border-bottom:1px solid var(--n200); position:relative} /* Durchgehende Statuskante links - Farbe je Stufe in EIN-S-03. */ .einzone .z::before{content:"";position:absolute;left:0;top:var(--s5);bottom:var(--s5); width:3px;border-radius:2px} /* Die Dreispaltigkeit schaltet an der KANONISCHEN Desktopgrenze 1024 px, nicht an einem eigenen Zwischenwert: bei 768 px blieben fuer die Erklaerungsspalte nur rund 196 px, was die Zeilen auf drei bis vier Woerter zusammendraengt. Im gesamten Tabletbereich bleibt die gestapelte Form. Keine neue Breakpointfamilie. */ @media(min-width:1024px){ .einzone .z{grid-template-columns:minmax(0,190px) minmax(0,270px) minmax(0,1fr); gap:var(--s6);align-items:start;padding:var(--s7) 0 var(--s7) var(--s6)} .einzone .z::before{top:var(--s6);bottom:var(--s6)} } .einzone .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; line-height:1.4;padding-top:3px} .einzone .g{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.012em} .einzone .e{font-size:15px;line-height:1.6;color:var(--n700);max-width:52ch} /* --------------------------------------------------------------- EIN-S-03 STATUSDIFFERENZ IM ZONENBAND GEGENSTAND: die drei Stufen duerfen nicht gleich laut sprechen. AUSGANGSPROBLEM: Schwerpunkt, weitere Region und projektbezogene Einsaetze haben unterschiedliche Belegstaerke. Eine einheitliche Typografie wuerde alle drei als gleichwertige Tatsachenbehauptung lesen lassen. LOESUNG: abgestufte Statuskante und Textfarbe - Schwerpunkt rot und in Ink, weitere Region gold und in Ink, projektbezogene Stufe neutral und gedaempft. Die Stufung ist Informationsgewicht, KEINE Entfernungsskala. --------------------------------------------------------------- */ .einzone .z1 .k{color:#181716} .einzone .z1::before{background:var(--red)} .einzone .z2 .k{color:#181716} .einzone .z2::before{background:var(--gold)} .einzone .z3 .k{color:#181716} .einzone .z3::before{background:var(--n300)} /* Kontrastmessung: n600 auf dem Flaechenton n100 ergibt 5,16:1 und erfuellt AA auch fuer die 11-px-Versalien des Labels. n500 waere mit 3,35:1 zu schwach gewesen; die Abstufung traegt stattdessen die hellere Statuskante in n300. */ .einzone .z3 .g{font-weight:500;color:var(--n700)} /* --------------------------------------------------------------- EIN-S-04 BELEGZEILE IM ZONENBAND - IN FASSUNG 2 ENTFALLEN In Fassung 1 stand unter Stufe 2 eine kleinere Belegzeile mit einem realen Ortsnamen. Der Nutzer hat die oeffentliche Ortsnennung fuer Fassung 2 zurueckgezogen; der Fakt bleibt intern dokumentiert. Da die Regel damit keinen Gegenstand mehr hat, wird sie NICHT als toter Selektor mitgefuehrt. Die Nummer bleibt vergeben, damit die Historie eindeutig bleibt. --------------------------------------------------------------- */ /* --------------------------------------------------------------- EIN-S-05 LESESPALTE DER ERKLAERENDEN MODULE GEGENSTAND: Textstrecken in M2, M4 und M5. AUSGANGSPROBLEM: Die Seite erklaert eine Logik; ueber die volle Wrapbreite entstuenden Zeilen jenseits von 110 Zeichen. LOESUNG: Lesespalte 64 Zeichen mit Absatzabstand aus der Abstandsskala. .narrow (760 px) und .maxtext (62ch) bleiben unveraendert. --------------------------------------------------------------- */ .einflow{max-width:64ch} .einflow p + p{margin-top:var(--s5)} /* EIN-S-05b INLINE-LEISTUNGSLINK IM FLIESSTEXT AUSGANGSPROBLEM (am realen Render gemessen): .tlink ist global als eigenstaendiger Verweis gebaut - display:inline-flex, feste 15 px, padding 7px 0 6px. Innerhalb eines normalen Absatzes (16 px) faellt das kaum auf; in einem .lead-Absatz der Lesespalte (Desktop 20 px, Mobil 17 px) erzeugt es drei sichtbare Fehler: der Link ist kleiner als der Satz, die Linkzeile wird 37 px hoch gegen 26,35 px Zeilenhoehe - die Zeilenabstaende innerhalb EINES Absatzes werden ungleich - und der inline-flex-Kasten ist nicht umbruchfaehig. LOESUNG: innerhalb der Lesespalte wird der Link wieder zu normalem Inline-Text. Farbe und Schriftschnitt - das eigentliche Linksignal - bleiben unveraendert, ebenso das Hoververhalten der globalen Regel. F2: Der Selektor gilt fuer ALLE Absaetze der Lesespalte, nicht nur fuer .lead - der neue Grundreinigungslink steht in einem normalen Absatz und braucht dieselbe Behandlung. WARUM KEINE GLOBALE AENDERUNG: die globale .tlink-Regel bleibt unangetastet; der Selektor greift nur in der Lesespalte dieser Seite. Der gleiche Fall auf anderen Seiten ist damit ausdruecklich NICHT mitrepariert - er gehoert in die Systempruefung. */ .einflow p .tlink{display:inline;font-size:inherit;line-height:inherit;padding:0; border-bottom-width:1px} /* --------------------------------------------------------------- EIN-S-06 MOBILE BOTTOM BAR GEGENSTAND: Sichtbarkeit der globalen Bottom Bar auf /einsatzgebiete/. AUSGANGSPROBLEM: Die globale .mbar-Regel zeigt die Bar ab max-width 960px und widerspricht der kanonischen Mobilgrenze - dokumentierter Phase-13-Systempunkt. LOESUNG: wie auf Kontakt- und Ueber-uns-Seite steuert die Seite ausschliesslich das hidden-Attribut: sichtbar nur bis 639 px, erst nach der Buehne, verborgen sobald der Abschluss-CTA im Bild ist. WARUM KEINE GLOBALE AENDERUNG: die globale Regel bleibt unangetastet. --------------------------------------------------------------- */ .einbar a{flex:1 1 0;justify-content:center;text-align:center} /* ================================================================ EIN-S-07 — STANDORTGRAFIK (ausgeliefert ab Visual-Patch 24.09.2026) Deutschland als geografischer Kontext, Hessen als benannte regionale Einordnung, Marburg als Sitz. Querformatige Komposition: Karte und Beschriftung nebeneinander, damit der Kopfblock niedrig bleibt. Keine Flaeche, kein Kreis, kein Radius, keine Heatmap, kein Pfeil, keine weiteren Orte, keine Entfernungsangabe. Reichweite traegt ausschliesslich der Seiteninhalt. ================================================================ */ /* Kopfbereich von M3 — ab 1024 px zweispaltig, darunter gestapelt. align-items:center haelt Text und Grafik optisch auf einer Achse. */ .zonehead{display:grid;grid-template-columns:1fr;gap:var(--s7)} @media(min-width:1024px){ .zonehead{grid-template-columns:minmax(0,1fr) minmax(0,400px); align-items:center;gap:var(--s8)} } .geo2{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)} /* ab 360 px steht die Beschriftung neben der Karte statt darunter — das haelt den Block auch mobil niedrig. Unter 360 px reicht die Breite dafuer nicht. */ @media(min-width:360px){ .geo2{flex-direction:row;align-items:center;gap:var(--s4)} } @media(min-width:640px){ .geo2{gap:var(--s5)} } .geo2 .map{position:relative;flex:0 0 auto;width:175px} @media(min-width:640px){ .geo2 .map{width:205px} } .geo2 .map svg{width:100%;height:auto;display:block;overflow:visible} /* Deutschland — geografischer Kontext. 3,56:1 auf n50: als informations- tragendes Element sichtbar, ohne zum Hauptmotiv zu werden. */ .geo2 .de{fill:none;stroke:var(--n500);stroke-width:1;stroke-linejoin:round; vector-effect:non-scaling-stroke} /* Hessen — regionale Einordnung als gestrichelte Kontur, KEINE Flaeche. Die Strichelung ist administrative Orientierung und bedeutet nichts ueber Reichweite. */ .geo2 .he{fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round; stroke-dasharray:6 4;vector-effect:non-scaling-stroke} /* Marburg — staerkstes Element der Grafik nach der Ueberschrift. Bewusst achsenparallel: die Kippung der Markenflaeche wirkt bei 6 px Kantenlaenge nicht als Markenzitat, sondern als Ungenauigkeit. Der helle Rand haelt den Marker ueber der gestrichelten Kontur sauber. */ .geo2 .mkm{fill:var(--red);stroke:var(--n50);stroke-width:1.6;paint-order:stroke} /* Beschriftung der Hessenkontur: mittig ueber der Nordspitze, mit kurzem Bezugsstrich. Unterhalb der Kontur waere die Beschriftung in die westliche Aussengrenze gelaufen - gemessen 0 px Freiraum. Oberhalb sind es 9,6 px. #7A4F00 ist der dunkle Ockerton des Designsystems, hier ausschliesslich als Beschriftungsfarbe. 6,77:1 auf n50. */ .geo2 .lblhe{position:absolute;left:39.3%;top:38.0%;transform:translateX(-50%); font-size:11px;font-weight:600;letter-spacing:.04em;color:#7A4F00; white-space:nowrap;line-height:1} /* Bezugsstrich der Beschriftung — Haarlinie, kein Pfeil, keine Spitze. */ .geo2 .lblink{fill:none;stroke:#7A4F00;stroke-width:1;vector-effect:non-scaling-stroke} .geo2 .leg{min-width:0} .geo2 .cap{display:flex;align-items:flex-start;gap:9px;margin-top:var(--s3)} .geo2 .cap .g{width:9px;height:9px;flex:0 0 auto;background:var(--red); position:relative;top:6px} .geo2 .ort{display:block;font-size:17px;font-weight:600;line-height:1.3} .geo2 .zus{display:block;font-size:12.5px;line-height:1.45;color:var(--n600);margin-top:2px} /* --------------------------------------------------------------- PLT-01 POC — EINZIGE NEU HINZUGEFUEGTE REGEL Das ausgelagerte Kartenbild wird wie zuvor das Inline-SVG auf die Breite des Kartenkastens gelegt. Ohne diese Regel griffe die globale Regel img{width:100%;height:100%;object-fit:cover}, die fuer die Bildkaesten des Projekts gedacht ist und hier nur zufaellig passt. --------------------------------------------------------------- */ .geo2 .map img{display:block;width:100%;height:auto;object-fit:fill} /* ======================================================================= V1-Review E3 · Block 2 · WM-R-EG (Regel W1, Grundregel wie Startseite A2.2) Gerahmte Bildmarke unveraendert (vorhandene Pfade), Weiss 10 %, rechts und unten angeschnitten. "Kantenlaenge" = sichtbarer Rahmen; er belegt 21,4/28,4 der viewBox. Desktop: Rahmen 720 px -> Box 955,5 px, Rahmen beginnt 117,8 px innerhalb der Box. Rahmen ragt 200 px rechts und 180 px unten ueber den Hero-Rand; die linke Rahmenkante bleibt mindestens 24 px rechts von der Textspalte des Heros (.heroin, hoechstens 880 px) und rueckt sonst nach rechts. Mobil (bis 960 px): Rahmen 300 px -> Box 398,1 px; 70 px rechts, 75 px unten ueber den Rand. Unter 360 px kein Motiv. aria-hidden und pointer-events:none sind vorhanden. ======================================================================= */ .einhero .water{width:955.5px;height:955.5px;opacity:.1;top:auto;right:auto;transform:none; bottom:-297.8px; left:max(calc(100% - 637.8px),calc(max(var(--gut),(100% - var(--wrap))/2 + var(--gut)) + min(880px,(min(100%,var(--wrap)) - 2*var(--gut))) + 24px - 117.8px))} @media (max-width:960px){ .einhero .water{width:398.1px;height:398.1px;left:auto;top:auto;right:-119.1px;bottom:-124.1px} } @media (max-width:359px){ .einhero .water{display:none} } /* Messbefund Schritt B: Zwischen 520 und 960 px laege der Rahmen in dieser Lage auf mindestens einer W1-Seite hinter der H1 (Grundregel: nie hinter einer Ueberschrift). Dort deshalb kein Motiv, einheitlich auf allen W1-Seiten. Zur Entscheidung bei Halt 2. */ @media (min-width:520px) and (max-width:960px){ .einhero .water{display:none} } /* ======================================================================= E2-A (03.11.2026) - lokale Arbeitsfassung, NICHT FREIGEGEBEN. Nur diese Seite; komponenten.css wird im Body nach dieser Datei geladen. Hero, Wasserzeichen W1 und Footer W4 bleiben unveraendert. ======================================================================= */ /* Stufe "Ueberregional": Beleglink zum Projektbericht Nordrhein-Westfalen */ .einzone .einbeleg{display:inline-block;margin-top:var(--s3);font-size:14.5px} /* Regionaler Schwerpunkt (dunkel): drei Rhythmus-Elemente mit goldener Oberkante */ .einrh{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)} .einrh li{border-top:2px solid var(--gold);padding-top:var(--s5);min-width:0} .einrh h3{font-size:19px;line-height:1.3;font-weight:600;margin:0 0 var(--s3);color:#fff} .einrh p{font-size:15.5px;line-height:1.7;color:var(--n300);margin:0} .einrh p .tlink{display:inline;font-size:inherit;line-height:inherit;padding:0;border-bottom-width:1px} /* Projektbezogen: zwei Karten */ .einproj{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:1023px){ .einrh{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s7)} } @media (max-width:639px){ .einproj{grid-template-columns:1fr} }