/* ----------------------------------------------------------------------- kindergarten.info - Farbschema und Typografie Konzept B „Tanne & Leinen" (Entscheidung Thomas, 2026-09-07) ----------------------------------------------------------------------- */ /* Vorher standen hier 41 verschiedene Farbwerte, darunter SIEBEN Varianten desselben Grüns (#44840b #4f8a10 #57a80f #5a8f00 #80c010 #80c41c #8cc85a) und zwei konkurrierende Orangetöne. 87 harte Hex-Werte gegen 71 Variablennutzungen - das halbe Stylesheet ignorierte das eigene System. Nebeneinander gelegt ergänzten sich die Töne nicht, sie verwuschen sich; genau das kam als „unrund" an. Jetzt: SECHS Werte. Alles andere wird daraus abgeleitet. Wer eine neue Farbe braucht, hat vermutlich ein Gestaltungsproblem und keins der Palette. Das Orange ist ersatzlos entfallen. Zwei Signalfarben nebeneinander waren der Hauptgrund für die Unruhe; Verweise tragen jetzt die Markenfarbe. Die Neutralen haben einen leichten Grünstich - reines Grau wirkt nicht gewählt, sondern übriggeblieben. */ :root { /* ⚠️ Zwei Stufen, nicht eine - und das ist KEIN Rückfall in die sieben Grüntöne von vorher. Die hatten dieselbe Rolle und unterschieden sich zufällig; diese beiden haben getrennte Aufgaben und einen messbaren Grund. Der Grund ist Kontrast: Ein Grün, das kräftig genug wirkt, ist zu hell für Schrift. Das gewaehlte #5a8f00 erreicht auf Weiss nur 3,92 - unter den 4,5, die Fliesstext braucht. Umgekehrt war das zuvor gesetzte Tannengrün #2f5548 mit Kontrast 8,35 zwar bestens lesbar, wirkte aber so entsättigt, dass die Seite nach Trauerportal aussah (Ansage Thomas). ⚠️ Die tiefe Stufe ist nicht am Weiss bemessen, sondern am LEINENTON: #4e7d00 haette auf Weiss mit 4,93 gereicht, auf dem Leinen der Hinweisfelder aber nur 4,41 erreicht - und genau dort stehen Verweise mitten im Text. #4b7700 traegt auf beiden Gruenden (5,33 und 4,76). Deshalb: KRAEFTIG traegt Flaechen, Balken, Raender und die grossen Zahlen - dort steht kein Kleintext drauf. TIEF traegt alles, was gelesen wird: Verweise, Schaltflaechen, Kennzeichnungen. */ /* --------------------------------------------------------------- Palette Thomas (2026-09-09): #233d4d #fe7f2d #fcca46 #ACC12F #619b8a Nach fünf Anläufen, die alle an EINER Markenfarbe drehten, dreht dieser das Prinzip um: Die Seite wird bunt - aber jede Farbe bekommt eine Aufgabe. Das ist Kita-Praxis, keine Dekoration: die rote Gruppe, die blaue Gruppe, farbige Garderobenhaken. Eltern erkennen am Streifen, wo sie sind. ROLLEN Blau Hausfarbe - Navigation, Verweise, Schaltflächen, Struktur. Das einzige der vier, das Schrift tragen kann (5,11). Jade Rubrik Kita und die Einrichtungen Amber Rubrik Kinder Himbeere Rubrik Eltern und Erzieher ⚠️ Nur Blau ist schriftfähig. Amber kommt auf 1,65, Jade auf 3,79, Himbeere auf 3,91 - sie stehen deshalb ausschliesslich als FLAECHE (Kachelkante, Balken, Punkt), nie als Text. Wo eine Rubrikfarbe doch einmal Schrift tragen muss, greift die abgedunkelte Variante. --------------------------------------------------------------- */ /* ⚠️ LINDGRUEN seit 9.9.2026 (Entscheidung Thomas). Vorher Blau #2274a5. Grundlage ist die Palette #233d4d #fe7f2d #fcca46 #a1c181 #619b8a, in der das Salbei durch das gewuenschte #ACC12F ersetzt wurde. Der Aufbau unterscheidet sich grundlegend vom Blau davor: Das Gruen ist eine FLAECHENFARBE (2,01 auf Weiss) und traegt keine Schrift. Die Schrift darauf kommt aus dem dunklen Ende der Palette, #233d4d mit 5,65. Genau daran waren die Limettenvarianten gescheitert: #98ce00 erreichte in beide Richtungen nur 1,88 und konnte weder Schrift tragen noch selbst Schrift sein. #233d4d kann beides - 11,38 auf Weiss und 11,38 mit weisser Schrift auf sich. */ --marke: #acc12f; /* Lindgruen: Flaechen, Kanten, Kacheln */ --marke-tief: #9caf2b; --marke-dunkel: #8b9c26; /* Hover */ --marke-blass: #f3f5e6; /* ⚠️ ZWEI Farben, nicht vier (Ansage Thomas, 2026-09-07). Der erste Entwurf gab jeder Rubrik eine eigene Farbe - Jade für Kita, Amber für Kinder, Himbeere für Eltern. Das war als Orientierung gedacht, ergab aber ein zu unruhiges Bild: Wer durch die Seite blättert, sieht vor allem wechselnde Farben und nicht mehr, was sie bedeuten sollen. Jetzt trägt Grün die Struktur, Orange den Akzent - auf jeder Seite gleich. Das Blaugrün bleibt als einzige Reserve für die Stellenangebote. */ --akzent: #fe7f2d; /* Orange: Flaeche (2,53 - traegt keine Schrift) */ --akzent-tief: #bd4a00; /* abgedunkelt fuer Schrift: 5,07 auf Weiss */ --akzent-blass: #fdf0e4; /* ⚠️ Hier standen bis 9.9.2026 --reserve/--reserve-tief mit dem Blaugruen #619b8a der Palette. Sie hatten genau EINE Verwendung: das Kennzeichen an den Stellenangeboten. Eine Variable, die einmal vorkommt, ist keine Systemfarbe - das Kennzeichen traegt jetzt das Hauptgruen. Damit kommt die Seite mit zwei Farben aus: Gruen fuer das Geruest, Orange fuer den Inhalt. */ --weiss: #ffffff; --rein-weiss: #ffffff; --flaeche: #f9f9f4; /* Weiss mit einem Hauch Lindgruen */ --linie: #dcdfd0; --linie-fein: #ebede2; /* Die Neutralen kommen aus dem dunklen Ende der Palette, nicht aus einem beliebigen Grau - daher der leichte Blaustich. Sie liegen zugleich weicher als vorher: die Ueberschriften standen auf 15,62 gegen Weiss und damit praktisch auf Schwarz (Rueckmeldung Thomas, 8.9.). */ --ueberschrift: #233d4d; /* 11,38 auf Weiss */ --text: #3b5462; /* 7,98 */ --leise: #5e727e; /* 5,02 - gemessen, #6b8290 waren mit 4,02 zu wenig */ /* Schrift auf der Markenflaeche und auf dem Bannerbild. Sie bleibt dunkel, auch wenn die Neutralen weicher gestellt werden - auf dem Lindgruen sind nur wenige Zehntel Luft ueber den 4,5. */ --auf-marke: #233d4d; /* auf #acc12f: 5,65 */ --raum-1: .35rem; --raum-2: .75rem; --raum-3: 1.25rem; --raum-4: 2rem; --raum-5: 3.25rem; --raum-6: 5rem; /* Alte Namen bleiben als Verweise bestehen, damit nicht 71 Fundstellen gleichzeitig angefasst werden mussten. Sie zeigen alle auf die neuen Werte - es gibt kein Grün und kein Orange mehr, das eigenständig lebt. */ --gruen: var(--marke); --gruen-dunkel: var(--marke-dunkel); --gruen-hell: var(--marke-blass); /* ⚠️ --orange faerbt die Verweise (Name historisch). Es darf NICHT auf --marke zeigen: das Lindgruen erreicht auf Weiss nur 2,01 und waere als Verweisfarbe unlesbar. Seit 9.9.2026 traegt es das Orange der Palette statt eines abgedunkelten Gruens (Ansage Thomas: „vielleicht macht man das nicht mit gruen, sondern mit den Orangetonen, sodass es besser hervorkommt"). Der Kontrast ist derselbe - 5,07 statt 5,01 auf Weiss -, aber ein gruener Verweis auf gruenem Geruest verschwindet, ein oranger nicht. Nebenwirkung, die zaehlt: Verweise im Fliesstext und im Geruest tragen jetzt dieselbe Farbe, statt eine Unterscheidung zu behaupten, die niemand liest. */ --orange: #bd4a00; /* Verweise: 5,07 auf Weiss */ --orange-dunkel:#8f3800; /* Hover: 7,73 */ --text-dunkel: var(--ueberschrift); --grau: var(--leise); --flaeche-hell: var(--marke-blass); } /* Nunito, selbst ausgeliefert (SIL Open Font License 1.1, Vernon Adams u. a.). Lizenztext liegt unter /assets/fonts/Nunito-LICENSE.txt. Selbst ausgeliefert und nicht über Google Fonts: Ein Abruf dorthin überträgt die IP-Adresse jeder Besucherin an Google und wäre einwilligungspflichtig - das LG München hat 2022 sogar Schadenersatz zugesprochen. Die sechs Schnitte zusammen wiegen 140 KB, geladen wird nur, was eine Seite braucht. ⚠️ Vorher lief die Seite auf Verdana. Die Schrift wurde 1996 für Bildschirme mit 800×600 entworfen; ihre sehr weiten Buchstabenabstände waren das deutlichste Altersmerkmal - stärker als jede Farbe. ⚠️ Seit 8.9.2026 NUNITO statt IBM Plex Sans (Entscheidung Thomas). Plex ist die Hausschrift eines Technikkonzerns: gerade Endungen, enge Rundungen, für Datenblätter gebaut. Auf einer Kita-Seite las sie sich nüchtern. Nunito hat abgerundete Endungen und offenere Rundungen, bleibt im Fließtext aber ruhig - Quicksand wäre runder gewesen, ermüdet in langen Absätzen jedoch. Als Variable Font deckt EINE Datei alle Gewichte von 400 bis 700 ab. Statt sechs Schnitten mit 140 KB liegen jetzt zwei Dateien mit rund 78 KB. */ @font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; } /* Ein Name für die Schrift, damit sie nicht an 30 Stellen einzeln steht. */ /* Schrift auf dem BANNERBILD. ⚠️ Vorher #1f2612 - ein fast schwarzes Dunkelgruen mit 7,08 am dunkelsten Punkt des Bildes. Es war lesbar, wirkte aber hart (Rueckmeldung Thomas, 9.9.2026: „das schwarz ist hier etwas hart"). Jetzt steht dort dieselbe Farbe wie ueberall sonst: #233d4d schafft am dunkelsten Punkt der Wand (#7fc040) noch 5,15 und liegt damit sicher ueber den 4,5. Nebenwirkung, die zaehlt: Banner und Markenflaechen tragen jetzt dieselbe Schriftfarbe - eine Sonderfarbe weniger im System. */ :root { --auf-banner: #233d4d; } :root { --schrift: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } body { /* ⚠️ Vorher: getönter Grund plus Hintergrundbild, darauf der Inhalt als abgerundeter weisser Kasten. Das ist das Boxed-Layout der frühen 2010er - und der Hauptgrund, warum die Seite trotz dreier verschiedener Grüntöne nicht frisch wirkte (Rückmeldung Thomas, 2026-09-07). Kein Farbton der Welt macht einen Rahmen leicht. Jetzt steht der Inhalt direkt auf Weiss; getrennt wird durch Raum, nicht durch Kanten. */ background: var(--weiss); color: var(--text); font-family: var(--schrift); /* 16px statt 15: die neue Schrift laeuft deutlich schmaler als Verdana - bei gleicher Punktzahl wirkt sie kleiner und die Zeilen werden zu lang. Etwas mehr Zeilenabstand, weil Plex eine hoehere x-Hoehe hat. */ font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fliesstext nicht breiter als rund 70 Zeichen laufen lassen - laengere Zeilen verliert das Auge beim Ruecksprung. Betrifft nur den redaktionellen Teil, nicht Listen, Tabellen oder Karten. */ .inhalt-flaeche > p { max-width: 70ch; } /* Ueberschriften: gruen und in Versalien wie im Original */ h1, h2, h3, h4 { font-family: var(--schrift); font-weight: 600; /* Nicht mehr grün: Überschrift und Link trugen dieselbe Farbe, damit war nicht mehr zu erkennen, was anklickbar ist. Überschriften strukturieren - dafür brauchen sie keine Signalfarbe. Die Marke tragen Kopfleiste, Fussbereich und die Kennzeichen. */ color: var(--ueberschrift); } /* Versalien wie auf der Altseite sind bei langen Titeln schwer zu lesen und erzwingen Umbrüche - deshalb normale Schreibweise. */ /* Groesser und mit klarerem Abstand zwischen den Stufen: Bei 24/20/18 lagen H1 und H2 so dicht beieinander, dass die Gliederung verschwamm. Plex traegt die groesseren Grade gut, weil sie schmal baut. */ h1 { font-size: 30px; line-height: 1.22; font-weight: 600; letter-spacing: -.015em; } h2 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } h3 { font-size: 18px; line-height: 1.35; font-weight: 600; } h1, h2, h3 { text-wrap: balance; } /* ⚠️ Der eigentliche Grund, warum die Seite gedrängt wirkte: Es gab gar keine Abstandsregel für Überschriften - sie liefen auf UIkits Vorgabe und standen damit fast so eng am vorigen Absatz wie am eigenen Text. Ein Abschnitt beginnt sichtbar, wenn davor mehr Raum steht als danach. */ .inhalt-flaeche h2 { margin: var(--raum-5) 0 var(--raum-2); } .inhalt-flaeche h3 { margin: var(--raum-4) 0 var(--raum-1); } .inhalt-flaeche h2:first-child, .inhalt-flaeche h3:first-child { margin-top: 0; } .inhalt-flaeche p { margin: 0 0 var(--raum-3); } .inhalt-flaeche ul, .inhalt-flaeche ol { margin: 0 0 var(--raum-3); } .inhalt-flaeche table { margin: var(--raum-3) 0 var(--raum-4); } .inhalt-flaeche figure { margin: var(--raum-4) 0; } /* Trenner: 2px Grün quer über die Seite war ein kräftiges Signal für etwas, das nur "hier endet ein Abschnitt" bedeutet. Eine feine Linie genügt - den Abstand macht ohnehin der Raum darum. */ hr.trenner { border-top: 1px solid var(--linie); margin: var(--raum-5) 0; } @media (max-width: 768px) { h1 { font-size: 25px; } h2 { font-size: 20px; } } a { color: var(--orange); text-decoration: none; } a:hover { color: var(--orange-dunkel); text-decoration: underline; } /* Sprungmarken sind keine Verweise auf eine andere Seite - sie führen nur innerhalb dieser Seite weiter. In der Signalfarbe wirkte die Inhaltsübersicht wie eine Wand aus lauter Angeboten. Sie bleiben deshalb in der Textfarbe; farbig wird nur, was die Seite verlässt. */ a[href^="#"] { color: var(--text-dunkel); } a[href^="#"]:hover { color: var(--orange); text-decoration: underline; } /* Inhaltsflaeche hebt sich vom grauen Seitenhintergrund ab */ .inhalt-flaeche { /* Kein Kasten mehr: keine Rundung, kein eigener Grund, kein Rahmen. Der Inhalt steht auf derselben Fläche wie die Seite und bekommt stattdessen Luft nach oben und unten. */ padding: var(--raum-4) 0 var(--raum-6); } @media (max-width: 639px) { .inhalt-flaeche { padding: 18px 15px; } } /* Kopfbereich */ /* ⚠️ Das Logo stand auf 150 px Hoehe - die Kopfleiste nahm damit ueber ein Drittel des ersten Bildschirms ein, bevor ein einziges Wort Inhalt kam. Grosse Logoflaechen waren um 2012 ueblich; heute liest sich das als verschenkter Raum. Auf 78 px halbiert: erkennbar bleibt es, aber der Inhalt beginnt weiter oben. Der grüne Balken darunter wird von 4 auf 3 px zurueckgenommen - er soll die Leiste abschliessen, nicht unterstreichen. */ .kopf { background: var(--weiss); border-bottom: 3px solid var(--marke); } .kopf .uk-logo img { max-height: 78px; width: auto; } .kopf .uk-navbar-item.uk-logo { padding: var(--raum-2) 0; height: auto; } .kopf .uk-navbar-nav > li > a { color: var(--text); font-size: 14px; /* Versalien in der Navigation: kostet Lesbarkeit und wirkt streng. Die Gliederung tragen Farbe und Abstand. */ text-transform: none; letter-spacing: 0; min-height: 52px; } .kopf .uk-navbar-nav > li > a:hover { color: var(--orange); } /* Der Bereich, in dem man gerade ist (Ansage Thomas, 10.9.2026: „wenn ich im Cluster Kinder bin, sollte Kinder auch im Menue aktiv gekennzeichnet sein"). ⚠️ Nicht nur ueber die Farbe: Vorher trugen `:hover` und `.uk-active` denselben Ton - der aktive Punkt sah aus wie ein gerade beruehrter, und wer Farben schlecht unterscheidet, sah gar nichts. Deshalb zusaetzlich ein Balken unter dem Punkt und halbfette Schrift. Beides wirkt ohne Farbwahrnehmung. */ .kopf .uk-navbar-nav > li.uk-active > a { color: var(--orange); font-weight: 600; /* ⚠️ Der Balken traegt --orange, nicht die Markenfarbe: Lindgruen erreicht auf Weiss 2,01 und liegt damit unter den 3:1, die WCAG fuer grafische Kennzeichen verlangt. Ein Kennzeichen, das man nicht sieht, ist keines. */ box-shadow: inset 0 -3px 0 var(--orange); } /* Karten */ .uk-card-default { border-radius: 6px; } .uk-card-default .uk-card-title { color: var(--orange); font-size: 16px; } /* Bilder im Fliesstext */ .inhalt-flaeche img { max-width: 100%; height: auto; border-radius: 4px; } .inhalt-flaeche figure { margin: 1.5rem 0; } .inhalt-flaeche figcaption { font-size: 12px; color: var(--grau); } /* Hinweiskasten: Akzentkante laeuft gerade aus, keine Rundung an der Farbe */ .hinweis { /* Der Hinweis ist jetzt das EINZIGE Element mit Streifen und Fläche - dadurch fällt er wieder auf. Rundung raus: eine gerundete Fläche neben lauter ungerundetem Inhalt wirkt aufgeklebt. */ border-left: 4px solid var(--marke); background: var(--marke-blass); padding: var(--raum-3) var(--raum-3) var(--raum-3) var(--raum-4); margin: var(--raum-4) 0; } /* Fussbereich */ /* Fussbereich wie auf der Altseite: grüne Fläche mit weisser Schrift, das Logo mittig darüber. Vorher dunkelgrau - das trug die Marke nicht und liess den Abschluss der Seite beliebig wirken. */ .fuss { background: var(--gruen); color: var(--auf-marke); } .fuss h4 { color: var(--weiss); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; font-weight: normal; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.45); margin-bottom: 14px; } .fuss a { color: var(--auf-marke); } .fuss a:hover { color: var(--auf-marke); text-decoration: underline; } .fuss .uk-list > li { padding: 3px 0; } .fuss hr { border-top-color: rgba(35,61,77,.28); } /* Logo über den Spalten, wie im Original */ .fuss-logo { text-align: center; margin: 0 0 26px; } .fuss-logo img { width: 260px; height: auto; } @media (max-width: 639px) { .fuss-logo img { width: 200px; } } /* Responsive Tabellen: enhance_tables() setzt data-label je Zelle */ /* Die Kopfzeile war nur etwas dunklerer Text - in einer Tabelle mit drei Spalten Fliesstext ging sie unter. Jetzt abgesetzte Flaeche und eine Linie in der Hausfarbe darunter, wie bei den Kaesten im uebrigen Aufbau. */ .uk-table { margin: 1.4rem 0; } .uk-table th { color: var(--ueberschrift); background: var(--flaeche); font-weight: 700; border-bottom: 2px solid var(--gruen); letter-spacing: .01em; } .uk-table td, .uk-table th { padding: .55rem .8rem; } .uk-table tbody tr:nth-child(even) { background: var(--linie-fein); } @media (max-width: 639px) { .uk-table thead { display: none; } .uk-table tr { display: block; border-bottom: 1px solid var(--linie); padding: .5rem 0; } .uk-table td { display: block; border: 0; padding: .15rem 0; } .uk-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; } /* Ohne Kopfzeile traegt die Zebrastreifung nichts - sie wuerde nur zufaellige Bloecke einfaerben. */ .uk-table tbody tr:nth-child(even) { background: none; } } /* Anker nicht unter dem Kopf verstecken */ :target { scroll-margin-top: 90px; } /* Ortsliste (Bundesland- und Umgebungsseiten) */ .ortsliste a { display: inline-block; padding: 2px 0; } /* Inhaltsuebersicht in der Seitenspalte (ersetzt table-of-contents-plus) */ .uebersicht { border-radius: 6px; overflow: hidden; } .uebersicht-kopf { /* Wie auf der Altseite das helle Markengrün, nicht das dunkle. ⚠️ Dunkle Schrift: weiss erreicht auf dem Lindgrün nur 2,01. */ background: var(--gruen); color: var(--auf-marke); font-size: 17px; text-transform: uppercase; margin: 0; padding: 16px 20px; } .uebersicht .uk-list { margin: 0; } .uebersicht .stufe-3 { padding-left: 14px; font-size: 13px; } /* Ausrichtungsklassen aus WordPress - sonst brechen die Alt-Inhalte um */ .alignleft { float: left; margin: 5px 20px 15px 0; } .alignright { float: right; margin: 5px 0 15px 20px; } .aligncenter { display: block; margin: 15px auto; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: 12px; color: var(--grau); } .inhalt-flaeche::after { content: ""; display: block; clear: both; } @media (max-width: 639px) { .alignleft, .alignright { float: none; display: block; margin: 15px auto; } } /* Trennlinie aus [su_divider] */ blockquote { border-left: 4px solid var(--gruen); padding-left: 1rem; color: var(--text-dunkel); } /* Anzeigenblock ⚠️ min-height war 90px - zu wenig. Eine Anzeige im Format `auto` wird auf dem Rechner regelmaessig 250 bis 300 px hoch. Die Differenz laedt NACHTRAEGLICH nach und schiebt alles darunter nach unten. Wer per Sprungmarke auf einen Abschnitt springt, der unter einer Anzeige liegt, landet deshalb zu weit oben - genau das passierte nach dem Abstimmen in der Umfrage (Rueckmeldung Thomas, 9.9.2026). Reserviert wird jetzt so viel, dass der Nachschub klein bleibt. Kommt gar keine Anzeige, greift die :has()-Regel weiter unten und der Platz faellt ganz weg - eine leere Flaeche von 250 px waere schlimmer als der Sprung. */ .anzeige { min-height: 250px; } @media (max-width: 639px) { .anzeige { min-height: 200px; } } /* ⚠️ Der gelbe Kasten hinter den Anzeigen kommt von AdSense selbst, nicht von uns: Google setzt auf `ins.adsbygoogle` ein helles Gelb (#ffffdd) und markiert den Platz mit `data-ad-status="unfilled"`, wenn keine Anzeige ausgeliefert werden konnte. Gemessen an den berechneten Werten - im Stylesheet stand nichts dergleichen, und genau deshalb war es nicht zu finden. Zwei Massnahmen: Der Platzhalter-Grund wird abgeschaltet, und ein unbefuellter Platz verschwindet ganz, statt eine leere Flaeche samt „ANZEIGE"-Beschriftung stehen zu lassen. Beides beruehrt ausgelieferte Anzeigen nicht - es betrifft nur den Fall, dass gar keine kommt. */ ins.adsbygoogle { background-color: transparent !important; } ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; } .anzeige:has(ins[data-ad-status="unfilled"]) { min-height: 0; } .anzeige:has(ins[data-ad-status="unfilled"])::before { content: none; } .anzeige::before { content: "Anzeige"; display: block; font-size: 11px; color: var(--grau); text-transform: uppercase; margin-bottom: 4px; } /* Schaltflaechen in der Hausfarbe statt UIkit-Blau */ .uk-button-primary { background-color: var(--marke-tief); } .uk-button-primary:hover, .uk-button-primary:focus { background-color: var(--gruen-dunkel); } /* ======================================================================= Startseite (2026-08-28) Eigenständiges Gesicht: die Marke (Grün, Logo) bleibt, Typografie und Flächen sind neu. Bewusst nur hier - der Rest der Seite folgt später, damit sich nichts ungeprüft ändert. ======================================================================= */ /* Bühne. Eine Farbfläche, kein Verlauf: Ein Verlauf wirkt wie ein Effekt aus einer anderen Zeit und passt nicht zur flachen Gestaltung der Seite. */ /* Buehne mit Bannerbild: die bemalten Kinderhaende sitzen rechts, links bleibt die gestrichene Holzwand frei - dort steht der Text. ⚠️ Die Schrift ist DUNKEL, nicht weiss. Gemessen auf der freien Flaeche: weiss erreicht 1,74 und waere unlesbar, #1f2612 kommt selbst auf dem dunkelsten Punkt der Wand (#68c02b) noch auf 6,82. */ .start-buehne { position: relative; background: var(--marke-blass); color: var(--auf-banner); overflow: hidden; } .start-buehne-bild { display: block; } .start-buehne-bild img { display: block; width: 100%; height: auto; } .start-buehne-innen { padding: 2rem 1.5rem 2.4rem; text-align: left; } /* Ab Tablet liegt der Text im Bild - auf der freien Wand links. */ @media (min-width: 700px) { .start-buehne-bild { position: absolute; inset: 0; } .start-buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: right center; } .start-buehne-innen { position: relative; max-width: 21.5rem; padding: 3rem 2rem 3.2rem 2.4rem; } } @media (min-width: 1100px) { .start-buehne-innen { max-width: 25rem; padding-left: 3rem; } } .start-buehne h1 { color: var(--auf-banner); font-size: 2.1rem; line-height: 1.15; text-transform: none; /* die Versalien der Altseite lesen sich schwer */ font-weight: 600; margin: 0 0 .8rem; } .start-buehne-text { font-size: 1.05rem; line-height: 1.5; color: var(--auf-banner); margin: 0 0 1.6rem; } .start-buehne-text strong { color: var(--auf-banner); } /* Suchfeld: das eigentliche Angebot der Startseite */ .start-suche { display: flex; gap: .5rem; } .start-suche .uk-input { height: 52px; font-size: 1rem; border: 0; border-radius: 6px; padding: 0 1rem; } .start-suche .uk-button { height: 52px; padding: 0 1.6rem; border-radius: 6px; background: var(--text-dunkel); font-weight: 600; text-transform: none; white-space: nowrap; } .start-suche .uk-button:hover { background: var(--marke-dunkel); } .start-buehne-fuss { margin: 1rem 0 0; font-size: .88rem; color: var(--text); } .start-buehne-fuss a { color: var(--auf-banner); text-decoration: underline; } .start-buehne-fuss a:hover { color: var(--auf-banner); opacity: .75; } @media (max-width: 639px) { .start-buehne-innen { padding: 1.6rem 1.1rem 2rem; } .start-buehne h1 { font-size: 1.5rem; } .start-suche { flex-direction: column; } .start-suche .uk-button { width: 100%; } } /* Abschnittsüberschriften der Startseite */ .start-ueberschrift { font-size: 1.35rem; font-weight: 600; color: var(--text-dunkel); text-transform: none; margin: 2.4rem 0 1rem; } /* Wege nach Situation */ /* Keine Rundung: Der grüne Akzentstreifen oben würde in die Rundung biegen und einen 3D-Eindruck erzeugen. Kanten bleiben gerade. */ .start-weg { background: var(--weiss); border-top: 4px solid var(--gruen); height: 100%; overflow: hidden; } /* Innenabstand auch für die Linkliste - sie begann bündig am Kastenrand. */ .start-weg > :not(.start-weg-bild) { margin-left: 1.6rem; margin-right: 1.6rem; } .start-weg > .uk-list:last-child { margin-bottom: 1.5rem; } /* Bildkopf: fester Ausschnitt, damit alle drei Karten gleich hoch beginnen */ .start-weg-bild { margin: 0 0 1.2rem; } .start-weg-bild img { width: 100%; height: 168px; object-fit: cover; display: block; } .start-weg h3 { font-size: 1.1rem; margin-top: 0; font-weight: 600; color: var(--text-dunkel); margin: 0 0 .4rem; } .start-weg-text { font-size: .9rem; color: var(--grau); margin: 0 0 1rem; } /* ⚠️ Nicht `margin: 0` - das hebt die Einrückung aus der Regel weiter oben wieder auf, und die Links standen bündig am Kastenrand. */ .start-weg .uk-list { margin-top: 0; margin-bottom: 0; font-size: .95rem; } .start-weg .uk-list li { padding: .45rem 0; border-top: 1px solid var(--linie); } .start-weg .uk-list li a { display: block; } .start-weg .uk-list li:first-child { border-top: 0; } /* Orts- und Länderflächen */ .start-flaeche { background: var(--weiss); padding: 1.6rem 1.8rem; } .start-flaeche h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-dunkel); margin-bottom: .8rem; } .start-staedte a, .start-laender a { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .45rem .1rem; border-bottom: 1px solid var(--linie); } .start-staedte a:hover, .start-laender a:hover { text-decoration: none; } .start-staedte a:hover .start-stadt, .start-laender a:hover .start-stadt { color: var(--gruen-dunkel); text-decoration: underline; } /* ⚠️ NICHT --gruen: das Lindgruen erreicht auf Weiss 2,01 und traegt keine Schrift. Beim Wechsel von Blau auf Gruen blieb diese Regel stehen - gefunden erst, als die Staedteliste sichtbar zu blass wurde. */ .start-stadt { color: var(--orange); } @media (max-width: 639px) { .start-flaeche { padding: 1.2rem 1rem; } } /* Der Fliesstext unten bleibt ruhig - er ist Beiwerk, nicht Einstieg */ .start-text h2 { font-size: 1.2rem; } /* ----------------------------------------------------------------------- Fragenblock (2026-08-28) Steht auf jeder Ratgeberseite als LETZTER Abschnitt. Einheitliche Darstellung statt der zuvor genutzten uk-cards: eine Liste mit grüner Akzentkante, die gerade ausläuft - wie der Hinweiskasten. ----------------------------------------------------------------------- */ .fragen { margin-top: 2rem; } .fragen > h2 { margin-bottom: 1rem; } /* Jede Frage steht als eigener Kasten (Vorgabe Thomas, 2026-09-07). ⚠️ Zwischenzeitlich hatte ich sie auf eine feine Trennlinie reduziert, mit dem Argument, fuenf gleich aussehende Kaesten auf einer Seite nehmen dem Hinweisblock seine Bedeutung. Das ging an der Sache vorbei: Fragen und Antworten sind PAARE, und der Kasten ist es, der zusammenhaelt, was zusammengehoert. Eine Linie trennt nur, sie bindet nicht. Bei sechs Fragen untereinander verschwimmt sonst, wo eine Antwort endet und die naechste Frage beginnt. Akzentseite eckig, Gegenseite gerundet - wie bei allen Akzentkaesten. */ .frage { background: var(--flaeche); border-left: 3px solid var(--marke); border-radius: 0 6px 6px 0; padding: var(--raum-3) var(--raum-3) var(--raum-3) var(--raum-4); margin-bottom: var(--raum-2); } .frage > h3 { font-size: 1rem; font-weight: 600; color: var(--ueberschrift); margin: 0 0 .4rem; text-transform: none; } .frage > p { margin: 0; } .frage > p + p { margin-top: .6rem; } .frage ul { margin: .6rem 0 0; } .frage li { padding: .1rem 0; } /* ------------------------------------------------------------------ Ortskarte Laedt erst auf Klick (siehe assets/js/karte.js). Der Platzhalter hat dieselbe Hoehe wie die spaetere Karte, damit beim Laden nichts springt. */ .ort-karte { margin: 0 0 1.6rem; position: relative; } .ort-karte-platz { background: var(--marke-blass); border: 1px solid var(--linie); border-radius: 6px; padding: 2.4rem 1.5rem; text-align: center; } .ort-karte-text { margin: 0 0 1rem; font-size: 1.05rem; } /* Waehrend die Karte laedt, bleibt der Platzhalter stehen und der Knopf traegt „wird geladen". Er liegt dann UEBER der Kartenflaeche, sonst waere die Seite kurz doppelt so hoch und spraenge beim Verschwinden. Weg geht er nach fester Zeit - siehe karte.js. */ .ort-karte-platz-laedt { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ort-karte-platz .uk-text-meta { max-width: 46ch; margin-left: auto; margin-right: auto; } .ort-karte-flaeche { position: relative; height: 460px; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); } @media (max-width: 639px) { .ort-karte-flaeche { height: 340px; } } /* Marker: kleiner Punkt in der Markenfarbe, kein Bild noetig */ .karte-stift { width: 15px; height: 15px; border-radius: 50%; background: var(--gruen); border: 2px solid var(--weiss); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; transition: transform .12s ease, background-color .12s ease; } /* Beide Richtungen sichtbar machen: Zeiger auf dem Namen hebt den Punkt hervor, Tippen auf den Punkt hebt den Namen hervor. ⚠️ ORANGE, nicht dunkleres Gruen (Ansage Thomas, 9.9.2026). Vorher stand hier --marke-dunkel: derselbe Farbton wie die uebrigen Punkte, nur etwas dunkler - auf einer gruenen Karte kaum auszumachen. Und nicht das reine #fe7f2d, sondern --akzent-tief (#bd4a00). Gemessen gegen das Punktgruen #acc12f: Zustand davor #8b9c26 Kontrast 1,51 Graustufenabstand 33 helles Orange #fe7f2d Kontrast 1,26 Graustufenabstand 14 gewaehlt #bd4a00 Kontrast 2,52 Graustufenabstand 70 Das helle Orange waere in der Graustufe schlechter zu unterscheiden als der Zustand davor - wer Rot und Gruen schlecht trennt, rund acht Prozent der Maenner, saehe zwei gleich helle Punkte. Die Vergroesserung bleibt als zweites, farbunabhaengiges Merkmal. */ .karte-stift-hervor { transform: scale(1.9); background: var(--akzent-tief); z-index: 5; } /* Die Gegenrichtung traegt dieselbe Farbe - Hervorhebung heisst hier orange, in der Karte wie in der Liste. */ .kita-hervor { background: var(--akzent-blass); box-shadow: inset 3px 0 0 var(--akzent-tief); } .kita-liste li.kita-hervor { padding-left: .7rem; } .kita-liste li { cursor: pointer; transition: background-color .12s ease; } .kita-liste li:focus { outline: 2px solid var(--gruen); outline-offset: 2px; } .uk-card[data-kita] { cursor: pointer; } .uk-card.kita-hervor { box-shadow: inset 3px 0 0 var(--gruen), 0 2px 8px rgba(0,0,0,.08); } .maplibregl-popup-content { font-size: .88rem; line-height: 1.45; padding: 10px 12px; } .karte-adresse { color: var(--leise); } /* --------------------------------------------------------- Umfrage-Ergebnis Balken mit Zahl und Anteil, wie auf der Altseite. Ein Prozentwert allein sagt nichts darüber, wie belastbar er ist. */ .umfrage-zeile { margin: 0 0 .9rem; } .umfrage-text { font-size: .92rem; font-weight: 600; color: var(--ueberschrift); margin-bottom: .25rem; } .umfrage-balken { position: relative; background: var(--flaeche); border-radius: 3px; height: 26px; display: flex; align-items: center; } .umfrage-fuellung { position: absolute; left: 0; top: 0; bottom: 0; /* Hausfarbe statt Grau (9.9.2026). Die Zahl steht IM Balken und traegt --auf-marke: 5,65 auf dem Gruen, 12,1 auf dem hellen Rest daneben. */ background: var(--marke); border-radius: 3px; } .umfrage-zahl { position: relative; color: var(--auf-marke); padding-left: 10px; font-size: .85rem; font-weight: 700; color: var(--ueberschrift); } .umfrage-anteil { position: relative; margin-left: auto; padding-right: 10px; font-size: .8rem; color: var(--leise); } .umfrage-summe { margin-top: .8rem; } /* Kennzeichen an den Stellenangeboten ("Teilzeit möglich", "Quereinstieg"). ⚠️ Seit 9.9.2026 im Hauptgruen (Ansage Thomas). Vorher trug es das Blaugruen #367c68 aus der Palette - und war damit die EINZIGE Stelle der ganzen Seite, an der diese Farbe vorkam. Eine eigene Farbe fuer ein einzelnes Kennzeichen ist keine Unterscheidung, sondern ein Fremdkoerper: Wer die Seite ueberfliegt, sieht einen Ton, den er nirgends wiedererkennt. Der Wechsel kostet nichts, er bringt sogar Kontrast: dunkle Schrift auf dem Hauptgruen erreicht 5,65, weisse Schrift auf dem Blaugruen kam auf 4,95. Weiss auf dem Hauptgruen waere mit 2,01 unlesbar - deshalb --auf-marke. */ .stellen-marke { display: inline-block; background: var(--marke); color: var(--auf-marke); font-weight: 600; font-size: 11px; line-height: 1.4; letter-spacing: .02em; padding: 3px 9px; border-radius: 3px; margin: 0 6px 4px 0; } /* ------------------------------------ Betreuungsformen im Ort, als Kacheln Ersetzt das Foto der Altseite, das auf allen 4.000 Stadtseiten dasselbe war. Die Zahl steht gross, weil sie die eigentliche Auskunft ist. */ .formen-kacheln { margin: 0 0 .8rem; } /* Der Hinweis unter den Kacheln braucht Luft nach oben - direkt unter der Kachelreihe las er sich wie deren Fussnote und klebte an den Kaesten. ⚠️ Gemessen, nicht geschaetzt: Mit 1,1rem lag die sichtbare Luecke bei 18 px und damit genau dort, wo sie vorher schon war - der Rand der Kacheln (12,8 px) und der des Absatzes fallen zusammen, es zaehlt nur der groessere. Erst ab etwa 2rem wird der Abstand wirklich groesser. */ .formen-hinweis { margin-top: 2.1rem; } .formen-kachel { display: flex; align-items: baseline; gap: .6rem; background: var(--weiss); border: 1px solid var(--linie); border-left: 3px solid var(--marke); border-radius: 0 4px 4px 0; padding: .7rem .9rem; /* Kein `height: 100%` mehr - das war die Ursache des Ueberlaufs, siehe den Hinweis in ortstext.php. Die gleiche Hoehe kommt jetzt ueber uk-grid-match aus der Flex-Mechanik. */ text-decoration: none; } .formen-kachel:hover { border-color: var(--gruen); border-left-color: var(--gruen-dunkel); text-decoration: none; } .formen-zahl { font-size: 1.5rem; font-weight: 700; color: var(--orange); /* 24px fett = grosser Text, 3:1 genuegt */ line-height: 1; min-width: 1.6em; } .formen-titel { color: var(--text-dunkel); font-size: .93rem; line-height: 1.3; } .formen-kachel:hover .formen-titel { color: var(--orange); } /* ------------------------------------------- Inhaltsverzeichnis im Text Die Übersicht in der Seitenspalte steht im Quelltext bei rund 80 % und rutscht auf schmalen Schirmen ans Seitenende - sechzig Prozent der Besucher kommen mit dem Telefon und sehen sie dort nie. Deshalb zusätzlich im Text, wie es die Altseite hatte. Als klare Linkliste mit Abstand und Trennlinien, nicht als enger Stapel - sonst liest es sich wie eine Überschriftensammlung (gilt projektübergreifend). */ .toc-text { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px; margin: 1.4rem 0 1.8rem; padding: 0 1.1rem; } .toc-text > summary { cursor: pointer; padding: .75rem 0; font-weight: 600; color: var(--text-dunkel); list-style: none; } .toc-text > summary::-webkit-details-marker { display: none; } .toc-text > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--orange); transition: transform .15s ease; } .toc-text[open] > summary::before { transform: rotate(90deg); } .toc-text ul { list-style: none; margin: 0; padding: 0 0 .8rem; border-top: 1px solid var(--linie); } .toc-text li { padding: .4rem 0; border-bottom: 1px solid var(--linie-fein); } .toc-text li:last-child { border-bottom: 0; } .toc-text li.stufe-3 { padding-left: 1.2rem; font-size: .92rem; } .toc-text a { color: var(--text-dunkel); } .toc-text a:hover { color: var(--orange); text-decoration: underline; } /* ------------------------------------------- Ratgeberhinweise als Kacheln Ersetzt fuenf Abschnitte mit je eigener Ueberschrift und zwei bis vier Zeilen Text. Der Inhalt ist derselbe geblieben. */ .ratgeber-kacheln { margin: 0 0 1.6rem; } .ratgeber-kachel { /* Umlaufender Rahmen entfernt - er kastelte jede Kachel ein und liess das Raster wie eine Tabelle wirken. Der Akzentstreifen bleibt, er ordnet die Kachel der Marke zu; getrennt wird sonst durch Abstand. */ background: var(--weiss); border-left: 3px solid var(--marke); padding: var(--raum-2) 0 var(--raum-2) var(--raum-3); height: 100%; } .ratgeber-kachel h3 { font-size: .98rem; margin: 0 0 .4rem; color: var(--ueberschrift); } .ratgeber-kachel p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text); } .ratgeber-kachel p + p { margin-top: .5rem; } /* ------------------------------------- Einrichtungen nach Postleitzahl Ab 25 Eintraegen bringt auch die kompakte Liste nichts mehr: Wer in Stuttgart sucht, will nicht 450 Namen lesen, sondern die in seinem Viertel. Die PLZ liegt bei 97 % der Eintraege vor und entspricht faktisch dem Stadtteil - anders als eine Seitenzahl, die nichts ueber den Ort sagt. */ .register-hinweis { margin: 0 0 .6rem; } .erhebung { margin: 1rem 0 .4rem; } .kita-register { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; } .kita-register a { display: inline-flex; align-items: baseline; gap: .4em; padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: .88rem; color: var(--ueberschrift); text-decoration: none; } .kita-register a:hover { border-color: var(--gruen); color: var(--gruen-dunkel); } .kita-register a em { font-style: normal; color: var(--leise); } .kita-register a span { color: var(--leise); font-size: .8rem; } .kita-gruppe { margin: 0 0 1.5rem; scroll-margin-top: 90px; } .kita-gruppe h3 { font-size: 1rem; margin: 0 0 .3rem; padding-bottom: .25rem; border-bottom: 2px solid var(--flaeche); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .kita-gruppe-zahl { font-size: .82rem; font-weight: 400; color: var(--leise); white-space: nowrap; } /* ------------------------------------------------- Einrichtungen als Liste Ab 13 Eintraegen statt Karten: 60 Karten in drei Spalten sind eine Wand aus Weissraum. Die Liste zeigt dasselbe auf einem Drittel der Hoehe. */ /* Zwei Spalten, in jeder Zelle Name ueber Anschrift. Vorher stand die Anschrift rechts neben dem Namen - das braucht die volle Seitenbreite je Eintrag und liess 76 Einrichtungen auf 3.344 Pixel anwachsen, bei kurzen Namen mit einem Loch in der Mitte. Gestapelt und zweispaltig ist es halb so hoch und ruhiger zu lesen. */ .kita-liste { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.2rem; } .kita-liste li { padding: .5rem 0; border-bottom: 1px solid var(--flaeche); line-height: 1.35; } @media (max-width: 719px) { .kita-liste { grid-template-columns: 1fr; } } .kita-liste li:first-child { border-top: 1px solid var(--flaeche); } .kita-name { font-weight: 600; display: block; } .kita-adresse { color: var(--leise); font-size: .87rem; display: block; } /* Kontaktzeile: Telefonnummer und Weltkugel. Die Nummer ist als tel:-Verweis anklickbar, die Weltkugel oeffnet die Seite der Einrichtung in einem neuen Fenster. Nur 46 % der Eintraege haben eine Nummer, 35 % eine Adresse - fehlt beides, entsteht gar kein Element, damit die Zeilen nicht unterschiedlich hoch werden. */ .kita-kontakt { display: flex; align-items: center; gap: .55rem; font-size: .87rem; margin-top: .15rem; } .kita-tel { color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; } .kita-tel:hover { color: var(--orange); text-decoration: underline; } /* Die Weltkugel ist ein reines Symbol - deshalb eine Trefferflaeche von 34 px, sonst ist sie auf dem Handy nicht sicher zu treffen (WCAG 2.5.8). */ .kita-web { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -8px 0; border-radius: 50%; color: var(--leise); flex: none; } .kita-web svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .kita-web:hover, .kita-web:focus-visible { color: var(--orange); background: var(--marke-blass); } .uk-card .kita-kontakt { margin-top: .4rem; } /* ------------------------------------------------- Balkengrafik der Ortsseite Reines SVG aus den eigenen Zahlen - auf jeder Ortsseite eine andere. Ein Foto waere auf 7.483 Seiten dasselbe und sagte nichts ueber den Ort. */ .orts-grafik { margin: 1.8rem 0; } .orts-balken { width: 100%; height: auto; display: block; } .orts-balken text { font-size: 13px; fill: var(--ueberschrift); font-family: inherit; } .balken-name { fill: var(--leise); } .balken-selbst { fill: var(--ueberschrift); font-weight: 700; } .balken-zahl { fill: var(--leise); font-size: 12px; } .balken-flaeche { fill: var(--linie); } .balken-flaeche-selbst { fill: var(--gruen); } .orts-grafik figcaption { font-size: .84rem; color: var(--leise); margin-top: .5rem; line-height: 1.5; } /* Aufmacherbild der Rubrikseiten */ .rubrik-bild { margin: 0 0 1.6rem; } .rubrik-bild img { width: 100%; height: auto; border-radius: 6px; display: block; } /* Bilder aus dem Altbestand, die im Fliesstext neben dem Absatz stehen. ist inline und darf deshalb im

bleiben - ein

waere dort ungueltiges Markup. Ab 640px schwimmen sie, darunter volle Breite. */ .illu-rechts, .illu-links { display: block; margin: .3rem 0 1rem; } .illu-rechts img, .illu-links img { width: 100%; height: auto; border-radius: 6px; display: block; } @media (min-width: 640px) { .illu-rechts { float: right; width: 300px; margin: .3rem 0 1rem 1.6rem; } .illu-links { float: left; width: 300px; margin: .3rem 1.6rem 1rem 0; } } /* Bild im Textteil der Startseite - steht bewusst weit unten, damit die Suche direkt auf die Einstiege trifft und nicht auf ein Foto. */ .start-text figure { margin: 1.8rem 0; } .start-text figure img { width: 100%; height: auto; border-radius: 6px; display: block; } /* ----------------------------------------------------------------------- Suche auf den Ortsseiten (2026-08-29) Steht im obersten Drittel, direkt unter der Einleitung. Kompakter als die Bühnensuche der Startseite - sie soll den Weg öffnen, nicht die Seite beherrschen. ----------------------------------------------------------------------- */ .ort-suche { display: flex; gap: .5rem; margin: 1.2rem 0 1.6rem; padding: 1rem 1.1rem; background: var(--flaeche-hell); border-left: 4px solid var(--marke); border-radius: 0 6px 6px 0; } .ort-suche .uk-input { height: 44px; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); padding: 0 .9rem; } .ort-suche .uk-button { height: 44px; padding: 0 1.3rem; border-radius: 6px; font-weight: 600; text-transform: none; white-space: nowrap; } @media (max-width: 639px) { .ort-suche { flex-direction: column; padding: .9rem; } .ort-suche .uk-button { width: 100%; } } /* --- Aufmacher der Ortsseite ------------------------------------------- */ /* Bild und Einleitung nebeneinander. Das Bild bleibt der kleinere Teil: Es traegt keine Ortsinformation, es gibt der Seite nur ein Gesicht. */ .ort-einstieg { display: flex; gap: 28px; /* Mittig statt oben buendig: Die Einleitung ist meist kuerzer als das Bild hoch ist, oben ausgerichtet klaffte darunter eine Luecke. */ align-items: center; margin: 0 0 1.6rem; } .ort-aufmacher { margin: 0; flex: 0 0 280px; max-width: 280px; } .ort-aufmacher img { display: block; width: 100%; height: auto; border-radius: 6px; } .ort-einstieg-text { flex: 1 1 auto; } .ort-einstieg-text p:first-child { margin-top: 0; } @media (max-width: 720px) { /* Hochkant zuerst der Text: Wer auf dem Telefon liest, soll nicht an einem Bild vorbeiscrollen muessen, um die Zahl der Einrichtungen zu finden. Deshalb `order` statt `display: block` - im Quelltext steht das Bild weiter vorn, angezeigt wird es hier darunter. */ .ort-einstieg { flex-direction: column; gap: 1rem; } .ort-aufmacher { order: 2; flex: 0 0 auto; max-width: none; margin: 0; } .ort-einstieg-text { order: 1; } } /* --- Gebietskarte (Bundesland, Landkreis) ------------------------------ */ /* Hoeher als die Ortskarte: Ein Flaechenland wie Bayern ist auf 460 px so klein, dass die Punkte ineinanderlaufen. */ .ort-karte-flaeche-gross { height: 620px; } @media (max-width: 639px) { .ort-karte-flaeche-gross { height: 420px; } } /* Die Gebietskarte zeichnet ihre Punkte seit dem Umbau auf Ballungspunkte als Kartenschicht (MapLibre-Cluster), nicht mehr als DOM-Marker - deshalb steht ihre Gestaltung im Skript und nicht mehr hier. */ /* --- A-Z-Liste auf dem Ratgeber-Hub ------------------------------------ */ .az-gruppe { margin-bottom: 1.4rem; } .az-buchstabe { /* Flaechenfarbe traegt hier keine Schrift */ font-size: 1.05rem; color: var(--orange); border-bottom: 2px solid var(--gruen); padding-bottom: .2rem; margin: 0 0 .5rem; } .az-gruppe ul { margin: 0; } .az-gruppe li { padding: .18rem 0; font-size: .95rem; line-height: 1.35; } /* --- Kursives im Fliesstext ------------------------------------------- */ /* ⚠️ UIkit faerbt `em` von sich aus rot (#f0506e) - gedacht als Warnfarbe. In einem Fliesstext sieht das aus wie ein Fehler oder ein toter Link: „eine ruhige und *fröhliche Vorweihnachtszeit*" stand mitten im Absatz in Rot. Kursiv genuegt als Hervorhebung. */ em, i { color: inherit; font-style: italic; } /* --- Hintergrundbild wie auf der Altseite ------------------------------ */ /* Bemalte Kinderhände als Rahmen, der Inhalt liegt in der hellen Mitte. Zurückgeholt auf Wunsch (Thomas, 2026-09-04); es war zwischenzeitlich durch eine ruhige Fläche ersetzt. ⚠️ Erst ab 960 px - genau wie auf der Altseite. Darunter reicht das Bild nicht mehr um den Inhalt herum, und Text käme auf den Fingern zu liegen. Deshalb bleibt es auf Telefon und Tablet bei der ruhigen Fläche; dort verhindert es zugleich einen Download von 141 KB über das Mobilfunknetz. `fixed` hält den Rahmen beim Scrollen an Ort und Stelle, `cover` füllt jedes Seitenverhältnis. Die Inhaltsflächen selbst sind deckend, das Bild scheint nur an den Rändern durch. */ /* --- Umflossene Bilder: was daneben stehen darf und was nicht ---------- */ /* `.illu-links` und `.illu-rechts` lassen den Fliesstext um das Bild herumlaufen - das ist gewollt. Strukturelemente duerfen das NICHT: Auf /kinder/ab-welchem-alter/ stand die Ueberschrift „Was der frühe Start für die Familie bedeutet" zur Haelfte neben dem Bild und zur Haelfte darunter, das Inhaltsverzeichnis rutschte in die schmale Restspalte, und die Trennlinie endete mitten im Bild. Ueberschriften, Trennlinien, Kaesten, Tabellen, Listen mit eigenem Rahmen und der Fragenblock beginnen deshalb IMMER unter dem Bild. */ .inhalt-flaeche h2, .inhalt-flaeche h3, .inhalt-flaeche hr, .inhalt-flaeche > details.toc-text, .inhalt-flaeche .hinweis, .inhalt-flaeche .uk-overflow-auto, .inhalt-flaeche table, .inhalt-flaeche .fragen, .inhalt-flaeche .formen-kacheln, .inhalt-flaeche figure.rubrik-bild { clear: both; } /* --- Suchergebnisse nach Art getrennt ---------------------------------- */ /* Ratgeberartikel und Einrichtungen sind verschiedene Dinge - der Leser soll auf einen Blick sehen, was er vor sich hat, ohne jeden Eintrag zu deuten. */ .treffergruppe { margin: 0 0 2.2rem; } .treffergruppe h2 { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .15rem; } .treffer-anzahl { font-size: .8rem; font-weight: 700; /* ⚠️ Dunkle Schrift: weiss erreicht auf dem Lindgruen 2,01. */ color: var(--auf-marke); background: var(--gruen); border-radius: 999px; padding: .1rem .55rem; line-height: 1.5; } .gruppen-erklaerung { margin: 0 0 .7rem; } .treffer-liste { margin: 0; } .treffer-liste li { padding: .5rem 0 .5rem .9rem; border-bottom: 1px solid var(--linie); /* Akzentstreifen an der Kante, gerade auslaufend - keine Rundung */ border-left: 3px solid transparent; } .treffergruppe-seite .treffer-liste li, .treffergruppe-beitrag .treffer-liste li { border-left-color: var(--marke); } .treffergruppe-ort .treffer-liste li { border-left-color: var(--marke-tief); } .treffergruppe-einrichtung .treffer-liste li { border-left-color: var(--linie); } .treffer-liste li:last-child { border-bottom: 0; } .treffer-zusatz { display: block; font-size: .9rem; color: var(--grau); margin-top: .15rem; } .treffer-zusatz mark { background: var(--flaeche); color: inherit; padding: 0 .1em; } .trefferzahl { margin-bottom: 1.4rem; } /* --- Lupe im Hauptmenü ------------------------------------------------- */ .menue-lupe { padding-left: .7rem !important; padding-right: 0 !important; } .menue-lupe span { color: var(--ueberschrift); transition: color .12s ease; } .menue-lupe:hover span { color: var(--orange); } /* Herkunftshinweis am Anfang eines Ratgebers (E-E-A-T). Zurueckhaltend: Er soll die Frage "wer sagt das und seit wann" beantworten, ohne dem Einstiegssatz die Aufmerksamkeit zu nehmen. */ .redaktionshinweis { margin: -.2rem 0 1.4rem; font-size: .82rem; color: var(--leise); } .redaktionshinweis a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(90, 143, 0, .35); } .redaktionshinweis a:hover { border-bottom-color: var(--marke-tief); } /* --- Anker im Fliesstext ------------------------------------------------ Beim Durchsehen der Kindergeld-Seite fiel auf: Der wichtigste Wert der ganzen Seite - 259 Euro - stand mitten im Absatz und ging unter. Seitenlang Text ohne einen einzigen Blickpunkt ist der zweite Grund, warum die Seite kühl wirkte; der erste waren die Farben. Sparsam einsetzen: ein, zwei Stellen je Seite. Ein Text, in dem alles hervorgehoben ist, hebt nichts hervor. */ .inhalt-flaeche strong { color: var(--ueberschrift); font-weight: 600; } /* Kernzahl: der eine Wert, um den es auf der Seite geht. */ .kernzahl { display: block; margin: var(--raum-3) 0 var(--raum-4); padding: var(--raum-3) var(--raum-4); background: var(--akzent-blass); border-left: 4px solid var(--akzent); } .kernzahl b { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.1; color: var(--akzent-tief); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kernzahl span { display: block; margin-top: var(--raum-1); font-size: .92rem; color: var(--leise); } /* Tabellenkopf traegt jetzt Sand statt Grau - waermer und weniger technisch. */ .uk-table th { background: var(--flaeche); color: var(--ueberschrift); border-bottom: 2px solid var(--linie); } /* Das Inhaltsverzeichnis war eine graue Klappbox mitten im Text. Auf Sand gesetzt gehoert es sichtbar zur Seite, statt darin zu schwimmen. */ .uebersicht, .toc-text { background: var(--flaeche); border: none; border-left: 3px solid var(--marke); } /* Die Rubrikfarben sind zurückgebaut - alle Kanten tragen die Hausfarbe. Der Mechanismus lag über ein data-Attribut am body; er ist entfernt, weil toter Code im Stylesheet beim nächsten Mal wieder als Absicht gelesen wird. Zurückholbar über backups/eigen.css.vor-zweifarbig-*. */ /* Alle Akzentkanten tragen die Hausfarbe. */ .ort-suche, blockquote, .treffergruppe-seite .treffer-liste li, .treffergruppe-beitrag .treffer-liste li, .treffergruppe-ort .treffer-liste li { border-left-color: var(--marke); } /* Fussbereich: die Hausfarbe, nicht die Rubrik - er ist auf jeder Seite gleich und soll nicht mitwandern. */ .fuss { background: var(--marke); } /* --- Akzentkanten: die berührten Ecken bleiben eckig -------------------- Regel (Vorgabe Thomas, projektübergreifend): Boxen DUERFEN gerundet sein - aber die Ecken, die der farbige Streifen berührt, müssen eckig sein. Sonst biegt der Anstrich in die Rundung und sieht nach 3D-Effekt aus. ⚠️ Beim Aufräumen hatte ich die Rundung an den Hinweisfeldern ganz entfernt. Das war die falsche Lesart derselben Regel - gefordert ist nicht flach, sondern gerade auslaufend. Und bei `.toc-text` blieb die Rundung rundum stehen, obwohl links ein Streifen sitzt; gemessen wurde das erst an den berechneten Werten im Browser, im Stylesheet war es nicht zu sehen, weil Streifen und Rundung aus verschiedenen Regeln kamen. Geprüft mit `pruefe_akzentkanten.py` (Stylesheet) und im Browser über die berechneten Ecken - beides nötig, siehe oben. */ .hinweis, .uebersicht, .toc-text, .formen-kachel, .ratgeber-kachel, .ort-suche, .kernzahl, .treffer-liste li { border-radius: 0 6px 6px 0; } /* --- Rollenverteilung der zwei Farben ---------------------------------- Merkregel: BLAU traegt die Struktur, HIMBEERE traegt die Zahlen. Das ist sparsamer als es klingt - Zahlen kommen auf diesen Seiten selten vor, stehen aber genau dort, wo es um etwas geht: wie viele Einrichtungen es am Ort gibt, wie viel Kindergeld gezahlt wird, wie viele Plaetze einer Betreuungsform erfasst sind. Wer die Seite ueberfliegt, findet so zuerst die Antwort und dann den Text dazu. ⚠️ Himbeere erreicht auf Weiss nur 3,91 und ist damit keine Schriftfarbe. Sie steht deshalb ausschliesslich an GROSSEN Zahlen (ab 24px fett, dort genuegen 3:1) und an Flaechen. Wo eine Zahl klein bleibt, traegt die abgedunkelte Fassung --akzent-tief (5,83). */ .formen-zahl { color: var(--akzent-tief); } /* Orange traegt Schrift, das Gruen nicht */ strong.zahl { color: var(--akzent-tief); } /* im Fliesstext, deshalb die dunklere Fassung (5,83) */ /* Der Suchknopf und die Kopfleiste bleiben blau - sie sind Struktur. */ /* Der Verweis auf die vollstaendige Rubrikliste steht am Fuss des Blocks und ist als Weiterfuehrung erkennbar, nicht als weiterer Themeneintrag. */ .uebersicht-alle a { font-weight: 600; font-size: .9rem; } .uebersicht-alle a::after { content: " \2192"; } /* Buchstabenreihe des A-Z-Menues. Kein Listenaufbau, sondern eine Zeile - 26 Listenpunkte untereinander waeren laenger als das Verzeichnis selbst. */ .az-sprung { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 var(--raum-2); } .az-sprung a { display: inline-flex; align-items: center; justify-content: center; min-width: 1.85rem; height: 1.85rem; border: 1px solid var(--linie); border-radius: 3px; font-size: .85rem; font-weight: 600; text-decoration: none; } .az-sprung a:hover { background: var(--marke); border-color: var(--marke); color: var(--auf-marke); } /* Sprungziel unter der klebenden Kopfleiste freihalten - sonst verschwindet die Buchstaben-Ueberschrift dahinter. */ .az-gruppe[id] { scroll-margin-top: 5rem; } /* --- Verweise im Text: Himbeere ----------------------------------------- Ansage Thomas, 2026-09-07. Damit trennen sich die beiden Farben klarer: BLAU ist Struktur (Kopfleiste, Navigation, Seitenspalte, Schaltflaechen, Kanten), HIMBEERE ist Inhalt (Verweise mitten im Text, Zahlen, Kennzeichen). Wer liest, erkennt einen weiterfuehrenden Verweis daran, dass er die Inhaltsfarbe traegt und nicht die des Geruests. ⚠️ NICHT im Vorgabewert #fe7f2d: Der erreicht auf Weiss nur 2,53 und ist damit keine Schriftfarbe. Verweise stehen im Fliesstext und sind klein - sie tragen die abgedunkelte Fassung #bd4a00 (5,07 auf Weiss). Die Seitenspalte, die Navigation und der Fussbereich bleiben ausdruecklich gruen: Dort ist der Verweis das Geruest, nicht der Inhalt. */ .inhalt-flaeche a, .ratgeber-kachel a, .hinweis a, .frage a, .kernzahl a { color: var(--akzent-tief); } .inhalt-flaeche a:hover, .ratgeber-kachel a:hover, .hinweis a:hover, .frage a:hover { color: var(--akzent-tief); text-decoration: underline; } /* Ausgenommen: das Inhaltsverzeichnis und der Redaktionshinweis. Beide sind Wegweiser zur Seite selbst, kein weiterfuehrender Inhalt. */ .inhalt-flaeche .uebersicht a, .inhalt-flaeche .toc-text a, .redaktionshinweis a { color: var(--orange); } /* --- Drei Formate auf der Redaktionsseite -------------------------------- ⚠️ Drei Kaesten nebeneinander sind ein bekanntes Baukasten-Merkmal - die Endkontrolle fragt sie unter [9] ausdruecklich ab. Hier tragen sie trotzdem, weil sie etwas Wahres ueber den Aufbau der Seite sagen: Es GIBT genau diese drei Inhaltstypen, und die Zahlen dazu sind nachpruefbar. Statt Sinnbildern steht die Zahl. Das ist ehrlicher - ein Bildschirm-Symbol ueber "Ratgeberbeitraege" traegt keine Auskunft - und es folgt der Regel des Farbsystems: Zahlen sind Himbeere. */ .formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--raum-3); margin: var(--raum-4) 0 var(--raum-5); } .format { background: var(--flaeche); border-left: 3px solid var(--marke); border-radius: 0 6px 6px 0; padding: var(--raum-3) var(--raum-3) var(--raum-3) var(--raum-4); } .format-zahl { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--akzent-tief); font-variant-numeric: tabular-nums; } .format h3 { font-size: .95rem; margin: var(--raum-1) 0 var(--raum-2); color: var(--ueberschrift); } .format ul { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--text); } .format li { margin-bottom: .35rem; } .format li:last-child { margin-bottom: 0; } /* --- Prozessdarstellung auf der Redaktionsseite -------------------------- Drei Spuren nebeneinander, jede mit nummerierten Schritten. Die Nummern sind hier BEGRUENDET und nicht Zierde: Es ist eine echte Reihenfolge - erst sammeln, dann abgleichen, dann pruefen. Wo keine Reihenfolge besteht, hat eine Nummerierung nichts zu suchen. Ohne Sinnbilder: Ein Zahnrad ueber "Abgleichen" traegt keine Auskunft. */ .prozess { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--raum-4) var(--raum-3); margin: var(--raum-4) 0 var(--raum-5); } .prozess-spur h3 { font-size: .95rem; margin: 0 0 var(--raum-2); padding-bottom: var(--raum-1); border-bottom: 2px solid var(--marke); color: var(--ueberschrift); } .prozess-spur ol { list-style: none; counter-reset: schritt; margin: 0; padding: 0; } .prozess-spur li { counter-increment: schritt; position: relative; padding: 0 0 var(--raum-3) 2.1rem; font-size: .85rem; line-height: 1.5; color: var(--leise); } /* Die Ziffer traegt die Inhaltsfarbe - wie jede Zahl auf dieser Seite. */ .prozess-spur li::before { content: counter(schritt); position: absolute; left: 0; top: -.1rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linie); border-radius: 50%; font-size: .78rem; font-weight: 600; color: var(--akzent-tief); background: var(--weiss); } /* Die Verbindungslinie macht aus einer Aufzaehlung einen Ablauf. */ .prozess-spur li:not(:last-child)::after { content: ""; position: absolute; left: .74rem; top: 1.5rem; bottom: .2rem; width: 1px; background: var(--linie); } .prozess-spur li span { display: block; font-weight: 600; color: var(--ueberschrift); font-size: .9rem; } /* --- Stadtteilauswahl über dem Kartenregister --------------------------- Der gewählte Stadtteil hebt sich ab, und der Weg zurück steht sichtbar daneben. Ohne ihn sitzt man im gefilterten Zustand fest - die Karte zeigt dann fünf Punkte, und niemand weiss, wie die anderen wiederkommen. */ .kita-register-aktiv { background: var(--marke) !important; border-color: var(--marke) !important; color: var(--auf-marke) !important; } .kita-register-aktiv em, .kita-register-aktiv span { color: var(--auf-marke) !important; } .kita-register-zurueck { display: inline-block; margin: 0 0 var(--raum-3); padding: .35rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; color: var(--orange); background: none; border: 1px solid var(--linie); border-radius: 4px; cursor: pointer; } .kita-register-zurueck:hover { border-color: var(--marke); background: var(--marke-blass); } .kita-register-zurueck::before { content: "\2190 "; } /* Die Postleitzahl in der Gruppenüberschrift tritt zurück - der Stadtteilname trägt die Auskunft, die Zahl ist nur die Zuordnung. */ .kita-gruppe-plz { font-weight: 400; font-size: .85em; color: var(--leise); } /* --- Vier Schritte: so kommt man zu einem Platz ------------------------ Nachgebaut nach dem Kitaportal Gelsenkirchen, inhaltlich aber unser Ablauf: wir sind ein Verzeichnis, kein Anmeldeportal. Deshalb steht in Schritt 3 ausdruecklich, dass die Anmeldung bei der Einrichtung passiert. Die Zeichen sind Inline-SVG und keine Bilddatei: sie bleiben in jeder Groesse scharf, wiegen ein paar hundert Byte statt zwei Megabyte, und sie nehmen ueber `currentColor` die Hausfarbe an - auch in den Farbvarianten. */ .schritte { list-style: none; margin: 0 0 var(--raum-5); padding: 0; display: grid; gap: var(--raum-4) var(--raum-3); grid-template-columns: 1fr; } @media (min-width: 620px) { .schritte { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .schritte { grid-template-columns: repeat(4, 1fr); } } .schritt { margin: 0; } .schritt-bild { display: block; width: 84px; height: 66px; /* Das Zeichen sitzt auf einer eigenen blassen Kachel - so wie in der Vorlage vom 8.9. Ohne sie stehen vier duenne Striche im Weissen und wirken wie ein Platzhalter. */ box-sizing: content-box; padding: 14px 20px; background: var(--marke-blass); border-radius: 14px; margin: 0 0 var(--raum-3); fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .schritt-bild .dach { stroke: var(--ueberschrift); } .schritt-bild .zeichen { stroke: var(--marke); } .schritt h3 { font-size: 1.15rem; font-weight: 600; color: var(--ueberschrift); margin: 0 0 var(--raum-2); text-transform: none; } .schritt p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text); } /* Nummeriert wird nicht dekorativ: die vier Schritte sind eine echte Reihenfolge, deshalb
    - die Ziffer steht vor der Ueberschrift. */ .schritte { counter-reset: schritt; } .schritt h3::before { counter-increment: schritt; content: counter(schritt) ". "; /* ⚠️ Orange, nicht --marke-dunkel: die Ziffer ist Text (1,15rem fett) und braucht 4,5. Das Gruen erreicht 3,05 - das genuegt fuer ein Zeichen, nicht fuer eine Ziffer. */ color: var(--orange); } /* --- Rhythmus der Startseite ------------------------------------------ Vorher stand alles auf Weiss, von der Buehne bis zum Fuss. Das liest sich als eine einzige lange Flaeche; die Abschnitte waren nur durch Abstand getrennt. Der Schritte-Block bekommt deshalb einen eigenen Grund - er ist der einzige Teil der Startseite, der etwas erklaert statt zu verlinken. */ .schritte-band { background: var(--flaeche); padding: .2rem 1.8rem 1.6rem; margin: var(--raum-4) 0 var(--raum-5); } .schritte-band .start-ueberschrift { margin-top: 1.8rem; } .schritte-band .schritte { margin-bottom: .6rem; } @media (max-width: 639px) { .schritte-band { padding: .2rem 1.1rem 1.2rem; } } /* --- Figurenband ------------------------------------------------------ Die fuenf gezeichneten Kinder stammen aus dem eigenen Logo. Bisher kamen sie nur oben links vor, in Briefmarkengroesse. Sie sind das einzige figuerliche und bunte Element der Marke - genau das, was der neuen Seite gegenueber der Altseite fehlte (Rueckmeldung Thomas, 8.9.2026: „nuechtern und trocken ohne Liebe"). Sie stehen ueber dem Abschnitt, der sagt, wer hinter dem Verzeichnis steckt. Dekoration allein waere zu wenig; hier tragen sie einen Inhalt, der ohnehin auf die Startseite gehoert. Deshalb `alt=""`: Der Text daneben sagt alles, was das Bild sagt. */ .figurenband { background: var(--marke-blass); padding: 2.6rem 2rem 2.8rem; margin: var(--raum-5) 0 0; text-align: center; } .figurenband img { display: block; width: min(520px, 92%); height: auto; margin: 0 auto var(--raum-3); } .figurenband-text { max-width: 34rem; margin: 0 auto; } .figurenband h2 { font-size: 1.3rem; font-weight: 600; color: var(--ueberschrift); text-transform: none; margin: 0 0 var(--raum-2); } .figurenband p { margin: 0 0 var(--raum-3); line-height: 1.6; color: var(--text); } .figurenband-wege { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; margin: 0; } .figurenband-wege a { font-weight: 600; } /* --- Aufzaehlungszeichen ---------------------------------------------- Graue Punkte im Fliesstext waren das letzte Stueck Serienausstattung. Auf der Altseite standen dort kleine orange Figuren; ein farbiges Zeichen tut dieselbe Arbeit, ohne bei achtzig Aufzaehlungen aufdringlich zu werden. ::marker faerbt nur den Punkt, nicht den Text - dafuer ist die Eigenschaft da. Ein nachgebautes ::before mit position:absolute waere fehleranfaellig bei mehrzeiligen Punkten. */ .inhalt-flaeche ul > li::marker, .start-text ul > li::marker { color: var(--marke-dunkel); } .inhalt-flaeche ol > li::marker, .start-text ol > li::marker { color: var(--marke-dunkel); font-weight: 700; } /* --- Zeichensatz ------------------------------------------------------ ⚠️ Die Zeichen und die Aufzaehlungspunkte tragen --marke-dunkel (#8b9c26, 3,05 auf Weiss). Das ist BEWUSST so: Fuer grafische Elemente verlangt WCAG 3:1, nicht 4,5 - die Grenze gilt fuer Text. Ein Zeichen neben seiner Beschriftung ist ein grafisches Objekt. Geprueft am 9.9.2026. Siehe includes/zeichen.php. Die Farbe kommt ueber `currentColor` aus dem umgebenden Text, die Groesse ueber die Klasse - so tragen alle Zeichen dieselbe Strichstaerke, egal wie gross sie stehen. */ .zeichen { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; } .zeichen-gross { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; } /* In den Kopfzeilen der Seitenspalte steht das Zeichen vor der Beschriftung. */ .uebersicht-kopf { display: flex; align-items: center; gap: .55rem; } .uebersicht-kopf .zeichen { stroke-width: 1.9; } /* Auf den Wegweiser-Kacheln der Startseite sitzt es in der Ueberschrift. */ .start-weg h3 { display: flex; align-items: center; gap: .5rem; } /* Flaches Band ueber dem Ortsverzeichnis. Darunter folgen vier Spalten mit reinen Verweisen - ohne das Band steht dort eine Textwueste, und der Abschnitt sieht aus wie ein Anhang statt wie ein eigenes Angebot. */ .orte-band { display: block; margin: 0 0 var(--raum-3); } .orte-band img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: center 60%; } /* Die Zeichen in den Ueberschriften der Startseite */ .start-ueberschrift, .start-flaeche h3 { display: flex; align-items: center; gap: .55rem; } .start-ueberschrift .zeichen { color: var(--marke-dunkel); } .start-flaeche h3 .zeichen { color: var(--marke-dunkel); } /* --- 404 -------------------------------------------------------------- Keine Entschuldigungsseite, sondern ein Einstieg: die Adresse benennen, die Suche anbieten, vier Wege nennen. Die Figuren aus dem Logo nehmen der Situation die Schaerfe - eine reine Textseite in einem Layout voller Bilder wirkt wie ein Ausrutscher. */ .nicht-gefunden { max-width: 42rem; } .nicht-gefunden-bild { display: block; } .nicht-gefunden-bild img { display: block; width: min(360px, 70%); height: auto; margin: 0 0 var(--raum-3); } .nicht-gefunden h2 { font-size: 1.15rem; font-weight: 600; text-transform: none; margin: var(--raum-5) 0 var(--raum-3); } .nicht-gefunden-suche { margin-top: var(--raum-4); } .nicht-gefunden-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-3); } .nicht-gefunden-wege li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem; align-items: center; } .nicht-gefunden-wege .zeichen { grid-row: 1 / 3; width: 1.6rem; height: 1.6rem; color: var(--marke-dunkel); } .nicht-gefunden-wege a { font-weight: 600; } .nicht-gefunden-wege span { grid-column: 2; font-size: .9rem; color: var(--leise); } .nicht-gefunden-hinweis { margin-top: var(--raum-5); font-size: .93rem; color: var(--leise); } /* --- Umfrage ---------------------------------------------------------- Vorher eine uk-card wie jede andere - sie ging zwischen den Kita-Karten unter. Jetzt traegt sie die Markenflaeche und einen Akzentstreifen. ⚠️ Akzentkanten-Regel: Die Ecken, die der Streifen beruehrt, bleiben eckig. Bogen der Streifen mit, entstuende der 3D-Effekt, den wir nicht wollen. */ .umfrage-kasten { background: var(--marke-blass); border-left: 4px solid var(--marke); border-radius: 0 6px 6px 0; padding: 1.4rem 1.6rem 1.5rem; margin: 0 0 var(--raum-4); } .umfrage-frage { font-size: 1.08rem; font-weight: 600; color: var(--ueberschrift); text-transform: none; margin: 0 0 .5rem; } /* Die Zahl steht VOR der Abstimmung - sie ist der Grund mitzumachen. */ .umfrage-bisher { margin: 0 0 1rem; font-size: .93rem; color: var(--leise); } .umfrage-bisher strong { color: var(--orange); } /* Text, braucht 4,5 */ .umfrage-dank { margin: 0 0 1rem; font-weight: 600; color: var(--orange); /* Text, braucht 4,5 - das Gruen erreicht 3,05 */ } .umfrage-kasten label { cursor: pointer; } .umfrage-kasten .uk-button { margin-top: .6rem; } /* Nach dem Ruecksprung kurz hervorheben, damit klar ist, wo man gelandet ist. Ohne Bewegung fuer alle, die reduzierte Animation eingestellt haben. */ #umfrage { scroll-margin-top: 90px; } #umfrage:target + .umfrage-kasten, .umfrage-fertig { border-left-color: var(--akzent); } @media (prefers-reduced-motion: no-preference) { #umfrage:target + .umfrage-kasten { animation: umfrage-blitz 1.4s ease-out 1; } } @keyframes umfrage-blitz { 0% { background: var(--akzent-blass); } 100% { background: var(--marke-blass); } } /* --- Aufklappbare Stadtteilgruppen ------------------------------------ Der eigene Marker statt des Systemdreiecks: Das Dreieck sitzt je nach Browser anders und laesst sich nicht zuverlaessig einfaerben. */ .kita-gruppe > .kita-gruppe-kopf { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .6rem; padding: .55rem .2rem .55rem 0; border-bottom: 1px solid var(--linie-fein); } .kita-gruppe > .kita-gruppe-kopf::-webkit-details-marker { display: none; } .kita-gruppe > .kita-gruppe-kopf::after { content: ""; margin-left: auto; flex: 0 0 auto; width: .58em; height: .58em; border-right: 2px solid var(--marke-dunkel); border-bottom: 2px solid var(--marke-dunkel); transform: rotate(45deg) translateY(-.12em); transition: transform .15s ease; } .kita-gruppe[open] > .kita-gruppe-kopf::after { transform: rotate(-135deg) translateY(-.05em); } @media (prefers-reduced-motion: reduce) { .kita-gruppe > .kita-gruppe-kopf::after { transition: none; } } .kita-gruppe > .kita-gruppe-kopf:hover { background: var(--marke-blass); } .kita-gruppe > .kita-gruppe-kopf:focus-visible { outline: 2px solid var(--marke-dunkel); outline-offset: 2px; } .kita-gruppe > .kita-gruppe-kopf .kita-gruppe-titel { margin: 0; } .kita-gruppe > .kita-liste { margin-top: .6rem; } /* Aus dem WordPress-Bestand uebersetzte Ausrichtungen, siehe wp_reste_bereinigen(). `aligncenter` hiess dort „zentriert" - ohne eine Regel hier stuende das Bild links und die Absicht waere verloren. */ .bild-mitte { display: block; margin-left: auto; margin-right: auto; }