/* Seitenabschluss und Fussband — geteilt von allen Seiten mit .site-footer. Eigene Datei, weil die Startseite s2s.css bewusst nicht einbindet (docs/SEITEN-BAUEN.md). Nur Tokens, die jede Seite definiert; wo eine Seite ohne Abstands-Token auskommt, greift der Rueckfallwert. Vorher: dieselbe Glas-Karte auf fuenf Seiten, darunter ein leerer Verlaufsstreifen, dann ein Fuss aus drei Spalten. Jetzt steht der Abschluss frei auf einem Punktraster und laeuft ohne Luecke in den Fuss. Der Fuss bleibt leise (wie Linear, Vercel, Apple) — eine ausgeblichene Wortmarke als Bild stand dort bis 29.09.2026 und passte nicht zum Premium-Niveau. */ /* ── Abschluss ─────────────────────────────────────────────── */ section.abschluss{ position:relative; overflow:clip; isolation:isolate; border-top:0; padding-block:clamp(88px,12vw,168px) clamp(40px,5vw,72px); } /* Punktraster, zur Mitte hin sichtbar, an den Raendern weg */ section.abschluss::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.5px); background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 46%,#000 20%,transparent 78%); mask-image:radial-gradient(ellipse 62% 70% at 50% 46%,#000 20%,transparent 78%); } /* Licht von unten: traegt den Blick zum Knopf und geht nahtlos in den Fuss */ section.abschluss::after{ content:"";position:absolute;inset:auto 0 0;height:70%;z-index:-2;pointer-events:none; background: radial-gradient(ellipse 48% 60% at 50% 100%,color-mix(in srgb,var(--emerald) 22%,transparent),transparent 72%), linear-gradient(180deg,transparent,var(--ink) 96%); } section.abschluss .band{ position:static; background:none;border:0;border-radius:0;box-shadow:none; padding:0; text-align:center; } section.abschluss .band::before{content:none} section.abschluss .band h2{ max-width:15ch;margin-inline:auto; font-size:clamp(2.6rem,1.5rem + 4.4vw,5.2rem); line-height:.98;letter-spacing:-.03em; } section.abschluss .band .lead{max-width:44ch;margin-inline:auto} section.abschluss .band .cta-row{justify-content:center} section.abschluss .duo{justify-content:center;margin-top:clamp(28px,4vw,40px)} /* Abschluss und Fuss sind eine Flaeche — kein Aussenabstand dazwischen */ main:has(> section.abschluss:last-child) + .site-footer{margin-top:0;border-top-color:transparent;box-shadow:none} main:has(> section.abschluss:last-child) + .site-footer::before{content:none} /* Ablauf traegt den Abschluss ohne .band — gleiche Haltung */ section.abschluss.fl-cta .wrap{text-align:center} section.abschluss.fl-cta h2{ max-width:15ch;margin-inline:auto; font-size:clamp(2.6rem,1.5rem + 4.4vw,5.2rem); line-height:.98;letter-spacing:-.03em; } section.abschluss.fl-cta .sub{max-width:44ch;margin-inline:auto} section.abschluss.fl-cta .fl-cta-row{justify-content:center} /* ── Kapitelziffern (28.09.2026) ────────────────────────────── Vorher an 5 Stellen auf 3 Seiten dieselbe Geste: riesige Fraunces-Ziffer als Umriss, fast unsichtbar. Wo die Zahl eine Reihenfolge traegt (Phasen, Zeitleiste, Etappen), bleibt sie — aber in der Etikettensprache, die die Seite fuer Kapitel schon hat (.ix: Mono, gesperrt). Eine Regel fuer alle, damit keine Seite auf der alten Geste stehen bleibt. Zustandsvarianten (is-done, is-active, :hover) stehen mit in der Liste, sonst faerben sie den Umriss wieder ein. */ :is(.fl-num,.pr-time-num,.pr-emp-nr,.pr-alt-nr,.ab-num), .pr-time-step.is-done .pr-time-num, .ab-row:hover .ab-num{ display:inline-flex;align-items:center;gap:10px; font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-style:normal; font-size:0.75rem;line-height:1.4;letter-spacing:.16em; -webkit-text-stroke:0;color:var(--emerald-soft); } :is(.fl-num,.pr-time-num,.pr-emp-nr,.pr-alt-nr,.ab-num)::before{ content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none; } /* In der Zeitleiste zeigt die Farbe den Zustand: offen = leise */ .pr-time-step:not(.is-done) .pr-time-num{color:var(--faint)} /* ── Seitenwechsel (28.09.2026) ────────────────────────────── Vorher baute jeder Klick die Seite hart neu auf — sieben Einzelseiten statt einer Website. Jetzt bleiben Kopfleiste und Logo stehen, der Inhalt geht leise ueber. Der eine laute Moment ist der Weg zur Anfrage (uebergang.js). Beide Seiten muessen opt-in machen: diese Datei laden alle Seiten. Chromium 126+ und Safari 18.2+; Firefox laedt normal. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } header.bar { view-transition-name: kopf; } header.bar .brand, .af-logo { view-transition-name: marke; } .af-buehne { view-transition-name: anfrage-karte; } .af-einladung h1 { view-transition-name: anfrage-titel; } ::view-transition-old(root) { animation: s2sRaus var(--dur-2, 260ms) cubic-bezier(.16,1,.3,1) both; } ::view-transition-new(root) { animation: s2sRein var(--dur-3, 460ms) cubic-bezier(.16,1,.3,1) both; } @keyframes s2sRaus { to { opacity: 0; transform: scale(.985); } } @keyframes s2sRein { from { opacity: 0; transform: translateY(18px); } } /* Die Leiste bleibt einfach stehen */ ::view-transition-old(kopf), ::view-transition-new(kopf) { animation: none; mix-blend-mode: normal; } ::view-transition-group(kopf) { animation: none; } /* Knopf -> Formularkarte, Satz -> Kopf der Anfrage: langsam genug zum Folgen */ ::view-transition-group(anfrage-karte), ::view-transition-group(anfrage-titel), ::view-transition-group(marke) { animation-duration: var(--dur-4, 620ms); animation-timing-function: cubic-bezier(.16,1,.3,1); } ::view-transition-old(anfrage-karte), ::view-transition-new(anfrage-karte) { height: 100%; object-fit: fill; } ::view-transition-old(anfrage-karte) { animation: s2sKnopfWeg var(--dur-2, 240ms) ease both; } ::view-transition-new(anfrage-karte) { animation: s2sKarteDa var(--dur-3, 420ms) 120ms ease both; } @keyframes s2sKnopfWeg { to { opacity: 0; } } @keyframes s2sKarteDa { from { opacity: 0; } } /* Gibt es die Leiste nur auf EINER Seite (die Anfrage hat keine), bleibt sie sonst bis zum Ende stehen und verschwindet dann schlagartig. */ ::view-transition-old(kopf):only-child { animation: s2sKnopfWeg var(--dur-2, 220ms) ease both; } ::view-transition-new(kopf):only-child { animation: s2sKarteDa var(--dur-2, 320ms) 120ms ease both; } /* ── Bedienbarkeit (29.09.2026, Audit der Startseite) ─────────────────────── */ /* Mobilmenue: `.mobile-menu{display:flex}` ueberstimmte das hidden-Attribut — das zugeklappte Menue lag nur per transform ausserhalb des Bildes und war mit der Tabulatortaste erreichbar (9 unsichtbare Tab-Stopps, WCAG 2.4.3/ 2.4.7). Das Hereingleiten startet jetzt per @starting-style, weil das Element aus display:none kommt. */ .mobile-menu[hidden],.nav-scrim[hidden]{display:none!important} @starting-style{ .mobile-menu.open{transform:translateX(105%)} .nav-scrim.open{opacity:0} } /* Feste Anfrage-Leiste am Handy: sie darf nichts verdecken. Platz am Seitenende reservieren und den Nach-oben-Knopf darueber heben (vorher lag er komplett darunter und Impressum/Datenschutz waren nicht antippbar). */ @media (max-width:759px){ body:has(.sticky-cta){padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} body:has(.sticky-cta.on) .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px))} } /* Trefferflaechen ab 44 px (PRODUCT.md), ohne das Schriftbild zu aendern */ .textlink,.duo-txt a,.foot-brand .foot-mail{display:inline-flex;align-items:center;min-height:44px} .foot-col a,.foot-legal a,.foot-bottom a{display:inline-flex;align-items:center;min-height:44px} .foot-col ul{gap:0!important} .foot-ig{width:44px!important;height:44px!important} .kette-phasen button{min-height:44px} /* ── Grosse Bildschirme (16.10.2026) ───────────────────────────── Sebi: „am Mac koennen wir das alles etwas groesser skalieren, wirkt so zusammengedrueckt“. Gemessen: ab 1280 px blieb alles starr bei 1240 px Inhalt und 16 px Grundgroesse, auch bei 1512/1728 px (MacBook Pro 14/16). Fast alle Masse rechnen in rem, also waechst die Grundgroesse mit dem Schirm, und die Inhaltsbreite waechst mit. Unter 1440 px bleibt alles wie bisher. */ @media (min-width:1440px){html{font-size:1.0625rem}:root .wrap{max-width:1320px}} @media (min-width:1680px){html{font-size:1.125rem}:root .wrap{max-width:1440px}} /* Grundschrift 17 px (1.0625rem, waechst auf grossen Schirmen mit); kleine Lesetexte (>= 40 Zeichen) nicht unter 16 px */ body{font-size:1.0625rem} .cta-note,.kette-glieder span:not(.kg-punkt),.pcap p,.duo-txt,.foot-brand p{font-size:max(16px,1em)} /* Wer weniger Bewegung will, bekommt keine — auch nicht von spezifischeren Regeln (vorher liefen `ring`/`pulse` in der Handy-Attrappe endlos weiter). */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ── Nav-Aktion „Gratis-Vorschau“ (lib/shell.mjs, AKTIONEN) ── Stand bis 01.10.2026 nur in s2s.css — Startseite, Prüf uns, Für wen und Über uns binden die nicht ein und zeigten den Link ungestaltet. Lautstaerke: Menuepunkte gedaempft, dieser Link farbig, der CTA als Flaeche. */ .nav-soft{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:44px; font-family:"Hanken Grotesk",sans-serif;font-size:0.8438rem;font-weight:600;letter-spacing:.01em; color:var(--emerald,#00B888);text-decoration:none;white-space:nowrap; transition:opacity var(--dur-2, .25s) var(--ease,ease)} .nav-soft::after{content:"\2192";font-size:1.05em;transition:transform var(--dur-2, .25s) var(--ease,ease)} .nav-soft:hover{opacity:.82} .nav-soft:hover::after{transform:translateX(3px)} .nav-soft:focus-visible{outline:2px solid var(--emerald,#00B888);outline-offset:4px;border-radius:4px} @media (max-width:960px){.nav .nav-soft{display:none}} /* lib/shell.mjs setzt aria-current="page"; manche Seiten kannten nur "true" */ .nav-links a[aria-current="page"]{color:var(--paper,#F2F3F1)} .nav-links a[aria-current="page"]::after{width:100%} /* ── Knopf und Textlink: EIN Baustein fuer alle Seiten (01.10.2026) ── Stand bisher als Kopie im