/* ── teil-13-ausbildungsweg-wegzeichen.css ── */ /* ══════════════════════════════════════════ AUSBILDUNG: Weg zum Woodbadge + Bausteine ══════════════════════════════════════════ */ /* Zitat-Baustein / wiederverwendbare Komponente (z. B. Baden-Powell). Streifen nimmt die Seitenakzentfarbe: --sc (Stufen-/AK-/Leitenden-Seiten), sonst Fallback auf das DPSG-Blau --primary. Über --quote-accent pro Stelle überschreibbar. Doodle-Look: Kreidestreifen in css/doodles.css. */ .quote { border-left: 3px solid var(--quote-accent, var(--sc, var(--primary))); padding: 4px 0 4px 20px; margin: 22px 0 0; font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.65; color: var(--text); max-width: 640px; } .quote cite { display: block; font-style: normal; font-family: var(--font-ui); font-size: 1rem; color: var(--text-muted); margin-top: 8px; } /* Drei Phasen bis zum Woodbadge */ .weg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .weg-step { background: var(--bg-mid); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: 26px 24px 24px; } .weg-nr { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--sc, var(--primary)) 12%, transparent); /* Akzent leicht zur Textfarbe gezogen: pur kam er auf der eigenen Toenung nur auf 4,22:1 (Ausbildungslila). Im Dunkelmodus hellt dieselbe Mischung auf. */ color: color-mix(in srgb, var(--sc, var(--primary)) 78%, var(--text)); font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 16px; } .weg-step :is(h2, h3) { font-family: var(--font-heading); font-size: 1.375rem; color: var(--text); margin-bottom: 8px; } .weg-step p { color: var(--text-secondary); font-size: 1rem; line-height: 1.62; } /* Baustein-Gruppen (Farbe je Modul via --mc) */ .mod-gruppe { margin-bottom: 26px; } .mod-gruppe:last-of-type { margin-bottom: 0; } .mod-gruppe-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .mod-pill { font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; background: var(--mc, var(--sc, var(--primary))); color: var(--on-accent); border-radius: 999px; padding: 5px 14px; } .mod-gruppe-head span:not(.mod-pill) { color: var(--text-secondary); font-size: 1rem; } .mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; align-items: start; } .mod-card { background: var(--bg-mid); border: 1px solid var(--border-card); border-radius: 10px; overflow: hidden; transition: border-color .25s; } .mod-card.is-open { border-color: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 55%, transparent); } .mod-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 46px 13px 16px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; } .mod-nr { flex-shrink: 0; min-width: 42px; height: 34px; padding: 0 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 13%, transparent); /* Die Modulfarben schaffen 4,5:1 gegen Karte und Seite, aber nicht gegen ihre eigene Toenung hier (4,27 bis 4,46). Leicht zur Textfarbe gezogen. */ color: color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 78%, var(--text)); font-family: var(--font-heading); font-size: 1rem; border-radius: 8px; } /* Titel, Etikett und Zeitangabe teilen sich eine eigene Flex-Ebene. min-width:0 ist hier das Entscheidende: ohne das kann ein Flex-Kind nicht unter seine breiteste unteilbare Einheit schrumpfen, und ein deutsches Kompositum ("Pfadfindertechniken") ist genau das. Die Zeile wurde dadurch breiter als ihr Kasten und schob sich unter den Pfeil. hyphens:auto trennt sauber nach Silben (das dafuer steht in default.php), overflow-wrap ist der Rueckfall fuer Woerter ohne Trennstelle. */ .mod-headtext { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .mod-title { flex: 1 1 auto; min-width: 0; font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--text); line-height: 1.35; hyphens: auto; overflow-wrap: anywhere; } .mod-meta { flex-shrink: 0; font-size: .9rem; color: var(--text-muted); white-space: nowrap; } .mod-tag { flex-shrink: 0; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mc, var(--sc, var(--primary))); border: 1px solid color-mix(in srgb, var(--mc, var(--sc, var(--primary))) 45%, transparent); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .mod-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--mc, var(--sc, var(--primary))); font-size: .8rem; transition: transform .3s; } .mod-card.is-open .mod-caret { transform: translateY(-50%) rotate(180deg); } .mod-desc { display: none; padding: 0 16px 15px 72px; overflow: hidden; } .mod-card.is-open .mod-desc { display: block; } .mod-desc p { color: var(--text-secondary); font-size: 1rem; line-height: 1.62; margin: 0; } .mod-desc .int-link { display: inline-block; margin-top: 9px; } @media (max-width: 760px) { .mod-desc { padding-left: 16px; } .mod-meta { display: none; } } /* ================================================================ RESPONSIVE HARDENING Verhindert, dass Grid-Kinder ihre Spalte durch lange Toolbars oder absolut positionierte Hilfstexte verbreitern. Die Regeln stehen am Dateiende, damit sie auch die seitenspezifischen Blöcke absichern. ================================================================ */ img, svg, video { max-width: 100%; } /* Grid-Items haben standardmaessig min-width:auto. Dadurch bestimmte die Termin-Toolbar bislang auf kleinen Screens eine ~750px breite Spalte. */ :is(.events-layout, .blog-layout, .kontakt-wrap, .dv-split, .ab-grid, .int-split) > * { min-width: 0; } .events-layout :is(.ev-toolbar, #events-list, .ev-ov-group, .ev-ov-row) { min-width: 0; max-width: 100%; } /* Die zweispaltige Terminansicht wird schon im kleinen Laptop-/Tabletbereich zu eng: Filter, Liste und 320px-Sidebar bekommen dann jeweils volle Breite. */ @media (max-width: 1100px) { .events-layout { grid-template-columns: minmax(0, 1fr); } .events-layout .sidebar-sticky { position: static; top: auto; } } /* Auf Touch-/Tabletbreiten ist eine am Wort verankerte 280px-Sprechblase unzuverlaessig. Als Bottom-Card bleibt sie immer voll im Viewport. */ @media (max-width: 960px) { .gloss-tip.is-mobile { left: 16px; right: 16px; top: auto !important; bottom: 16px; width: auto; max-width: none; } } @media (max-width: 560px) { /* Kompakter, aber weiterhin gut bedienbarer Header ab 320px Breite. */ header { padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); } .logo { gap: 8px; min-width: 0; } header .logo-dv { height: 34px; } header .logo-text { font-size: .92rem; line-height: 1.15; letter-spacing: .065em; } .nav-actions-mobile { gap: 4px; flex-shrink: 0; } .nav-actions-mobile .nav-search { width: 36px; height: 36px; margin-left: 0; } .nav-actions-mobile .nav-toggle { width: 36px; height: 36px; padding: 4px; } .wrap { padding-left: 18px; padding-right: 18px; } .hero-inner { padding-left: 18px; padding-right: 18px; padding-bottom: 46px; } .page-hero .wrap { padding-top: 92px; } .sec, .sec-sm { padding-top: 48px; padding-bottom: 40px; } .ft-inner { padding-left: 18px; padding-right: 18px; } .ft-bottom-inner { padding-left: 18px; padding-right: 18px; } .bleed-card { margin-left: -18px; margin-right: -18px; padding-left: 18px !important; padding-right: 18px !important; } .kl, .kr { padding: 48px 18px; } .kl-row { gap: 12px; padding-left: 0; padding-right: 0; } .kl-info { min-width: 0; } .kl-value { overflow-wrap: anywhere; } .kl-ext { display: none; } .dl-btn { min-width: 0; max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; } .mod-head { gap: 10px; padding-left: 12px; padding-right: 40px; } .mod-title { min-width: 0; overflow-wrap: anywhere; } .mod-tag { display: none; } /* Kategorie steht bereits im Kontexttext. Auf sehr schmalen Screens bleibt deshalb nur ein eventuell wichtiger Status rechts sichtbar. */ .ev-ov-row { gap: 12px; padding-left: 2px; padding-right: 2px; } .ev-ov-row .chip { display: none; } .ev-ov-tags { gap: 6px; } .ev-ov-day { min-width: 38px; font-size: 1.65rem; } .ev-month-head { font-size: 1.45rem; } #consent-banner { padding: 10px; } .consent-inner { padding: 16px; gap: 14px; } .consent-text { min-width: 0; flex-basis: 100%; } .consent-btns { width: 100%; flex-wrap: wrap; } } /* ══════════════════════════════════════════ WEGZEICHEN — Pfadfinder-Zeichen als Inline-SVG Quelle: js/wegzeichen.js (ein -Sprite, hier nur referenziert). Normal-Look: saubere Linie. Doodle-Look: Kreide-Kante (siehe doodles.css). Größe skaliert per em → passt sich der Umgebung an; Farbe = currentColor. ══════════════════════════════════════════ */ .wz { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.24em; flex: none; color: inherit; fill: none; stroke: currentColor; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; } .wz use { pointer-events: none; } /* ── Legende (Erklär-Bereich): alle 12 Zeichen mit Namen ── */ .wz-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .wz-item { margin: 0; padding: 20px 12px 16px; text-align: center; border-radius: 12px; background: var(--bg-mid); border: 1px solid var(--border-card); } .wz-item-sign { display: flex; align-items: center; justify-content: center; height: 62px; margin-bottom: 10px; color: var(--sc, var(--primary)); } .wz-item-sign .wz { width: 54px; height: 54px; } .wz-item-sign .dood-svg { position: static; width: 54px; height: 54px; color: inherit; opacity: 1; } .wz-item figcaption { font-family: var(--font-ui); font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.25; } .wz-item figcaption small { display: block; font-weight: 400; font-size: .8rem; color: var(--text-secondary); margin-top: 3px; } /* ── teil-14-bedienleisten-safari.css ── */ /* ══════════════════════════════════════════ BEDIENLEISTEN: FILTER, SUCHE, ANSICHTSWECHSEL ────────────────────────────────────────── Eine Leiste für alle vier Stellen: Neuigkeiten, Service, Arbeitskreise, Termine. Vorher hatte jede ihre eigene Höhe, Schriftgröße und teils Großbuchstaben. Auf dem Handy brachen die Pillen in drei Zeilen um, bis der Ansichtswechsel allein darunter stand. Die Regel, die Janis vorgegeben hat: Die Chips stehen in EINER Zeile. Passen sie nicht, klappt js/filterleiste.js sie in ein Dropdown, und zwar in dasselbe, das die Neuigkeiten schon benutzen (js/auswahl.js). Kein Umbruch, keine zweite Bauart. --control-height ist die gemeinsame Höhe. Wer ein neues Bedienelement dazubaut, nimmt sie, sonst geht das Nebeneinander wieder auseinander. ══════════════════════════════════════════ */ /* --control-height (44px) steht in css/tokens.css. */ .filterbar, .filterbar.news-filter, .filterbar.ev-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-bottom: 24px; } /* nowrap plus overflow:hidden ist die Messgrundlage für filterleiste.js: scrollWidth > clientWidth heißt „passt nicht in die Zeile". */ /* 3px Luft für den Filzstift-Rahmen der Chips, ausgeglichen durch den negativen Rand: sonst schnitt overflow:hidden ihn oben und unten an. */ .fb-chips { display: flex; gap: 8px; flex-wrap: nowrap; overflow: hidden; min-width: 0; padding: 3px; margin: -3px; } .fb-drop { flex: 0 1 auto; min-width: 0; } .fb-drop:empty { display: none; } /* Kein Durchblitzen: Bis filterleiste.js entschieden hat, ob Chips oder Dropdown, bleibt die Leiste unsichtbar. `visibility` statt `display`, damit der Platz erhalten bleibt und nichts springt — und damit die Chips messbar bleiben, denn versteckt per display hätten sie keine Breite. Die Animation ist die Reißleine: Fällt das Skript aus, wird die Leiste nach 400 ms trotzdem sichtbar, dann eben mit umbrechenden Chips. Eine dauerhaft unsichtbare Bedienleiste wäre der schlimmere Fehler. `html.js` setzt das Anti-Flash-Skript im Kopf. Ohne JavaScript greift die Regel also gar nicht erst. */ html.js .filterbar:not(.fb-ready) { visibility: hidden; animation: fb-reissleine 0s linear .4s forwards; } @keyframes fb-reissleine { to { visibility: visible; } } .filterbar.fb-collapsed .fb-chips { display: none; } .filterbar:not(.fb-collapsed) .fb-drop { display: none; } .fb-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .fb-actions .view-toggle, .fb-actions .ev-view-toggle { margin-left: 0; } /* Suchfeld. Höhe und Schrift wie alles andere in der Leiste, damit die Oberkanten stimmen — das war Janis' erste Meldung an den Neuigkeiten. */ .fb-search { position: relative; flex: 1 1 220px; min-width: 0; } .fb-search > i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .9rem; pointer-events: none; } .fb-search > input { width: 100%; height: var(--control-height); padding: 0 16px 0 40px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--bg-mid); color: var(--text); font-family: var(--font-ui); font-size: 1rem; font-weight: 400; } /* Das Dropdown der Neuigkeiten wird von js/auswahl.js zu .ds-btn. Beide Zustände brauchen dieselbe Höhe, sonst springt die Zeile beim Laden. */ .filterbar select, .filterbar .ds-btn { height: var(--control-height); padding: 0 16px; border-radius: 999px; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; border: 1px solid var(--border-card); background: var(--bg-mid); color: var(--text); cursor: pointer; } .filterbar .ds { display: inline-flex; } /* ── Handy: Suche über die ganze Breite, Filter darunter zu gleichen Teilen ── Zwei Bedienelemente nebeneinander auf 360px sind je 170px breit, und darin steht kein „Alle Themen" mehr. Deshalb bekommt die Suche Zeile eins allein und die Filter teilen sich Zeile zwei. Nur mobil, am Desktop ist eine Zeile richtig. */ @media (max-width: 760px) { .filterbar, .filterbar.news-filter, .filterbar.ev-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Nur die Suche wird gesetzt, den Rest verteilt das Raster von selbst: Neuigkeiten bekommen Thema und Sortierung nebeneinander, Service und Termine den Filter links und den Ansichtswechsel rechts. */ .fb-search { grid-column: 1 / -1; flex: none; } /* Der Umschalter gehört an den rechten Rand, nicht in die Mitte des Schirms. grid-column erzwingt die letzte Spalte unabhängig davon, was davor steht, width:max-content verhindert das Dehnen über die halbe Breite, und justify-content fängt den Rest ab. */ .fb-actions { grid-column: 2 / -1; justify-self: end; justify-content: flex-end; width: max-content; max-width: 100%; margin-left: 0; } .fb-chips, .fb-drop, .fb-sel { min-width: 0; } .fb-drop > select, .fb-sel > select { width: 100%; } .filterbar .ds { display: flex; width: 100%; } .filterbar .ds-btn { width: 100%; justify-content: space-between; } } /* ══════════════════════════════════════════ FLÄCHE ÜBER DER NAVBAR (iOS-Safari) ────────────────────────────────────────── Vorgeschichte: Erst hatten wir viewport-fit=cover und einen Streifen, in dem die Seite durchkam. Dann kam cover raus, in der Annahme, Safari färbe die Fläche selbst nach theme-color. Genau das tut das neue Safari-Design nicht mehr — es zeigt dort Seiteninhalt, egal was theme-color sagt. Drei Versuche sind daran gescheitert. Also der umgekehrte Weg: cover ist zurück (snippets/head.php), damit env(safe-area-inset-top) wieder einen Wert liefert und wir die Fläche selbst bemalen können. Der Kopf reicht durch sein padding-top schon hinein; hier kommt nur noch eine VOLL DECKENDE Lage darüber. Der Kopf selbst ist mit .97 plus Weichzeichner absichtlich durchscheinend, und genau das war oben sichtbar. ══════════════════════════════════════════ */ /* Hier stand ein header::before, das die Safe-Area übermalen sollte. Es ist raus: absolut positionierte Kinder tastet Safari gar nicht ab, und die Kopfzeile deckt die Fläche durch ihr padding-top ohnehin selbst. Die eigentliche Ursache war das Korn-Overlay, siehe body::before ganz oben. */ /* ══════════════════════════════════════════ HANDY: KARTEN OHNE RAHMEN WERDEN RANDBÜNDIG ────────────────────────────────────────── Im Doodle-Look haben genau zwei Kartenarten keinen gezeichneten Rahmen: die Neuigkeiten-Karten der Startseite (.news-card) und die Beitragsliste (.blog-post). Bei beiden steht das Bild randbündig, der Text darunter aber eingerückt — auf dem Handy sieht das nach einem Versehen aus, weil kein Rahmen die Einrückung erklärt. Also links und rechts auf 0. Oben bleibt Luft, sonst klebt das Datum am Bild. Gilt auf ALLEN Breiten, nicht nur mobil: Janis wollte es am Desktop probeweise genauso. Wenn es dort nicht überzeugt, kommt hier ein @media (max-width: 760px) darum und der Rest bleibt. ══════════════════════════════════════════ */ .news-body { padding: 16px 0 0; } .bp-body { padding: 18px 0 0; } /* Treffpunkt im Stammes-Steckbrief verlinkt auf Google Maps. Unterstrichen, damit erkennbar ist, dass es ein Link ist, und mit kleinem Aussen-Pfeil, weil das Ziel die Seite verlässt. */ .stamm-karte-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sc, var(--primary)) 45%, transparent); } .stamm-karte-link:hover { color: var(--sc, var(--primary)); text-decoration-color: currentColor; } .stamm-karte-link i { font-size: .72em; opacity: .65; margin-left: 2px; } /* ══════════════════════════════════════════ SAFARI-26-TINT: die Fläche über der Navbar ────────────────────────────────────────── Safari 26 färbt die Fläche um die Statusleiste nicht mehr nach theme-color, sondern liest die background-color eines fixierten Elements am oberen Rand. Diese Fläche liegt AUSSERHALB des Layout-Viewports: env(safe-area-inset-top) ist auf dem Gerät 0 (gemessen), top:0 sitzt also schon unter der Statusleiste. Wir können dort nichts hinmalen — wir können Safari nur eine Farbe zum Abtasten hinlegen. AM GERÄT AUSGEMESSEN (iPhone mit Dynamic Island, iOS 26, Janis am 06.08.). Fünf Kandidaten, jeder in eigener Farbe, jeder nur in einer Eigenschaft verschieden: 4 px hoch, deckend, sichtbar färbt NICHT 4 px hoch, visibility: hidden färbt NICHT 64 px hoch, deckend färbt 64 px hoch, opacity .97 färbt 64 px hoch, backdrop-filter färbt NICHT (fällt auf die Seitenfarbe zurück) DIE HÖHE ENTSCHEIDET. Die Dokumentation nennt „mindestens 3 Pixel hoch"; für diese iOS-Version stimmt das nicht. Genau daran sind meine ersten Versuche gescheitert: das Element war 4 px hoch, also die nachweislich wirkungslose Variante. Zwei weitere Annahmen der Quelle gelten hier ebenfalls nicht: visibility:hidden wird NICHT abgetastet, und opacity unter 1 disqualifiziert NICHT. backdrop-filter disqualifiziert. Ebenfalls belegt wirkungslos, alles selbst probiert: theme-color, viewport-fit=cover mit Safe-Area-Variablen, ein erzwungener Repaint per translateZ(0), die Hintergrundfarbe von body, und das Verschieben des Korn-Overlays (das trägt opacity .03 und war ohnehin nie Kandidat). WARUM NICHT EINFACH DIE KOPFZEILE: Sie erfüllt alle Bedingungen — 64 px hoch, volle Breite, top:0, deckend, ohne backdrop-filter (gemessen) — und wird trotzdem nicht abgetastet. Woran das liegt, ist offen; ein nackter div derselben Geometrie funktioniert (Variante C der Messreihe). Deshalb dieser div. 56 px, nicht 64: klar über der wirkungslosen Grenze und unter der Höhe der Kopfzeile an jedem Breakpoint. Er liegt ohne z-index hinter der Kopfzeile (z-index 1000) und trägt dieselbe Farbe — unsichtbar, und welches der beiden Elemente Safari nimmt, ist damit gleichgültig. NICHT hinzufügen: backdrop-filter, filter, visibility, transition. Nicht verkleinern. Es waren sieben Anläufe. Quellen: github.com/andesco/safari-color-tinting (Regeln, teils überholt), 1ar.io/updates/safari-26-liquid-glass-web/, jahir.dev/blog/safari-toolbar ══════════════════════════════════════════ */ .safari-tint { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background-color: rgb(var(--hbg)); pointer-events: none; } /* ══════════════════════════════════════════ KOPIERBLOCK: Textvorlagen zum Übernehmen ────────────────────────────────────────── Jeder ```-Codeblock im Fließtext wird von js/components.js zu einem Kasten mit Kopfzeile und Kopierknopf. Gebaut für die Unfallmeldung auf /service/versicherung: Dort steht eine Mailvorlage, die man kopiert und aus dem eigenen Mailprogramm schickt. Warum kein Formular: Eine Unfallmeldung enthält Gesundheitsdaten, also eine besondere Kategorie nach § 4 Nr. 2 KDG. Eine Vorlage wird nur angezeigt, die Daten entstehen erst im Mailprogramm und berühren unseren Server nie. Der Kasten muss deshalb auf den ersten Blick nach „zum Mitnehmen" aussehen, nicht nach Formular. ══════════════════════════════════════════ */ .kopierblock { margin: 24px 0; background: var(--bg-mid); border: 1px solid var(--border-card); border-radius: var(--radius-lg); overflow: hidden; } .kopierblock-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border-card); background: color-mix(in srgb, var(--text) 4%, transparent); } .kopierblock-titel { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); } .kopierblock-titel i { color: var(--sc, var(--primary)); font-size: .9rem; } .kopierblock pre { margin: 0; padding: 16px; overflow-x: auto; } .kopierblock code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.7; color: var(--text); /* pre-wrap statt pre: am Handy musste man die Vorlage seitlich schieben, um sie zu lesen. Kopiert wird weiter der Originaltext. */ white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; } /* Der Knopf ist bewusst Outline: er verlässt die Seite nicht, und der gefüllte Knopf gehört auf dieser Seite dem Kontakt zum Diözesanbüro. */ .kopierblock-btn { flex: 0 0 auto; } @media (max-width: 560px) { .kopierblock-kopf { flex-wrap: wrap; } .kopierblock-btn { width: 100%; justify-content: center; } .kopierblock code { font-size: .9rem; } } /* Gruppenüberschrift im Doodle-Dropdown (aus ). Nicht anklickbar, nur Gliederung. Deshalb kein Zeiger und kein Hover. Sie ersetzt die Standarddarstellung des Browsers, und genau daher kam der weiße Balken hinter „Arbeitskreise" im Dunkelmodus: Ein natives zeichnet der Browser selbst, und seine Farben lassen sich nicht zuverlässig überschreiben. */ .ds-gruppe { padding: 12px 14px 5px; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); cursor: default; user-select: none; } .ds-gruppe + .ds-opt, .ds-menu .ds-gruppe ~ .ds-opt { padding-left: 22px; } .ds-opt.is-disabled { color: var(--text-muted); cursor: default; opacity: .6; } .ds-opt.is-disabled:hover { background: none; } /* Im Formular so breit wie die uebrigen Felder. Ausserhalb (Filterleisten, Neuigkeiten) bleibt .ds inline und richtet sich nach seinem Inhalt. */ .ff-box .ds { display: block; width: 100%; } .ff-box .ds-btn { width: 100%; justify-content: space-between; } .ff-box .ds-menu { width: 100%; } /* ── teil-15-methoden-druck.css ── */ /* ══════════════════════════════════════════ METHODEN UND SPIELE ────────────────────────────────────────── Übersicht (.meth-liste) und Einzelseite (.meth-detail). Die Filterleiste kommt in Phase 3 und arbeitet client-seitig wie der Stammesfinder; bis dahin trägt die Liste sich selbst. .meth steht in beiden Karten-Sammellisten weiter oben (Hover-System und Doodle-Rahmen), deshalb hier nur, was die Karte eigenes hat. ══════════════════════════════════════════ */ .meth-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .meth { background: var(--bg-mid); border: 1px solid var(--border-card); border-radius: var(--radius-lg); } .meth > a { display: block; padding: 24px 26px; text-decoration: none; color: inherit; } .meth-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .meth-titel { font-size: 1.375rem; margin: 0; } .meth-kurz { color: var(--text-secondary); font-size: var(--font-size-reading); margin: 0 0 14px; line-height: 1.55; } .meth-stufen { font-family: var(--font-ui); font-size: .9rem; color: var(--text-secondary); margin: 12px 0 0; } /* Marken: Art als Akzent, alles Messbare (Dauer, kontaktlos) still daneben. Sonst konkurrieren acht gleich laute Kästchen um dieselbe Aufmerksamkeit. */ .meth-marken { display: flex; flex-wrap: wrap; gap: 6px; } .meth-marke { font-family: var(--font-ui); font-size: .8rem; line-height: 1; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); } .meth-marke--still { background: var(--bg-subtle); color: var(--text-secondary); } /* ── Entwurf: sichtbar für Angemeldete und auf der Testinstanz ── Muss auf den ersten Blick auffallen, sonst hält jemand einen ungelesenen Entwurf für veröffentlicht. Deshalb die CTA-Farbe, die sonst nur Notfall- und Hilfe-Kästen tragen. */ .meth-entwurf-chip { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--cta) 15%, transparent); color: var(--cta-text); /* --cta als Text: dunkel 2,29:1 */ } .meth--entwurf { border-style: dashed; border-color: color-mix(in srgb, var(--cta) 45%, transparent); } .meth--entwurf > .filz { color: color-mix(in srgb, var(--cta) 55%, transparent) !important; } .meth-entwurf-band { background: color-mix(in srgb, var(--cta) 10%, var(--bg-mid)); border-bottom: 1px solid color-mix(in srgb, var(--cta) 30%, transparent); padding: 12px 0; font-family: var(--font-ui); font-size: .9rem; } .meth-entwurf-band i { color: var(--cta-text); margin-right: 8px; } /* ── Einzelseite ── */ .meth-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } .meth-text > h2 { font-size: 1.375rem; margin: 32px 0 10px; } .meth-text > h2:first-child { margin-top: 0; } .meth-steckbrief dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 22px; } .meth-steckbrief dt { font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); } .meth-steckbrief dd { margin: 0; font-size: .9rem; } .meth-quelle { font-size: .9rem; color: var(--text-secondary); margin-top: 28px; } /* „Worauf achten" ist der Absatz, den man beim Überfliegen finden können muss, deshalb abgesetzt statt als weitere Zwischenüberschrift. */ .meth-achtung { margin-top: 32px; padding: 20px 24px; background: var(--bg-subtle); border-radius: var(--radius-lg); border-left: 3px solid var(--highlight); } .meth-achtung h2 { font-size: 1.125rem; margin: 0 0 8px; } .meth-achtung h2 i { color: var(--highlight); margin-right: 6px; } .meth-achtung p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .meth-detail { grid-template-columns: 1fr; gap: 28px; } } /* ── Filterleiste der Methodensammlung ────────────────────────────────────── Am Desktop eine Seitenspalte links, am Handy hinter einem Knopf neben der Suche. Grund für beides ist derselbe: Die Leiste hat vier Gruppen und über zwanzig Chips. Über der Liste ausgebreitet schiebt sie am Desktop die Einträge unter die Falz und nimmt am Handy zwei Bildschirme weg, bevor der erste Eintrag kommt. Die Suche steht IMMER sichtbar darüber, auch am Handy. Sie ist der schnellste Weg, wenn jemand den Namen kennt, und gehört nicht hinter einen Aufklapper. Chips statt Aufklappmenüs: So sieht man auf einen Blick, wonach sich filtern lässt. Welche Achsen es gibt und warum nicht mehr, steht in docs/METHODEN-PLAN.md §5. */ .meth-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px 40px; align-items: start; } .meth-suchzeile { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; } .meth-filter { grid-column: 1; position: sticky; top: 90px; } .meth-ergebnis { grid-column: 2; } .meth-filter[hidden] { display: none; } .meth-filter-suche { position: relative; flex: 1; max-width: 460px; } .meth-filter-suche i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .meth-filter-suche input { width: 100%; height: var(--control-height); padding: 0 16px 0 40px; font-family: var(--font-ui); font-size: 1rem; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-card); border-radius: var(--radius); } .meth-filter-suche input::-webkit-search-cancel-button { filter: grayscale(1); } /* Der Aufklapp-Knopf gehört dem Handy. Am Desktop steht die Leiste offen. */ .meth-auf { display: none; flex-shrink: 0; } .meth-auf-zahl { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: var(--primary); color: var(--on-accent); font-size: .8rem; line-height: 1.5; } .meth-filter-gruppen { display: flex; flex-direction: column; gap: 20px; } .meth-fs { border: 0; margin: 0; padding: 0; min-width: 0; } .meth-fs legend { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 0; margin-bottom: 8px; } .meth-fs > label { margin: 0 5px 5px 0; } /* Der Haken ist unsichtbar, aber fokussierbar: Der Chip ist das Label, und :has() färbt ihn. Ein display:none am Input nähme ihm die Tastatur. */ .meth-chip { display: inline-block; cursor: pointer; } .meth-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .meth-chip span { display: inline-block; font-family: var(--font-ui); font-size: .9rem; line-height: 1; padding: 8px 13px; border-radius: 999px; background: var(--bg-mid); border: 1px solid var(--border-card); color: var(--text-secondary); transition: background .2s, color .2s, border-color .2s; } .meth-chip:hover span { border-color: var(--primary); color: var(--text); } .meth-chip:has(input:checked) span { background: var(--primary); border-color: var(--primary); color: var(--on-accent); } .meth-chip:has(input:focus-visible) span { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Stufen-Chips in den Stufenfarben ── Erst trug nur ein kleiner Punkt die Farbe, der Chip selbst blieb grau. Das war zu zurückhaltend: Wer nach seiner Stufe filtert, sucht die Farbe, nicht den Text daneben (Janis, 31.08.). Jetzt trägt der ganze Chip sie. Zwei Farbfassungen je Stufe, und das ist kein Zierrat: --stufe-* ist die kräftige Verbandsfarbe und füllt den gewählten Chip, --ak-* ist ihre abgedunkelte Fassung für Text und Rahmen. Wölflingen-Orange käme als Text sonst auf 2,3:1 und Leitenden-Gelb auf 1,8:1. */ .meth-chip--stufe[data-stufe=biber] { --sf: var(--stufe-biber); --sf-fg: var(--on-stufe-biber); --sk: var(--ak-biber); } .meth-chip--stufe[data-stufe=woe] { --sf: var(--stufe-woe); --sf-fg: var(--on-stufe-woe); --sk: var(--ak-woe); } .meth-chip--stufe[data-stufe=jupfi] { --sf: var(--stufe-jupfi); --sf-fg: var(--on-stufe-jupfi); --sk: var(--ak-jupfi); } .meth-chip--stufe[data-stufe=pfadi] { --sf: var(--stufe-pfadi); --sf-fg: var(--on-stufe-pfadi); --sk: var(--ak-pfadi); } .meth-chip--stufe[data-stufe=rover] { --sf: var(--stufe-rover); --sf-fg: var(--on-stufe-rover); --sk: var(--ak-rover); } .meth-chip--stufe[data-stufe=leitung] { --sf: var(--stufe-leitende); --sf-fg: var(--on-stufe-leitende); --sk: var(--ak-leitende); } .meth-chip--stufe span { color: var(--sk); border-color: color-mix(in srgb, var(--sk) 45%, transparent); background: color-mix(in srgb, var(--sk) 8%, var(--bg-mid)); font-weight: 600; } .meth-chip--stufe:hover span { border-color: var(--sk); background: color-mix(in srgb, var(--sk) 14%, var(--bg-mid)); } .meth-chip--stufe:has(input:checked) span { background: var(--sf); border-color: var(--sf); color: var(--sf-fg, var(--on-accent)); } /* Schrift auf der gefuellten Stufenflaeche: --on-stufe-* aus tokens.css, je nach Kontrast hell oder dunkel. Woelflingen-Orange und Leitenden-Gelb tragen keine weisse Schrift (2,97:1 und 1,84:1), Biber im Dunkelmodus auch nicht (2,43:1). Vorher stand fuer Leitung und Woe #1a1a1a von Hand, Biber blieb weiss. */ /* ── Icons in den Chips ── Dreizehn Arten untereinander sind dreizehn gleich aussehende Textpillen. Das Icon gibt jeder eine Form, die man beim Überfliegen wiedererkennt, ohne zu lesen. Es steht im span, nicht davor: So wandert es beim Umbruch mit. */ .meth-chip span i { width: 1em; margin-right: 7px; opacity: .75; font-size: .92em; } .meth-chip:has(input:checked) span i { opacity: 1; } .meth-zahlzeile { margin: 0 0 14px; font-family: var(--font-ui); font-size: .9rem; color: var(--text-secondary); } .meth-filter-fuss { margin: 18px 0 0; } .meth-reset { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .9rem; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .meth-liste--leer::after { content: 'Keine Methode passt auf alles zusammen. Nimm einen Filter weg.'; grid-column: 1 / -1; padding: 34px 0; color: var(--text-secondary); font-family: var(--font-ui); } /* Schmaler als 1100px trägt die Seitenspalte nicht mehr: Die Liste bekäme eine einzige Kartenspalte. Ab hier klappt die Leiste hinter den Knopf. */ @media (max-width: 1100px) { .meth-layout { grid-template-columns: 1fr; gap: 0; } .meth-filter, .meth-ergebnis { grid-column: 1; } .meth-auf { display: inline-flex; } .meth-filter { position: static; display: none; margin: 18px 0 6px; } .meth-filter.is-offen { display: block; } .meth-filter-gruppen { flex-direction: row; flex-wrap: wrap; gap: 16px 26px; } } /* Am Handy werden die Chips angetippt, nicht angeklickt. 33px erfüllen zwar das AA-Kriterium (24px), liegen aber unter den 44px, die als Trefferfläche empfohlen sind, und diese Leiste bedient jemand im Gruppenraum mit einer Hand. Das Suchfeld hat die Höhe über --control-height ohnehin. */ @media (max-width: 760px) { .meth-chip span { padding: 13px 16px; font-size: .9rem; } .meth-filter-gruppen { gap: 16px 20px; } } /* ══════════════════════════════════════════ DRUCKANSICHT ────────────────────────────────────────── Anleitungen liest man auf dem Zeltplatz vom Papier, nicht vom Display. Der Ausdruck soll deshalb die Methode enthalten und sonst nichts: keine Navigation, keine Fußzeile, keine Filterleiste, keine Hintergrund-Doodles, keine Knöpfe, die auf Papier nichts tun. Zwei Dinge, die auf Papier anders funktionieren als am Bildschirm: die Adresse wird hinter Links ausgeschrieben (sonst zeigt ein Ausdruck „Juleica-Portal" ohne Ziel), und der Steckbrief wandert unter den Text statt daneben, weil eine 300px-Spalte auf A4 den Satzspiegel zerreißt. Gilt für jeden Ausdruck, ob über den Knopf oder über Strg+P. ══════════════════════════════════════════ */ @media print { /* Alles weg, was Bedienung ist und kein Inhalt */ #site-header, #site-footer, .safari-tint, .dood-layer, .dood-divider, .meth-filter, .meth-suchzeile, .meth-aktionen, .meth-zahlzeile, .breadcrumbs, #consent-banner, .to-top, .marquee-bar { display: none !important; } /* Der Entwurfs-Hinweis bleibt, und zwar mit Absicht: Wer einen ungelesenen Entwurf ausdruckt und ins Lager mitnimmt, soll das auf dem Blatt sehen. Ohne ihn liegt ein Zettel im Materialkeller, der aussieht wie ein fertiger. Auf Papier ohne Farbfläche, aber mit Rahmen. */ .meth-entwurf-band { background: none !important; border: 2px solid #000 !important; padding: 3mm !important; margin-bottom: 6mm; font-size: 10pt; } .meth-entwurf-band i { display: none; } /* Papier ist weiß und Tinte teuer: keine Flächen, keine Schatten, kein Korn */ html, body { background: #fff !important; color: #000 !important; } body::before, body::after { display: none !important; } .sec, .sec-sm, .page-hero { padding: 0 !important; } .wrap { max-width: none !important; padding: 0 !important; } /* Steckbrief unter den Text statt daneben */ .meth-detail { display: block !important; } .meth-steckbrief { margin-top: 18mm; border: 1px solid #999 !important; background: none !important; padding: 6mm !important; break-inside: avoid; } .meth-steckbrief::after { display: none !important; } .meth-steckbrief dl { grid-template-columns: auto 1fr; gap: 3px 10mm; } /* „Worauf achten" behält seinen Rahmen, verliert aber die Tönung */ .meth-achtung { background: none !important; border: 1px solid #999 !important; border-left-width: 3px !important; break-inside: avoid; } .meth-achtung::after { display: none !important; } h1 { font-size: 22pt !important; margin: 0 0 3mm !important; } .meth-text h2 { font-size: 13pt !important; margin: 7mm 0 2mm !important; break-after: avoid; } .sec-sub { font-size: 11pt !important; color: #333 !important; } body { font-size: 10.5pt; line-height: 1.45; } /* Marken als Text, nicht als farbige Pillen */ .meth-marke { background: none !important; color: #000 !important; border: 1px solid #999; padding: 1px 5px; font-size: 8pt; } /* Ein Ausdruck ohne Ziel ist eine Sackgasse: Adressen ausschreiben. Interne Links bekommen die volle Adresse, damit man sie abtippen kann. */ .meth-text a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8.5pt; color: #444; word-break: break-all; } /* Woher der Ausdruck stammt. Ohne das liegt ein Zettel im Materialkeller, von dem niemand weiß, wo die aktuelle Fassung steht. Nur auf Methodenseiten: ohne :has() stand der Vermerk auf JEDEM Ausdruck, auch auf „Unfall und Versicherung" (gefunden am 25.10.2026). */ main:has(.meth-text, .meth-filter)::after { content: 'dpsg-limburg.de/methoden'; display: block; margin-top: 12mm; padding-top: 3mm; border-top: 1px solid #ccc; font-size: 8.5pt; color: #666; } @page { margin: 18mm 16mm; } } /* ── Knöpfe auf der Einzelseite ── Die beiden standen mit 0 Abstand übereinander und wirkten wie ein Block (von Janis gemeldet). Sie stehen jetzt nebeneinander, solange Platz ist, und untereinander mit Abstand, wenn nicht. */ .meth-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .meth-aktionen .btn { flex: 1 1 auto; justify-content: center; } .meth-aktionen--fuss { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--border-card); } :root .meth-aktionen--fuss { border-top: 0; position: relative; } .meth-aktionen--fuss > .filz-linie { opacity: .35; } /* Am Handy steht der Steckbrief ohnehin unter dem Text. Zwei gleiche Knopfleisten im Abstand von wenigen Zentimetern sind dort Dopplung. */ @media (max-width: 900px) { .meth-aktionen--fuss { display: none; } } /* ── Stufen als farbige Marken in Liste und Steckbrief ── Dieselben Farben wie im Filter, nur kleiner. In der Kartenliste standen die Stufen als graue Aufzählung mit Mittelpunkten, im Steckbrief als Textzeile. Beides las sich wie Kleingedrucktes, obwohl es die Angabe ist, nach der als Erstes gesucht wird. */ .meth-stufe-punkt { display: inline-block; margin: 0 4px 4px 0; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 600; font-family: var(--font-ui); line-height: 1.35; /* Zur Textfarbe gezogen wie .weg-nr: pur kamen Woe, Pfadi, Biber und Leitende auf der eigenen Toenung nur auf 4,2 bis 4,4:1. */ color: color-mix(in srgb, var(--sk, var(--text-secondary)) 78%, var(--text)); background: color-mix(in srgb, var(--sk, var(--text-muted)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sk, var(--text-muted)) 30%, transparent); } .meth-stufe-punkt[data-stufe=biber] { --sk: var(--ak-biber); } .meth-stufe-punkt[data-stufe=woe] { --sk: var(--ak-woe); } .meth-stufe-punkt[data-stufe=jupfi] { --sk: var(--ak-jupfi); } .meth-stufe-punkt[data-stufe=pfadi] { --sk: var(--ak-pfadi); } .meth-stufe-punkt[data-stufe=rover] { --sk: var(--ak-rover); } .meth-stufe-punkt[data-stufe=leitung] { --sk: var(--ak-leitende); } .meth-stufen { display: flex; flex-wrap: wrap; margin-top: 12px; } /* ── Steckbrief-Zeilen mit Icon ── Die Beschriftung führt jetzt ein Icon an. Es sitzt in der dt-Spalte und ist gedämpft: Es soll das Auge führen, nicht mit dem Wert konkurrieren. */ .meth-steckbrief dt { display: flex; align-items: baseline; gap: 7px; } .meth-steckbrief dt i { width: 1em; font-size: .9em; color: var(--text-muted); flex-shrink: 0; } .meth-sb-stufen { display: flex; flex-wrap: wrap; } /* Die Art-Marken auf Karten und im Hero bekommen dasselbe Icon wie im Filter */ .meth-marke i { margin-right: 6px; opacity: .8; font-size: .92em; } /* ── teil-16-touch-handy.css ── */ /* ══════════════════════════════════════════ Touch-Ziele: mindestens 44px auf Touch-Geraeten ────────────────────────────────────────── Janis, 02.10.2026: nur bei pointer: coarse, damit der Desktop mit Maus kompakt bleibt. Gemessen vorher (375px): Kopf-Icons 36x36, Footer-Links 24px hoch, Brotkrumen 23px, Social-Icons 16x24, Kontakt-Icons im Stammesfinder 18x19, Download-Knoepfe 38px, Biber-Filter 34px. Wo der Platz fehlt, waechst die Trefferflaeche unsichtbar (Brotkrumen), sonst das Element selbst. Bewusst NICHT dabei: Links im Fliesstext (WCAG 2.5.8 nimmt sie aus) und die Galerie-Punkte. Die sind eine Zweitbedienung neben den Pfeilen, und zehn 44er-Punkte passen nicht in 375px. ══════════════════════════════════════════ */ @media (pointer: coarse) { /* Kopf */ .nav-actions-mobile .nav-search, .nav-actions-mobile .nav-toggle { width: 44px; height: 44px; } header .logo { min-height: 44px; } .mobile-nav .nav-sub { padding: 11px 0; } /* Unterpunkte im Handy-Menue waren 36px */ nav.nav-main .nav-link { display: inline-flex; align-items: center; min-height: 44px; } nav.nav-main .nav-search { width: 44px; height: 44px; } /* Brotkrumen: Zeile bleibt, die Trefferflaeche waechst */ .breadcrumbs a, .breadcrumbs .bc-more button { position: relative; } .breadcrumbs a::before, .breadcrumbs .bc-more button::before { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); /* „Start“ ist 28 px breit, mit 2 × 8 px 44 */ } .breadcrumbs .bc-more button::before { left: -13px; right: -13px; } /* Footer */ .ft-col a { padding: 10px 0; margin-bottom: 0; } .ft-brand .logo { min-height: 44px; } .ft-social { gap: 4px; } .ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; } /* Bedienelemente in Inhalten */ .dl-btn { min-height: 44px; } .sf-kopf .nf-chip-klein { height: 44px; } .stamm-links { gap: 2px; margin-left: -13px; } .stamm-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px 0; } .stamm-more { min-height: 44px; } .card-mail { width: 44px; height: 44px; } .int-link, .ak-info-row a, .blog-sidebar-sub a { display: inline-flex; align-items: center; min-height: 44px; } .gnav, .art-carousel .acx-nav { width: 44px; height: 44px; } .ev-cal-nav-btn { width: 44px; height: 44px; } /* Monatspfeile, erst in der Kalenderansicht sichtbar: die Pruefung hatte sie nie gesehen */ } /* ══════════════════════════════════════════ LESETEXT 18 PX (Janis, 05.11.2026) ────────────────────────────────────────── Alles, was man liest, steht in 18 px: Absätze, Listen, Einleitungen, FAQ-Antworten und die Texte in Karten. Was man nur überfliegt (Datum, Stufe, Ort, Labels, Navigation, Footer), bleibt bei 15 bis 16 px, damit die Rangfolge sichtbar bleibt. Vorher stand fast alles in 16 px. Gemessen: Textseiten werden 1 bis 5 % länger, die längste Service-Karte rund 16 %. Steht am Dateiende, damit es die Einzelregeln oben übersteuert. ══════════════════════════════════════════ */ main .sec :is(p, li):not([class]), .hero-p, .sec-sub, .faq-a, .give-p, .qc-desc, .news-excerpt, .int-desc, .bp-excerpt, .ak-info-text, main :is([class*="card"], .qc, .news-card, .blog-post, .stamm, .stufe-mini, .weg-step, .meth, .sidebar-box, .ak-member) :is(p, li):not([class]) { font-size: var(--font-size-reading, 1.125rem); /* Token kommt mit dem nächsten Designsystem */ } /* ══════════════════════════════════════════ ICONS MIT FILZSTIFT-KANTE (Janis, 06.11.2026) ────────────────────────────────────────── Alle Font-Awesome-Icons, auch Pfeile in Knöpfen und Links, Social-Icons, Kopf und Menü, bekommen den Filter #filz-tinte (definiert in snippets/header.php). Gewählt auf einer Vergleichsseite gegen Original, Kreide und zwei weitere Filzstift-Varianten. Ersetzt den Kreidefilter #chalkf-ic, den doodles.css nur auf Inhalts-Icons legt; !important, weil jene Regeln spezifischer sind. Icons bleiben Font Awesome Solid. ══════════════════════════════════════════ */ i[class*="fa-"] { filter: url(#filz-tinte) !important; } .filz-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ══════════════════════════════════════════ KARTEN AM HANDY: RINGSUM GLEICH VIEL LUFT (Janis, 07.11.2026) ────────────────────────────────────────── Gemessen auf 375 px: Oben und unten stand in den Karten deutlich mehr Luft als links und rechts, bis zu 60 zu 19 px. Zwei Ursachen: 1. Der letzte Absatz einer Karte behielt seinen Abstand nach unten (`.srv-card p` 22 px), dazu kam das Polster der Karte. 2. Die breiten Karten (`.bleed-card`, aus den Blöcken Aufruf, Spalten und Karte mit Seitenspalte) haben oben und unten 40 bis 56 px im Inline-Stil, an den Seiten aber nur 18 px. Knöpfe und Überschriften schwebten dadurch im Leeren, und es kostete Scrollweg. Jetzt: kein Abstand nach dem letzten Element, und am Handy dasselbe Polster auf allen vier Seiten. ══════════════════════════════════════════ */ :is(.srv-card, .int-card, .ak-card, .ak-info-card, .vs-card, .bleed-card, .stufe-feat, .stufe-mini, .stufen-card, .steckbrief, .sidebar-box, .weg-step, .ak-member-cta, .stufe-note, .kasten, .qc, .article-infobox, .archiv-hinweis) :last-child:not(.filz, .filz-linie, .filz-rahmen) { margin-bottom: 0; } @media (max-width: 760px) { .bleed-card { padding-top: 26px !important; padding-bottom: 26px !important; } } @media (max-width: 560px) { .bleed-card, .bleed-card.bleed-card--flush { padding: 22px !important; } .srv-card { padding: 24px 22px; } } /* ══════════════════════════════════════════ LINKS MIT PFEIL: ALLE WIE .btn-text (Janis, 08.11.2026) ────────────────────────────────────────── Vorbild ist „Pfadfinden entdecken“ auf der Startseite: Versalien, fett, Pfeil als Zeichen, kein Unterstrich, und der Pfeil läuft beim Hovern und beim Gedrückthalten fünf Pixel nach rechts. Vorher hatte jede Sorte ihren eigenen Stil: .int-link zog einen Filzstrich, .stamm-more stand klein und gemischt, .hero-door-more grau, und das Font-Awesome-Pfeil-Icon lief nur, wenn die ganze Karte ein Link war. Ein Link mit anderem Icon (extern) behält sein Icon. ══════════════════════════════════════════ */ :is(.int-link, .qc-link, .stamm-more, .hero-door-more) { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--sc, var(--primary)); } :is(.int-link, .qc-link, .stamm-more, .hero-door-more) > i.fa-arrow-right { display: none; } :is(.int-link, .qc-link, .stamm-more, .hero-door-more):has(> i.fa-arrow-right)::after { content: '→'; display: inline-block; transition: transform .25s; } :is(.btn-text, .dl-btn-text, .int-link, .qc-link, .stamm-more, .hero-door-more):is(:hover, :active)::after, :is(a, [onclick], .stamm):is(:hover, :active) :is(.qc-link, .int-link, .stamm-more, .hero-door-more)::after { transform: translateX(5px); } :is(.btn-text, .dl-btn-text):active::after { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { :is(.int-link, .qc-link, .stamm-more, .hero-door-more)::after { transition: none; } } /* In Download-Listen dasselbe: vorher hell statt blau und weiter gesperrt. */ .dl-btn.dl-btn-text { color: var(--sc, var(--primary)); letter-spacing: .04em; } /* ══════════════════════════════════════════ KOPF UND MENÜ AM HANDY (Janis, 07.11.2026) ────────────────────────────────────────── Der Kopf war 64 px hoch, jetzt 52. Im Menü sind die Gruppen Knöpfe, die ihre Unterseiten auf- und zuklappen (snippets/header.php). ══════════════════════════════════════════ */ @media (max-width: 560px) { html { scroll-padding-top: 72px; } header { padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); } header .logo-dv { height: 30px; } .nav-actions-mobile .nav-search, .nav-actions-mobile .nav-toggle { width: 34px; height: 34px; } .page-hero .wrap { padding-top: 80px; } } /* Am Handy (Touch) bleiben die Kopfknöpfe 44 px, wie im Touch-Block oben verlangt; die 34 px darüber galten auch für Touch und hoben ihn auf (Messung 12.11.2026). Damit der Kopf trotzdem 52 px hoch bleibt, wird sein Innenabstand oben und unten 4 statt 8 px. */ @media (max-width: 560px) and (pointer: coarse) { header { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; } .nav-actions-mobile { gap: 2px; } .nav-actions-mobile .nav-search, .nav-actions-mobile .nav-toggle { width: 44px; height: 44px; } } .mnav-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text-secondary); font-size: 1.125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 11px 0; } .mnav-kopf.active { color: var(--sc, var(--cta-text)); } .mnav-kopf i { font-size: .8rem; transition: transform .25s; } .mnav-group.is-open .mnav-kopf i { transform: rotate(180deg); } .mnav-subs[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .mnav-kopf i { transition: none; } } /* Elternseite im Dropdown der Navbar: dieselbe Zeile wie die übrigen, durch eine gestrichelte Linie von den Unterseiten getrennt. */ .nav-drop-menu .nav-drop-eltern { border-bottom: 1px dashed color-mix(in srgb, var(--text) 18%, transparent); } /* ══════════════════════════════════════════ DRÜCKEN (Janis, 08.11.2026) ────────────────────────────────────────── Beim Antippen legte der Browser eine blaue Fläche über jeden Link und Knopf, als wäre er markiert. Die ist aus. Stattdessen: - Menü: Das Wort nimmt die Akzentfarbe an. Ein Textmarker-Strich dahinter war probiert und ist verworfen (Janis, 08.11.2026). - Knöpfe geben nach, Karten-Links sinken leicht ein. :active braucht auf dem iPhone den touchstart-Lauscher in components.js. ══════════════════════════════════════════ */ html { -webkit-tap-highlight-color: transparent; } .mobile-nav :is(a, .mnav-kopf):active { color: var(--sc, var(--cta-text)); } @media (hover: none) { :is(.btn, .dl-btn, .nav-cta, .nav-search, .nav-toggle, .nf-chip, .chip, .ev-view-btn, .view-toggle button, .lb-btn, .lb-nav):active { transform: translateY(1px) scale(.97); transition-duration: .08s; } a:is(.srv-card, .int-card, .ak-card, .qc, .stufe-mini, .stufen-card, .news-card, .bleed-card, .vs-card, .ak-dl, .blog-post):active, .stamm:active, .ak-dl:active { transform: scale(.985); transition-duration: .08s; } } @media (prefers-reduced-motion: reduce) { :is(.btn, .dl-btn, .nav-cta, .nav-search, .nav-toggle, .nf-chip, .chip, .ev-view-btn, a, .stamm):active { transform: none !important; } } /* ══════════════════════════════════════════ LISTENANSICHT OHNE POPUP (Janis, 07.11.2026) ────────────────────────────────────────── Service, Arbeitskreise, Stufen und Neuigkeiten haben denselben Umschalter (js/ansicht.js). In der Liste ist jede Zeile kompakt: Zeichen, Titel, Pfeil. Der erste Tipp führt zum Ziel. Vorher öffnete er beim Service ein Popup mit der ganzen Karte, und erst darin stand der Knopf. ══════════════════════════════════════════ */ :is(.service-grid, .ak-grid, .stufen-grid).as-list { grid-template-columns: 1fr !important; gap: 8px; } .ansicht-leiste { justify-content: flex-end; margin-bottom: 16px; } /* Anlaufstellen (blocks/anlaufstellen.php): Karten oder Liste. In der Liste bleibt die Beschreibung stehen, anders als bei Service und AKs: Telefon und Adresse SIND hier der Inhalt. Name und Text links, Link rechts; am Handy rutscht der Link unter den Text. */ .anl-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; } .anl-gitter.as-list { grid-template-columns: 1fr; gap: 8px; } .anl-gitter.as-list .int-card { align-items: center; gap: 14px; padding: 14px 18px; } .anl-gitter.as-list .int-icon { width: 40px; height: 40px; } .anl-gitter.as-list .int-card > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; } .anl-gitter.as-list .int-title { grid-column: 1; margin-bottom: 2px; } .anl-gitter.as-list .int-desc { grid-column: 1; margin: 0; font-size: .95rem; line-height: 1.55; } .anl-gitter.as-list .int-link { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; } @media (max-width: 640px) { .anl-gitter.as-list .int-card { align-items: flex-start; } .anl-gitter.as-list .int-card > div:last-child { grid-template-columns: 1fr; } .anl-gitter.as-list .int-link { grid-column: 1; grid-row: auto; margin-top: 6px; } /* Am Handy immer die Liste, ohne Umschalter, wie die Personenkarten (Janis, 13.11.2026). Dieselben Regeln wie .as-list oben. */ .anl-leiste { display: none !important; } .anl-gitter { grid-template-columns: 1fr; gap: 8px; } .anl-gitter .int-card { align-items: flex-start; gap: 14px; padding: 14px 18px; } .anl-gitter .int-icon { width: 40px; height: 40px; } .anl-gitter .int-card > div:last-child { display: grid; grid-template-columns: 1fr; } .anl-gitter .int-title { margin-bottom: 2px; } .anl-gitter .int-desc { margin: 0; font-size: .95rem; line-height: 1.55; } .anl-gitter .int-link { grid-column: 1; grid-row: auto; margin: 6px 0 0; } } @media (max-width: 760px) { .ansicht-leiste { display: flex; } } /* Gemeinsame Zeile: Zeichen | Titel | Pfeil */ .as-list :is(.srv-card, .ak-card, .stufe-mini) { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 14px; row-gap: 4px; padding: 12px 18px; min-height: 64px; } .as-list :is(.srv-card, .ak-card, .stufe-mini) :is(h2, h3) { margin: 0; font-size: 1.125rem; grid-column: 2; } /* .srv-text: Kartentext auf /service, seit „Mehr anzeigen“ (js/karten-mehr.js) in einem eigenen Behälter. Ohne ihn hier blieb er in der Liste stehen und brach Wort für Wort in der Zeichen-Spalte um (Janis, 15.11.2026). */ .as-list :is(.srv-card, .ak-card, .stufe-mini) > :is(p, ul, ol, .article-prose, .srv-text) { display: none; } .as-list :is(.ak-card, .stufe-mini, .srv-card[data-ziele="eins"])::after { content: '→'; grid-column: 3; grid-row: 1 / span 2; font-weight: 700; color: var(--sc, var(--primary)); transition: transform .25s; } .as-list :is(.ak-card, .stufe-mini, .srv-card[data-ziele="eins"]):is(:hover, :active)::after { transform: translateX(5px); } .as-list :is(.ak-card, .stufe-mini) .qc-link { display: none; } /* Zeichen links, in fester Breite, damit die Titel fluchten */ .as-list .srv-card .srv-icon { width: 40px; height: 40px; font-size: 1.05rem; margin: 0; grid-row: 1 / span 2; } .as-list .ak-card .ak-card-icon { width: 40px; height: 32px; margin: 0; font-size: 1.5rem; line-height: 32px; text-align: center; grid-row: 1 / span 2; } .as-list .ak-card .ak-card-lilie { -webkit-mask-position: center; mask-position: center; } .as-list .stufe-mini :is(.stufe-mini-zeichen, .stufe-mini-logo) { width: 40px; height: 40px; margin: 0; grid-column: 1; grid-row: 1 / span 2; } .as-list .stufe-mini .stufe-mini-age { grid-column: 2; margin: 0; } /* Service: eine Zeile mit einem Ziel ist ganz Link (js/service.js), die übrigen zeigen ihre Ziele als kleine Textlinks, „In Planung“ rechts. */ .as-list .srv-card[data-ziele="eins"] { cursor: pointer; } .as-list .srv-card[data-ziele="eins"] .dl-row { display: none; } .as-list .srv-card .dl-row { grid-column: 2 / -1; margin: 0; padding: 0; gap: 2px 18px; } .as-list .srv-card[data-ziele="keins"] .dl-row { grid-column: 3; grid-row: 1 / span 2; } .as-list .srv-card[data-ziele="mehrere"] .dl-row a { height: auto; min-height: 32px; padding: 0; border: 0; background: none !important; box-shadow: none; color: var(--sc, var(--primary)); font-size: .9rem; letter-spacing: .04em; } .as-list .srv-card[data-ziele="mehrere"] .dl-row a > :is(i, .filz) { display: none; } .as-list .srv-card[data-ziele="mehrere"] .dl-row a::after { content: '→'; margin-left: 6px; display: inline-block; transition: transform .25s; } .as-list .srv-card[data-ziele="mehrere"] .dl-row a:is(:hover, :active)::after { transform: translateX(4px); } /* Das Zeichen sagt, wohin es geht (Janis, 15.11.2026): der Pfeil nur für Seiten bei uns, eine fremde Website bekommt das Extern-Zeichen wie bei den Anlaufstellen (.int-link), ein PDF das Datei-Zeichen. Codepunkte aus fontawesome.min.css: f08e arrow-up-right-from-square, f1c1 file-pdf. */ .as-list [data-ziele="mehrere"] .dl-row a[href^="http"]::after { content: '\f08e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8em; } .as-list [data-ziele="mehrere"] .dl-row a[href*=".pdf"]::after { content: '\f1c1'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8em; } /* Neuigkeiten: Datum und Titel, ohne Bild und Anriss, getrennt durch die gestrichelten Linien der übrigen Listen. */ #news-list.as-list .blog-post { margin: 0; border-radius: 0; border-bottom: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); } #news-list.as-list .bp-img, #news-list.as-list .bp-excerpt { display: none; } /* Thema rechts wie bei den Terminen, kein Pfeil; beim Hovern rückt die Zeile ein und der Titel nimmt die Akzentfarbe an (wie .ev-ov-row). */ #news-list.as-list .bp-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: center; padding: 12px 10px 12px 0; /* rechts 10 px: 4 für den Rahmen des Themas, 6 für das Einrücken beim Hovern (.blog-post schneidet ab) */ } #news-list.as-list .bp-meta { display: contents; } #news-list.as-list .bp-date { grid-column: 1; grid-row: 1; } #news-list.as-list .bp-meta .chip { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } #news-list.as-list .bp-title { grid-column: 1; grid-row: 2; font-size: 1.125rem; margin: 0; transition: color .2s; } #news-list.as-list .bp-body { transition: transform .25s; } #news-list.as-list .blog-post:is(:hover, :active) { transform: none; box-shadow: none; } /* Die ganze Zeile rückt ein wie bei den Terminen, das Thema mit. Rechts hat .bp-body dafür 6px Platz, sonst schnitt .blog-post das Thema ab (Janis, 10.11.2026). */ #news-list.as-list .blog-post:is(:hover, :active) .bp-body { transform: translateX(6px); } #news-list.as-list a.blog-post:focus-visible { outline-offset: -2px; border-radius: 10px; } #news-list.as-list .blog-post:is(:hover, :active) .bp-title { color: var(--sc, var(--primary)); } /* Am Handy steht der Umschalter neben der Suche, nur als Zeichen. In der Zeile darunter hätte er die Auswahlfelder gestaucht, „Alle Themen“ brach. */ @media (max-width: 760px) { .news-controls .fb-search { grid-column: 1 / -1; grid-row: 1; width: calc(100% - var(--control-height) - 10px); } .news-controls .fb-actions { grid-column: 2; grid-row: 1; justify-self: end; } .news-controls .vt-label { display: none; } .news-controls .view-toggle { width: var(--control-height); padding: 0; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .as-list :is(.ak-card, .stufe-mini, .srv-card)::after, #news-list.as-list :is(.bp-body, .bp-title) { transition: none; } } /* Nachgemessen: Zeilen mit einem Ziel haben keine zweite Reihe, Zeichen und Pfeil dürfen dort nicht über zwei Reihen reichen, sonst klebt der Titel oben. */ .as-list :is(.srv-card, .ak-card, .stufe-mini) :is(h2, h3) { align-self: center; } .as-list .ak-card .ak-card-icon, .as-list .ak-card::after, .as-list .srv-card:not([data-ziele="mehrere"]) .srv-icon, .as-list .srv-card:not([data-ziele="mehrere"])::after, .as-list .srv-card[data-ziele="keins"] .dl-row { grid-row: 1; } .as-list .ak-card { row-gap: 0; } #news-list.as-list .blog-post { padding: 0; } #news-list.as-list .bp-author { display: none; } #news-list.as-list .blog-post { border-bottom: 1px dashed color-mix(in srgb, var(--text) 22%, transparent) !important; } /* doodles.css nimmt Beiträgen jeden Rand mit !important */ /* Gefiltert heißt weg, auch in der Liste: `.as-list .srv-card` setzt display:grid und war stärker als .srv-hidden (Janis, 08.11.2026). */ .as-list :is(.srv-hidden, .ak-hidden) { display: none; } /* ══════════════════════════════════════════ TERMINE AM HANDY (Janis, 07.11.2026) ────────────────────────────────────────── - Unter der Einleitung jeder Seite standen 54 px plus 48 px Polster des ersten Abschnitts, auf /termine sah man deshalb erst nach langem Scrollen einen Termin. Am Handy jetzt 36 px zusammen. - Kalender: Termine eines Monats und eines Tages gestrichelt getrennt wie die übrigen Listen, und enger. ══════════════════════════════════════════ */ /* Am Desktop dasselbe (Janis, 08.11.2026): unter der Einleitung standen 54 px plus 72 px Polster des ersten Abschnitts, auf /termine kam die Liste spät. */ .hero-einleitung { padding-bottom: 48px; } .hero-einleitung + .sec:not(.sec--thema) { padding-top: 0; } @media (max-width: 760px) { .hero-einleitung { padding-bottom: 36px; } } .ev-cal-ev-item { border-bottom: 1px dashed color-mix(in srgb, var(--text) 22%, transparent); padding-top: 12px; padding-bottom: 12px; } .ev-cal-ev-item:last-child { border-bottom: none; } .ev-cal-day-panel { padding-bottom: 8px; } .ev-cal-day-panel .ev-cal-sec-title { margin-bottom: 4px; } /* Der Seitenkopf nahm am Handy 62 % der Höhe ein (503 px auf einem iPhone), bevor der Titel kam. 46 % reichen fürs Foto und sparen auf jeder Unterseite rund 130 px Scrollweg. */ @media (max-width: 760px) { .page-hero { min-height: clamp(320px, 46vh, 420px); } } /* Aufruf-Karte mit Bild rechts (blocks/cta.php, Feld „Bild rechts“): Text links, das Bild steht mittig in der rechten Spalte. Am Handy kleiner über dem Text. Das Bild steht im Markup zuerst, damit es am Handy oben sitzt. */ .cta-mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 40px; } .cta-mit-bild .cta-bild { grid-column: 2; grid-row: 1; width: clamp(120px, 14vw, 180px); height: auto; justify-self: center; } .cta-mit-bild .cta-inhalt { grid-column: 1; grid-row: 1; min-width: 0; } @media (max-width: 640px) { .cta-mit-bild { grid-template-columns: 1fr; row-gap: 14px; } .cta-mit-bild .cta-bild { grid-column: 1; width: 96px; justify-self: start; } .cta-mit-bild .cta-inhalt { grid-row: 2; } } /* Eingebettete Grafik statt Logo (blocks/cta.php, class="grafik-inline"): sie trägt Inhalt und Beschriftung, braucht also mehr Platz als ein Logo und steht am Handy unter dem Text statt klein darüber. */ .cta-mit-bild .cta-grafik { width: clamp(260px, 30vw, 380px); } .cta-grafik svg { display: block; width: 100%; height: auto; } /* Karten-Raster mit Grafik neben Überschrift und Einleitung (blocks/cards.php, Feld „grafik“): die Grafik begleitet den Kopf, sie ist nicht das Thema, deshalb klein. Am Handy mittig unter dem Text. */ .karten-kopf { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 300px); align-items: center; column-gap: 48px; margin-bottom: 32px; } .karten-kopf-text { min-width: 0; } .karten-kopf-grafik svg { display: block; width: 100%; height: auto; } /* Grafik mit Kreisen (img/grafik/praevention-fachbereiche.svg): Füllung, Ring und Text eines Kreises tragen dieselbe Klasse k1 bis k4. Zeigt die Maus auf einen Kreis, füllt er sich kräftiger, wächst ein wenig und wackelt einmal wie frisch gezeichnet, die anderen treten zurück. Nur mit Maus; ohne Bewegung bleibt es beim Hervorheben. */ @media (hover: hover) { .grafik-inline .kreis { transform-box: fill-box; transform-origin: center; transition: fill-opacity .25s ease, opacity .25s ease, scale .3s cubic-bezier(.34, 1.56, .64, 1); } .grafik-inline path.kreis, .grafik-inline text.kreis { pointer-events: none; } .grafik-inline ellipse.kreis { cursor: default; } .grafik-inline:has(.kreis:hover) ellipse.kreis { fill-opacity: .07; } .grafik-inline:has(.kreis:hover) text.kreis { opacity: .5; } .grafik-inline:has(.kreis:hover) ellipse:hover { fill-opacity: .36; scale: 1.05; } /* Ring und Text gehören über die Klasse zum Kreis unter der Maus */ .grafik-inline:has(.k1:hover) :is(path, text).k1, .grafik-inline:has(.k2:hover) :is(path, text).k2, .grafik-inline:has(.k3:hover) :is(path, text).k3, .grafik-inline:has(.k4:hover) :is(path, text).k4 { opacity: 1; scale: 1.05; animation: kreis-wackeln .5s ease-in-out; } } @keyframes kreis-wackeln { 25% { rotate: -2.5deg; } 60% { rotate: 2deg; } } @media (hover: hover) and (prefers-reduced-motion: reduce) { .grafik-inline .kreis { transition: fill-opacity .25s ease, opacity .25s ease; } .grafik-inline:has(.kreis:hover) .kreis { scale: none; animation: none; } } /* Am Handy dasselbe per Antippen: js/grafik-kreise.js setzt data-kreis am */ @media (hover: none) { .grafik-inline .kreis { transform-box: fill-box; transform-origin: center; transition: fill-opacity .25s ease, opacity .25s ease, scale .3s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; } .grafik-inline path.kreis, .grafik-inline text.kreis { pointer-events: none; } .grafik-inline[data-kreis] ellipse.kreis { fill-opacity: .07; } .grafik-inline[data-kreis] text.kreis { opacity: .5; } .grafik-inline[data-kreis="k1"] ellipse.k1, .grafik-inline[data-kreis="k2"] ellipse.k2, .grafik-inline[data-kreis="k3"] ellipse.k3, .grafik-inline[data-kreis="k4"] ellipse.k4 { fill-opacity: .36; scale: 1.05; } .grafik-inline[data-kreis="k1"] :is(path, text).k1, .grafik-inline[data-kreis="k2"] :is(path, text).k2, .grafik-inline[data-kreis="k3"] :is(path, text).k3, .grafik-inline[data-kreis="k4"] :is(path, text).k4 { opacity: 1; scale: 1.05; animation: kreis-wackeln .5s ease-in-out; } } @media (hover: none) and (prefers-reduced-motion: reduce) { .grafik-inline .kreis { transition: fill-opacity .25s ease, opacity .25s ease; } .grafik-inline[data-kreis] .kreis { scale: none; animation: none; } } @media (max-width: 640px) { .karten-kopf { grid-template-columns: 1fr; row-gap: 20px; } .karten-kopf-grafik { width: min(100%, 260px); justify-self: center; } } @media (max-width: 640px) { .cta-mit-bild .cta-grafik { width: min(100%, 340px); justify-self: center; grid-row: 2; } .cta-mit-bild:has(.cta-grafik) .cta-inhalt { grid-row: 1; } } /* Adressen aus dem ScoutNet-Text (js/termin-popup.js, evVerlinken): als Link erkennbar, ohne Silbentrennung („anmel-dung“), lange Adressen brechen irgendwo statt über den Rand zu laufen. */ .ev-modal-desc a { color: var(--sc, var(--primary)); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; hyphens: none; -webkit-hyphens: none; overflow-wrap: anywhere; } /* AK-Zeichen freigestellt wie die Maskottchen der Stufenseiten, nicht mehr als runder Aufnäher (Janis, 08.11.2026). Gleiche Größe und derselbe Schatten wie .ph-mascot; das Zeichen füllt die Fläche. */ .ak-zeichen { --ak-z: clamp(96px, 12vw, 160px); background: none; box-shadow: none; border-radius: 0; bottom: calc(var(--ak-z) / -4.5); filter: drop-shadow(0 10px 22px rgba(var(--shadow-rgb), .35)); } .ak-zeichen i { font-size: calc(var(--ak-z) * .82); } .ak-zeichen-lilie { width: 100%; height: 100%; } @media (max-width: 960px) { .ak-zeichen { --ak-z: 86px; } } @media (max-width: 960px) { .ak-hero:has(.ak-zeichen) h1.sec-title { max-width: calc(100% - 86px - 16px); } } /* ══════════════════════════════════════════ BANDEROLE AM HANDY (Janis, 07.11.2026: „scrollt nicht automatisch“) ────────────────────────────────────────── Drei Dinge, die auf dem iPhone das Laufen verhindern oder stören: - Pause bei :hover: Safari behält :hover nach einer Berührung, bis man woanders hintippt. Ein Wisch über das Band ließ es dauerhaft stehen. Die Pause gilt jetzt nur für Geräte mit echter Maus. - Die Randmaske saß auf dem scrollenden Element, unter dem die Ebene per Transform läuft. Das zeichnet Safari nicht zuverlässig nach. Sie sitzt jetzt auf dem Band außen, das selbst nicht scrollt. - touch-action: pan-x ließ senkrechtes Wischen auf dem Band ins Leere laufen, die Seite scrollte nicht weiter. ══════════════════════════════════════════ */ .marquee-scroll { touch-action: pan-x pan-y; } .marquee-scroll:hover .marquee-inner { animation-play-state: running; } @media (hover: hover) and (pointer: fine) { .marquee-scroll:hover .marquee-inner { animation-play-state: paused; } } .marquee-scroll.is-grabbing .marquee-inner, .marquee-inner.steht { animation-play-state: paused; } @media (max-width: 760px) { .marquee-scroll { -webkit-mask-image: none; mask-image: none; } .marquee-bar { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); } } /* ── Laufband anhalten (WCAG 2.2.2, 11.11.2026) ── Der Knopf sitzt rechts auf dem Band, über dem Rand-Verlauf. Angehalten bleibt es, bis jemand es weiterlaufen lässt; dazu steht es, solange das Band selbst den Tastaturfokus hat. Regeln hinter den :hover-Regeln oben, damit sie gewinnen. Markup: templates/home.php, Verhalten: js/app.js. */ .marquee-scroll .marquee-inner.angehalten, .marquee-scroll:focus-visible .marquee-inner { animation-play-state: paused; } .mq-pause { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; width: 36px; height: 36px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--sc, var(--primary)); color: var(--on-accent); border: 1.5px solid color-mix(in srgb, var(--on-accent) 70%, transparent); font-size: .85rem; /* Deckt das durchlaufende Band rechts ab und blendet es davor weich aus, sonst liefe der Text sichtbar hinter dem Knopf durch. Die Leiste schneidet den Schatten oben und unten ab (overflow: hidden). */ box-shadow: 0 0 0 12px var(--sc, var(--primary)), -18px 0 18px 12px var(--sc, var(--primary)); } .mq-pause:hover { background: color-mix(in srgb, var(--on-accent) 16%, var(--sc, var(--primary))); } .mq-pause:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; } .mq-pause[hidden] { display: none; } /* Am Handy blendet die Maske das Band an beiden Rändern aus. Mit Knopf nur noch links, rechts übernimmt der Schatten des Knopfs, sonst verschwände er mit. */ @media (max-width: 760px) { .marquee-bar:has(.mq-pause:not([hidden])) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%); mask-image: linear-gradient(to right, transparent 0, #000 8%); } } /* ── Pause-Knopf der Startseiten-Galerie (WCAG 2.2.2), links neben den Punkten. Markup: js/gallery.js. */ .gdots { align-items: center; } .gpause { width: 28px; height: 28px; margin-right: 6px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: .7rem; background: rgba(var(--gal-scrim), .62); color: var(--gal-fg); border: var(--filz-strich, 1.5px) solid color-mix(in srgb, var(--gal-fg) 90%, transparent); } .gpause:hover { background: var(--sc, var(--primary)); border-color: var(--sc, var(--primary)); color: var(--on-accent); } /* ══════════════════════════════════════════ STARTSEITE AM HANDY: LISTEN STATT GROSSER KARTEN (Janis, 07.11.2026) ────────────────────────────────────────── Neuigkeiten und Termine standen als große Karten untereinander, gut 2400 px Scrollweg. Am Handy jetzt kompakte Zeilen: kleines Bild bzw. Kalenderkästchen links, Datum und Titel rechts, gestrichelt getrennt wie die übrigen Listen. „Für Leitende & Stämme“ wird zu einer Reihe von Sprungzeilen (Zeichen, Titel, Pfeil). Nur die Startseite: die Regeln hängen an #home-news. ══════════════════════════════════════════ */ @media (max-width: 760px) { :is(#home-news, #home-termine) { grid-template-columns: 1fr; gap: 0; } #home-termine { margin-top: 0 !important; } :root :is(#home-news, #home-termine) .news-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; transition: transform .25s; } /* Einrücken: nur der Inhalt rückt, die Zeile bleibt stehen. Rückte die ganze Zeile, verließ der Mauszeiger am linken Rand die Trefferfläche, und der Hover sprang hin und her (Janis, 08.11.2026). */ :root :is(#home-news, #home-termine) .news-card { transition: none; } :is(#home-news, #home-termine) .news-card > * { transition: transform .25s; } :root :is(#home-news, #home-termine) .news-card:is(:hover, :active) > * { transform: translateX(6px); } :root :is(#home-news, #home-termine) .news-card:is(:hover, :active) { transform: none; } /* Fokusrahmen innen und in der Rundung der Bilder, nicht außen um die volle Kartenbreite */ :is(#home-news, #home-termine) a.news-card:focus-visible { outline-offset: -2px; border-radius: 12px; } :is(#home-news, #home-termine) .news-body { padding: 0; min-width: 0; } :is(#home-news, #home-termine) .news-title { font-size: 1rem; line-height: 1.3; margin: 2px 0 0; } #home-news .news-img { width: 68px; height: 68px; border-radius: 10px; } #home-news .news-excerpt { display: none; } #home-news .news-date { order: -1; } /* Quadratisch wie die Fotos der Neuigkeiten darüber (Janis, 11.11.2026: 68 × 60 neben 68 × 68 sah schief aus) */ #home-termine .bp-cal { width: 68px; height: 68px; flex-shrink: 0; border-radius: 10px; gap: 0; } #home-termine .bp-cal::after { display: none; } #home-termine .bp-cal-day { font-size: 1.25rem; } #home-termine .bp-cal-mon { font-size: .62rem; letter-spacing: .1em; } #home-termine .news-excerpt { font-size: .9rem; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sec:has(#home-news) .home-row-label + .news-strip { margin-top: 0; } body:has(#home-news) .quick-grid { gap: 8px; } :root body:has(#home-news) .qc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 10px 4px; } body:has(#home-news) .qc .qc-icon { width: 44px; height: 44px; margin: 0; font-size: 18px; display: grid; place-items: center; } body:has(#home-news) .qc .qc-title { font-size: 1.125rem; margin: 0; } body:has(#home-news) .qc .qc-desc { display: none; } body:has(#home-news) .qc .qc-link { font-size: 0; gap: 0; } body:has(#home-news) .qc .qc-link::after { font-size: 1rem; } } @media (max-width: 760px) { /* doodles.css nimmt den Startseiten-Karten jeden Rand mit !important */ /* Kreis um das Zeichen 44 statt 58 px, sonst lag er über dem Titel */ :root body:has(#home-news) .qc { grid-template-columns: 44px minmax(0, 1fr) auto; } :root body:has(#home-news) .qc .qc-icon { width: 44px !important; height: 44px; font-size: 17px; margin: 0; } } /* Startseite in neuer Reihenfolge (Janis, 08.11.2026): „Für Leitende & Stämme“ direkt unter der Banderole, dann Neuigkeiten & Termine, dann „Und was macht man da eigentlich?“. Der erste Block nach der Banderole braucht oben das Polster, das sonst der Text-Block mitbrachte. */ .marquee-bar + .sec { padding-top: 72px !important; } /* wie .sec */ @media (max-width: 760px) { .marquee-bar + .sec { padding-top: 48px !important; } /* Kleine Vorschaubilder in der Liste ohne eingeklebten Rahmen */ #home-news .news-img > .filz { display: none; } } /* Spalte mit Icon vor dem Text (blocks/columns.php, Feld „Icon“) */ .col-mit-icon { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; } .col-mit-icon .col-icon { color: var(--sc, var(--primary)); font-size: 1.15rem; line-height: 1.6; text-align: center; } /* Vier Angaben mit Icon: am Desktop zwei Spalten statt 3 + 1, am Handy enger */ @media (min-width: 761px) { .bleed-card:has(> .col-mit-icon) { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 760px) { .bleed-card:has(> .col-mit-icon) { gap: 22px !important; } } /* Steckbrief der Stufen als Kacheln, am Handy und am Desktop (Janis, 07./08.11.2026). dt und dd stecken je in .sb-zeile (stufe.php). Beschriftung klein, Wert groß und dunkel; nur der Grund der Kachel ist leicht in der Stufenfarbe getönt. Keine farbige Schrift auf farbigem Grund, kein farbiger Rahmen. */ .steckbrief { border-left-width: 1px; border-left-color: var(--border-card); } .steckbrief dl { grid-template-columns: 1fr 1fr; gap: 10px; } .steckbrief .sb-zeile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-width: 0; border-radius: 12px; background: color-mix(in srgb, var(--sc, var(--primary)) 10%, transparent); } .steckbrief .sb-zeile dt { font-size: .9rem; color: var(--text-secondary); } .steckbrief .sb-zeile dd { text-align: left; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; color: var(--text); overflow-wrap: anywhere; hyphens: auto; } .steckbrief .sb-zeile:last-child:nth-child(odd) { grid-column: 1 / -1; } /* Knopfreihe nach Fließtext in Karten: Seit der letzte Absatz keinen Abstand nach unten mehr hat (Kartenpolster, 07.11.2026), braucht die Reihe ihren eigenen nach oben, sonst klebt der Knopf am Text. */ .article-prose + .dl-row { margin-top: 22px; } /* Socials im Footer größer (Janis, 08.11.2026): vorher 16 px, kaum zu sehen */ .ft-social { gap: 10px; } .ft-social a { font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .ft-social a:hover { transform: scale(1.12); } /* ── teil-17-menue-suche-kennzahlen.css ── */ /* ══════════════════════════════════════════ DRITTES MENÜ-LEVEL (Janis, 08.11.2026) ────────────────────────────────────────── Arbeitskreise und Die Stufen klappen in der Navbar seitlich aus, im Handy-Menü per Pfeil auf. Die Liste kommt aus den Karten der jeweiligen Übersichtsseite (snippets/header.php, $unterlinks). ══════════════════════════════════════════ */ .nav-sub-gruppe { position: relative; } .nav-sub-gruppe > a { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; } .nav-sub-gruppe > a i { font-size: .65em; opacity: .55; } .nav-flyout { position: absolute; left: calc(100% + 4px); top: -8px; z-index: 1201; min-width: 230px; padding: 8px; background: rgba(var(--hbg), .99); border: 1px solid var(--border-card); border-radius: 12px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .16); opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .15s, transform .15s, visibility .15s; } /* Brücke über die Lücke zum Flyout, damit der Hover nicht abreißt */ .nav-flyout::before { content: ''; position: absolute; right: 100%; top: 0; width: 8px; height: 100%; } .nav-sub-gruppe:hover > .nav-flyout, .nav-sub-gruppe:focus-within > .nav-flyout { opacity: 1; visibility: visible; transform: none; } .nav-flyout a { white-space: nowrap; } /* Mit Escape geschlossen (js/components.js): bleibt zu, solange Maus oder Fokus noch in der Gruppe sind. Steht hinter den :hover-Regeln, damit es sie bei gleicher Spezifität schlägt. */ .nav-drop.is-zu .nav-drop-menu, .nav-drop.is-zu .nav-flyout, .nav-sub-gruppe.is-zu > .nav-flyout { opacity: 0; visibility: hidden; } .nav-drop.is-zu > .nav-link .drop-caret { transform: none; } .mnav-sub-gruppe { display: grid; grid-template-columns: 1fr auto; align-items: center; } .mnav-sub-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text-secondary); cursor: pointer; } .mnav-sub-toggle i { font-size: .75rem; transition: transform .25s; } .mnav-sub-gruppe.is-open .mnav-sub-toggle i { transform: rotate(180deg); } .mnav-subsubs { grid-column: 1 / -1; display: flex; flex-direction: column; padding-left: 14px; } .mnav-subsubs[hidden] { display: none; } .mobile-nav .nav-subsub { font-size: .9rem; padding: 8px 0; } @media (prefers-reduced-motion: reduce) { .nav-flyout, .mnav-sub-toggle i { transition: none; } } /* ══════════════════════════════════════════ SUCHSEITE /suche (Paket 10, 08.11.2026) ══════════════════════════════════════════ */ .suche-form { margin-bottom: 14px; } .suche-typen { flex-wrap: wrap; overflow: visible; margin-bottom: 18px; } /* Bis die Treffer da sind (js/suchseite.js nimmt die Klasse weg): eine Zeile Filter und eine Bildschirmhöhe Treffer frei halten. Sonst schoben beide beim Erscheinen alles darunter weg, den Fuß eingeschlossen. 50 px ist die Höhe einer Chip-Zeile samt Polster der Leiste (gemessen 15.11.2026). */ .suche-wartet .suche-typen:empty { min-height: 50px; } .suche-wartet .suche-raster { min-height: 100vh; min-height: 100svh; } .suche-zahl { font-weight: 400; opacity: .7; margin-left: 2px; } .suche-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; } .suche-raster:has(> .suche-seite:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; } .suche-status { color: var(--text-secondary); margin: 0 0 8px; } .suche-gruppe { font-family: var(--font-ui); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin: 22px 0 6px; } .suche-ergebnisse .search-result { padding: 12px 10px; } .suche-ergebnisse .search-result-snip { white-space: normal; } .suche-meinte a { font-weight: 700; } .suche-seite { position: sticky; top: 96px; } /* ── Steckbrief-Karten (js/suche-karten.js, 15.11.2026) ── Nur hier auf /suche, nicht im Such-Popup. Desktop: offen rechts neben der Liste. Handy: über der Liste, eingeklappt auf die Kopfzeile (
). Rahmen im Filzstift in der Tinte am äußeren
(js/filz.js, css/doodles.css), nie in der AK- oder Stufenfarbe; Farbe trägt nur das Zeichen. */ .suche-karte { position: relative; border-radius: var(--filz-radius); background: var(--bg); text-align: left; } .sk-klapp { padding: 20px 22px; } .sk-kopf { display: flex; align-items: center; gap: 14px; list-style: none; cursor: default; } .sk-kopf::-webkit-details-marker { display: none; } .sk-kopf::marker { content: ''; } .sk-name { min-width: 0; flex: 1; display: flex; flex-direction: column; } .sk-titel { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; } .sk-unter { margin-top: 3px; font-family: var(--font-ui); font-size: 1rem; color: var(--text-secondary); } .sk-art, .sk-pfeil { display: none; } .sk-rumpf { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .sk-text { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.55; } .sk-text strong { color: var(--text); } /* Bild, Initialen und Zeichen: 60px, rund */ .sk-bild, .sk-zeichen { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; } .sk-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .sk-initialen { font-family: var(--font-heading); font-size: 1.25rem; color: var(--filz-tinte, var(--text)); } .sk-zeichen { color: var(--text-secondary); font-size: 1.6rem; } .sk-ton { color: var(--kt, var(--text-secondary)); font-size: 2.1rem; } .sk-lilie { width: 70%; height: 70%; background-color: var(--kt, var(--text-secondary)); -webkit-mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat; mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat; } .sk-stufenlilie { flex: none; width: 56px; height: 60px; object-fit: contain; } /* Fakten als Zeilen: Bezeichnung oben klein, Wert darunter */ .sk-fakten { display: grid; gap: 10px; margin: 0; } .suche-karte--stufe .sk-fakten { grid-template-columns: 1fr 1fr; gap: 10px 16px; } /* kurze Werte: zwei nebeneinander */ .sk-zeile dt { font-family: var(--font-ui); font-size: .9rem; color: var(--text-muted); } .sk-zeile dd { margin: 1px 0 0; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; } .sk-zeile dd .sk-datum { display: block; color: var(--text-secondary); font-size: .9rem; } .sk-rollen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1rem; color: var(--text-secondary); } .sk-rollen a, .sk-zeile dd a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .sk-rollen a:hover, .sk-zeile dd a:hover { color: var(--primary); } .sk-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; } .sk-knoepfe + .sk-knoepfe { margin-top: -4px; } @media (max-width: 760px) { .sk-klapp { padding: 0; } /* Kopfzeile als Schalter: Zeichen, Name, Art, Pfeil. Ganze Zeile tippbar, mindestens 44px */ .sk-kopf { min-height: 44px; padding: 12px 16px; gap: 12px; cursor: pointer; border-radius: var(--filz-radius); } .sk-kopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .sk-bild, .sk-zeichen { width: 44px; height: 44px; font-size: 1.3rem; } .sk-ton { font-size: 1.6rem; } .sk-stufenlilie { width: 40px; height: 44px; } .sk-titel { font-size: 1.125rem; } .sk-klapp:not([open]) .sk-unter, .sk-klapp[open] .sk-art { display: none; } /* zu: Art statt Unterzeile, auf: umgekehrt */ .sk-art { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: .9rem; color: var(--text-secondary); } .sk-pfeil { display: block; flex: none; color: var(--text-secondary); transition: transform .2s; } .sk-klapp[open] .sk-pfeil { transform: rotate(180deg); } .sk-rumpf { margin-top: 0; padding: 0 16px 16px; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .sk-pfeil { transition: none; } } @media (max-width: 860px) { .suche-raster:has(> .suche-seite:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .suche-seite { position: static; order: -1; } } /* Overlay: Link „Alle Ergebnisse“ unter der Liste */ .search-alle { display: block; margin: 8px 0 4px; padding: 12px 14px; border-radius: 10px; font-family: var(--font-ui); font-weight: 700; color: var(--sc, var(--primary)); text-decoration: none; } .search-alle:hover, .search-alle:focus-visible { background: color-mix(in srgb, var(--sc, var(--primary)) 10%, transparent); } .sec.suchseite { padding-top: 0; } @media (max-width: 760px) { .suche-form .fb-sel { grid-column: 1 / -1; } } .suche-seite { display: flex; flex-direction: column; gap: 14px; } .suche-seite[hidden] { display: none; } .suche-datum { display: block; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--sc, var(--primary)); } .search-result.is-vergangen { opacity: .62; } .search-result.is-vergangen .suche-datum { color: var(--text-secondary); } .search-group-verlauf { display: flex; align-items: center; justify-content: space-between; } .search-vergessen { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; } .search-vergessen:hover { color: var(--text); } .person-vorschau .ak-members { max-width: 340px; } .person-vorschau-orte { margin-top: 36px; font-size: 1.8rem; } .person-vorschau-liste { padding-left: 1.2em; line-height: 1.8; color: var(--text-secondary); } /* Funktion im DV als zweite Rollenzeile auf AK-Karten (Vorstand, Diözesanbüro; Janis 08.11.2026). Kleiner und in der Textfarbe, damit die Rolle im AK die erste Angabe bleibt. */ .ak-mbody .ak-mrole.ak-mrole-dv { grid-column: 1 / -1; font-size: .8rem; letter-spacing: .04em; color: var(--text-secondary); margin-top: 2px; hyphens: auto; overflow-wrap: anywhere; } /* Läuft unter dem Mail-Knopf durch: daneben war am Handy nur Platz für „DIÖZESAN-VORSITZEN-DE“ in drei Zeilen. */ /* ══ Kennzahlen im Startseiten-Hero (Janis, 09.11.2026) ══ Die drei Karten sind Links (Stämme, Leiter*in werden, Unser DV), das sah man ihnen nicht an. Der Hover-Lift kam nie an, weil die Schwebe-Animation transform dauernd neu setzt. Jetzt mit Pfeil wie bei den Textlinks; beim Darüberfahren (und Antippen am Handy) rückt der Pfeil, die Zahl wächst leicht, der Grund wird dichter. Die Karte schwebt weiter, der Rahmen bleibt in der Tinte (keine farbigen Rahmen). */ /* Jede Karte so breit wie ihr Inhalt, rechtsbündig (Janis, 10.11.2026; am 09.11. waren sie gleich breit). */ .stat-n { transition: transform .3s ease; transform-origin: right center; } .hero .stat-l::after { content: '→'; display: inline-block; margin-left: .45em; transition: transform .25s; } html:root .hero a.stat-c { transition: background .3s; } html:root .hero a.stat-c:is(:hover, :active, :focus-visible) { background: rgba(var(--photo-overlay-rgb), .78) !important; } html:root:not([data-theme="dunkel"]) .hero a.stat-c:is(:hover, :active, :focus-visible) { background: color-mix(in srgb, var(--bg-mid) 97%, transparent) !important; } .hero a.stat-c:is(:hover, :active, :focus-visible) .stat-n { transform: scale(1.06); } .hero a.stat-c:is(:hover, :active, :focus-visible) .stat-l::after { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .stat-n, .hero .stat-l::after { transition: none; } } /* Überschrift mit sehr langem Wort (plugins/dpsg-titel): am Handy kleiner, damit das Wort mit höchstens einer Trennung passt (Janis, 09.11.2026). */ @media (max-width: 600px) { .sec-title.titel-lang { font-size: 2rem; } } /* Knöpfe unter „Wer wir sind“ auf AK-Seiten (templates/ak.php) */ .ak-team-knoepfe { flex-wrap: wrap; margin-top: 22px; } /* Instagram-Beitrag als Schmuck im CTA-Kasten (blocks/cta.php, sideinsta). Kein eingebetteter Beitrag, nur Logo, Foto und Symbole in der Tinte. */ .cta-mit-bild .cta-insta { width: clamp(170px, 18vw, 220px); background: var(--bg); border-radius: 12px; padding: 8px; position: relative; transform: rotate(2deg); box-shadow: 0 10px 26px color-mix(in srgb, var(--text) 14%, transparent); } .cta-insta .ci-kopf { display: flex; align-items: center; gap: 7px; padding: 2px 2px 7px; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--text); } /* Profilbild wie bei Instagram: DV-Logo auf weißem Grund im Kreis (Janis, 10.11.2026) */ .cta-insta .ci-profil { width: 24px; height: 24px; border-radius: 50%; background: var(--abzug); display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 15%, transparent); } .cta-insta .ci-profil img { width: 72%; height: 72%; object-fit: contain; } .cta-insta .ci-kopf i { margin-left: auto; opacity: .6; } .cta-insta .ci-foto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; } .cta-insta .ci-leiste { display: flex; gap: 12px; padding: 8px 4px 2px; color: var(--text); font-size: 1rem; } .cta-insta .ci-rechts { margin-left: auto; } @media (max-width: 640px) { .cta-mit-bild .cta-insta { width: 150px; transform: rotate(1.5deg); } } /* Am Handy steht das Instagram-Mockup zwischen Text und Knopf, mittig (Janis, 11.11.2026: oben links über der Überschrift wirkte es verloren). .cta-inhalt gibt seine Teile ans Raster ab, „order“ sortiert sie. */ @media (max-width: 760px) { .cta-mit-bild:has(.cta-insta) .cta-inhalt { display: contents; } .cta-mit-bild:has(.cta-insta) > * { grid-column: 1; grid-row: auto; } .cta-mit-bild:has(.cta-insta) .cta-inhalt > * { order: 1; } .cta-mit-bild:has(.cta-insta) .cta-insta { order: 2; justify-self: center; margin: 10px 0 14px; width: 170px; } .cta-mit-bild:has(.cta-insta) .cta-inhalt > :is(.dl-row, .btn) { order: 3; } } /* Zeichen der Seite rechts im breiten Kasten (blocks/cta.php, plugins/dpsg-zeichen). Nur ab 1080px: darunter reicht der Platz neben dem Text nicht, am Handy spart es Höhe (Janis, 10.11.2026). Blass, damit es Schmuck bleibt. */ .cta-zeichen { display: none; } @media (min-width: 1080px) { .cta-mit-zeichen { position: relative; } .cta-mit-zeichen > :not(.cta-zeichen):not(.filz) { position: relative; z-index: 1; max-width: min(720px, calc(100% - 220px)); } /* Mittig in der freien Fläche rechts neben dem Text (Text höchstens 720px plus 44px Polster, Zeichen bis 170px breit), mindestens 56px vom Rand (Janis, 10.11.2026: klebte bei breiten Fenstern am Rand). */ .cta-zeichen { display: grid; place-items: center; position: absolute; right: max(56px, calc((100% - 934px) / 2)); top: 50%; transform: translateY(-50%) rotate(-6deg); width: clamp(120px, 12vw, 170px); height: clamp(120px, 12vw, 170px); color: var(--sc, var(--filz-tinte)); opacity: .16; pointer-events: none; } .cta-zeichen i { font-size: clamp(90px, 9vw, 130px); } .cta-zeichen svg.wz { width: 100%; height: 100%; } .cta-zeichen img { width: 100%; height: 100%; object-fit: contain; } .cta-zeichen .ak-zeichen-lilie { width: 100%; height: 100%; } } /* Kästen mit Bild rechts (Logo, Schirm, Instagram-Beitrag) wie die mit Zeichen: ab 1080px Text höchstens 720px, das Bild mittig in der freien Fläche daneben (Janis, 10.11.2026). Darunter bleibt das Raster von .cta-mit-bild. */ @media (min-width: 1080px) { .cta-mit-bild { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); } .cta-mit-bild .cta-bild { justify-self: center; } } /* Seitenkarte neben einem Team (Erreichbarkeit auf Unser DV): nur so hoch wie ihr Inhalt statt auf die Höhe der Personenkarten gestreckt, etwas enger (Janis, 11.11.2026: „verschwenderisch“). */ .ak-members + .ak-info-card, .ak-info-card { align-self: start; } .ak-members ~ .ak-info-card { padding: 20px 22px; } .ak-members ~ .ak-info-card .ak-info-text { line-height: 1.6; margin-bottom: 6px; } .ak-members ~ .ak-info-card .ak-info-row { padding: 8px 0; } /* „Auf einen Blick“ auf AK-Seiten als Inhaltsverzeichnis: jede Zeile springt zu ihrem Abschnitt (Janis, 11.11.2026). Pfeil rechts zeigt, dass es nach unten geht; beim Überfahren rückt die Zeile ein wie die Terminliste. */ .ak-blick a.ak-info-row { text-decoration: none; color: var(--text-secondary); transition: color .15s, padding-left .15s; } .ak-blick a.ak-info-row span { flex: 1; } .ak-blick .ak-info-row i.ak-blick-pfeil { color: var(--text-muted); font-size: .8rem; transition: transform .15s; } .ak-blick a.ak-info-row:hover { color: var(--text); padding-left: 4px; } .ak-blick a.ak-info-row:hover .ak-blick-pfeil { transform: translateY(2px); color: var(--sc, var(--primary)); } .ak-blick a.ak-info-row:focus-visible { outline: 2px solid var(--sc, var(--primary)); outline-offset: 2px; border-radius: 4px; } .ak-blick a.ak-info-row[data-mail] span { color: var(--primary); } /* Zeichen als Maske (Test Halstuch, 11.11.2026): die Form kommt aus der SVG, die Farbe aus der Seite, genau wie bei Icons und Wegzeichen. */ .cta-zeichen .cta-zeichen-maske { width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--maske) center / contain no-repeat; mask: var(--maske) center / contain no-repeat; } /* Das Halstuch soll als rosa erkennbar sein, nicht als blasser Schatten wie die übrigen Zeichen (Janis 11.11.2026; kurz auf 16 % gesetzt und am selben Abend zurück, „vorher hat mir besser gefallen“). */ .cta-zeichen:has(.cta-zeichen-maske) { opacity: .7; } /* Unter 1080px steht das Halstuch nicht weg, sondern wie der Schirm im Kasten davor (.cta-mit-bild am Handy): 96px über dem Text (Janis, 13.11.2026). */ @media (max-width: 1079px) { .cta-zeichen:has(.cta-zeichen-maske) { display: grid; width: 96px; height: 96px; margin-bottom: 14px; color: var(--sc, var(--filz-tinte)); transform: rotate(-6deg); } } /* „Auf einen Blick“ auf Inhaltsseiten (plugins/dpsg-blick, Janis 11.11.2026): Einleitung links, Verzeichnis rechts wie auf den AK-Seiten; am Handy steht die Karte direkt unter der Einleitung. */ .blick-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } .blick-raster .sec-sub { max-width: 720px; } .blick-raster > .ak-blick { padding: 20px 22px; } .blick-raster > .ak-blick .ak-info-row { padding: 8px 0; line-height: 1.35; } .pg-header .blick-raster { margin-top: 4px; } @media (max-width: 960px) { .blick-raster { grid-template-columns: minmax(0, 1fr); gap: 24px; } } .ak-blick .ak-info-row.blick-unter { padding-left: 16px; font-size: .9rem; } .ak-blick a.ak-info-row.blick-unter:hover { padding-left: 20px; } /* Sprungzeilen unten im Steckbrief der Stufenseiten */ .steckbrief .sb-sprung { margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--border-card); } /* Lange Verzeichnisse (mehr als 8 Einträge: Datenschutz, Teilnahmebedingungen, Woodbadge) liegen unter der Einleitung über die ganze Breite, zweispaltig. Rechts daneben drückten sie den ersten Abschnitt um eine Bildschirmhöhe nach unten. */ .blick-raster.blick-breit { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* Raster statt CSS-Spalten (Janis, 11.11.2026): Die Spalten verteilten die Einträge selbst, bei 9 standen rechts 5 und links 4. Jetzt gibt --zeilen aus snippets/blick.php die Zeilenzahl vor, gefüllt wird erst links. Der letzte Eintrag jeder Spalte (.blick-spaltenende) bekommt keine Linie. */ @media (min-width: 761px) { .blick-breit > .ak-blick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto repeat(var(--zeilen, 1), auto); grid-auto-flow: column; column-gap: 40px; } .blick-breit > .ak-blick h2 { grid-column: 1 / -1; grid-row: 1; } .blick-breit > .ak-blick .ak-info-row.blick-spaltenende { border-bottom: none; } } /* Zeilenzahl je Spalte, gesetzt in snippets/blick.php (bis 24 Einträge) */ .blick-z1 { --zeilen: 1; } .blick-z2 { --zeilen: 2; } .blick-z3 { --zeilen: 3; } .blick-z4 { --zeilen: 4; } .blick-z5 { --zeilen: 5; } .blick-z6 { --zeilen: 6; } .blick-z7 { --zeilen: 7; } .blick-z8 { --zeilen: 8; } .blick-z9 { --zeilen: 9; } .blick-z10 { --zeilen: 10; } .blick-z11 { --zeilen: 11; } .blick-z12 { --zeilen: 12; } /* Sprungziele aus „Auf einen Blick“: Überschriften mit .reveal rutschen nach dem Sprung noch 20px hoch und landeten so unter der Navbar. */ h2[id], [data-blick][id] { scroll-margin-top: 28px; } /* Abschnittsnummer statt Icon (Rechtstexte), gleiche Breite wie die Icons */ .ak-blick .blick-nr { min-width: 16px; text-align: center; flex-shrink: 0; font-family: var(--font-heading); font-weight: 700; font-size: .9rem; color: var(--sc, var(--primary)); } /* ══════════════════════════════════════════ LINKS IM FLIESSTEXT UNTERSTRICHEN (WCAG 1.4.1, Paket 4, 11.11.2026) ────────────────────────────────────────── Links im Text waren nur an der Farbe zu erkennen, Abstand zur Textfarbe 1,77:1 statt 3:1. Jetzt eine dünne Unterstreichung in Linkfarbe, nur in Textblöcken, nicht in Navigation, Karten-Titeln und Knöpfen. Gemeint sind Links ohne eigene Klasse (aus dem Panel-Text) und Mail-Links. Schon unterstrichen und deshalb hier nicht nötig: .faq-a, .f-datenschutz, .ev-none, .ev-empty, .ausb-quelle, .sf-quelle. ══════════════════════════════════════════ */ :is(:is(.article-prose, .bleed-card) :is(p, li, dd, td), .int-desc, .sec-sub, .consent-text, .dg-note) :is(a:not([class]), a.dpsg-mail) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 60%, transparent); } :is(:is(.article-prose, .bleed-card) :is(p, li, dd, td), .int-desc, .sec-sub, .consent-text, .dg-note) :is(a:not([class]), a.dpsg-mail):hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; } /* ── teil-18-mobil-iphone.css ── */ /* ══════════════════════════════════════════ MOBILER FEINSCHLIFF (Durchsicht aller Seiten am Handy, 11.11.2026) ══════════════════════════════════════════ */ /* Teamkarten am Handy: eine Person pro Zeile, kleines Foto links. Zu zweit nebeneinander blieben für Name und Rolle 84px, und Wörter brachen mitten durch („Gantevoor/t“, „BILDUNGSREFERENTI/N“). */ @media (max-width: 560px) { .ak-members { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ak-member { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; } :root .ak-member .ak-mimg { width: 72px; height: 72px; border-radius: 0; } .ak-member .ak-mimg-ph { font-size: 1.35rem; } .ak-member .ak-mimg-ph::after { width: 52px; height: 52px; right: -10px; bottom: -12px; } .ak-member .ak-mbody { padding: 10px 14px; } .ak-mbody .ak-mname, .ak-mbody .ak-mrole { overflow-wrap: break-word; } .ak-mbody .ak-mrole { font-size: .82rem; letter-spacing: .05em; } .ak-members > :is(.ak-member.ak-join, .ak-member-cta):only-child { width: auto; } } /* Überschriften am Handy: lange Wörter bekommen weiche Trennstellen (plugins/dpsg-trennung). Dazu Steckbrief-Kacheln mit etwas weniger Polster und Schrift, damit „Bibergruppe“ und „Woodbadge“ ganz in die Kachel passen (vorher 103px Platz bei 18px Schrift). */ @media (max-width: 420px) { .steckbrief .sb-zeile { padding: 10px 11px; } .steckbrief .sb-zeile dd { font-size: 1rem; overflow-wrap: break-word; } } /* Leere Abschnitte (keine Termine, keine Downloads): kleiner gestrichelter Hinweiskasten statt einer fetten farbigen Zeile, und der Abschnitt nimmt weniger Platz ein (mobile Durchsicht, Janis 11.11.2026). */ .leer-hinweis { display: flex; align-items: flex-start; gap: 12px; max-width: 640px; margin: 0; padding: 14px 16px; border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent); border-radius: 12px; font-weight: 400; font-size: 1rem; line-height: 1.55; color: var(--text-secondary); } .leer-hinweis > i { color: var(--sc, var(--primary)); margin: .25em 0 0; opacity: .9; flex: none; } .leer-hinweis a { color: var(--sc, var(--primary)); } .sec:has(.leer-hinweis) { padding-bottom: 40px; } .sec:has(.leer-hinweis) .sec-title { margin-bottom: 12px !important; } @media (max-width: 760px) { .sec:has(.leer-hinweis) { padding-bottom: 28px; } .sec:has(.leer-hinweis) .sec-title { font-size: 1.45rem !important; } } /* Termin-Titel in Listen bis zu zwei Zeilen statt nach einer mit „…“ abzuschneiden („Seminar für Stammesvorst…“, mobile Durchsicht 11.11.2026). */ .ev-ov-name { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* Fotoreihen am Handy näher an den Text: über und unter dem Bildpaar standen rund 100px Luft, das Paar wirkte wie ein verlorener eigener Abschnitt (mobile Durchsicht, Janis 11.11.2026). */ @media (max-width: 760px) { .sec:has(> .wrap > :is(.foto-duo, .foto-trio, .foto-band)) { margin-top: -28px; padding-bottom: 20px; } } /* Cookie-Banner am Handy kompakter (Janis, 11.11.2026: gut 60 % des Bildschirms). Der Text bleibt vollständig, weil die Einwilligung sonst nicht trägt (js/consent.js); kleiner werden nur Schrift, Zeilenabstand und Polster, die Buttons stehen nebeneinander. */ @media (max-width: 560px) { #consent-banner { padding: 6px; } #consent-banner .consent-inner { padding: 12px 14px; gap: 10px; } #consent-banner .consent-text { font-size: .8125rem; line-height: 1.45; } #consent-banner .consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #consent-banner .consent-btns .btn { width: 100%; justify-content: center; min-height: 44px; } } /* Buttons am Handy in voller Breite (Janis, 11.11.2026): Gestapelte Buttons mit unterschiedlicher Breite wirkten ausgefranst (Schulungen, NaMi, Service), lange Beschriftungen brachen zweizeilig um. Textlinks mit Pfeil bleiben, wie sie sind. */ @media (max-width: 560px) { .dl-row > :is(.btn, .dl-btn):not(.btn-text, .dl-btn-text) { flex: 1 1 100%; justify-content: center; text-align: center; font-size: .875rem; letter-spacing: .04em; padding-left: 14px; padding-right: 14px; } /* PDFs als Liste: Icon links, Text linksbündig daneben. Zentriert sprang das Icon bei zweizeiligen Titeln an den Rand (Janis, 13.11.2026). */ .dl-row > :is(.btn, .dl-btn)[href*=".pdf"]:not(.btn-text, .dl-btn-text) { justify-content: flex-start; text-align: left; gap: 12px; } .dl-row > :is(.btn, .dl-btn)[href*=".pdf"] i { flex: none; } } /* Glossar: Buchstabenleiste A–Z (templates/glossar.php, Janis 11.11.2026). Klebt beim Scrollen unter dem Kopf. Am Handy zwei Zeilen à 13 Buchstaben. */ .gl-abc { position: sticky; top: 64px; z-index: 5; margin-top: 24px; display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: var(--radius-lg); background: var(--bg-mid); border: 1px solid var(--border-card); } .gl-abc > * { display: grid; place-items: center; min-height: 34px; border-radius: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; } .gl-abc a { color: var(--sc, var(--primary)); text-decoration: none; } .gl-abc a:hover, .gl-abc a:focus-visible { background: color-mix(in srgb, var(--sc, var(--primary)) 14%, transparent); } .gl-abc span { color: var(--text-muted); opacity: .4; } .gl-item { scroll-margin-top: 130px; } @media (max-width: 760px) { .gl-abc { top: 50px; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; padding: 6px; } .gl-abc > * { min-height: 30px; font-size: .95rem; } .gl-item { scroll-margin-top: 140px; } } /* Materialausleihe am Handy als Liste wie die Teamkarten: kleines Foto links, Name und Beschreibung daneben. Vorher stand jedes Teil als großes Foto untereinander, rund sieben Bildschirme Scrollen (Janis, 11.11.2026). */ @media (max-width: 560px) { .mat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .mat-card { display: grid !important; grid-template-columns: 84px minmax(0, 1fr); align-items: center; } :root .mat-card { padding-bottom: 0; } :root .mat-card .mat-img { aspect-ratio: 1; width: 84px; height: 84px; border-radius: 0; align-self: stretch; height: 100%; min-height: 84px; } .mat-card .mat-img > .filz { display: none; } .mat-card .mat-card-body { padding: 10px 14px; } .mat-card :is(h2, h3) { font-size: 1.05rem; margin-bottom: 2px; } .mat-card p { font-size: .9rem; line-height: 1.45; } .mat-card-ph { font-size: 1.4rem; } } /* Handy-Menü: Kopf einer Gruppe ist ein Link zur Elternseite, der Pfeil daneben klappt auf (Janis, 12.11.2026). Vorher war die ganze Zeile ein Knopf und die Elternseite stand noch einmal als erster Unterpunkt. */ .mnav-kopfzeile { display: grid; grid-template-columns: 1fr auto; align-items: center; } .mobile-nav .mnav-kopf-link { color: var(--text-secondary); font-size: 1.125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 11px 0; } .mobile-nav .mnav-kopf-link.active { color: var(--sc, var(--cta-text)); } .mnav-kopf { width: 44px; height: 44px; padding: 0; justify-content: center; } /* ══════════════════════════════════════════ iPHONE-RUNDE (Janis, 12.11.2026, iPhone 15) ══════════════════════════════════════════ */ @media (max-width: 760px) { /* Neuigkeiten auf der Startseite: das kleine Bild bekommt denselben eingeklebten Rahmen wie die Personenkarten (vorher ausgeblendet) */ #home-news .news-img > .filz { display: block; inset: 4px; border-radius: 7px; } /* Termine: der Rahmen ums Datum war 8px oben und unten eingerückt und damit 66 × 52 statt quadratisch */ #home-termine .bp-cal > .filz { inset: 1px; } } @media (max-width: 560px) { /* Personen in der Liste: Rahmen näher an den Bildrand */ :root .ak-member .ak-mimg:not(.ak-mimg-ph) > .filz { inset: 4px; border-radius: 7px; } /* Ohne Bild: der Kreis um die Initialen war 76px, das Feld nur 72px */ :root .ak-member .ak-mimg-ph > .filz { width: 54px; height: 54px; } } /* Instagram-Karte am Handy: Die Spaltenregel `> *` traf auch den Rahmen. Ein absolut gesetztes Rasterkind mit Spalte nimmt die Zelle als Bezug, der Rahmen saß 26px nach rechts versetzt und war zu schmal. */ .cta-mit-bild:has(.cta-insta) > .filz { grid-column: auto; grid-row: auto; } /* 100 × 100: am Handy stand die Zahl über die volle Breite, der Kringel ragte über die Karte hinaus. Jetzt so breit wie die Zahl. */ @media (max-width: 760px) { .card-split.lead-left > :first-child { justify-self: center; width: max-content; max-width: 100%; } .card-split.lead-left > div:first-child > .filz { inset: -10px -18px; } } /* Banderole am iPhone läuft nicht (Janis, 12.11.2026, iPhone 15, zum zweiten Mal). Was blieb: eine mask-image auf .marquee-bar, unter der eine Transform-Animation läuft. Safari zeichnet Ebenen unter einer Maske nicht zuverlässig nach, das Band steht dann scheinbar. Die Ränder blenden jetzt zwei Verläufe in der Bandfarbe aus, wie am Desktop vor dem Doodle-Look; eine Maske gibt es am Handy nicht mehr. */ @media (max-width: 760px) { .marquee-bar, .marquee-bar:has(.mq-pause:not([hidden])) { -webkit-mask-image: none; mask-image: none; } :root .marquee-bar::before, :root .marquee-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 28px; z-index: 2; pointer-events: none; } :root .marquee-bar::before { left: 0; background: linear-gradient(to right, var(--sc, var(--primary)), transparent); } :root .marquee-bar::after { right: 0; background: linear-gradient(to left, var(--sc, var(--primary)), transparent); } .marquee-bar:has(.mq-pause:not([hidden]))::after { display: none; } } /* Eine Regel für Links im Fließtext, auch im Leer-Hinweis: unterstrichen. „Kalender“ war es, „schreib dem AK“ nicht (Janis, 12.11.2026). */ .leer-hinweis a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .leer-hinweis a:hover { text-decoration-thickness: 2px; } /* Pfeil der Stufenkarten in der Listenansicht ohne Stufenfarbe (Janis, 12.11.2026) */ :root .as-list .stufe-mini::after { color: var(--text-secondary); } /* :root, sonst schlägt die Regel mit .srv-card[data-ziele] sie */ /* ══════════════════════════════════════════ KOPFBILD AM HANDY, zweiter Anlauf (Janis, 12.11.2026) ────────────────────────────────────────── Der Versuch vom 11.11. (Foto oben, Titel darunter) ist zurückgenommen: Text steht wieder auf dem Bild, wie auf den AK-Seiten. - Zeichen der Stufe (Maskottchen, Rover-Wortmarke): höchstens 86px hoch und 28 % der Breite, die breite Wortmarke wird so von selbst kleiner. Der Titel endet links davon und bricht um, statt dass das Zeichen über ihm liegt („Drachentöter*innen“ auf den AK-Seiten macht es genauso). Die 80px „Schutzzone“ unter dem Titel ist damit nicht mehr nötig. - Höhe: 62vh machten den Kopf am Handy rund 500px hoch bei 375px Breite. Ein Querformat-Foto zeigte davon nur die mittlere Hälfte, es wirkte hineingezoomt. Jetzt wächst der Kopf mit der Breite und mit dem Inhalt. */ @media (max-width: 560px) { .page-hero { min-height: clamp(330px, 92vw, 420px); } :root .page-hero .ph-mascot { height: auto; width: auto; max-height: 86px; max-width: 28vw; right: 18px; bottom: -18px; transform: none; } :root .page-hero .ph-mascot.is-sticker { width: 76px; height: 76px; max-width: none; } /* Die flache Wortmarke (Rover) sitzt mittig auf der Linie der Unterkante (Janis, 12.11.2026; mit -18px hing sie fast ganz darunter) */ :root .page-hero .ph-mascot-wordmark { bottom: -10px; } :root .page-hero:has(.ph-mascot:not(.ph-mascot-wordmark)) .wrap { padding-bottom: 36px; } .page-hero:has(.ph-mascot) h1.sec-title { max-width: calc(100% - 28vw - 6px); } .ak-hero { height: auto; min-height: clamp(300px, 85vw, 400px); } } /* Lightbox am Handy: Pfeile unter dem Bild statt darauf (Janis, 12.11.2026). Unten eine Reihe: zurück, Zähler, weiter. Der Bildnachweis steht darüber, das Bild lässt dafür unten Platz. */ @media (max-width: 760px) { .lightbox img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); } .lb-nav { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; width: 46px; height: 46px; } .lb-prev { left: calc(50% - 98px); } .lb-next { right: calc(50% - 98px); } .lb-count { bottom: calc(31px + env(safe-area-inset-bottom)); } .lb-credit { bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 48px); text-align: center; } } /* ── teil-19-willkommen-durchsicht-befunde.css ── */ /* ══════════════════════════════════════════ WILLKOMMEN (vorübergehend, Janis 12.11.2026, snippets/willkommen.php) Gezeichnete Karte mit kurzem Text und einem Button zum Kontaktformular. ══════════════════════════════════════════ */ .wk-karte { position: relative; padding: clamp(24px, 4vw, 40px); border-radius: var(--filz-radius, 18px); } .wk-karte > .filz { opacity: .8; } .willkommen .sec-title { margin-bottom: 14px; } .wk-text { max-width: 680px; color: var(--text-secondary); font-size: var(--font-size-reading, 1.125rem); line-height: 1.7; margin: 0 0 22px; } /* Zeichen rechts: die Lilie im gezeichneten Kreis, leicht gekippt wie ein Aufnäher (Janis, 12.11.2026). Am Handy kleiner oben rechts. */ .wk-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 4vw, 48px); align-items: center; } .wk-karte > :not(.filz):not(.wk-zeichen) { grid-column: 1; } .wk-zeichen { grid-column: 2; grid-row: 1 / span 3; position: relative; width: clamp(96px, 11vw, 140px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transform: rotate(-8deg); color: var(--primary); } .wk-zeichen > .filz { inset: 0; border-radius: 50%; color: currentColor; opacity: .7; } .wk-lilie { width: 58%; height: 58%; background-color: currentColor; -webkit-mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat; mask: url('/img/logo/lilie-filz.svg') center/contain no-repeat; } html[data-theme="dunkel"] .wk-zeichen { color: var(--text); } @media (max-width: 560px) { .wk-zeichen { width: 64px; grid-row: 1; align-self: start; } .wk-karte > :is(.dl-row, .wk-text):not(.filz):not(.wk-zeichen) { grid-column: 1 / -1; } } /* Lilie ohne Kreis, größer und blasser (Janis, 12.11.2026) */ .wk-zeichen { width: clamp(120px, 14vw, 180px); opacity: .35; transform: rotate(-6deg); } .wk-lilie { width: 100%; height: 100%; } @media (max-width: 560px) { .wk-zeichen { width: 72px; } } /* Instagram-Karte zwischen 641 und 760px: Die Handy-Anordnung (alles in Spalte 1) galt schon, das einspaltige Raster erst ab 640px. Spalte 1 war 0px breit, die Überschrift stand Buchstabe für Buchstabe untereinander (Janis, 12.11.2026). */ @media (max-width: 760px) { .cta-mit-bild:has(.cta-insta) { grid-template-columns: minmax(0, 1fr); } /* „Für Leitende & Stämme“: in der Listenansicht untereinander, nicht 2 + 1 */ body:has(#home-news) .quick-grid { grid-template-columns: minmax(0, 1fr); } } /* ══ Textdurchsicht Prävention (plugins/dpsg-durchsicht, js/durchsicht.js) ══ Nur lokal und auf neu.*: jeder Baustein bekommt oben eine schmale Leiste mit Quelle und Notizfeld. Bewusst sachlich, es ist Werkzeug, kein Seitenteil. */ .dsicht-block { position: relative; } /* Die Leiste liegt über dem Baustein: Fotos und Karten mit negativem Abstand oder eigener Ebene schoben sich sonst über die Knöpfe (Janis, 13.11.2026). */ .dsicht-leiste { position: relative; z-index: 5; margin-bottom: 10px; } .dsicht-block > .sec { padding-top: 12px !important; } .dsicht-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding-top: 18px; padding-bottom: 8px; margin-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); font-family: var(--font-ui); font-size: .875rem; } .dsicht-quellen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .dsicht-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--bg-mid); color: var(--text-secondary); line-height: 1.4; text-decoration: none; border: 1px solid var(--border-card); overflow-wrap: anywhere; } a.dsicht-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, transparent); } .dsicht-chip-art { font-weight: 700; color: var(--text); } .dsicht-chip--neu, .dsicht-chip--bisher { background: color-mix(in srgb, var(--sc, var(--primary)) 10%, var(--bg-mid)); } .dsicht-chip--leer { font-style: italic; } /* Alle Knöpfe der Leiste gleich: Passt, Kann weg, Soll rein, Anmerkung (Janis, 13.11.2026: „Notiz“ war heller als die beiden anderen). */ .dsicht-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; box-sizing: border-box; font: inherit; font-weight: 700; color: var(--text-secondary); background: var(--bg); cursor: pointer; border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); border-radius: 999px; padding: 4px 12px; } .dsicht-knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 45%, transparent); } .dsicht-hat-notiz .dsicht-notiz-knopf { background: color-mix(in srgb, var(--sc, var(--primary)) 14%, transparent); } .dsicht-panel { padding-bottom: 12px; font-family: var(--font-ui); } .dsicht-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; } .dsicht-eintrag { background: var(--bg-mid); border-radius: 10px; padding: 10px 14px; } .dsicht-eintrag-kopf { display: flex; gap: 10px; align-items: baseline; font-size: .875rem; } .dsicht-zeit { color: var(--text-muted); } .dsicht-loeschen { margin-left: auto; font: inherit; font-size: .8rem; background: none; border: 0; color: var(--text-muted); cursor: pointer; text-decoration: underline; } .dsicht-text { margin: 4px 0 0; white-space: pre-wrap; color: var(--text); } .dsicht-form { display: grid; gap: 8px; } .dsicht-feld { display: grid; gap: 4px; font-size: .875rem; color: var(--text-secondary); } .dsicht-feld textarea, .dsicht-feld input { font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); border-radius: 10px; padding: 8px 10px; } .dsicht-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .dsicht-feld--name { flex: 1 1 200px; } .dsicht-meldung { margin: 0; font-size: .875rem; color: var(--text-secondary); min-height: 1.2em; } .dsicht-kopf-hinweis { margin: 0; color: var(--text-secondary); font-style: italic; } /* Restseite: ein Abschnitt je alter Seite, darunter die Textblöcke */ .dsicht-rest-quelle { margin: 0 0 4px; color: var(--text-secondary); font-size: .95rem; } .dsicht-rest-text { white-space: pre-line; } .dsicht-sec { padding-top: 0; } .dsicht-sec--luft { padding-top: 24px; } .dsicht-h3 { font-size: 1.4rem; margin-bottom: 4px; } .dsicht-h4 { margin: 4px 0 6px; } .dsicht-klein { font-weight: 400; color: var(--text-muted); } /* Schnellurteil: Passt / Soll rein / Kann weg */ .dsicht-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dsicht-urteil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .dsicht-urteil-knopf.dsicht-urteil--passt[aria-pressed="true"], .dsicht-urteil-knopf.dsicht-urteil--rein[aria-pressed="true"] { color: var(--status-success); border-color: currentColor; background: color-mix(in srgb, var(--status-success) 12%, transparent); } .dsicht-urteil-knopf.dsicht-urteil--weg[aria-pressed="true"] { color: var(--status-error); border-color: currentColor; background: color-mix(in srgb, var(--status-error) 10%, transparent); } .dsicht-urteil-von { color: var(--text-muted); font-size: .8rem; } .dsicht-urteil-von:empty { display: none; } .dsicht-urteil-von.dsicht-fehler { color: var(--status-error); font-weight: 700; } .dsicht-ist-passt > .dsicht-leiste, .dsicht-ist-rein > .dsicht-leiste { border-top: 2px solid var(--status-success); } .dsicht-ist-weg > .dsicht-leiste { border-top: 2px solid var(--status-error); } .dsicht-ist-weg > :not(.dsicht-leiste):not(.dsicht-panel) { opacity: .45; } /* Restseite: Erklärung und Filter */ .dsicht-erklaerung { max-width: 760px; color: var(--text-secondary); margin-bottom: 18px; } .dsicht-erklaerung p { margin: 0 0 8px; } .dsicht-filterleiste { display: grid; gap: 10px; padding: 14px 0 6px; border-top: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); } .dsicht-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .dsicht-filter-titel { font-family: var(--font-ui); font-weight: 700; font-size: .875rem; color: var(--text); min-width: 76px; } .dsicht-anzahl { opacity: .7; font-weight: 400; } .dsicht-treffer { margin: 4px 0 0; font-size: .875rem; color: var(--text-secondary); } /* ══════════════════════════════════════════ Befunde der Designsystem-Messung (12.11.2026, 61 Seiten) ────────────────────────────────────────── Gesammelt am Ende, damit sie gewinnen und als ein Block prüfbar sind. ══════════════════════════════════════════ */ /* Seitenton als Schrift auf der grauen Kopf- und Fußfläche (--papier-tief): AK-Töne wie Drachen #0D7481 oder Biber #7E6244 kamen dort auf 4,1 bis 4,3:1. Ein Fünftel --text dazu hebt alle über 5:1, der Ton bleibt erkennbar. */ html:not([data-theme="dunkel"]) .logo-text span { color: color-mix(in srgb, var(--sc, var(--primary)) 80%, var(--text)); } html:not([data-theme="dunkel"]) .ft-col a.aktiv { color: color-mix(in srgb, var(--sc-aktiv, var(--cta-text)) 80%, var(--text)); } html:not([data-theme="dunkel"]) #site-footer .logo-text span { color: color-mix(in srgb, var(--sc-tint, var(--primary)) 80%, var(--text)); } /* Zähler im Stammfinder steht auf dem Suchfeld, nicht auf --bg: --text-muted ist dort nicht freigegeben (4,39:1), --text-secondary schon. */ .stamm-count { color: var(--text-secondary); } /* „In Planung“: Gold als Schrift auf hellem Grund 3,5:1; der Ton bleibt als Rahmen und Tönung, die Schrift wird --text. */ html:not([data-theme="dunkel"]) .soon-badge { color: var(--text); } /* Alle Bedienelemente mindestens 44 px (04-komponenten, „control-height“) */ .btn-sm { min-height: var(--control-height); box-sizing: border-box; } .arch-list a { min-height: var(--control-height); align-items: center; box-sizing: border-box; } .nf-chip.ausb-b { height: auto; min-height: var(--control-height); } /* Glossar-ABC: Das Polster aus der allgemeinen Navigationsregel (8px 14px) war breiter als eine Zelle, M und W liefen hinaus. Zellen 44 hoch, in der Breite reichen 24 px, weil sie eine dichte Reihe bilden (WCAG 2.5.8). */ .gl-abc > * { padding: 0; min-width: 0; min-height: var(--control-height); } @media (max-width: 760px) { .gl-abc > * { min-height: var(--control-height); } } /* Überläufe */ .steckbrief .sb-zeile dt { overflow-wrap: anywhere; hyphens: auto; } @media (max-width: 560px) { .ausb-row .ev-ov-tags { width: calc(100% - 50px); } /* 100 % plus 50 px Einzug ragte hinaus */ } /* Lange Wörter in schmalen Spalten (Linkkarten und Material bei 320 px) */ .int-card :is(.int-title, .int-desc), .mat-card p { overflow-wrap: anywhere; hyphens: auto; } /* „100 × 100“ im gekippten Kasten: so breit wie sein Inhalt */ .card-split.lead-left > div:first-child { min-width: max-content; } /* Glossar-ABC bis Tablet: eine Zeile, die waagrecht rollt, Zellen 32 × 44 px statt 13 oder 26 Spalten zu 19 bis 23 px. */ @media (max-width: 1023px) { .gl-abc { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; } .gl-abc > * { flex: 0 0 32px; } } /* Filter-Chips der Ausbildungstermine: auch in der Breite 44 px */ .nf-chip.ausb-b { min-width: var(--control-height); } /* Liste, die nur aus Links besteht (Downloads in Beiträgen): Zeile 44 px hoch */ .article-prose li > a:only-child { display: inline-block; padding-block: 11px; } /* Glossar-ABC klebt unter dem Kopf: js/glossar-abc.js misst dessen Höhe (--gl-oben, mit 8 px Luft). Vorher lag die Leiste mit festen 64 bzw. 50 px teilweise unter dem Kopf, die Buchstaben saßen am oberen Rand. Der Buchstabe des Abschnitts, in dem man liest, ist markiert. */ .gl-abc { top: var(--gl-oben, 64px); align-items: center; } @media (max-width: 760px) { .gl-abc { top: var(--gl-oben, 50px); } } .gl-item { scroll-margin-top: var(--gl-sprung, 140px); } .gl-abc a[aria-current] { background: var(--sc, var(--primary)); color: var(--on-accent); }