/* ═══ 00-nav ═══ */ /* ═══ 00 · NAV — Styles ═══ EBENE "glass": backdrop-filter auf der Pille. Ohne die Ebene ist die Pille fast deckend weiß — backdrop-filter über bewegtem Inhalt (Aurora) muss den Hintergrund jeden Frame neu weichzeichnen, das wird gemessen. */ .sk-nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; padding: 0 24px; display: flex; justify-content: center; pointer-events: none; } /* Die Fläche der Pille steht als Variablen (--nav-*): Seit 08.10.2026 gibt es zwei Träger — das ::before und, auf Unterseiten mit Abschnitts-Nav, die Form aus Dock + Zunge (.sk-nav-form, sections/00-nav/abschnitte). Hell, Glas und Dunkel setzen nur die Variablen, eine Quelle statt einer Handkopie. */ .sk-nav-inner { --nav-flaeche: rgba(255, 255, 255, 0.94); --nav-rand: rgba(9, 9, 11, 0.08); --nav-schatten: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 18px 44px -16px rgba(9, 9, 11, 0.22), 0 3px 10px -2px rgba(109, 40, 217, 0.10); --nav-filter: none; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; padding: 9px 10px 9px 20px; border-radius: var(--radius-pill); pointer-events: auto; transition: padding 400ms cubic-bezier(0.22, 1, 0.36, 1); } .sk-nav-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--nav-flaeche); border: 1px solid var(--nav-rand); box-shadow: var(--nav-schatten); backdrop-filter: var(--nav-filter); -webkit-backdrop-filter: var(--nav-filter); } html[data-layers~="glass"] .sk-nav-inner { --nav-flaeche: rgba(255, 255, 255, 0.85); --nav-filter: blur(24px) saturate(180%); } .sk-nav-logo { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-heading); } /* Echtes Logo aus /logo (Verlaufskachel mit Funkel-Stern). Rundung 8px = rx 12/40 des SVG, damit der Schatten der Kachelform folgt. alt="" — der Link trägt Text + aria-label. */ .sk-nav-logo-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; box-shadow: 0 4px 10px -2px rgba(109, 40, 217, 0.4); } .sk-nav-sep { width: 1px; height: 18px; background: rgba(9, 9, 11, 0.12); } .sk-nav-links { position: relative; display: flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 500; } .sk-nav-links a { position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 9px 15px; border-radius: var(--radius-pill); color: var(--color-body); white-space: nowrap; transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } /* Hover-Fläche macht der gleitende Griff (.sk-nav-pill), nicht der Link selbst */ @media (hover: hover) and (pointer: fine) { .sk-nav-links a:hover { color: var(--color-heading); } } .sk-nav-links a.is-active { color: var(--color-brand-darker); } .sk-nav-cta { padding: 10px 18px; min-height: 38px; } /* Dunkles Glas, solange die Preise das Thema auf dunkel schalten (08-pricing). Zweiter Träger `.sk-wisch-dunkel`: Seit dem Nav-Wisch (18.09.2026) läuft die Kante durch das Dock, und der dunkle Nav-KLON im Wisch-Overlay braucht dieselben Werte, während die Seite noch hell ist — eine Quelle statt einer Handkopie (wie in global.css und pricing.css). Die frühere Klasse `nav-dark` (Dock kippt als Ganzes) ist damit weg. Steht NACH der glass-Regel: gleiche Spezifität, spätere gewinnt. */ :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-inner { --nav-flaeche: rgba(20, 19, 28, 0.78); --nav-rand: rgba(255, 255, 255, 0.08); --nav-schatten: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 14px 40px -14px rgba(0, 0, 0, 0.65), 0 3px 10px -2px rgba(124, 58, 237, 0.18); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-logo, :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a { color: rgba(255, 255, 255, 0.92); } @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a:hover { color: #fff; } } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sep { background: rgba(255, 255, 255, 0.14); } /* Touch-Ziel: Das Logo ist nur 26 px hoch. 44 px Mindesthöhe, die negative Margin gibt die 18 px wieder ab — die Pille bleibt gleich hoch. */ @media (max-width: 900px), (pointer: coarse) { .sk-nav-logo { min-height: 44px; margin-block: -9px; } } .sk-nav-links a:focus-visible, .sk-nav-drop-btn:focus-visible, .sk-nav-burger:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; } /* Aktueller Bereich: eigene Seite (page), übergeordnete Seite einer Referenz/eines Beitrags (true), Leistungen-Knopf auf einer Leistungsseite (.is-current, nav.html.mjs). Die Pille setzt nav.js. */ .sk-nav-links a[aria-current], .sk-nav-drop-btn.is-current { color: var(--color-brand-darker); } /* Touch-Ziele Tablet/Touch: Links und Leistungen-Knopf 44 px hoch (sonst 40), der negative Rand gibt die 4 px wieder ab — Leiste, Griff und Dock behalten ihre Höhe, nur die Trefferfläche wächst. */ @media (max-width: 1024px), (pointer: coarse) { .sk-nav-links > a, .sk-nav-drop-btn { min-height: 44px; margin-block: -2px; } /* nur die Leiste, nicht das Panel */ .sk-nav-cta { min-height: 44px; margin-block: -1px; } /* 42 → 44 */ } /* ─── Leistungen-Menü (erscheint erst, wenn es mindestens eine Leistungsseite in PAGES gibt) ─── Knopf sieht aus wie die Links daneben. Panel = gleiche Glaskarte wie die Pille, nur eckiger. */ .sk-nav-drop { position: relative; } .sk-nav-drop-btn { font: inherit; color: var(--color-body); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px 9px 15px; border-radius: var(--radius-pill); transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .sk-nav-drop-btn { position: relative; z-index: 1; } @media (hover: hover) and (pointer: fine) { .sk-nav-drop-btn:hover { color: var(--color-heading); } } .sk-nav-drop.is-open .sk-nav-drop-btn { color: var(--color-heading); } @media (hover: hover) and (pointer: fine) { .sk-nav-links .sk-nav-drop-panel a:hover { background: var(--color-brand-subtle); } } .sk-nav-drop-btn svg { width: 10px; height: 10px; opacity: .6; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease); } .sk-nav-drop.is-open .sk-nav-drop-btn svg { transform: rotate(180deg); } .sk-nav-drop-panel { position: absolute; top: calc(100% + 18px); left: 50%; translate: -50% 0; width: 320px; display: grid; gap: 2px; padding: 8px; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(9, 9, 11, 0.08); border-radius: 18px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 24px 48px -18px rgba(9, 9, 11, 0.24), 0 4px 12px -2px rgba(109, 40, 217, 0.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fast); } .sk-nav-drop-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* Hover-Brücke über die Lücke */ .sk-nav-drop.is-open .sk-nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { .sk-nav-drop:hover .sk-nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .sk-nav-drop:hover .sk-nav-drop-btn svg { transform: rotate(180deg); } } .sk-nav-links .sk-nav-drop-panel a { display: grid; gap: 1px; justify-items: start; padding: 11px 14px; min-height: 44px; border-radius: 12px; color: var(--color-body); } .sk-nav-drop-panel strong { font-size: 16px; font-weight: 600; color: var(--color-heading); } .sk-nav-drop-panel span { font-size: 16px; font-weight: 400; color: var(--color-text-muted); } @media (hover: hover) and (pointer: fine) { .sk-nav-links .sk-nav-drop-panel a:hover strong { color: var(--color-brand-main); } } .sk-nav-links .sk-nav-drop-panel a[aria-current="page"] strong { color: var(--color-brand-main); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn { color: rgba(255, 255, 255, 0.92); } @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn:hover { color: #fff; } } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop.is-open .sk-nav-drop-btn, :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a[aria-current], :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn.is-current, :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a.is-active { color: #fff; } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel { background: rgba(20, 19, 28, 0.94); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 24px 48px -18px rgba(0, 0, 0, 0.7), 0 4px 12px -2px rgba(124, 58, 237, 0.18); } @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links .sk-nav-drop-panel a:hover { background: rgba(255, 255, 255, 0.06); } } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel strong { color: #fff; } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel span { color: rgba(255, 255, 255, 0.6); } @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links .sk-nav-drop-panel a:hover strong { color: #C4B5FD; } } /* ─── Gleit-Dock (aus v4, 16.09.2026 zurückgeholt) ─── */ /* Einklappen beim Scrollen: html.sk-nav-kompakt setzt nav.js, sobald der Seitenanfang aus dem Bild ist */ .sk-nav-logo-text { display: inline-block; max-width: 120px; margin-left: 10px; overflow: hidden; white-space: nowrap; transition: max-width 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms var(--ease), margin-left 420ms cubic-bezier(0.22, 1, 0.36, 1); } html.sk-nav-kompakt .sk-nav-logo-text { max-width: 0; margin-left: 0; opacity: 0; } html.sk-nav-kompakt .sk-nav-inner { padding: 7px 8px 7px 14px; } /* NAV-11: Im kompakten Dock ist das Logo nur 26 px breit → 44 px Trefferfläche, der negative Rand gibt sie wieder ab */ @media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (pointer: coarse) { html.sk-nav-kompakt .sk-nav-logo { padding-inline: 9px; margin-inline: -9px; } } /* Gleitender Griff: ruht auf dem aktiven Link, folgt beim Hover dem Zeiger */ .sk-nav-pill { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; width: 0; border-radius: var(--radius-pill); background: var(--color-brand-subtle); border: 1px solid rgba(109, 40, 217, 0.18); opacity: 0; pointer-events: none; transition: transform 480ms cubic-bezier(0.34, 1.3, 0.3, 1), width 480ms cubic-bezier(0.34, 1.3, 0.3, 1), opacity 220ms var(--ease); } .sk-nav-pill.is-on { opacity: 1; } /* Zählwerk »03 / 07«: Ziffernstreifen rollt zur Nummer des Abschnitts (--d setzt nav.js) */ .sk-nav-count { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.05em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .sk-nav-count-cur { display: inline-flex; color: var(--color-brand-main); } .sk-nav-count-clip { display: block; height: 1em; width: 1ch; overflow: hidden; line-height: 1; } .sk-nav-count-cur > span:first-child { line-height: 1; } .sk-nav-count-strip { display: block; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94); } .sk-nav-count-strip span { display: block; height: 1em; line-height: 1; text-align: center; } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-pill { background: rgba(139, 92, 246, 0.24); border-color: rgba(167, 139, 250, 0.35); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-count { color: rgba(255, 255, 255, 0.55); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-count-cur { color: #A78BFA; } /* Seiten ohne nummerierte Abschnitte (Rechtstexte, Referenz-Detailseiten, News): Zählwerk UND sein Trenner fallen weg. `data-num` setzt build.mjs beim Zusammenbauen — die Regel greift deshalb ohne JavaScript und ohne Flackern. Seit 18.09.2026 rendert nav.html.mjs das Zählwerk auf jeder Seite, ohne diese Regel bliebe dort ein Trennstrich ohne Inhalt stehen. */ html:not(:has([data-num])) :is(.sk-nav-count, .sk-nav-sep--count) { display: none; } /* Zählwerk braucht Platz: unter 1025 px nur Logo, Links und Knopf */ @media (max-width: 1024px) { .sk-nav-count, .sk-nav-sep--count { display: none; } } /* NAV-1: Tablet hoch / Handy quer 768–939 px — das Dock war 892 px breit und lief über beide Ränder. Nur die Bildmarke (wie nach dem Scrollen), engere Links, Knopf ohne Pfeil. */ @media (min-width: 768px) and (max-width: 939px) { .sk-nav { padding: 0 12px; } .sk-nav-inner, html.sk-nav-kompakt .sk-nav-inner { gap: 10px; padding: 9px 8px 9px 16px; } .sk-nav-logo-text { max-width: 0; margin-left: 0; opacity: 0; } .sk-nav-logo { padding-inline: 9px; margin-inline: -9px; flex-shrink: 0; } .sk-nav-links > a { padding-inline: 11px; } .sk-nav-drop-btn { padding-inline: 11px 9px; } .sk-nav-cta { padding-inline: 14px; flex-shrink: 0; } .sk-nav-cta svg { display: none; } } @media (prefers-reduced-motion: reduce) { .sk-nav-count-strip, .sk-nav-logo-text, .sk-nav-inner { transition: none; } .sk-nav-pill { transition: opacity 220ms var(--ease); } } /* ─── Mobiles Menü (bis 767 px) ─── Seit 26.10.2026 (Plan docs/superpowers/plans/2026-10-26-handy-nav.md, Wunsch Tunahan): Dock ohne „Projekt anfragen“, 48 px hoch, Menü-Knopf mit Wort in einer zart lila Pille (Sprache des Griffs). Das Menü ist eine Vollbild-Fläche unter dem Dock statt einer Karte über dunklem Schleier: Vorhang von oben, Einträge laufen je 80 ms versetzt ein (--i aus nav.html.mjs), Schließen fährt den Vorhang zurück (.is-zu, nav.js setzt hidden danach). Vorher: _LOESCHEN/vor-handy-nav-2026-10/. */ .sk-nav-burger { display: none; } .sk-nav-sheet[hidden] { display: none; } /* display-Regeln überstimmen sonst [hidden] */ @media (max-width: 767px) { .sk-nav { top: 12px; padding: 0 12px; } /* Dock über dem Vollbild-Menü (beide liegen im Stapel von .sk-nav, z 50) */ .sk-nav-inner { z-index: 2; } /* 4 + 40 + 4 = 48 px. Logo und „Menü“ rücken zusammen (Tunahan 26.10.2026): 2 px Lücke + 10 px Innenabstand des Knopfs = 12 px Luft zwischen Schriftzug bzw. Bildmarke und Wort, oben wie im kompakten Dock */ .sk-nav-inner, html.sk-nav-kompakt .sk-nav-inner { gap: 2px; padding: 4px 4px 4px 14px; } .sk-nav-links, .sk-nav-sep, .sk-nav-cta { display: none; } .sk-nav-logo { margin-right: auto; margin-block: -2px; flex-shrink: 0; } /* 44 px Trefferfläche im 40-px-Inhalt */ html.sk-nav-kompakt .sk-nav-logo { padding-inline: 9px; margin-left: -9px; } /* NAV-11: 44 px Trefferfläche */ /* … rechts gibt der Rand sie wieder ab, sonst stünde „Menü“ 9 px weiter weg (nicht auf Zungen-Seiten: dort schiebt auto den Knopf nach rechts) */ html.sk-nav-kompakt .sk-nav:not(.sk-nav--ab) .sk-nav-logo { margin-right: -9px; } /* Beim offenen Menü steht die Wortmarke wieder da, auch im kompakten Dock — oben links „webtastic.io“ wie ein Seitenkopf */ html.sk-nav-sheet-offen .sk-nav-logo-text { max-width: 120px; margin-left: 10px; opacity: 1; } /* Menü-Knopf: nur Wort + Striche, ohne Fläche und Rand (Tunahan 26.10.2026, die lila Pille war ihm zu viel). Optisch 40 px, das ::after gibt 44 px Trefferfläche; rechts 10 px Innenabstand → die Striche stehen 14 px vor der Dock-Kante, so weit wie das Logo links. Links 10 px: zusammen mit der 2-px-Lücke 12 px zum Logo. Offen werden die Striche zum ✕, das Wort bleibt — die Breite springt nicht. */ .sk-nav-burger { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--color-heading); /* schwarz wie das Logo, nicht lila (Tunahan 26.10.2026) */ background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease); } .sk-nav-burger::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; } .sk-nav-burger:active { transform: scale(0.96); opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .sk-nav-burger:hover { opacity: 0.7; } } .sk-nav-burger-icon { display: inline-grid; gap: 4px; width: 16px; } .sk-nav-burger-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); } .sk-nav-burger[aria-expanded="true"] .sk-nav-burger-icon span:first-child { transform: translateY(3px) rotate(45deg); } .sk-nav-burger[aria-expanded="true"] .sk-nav-burger-icon span:last-child { transform: translateY(-3px) rotate(-45deg); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-burger { color: #fff; } /* Vollbild-Menü: Seitengrund mit stillem Schein unten (statisch), folgt dem Thema */ .sk-nav-sheet { position: fixed; inset: 0; z-index: 1; pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; padding: 92px 24px calc(24px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(120% 50% at 100% 100%, rgba(139, 92, 246, 0.13), transparent 65%), radial-gradient(100% 42% at 0% 100%, rgba(59, 130, 246, 0.09), transparent 62%), var(--color-bg-card); animation: sk-nav-sheet-auf 480ms cubic-bezier(0.22, 1, 0.36, 1); } .sk-nav-sheet.is-zu { animation: sk-nav-sheet-zu 320ms cubic-bezier(0.64, 0, 0.78, 0) forwards; pointer-events: none; } /* NAV-13: Seite hinter dem Menü gesperrt, auch ohne Lenis (Rechtsseiten) */ html.sk-nav-sheet-offen { overflow: clip; } /* Feste Wisch-Overlays (z 51) liegen über der Nav — mitten im Hell→Dunkel-Wechsel stünde sonst der dunkle Nav-Klon über dem Menü */ html:has(#sk-nav-sheet:not([hidden])) :is(.sk-wisch, .sk-wischu) { visibility: hidden; } /* Die Liste reicht 14 px in den Rand: Text fluchtet mit 24 px, die Fläche des aktuellen Eintrags hat Luft */ .sk-nav-sheet nav { display: flex; flex-direction: column; min-height: 100%; margin-inline: -14px; transition: opacity 160ms var(--ease); } .sk-nav-sheet.is-zu nav { opacity: 0; } .sk-nav-sheet :is(nav > a, .sk-nav-sheet-label, .sk-nav-sheet-gruppe > a) { animation: sk-nav-eintrag 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(120ms + var(--i, 0) * 80ms); } .sk-nav-sheet nav > a:not(.btn) { display: flex; align-items: center; min-height: 52px; padding: 4px 14px; border-radius: 16px; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--color-heading); } /* Gruppe „Leistungen“: Label wie .mono-label, darunter eingerückt an einer Haarlinie */ .sk-nav-sheet-label { margin-top: 10px; padding: 6px 14px; font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .sk-nav-sheet-gruppe { display: grid; margin: 2px 0 12px 14px; border-left: 1px solid var(--color-border); } .sk-nav-sheet-gruppe > a { display: flex; align-items: center; min-height: 44px; padding: 0 14px 0 18px; border-radius: 0 14px 14px 0; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-body); } .sk-nav-sheet-luft { flex: 1 0 28px; } /* schiebt den Knopf nach unten in Daumenreichweite, mindestens 28 px Abstand */ .sk-nav-sheet .btn { margin-inline: 14px; min-height: 52px; } .sk-nav-sheet a:not(.btn)[aria-current] { background: var(--color-brand-subtle); color: var(--color-brand-darker); } .sk-nav-sheet a:not(.btn):focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: -2px; } @media (hover: hover) and (pointer: fine) { .sk-nav-sheet a:not(.btn):hover { background: var(--color-brand-subtle); color: var(--color-brand-darker); } } /* GLOBAL-4 (19.10.2026): eigene Tipp-Rückmeldung statt Browser-Kasten — der gehaltene Eintrag zeigt den Maus-Hover-Ton */ .sk-nav-sheet a { -webkit-tap-highlight-color: transparent; } @media (hover: none) { .sk-nav-sheet a:not(.btn):active { background: var(--color-brand-subtle); color: var(--color-brand-darker); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn):active { background: rgba(255, 255, 255, 0.08); color: #fff; } } /* NAV-16: im Dunkeln deckend, Grund = Seitengrund (#0B0A0F wie global.css unter html.theme-dark) */ :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet { background: radial-gradient(120% 50% at 100% 100%, rgba(139, 92, 246, 0.22), transparent 65%), radial-gradient(100% 42% at 0% 100%, rgba(59, 130, 246, 0.14), transparent 62%), #0B0A0F; } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet nav > a:not(.btn) { color: #fff; } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-gruppe > a { color: rgba(255, 255, 255, 0.78); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn)[aria-current] { background: rgba(139, 92, 246, 0.24); color: #fff; } @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn):hover { background: rgba(255, 255, 255, 0.08); color: #fff; } } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-label { color: rgba(255, 255, 255, 0.6); } :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-gruppe { border-color: rgba(255, 255, 255, 0.12); } } /* Kurze Handys (iPhone SE, 548 px): etwas kleinere Seiten-Einträge — der Knopf lugt dann unten an und zeigt, dass das Menü weitergeht */ @media (max-width: 767px) and (max-height: 600px) { .sk-nav-sheet { padding-top: 84px; } .sk-nav-sheet nav > a:not(.btn) { min-height: 48px; font-size: 27px; } .sk-nav-sheet-label { margin-top: 6px; } } /* NAV-18: Handy quer — zwei Spalten, alle Einträge ohne Scrollen (Seiten links mit dem Knopf, Leistungen rechts) */ @media (max-width: 767px) and (max-height: 520px) { .sk-nav-sheet { padding-top: 76px; padding-bottom: 16px; } .sk-nav-sheet nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; min-height: 0; } .sk-nav-sheet nav > a:not(.btn) { grid-column: 1; min-height: 44px; font-size: 24px; } .sk-nav-sheet-label, .sk-nav-sheet-gruppe { grid-column: 2; } .sk-nav-sheet-label { grid-row: 1; margin-top: 0; } .sk-nav-sheet-gruppe { grid-row: 2 / span 5; align-self: start; margin-bottom: 0; } .sk-nav-sheet-luft { display: none; } .sk-nav-sheet .btn { grid-column: 1; margin-top: 12px; } } /* NAV-10: Auf flachen Fenstern (Handy quer) gleitet die Nav beim Runterscrollen weg, beim Hochscrollen sofort zurück (nav.js setzt html.sk-nav-weg; bei offenem Menü nie) */ @media (max-height: 520px) { .sk-nav { transition: transform 280ms var(--ease); } html.sk-nav-weg .sk-nav { transform: translateY(-160px); } } @keyframes sk-nav-sheet-auf { from { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } to { clip-path: inset(0 0 0 0 round 0); } } @keyframes sk-nav-sheet-zu { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } } @keyframes sk-nav-eintrag { from { opacity: 0; transform: translateY(18px); } } @media (prefers-reduced-motion: reduce) { .sk-nav-sheet, .sk-nav-sheet :is(nav > a, .sk-nav-sheet-label, .sk-nav-sheet-gruppe > a) { animation: none; } .sk-nav-sheet nav, .sk-nav-burger, .sk-nav-burger-icon span, .sk-nav { transition: none; } } /* ═══ 30-seitenkopf ═══ */ /* ═══ 30 · SEITENKOPF (Unterseiten) — Styles ═══ Linksbündiger Kopf mit großem h1. Hintergrund = die Aurora aus 01-hero (gleiche Verläufe, halbe Auflösung, blur + invert). Seit 24.09.2026 bewegt (Ebene drift, nur transform) und stärker sichtbar; läuft nach unten und zur Textseite hin aus. Ebenen: aurora (html[data-layers~="aurora"]) · rise (global.css). */ .sk-b-kopf { position: relative; isolation: isolate; overflow: hidden; min-height: 64svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 172px 0 56px; /* 172 = Platz für die schwebende Nav (wie 50-seitenkopf-referenzen) */ background: var(--color-bg-light); } .sk-b-kopf--klein { min-height: 48svh; } /* ── Aurora ── Verläufe als Token aus global.css (--aurora-weiss, --aurora-verlauf = die Werte aus 01-hero). Das ::after (difference) gleitet seit 24.09.2026 wie im Hero. Maske: zwei Verläufe geschnitten — nach links (Textseite) und nach unten aus. */ .sk-b-kopf-aurora { display: none; position: absolute; left: -10px; top: -10px; width: calc(50% + 10px); height: calc(50% + 10px); transform: scale(2); transform-origin: 0 0; overflow: hidden; pointer-events: none; z-index: 0; background-image: var(--aurora-weiss), var(--aurora-verlauf); background-size: 300% 200%; background-position: 50% 50%, 50% 50%; filter: blur(5px) invert(1); opacity: 1; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 38%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 38%, transparent 96%); mask-composite: intersect; } html[data-layers~="aurora"] .sk-b-kopf-aurora { display: block; } .sk-b-kopf-aurora::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 300%; background-image: var(--aurora-weiss), var(--aurora-verlauf); background-size: calc(200% / 3) 100%; mix-blend-mode: difference; } /* Seit 24.09.2026 bewegt (Manuel, Loom „Animationen“ 5:55–6:30: „könnte man den nicht auch bewegen lassen und ein bisschen mehr zeigen … er ist schon sehr verschwunden“). Nur Transform → läuft auf dem Compositor. */ html[data-layers~="drift"] .sk-b-kopf-aurora::after { will-change: transform; animation: sk-aurora-drift 40s linear infinite; } /* Außer Sicht angehalten (KOPF-4, 19.10.2026): seitenkopf.js setzt .sk-b-kopf--weg, solange der Kopf nicht im Bild ist — sonst lief die 40-s-Schleife auf jeder Unterseite dauernd weiter (60 Bilder/s am Handy). Der html-Präfix ist Pflicht: Die Drift-Regel darüber hat 0,2,2, ihre animation-Kurzform setzt play-state sonst wieder auf running. Bedingung wie HERO-8: Desktop mit Maus bleibt unberührt. */ @media (max-width: 1279px), (hover: none) and (pointer: coarse) { html[data-layers~="drift"] .sk-b-kopf--weg .sk-b-kopf-aurora::after { animation-play-state: paused; } } /* ── Inhalt ── */ .sk-b-kopf > .container { position: relative; z-index: 1; width: 100%; } .sk-b-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); } .sk-b-kopf-text { max-width: 1040px; } .sk-b-kopf-titelblock .eyebrow { margin-bottom: 28px; } .sk-b-kopf-titel { font-size: clamp(48px, 5.6vw, 104px); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; } .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(44px, 4.8vw, 88px); } .sk-b-kopf-sub { max-width: 32em; /* ≤ 70 Zeichen je Zeile (60ch ergaben in Manrope bis 83) */ margin-top: 32px; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; letter-spacing: -0.01em; font-weight: 500; color: var(--color-body); text-wrap: pretty; } .sk-b-kopf-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } /* ── Sprungmarken „Auf dieser Seite“ (Prop sprungmarken) ── Bewusst leiser als die Buttons darüber: Haarlinie trennt Handlung (Buttons) von Orientierung, Pillen nur mit Rand und normaler Textfarbe. Jede Pille ist 44 px hoch (Touch-Ziel). */ .sk-b-kopf-sprung { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: fit-content; max-width: 100%; /* Haarlinie so lang wie die Marken, nicht bis ins Leere */ margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--color-border); } .sk-b-kopf-sprung-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .sk-b-kopf-sprung-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--color-body); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-pill); transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-b-kopf-sprung-link:hover { color: var(--color-brand-main); border-color: var(--color-brand-lighter); background: var(--color-brand-subtle); } } .sk-b-kopf-sprung-link:active { background: var(--color-brand-subtle); } .sk-b-kopf-sprung-link:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; } /* ── Mit Beiwerk (Illustration): ab 1024 px zweispaltig ── Bis 19.10.2026 erst ab 1025 px (KOPF-8): iPad quer und iPad Pro hoch sind genau 1024 px breit und standen einspaltig, die Illustration unter dem Falz. */ .sk-b-kopf-beiwerk { min-width: 0; } .sk-b-kopf-beiwerk > * { max-width: 100%; } @media (min-width: 1024px) { .sk-b-kopf--beiwerk .sk-b-kopf-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: end; } .sk-b-kopf--beiwerk .sk-b-kopf-titel { font-size: clamp(44px, 4.6vw, 88px); } } /* ── Schmaler ── */ @media (max-width: 1023px) { /* unter dem Text: Illustration nicht auf volle Breite aufblasen */ .sk-b-kopf-beiwerk { margin-top: 48px; max-width: 560px; } } /* Langes Wort im h1 (KOPF-1, 19.10.2026): „Sachverständigenbüro“ lief am Handy über den Rand und wurde abgeschnitten. Jedes Wort steht in einer eigenen Hülle (global.css .word) — getrennt wird also nur ein Wort, das allein breiter als die Zeile ist (ab 14 Zeichen). overflow-wrap: anywhere ist Pflicht, mit break-word bleibt Safari 18 über dem Rand. */ @media (max-width: 1279px) { .sk-b-kopf-titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: anywhere; } /* ohne Obergrenze blieb die Wort-Hülle 1–2 px breiter als die Zeile (Überstand gemessen 1,6–1,8 px) */ .sk-b-kopf-titel .word, .sk-b-kopf-titel .word > span { max-width: 100%; } } /* Tablet hoch (KOPF-5, 19.10.2026): Die h1 sprang vom Handy (bis 56 px) auf 48/44 px zurück — 5.6vw greift erst ab 965 px. Bis 1023 px, weil der Beiwerk-Kopf ab 1024 px zweispaltig ist und dort die Desktop-Größe (4.6vw) braucht. */ @media (min-width: 768px) and (max-width: 1023px) { .sk-b-kopf-titel { font-size: clamp(54px, 5.6vw, 104px); } .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(50px, 4.8vw, 88px); } } /* Tablet hoch (KOPF-6): 64svh/48svh ließen auf hohen iPads 240–450 px leere Aurora über der Überzeile. 42svh statt 0: so liegt auf dem iPad Pro der nächste Abschnitt beim Laden noch nicht in der Spy-Zone der Abschnitts-Nav (die Zunge bliebe sonst offen). Köpfe mit Beiwerk (ChatGPT Ads, Detailseiten) bleiben wie sie sind: unter 1024 px trägt ihr Inhalt die Höhe ohnehin, ab 1024 px stehen sie zweispaltig (KOPF-8) mit der dort abgenommenen Höhe. */ @media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) { .sk-b-kopf:not(.sk-b-kopf--beiwerk) { min-height: 42svh; } } @media (max-width: 767px) { .sk-b-kopf { min-height: 0; padding: 130px 0 32px; } .sk-b-kopf-titelblock .eyebrow { margin-bottom: 20px; } .sk-b-kopf-titel, .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(40px, 11.5vw, 56px); letter-spacing: -0.04em; } .sk-b-kopf-sub { margin-top: 20px; font-size: 17px; } .sk-b-kopf-buttons { margin-top: 28px; } .sk-b-kopf-sprung { margin-top: 32px; padding-top: 20px; gap: 12px; } .sk-b-kopf-sprung-link { padding: 0 16px; } /* Mobil liegt der Text über der ganzen Breite: Aurora nur oben rechts, früher ausgeblendet */ .sk-b-kopf-aurora { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%), linear-gradient(to bottom, #000 10%, transparent 62%); mask-image: linear-gradient(to right, transparent 0%, #000 60%), linear-gradient(to bottom, #000 10%, transparent 62%); } } /* Handy quer (KOPF-7, 19.10.2026): Fenster höchstens 520 px hoch — kompakter Kopf, damit Untertitel und Knöpfe im ersten Bild stehen (vorher 70–101 px Luft unter der Nav, nur Überzeile und h1 sichtbar). Bis 1024 px Breite: Große iPhones quer (852/932 px) bekamen sonst die Tablet-Werte (172 px Polster, 64svh). Bleibt am Dateiende, damit die h1 auch gegen die Tablet-Stufen gewinnt. Polster oben = 28 px Luft unter der Nav: das Dock (ab 768 px) endet bei 71 px, die Burger-Leiste (bis 767 px) bei 60 px. */ @media (max-width: 1024px) and (max-height: 520px) { .sk-b-kopf { min-height: 0; padding: 99px 0 32px; } .sk-b-kopf-titelblock .eyebrow { margin-bottom: 16px; } .sk-b-kopf-titel, .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(36px, 5.6vw, 48px); } .sk-b-kopf-sub { margin-top: 16px; } .sk-b-kopf-buttons { margin-top: 24px; } .sk-b-kopf-sprung { margin-top: 28px; padding-top: 18px; } } @media (max-width: 767px) and (max-height: 520px) { .sk-b-kopf { padding-top: 88px; } } /* ═══ 60-ref-liste ═══ */ /* ═══ 60 · REF-LISTE — Kachel-Übersicht der Referenzen ═══ Drei Raster: "oben" = hervorgehobene Projekte (2 Spalten, groß), "gross" = 2 Spalten, "kompakt" = 3 Spalten. Große Projekte zeigen zusätzlich die Mobilansicht. Bewertungen (.sk-st) sind Teil der Karte: Manche Seiten sind schlicht, die Kunden aber sehr zufrieden — das soll man sehen, ohne das Projekt zu öffnen. */ .sk-rl { padding-block: 40px 96px; } .sk-rl-text { max-width: 62ch; color: var(--color-text-muted); margin-bottom: 32px; } .sk-rl-gruppe + .sk-rl-gruppe { margin-top: 88px; } .sk-rl-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; margin-bottom: 32px; border-bottom: 1px solid var(--color-border); } .sk-rl-kopf h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; } .sk-rl-anzahl { flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .sk-rl-grid { display: grid; gap: 28px; align-items: stretch; } .sk-rl-grid--kompakt { grid-template-columns: repeat(3, 1fr); } .sk-rl-grid--gross, .sk-rl-grid--oben { grid-template-columns: repeat(2, 1fr); gap: 36px; } /* ── Karte ── */ .sk-rl-karte { display: flex; flex-direction: column; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; color: inherit; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-rl-karte:hover { border-color: var(--color-brand-main); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .sk-rl-karte:hover .sk-rl-link svg { transform: translateX(3px); } } .sk-rl-karte:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; } /* Browser-Rahmen wie im Portfolio der Startseite */ .sk-rl-rahmen { position: relative; margin: 12px 12px 0; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-bg-accent); } .sk-rl-chrome { display: flex; align-items: center; gap: 12px; height: 32px; padding: 8px 12px; background: var(--color-bg-accent); border-bottom: 1px solid var(--color-border); } .sk-rl-punkte { display: inline-flex; gap: 5px; flex-shrink: 0; } .sk-rl-punkte i { display: block; width: 9px; height: 9px; border-radius: 50%; } .sk-rl-punkte i:nth-child(1) { background: #FCA5A5; } .sk-rl-punkte i:nth-child(2) { background: #FCD34D; } .sk-rl-punkte i:nth-child(3) { background: #86EFAC; } .sk-rl-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } /* height:auto ist Pflicht: das height-Attribut im ist ein Präsentations-Hinweis und schlägt sonst aspect-ratio — die Kachel wurde 900 px hoch und das Bild gezoomt. */ .sk-rl-shot { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; } /* Mobilansicht als kleines Gerät in der Ecke */ .sk-rl-mobil { position: absolute; right: 5%; bottom: -16%; z-index: 2; /* ragt unten aus dem Rahmen: wirkt wie hochgehalten */ width: 19%; } /* ── iPhone-Rahmen (Pro-Modell, Dynamic Island) — Markup aus iphone.mjs ── Proportionen nach iPhone 15 Pro (Gehäuse 71,6 × 146,6 mm, Screen 393 × 852 pt). Alles in cqw = Prozent der Gerätebreite, damit das Gerät in jeder Größe stimmt. */ .sk-iphone { display: block; container-type: inline-size; } /* nur Maß-Container, keine Optik */ .sk-iphone-gehaeuse { position: relative; display: block; padding: 1.1cqw; /* Titan-Rand */ border-radius: 17cqw; background: linear-gradient(145deg, #5b5b60 0%, #2a2a2d 22%, #1c1c1e 50%, #3a3a3e 78%, #6b6b70 100%); box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.18), 0 2cqw 5cqw -1cqw rgba(9, 9, 11, 0.45), 0 12cqw 24cqw -8cqw rgba(9, 9, 11, 0.35); } /* Tasten: links Action + Lautstärke (eine Leiste, Kopien per box-shadow), rechts Seitentaste */ .sk-iphone-gehaeuse::before, .sk-iphone-gehaeuse::after { content: ''; position: absolute; width: 1cqw; border-radius: 0.5cqw; background: linear-gradient(90deg, #2a2a2d, #57575c); } .sk-iphone-gehaeuse::before { left: -0.8cqw; top: 22cqw; height: 6.5cqw; box-shadow: 0 11cqw 0 0 #3a3a3e, 0 25cqw 0 0 #3a3a3e; } .sk-iphone-gehaeuse::after { right: -0.8cqw; top: 38cqw; height: 20cqw; } .sk-iphone-screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 393 / 852; border: 3.2cqw solid #000; /* schwarzer Displayrand */ border-radius: 15.9cqw; overflow: hidden; background: #fff; } .sk-iphone-status { flex: 0 0 auto; position: relative; height: 12.6cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5cqw 0 9.5cqw; color: #000; background: #fff; } .sk-iphone-zeit { font-family: -apple-system, 'SF Pro Text', var(--font-main); font-size: 4.1cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1; } .sk-iphone-island { position: absolute; left: 50%; top: 2.5cqw; translate: -50% 0; width: 30cqw; height: 8.8cqw; border-radius: 99cqw; background: #000; } /* angedeutete Kamera rechts in der Island */ .sk-iphone-island::after { content: ''; position: absolute; right: 2.6cqw; top: 50%; translate: 0 -50%; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a55 0%, #0c0f18 60%); } .sk-iphone-icons { display: inline-flex; align-items: center; gap: 1.2cqw; } .sk-iphone-icons svg { height: 2.9cqw; width: auto; fill: currentColor; } .sk-iphone-icons svg:last-child { height: 3.1cqw; } .sk-iphone-screen img { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: cover; object-position: top center; } .sk-rl-meta { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 0; } .sk-rl-tag { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sk-rl-typ { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.06em; color: var(--color-brand-main); background: var(--color-brand-subtle); padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0; } /* RLD-8 (19.10.2026): bis 1279 px Plakette oben, Branche darunter — Muster aus dem Laufband (ref-laufband.css). Neben einer langen Branche („SACHVERSTÄNDIGENBÜRO“) ragte die Plakette über den Innenrand und wurde an der Kartenkante angeschnitten. */ @media (max-width: 1279px) { .sk-rl-tag { flex-direction: column; align-items: flex-start; gap: 8px; } .sk-rl-typ { order: -1; } } .sk-rl-meta h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } .sk-rl-meta p { font-size: 16px; line-height: 1.55; color: var(--color-text-muted); } .sk-rl-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 16px 18px 20px; font-size: 16px; font-weight: 600; color: var(--color-brand-main); } .sk-rl-link svg { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease); } .sk-rl-grid--gross .sk-rl-meta, .sk-rl-grid--oben .sk-rl-meta { padding: 22px 22px 0; } .sk-rl-grid--gross .sk-rl-link, .sk-rl-grid--oben .sk-rl-link { padding: 18px 22px 24px; } .sk-rl-grid--gross .sk-rl-meta h3 { font-size: 25px; } .sk-rl-grid--oben .sk-rl-meta h3 { font-size: 30px; letter-spacing: -0.03em; } .sk-rl-grid--gross .sk-rl-meta p, .sk-rl-grid--oben .sk-rl-meta p { font-size: 16px; } /* ── Ausgewählte Projekte ── Ohne eigene Hintergrundfläche (lila Bühne auf Wunsch Tunahan 16.09. entfernt) — hervorgehoben werden die Karten nur noch durch den umlaufenden Lichtrand. isolation hält den Lichthof (z-index -1) über dem Seitenhintergrund und unter den Karten. */ .sk-rl-gruppe--oben { position: relative; isolation: isolate; } .sk-rl-gruppe--oben .sk-rl-kopf h2 { display: inline-flex; align-items: center; gap: 12px; } .sk-rl-gruppe--oben .sk-rl-kopf h2::before { content: ''; width: 10px; height: 10px; flex-shrink: 0; background: var(--grad-brand); border-radius: 3px; } /* Umlaufender Lichtrand (Wunsch Tunahan 16.09.): ein heller Punkt wandert als conic-gradient um die Karte, dazu ein weichgezeichneter Lichthof dahinter. Beides hängt an der Hülle .sk-rl-glanz, NICHT an der Karte: Die Hülle trägt data-rise (dessen translate macht sie zum Stapelkontext) und hat selbst keinen Hintergrund — so liegt ::after (z-index -1) sicher HINTER der weißen Karte und ::before als Ring darüber. Der Winkel ist per @property registriert, nur so lässt er sich animieren. Läuft nur, solange die Bühne im Bild ist (ref-liste.js). */ @property --sk-rl-winkel { syntax: ''; inherits: false; initial-value: 0deg; } .sk-rl-glanz { position: relative; display: flex; border-radius: var(--radius-lg); transition: transform var(--duration) var(--ease); } /* RLD-7 (19.10.2026): Ohne min-width: 0 meldet die Hülle die ganze Adresszeile (nowrap) als Mindestbreite — die längste Domain hielt jede Spalte bei 377 px: am Handy rechts abgeschnitten, auf dem iPad ungleich breite Spalten. Jetzt kürzt die Adresse mit „…“ wie auf allen übrigen Karten. Ab 1280 px sind die Spalten ohnehin breiter. */ @media (max-width: 1279px) { .sk-rl-glanz { min-width: 0; } } .sk-rl-glanz > .sk-rl-karte { flex: 1; border: 0; } .sk-rl-glanz > .sk-rl-karte, .sk-rl-glanz > .sk-rl-karte:hover { transform: none; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 28px 56px -28px rgba(109, 40, 217, 0.32), 0 10px 24px -14px rgba(37, 99, 235, 0.18); } .sk-rl-glanz::before, .sk-rl-glanz::after { content: ''; position: absolute; pointer-events: none; animation: sk-rl-umlauf 7s linear infinite paused; } /* Ring: Fläche minus Innenfläche per Maske */ .sk-rl-glanz::before { inset: 0; z-index: 4; padding: 2px; border-radius: inherit; background: conic-gradient(from var(--sk-rl-winkel), transparent 0deg 250deg, rgba(139, 92, 246, 0.4) 290deg, #8B5CF6 322deg, #60A5FA 343deg, #FFFFFF 352deg, transparent 360deg), linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(109, 40, 217, 0.35) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Lichthof hinter der Karte */ .sk-rl-glanz::after { inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px); background: conic-gradient(from var(--sk-rl-winkel), transparent 0deg 275deg, rgba(139, 92, 246, 0.55) 322deg, rgba(96, 165, 250, 0.6) 346deg, transparent 360deg); filter: blur(14px); } /* versetzt starten, damit nicht alle vier Lichter synchron laufen */ .sk-rl-glanz:nth-child(2)::before, .sk-rl-glanz:nth-child(2)::after { animation-delay: -1.75s; } .sk-rl-glanz:nth-child(3)::before, .sk-rl-glanz:nth-child(3)::after { animation-delay: -3.5s; } .sk-rl-glanz:nth-child(4)::before, .sk-rl-glanz:nth-child(4)::after { animation-delay: -5.25s; } .sk-rl-gruppe--oben.is-sichtbar .sk-rl-glanz::before, .sk-rl-gruppe--oben.is-sichtbar .sk-rl-glanz::after { animation-play-state: running; } /* RLD-11 (19.10.2026): Unter 1280 px beobachtet ref-liste.js jede Karte einzeln — dort ist meist nur eine im Bild, und es läuft nur deren Licht. Ab 1280 px bleibt es bei der Gruppe (Regel darüber). */ .sk-rl-glanz.is-sichtbar::before, .sk-rl-glanz.is-sichtbar::after { animation-play-state: running; } @keyframes sk-rl-umlauf { to { --sk-rl-winkel: 360deg; } } @media (hover: hover) and (pointer: fine) { .sk-rl-glanz:hover { transform: translateY(-3px); } .sk-rl-glanz:hover > .sk-rl-karte { box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset, 0 36px 64px -26px rgba(109, 40, 217, 0.42), 0 14px 28px -14px rgba(37, 99, 235, 0.24); } /* Kein Tempowechsel beim Hover: Eine neue animation-duration rechnet die Position aus der schon vergangenen Zeit neu — das Licht sprang an eine andere Stelle. */ } .sk-rl-glanz:focus-within { outline: 2px solid var(--color-brand-main); outline-offset: 4px; } .sk-rl-glanz > .sk-rl-karte:focus-visible { outline: none; } @media (prefers-reduced-motion: reduce) { .sk-rl-glanz::before { animation: none; } .sk-rl-glanz::after { display: none; } } .sk-rl-grid--oben .sk-rl-rahmen { border-color: rgba(109, 40, 217, 0.12); } /* ── Bewertung (Karte + Detailseite) ── */ .sk-st { margin: 16px 12px 0; padding: 16px 18px 18px; background: var(--color-brand-subtle); border-radius: 10px; } .sk-st-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sk-st-sterne { display: inline-flex; gap: 2px; } .sk-st-sterne svg { width: 16px; height: 16px; fill: #F59E0B; } .sk-st-sterne--tp .sk-st-tp { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #00B67A; border-radius: 2px; } .sk-st-sterne--tp svg { width: 13px; height: 13px; fill: #fff; } .sk-st-quelle { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; color: var(--color-text-muted); } /* NZ-16 (19.10.2026): Fehlt neben den Sternen der Platz, rutscht die Quelle als Ganzes in die nächste Zeile, statt am Bindestrich zu brechen („Trustpilot-“ / „Bewertung“). Gilt auch für die Bewertung der Detailseiten. Desktop unverändert. */ @media (max-width: 1279px) { .sk-st-kopf { flex-wrap: wrap; row-gap: 4px; } .sk-st-quelle { white-space: nowrap; } } .sk-st blockquote p { font-size: 16px; line-height: 1.55; color: var(--color-heading); } .sk-st blockquote p::before { content: '„'; } .sk-st blockquote p::after { content: '“'; } .sk-st figcaption { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--color-brand-darker); } /* Auf Karten gekürzt, damit alle Karten einer Reihe ähnlich hoch bleiben */ .sk-st--karte blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .sk-rl-grid--oben .sk-st { margin: 20px 12px 0; padding: 20px 22px 22px; } .sk-rl-grid--oben .sk-st blockquote p { font-size: 17px; -webkit-line-clamp: 5; } @media (max-width: 1024px) { .sk-rl-grid--kompakt { grid-template-columns: repeat(2, 1fr); } } /* NZ-36 (20.10.2026): /referenzen/ auch 1025–1279 px (iPad quer) zweispaltig — drei Spalten ließen „Onepager“ mit einer einzelnen Karte enden (16 Karten). Nur die Seite /referenzen/ (.sk-rl-abschnitt); die Referenz-Auswahl auf /leistungen/webseite/ behält drei Spalten. Ab 1280 px unverändert. */ @media (min-width: 1025px) and (max-width: 1279px) { .sk-rl-abschnitt .sk-rl-grid--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .sk-rl { padding-block: 24px 64px; } .sk-rl-gruppe + .sk-rl-gruppe { margin-top: 56px; } .sk-rl-grid--kompakt, .sk-rl-grid--gross, .sk-rl-grid--oben { grid-template-columns: 1fr; gap: 20px; } .sk-rl-mobil { width: 24%; bottom: -20%; } .sk-rl-grid--oben .sk-rl-meta h3 { font-size: 25px; } /* NZ-30 (19.10.2026): Kompakt-Karten am Handy kürzer — ohne Adresszeile, Bild 2 : 1, Zitat in zwei Zeilen. Kurztext und Zitat bleiben sichtbar; das ganze Zitat steht auf der Detailseite. */ .sk-rl-grid--kompakt .sk-rl-chrome { display: none; } .sk-rl-grid--kompakt .sk-rl-shot { aspect-ratio: 2 / 1; } .sk-rl-grid--kompakt .sk-st--karte blockquote p { -webkit-line-clamp: 2; line-clamp: 2; } } /* RLD-10 (19.10.2026): Handy quer (600–767 px) zweispaltig wie auf dem iPad mini. Eine 710 px breite Karte war höher als das Fenster, und die 920-px-Bilder wurden hochskaliert. Nur /referenzen/ (.sk-rl-abschnitt), die Fuge von 20 px bleibt. */ @media (min-width: 600px) and (max-width: 767px) { .sk-rl-abschnitt .sk-rl-grid--kompakt, .sk-rl-abschnitt .sk-rl-grid--gross, .sk-rl-abschnitt .sk-rl-grid--oben { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* RLD-9 (A) + NZ-36 (20.10.2026): Querkarte im zweispaltigen Raster von /referenzen/ (600–1279 px) — Bild links, Text rechts, über beide Spalten. Drei Fälle, alle nur auf /referenzen/ (.sk-rl-abschnitt): - S: die letzte Bewertungs-Karte bei ungerader Zahl (heute theuerkorn). Daneben stand eine Karte ohne Bewertung, gleich hoch gestreckt — 241–284 px Leere über „Zum Projekt“. - E: die einzige Karte einer Gruppe (heute Multipager onbau), sonst halb breit mit leerer Hälfte daneben. - L: die letzte Karte, wenn S eine ganze Reihe nimmt und danach eine ungerade Zahl folgt (heute tahan) — sonst endete das Raster mit einer halben Waise. Wird die Zahl der Bewertungs-Karten gerade, greifen S und L von selbst nicht mehr. :is() ist nachsichtig: Kennt ein Browser :has() nicht, fällt nur L weg. Ohne Spalten-Fuge in der Karte: Bild und Text halten ihre eigenen Ränder. */ @media (min-width: 600px) and (max-width: 1279px) { :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme), .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child, .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; } :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme), .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child, .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > .sk-rl-rahmen { grid-row: 1 / -1; align-self: start; margin-bottom: 12px; } :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme), .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child, .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > :not(.sk-rl-rahmen) { grid-column: 2; } :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme), .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child, .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > .sk-rl-link { align-self: end; } } /* ── Seite /referenzen/ im Stil der Unterseiten (17.09.2026) ── Jede Gruppe ist ein eigener .sk-b-Abschnitt mit Abschnitts-Kopf (global.css). Der Kopf trägt die Überschrift; die alte Gruppen-Zeile (.sk-rl-kopf) gibt es dort nicht mehr. Karten bleiben unverändert. */ .sk-rl-abschnitt .sk-section-head { margin-bottom: 56px; } /* Köpfe ohne Untertitel: Titel über beide Kopf-Spalten, sonst bricht „Onepager & Landingpages“ unnötig um */ .sk-rl-abschnitt .sk-section-head .sk-section-title { grid-column: 1 / -1; } @media (max-width: 767px) { .sk-rl-abschnitt .sk-section-head { margin-bottom: 36px; } } /* GLOBAL-8 (19.10.2026): „Sonderanforderungen“ ist in der Mindestgröße des Titels (32 px) breiter als 320 px und stand 10 px im Seitenrand. Bis 400 px darf der Titel trennen (lang="de"); die Grenzen halten kurze Wörter ganz. */ @media (max-width: 400px) { .sk-rl-abschnitt .sk-section-title { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4; } /* Ein getrenntes Wort füllt als inline-block die ganze Zeile — mit dem Polster der Wort-Hülle (0,04em, global.css) stand seine Box 1,3 px im Rand. Obergrenze wie im Seitenkopf (KOPF-1). */ .sk-rl-abschnitt .sk-section-title .word, .sk-rl-abschnitt .sk-section-title .word > span { max-width: 100%; } } /* NZ-34 (19.10.2026): Branchen-Label in Teilen (teileLabel, _bausteine/hilfen.mjs). Bis 1279 px bricht es nur zwischen den Teilen um; der Trenner „·“ beginnt dann die neue Zeile, statt am Ende der alten zu hängen. Ab 1280 px bleibt das Label wie gesetzt (Text Zeichen für Zeichen gleich). */ @media (max-width: 1279px) { .sk-rl-tag .mono-label { display: flex; flex-wrap: wrap; column-gap: .5em; } .sk-rl-tag .sk-trenner { display: none; } .sk-rl-tag .sk-teil ~ .sk-teil::before { content: '·'; margin-right: .5em; } } /* ═══ 61-ref-detail ═══ */ /* ═══ 61 · REF-DETAIL — eine Referenz im Detail ═══ Aufbau: Kopf zweispaltig (Name links, harte Daten rechts), darunter die beiden echten Ansichten des Projekts, dann der Text in einer Lesespalte. */ .sk-refd { padding: 8px 0 96px; } /* oben: der Seitenkopf (30) davor bringt Nav-Abstand und Luft mit */ /* Daten rechts im Seitenkopf (beiwerk) und Rückweg in der Überzeile */ .sk-b-kopf .sk-refd-daten { align-self: end; padding: 24px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.72); } .sk-refd-zurueck { color: inherit; text-decoration: none; border-radius: var(--radius-sm); } @media (hover: hover) and (pointer: fine) { .sk-refd-zurueck:hover { text-decoration: underline; text-underline-offset: 4px; } } .sk-refd-zurueck:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; } /* Touch (RLD-5/RLD-6, 19.10.2026): Der Rückweg war nur 102 × 25 px groß und sah aus wie jede Überzeile. ::after = unsichtbare Trefferfläche 44 px hoch, 8 px breiter (verschiebt nichts); ::before = Pfeil statt Strich, damit man den Link erkennt. Die zweite content-Zeile verbirgt den Pfeil vor Screenreadern. */ @media (pointer: coarse) { .sk-refd-zurueck { position: relative; } .sk-refd-zurueck::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); } .eyebrow:has(> .sk-refd-zurueck)::before { display: none; } .sk-refd-zurueck::before { content: '←'; content: '←' / ''; display: inline-block; margin-right: 10px; font-family: var(--font-main); } } .sk-refd-krumen { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } .sk-refd-krumen a { color: var(--color-text-muted); } @media (hover: hover) and (pointer: fine) { .sk-refd-krumen a:hover { color: var(--color-brand-main); } } .sk-refd-krumen [aria-current] { color: var(--color-heading); } .sk-refd-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; padding-bottom: 36px; border-bottom: 1px solid var(--color-border); } .sk-refd-kopf h1 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; } .sk-refd-kurz { margin: 16px 0 24px; max-width: 54ch; font-size: 18px; line-height: 1.55; color: var(--color-text-muted); } .sk-refd-live { gap: 10px; } .sk-refd-live svg { width: 14px; height: 14px; } .sk-refd-daten { display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 18px 36px; } .sk-refd-daten dt { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted-2); margin-bottom: 4px; } .sk-refd-daten dd { font-size: 16px; font-weight: 600; color: var(--color-heading); } /* ── Die zwei Ansichten ── */ .sk-refd-medien { position: relative; margin: 48px 0 80px; } .sk-refd-desktop { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-accent); box-shadow: 0 32px 64px -32px rgba(109, 40, 217, 0.22); } .sk-refd-chrome { display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: var(--color-bg-accent); border-bottom: 1px solid var(--color-border); } .sk-refd-chrome .sk-ampel { display: inline-flex; gap: 6px; } .sk-refd-chrome .sk-ampel i { display: block; width: 10px; height: 10px; border-radius: 50%; } .sk-refd-chrome .sk-ampel i:nth-child(1) { background: #FCA5A5; } .sk-refd-chrome .sk-ampel i:nth-child(2) { background: #FCD34D; } .sk-refd-chrome .sk-ampel i:nth-child(3) { background: #86EFAC; } .sk-refd-url { font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } /* height:auto — sonst gewinnt das height-Attribut des gegen aspect-ratio */ .sk-refd-desktop img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; } /* Das iPhone (iphone.mjs, Styles in ref-liste.css) steht rechts unten halb auf dem Rechner-Bild */ .sk-refd-mobil { position: absolute; right: -12px; bottom: -56px; width: 210px; margin: 0; } /* ── Text: Fließtext links, harte Fakten rechts ── Die Lesespalte bleibt schmal genug (max. ~62 Zeichen), der Umfang steht als Liste daneben und scrollt mit, solange Platz ist. */ .sk-refd-text { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px 64px; align-items: start; } .sk-refd-text > section:not(.sk-refd-umfang) { max-width: 62ch; } .sk-refd-umfang { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 104px; padding: 24px 26px 26px; background: var(--color-bg-accent); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .sk-refd-text h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; } .sk-refd-text p { font-size: 17px; line-height: 1.65; } .sk-refd-umfang ul { display: grid; gap: 10px; list-style: none; } .sk-refd-umfang li { position: relative; padding-left: 26px; line-height: 1.55; } .sk-refd-umfang li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--color-brand-main); } .sk-refd-umfang h2 { font-size: 17px; } .sk-refd-umfang li { font-size: 16px; } .sk-refd-seiten ul { display: grid; gap: 8px; list-style: none; } .sk-refd-seiten a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; } .sk-refd-seiten svg { width: 14px; height: 14px; } /* ── Bewertung direkt unter dem Kopf ── */ .sk-refd-bewertung { margin-top: 40px; max-width: 880px; } .sk-refd-bewertung .sk-st { margin: 0; padding: 30px 34px 32px; border-radius: var(--radius-lg); } .sk-refd-bewertung .sk-st-sterne svg { width: 20px; height: 20px; } .sk-refd-bewertung .sk-st-sterne--tp .sk-st-tp { width: 24px; height: 24px; } .sk-refd-bewertung .sk-st-sterne--tp svg { width: 17px; height: 17px; } .sk-refd-bewertung .sk-st blockquote p { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -0.01em; } .sk-refd-bewertung .sk-st figcaption { font-size: 16px; margin-top: 16px; } @media (max-width: 1024px) { .sk-refd-kopf { grid-template-columns: 1fr; gap: 32px; align-items: start; } .sk-refd-text { grid-template-columns: 1fr; gap: 36px; } .sk-refd-umfang { grid-column: 1; grid-row: auto; position: static; } } /* Datenkasten unter dem Text (KOPF-2, 19.10.2026): zwei gleich breite Spalten statt vier Auto-Spalten — in der höchstens 560 px breiten Karte liefen Werte bis 130 px über den Rand. Bei fünf Angaben läuft die Website (immer die letzte) über beide Spalten. Ab 1024 px gilt wieder das Desktop-Raster (Kopf zweispaltig). */ @media (max-width: 1023px) { .sk-refd-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-refd-daten > div:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Tablet (RLD-2, 19.10.2026): Website (immer die letzte Angabe) bei fünf Angaben auch 1024–1279 px über beide Spalten — in der halben Zeile brachen 5 Domains zweizeilig, theuerkorn ragte 20 px in die Fuge. */ @media (min-width: 768px) and (max-width: 1279px) { .sk-refd-daten > div:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 767px) { /* oben die 8 px wie an Tablet und Desktop (RLD-4): der Seitenkopf bringt schon 32 px mit, 116 px waren ein Rest von vor dem 17.09. */ .sk-refd { padding-bottom: 64px; } /* minmax(0, 1fr): Die Spalten wuchsen sonst auf das längste Wort (KOPF-2); Notnagel-Umbruch für überlange Werte. Ohne Silbentrennung (Fix 20.10.2026): Seit dem Steckbrief (≤ 599 px) passt jedes Wort in seine Spalte (≥ 36 px Rest) — hyphens: auto trennte nur noch ohne Not, Safari sogar die Domain („…theuerkorn.-“ / „de“). */ .sk-refd-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .sk-refd-daten dd { overflow-wrap: anywhere; } /* Lange Domains brachen in der 38 px hohen Leiste um (RLD-3): kürzen wie in Liste und Laufband */ .sk-refd-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Lange Bewertung (NZ-33): weniger Innenrand, 17 px statt 19 px — Zeilen mit ~34 statt ~26 Zeichen, Text vollständig. Zeilenhöhe bleibt 1.45 wie am Desktop (mit 1.5 wäre die längste Bewertung bei 360 px 733 statt 714 px hoch). */ .sk-refd-bewertung .sk-st { padding: 22px 20px 24px; } .sk-refd-bewertung .sk-st blockquote p { font-size: 17px; } .sk-refd-medien { margin: 28px 0 32px; } /* Handy-Ansicht des Projekts (NZ-38): 180 statt 96 px breit und mittig unter dem Rechner-Bild, 56 px hineinragend — bei 96 px (≈ 23 %) war die Mobilseite des Kunden nicht zu erkennen */ .sk-refd-mobil { position: relative; right: auto; bottom: auto; width: 180px; margin: -56px auto 0; } .sk-refd-text { margin-top: 48px; gap: 32px; } .sk-refd-kurz { font-size: 17px; } } /* Steckbrief (RLD-1 A, 19.10.2026): bis 599 px eine Spalte, der Begriff steht über dem Wert — zwei Spalten wären schmaler als „Sachverständigenbüro“. .sk-b-kopf davor, weil das Polster dort hängt. */ @media (max-width: 599px) { .sk-b-kopf .sk-refd-daten { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 22px; } } /* Handy quer (NZ-37): Rechner und Handy nebeneinander, beide in einem Bildschirm (vorher 483 px hoch bei 276 px Sicht) */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .sk-refd-medien { display: flex; justify-content: center; align-items: flex-end; gap: 16px; } .sk-refd-desktop { width: 380px; } .sk-refd-mobil { position: static; width: 110px; margin: 0; } /* Der schmale Rahmen gilt hier auch über 767 px (Handy quer bis 900): Adresse kürzen wie RLD-3, sonst bricht sie aus der 38-px-Leiste (Fix 20.10.2026) */ .sk-refd-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ═══ 62-ref-laufband ═══ */ /* ═══ 62 · REF-LAUFBAND — „Weitere Projekte“ als Endlos-Band ═══ Abstand als margin-right an der Karte, NICHT als gap: mit gap wäre eine Hälfte um einen halben Abstand kürzer als −50 % und das Band ruckt bei jeder Runde (wie 06-portfolio). Läuft beim Hover weiter (Wunsch Tunahan 16.09.), hält nur bei Tastatur-Fokus an (WCAG 2.2.2). Läuft nur, solange es im Bild ist (ref-laufband.js). */ /* Graue Fläche statt Trennlinie auf Weiß: Davor steht die weiße Projektseite (61-ref-detail) — Flächen im Wechsel (Tunahan 06.10.2026). Bis dahin: border-top + margin-top 96px auf Weiß. */ .sk-lb { padding-block: 96px 120px; background: var(--color-bg-accent); margin-top: 96px; } /* Kopf = .sk-section-head aus global.css; hier nur der kleinere Abstand zum Band und der Link rechts unten */ .sk-lb-kopf { margin-bottom: 48px; } .sk-lb-kopf .sk-section-sub { justify-self: end; } @media (max-width: 900px) { .sk-lb-kopf { margin-bottom: 32px; } .sk-lb-kopf .sk-section-sub { justify-self: start; } } .sk-lb-alle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex-shrink: 0; font-size: 16px; font-weight: 600; color: var(--color-brand-main); } .sk-lb-alle svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-lb-alle:hover svg { transform: translateX(3px); } } /* KLEIN-1/REF-10: Hover nur mit Maus */ .sk-lb-band { overflow: hidden; padding-block: 8px 28px; /* Luft für Anheben + Schatten beim Hover */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%); } .sk-lb-spur { display: flex; width: max-content; } .sk-lb-haelfte { display: flex; } html[data-layers~="marquee"] .sk-lb-spur { animation: sk-lb-lauf var(--sk-lb-dauer, 150s) linear infinite paused; } html[data-layers~="marquee"] .sk-lb.is-sichtbar .sk-lb-spur { animation-play-state: running; } html[data-layers~="marquee"] .sk-lb-band:has(:focus-visible) .sk-lb-spur { animation-play-state: paused; } @keyframes sk-lb-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .sk-lb-karte { flex: 0 0 auto; width: 340px; margin-right: 24px; display: flex; flex-direction: column; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; color: inherit; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-lb-karte:hover { border-color: var(--color-brand-main); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } } .sk-lb-karte:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; } .sk-lb-rahmen { display: block; margin: 10px 10px 0; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; background: var(--color-bg-accent); } .sk-lb-chrome { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--color-border); } .sk-lb-punkte { display: inline-flex; gap: 4px; flex-shrink: 0; } .sk-lb-punkte i { display: block; width: 8px; height: 8px; border-radius: 50%; } .sk-lb-punkte i:nth-child(1) { background: #FCA5A5; } .sk-lb-punkte i:nth-child(2) { background: #FCD34D; } .sk-lb-punkte i:nth-child(3) { background: #86EFAC; } .sk-lb-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } /* height:auto — sonst schlägt das height-Attribut des das Seitenverhältnis */ .sk-lb-rahmen img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; } .sk-lb-meta { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; } /* Seit der CI-Regel „nie kleiner als 16 px" (18.09.2026) passt die Branche nicht mehr neben den Typ — sie wurde nach drei Buchstaben abgeschnitten („ÄS…"). Jetzt: Typ oben, Branche darunter, höchstens zwei Zeilen. */ .sk-lb-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .sk-lb-typ { order: -1; } .sk-lb-tag .mono-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35; } .sk-lb-typ { flex-shrink: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.02em; color: var(--color-brand-main); background: var(--color-brand-subtle); padding: 2px 7px; border-radius: var(--radius-sm); } .sk-lb-name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-heading); } .sk-lb-stimme { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } .sk-lb-stimme .sk-st-sterne svg { width: 13px; height: 13px; } .sk-lb-stimme .sk-st-sterne--tp .sk-st-tp { width: 15px; height: 15px; } .sk-lb-stimme .sk-st-sterne--tp svg { width: 11px; height: 11px; } /* Weniger Bewegung oder Ebene "marquee" aus: kein Lauf, stattdessen selbst wischen/scrollen */ @media (prefers-reduced-motion: reduce) { .sk-lb-band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } html[data-layers~="marquee"] .sk-lb-spur { animation: none; } .sk-lb-haelfte[aria-hidden="true"] { display: none; } } @media (max-width: 767px) { .sk-lb { padding-block: 64px 80px; margin-top: 64px; } .sk-lb-karte { width: 272px; margin-right: 16px; } .sk-lb-band { -webkit-mask-image: none; mask-image: none; } } /* NZ-34 (19.10.2026): Branchen-Label in Teilen (teileLabel, _bausteine/hilfen.mjs). Bis 1279 px bricht es nur zwischen den Teilen um; der Trenner „·“ beginnt die neue Zeile, statt am Ende der alten zu hängen. Mit display: flex greift das -webkit-line-clamp von oben nicht mehr — max-height hält zwei Zeilen (overflow: hidden steht schon oben). Ab 1280 px bleibt das Label wie gesetzt (Text Zeichen für Zeichen gleich). */ @media (max-width: 1279px) { .sk-lb-tag .mono-label { display: flex; flex-wrap: wrap; column-gap: .5em; max-height: 2lh; } .sk-lb-tag .sk-trenner { display: none; } .sk-lb-tag .sk-teil ~ .sk-teil::before { content: '·'; margin-right: .5em; } } /* Keine doppelte Lücke vor dem Band (NZ-35, 19.10.2026): Seit das Band eine eigene graue Fläche hat, addierte sich der Außenabstand zum Fußpolster der Projektseite (96 + 96 bzw. 64 + 64 px Weiß). Steht nach dem Block bis 767 px, sonst gewinnt dessen margin-top. Ab 1280 px bleibt die Lücke (Auftrag „Desktop pixelgleich“). */ @media (max-width: 1279px) { .sk-lb { margin-top: 0; } } /* KLEIN-2 (20.10.2026, Empfehlung A): Auf Touch eine Wisch-Reihe statt Endlos-Band — dieselbe Mechanik wie die Referenzen der Startseite am Handy und die Fassung für weniger Bewegung oben. Ein Finger konnte das Band weder anhalten noch wischen (WCAG 2.2.2). Die erste Karte steht bündig unter dem Titel (Innenkante von .container) und rastet dort ein, die doppelte Hälfte fällt weg. Desktop und Touch-Laptops mit Maus behalten das Endlos-Band (Wunsch 16.09.). ref-laufband.js bleibt. */ @media (hover: none) and (pointer: coarse) { .sk-lb-band { --rand: max(48px, calc((100% - var(--max-width)) / 2 + 48px)); /* = Innenkante von .container */ overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-inline: var(--rand); scroll-padding-inline: var(--rand); } .sk-lb-band::-webkit-scrollbar { display: none; } html[data-layers~="marquee"] .sk-lb-spur { animation: none; } .sk-lb-haelfte[aria-hidden="true"] { display: none; } .sk-lb-karte { scroll-snap-align: start; } } @media (hover: none) and (pointer: coarse) and (max-width: 1024px) { .sk-lb-band { --rand: 32px; } } @media (hover: none) and (pointer: coarse) and (max-width: 767px) { .sk-lb-band { --rand: 20px; } } /* ═══ 99-footer ═══ */ /* ═══ 99 · FOOTER — Styles (Abschluss im Ton der Seite, Link-Spalten, Lauftext-Band) ═══ Form 1:1 wie v4. Ebenen: marquee = Lauftext-Bewegung · nocv = Offscreen-Pause AUS. Anders als v4: Abstand im Band als margin statt gap (sonst Ruck pro Runde, s. 02-trust), Offscreen-Pause über content-visibility statt offscreen.js, Hover nur mit Maus, sichtbarer Tastatur-Fokus, Links mobil mit 44-px-Klickfläche, Logo-Punkt mit Abstand (in v4 schluckte inline-flex das Leerzeichen → Punkt klebte am „W“). Kein JavaScript. Runde 2b (16.09.2026): vier statt drei Link-Spalten (neu „Leistungen“, Markup aus footer.html.mjs) — Marke 1fr / Spalten 2fr, unter 1280 px Marke über den Spalten. Preis hinter dem Paketnamen gedämpft und nur als Ganzes umbrechend. Untere Zeile heller (vorher 3,8:1, jetzt ≈ 7:1). */ /* Der Footer folgt seit 20.09.2026 dem Thema der SEITE, statt immer dunkel zu sein. Grund (Tunahan): Nur sieben Seiten wischen am Ende ins Dunkle. Die übrigen 28 — darunter die Startseite und alle 23 Referenz-Detailseiten — enden hell und stießen hart an einen schwarzen Footer. Es gibt bewusst KEINE Liste von Seiten: `html.theme-dark` weiß bereits, ob die Seite dunkel ist, und `.sk-wisch-dunkel` gilt für die Klone im Wisch-Overlay. Dadurch wischt der Footer beim Übergang mit. Ohne JavaScript bleibt alles hell — erstmals ohne Bruch. Die vier Ton-Variablen unten sind die einzige Stelle, an der sich hell und dunkel unterscheiden; alles Weitere in dieser Datei benutzt sie. */ .sk-footer { --sk-footer-bg: var(--color-bg-accent); --sk-footer-text: var(--color-body); --sk-footer-leise: var(--color-text-muted); --sk-footer-linie: var(--color-border); --sk-footer-band: rgba(9, 9, 11, 0.05); background: var(--sk-footer-bg); color: var(--color-heading); padding: 80px 0 0; /* v4: kein 120er-Raster — unten schließt das Band ab */ border-top: 1px solid var(--sk-footer-linie); content-visibility: auto; contain-intrinsic-size: auto 494px; /* Inhalt ohne Padding ≥1280 (19.09.2026 neu gemessen) — weitere Breiten unten */ transition: background-color var(--duration-fast) var(--ease); } /* Dunkel: auf den Wisch-Seiten (html.theme-dark) und in den Klonen des Wisch-Overlays. #09090B ist der Wert aus v4 — kein neuer Farbton, nur an einer Stelle statt in zwölf. */ :is(html.theme-dark, .sk-wisch-dunkel) .sk-footer { --sk-footer-bg: #09090B; --sk-footer-text: rgba(255, 255, 255, 0.6); --sk-footer-leise: rgba(255, 255, 255, 0.5); --sk-footer-linie: rgba(255, 255, 255, 0.08); --sk-footer-band: rgba(255, 255, 255, 0.06); color: var(--color-off-white); border-top-color: transparent; } /* NZ-49 (19.10.2026): Bis 900 px (Handy, Tablet hoch) bleibt im Dunkeln die Haarlinie — dort folgten auf die Formular-Karte 155–203 px Schwarz ohne Kante, der Footer las sich wie ein Nachklang des Kontakts. Dieselbe Linie wie über den Kennzahlen. Am Desktop bleibt der nahtlose Übergang (gewollt). */ @media (max-width: 900px) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-footer { border-top-color: var(--sk-footer-linie); } } html[data-layers~="nocv"] .sk-footer { content-visibility: visible; } /* Bildmarke + Wortmarke nach ci.md „Logo“ (19.09.2026, vorher der weiße Punkt aus v4 — der Footer war die letzte Stelle mit dem alten Zeichen). 32-px-Kachel, Rundung 9,6 px = rx 12/40 des SVG. Kein Schatten: Die Nav legt ihn als Umgebung unter die Kachel, auf #09090B wäre er nicht zu sehen. Abstand 12 px > ¼ Kachel. */ .sk-footer-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-heading); } /* Kachelmitte auf die Mitte der Spalten-Labels rechts (Label-Zeile ≈ 22 px, Kachel 32 px) */ .sk-footer-logo { margin-top: -5px; } .sk-footer-logo-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9.6px; } .sk-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; padding-bottom: 60px; } .sk-footer-brand p { color: var(--sk-footer-text); font-size: 16px; line-height: 1.55; margin: 20px 0 28px; max-width: 36ch; } /* Raster statt flex: drei gleich hohe Kennzahlen auf einer Grundlinie, Labels einzeilig */ .sk-footer-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; border-top: 1px solid var(--sk-footer-linie); padding-top: 20px; } .sk-footer-stats div { display: flex; flex-direction: column; } .sk-footer-stats strong { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-heading); font-variant-numeric: tabular-nums; } .sk-footer-stats span { font-family: var(--font-mono); font-size: 16px; color: var(--sk-footer-leise); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } /* Sperrung wie .eyebrow/.mono-label seit 16 px */ /* ── Link-Spalten ── */ .sk-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .sk-footer-cols .mono-label { color: var(--sk-footer-leise); margin-bottom: 16px; display: block; } /* Zeilenabstand als padding am Link statt gap an der Liste: gleiche Optik wie v4 (Zeile + 10 px), aber die Lücke gehört zur Klickfläche. */ .sk-footer-cols ul { list-style: none; display: flex; flex-direction: column; } .sk-footer-cols li { display: flex; } /* Zeilenhöhe = 17 px × 1,55: In v4 bestimmte die Body-Schrift des
  • die Zeile, nicht die 15-px-Linkschrift. */ .sk-footer-cols ul a { padding-block: 5px; line-height: calc(var(--font-size-body) * var(--line-height-body)); color: var(--sk-footer-text); font-size: 16px; transition: color var(--duration-fast) var(--ease); } .sk-footer-cols ul { margin-block: -5px; } /* Padding am ersten/letzten Link zurücknehmen → Label-Abstand und Spaltenhöhe wie v4 */ /* Preis hinter dem Paketnamen: gedämpft (≈ 6:1 auf #09090B), bricht nur als Ganzes um (  im Markup) */ .sk-footer-preis { color: var(--sk-footer-leise); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--duration-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-footer-cols ul a:hover, .sk-footer-cols ul a:hover .sk-footer-preis { color: var(--color-heading); } } /* Fokus: --color-brand-lighter stimmt in beiden Tönen. Die Schriftfarbe muss dagegen mitdrehen — --color-off-white ist IMMER hell und wäre im hellen Footer weiß auf Weiß (20.09.2026). */ .sk-footer a:focus-visible { outline: 2px solid var(--color-brand-lighter); outline-offset: 3px; border-radius: 4px; color: var(--color-heading); } .sk-footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--sk-footer-linie); padding: 24px 0; font-family: var(--font-mono); font-size: 16px; color: var(--sk-footer-text); } /* ── Großes Lauftext-Band, läuft endlos nach links ── */ .sk-footer-marquee { overflow: hidden; border-top: 1px solid var(--sk-footer-linie); padding: 24px 0; } .sk-footer-track { display: flex; width: max-content; font-size: 96px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--sk-footer-band); } /* Abstand als margin an JEDEM Wort, NICHT als gap: Mit gap wäre die halbe Spur um einen halben Abstand kürzer als −50 % → sichtbarer Ruck pro Runde. */ .sk-footer-track span { flex: 0 0 auto; margin-right: 32px; } html[data-layers~="marquee"] .sk-footer-track { animation: sk-footer-lauf 40s linear infinite; } @keyframes sk-footer-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ── Breiten: contain-intrinsic-size je Bereich gemessen (Inhalt ohne Padding, Runde 2b mit vier Spalten, scratchpad sta/fuss-mass.mjs). Der Footer ist das letzte Element — ein Fehlwert verschiebt nur die Scrollleiste, keine Anker. ≥1280: 494 · 901–1279: 743 (Touch 772) · 481–900: 1004 · ≤480: 1029. Neu gemessen am 19.09.2026 (Logo-Kachel, einzeilige Kennzahlen; die alten Werte stammten noch aus der Zeit vor der 16-px-Regel). ── */ /* Unter 1280 px reicht die Markenspalte nicht mehr für die Kennzahlen-Zeile → Marke über den vier Spalten */ @media (max-width: 1279px) { .sk-footer { contain-intrinsic-size: auto 743px; } .sk-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; } } @media (pointer: coarse) and (min-width: 901px) and (max-width: 1279px) { .sk-footer { contain-intrinsic-size: auto 772px; } } @media (max-width: 900px) { .sk-footer { contain-intrinsic-size: auto 1004px; } /* FOOTER-1 (19.10.2026): minmax(0, 1fr) statt 1fr — die Kennzahlen-Zeile drückte die Spur sonst über den Inhaltsrand (336 px bei 360) */ .sk-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } .sk-footer-bottom { flex-direction: column; gap: 8px; } } /* FOOTER-1: Unter 390 px passen die drei Kennzahlen mit 24-px-Fugen in die Zeile (256 + 48 = 304 ≤ 320 px); ab 390 px bleiben 40 px */ @media (max-width: 389px) { .sk-footer-stats { column-gap: 24px; } } /* FOOTER-2 (19.10.2026): Linkspalten 2 × 2 nur noch unter 750 px. Von 750 bis 900 px (Tablet hoch, Handy quer) vier nebeneinander wie am Desktop, mit 24-px-Fuge (Spalten 158–191 px, „Website Expansion“ und „Hosting & Wartung“ brechen nicht um). */ @media (max-width: 749px) { .sk-footer-cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 750px) and (max-width: 900px) { .sk-footer-cols { column-gap: 24px; } } /* FOOTER-3 (19.10.2026): Lauftext am Handy 64 statt 96 px — ein „webtastic.io“ (≈ 355 px) läuft ganz durchs Bild, Tempo ≈ 62 px/s */ @media (max-width: 767px) { .sk-footer-track { font-size: 64px; } } /* Touch: jeder Link mindestens 44 × 44 px — 26,35 px Zeile + 2 × 9 px (Abstand wächst um 8 px). Als padding, nicht als zentrierte min-height: umbrochene Links behalten so ihren Abstand. min-width für kurze Wörter („AGB“). Logo: 44 px hoch, der negative Rand nimmt das Wachstum (44 − 24,8 Zeile) / 2 wieder zurück → nichts verrutscht. */ @media (max-width: 900px), (pointer: coarse) { .sk-footer-cols ul a { min-height: 44px; min-width: 44px; padding-block: 9px; } .sk-footer-cols ul { margin-block: -9px; } .sk-footer-logo { min-height: 44px; margin-block: -6px; } /* (44 − 32 Kachel) / 2 */ } /* Schmale Handys: die untere Zeile bricht um → Footer wächst */ @media (max-width: 480px) { .sk-footer { contain-intrinsic-size: auto 1029px; } } /* Weniger Bewegung: Band steht */ @media (prefers-reduced-motion: reduce) { html[data-layers~="marquee"] .sk-footer-track { animation: none; } } /* ═══ 95-schwebe ═══ */ /* ═══ 95 · SCHWEBE — mitlaufender Kontakt unten rechts ═══ Knopf: weiße Pille mit Manuels Foto (auf Touch-Geräten nur das Foto). Fenster fährt darüber aus. Alle Farben über Token — im dunklen Thema (html.theme-dark) dreht es mit. z-index 60: über Nav (50) und Wisch-Overlays (51); die Fit-Ergebnisleiste (ebenfalls 60, nur mobil) blendet es aus, solange sie offen ist — ebenso das offene Burger-Menü. Flache Fenster (Handy quer, ≤ 520 px hoch): eigene Querfassung des Fensters, die Wege als Kacheln nebeneinander (SCHWEBE-1). */ .sk-schwebe { position: fixed; z-index: 60; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 260ms var(--ease), transform 320ms var(--ease); } .sk-schwebe.is-da:not(.is-weg) { opacity: 1; transform: none; pointer-events: auto; } /* .is-da im Selektor: Ohne schlüge `.sk-schwebe.is-da:not(.is-weg)` (0-3-0) diese Regel (0-2-1) — der Knopf stünde dann sichtbar, aber inert über der Fit-Leiste (Sonde tools/feedback/schwebe.mjs, 375 px). */ /* sk-nav-sheet-schliesst (26.10.2026): Das Handy-Menü fährt beim Schließen noch 340 ms zurück — so lange bleibt der Knopf weg, sonst stünde er (z 60) über dem zurückfahrenden Vollbild-Menü */ html.sk-fit-leiste-offen .sk-schwebe.is-da, html:is(.sk-nav-sheet-offen, .sk-nav-sheet-schliesst) .sk-schwebe.is-da { opacity: 0; transform: translateY(16px); pointer-events: none; } .sk-schwebe-knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 20px 4px 4px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-card); color: var(--color-heading); font: 600 16px/1 var(--font-main); letter-spacing: -0.01em; box-shadow: var(--shadow-lg), var(--shadow-card-hover); cursor: pointer; transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .sk-schwebe-knopf img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; } @media (hover: hover) and (pointer: fine) { .sk-schwebe-knopf:hover { border-color: var(--color-brand-main); transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-brand); } .sk-schwebe-zu:hover { background: var(--color-bg-accent); color: var(--color-heading); } } .sk-schwebe-knopf:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; } .sk-schwebe-knopf[aria-expanded="true"] { border-color: var(--color-brand-main); } .sk-schwebe-fenster { position: absolute; right: 0; bottom: calc(100% + 12px); width: 344px; padding: 20px; background: var(--color-bg-card); color: var(--color-body); border: 1px solid var(--color-border); border-radius: 20px; box-shadow: var(--shadow-lg), var(--shadow-card-hover); transform-origin: 100% 100%; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 200ms var(--ease), transform 260ms var(--ease); } .sk-schwebe-fenster[hidden] { display: none; } .sk-schwebe.is-offen .sk-schwebe-fenster { opacity: 1; transform: none; } .sk-schwebe-kopf { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; gap: 14px; align-items: center; } .sk-schwebe-kopf img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; } .sk-schwebe-titel { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-heading); } .sk-schwebe-rolle { margin: 2px 0 0; font-size: 16px; color: var(--color-text-muted); } .sk-schwebe-zu { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; } /* Hover nur mit Maus (oben im hover-Block, SCHWEBE-6 19.10.2026) — beim Antippen kurz dieselbe Fläche */ .sk-schwebe-zu:active { background: var(--color-bg-accent); } .sk-schwebe-zu:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; } .sk-schwebe-zu svg { width: 20px; height: 20px; } .sk-schwebe-text { margin: 16px 0 12px; font-size: 16px; line-height: 1.5; } .sk-schwebe-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .sk-schwebe-weg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 14px; color: var(--color-heading); text-decoration: none; transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } @media (hover: hover) and (pointer: fine) { .sk-schwebe-weg:hover { border-color: var(--color-brand-main); background: var(--color-brand-subtle); } } .sk-schwebe-weg:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; } .sk-schwebe-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--color-brand-subtle); color: var(--color-brand-main); } .sk-schwebe-icon svg { width: 20px; height: 20px; } .sk-schwebe-weg-text { display: grid; gap: 2px; } .sk-schwebe-weg-text span { font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); } .sk-schwebe-weg-text strong { font-size: 16px; font-weight: 600; } .sk-schwebe-formular { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--color-brand-main); } /* Im Dunkeln ist --color-brand-main zu dunkel (2,8:1, s. .eyebrow in global.css) → der helle Markenton des dunklen Satzes */ html.theme-dark .sk-schwebe-formular, html.theme-dark .sk-schwebe-icon { color: var(--color-brand-darker); } @media (max-width: 767px) { .sk-schwebe { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .sk-schwebe-knopf { padding: 3px; } .sk-schwebe-knopf img { width: 50px; height: 50px; } /* Text bleibt für Screenreader der Name des Knopfs, sichtbar ist nur das Foto */ .sk-schwebe-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sk-schwebe-fenster { width: calc(100vw - 32px); } } /* SCHWEBE-4 (Tablet, E8 = A, 19.10.2026): Auf Touch-Geräten ab 768 px ebenfalls nur das runde Foto — die 205 × 60 px große Pille deckte beim Lesen Zeilenenden ab (verdeckte Fläche −72 %). „Direkt sprechen“ bleibt Name für Screenreader. Desktop mit Maus behält die Pille. */ @media (min-width: 768px) and (pointer: coarse) { .sk-schwebe-knopf { padding: 3px; } .sk-schwebe-knopf img { width: 50px; height: 50px; } .sk-schwebe-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* SCHWEBE-1 (Variante B, 19.10.2026): Im Handy-Querformat ragte das Fenster oben aus dem Bild (−178 px bei 750 × 342) — „Schließen“ und „Anrufen“ waren unerreichbar. Eigene Querfassung: breiter, die drei Wege als Kacheln nebeneinander, alles ohne Scrollen. Sicherheitsnetz: höchstens Fensterhöhe − 96 px, sonst scrollt das Fenster selbst. Zeilenhöhe 1,3 für Name, Rolle und Kacheltexte: Mit den Werten der Spec blieben bei 750 × 342 noch 10 px inneres Scrollen. */ @media (max-height: 520px) and (max-width: 1279px) { .sk-schwebe-fenster { width: min(640px, calc(100vw - 32px)); padding: 14px 16px; max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; } .sk-schwebe-kopf { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 12px; } .sk-schwebe-kopf img { width: 40px; height: 40px; } .sk-schwebe-titel, .sk-schwebe-rolle, .sk-schwebe-weg-text > * { line-height: 1.3; } .sk-schwebe-zu { width: 44px; height: 44px; } .sk-schwebe-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; } .sk-schwebe-weg { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; padding: 10px 12px; } .sk-schwebe-icon { width: 32px; height: 32px; } .sk-schwebe-weg-text strong { overflow-wrap: anywhere; } .sk-schwebe-formular { margin-top: 4px; min-height: 44px; } } /* Sehr flach (≤ 400 px hoch): Der Satz „Schreiben Sie mir …“ entfällt, die Wege sagen dasselbe — der Wortlaut bleibt im Markup */ @media (max-height: 400px) and (max-width: 1279px) { .sk-schwebe-text { display: none; } } @media (prefers-reduced-motion: reduce) { .sk-schwebe, .sk-schwebe-fenster, .sk-schwebe-knopf { transition: none; } }