/* custom.css — Manuelle Anpassungen für diese Website. Diese Datei wird bei einem erneuten Export/Deploy NIE überschrieben. Alle Handkorrekturen NUR hier eintragen (nicht in style.css oder den Seiten-HTMLs). Allgemeingültige Verbesserungen zusätzlich in die Section-Bibliothek zurückspielen, damit künftige Projekte sie automatisch bekommen. */ /* ============================================================ Cookie-Consent-Banner (eingebunden über custom.js) ============================================================ */ .cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--c-white); border-top: 1px solid var(--c-border); box-shadow: 0 -8px 30px color-mix(in srgb, var(--c-black) 12%, transparent); padding: var(--sp-4) 0; animation: cookiebar-in .3s ease; } @keyframes cookiebar-in { from { transform: translateY(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .cookiebar { animation: none; } } .cookiebar__inner { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .cookiebar__text { flex: 1; min-width: 240px; margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--t-secondary); } .cookiebar__text a { color: var(--c-primary-dark); text-decoration: underline; } .cookiebar__actions { display: flex; gap: var(--sp-3); flex-shrink: 0; } .cookiebar__btn { white-space: nowrap; } .cookiebar__btn--ghost { background: transparent; border: 1px solid var(--c-border); color: var(--t-primary); } .cookiebar__btn--ghost:hover { background: var(--c-neutral-light); } @media (max-width: 767px) { .cookiebar__actions { width: 100%; } .cookiebar__btn { flex: 1; } } /* ============================================================ Rechtsseiten (Impressum / Datenschutz) ============================================================ */ .legal-sec { padding: var(--sp-8) 0; background: var(--c-white); } .legal { max-width: 800px; margin: 0 auto; } .legal h1 { margin-bottom: var(--sp-6); } .legal h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); font-size: 1.3rem; } .legal h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); font-size: 1.05rem; } .legal p { color: var(--t-secondary); line-height: var(--lh-body, 1.7); margin-bottom: var(--sp-4); } .legal a { color: var(--c-primary-dark); text-decoration: underline; } .legal ul { margin: 0 0 var(--sp-4) var(--sp-5); color: var(--t-secondary); line-height: var(--lh-body, 1.7); } .legal li { margin-bottom: var(--sp-2); } .legal strong { color: var(--t-primary); } .legal__note { margin-bottom: var(--sp-6); padding: var(--sp-4); border-left: 3px solid var(--c-primary); background: var(--c-neutral-light); border-radius: 0 8px 8px 0; font-size: 0.9rem; } /* ============================================================ Scroll-Reveal — dezentes Fade-in + Hochgleiten beim Reinscrollen. Greift NUR unter html.dsjs (setzt ein Inline-Schnipsel im vor dem ersten Paint). Ohne JS bleibt alles sichtbar. ============================================================ */ html.dsjs [data-animate], html.dsjs .reveal{ opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow, .55s) var(--ease-standard, ease), transform var(--motion-slow, .55s) var(--ease-standard, ease); } html.dsjs [data-animate].visible, html.dsjs .reveal.visible{ opacity: 1; transform: none; } html.dsjs [data-animate="stagger-children"]{ opacity: 1; transform: none; transition: none; } html.dsjs [data-animate="stagger-children"] > *{ opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow, .5s) var(--ease-standard, ease), transform var(--motion-slow, .5s) var(--ease-standard, ease); transition-delay: var(--stagger-delay, 0ms); } html.dsjs [data-animate="stagger-children"].visible > *{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ html.dsjs [data-animate], html.dsjs .reveal, html.dsjs [data-animate="stagger-children"] > *{ opacity: 1; transform: none; transition: none; } } /* ============================================================ Audit-Fixes (2026-08): Sticky-Header + Breakpoint-Normalisierung ============================================================ */ /* Header-Section komplett sticky — Topbar + Menü bleiben beim Scrollen oben. .sec-028 ist direktes Kind von . z-index unter Offcanvas (500)/Cookiebar (1000). */ .sec-028 { position: sticky; top: 0; z-index: 100; } /* Breakpoints normalisieren (Vorgabe: nur 1024/767; 960/700 sind Altlasten in style.css). Regeln hier zusätzlich am korrekten Breakpoint — alte engere Regeln werden Teilmenge. */ @media (max-width: 1024px) { [data-m-ausrichtung] { --m-ausr-media: 0; } } @media (max-width: 767px) { [data-m-ueberlappung] { margin-top: 0; } } /* kw-rich v1 */ /* ── 1. Felder, die Blockelemente erlauben (div, li, td) ─────────────────── */ [data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{ display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem); font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35; color:var(--t-primary, inherit); letter-spacing:-.005em; } [data-kw] p{ margin:0 0 var(--sp-3, .75rem); } [data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; } /* Das Design-System setzt global ul,ol{list-style:none} — hier wieder aktivieren */ [data-kw] ul{ list-style:disc outside; } [data-kw] ol{ list-style:decimal outside; } [data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); } [data-kw] li:last-child{ margin-bottom:0; } [data-kw] li::marker{ color:var(--c-primary, currentColor); } [data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; } /* ── 2. Felder, die KEINE Blockelemente erlauben (p, span) ───────────────── */ /* span-Elemente sind überall zulässig; display:block macht daraus Zeilen. */ .kw-h{ display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem); font-weight:var(--fw-semibold, 600); line-height:1.35; color:var(--t-primary, inherit); } .kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); } .kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); } .kw-li{ display:block; position:relative; padding-left:1.35em; margin:0 0 var(--sp-2, .5rem); } /* Punkt aus ::before statt list-style — unabhängig von Browser und Reset */ .kw-li::before{ content:"\2022"; position:absolute; left:.35em; top:0; color:var(--c-primary, currentColor); font-weight:700; line-height:inherit; } .kw-list-num{ counter-reset:kwli; } .kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; } .kw-list-num > .kw-li::before{ content:counter(kwli) "."; left:0; font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums; } /* ── 3. Im Editor: leere Punkte müssen anklickbar bleiben ────────────────── */ /* Ein leeres span mit display:block wäre 0 Pixel hoch — der Schreibzeiger wäre unsichtbar. Beim Speichern werden leere Punkte ohnehin entfernt. */ .kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; } /* ── 4. Ränder: erstes Element oben, letztes unten ohne Abstand ──────────── */ [data-kw] > *:first-child{ margin-top:0; } [data-kw] > *:last-child{ margin-bottom:0; } [data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); } /* /kw-rich */ /* kw-kontrast v1 */ /* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text). Erzeugt von barrierefreiheit.py — gleicher Farbton, nur dunkler. Nach jedem 'pull' erneut ausführen. */ .preheadline, .cta-link, .cta-link--light, .qt__head, .sm__sub, .tx__sub, .sm__stat > span, .hero__title span, .btn-cta:hover, .btn-cta--ghost:hover, .cta-link:hover{ color:#955800 !important; } /* Orange als Textfarbe, mindestens 4,58:1 */ /* /kw-kontrast */ /* ============================================================ Bildplatz befüllt → Platzhalter-Beschriftung ausblenden. Fläche (data-kw-bg) und Beschriftung (.beschriftung) sind getrennte Elemente. Bewusst NUR auf .beschriftung gemünzt: Eine Bildfläche mit Textkind ist nicht automatisch eine mit Platzhalter — bei projektgast sitzen echte Überschriften und Fließtexte in befüllten Flächen. ============================================================ */ [data-kw-bg][style*="url("] > .beschriftung { display: none; } /* ============================================================ Eingesetzte Icons: Größe erzwingen. Der Editor ergänzt beim Einsetzen eines SVG KEINE width/height. Die mitgelieferten Icons tragen width="20" height="20"; ein hochgeladenes SVG bringt oft nur einen viewBox mit — und füllt dann seinen Träger randlos aus (gemessen: 42×42 statt 20×20 in einem 42er-Kasten, das Icon sprengt die abgerundete Fläche). Erste Regel: nie größer als der Träger. Zweite Regel: SVGs ohne eigenes Maß bekommen die Hausgröße 20px. Bewusst OHNE !important und mit niedriger Spezifität — Abschnitte, die ihre Icon-Größe selbst setzen, behalten Vorrang. ============================================================ */ [data-kw-icon="1"] svg { max-width: 100%; max-height: 100%; } [data-kw-icon="1"] svg:not([width]) { width: 20px; height: 20px; }