/* ===================================================================== OTS Agency – „Kino" (21.10.2026) Ein Design-System für alle öffentlichen Seiten. Ersetzt site.css dort. Ladereihenfolge: demos.css / formular.css → kino.css Die beiden Auszüge benutzen dieselben Token-Namen wie früher site.css. Darum stehen hier oben genau diese Namen, mit genau diesen Werten. Drehbuch der Startseite: Szenen wechseln zwischen Nacht (Mitternachtsblau) und Tag (Eierschale). Bewegung nur über transform, opacity, clip-path und Hintergrund-Verläufe. Kein Dauer-blur, kein mix-blend-mode über Flächen. Alles, was beim Laden versteckt startet, steht unter html.js – ohne JavaScript ist die ganze Seite sichtbar. ===================================================================== */ @font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Farben – wie Edin sie gewählt hat. Nicht ändern ohne seine Bestätigung. */ --bg: #F2EBD3; --surface: #F8F4E8; --band: #E5DCC3; --line: #DCD2B8; --line-2: #C6BA9C; --ink: #0F1E3D; --muted: #3A4766; --sub: #5B6680; --accent: #D4A72C; --accent-ink: #0F1E3D; --accent-soft: #F3E4B5; --blue: #2B4C8C; --on-ink: #F2EBD3; --star: #D99A00; --ok: #2B4C8C; --danger: #B42318; /* Nacht-Szenen: dieselben Farben, nur abgeleitet. */ --night: #0F1E3D; --night-deep: color-mix(in srgb, #0F1E3D 74%, #000); --on-night-2: rgba(242, 235, 211, .68); --on-night-3: rgba(242, 235, 211, .44); --line-night: rgba(242, 235, 211, .14); --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); --ease-film: cubic-bezier(.65, 0, .35, 1); --shadow-sm: 0 6px 18px -10px rgba(15, 30, 61, .2); --shadow-md: 0 18px 40px -22px rgba(15, 30, 61, .26); --shadow-lg: 0 40px 80px -40px rgba(15, 30, 61, .32); --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --maxw: 1280px; --gut: clamp(18px, 4.2vw, 52px); --kopf-h: 72px; --t-hero: clamp(2.75rem, 6.1vw, 6.5rem); --t-h2: clamp(2.15rem, 4.9vw, 4.5rem); --t-h3: clamp(1.4rem, 2.1vw, 1.85rem); --t-lead: clamp(1.04rem, 1.3vw, 1.22rem); } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.62 var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0 0 .45em; font-weight: 620; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } [hidden] { display: none !important; } ::selection { background: var(--accent); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--on-ink); text-decoration: none; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Szenen ---------- */ .scene { position: relative; isolation: isolate; } .scene--night { background: var(--night); color: var(--on-ink); } /* Filmkorn: einmal gerendertes Rauschen, ruhend, nur in Nacht-Szenen. */ .scene--night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sec { padding-block: clamp(92px, 12vw, 172px); } /* Klappe: Szenennummer + Thema */ .slate { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); } .slate b { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-weight: 600; letter-spacing: .06em; } .slate::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .5; } .scene--night .slate { color: var(--on-night-2); } .scene--night .slate b { background: var(--accent); color: var(--ink); } /* Abschnittskopf */ .kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 72px); align-items: end; margin-bottom: clamp(44px, 6vw, 84px); } .kopf h1, .kopf h2 { font-size: var(--t-h2); margin: 20px 0 0; } .kopf p { margin: 0; font-size: var(--t-lead); color: var(--muted); max-width: 44ch; } .scene--night .kopf p { color: var(--on-night-2); } @media (max-width: 860px) { .kopf { grid-template-columns: 1fr; } } .gold { color: var(--accent); } .scene:not(.scene--night) .gold { color: inherit; box-shadow: inset 0 -.16em 0 var(--accent); } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 620; font-size: 15.5px; letter-spacing: -.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease); } .btn .arr { display: inline-block; transition: transform .45s var(--ease); } .btn:hover .arr { transform: translateX(4px); } /* Lichtkante, die einmal über den Button läuft */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); } .btn:hover::after { transform: translateX(120%); transition: transform .9s var(--ease); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 12px 30px -14px rgba(212, 167, 44, .7); } .btn-primary:hover, .btn-primary:active { background: var(--ink); color: var(--on-ink); box-shadow: 0 14px 34px -16px rgba(15, 30, 61, .6); } .btn-ghost { background: transparent; color: inherit; border-color: var(--line-2); } .btn-ghost:hover { background: var(--band); border-color: var(--ink); } .btn-dark { background: var(--ink); color: var(--on-ink); } .btn-dark:hover { background: var(--accent); color: var(--ink); } .scene--night .btn-primary:hover, .scene--night .btn-primary:active, .mobile-menu .btn-primary:hover { background: var(--on-ink); color: var(--ink); } .scene--night .btn-ghost { border-color: var(--line-night); color: var(--on-ink); } .scene--night .btn-ghost:hover { background: rgba(242, 235, 211, .08); border-color: var(--on-night-2); } .btn-gross { min-height: 64px; padding: 0 36px; font-size: 17px; } /* ---------- Kopfzeile ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink); border-bottom: 1px solid transparent; transition: transform .55s var(--ease), background-color .35s, color .35s, border-color .35s; } .site-header.on-night { color: var(--on-ink); } .site-header.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: var(--line); } .site-header.scrolled.on-night { background: color-mix(in srgb, var(--night) 76%, transparent); border-color: var(--line-night); } .site-header.hide { transform: translateY(-101%); } .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); height: var(--kopf-h); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.015em; } .brand-mark { width: 26px; height: 26px; flex: 0 0 auto; } /* Logo wie das Original, ohne Hintergrundfeld: 8 Quadrate Mitternachtsblau, Mitte frei, Mitte rechts Gold. Auf dem Nacht-Grund (Kopfzeile über dem Startbereich, geöffnetes Menü) bekommt das Blau einen helleren Ton – Mitternachtsblau auf Mitternachtsblau wäre unsichtbar (Kontrast 1:1; der hellere Ton hat 4,5:1). */ .brand-mark { --logo-blau: var(--ink); width: 26px; height: 26px; flex: 0 0 auto; } .site-header.on-night .brand-mark, body.menu-open .brand-mark { --logo-blau: #5B84D6; } /* Das Original: 8 Quadrate, Mitte frei, das fünfte (Mitte rechts) ist gold. Beim Überfahren schrumpft jedes zweite Feld – wie auf der alten Seite. */ .brand-mark rect { fill: var(--logo-blau); transition: opacity .3s, fill .35s, transform .4s var(--ease); transform-box: fill-box; transform-origin: center; } .brand-mark rect:nth-child(5) { fill: var(--accent); } .brand:hover .brand-mark rect:nth-child(odd) { opacity: .35; transform: scale(.7); } .brand small { font-size: inherit; font-weight: 500; opacity: .72; } .nav-links { display: flex; gap: 2px; margin-left: auto; } .nav-links a { position: relative; padding: 9px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 520; text-decoration: none; opacity: .78; transition: opacity .2s, background-color .2s; } .nav-links a:hover, .nav-links a.on { opacity: 1; } .nav-links a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); } .nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); } .nav-right { display: flex; align-items: center; gap: 12px; } .nav-links + .nav-right { margin-left: 6px; } .nav > .nav-right:first-of-type:not(.nav-links + .nav-right) { margin-left: auto; } .lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); } .site-header.on-night .lang { border-color: var(--line-night); } .lang button { border: 0; background: transparent; padding: 6px 9px; border-radius: 999px; font: 600 11.5px/1 var(--font-mono); letter-spacing: .06em; cursor: pointer; opacity: .66; transition: background-color .2s, color .2s, opacity .2s; } .lang button[aria-pressed="true"] { opacity: 1; background: var(--ink); color: var(--on-ink); } .site-header.on-night .lang button[aria-pressed="true"] { background: var(--on-ink); color: var(--ink); } .nav-cta { min-height: 42px; padding: 0 18px; font-size: 14.5px; } .menu-btn { display: none; width: 46px; height: 46px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; cursor: pointer; place-items: center; } .site-header.on-night .menu-btn { border-color: var(--line-night); } .menu-btn span, .menu-btn span::before { display: block; width: 18px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease); } .menu-btn span { position: relative; transform: translateY(-3px); } .menu-btn span::before { content: ""; position: absolute; left: 0; top: 6px; } body.menu-open .menu-btn span { transform: rotate(45deg); } body.menu-open .menu-btn span::before { transform: translateY(-6px) rotate(-90deg); } @media (max-width: 980px) { .nav-links, .nav-cta { display: none; } .menu-btn { display: grid; } .nav-right { margin-left: auto; } .menu-btn { margin-left: 0; } } .mobile-menu { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; gap: 6px; padding: calc(var(--kopf-h) + 32px) var(--gut) 40px; background: var(--night); color: var(--on-ink); clip-path: circle(0 at calc(100% - 44px) 36px); visibility: hidden; transition: clip-path .75s var(--ease-io), visibility 0s linear .75s; } body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 44px) 36px); visibility: visible; transition: clip-path .75s var(--ease-io), visibility 0s; } body.menu-open .site-header { color: var(--on-ink); background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .m-link { font-size: clamp(2rem, 9vw, 3rem); font-weight: 620; letter-spacing: -.035em; line-height: 1.15; text-decoration: none; padding: 6px 0; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .7s var(--ease); } body.menu-open .m-link { opacity: 1; transform: none; } body.menu-open .m-link:nth-child(2) { transition-delay: .05s; } body.menu-open .m-link:nth-child(3) { transition-delay: .1s; } body.menu-open .m-link:nth-child(4) { transition-delay: .15s; } body.menu-open .m-link:nth-child(5) { transition-delay: .2s; } .mobile-menu .btn { margin-top: auto; } /* Lesefortschritt */ .read-bar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .3s; } .read-bar.on { opacity: 1; } .read-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; } /* ===================================================================== Einblendungen (nur mit JavaScript versteckt) ===================================================================== */ html.js [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.3s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); } html.js [data-rv].in { opacity: 1; transform: none; } html.js [data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(14% 10% 14% 10% round 28px); transition: clip-path 1.5s var(--ease-film); transition-delay: calc(var(--d, 0) * 1ms); } html.js [data-rv="clip"].in { clip-path: inset(0 0 0 0 round 28px); } /* Zeilen, die aus einer Maske hochfahren. Jede Zeile ist ein eigener Textknoten – so findet die Sprachumschaltung sie weiterhin. */ .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; } .ln > span { display: block; } html.js [data-lines] .ln > span { transform: translateY(112%); transition: transform 1.25s var(--ease); } html.js [data-lines] .ln:nth-child(2) > span { transition-delay: .09s; } html.js [data-lines] .ln:nth-child(3) > span { transition-delay: .18s; } html.js [data-lines] .ln:nth-child(4) > span { transition-delay: .27s; } html.js [data-lines].in .ln > span { transform: none; } /* ===================================================================== 0 · Kino-Eintritt (überarbeitet 22.10.2026, flüssiger) Eierschale-Bühne, Kinobalken in Mitternachtsblau. Das Logo – 8 blaue Quadrate, Mitte frei – setzt sich zusammen, das goldene kommt zuletzt, dann fliegt die Kamera durch das goldene Feld in die Seite. Warum jetzt flüssiger: Der ganze Ablauf ist EINE Zeitleiste aus CSS-Animationen, die mit dem ersten Bild starten (html.ts-an). Vorher wartete er auf das Skript und steuerte den Zoom per Timer; dazu kam ein Lichtkreis mit 120 px Schatten, der jedes Bild neu gezeichnet wurde. Jetzt animieren nur transform, scale und opacity – das läuft auf der Grafikkarte, nichts wird neu gezeichnet. Zeitleiste (s): Balken 0–.5 · Quadrate .25–1.5 · Gold 1.0–1.6 · Ring 1.55–2.4 Schrift 1.15–2.0 · Rest weicht 2.15 · Zoom 2.3–3.0 Balken ab 2.55 · Ausblenden 2.9–3.45 (Name: tsAus) kino.js liest nur noch mit, wann tsAus startet (Seite einblenden) und endet (Eintritt entfernen) – es steuert nichts. Skript im räumt nach 5 s in jedem Fall auf. ===================================================================== */ .ts { position: fixed; inset: 0; z-index: 120; display: none; overflow: hidden; background: var(--bg); color: var(--ink); cursor: pointer; contain: strict; } html.ts-an .ts { display: block; animation: tsAus .55s linear 2.9s forwards; } @keyframes tsAus { to { opacity: 0; } } .ts.skip { animation: none; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-io); } /* Kinobalken */ .ts-balken { position: absolute; left: 0; right: 0; height: 9vh; background: var(--night); z-index: 3; transform: scaleY(0); will-change: transform; } .ts-balken.oben { top: 0; transform-origin: 50% 0; } .ts-balken.unten { bottom: 0; transform-origin: 50% 100%; } html.ts-an .ts-balken { animation: tsBalkenRein .5s var(--ease) forwards, tsBalkenRaus .4s var(--ease-io) 2.55s forwards; } @keyframes tsBalkenRein { to { transform: scaleY(1); } } @keyframes tsBalkenRaus { from { transform: scaleY(1); } to { transform: scaleY(0); } } .ts-mitte { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: clamp(14px, 2.4vmin, 22px); } /* Das Logo: 3 × 8 Einheiten + 2 Lücken = 26, wie das SVG */ .ts-logo { --L: min(17vmin, 128px); --u: calc(var(--L) / 26); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 8)); grid-auto-rows: calc(var(--u) * 8); gap: var(--u); } .ts-logo i { position: relative; display: block; border-radius: calc(var(--u) * 1.5); background: var(--ink); opacity: 0; will-change: transform, opacity; transform: translate3d(var(--dx, 0), var(--dy, 0), 0) rotate(var(--r, 0)) scale(.35); } .ts-logo span { visibility: hidden; } .ts-logo i.g { background: var(--accent); z-index: 5; } html.ts-an .ts-logo i { animation: tsQuadrat .75s cubic-bezier(.22, 1.2, .4, 1) calc(.25s + var(--i, 0) * 60ms) forwards, tsWeicht .25s ease 2.15s forwards; } html.ts-an .ts-logo i.g { animation: tsQuadrat .65s cubic-bezier(.22, 1.2, .4, 1) 1s forwards, tsZoom .7s cubic-bezier(.7, 0, .84, 0) 2.3s forwards; } @keyframes tsQuadrat { to { opacity: 1; transform: none; } } @keyframes tsWeicht { to { opacity: 0; } } /* Die Kamera fliegt in das goldene Feld: die Eigenschaft scale setzt auf das transform des Einflugs obendrauf, statt es abzulösen. Faktor 100 deckt auch 4K-Bildschirme. */ @keyframes tsZoom { from { scale: 1; } to { scale: 100; } } /* goldener Ring, wenn das letzte Feld sitzt */ .ts-logo i.g::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; } html.ts-an .ts-logo i.g::after { animation: tsRing .9s ease-out 1.55s; } @keyframes tsRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } } .ts-wort { display: flex; gap: .3em; overflow: hidden; font-size: clamp(1.5rem, 4.4vmin, 2.5rem); font-weight: 680; letter-spacing: -.035em; line-height: 1.15; color: var(--ink); } .ts-wort span { display: block; transform: translate3d(0, 115%, 0); } .ts-wort span + span { font-weight: 450; color: var(--muted); } html.ts-an .ts-wort span { animation: tsHoch .8s var(--ease) 1.15s forwards; } html.ts-an .ts-wort span + span { animation-delay: 1.25s; } html.ts-an .ts-wort { animation: tsWeicht .25s ease 2.15s forwards; } @keyframes tsHoch { to { transform: none; } } .ts-unter { max-width: 80vw; text-align: center; font: 500 clamp(9px, 2.4vmin, 11.5px)/1.6 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); opacity: 0; } html.ts-an .ts-unter { animation: tsEin .6s ease 1.4s forwards, tsWeicht .25s ease 2.15s forwards; } @keyframes tsEin { to { opacity: 1; } } .ts-skip { position: absolute; right: var(--gut); bottom: calc(9vh + 18px); z-index: 6; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--muted); font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } .ts-skip:hover { color: var(--ink); border-color: var(--ink); } /* Handy: Logo kräftiger, Unterzeile darf umbrechen */ @media (max-width: 600px) { .ts-logo { --L: 25vw; } .ts-wort { font-size: 1.75rem; } .ts-unter { max-width: 62vw; } } /* ===================================================================== 1 · Startbereich (Nacht) ===================================================================== */ .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--kopf-h) + 24px) 0 0; overflow: hidden; } .hero-licht { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(640px circle at var(--mx, 74%) var(--my, 34%), rgba(212, 167, 44, .17), transparent 62%), radial-gradient(70% 60% at 88% 12%, rgba(43, 76, 140, .62), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(43, 76, 140, .35), transparent 70%); } /* Letterbox: schließt sich beim Rausscrollen */ .hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; height: 13vh; z-index: 4; background: var(--night-deep); pointer-events: none; transform: scaleY(var(--p, 0)); } .hero::before { top: 0; transform-origin: 50% 0; } .hero::after { bottom: 0; transform-origin: 50% 100%; } /* Sucher-Ecken */ .sucher { position: absolute; inset: calc(var(--kopf-h) + 10px) clamp(10px, 2.4vw, 30px) 18px; z-index: -1; pointer-events: none; } .sucher i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--line-night); } .sucher i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .sucher i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; } .sucher i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .sucher i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } .hero-inner { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, .64fr); gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; /* Das Ausblenden beginnt erst nach 30 % des Wegscrollens (vorher war das neue Bild am Handy schon blass, während man es noch las). max() hält den Wert vorher bei 0. */ --weg: max(0, calc(var(--p, 0) - .3)); transform: translate3d(0, calc(var(--weg) * -14vh), 0); opacity: calc(1 - var(--weg) * 1.4); } .hero-ort { display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 12px; border-radius: 20px; line-height: 1.4; max-width: 100%; border: 1px solid var(--line-night); font-size: 13.5px; color: var(--on-night-2); } .hero-ort i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(212, 167, 44, .18); } .hero h1 { font-size: var(--t-hero); line-height: .95; letter-spacing: -.05em; font-weight: 640; margin: 22px 0 24px; } .hero-lead { font-size: var(--t-lead); color: var(--on-night-2); max-width: 36em; margin-bottom: 28px; } .hero-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .hero-ruhe { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 14px; color: var(--on-night-3); } .hero-ruhe svg { width: 17px; height: 17px; color: var(--accent); } .hero-handy { position: relative; display: grid; justify-items: center; } .hero-handy::before { content: ""; position: absolute; inset: 8% 4% 18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(212, 167, 44, .26), transparent); } /* Fakten am unteren Rand */ .hero-fakten { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 5vh, 64px); border-top: 1px solid var(--line-night); } .hero-fakten > div { padding: 18px 20px 22px 0; } .hero-fakten > div + div { padding-left: 20px; border-left: 1px solid var(--line-night); } .hero-fakten dt { font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-night-3); margin-bottom: 10px; } .hero-fakten dd { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 620; letter-spacing: -.02em; } .hero-fakten dd small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--on-night-3); } .hero-kunden { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 13.5px; color: var(--on-night-3); } .hero-kunden b { color: var(--on-ink); font-weight: 600; } .hero-kunden b + b::before { content: "·"; margin: 0 10px 0 0; color: var(--accent); } @media (max-width: 960px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } .hero-handy { margin-top: 8px; } .hero-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-fakten > div:nth-child(3) { padding-left: 0; border-left: 0; } .hero-fakten > div:nth-child(n+3) { border-top: 1px solid var(--line-night); } } @media (max-width: 520px) { .hero { padding-top: calc(var(--kopf-h) + 28px); } .hero h1 { font-size: clamp(2.6rem, 12.4vw, 3.6rem); margin: 20px 0 20px; } .hero-btns .btn { flex: 1 1 100%; } .sucher { display: none; } } /* ===================================================================== 2 · Akt 1 – das Problem (Nacht, gescrubbt) ===================================================================== */ .akt { height: 330vh; } .akt-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; } .akt-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 50%, rgba(43, 76, 140, .4), transparent 70%); } .akt-zeilen { display: grid; gap: clamp(14px, 2.4vh, 26px); margin-top: 28px; } .akt-z { --f: 100; } .akt-z > span { font-size: clamp(1.9rem, 5.2vw, 4.9rem); font-weight: 640; letter-spacing: -.045em; line-height: 1.04; /* Licht läuft über die Zeile – bei mehrzeiligem Text Zeile für Zeile */ background: linear-gradient(90deg, var(--on-ink) calc(var(--f) * 1% - 7%), rgba(242, 235, 211, .16) calc(var(--f) * 1%)); -webkit-background-clip: text; background-clip: text; color: transparent; } .akt-z small { display: block; margin-top: 10px; font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 400; letter-spacing: 0; color: var(--on-night-2); opacity: calc((var(--f) - 70) / 30); transition: opacity .2s; } .akt-wende { margin-top: clamp(26px, 5vh, 52px); font-size: clamp(2.2rem, 6vw, 5.6rem); font-weight: 680; letter-spacing: -.05em; line-height: 1; color: var(--accent); opacity: var(--w, 1); transform: translate3d(0, calc((1 - var(--w, 1)) * 40px), 0); } .akt-loes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; opacity: var(--l, 1); transform: translate3d(0, calc((1 - var(--l, 1)) * 20px), 0); } .akt-loes a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-night); text-decoration: none; font-size: 14.5px; transition: background-color .2s, border-color .2s; } .akt-loes a:hover { background: rgba(242, 235, 211, .08); border-color: var(--accent); } .akt-loes a b { color: var(--accent); font: 600 11px var(--font-mono); letter-spacing: .1em; } @media (max-width: 700px) { .akt { height: 260vh; } } /* ===================================================================== 3 · Leistungen – Regiepult ===================================================================== */ .svc-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; margin-bottom: 18px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--surface); } .svc-tab { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic nm" "ic pr"; gap: 2px 12px; align-items: center; padding: 13px 14px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease); } .svc-tab .ic { grid-area: ic; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); transition: background-color .4s, border-color .4s, color .4s; } .svc-tab .ic svg { width: 19px; height: 19px; } .svc-tab .nm { grid-area: nm; min-width: 0; } .svc-tab .nm b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.01em; } .svc-tab .nm small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--sub); } .svc-tab .pr { grid-area: pr; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sub); } .svc-tab:hover:not([aria-selected="true"]) { background: var(--band); } .svc-tab[aria-selected="true"] { background: var(--night); color: var(--on-ink); } .svc-tab[aria-selected="true"] .ic { background: var(--accent); border-color: var(--accent); color: var(--ink); } .svc-tab[aria-selected="true"] small, .svc-tab[aria-selected="true"] .pr { color: var(--on-night-2); } .svc-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 44px); padding: clamp(18px, 2.8vw, 40px); border-radius: 30px; background: var(--surface); border: 1px solid var(--line); } .svc-panel.show { animation: kinoWisch 1s var(--ease-film); } .svc-panel.show .svc-info > * { animation: kinoHoch .9s var(--ease) backwards; } .svc-panel.show .svc-info > :nth-child(2) { animation-delay: .06s; } .svc-panel.show .svc-info > :nth-child(3) { animation-delay: .12s; } .svc-panel.show .svc-info > :nth-child(4) { animation-delay: .18s; } @keyframes kinoWisch { from { clip-path: inset(0 0 0 100% round 30px); } to { clip-path: inset(0 0 0 0 round 30px); } } @keyframes kinoHoch { from { opacity: 0; transform: translateY(18px); } } .svc-info { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; } .svc-info h3 { font-size: var(--t-h3); margin-bottom: 12px; } .svc-info > p { color: var(--muted); } .inc { list-style: none; display: grid; gap: 10px; margin: 6px 0 0; } .inc li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; } .inc li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--ink); } .svc-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); } .svc-info .svc-buy { margin-top: 26px; } .amt { font-size: 23px; font-weight: 660; letter-spacing: -.025em; } .amt small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--sub); } .svc-demo { border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 100% 0%, rgba(212, 167, 44, .18), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(43, 76, 140, .1), transparent 60%), var(--bg); } @media (max-width: 1080px) { .svc-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .svc-list::-webkit-scrollbar { display: none; } .svc-tab { flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; } } @media (max-width: 900px) { .svc-panel { grid-template-columns: minmax(0, 1fr); } } /* Versprechen unter den Leistungen */ .promises { margin-top: clamp(28px, 4vw, 48px); } /* ===================================================================== 4 · Automatisierung zum Anfassen (Nacht) Die Bausteine aus demos.css bekommen in der Nacht dunkle Werte – über die Tokens, ohne eine einzige Regel zu verdoppeln. ===================================================================== */ .scene--night .alab { --bg: #13264c; --surface: #172d57; --band: #1e3765; --line: rgba(242, 235, 211, .12); --line-2: rgba(242, 235, 211, .22); --ink: #F2EBD3; --muted: rgba(242, 235, 211, .78); --sub: rgba(242, 235, 211, .58); --accent-ink: #0F1E3D; --on-ink: #0F1E3D; --shadow-md: 0 22px 50px -24px rgba(0, 0, 0, .6); --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .7); color: var(--ink); } /* ===================================================================== 5 · Starter-Paket im Scheinwerfer ===================================================================== */ .paket { overflow: hidden; } /* Bühnenlicht statt Lichtstrahl: weich und breit, ohne sichtbare Kante. (Der schmale Kegel vom 21.10. wirkte wie ein goldener Strich – Edin: „sieht billig aus".) */ .buehne-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(.35 + var(--p, 1) * .65); background: radial-gradient(ellipse 48% 72% at 71% -10%, rgba(242, 235, 211, .15), rgba(242, 235, 211, .045) 46%, transparent 72%), radial-gradient(ellipse 34% 24% at 71% 98%, rgba(212, 167, 44, .14), transparent 70%); } @media (max-width: 900px) { .buehne-licht { background: radial-gradient(ellipse 90% 45% at 50% 52%, rgba(242, 235, 211, .12), transparent 70%), radial-gradient(ellipse 70% 20% at 50% 100%, rgba(212, 167, 44, .14), transparent 70%); } } .paket-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 5vw, 88px); align-items: center; } .paket-in h2 { font-size: clamp(2.1rem, 4vw, 3.8rem); margin: 20px 0 22px; } .paket-in > div > p { color: var(--on-night-2); font-size: var(--t-lead); max-width: 34em; } .paket .inc li svg { background: var(--accent); color: var(--ink); } .ticket-rahmen { perspective: 1100px; } .ticket { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3.4vw, 44px); border-radius: 26px; text-align: center; color: var(--ink); background: linear-gradient(160deg, #FBF7EA 0%, var(--bg) 46%, #EADFC0 100%); box-shadow: 0 70px 120px -50px rgba(0, 0, 0, .85), 0 0 0 1px rgba(242, 235, 211, .2), inset 0 1px 0 rgba(255, 255, 255, .7); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); } .ticket.kippt { transition: transform .12s linear; } /* Glanz: läuft einmal drüber, wenn das Ticket ins Bild kommt, und folgt danach der Maus */ .ticket-glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden; } .ticket-glanz::before { content: ""; position: absolute; inset: -30% -60%; background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .7) 50%, transparent 58%); transform: translateX(-60%); } .ticket-rahmen.in .ticket-glanz::before { animation: ticketGlanz 1.7s var(--ease-io) .6s forwards; } @keyframes ticketGlanz { to { transform: translateX(60%); } } .ticket-glanz::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 55%); } .ticket.kippt .ticket-glanz::after { opacity: 1; } /* Kerben links und rechts + Abriss-Linie */ .ticket::before, .ticket::after { content: ""; position: absolute; top: 62%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--night); } .ticket::before { left: -15px; } .ticket::after { right: -15px; } .ticket-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .ticket-preis { display: flex; justify-content: center; align-items: flex-start; gap: .06em; margin: 20px 0 6px; font-size: clamp(4rem, 8.4vw, 7rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; } .ticket-preis small { font-size: .38em; font-weight: 600; letter-spacing: 0; margin-top: .14em; color: var(--muted); } .ticket-wann { color: var(--sub); font-size: 15px; } .ticket-riss { margin: 26px -8px 26px; border-top: 2px dashed var(--line-2); } .ticket .btn { width: 100%; } .ticket small { display: block; margin-top: 12px; font-size: 13.5px; color: var(--sub); } .ticket .price-note { margin-top: 6px; } @media (max-width: 900px) { .paket-in { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================== 6 · Projekte ===================================================================== */ .cases { display: grid; gap: clamp(72px, 10vw, 150px); } .case { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(26px, 4.4vw, 72px); align-items: center; } .case:nth-child(even) { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } .case:nth-child(even) .case-vis { order: 2; } .case-vis { position: relative; min-width: 0; padding: clamp(16px, 3vw, 38px); border-radius: 28px; background: var(--band); overflow: hidden; } .case-vis::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(80% 70% at 100% 0%, rgba(212, 167, 44, .22), transparent 60%); } .case-vis > * { position: relative; z-index: 1; } .device-browser { display: block; overflow: hidden; border-radius: 14px; background: #fff; text-decoration: none; box-shadow: var(--shadow-lg); transform: translate3d(0, calc(12px - var(--p, .5) * 24px), 0); transition: box-shadow .4s var(--ease); } .device-browser:hover { box-shadow: 0 50px 90px -40px rgba(15, 30, 61, .45); } .db-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line); } .db-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); } .db-bar u { flex: 0 1 240px; margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: var(--bg); text-decoration: none; font-size: 11.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .case-txt { min-width: 0; } .label { display: inline-block; font: 500 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); } .case-txt h3 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin: 14px 0 16px; letter-spacing: -.045em; } .case-txt > p { color: var(--muted); font-size: 16.5px; } .case-list { list-style: none; display: grid; gap: 10px; margin: 20px 0 24px; } .case-list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.5; } .case-list svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--ink); } .case-fb { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .case-fb svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); } .case-fb b { display: block; margin-bottom: 2px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); } .case-fb span { font-size: 15px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; color: var(--muted); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } @media (prefers-reduced-motion: no-preference) { .chip.soon .dot { animation: kinoPuls 1.8s ease-in-out infinite; } } @keyframes kinoPuls { 50% { opacity: .35; } } .cmp-hint { display: block; margin-top: 12px; font-size: 13px; color: var(--sub); text-align: center; } @media (max-width: 900px) { .case, .case:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .case:nth-child(even) .case-vis { order: 0; } } /* ===================================================================== 7 · Ablauf – eine Linie zeichnet sich ===================================================================== */ .weg { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding-top: 34px; } .weg::before, .weg::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 2px; } .weg::before { background: var(--line-2); } .weg::after { background: linear-gradient(90deg, var(--blue), var(--accent)); transform: scaleX(var(--p, 1)); transform-origin: 0 50%; } .weg li { position: relative; padding-top: 22px; opacity: .45; transition: opacity .6s var(--ease); } .weg li.on, html:not(.js) .weg li { opacity: 1; } .weg li::before { content: ""; position: absolute; top: -28px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: background-color .4s, border-color .4s, transform .5s var(--ease); } .weg li.on::before { background: var(--accent); border-color: var(--accent); transform: scale(1.25); } .weg-n { display: block; font: 500 12px/1 var(--font-mono); letter-spacing: .16em; color: var(--sub); margin-bottom: 12px; } .weg h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); margin-bottom: 10px; } .weg p { font-size: 15.5px; color: var(--muted); margin: 0; } @media (max-width: 860px) { .weg { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 34px; } .weg::before, .weg::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .weg::after { transform: scaleY(var(--p, 1)); transform-origin: 50% 0; } .weg li { padding-top: 0; } .weg li::before { top: 2px; left: -34px; } } /* ===================================================================== 8 · Über uns ===================================================================== */ .team { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: center; } .team-bild { position: relative; margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; background: var(--band); } .team-bild img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .team-bild img { animation: kenBurns 22s var(--ease-io) infinite alternate; } } @keyframes kenBurns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-2%, -2%, 0); } } .team-bild figcaption { position: absolute; left: 16px; bottom: 16px; padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--night) 82%, transparent); color: var(--on-ink); font-size: 13.5px; } .team-bild figcaption b { font-weight: 620; } .team h1, .team h2 { font-size: var(--t-h2); margin: 20px 0 18px; } .team-lead { font-size: var(--t-lead); color: var(--muted); } .team blockquote { margin: 26px 0; padding-left: 22px; border-left: 2px solid var(--accent); font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.55; } .team-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--line-2); } .team-fakten > div { padding: 18px 16px 0 0; } .team-fakten > div + div { padding-left: 16px; border-left: 1px solid var(--line); } .team-fakten dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); margin-bottom: 8px; } .team-fakten dd { margin: 0; font-size: 15px; font-weight: 560; } @media (max-width: 900px) { .team { grid-template-columns: minmax(0, 1fr); } .team-bild { max-width: 460px; } } @media (max-width: 560px) { .team-fakten { grid-template-columns: minmax(0, 1fr); } .team-fakten > div + div { padding-left: 0; border-left: 0; } } /* ===================================================================== 9 · FAQ ===================================================================== */ .faq { border-top: 1px solid var(--line-2); max-width: 920px; } .faq details { border-bottom: 1px solid var(--line-2); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.015em; } .faq summary::-webkit-details-marker { display: none; } .faq .pm { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, border-color .3s, transform .5s var(--ease); } .faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease); } .faq .pm::after { transform: rotate(90deg); } .faq details[open] .pm { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); } .faq details[open] .pm::after { transform: rotate(0); } .faq summary:hover .pm { border-color: var(--ink); } .faq .ans { overflow: hidden; } .faq .ans p { margin: 0 0 26px; max-width: 68ch; color: var(--muted); } /* ===================================================================== 10 · Finale + Abspann ===================================================================== */ .finale { padding-block: clamp(120px, 16vw, 220px) clamp(80px, 10vw, 130px); overflow: hidden; text-align: center; } .finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56% 60% at 50% 100%, rgba(212, 167, 44, .2), transparent 70%), radial-gradient(70% 70% at 50% 0%, rgba(43, 76, 140, .45), transparent 70%); } .finale h2 { font-size: clamp(2.6rem, 8vw, 7.6rem); line-height: .95; letter-spacing: -.055em; margin: 26px auto 28px; max-width: 12ch; } .finale p { max-width: 36em; margin: 0 auto 36px; color: var(--on-night-2); font-size: var(--t-lead); } .finale .slate::after { display: none; } .finale-tel { margin-top: 22px; font-size: 15px; color: var(--on-night-3); } .finale-tel a { color: var(--on-ink); text-underline-offset: 4px; } .abspann { background: var(--night); color: var(--on-ink); } .abspann.scene--night::after { z-index: 0; } .abspann > * { position: relative; z-index: 1; } .credits { display: grid; gap: 22px; margin: 0 auto; padding: clamp(48px, 7vw, 90px) 0; max-width: 760px; text-align: center; border-top: 1px solid var(--line-night); } .credits > div { display: grid; gap: 6px; } .credits dt { font: 500 11px/1.4 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); } .credits dd { margin: 0; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 560; letter-spacing: -.02em; } .credits dd a { text-decoration: none; } .credits dd a:hover { color: var(--accent); } .credits dd a + a::before { content: "·"; margin: 0 .5em; color: var(--on-night-3); } .abspann-ende { margin: 0; padding-bottom: clamp(36px, 5vw, 56px); text-align: center; font: 500 11.5px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--on-night-3); } .abspann-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-night); font-size: 13.5px; color: var(--on-night-3); } .abspann-fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; } .abspann-fuss a { text-decoration: none; color: var(--on-night-2); } .abspann-fuss a:hover { color: var(--on-ink); } /* ===================================================================== Unterseiten (Kontakt, Rechtliches, 404) ===================================================================== */ .seite { padding: calc(var(--kopf-h) + clamp(40px, 6vw, 80px)) 0 clamp(80px, 10vw, 130px); min-height: 70vh; } body.unterseite .site-header { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-color: var(--line); } .back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sub); text-decoration: none; } .back-link:hover { color: var(--ink); } /* Kontaktseite – Rahmen. Felder und Schritte kommen aus formular.css. */ .contact-page h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -.05em; } /* Farbe kommt aus formular.css (.contact-info .lead erbt vom dunklen Feld) */ .contact-page .lead { font-size: var(--t-lead); max-width: 36em; } .cform { border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); } /* Cookie-Hinweis (aus, solange nichts Externes geladen wird – config.js) */ .ckb { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .5s var(--ease); } .ckb.on { opacity: 1; transform: none; } .ckb-tx { flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--muted); } .ckb-tx a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .ckb-btn { display: flex; gap: 9px; flex-wrap: wrap; } .ckb-btn .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; } /* ===================================================================== Seitenwechsel wie ein Schnitt (wo der Browser es kann) ===================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vtRaus .42s var(--ease-io) both; } ::view-transition-new(root) { animation: vtRein .7s var(--ease) both; } @keyframes vtRaus { to { opacity: 0; transform: translateY(-14px); } } @keyframes vtRein { from { opacity: 0; transform: translateY(18px); } } /* ===================================================================== Bewegung reduzieren: alles steht, alles ist sichtbar ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.js [data-rv], html.js [data-rv="clip"] { opacity: 1; transform: none; clip-path: none; } html.js [data-lines] .ln > span { transform: none; } .ts { display: none !important; } .hero::before, .hero::after { display: none; } .hero-inner { transform: none; opacity: 1; } .akt { height: auto; } .akt-buehne { position: relative; height: auto; padding-block: clamp(92px, 12vw, 172px); } .akt-z { --f: 100 !important; } .akt-wende, .akt-loes { opacity: 1; transform: none; } .device-browser { transform: none; } .weg::after { transform: none; } .weg li { opacity: 1; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Drucken */ @media print { .site-header, .mobile-menu, .read-bar, .ts, .hero::before, .hero::after, .buehne-licht { display: none !important; } .scene--night { background: #fff; color: #000; } .akt { height: auto; } .akt-buehne { position: static; height: auto; } .akt-z > span { color: #000; background: none; } } /* Die vier Sätze liegen absolut übereinander – ohne feste Breite fällt der Absatz auf null zusammen und jedes Wort steht in einer eigenen Zeile. */ /* Rechtliche Seiten: Kopf nur mit Logo und „Startseite" – der Knopf gehört nach rechts */ body.unterseite .nav > .nav-cta:last-child { margin-left: auto; } /* ===================================================================== Leistungen & Preise – Feinschliff (22.10.2026) ===================================================================== */ /* Gleitende Markierung: eine dunkle Fläche wandert zum gewählten Reiter, statt dass der Hintergrund hart umspringt. kino.js → svcMarke() setzt Breite und Position. */ .svc-list { position: relative; } .svc-marke { display: none; position: absolute; left: 0; top: 6px; bottom: 6px; width: 0; z-index: 0; pointer-events: none; border-radius: 16px; background: var(--night); box-shadow: 0 12px 26px -14px rgba(15, 30, 61, .6); will-change: transform; transition: transform .65s var(--ease), width .65s var(--ease); } .svc-list.mit-marke .svc-marke { display: block; } .svc-tab { position: relative; z-index: 1; } .svc-list.mit-marke .svc-tab[aria-selected="true"] { background: transparent; } /* Reiter kommen nacheinander herein, wenn der Bereich ins Bild läuft */ html.js .svc.in .svc-tab { animation: kinoHoch .8s var(--ease) backwards; } html.js .svc.in .svc-tab:nth-of-type(1) { animation-delay: .15s; } html.js .svc.in .svc-tab:nth-of-type(2) { animation-delay: .22s; } html.js .svc.in .svc-tab:nth-of-type(3) { animation-delay: .29s; } html.js .svc.in .svc-tab:nth-of-type(4) { animation-delay: .36s; } html.js .svc.in .svc-tab:nth-of-type(5) { animation-delay: .43s; } /* Symbol des gewählten Reiters federt auf */ .svc-tab[aria-selected="true"] .ic svg { animation: icFeder .7s var(--ease); } @keyframes icFeder { from { transform: scale(.5) rotate(-14deg); } 60% { transform: scale(1.14) rotate(3deg); } } /* Haken-Punkte laufen nacheinander ein, nachdem der Wischer durch ist */ .svc-panel.show .inc li { animation: kinoHoch .7s var(--ease) backwards; } .svc-panel.show .inc li:nth-child(1) { animation-delay: .25s; } .svc-panel.show .inc li:nth-child(2) { animation-delay: .31s; } .svc-panel.show .inc li:nth-child(3) { animation-delay: .37s; } .svc-panel.show .inc li:nth-child(4) { animation-delay: .43s; } .svc-panel.show .inc li:nth-child(5) { animation-delay: .49s; } .svc-panel.show .inc li:nth-child(6) { animation-delay: .55s; } .svc-hint { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sub); } .svc-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 12px; padding-bottom: 2px; border-bottom: 1.5px solid var(--accent); font-size: 14.5px; font-weight: 620; text-decoration: none; } .svc-link .arr { display: inline-block; transition: transform .45s var(--ease); } .svc-link:hover .arr { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { html.js .svc.in .svc-tab, .svc-panel.show .inc li, .svc-tab[aria-selected="true"] .ic svg { animation: none !important; } } /* ===================================================================== Startbereich: „Ihr Betrieb, technisch weiter" (22.10.2026) Ersetzt das Google-Handy. Edin: „Ich bin ja nicht Google – ich bringe Firmen technisch weiter, vom Kosmetikstudio bis zum Mittelstand." Fünf Betriebe wechseln durch; bei jedem baut sich eine Webseite auf, vier Bausteine rasten nacheinander ein, unten füllt sich der Balken. Grundzustand = FERTIG (alle Haken gesetzt). Die Animationen laufen nur unter .hv.bereit (kino.js setzt das, wenn der Startbereich erscheint) und nur VON „unfertig" ZU „fertig" – so sieht man ohne JavaScript und bei „Bewegung reduzieren" den fertigen Zustand. ===================================================================== */ .hv { width: min(100%, 470px); display: grid; gap: 14px; } .hv-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .hv-tag { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-night); font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-night-2); } .hv-wahl { display: flex; gap: 7px; } /* Fortschrittspunkte – jeder ist ein Knopf. Feste Größe, kein grid-Zentrieren (das hat schon einmal die Balken der Projektauswahl auf null Breite zusammengedrückt). */ .hv-dot { position: relative; display: block; width: 30px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(242, 235, 211, .2); overflow: hidden; cursor: pointer; } .hv-dot::before { content: ""; position: absolute; inset: -12px -2px; } .hv-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } .hv-dot.on::after { transform: scaleX(1); } .hv.bereit .hv-dot.on::after { animation: hvPunkt var(--takt, 6.4s) linear backwards; } .hv.pause .hv-dot.on::after { animation-play-state: paused; } @keyframes hvPunkt { from { transform: scaleX(0); } } .hv-dot:hover:not(.on) { background: rgba(242, 235, 211, .38); } .hv-buehne { display: grid; padding: 18px; border-radius: 26px; background: linear-gradient(160deg, #1b3160, #132650); border: 1px solid rgba(242, 235, 211, .14); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(242, 235, 211, .08); overflow: hidden; } .hv-fall { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; opacity: 0; visibility: hidden; transform: translate3d(26px, 0, 0); transition: opacity .45s ease, transform .7s var(--ease), visibility 0s linear .7s; } .hv-fall.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .12s, transform .8s var(--ease) .12s, visibility 0s; } .hv-fall.ab { transform: translate3d(-26px, 0, 0); } .hv-name { margin: 0; font: 600 12px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .hv-name span { color: var(--on-night-3); } /* die Webseite, die sich aufbaut */ .hv-web { overflow: hidden; border-radius: 14px; background: var(--bg); color: var(--ink); box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .6); } .hv-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; background: var(--surface); border-bottom: 1px solid var(--line); } .hv-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); } .hv-bar u { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--bg); text-decoration: none; font-size: 10.5px; color: var(--sub); } .hv-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 18px; } .hv-h { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 650; line-height: 1.1; letter-spacing: -.03em; } .hv-chips { display: flex; flex-wrap: wrap; gap: 6px; } .hv-chips em { padding: 4px 10px; border-radius: 999px; background: var(--band); font-style: normal; font-size: 11.5px; color: var(--muted); } .hv-knopf { padding: 8px 15px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; } /* die Bausteine, die einrasten */ .hv-mod { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .hv-mod li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(242, 235, 211, .07); border: 1px solid rgba(242, 235, 211, .12); font-size: 13.5px; line-height: 1.35; color: var(--on-ink); } .hv-mod li i { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); } .hv-mod li i svg { width: 12px; height: 12px; } .hv-lauf { display: flex; align-items: center; gap: 12px; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-3); } .hv-lauf i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(242, 235, 211, .14); overflow: hidden; } .hv-lauf i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--accent)); transform-origin: 0 50%; } .hv-fuss { margin: 0; text-align: center; font-size: 13.5px; color: var(--on-night-3); } /* Aufbau: von „leer" zum fertigen Zustand (backwards = vorher unsichtbar, danach normal) */ .hv.bereit .hv-fall.on .hv-bar { animation: hvAuf .6s var(--ease) .3s backwards; } .hv.bereit .hv-fall.on .hv-h { animation: hvAuf .7s var(--ease) .5s backwards; } .hv.bereit .hv-fall.on .hv-chips { animation: hvAuf .7s var(--ease) .65s backwards; } .hv.bereit .hv-fall.on .hv-knopf { animation: hvAuf .7s var(--ease) .8s backwards; } @keyframes hvAuf { from { opacity: 0; transform: translate3d(0, 12px, 0); } } .hv.bereit .hv-fall.on .hv-mod li { animation: hvBaustein .6s var(--ease) backwards; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(1) { animation-delay: 1.1s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(2) { animation-delay: 1.55s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(3) { animation-delay: 2s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(4) { animation-delay: 2.45s; } @keyframes hvBaustein { from { opacity: 0; transform: translate3d(34px, 0, 0); } } .hv.bereit .hv-fall.on .hv-mod li i { animation: hvHaken .5s var(--ease) backwards; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(1) i { animation-delay: 1.45s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(2) i { animation-delay: 1.9s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(3) i { animation-delay: 2.35s; } .hv.bereit .hv-fall.on .hv-mod li:nth-child(4) i { animation-delay: 2.8s; } @keyframes hvHaken { from { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(242, 235, 211, .35); transform: scale(.8); } } .hv.bereit .hv-fall.on .hv-lauf i::after { animation: hvFuell 3.3s cubic-bezier(.4, 0, .2, 1) 1.1s backwards; } @keyframes hvFuell { from { transform: scaleX(0); } } .hv.pause .hv-fall.on * { animation-play-state: paused; } @media (max-width: 960px) { .hv { margin-inline: auto; } } @media (max-width: 520px) { .hv-buehne { padding: 14px; border-radius: 22px; } .hv-mod li { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .hv-fall, .hv-fall.on { transition: none; transform: none; } .hv.bereit .hv-fall.on *, .hv.bereit .hv-dot.on::after { animation: none !important; } } /* ===================================================================== Feste Leiste am Handy, Kontaktzeile im Startbereich, Pause-Knopf (22.10.2026) ===================================================================== */ .hero-direkt { margin: 10px 0 0; font-size: 14.5px; color: var(--on-night-3); } .hero-direkt a { color: var(--on-ink); text-decoration: none; border-bottom: 1px solid rgba(242, 235, 211, .35); transition: border-color .25s; } .hero-direkt a:hover { border-color: var(--accent); } /* Anrufen · WhatsApp · Erstgespräch – nur auf Handy und Tablet, nur mit JavaScript (ohne wäre die Leiste dauerhaft sichtbar und würde Inhalt verdecken). kino.js → schnellAktualisieren() zeigt sie nach dem Startbereich und versteckt sie vor dem Finale, bei offenem Menü und während des Eintritts. */ .schnell { display: none; } @media (max-width: 900px) { html.js .schnell { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; gap: 8px; padding: 8px; border-radius: 22px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 44px -20px rgba(15, 30, 61, .5); opacity: 0; transform: translate3d(0, 150%, 0); pointer-events: none; transition: transform .6s var(--ease), opacity .3s ease; } html.js .schnell.on { opacity: 1; transform: none; pointer-events: auto; } .sn-a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 8px; border-radius: 15px; background: var(--bg); color: var(--ink); font-size: 14.5px; font-weight: 620; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), background-color .25s; } .sn-a svg { flex: 0 0 auto; width: 18px; height: 18px; } .sn-a.prim { flex: 1.45 1 0; background: var(--accent); color: var(--accent-ink); } .sn-a:active { transform: scale(.97); } } @media (max-width: 360px) { .sn-a svg { display: none; } } /* Pause-Knopf: bewegte Inhalte, die länger als 5 s laufen, müssen sich anhalten lassen */ .hv-steuer { display: flex; align-items: center; gap: 12px; } .hv-pause { position: relative; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-night); background: transparent; color: var(--on-night-2); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; } .hv-pause::before { content: ""; position: absolute; inset: -8px; } .hv-pause:hover { background: rgba(242, 235, 211, .1); color: var(--on-ink); border-color: var(--on-night-2); } .hv-pause svg { width: 11px; height: 11px; } .hv-pause .p-an { display: none; } .hv-pause[aria-pressed="true"] .p-aus { display: none; } .hv-pause[aria-pressed="true"] .p-an { display: block; margin-left: 1px; } .hv-pause[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); } /* Beim Anhalten per Knopf springt das Beispiel auf „fertig" – ein halb gebautes Bild wäre das Gegenteil von dem, was man beim Anhalten sehen will. (Beim bloßen Drüberfahren läuft es dagegen nur pausiert weiter.) */ .hv.fertig .hv-fall.on *, .hv.fertig .hv-dot.on::after { animation: none !important; } /* ===================================================================== Anfrage-Formular: gezielte Fragen je Leistung (22.10.2026) Wer „Webseite" wählt, sieht Fragen zu Stil, Farben, Vorbildern; bei „Automatisierung" zu den Abläufen usw. Jede Karte klappt auf (grid-template-rows 0fr → 1fr, ohne Höhen zu messen). Zugeklappte Karten sind visibility:hidden – nicht fokussierbar, nicht vorlesbar. ===================================================================== */ .cf-details { display: grid; margin-top: 4px; } .cf-d-hinweis { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .cf-details:not(:has(.cf-detail.da)) .cf-d-hinweis { display: none; } .cf-detail { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .55s var(--ease), opacity .3s ease, visibility 0s linear .55s; } .cf-detail.da { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .6s var(--ease), opacity .5s ease .1s, visibility 0s; } .cf-d-in { min-height: 0; overflow: hidden; } .cf-d-box { margin-top: 12px; padding: 16px 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); } .cf-d-titel { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .cf-q + .cf-q { margin-top: 16px; } .cf-qt { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ink); } .cf-detail .field label { font-size: 14px; } .cf-detail .pick > span { padding: 7px 12px; font-size: 13.5px; } .cf-detail input[type="text"] { width: 100%; } /* ===================================================================== EINE HINTERGRUNDFARBE (22.10.2026) Edin: „Mach alles einen Hintergrund, zwei sieht komisch aus." Die Seite wechselte zwischen Mitternachtsblau (Nacht) und Eierschale (Tag). Jetzt ist alles Eierschale – so wie in der Farbtabelle in CLAUDE.md. Dunkelblau bleibt nur als Detail: Logo, Knöpfe beim Drüberfahren, Markierung bei den Leistungen, Beschriftungen auf Fotos, Kinobalken im Eintritt. ZURÜCK zum alten Stand: Sicherung in .claude/vor-einfarbig/ (HTML, kino.css, kino.js). Technik: In den HTML-Dateien sind die Klassen scene--night und scene--band entfernt; die Regeln dafür weiter oben sind damit wirkungslos und können bei Gelegenheit gelöscht werden. Die Text-Tokens der Nacht (--on-night-*, --line-night) zeigen jetzt auf Tag-Werte – dadurch ändern sich über 40 Stellen auf einmal, ohne dass jede einzeln angefasst wird. ===================================================================== */ :root { --on-night-2: var(--muted); --on-night-3: var(--sub); --line-night: var(--line-2); } /* Startbereich */ .hero::before, .hero::after { display: none; } /* die Kinobalken beim Wegscrollen – auf Eierschale sinnlos */ .hero-licht { background: radial-gradient(640px circle at var(--mx, 74%) var(--my, 34%), rgba(212, 167, 44, .18), transparent 62%); } .hero-kunden b { color: var(--ink); } .hero-direkt a { color: var(--ink); border-bottom-color: var(--line-2); } /* Hervorhebung: Gold als TEXT auf hellem Grund ist verboten (CLAUDE.md) – der Ton dafür ist das Blau #2B4C8C */ .scene:not(.scene--night) .gold, .gold { color: var(--blue); box-shadow: none; } /* Akt 1: das Licht läuft jetzt als Tinte über helle Schrift */ .akt-buehne::before { background: radial-gradient(60% 50% at 50% 50%, rgba(43, 76, 140, .07), transparent 70%); } .akt-z > span { background: linear-gradient(90deg, var(--ink) calc(var(--f) * 1% - 7%), rgba(15, 30, 61, .16) calc(var(--f) * 1%)); -webkit-background-clip: text; background-clip: text; color: transparent; } .akt-wende { color: var(--blue); } .akt-loes a { border-color: var(--line-2); } .akt-loes a:hover { background: var(--band); border-color: var(--ink); } .akt-loes a b { color: var(--blue); } /* Leistungen: das dunkle Feld der Markierung bleibt – seine Schrift muss hell bleiben */ .svc-tab[aria-selected="true"] small, .svc-tab[aria-selected="true"] .pr { color: rgba(242, 235, 211, .74); } /* Betriebe-Wechsel im Startbereich: helle Karte statt dunkler Bühne */ .hv-tag { border-color: var(--line-2); color: var(--muted); } .hv-dot { background: rgba(15, 30, 61, .14); } .hv-dot::after { background: var(--ink); } .hv-dot:hover:not(.on) { background: rgba(15, 30, 61, .28); } .hv-buehne { background: var(--surface); border-color: var(--line-2); box-shadow: 0 50px 90px -50px rgba(15, 30, 61, .35), inset 0 1px 0 rgba(255, 255, 255, .7); } .hv-name { color: var(--ink); } .hv-web { background: var(--bg); border: 1px solid var(--line); box-shadow: none; } .hv-mod li { background: var(--bg); border-color: var(--line); color: var(--ink); } .hv-lauf i { background: var(--line); } @keyframes hvHaken { from { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(15, 30, 61, .3); transform: scale(.8); } } .hv-pause { border-color: var(--line-2); color: var(--muted); } .hv-pause:hover { background: var(--band); color: var(--ink); border-color: var(--ink); } .hv-pause[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); } /* Starter-Paket */ .buehne-licht { background: radial-gradient(ellipse 46% 70% at 71% 40%, rgba(212, 167, 44, .16), transparent 70%); } @media (max-width: 900px) { .buehne-licht { background: radial-gradient(ellipse 80% 40% at 50% 60%, rgba(212, 167, 44, .16), transparent 70%); } } .ticket { background: var(--surface); box-shadow: 0 50px 90px -50px rgba(15, 30, 61, .38), 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .8); } .ticket::before, .ticket::after { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); } /* Finale und Abspann */ .finale::before { background: radial-gradient(56% 60% at 50% 100%, rgba(212, 167, 44, .16), transparent 70%), radial-gradient(70% 70% at 50% 0%, rgba(43, 76, 140, .07), transparent 70%); } .finale-tel a { color: var(--ink); } .abspann { background: transparent; color: var(--ink); } .credits dt { color: var(--blue); } .credits dd a:hover { color: var(--blue); } .abspann-fuss a:hover { color: var(--ink); } /* Menü am Handy: auch hell */ .mobile-menu { background: var(--bg); color: var(--ink); } body.menu-open .site-header { color: var(--ink); } body.menu-open .brand-mark { --logo-blau: var(--ink); } .mobile-menu .btn-primary:hover { background: var(--ink); color: var(--on-ink); } /* Anfrageseite: das große dunkle Feld wird hell (Regeln dafür stehen in formular.css) */ .contact { background: transparent; border: 1px solid var(--line-2); color: var(--ink); } .contact::before { background: radial-gradient(circle, rgba(212, 167, 44, .2), transparent 65%); } .contact .mini-steps span { border-color: var(--ink); color: var(--ink); } .contact .direct a { color: var(--ink); } .contact .book .btn-dark { background: var(--ink); color: var(--on-ink); } /* Vorher/Nachher-Hinweis: --sub auf dem dunkleren Beige hatte nur 4,2:1 (gemessen), --muted hat mehr */ .cmp-hint { color: var(--muted); } /* Reste der Nacht (22.10.2026) */ .akt-buehne::before { display: none; } /* der graue Schleier hinter den drei Zeilen */ /* Automatisierung zum Anfassen: die Bühne war ein dunkelblauer Block (--ink als Fläche). Jetzt hell wie die übrigen Karten; die Schriftfarben dort sind „Ink auf Hell". */ .alab-buehne { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--shadow-md); } .alab-buehne::before { background: radial-gradient(70% 60% at 100% 0%, rgba(212, 167, 44, .12), transparent 62%); } .alab-chip { background: var(--band); } .alab-zeit { color: var(--sub); } .alab-tx small { color: var(--muted); } .alab-fuss { border-top-color: var(--line-2); } .alab-link { color: var(--ink); border-bottom: 1.5px solid var(--accent); min-height: 0; padding-bottom: 2px; align-self: center; } .finale::before { display: none; } /* die Farbverläufe zeigten harte Kanten an den Rändern des Bereichs */ /* ===================================================================== Anfrage-Formular im Stil der Webseite (22.10.2026): Auswahlkarten, Farbpalette, Stil-Vorschauen ===================================================================== */ /* Schritt 1: erst die Wahl – Webseite und Automatisierung groß, der Rest klein */ .cf-wahl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 4px; } .cf-gross { grid-column: span 3; } .cf-klein { grid-column: span 2; } .cf-karte { position: relative; display: block; cursor: pointer; } .cf-karte input { position: absolute; opacity: 0; pointer-events: none; } .ck-in { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; height: 100%; padding: 14px 16px 15px; border-radius: 18px; border: 1.5px solid var(--line-2); background: var(--bg); transition: transform .45s var(--ease), border-color .25s, background-color .25s, box-shadow .45s var(--ease); } .cf-klein .ck-in { padding: 12px 13px 13px; } .ck-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 12px; background: var(--band); color: var(--ink); transition: background-color .3s, transform .5s var(--ease); } .ck-ic svg { width: 20px; height: 20px; } .ck-in b { font-size: 16px; font-weight: 640; letter-spacing: -.015em; line-height: 1.2; } .cf-klein .ck-in b { font-size: 14.5px; } .ck-in small { font-size: 13px; line-height: 1.4; color: var(--sub); } .cf-klein .ck-in small { font-size: 12.5px; } .ck-haken { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); } .ck-haken svg { width: 12px; height: 12px; } .cf-karte:hover .ck-in { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 16px 30px -22px rgba(15, 30, 61, .5); } .cf-karte input:checked + .ck-in { border-color: var(--ink); background: var(--surface); box-shadow: 0 18px 34px -22px rgba(15, 30, 61, .55), inset 0 0 0 1px var(--ink); } .cf-karte input:checked + .ck-in .ck-ic { background: var(--accent); transform: rotate(-6deg) scale(1.06); } .cf-karte input:checked + .ck-in .ck-haken { transform: scale(1); } .cf-karte input:focus-visible + .ck-in { outline: 2px solid var(--accent); outline-offset: 3px; } @media (max-width: 520px) { .cf-gross { grid-column: span 6; } .cf-klein { grid-column: span 3; } } /* Fortschrittsbalken: füllt sich mit jeder beantworteten Frage */ .cf-meter { height: 4px; margin: 14px 0 0; border-radius: 4px; background: var(--line); overflow: hidden; } .cf-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--accent)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .7s var(--ease); } /* Fragen einer Karte laufen nacheinander ein, sobald sie aufklappt */ .cf-detail.da .cf-d-titel, .cf-detail.da .cf-q { animation: kinoHoch .7s var(--ease) backwards; } .cf-detail.da .cf-q:nth-of-type(1) { animation-delay: .12s; } .cf-detail.da .cf-q:nth-of-type(2) { animation-delay: .2s; } .cf-detail.da .cf-q:nth-of-type(3) { animation-delay: .28s; } .cf-detail.da .cf-q:nth-of-type(4) { animation-delay: .36s; } .cf-detail.da .cf-q:nth-of-type(5) { animation-delay: .44s; } .cf-detail.da .cf-q:nth-of-type(6) { animation-delay: .52s; } .cf-detail .pick > span { transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--ease); } .cf-detail .pick:active > span { transform: scale(.95); } .cf-detail .pick input:checked + span { animation: cfPop .45s var(--ease); } @keyframes cfPop { 40% { transform: scale(1.06); } } /* Stile mit Mini-Vorschau: eine kleine Webseite in den Farben des Stils */ .pick.st > span { gap: 9px; padding: 6px 13px 6px 7px; } .st-mini { flex: 0 0 auto; width: 46px; height: 32px; border-radius: 7px; border: 1px solid rgba(15, 30, 61, .14); background: linear-gradient(var(--b), var(--b)) 7px 8px / 24px 4px no-repeat, linear-gradient(var(--b), var(--b)) 7px 15px / 32px 2.5px no-repeat, linear-gradient(var(--c), var(--c)) 7px 21px / 15px 5px no-repeat, var(--a); transition: transform .5s var(--ease); } .pick.st:hover .st-mini, .pick.st input:checked + span .st-mini { transform: rotate(-4deg) scale(1.08); } /* Farbpalette: 24 Farben zum Anklicken + eigene Farbe */ .sw-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; } .pick.sw { display: block; } .pick.sw .sw-f { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border-radius: 13px; border: 1px solid rgba(15, 30, 61, .16); background: var(--f); transition: transform .4s cubic-bezier(.2, 1.3, .4, 1), box-shadow .3s; } .pick.sw .sw-f svg { width: 16px; height: 16px; opacity: 0; transform: scale(.4); color: #fff; mix-blend-mode: difference; transition: opacity .25s, transform .4s cubic-bezier(.2, 1.4, .4, 1); } .pick.sw:hover .sw-f { transform: translateY(-2px) scale(1.06); } .pick.sw input:checked + .sw-f { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); transform: scale(1.05); } .pick.sw input:checked + .sw-f svg { opacity: 1; transform: none; } .pick.sw input:focus-visible + .sw-f { outline: 2px solid var(--accent); outline-offset: 3px; } .sw-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sw-eigen { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .sw-eigen input { width: 38px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); cursor: pointer; } .sw-eigen input[data-gesetzt] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } /* Beispiel-Chips unter Textfeldern: antippen = Wort wird eingetragen */ .cf-bsp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cf-bsp button { padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease); } .cf-bsp button:hover { border-color: var(--ink); color: var(--ink); } .cf-bsp button.an { background: var(--ink); border-style: solid; border-color: var(--ink); color: var(--on-ink); } .cf-bsp button:active { transform: scale(.94); } /* Handy: weniger Rand um das Formular, damit die Karten Platz haben */ @media (max-width: 640px) { .contact { padding: 8px; border-radius: 26px; } .cform { border-radius: 22px; } } .pick .st-mini { display: block; } /* formular.css blendet jedes im Chip aus (altes Häkchen) – die Vorschau ist auch ein */ /* ---- Drei Wege mit KI (25.10.2026) ---- */ .ki3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .ki3-k { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; transition: transform .35s var(--ease), border-color .35s var(--ease); } .ki3-k:hover { transform: translateY(-4px); border-color: var(--line-2); } .ki3-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--band); color: var(--ink); display: grid; place-items: center; } .ki3-ic svg { width: 24px; height: 24px; } .ki3-k h3 { margin: 4px 0 0; font-size: 1.2rem; } .ki3-k p { margin: 0; color: var(--muted); } .ki3-k .inc { margin-top: auto; padding-top: 6px; } .ki3-fuss { margin: clamp(24px, 3vw, 40px) 0 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: var(--t-lead); } @media (max-width: 900px) { .ki3 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ki3-k { transition: none; } .ki3-k:hover { transform: none; } } /* Vertrieb-Ablauf unter den KI-Karten */ .ki3-ab { list-style: none; counter-reset: ab; margin: clamp(20px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .ki3-ab li { counter-increment: ab; position: relative; padding-top: 38px; } .ki3-ab li::before { content: counter(ab); position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .ki3-ab li::after { content: ""; position: absolute; top: 14px; left: 36px; right: 6px; height: 1px; background: var(--line-2); } .ki3-ab li:last-child::after { display: none; } .ki3-ab b { display: block; margin-bottom: 4px; } .ki3-ab span { color: var(--muted); font-size: .92rem; } @media (max-width: 900px) { .ki3-ab { grid-template-columns: 1fr; } .ki3-ab li { padding: 0 0 0 42px; min-height: 34px; } .ki3-ab li::after { display: none; } } /* Drei Stufen (Startseite) und Kopf einer Stufe (Leistungen) */ .st3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .st3-k { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 2.4vw, 32px); transition: transform .35s var(--ease), border-color .35s var(--ease); } .st3-k:hover { transform: translateY(-4px); border-color: var(--line-2); } .st3-n { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-weight: 700; } .st3-k h3 { margin: 6px 0 0; font-size: 1.35rem; } .st3-t { margin: 0; font-weight: 650; color: var(--ink); } .st3-k p { margin: 0; color: var(--muted); } .st3-k .btn { margin-top: auto; align-self: flex-start; } .stufe-kopf { padding-bottom: 0; } .stufe-kopf + .scene { padding-top: clamp(24px, 3vw, 40px); } .nav-links a[aria-current="page"] { color: var(--ink); } @media (max-width: 900px) { .st3 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .st3-k { transition: none; } .st3-k:hover { transform: none; } } /* Agenten-Gruppe in der Situationsauswahl */ .alab-gruppe { margin: 10px 4px 0; font: 600 12px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); } /* Seitentitel als h1 (eine Überschrift erster Ordnung je Seite) */ .contact-info h1 { font-size: clamp(42px, 5.6vw, 82px); letter-spacing: -.055em; line-height: .98; } @media (max-width: 900px) { .contact-page .contact-info h1 { font-size: clamp(30px, 8vw, 40px); } } .legal h2.seitentitel { font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1; margin-top: 0; } /* ===== Leistungen: Stufen-Umschalter (26.10.2026) ===== */ .stufen-wahl { display: none; } html.js .stufen-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(-20px, -2vw, 0px); margin-bottom: 8px; } .sw-b { display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 18px; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .sw-b:hover { transform: translateY(-2px); border-color: var(--ink); } .sw-n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; background: var(--band); color: var(--ink); } .sw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sw-t b { font-size: 1.02rem; font-weight: 600; } .sw-t small { font-size: .84rem; color: var(--sub); } .sw-b[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #F2EBD3; } .sw-b[aria-pressed="true"] .sw-n { background: var(--accent); color: #0F1E3D; } .sw-b[aria-pressed="true"] .sw-t small { color: #D9D2BC; } .sw-b:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (max-width: 760px) { html.js .stufen-wahl { grid-template-columns: 1fr; } .sw-b { padding: 12px 14px; } } html[data-stufe="kleine"] [data-stufe]:not([data-stufe="kleine"]), html[data-stufe="mittelstand"] [data-stufe]:not([data-stufe="mittelstand"]), html[data-stufe="grosse"] [data-stufe]:not([data-stufe="grosse"]) { display: none; } /* Aus der Praxis: zwei Projekte */ .px2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); } .px-k { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 20px; transition: transform .35s var(--ease), border-color .35s var(--ease); } .px-k:hover { transform: translateY(-4px); border-color: var(--line-2); } .px-bild { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--band); } .px-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .px-t { display: flex; flex-direction: column; gap: 2px; padding: 0 6px; } .px-t b { font-size: 1.25rem; } .px-t small { color: var(--sub); font-size: .92rem; } .px-l { padding: 0 6px; font-weight: 600; color: var(--blue); } @media (max-width: 760px) { .px2 { grid-template-columns: 1fr; } } /* Beispiel-Monatsbericht unter der Betreuungs-Demo */ .mb-bsp { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2vw, 24px); display: grid; gap: 16px; } .mb-kopf { display: grid; gap: 4px; } .mb-kopf b { font-size: 1.1rem; } .mb-kopf small { color: var(--sub); } .mb-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .mb-raster div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .mb-raster dt { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); } .mb-raster dd { margin: 3px 0 0; font-size: .92rem; } .mb-liste b, .mb-next b { display: block; font-size: .95rem; margin-bottom: 6px; } .mb-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .mb-liste li { display: flex; align-items: center; gap: 9px; font-size: .92rem; } .mb-liste li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--accent); color: #0F1E3D; } .mb-next { border-top: 1px dashed var(--line-2); padding-top: 12px; font-size: .92rem; color: var(--muted); } @media (max-width: 520px) { .mb-raster { grid-template-columns: 1fr; } } /* ===== Startbereich: Beispiele je Stufe (26.10.2026) ===== */ .hv-chips.kette { counter-reset: kette; } .hv-chips.kette em::before { counter-increment: kette; content: counter(kette); display: inline-block; width: 15px; height: 15px; margin-right: 6px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center; } .hv-chips.kette em.frei { background: var(--accent); color: var(--accent-ink); font-weight: 700; } .hv-chips.kette em.frei::before { background: var(--accent-ink); color: var(--accent); } /* ===== Ihre Situation: Betriebsgröße wählen (26.10.2026) ===== */ .akt-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .aw-b { font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .aw-b:hover { border-color: var(--ink); } .aw-b[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #F2EBD3; } .aw-b:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .akt-satz[hidden] { display: none; } .akt-satz.rein { animation: aktRein .45s var(--ease) both; } @keyframes aktRein { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .akt-satz.rein { animation: none; } } @media (max-width: 700px) { .akt-wahl { gap: 6px; } .aw-b { padding: 8px 12px; font-size: 13.5px; } } /* Ihre Situation: Größen an die Bildschirmhöhe koppeln, damit Schalter, drei Zeilen, Wende und Links in jedes Fenster passen */ .akt-wahl { margin-top: clamp(10px, 2vh, 18px); } .akt-zeilen { margin-top: clamp(14px, 2.6vh, 24px); gap: clamp(10px, 2vh, 22px); } .akt-z > span { font-size: clamp(1.55rem, min(5vw, 7.4vh), 4.4rem); } .akt-z small { margin-top: 6px; font-size: clamp(.86rem, min(1.2vw, 2vh), 1.05rem); } .akt-wende { margin-top: clamp(12px, 3.2vh, 44px); font-size: clamp(1.9rem, min(6vw, 9vh), 5rem); } .akt-loes { margin-top: clamp(12px, 2.4vh, 24px); } @media (max-width: 700px) { .akt-loes { gap: 8px; } .akt-loes a { padding: 8px 12px; font-size: 13.5px; } } @media (max-height: 700px) { .akt-z > span { font-size: clamp(1.4rem, min(5vw, 6.6vh), 3.6rem); } .akt-z small { font-size: .82rem; margin-top: 4px; } .akt-wende { font-size: clamp(1.7rem, min(6vw, 8vh), 4rem); } } /* Hinweis unter dem Stufen-Umschalter */ .stufen-hint { margin: 10px 0 0; font-size: .92rem; color: var(--sub); } .stufen-hint a { color: var(--blue); font-weight: 600; } /* ---------- Betreuung: drei Stufen ---------- */ .care-st { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; } .care-st li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); } .care-st b { font-size: 1rem; color: var(--ink); } .care-st span { grid-column: 1; font-size: .88rem; color: var(--muted); line-height: 1.45; } .care-st em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-weight: 700; font-size: 1.25rem; color: var(--ink); white-space: nowrap; text-align: right; } .care-st em small { display: block; font-size: .72rem; font-weight: 500; color: var(--sub); } @media (max-width: 480px) { .care-st li { grid-template-columns: 1fr; } .care-st em { grid-column: 1; grid-row: auto; text-align: left; } .care-st em small { display: inline; margin-left: 4px; } } /* Betreuung auswählen */ fieldset.care-st { border: 0; padding: 0; min-width: 0; } .care-st legend { padding: 0; margin-bottom: 10px; font-size: .9rem; color: var(--muted); } .care-opt { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 14px 16px 14px 48px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .18s, background-color .18s; } .care-opt + .care-opt { margin-top: 10px; } .care-opt input { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; accent-color: var(--ink); cursor: pointer; } .care-opt:hover { border-color: var(--ink); } .care-opt:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); } .care-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .care-opt .co-k b { display: block; font-size: 1rem; color: var(--ink); } .care-opt .co-k > span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.45; margin-top: 2px; } .care-opt em { font-style: normal; font-weight: 700; font-size: 1.25rem; color: var(--ink); text-align: right; white-space: nowrap; } .care-opt em small { display: block; font-size: .72rem; font-weight: 500; color: var(--sub); } .pick small { opacity: .7; font-weight: 500; margin-left: 4px; } @media (max-width: 480px) { .care-opt { grid-template-columns: 1fr; } .care-opt em { text-align: left; } .care-opt em small { display: inline; margin-left: 4px; } } @media (prefers-reduced-motion: reduce) { .care-opt { transition: none; } } /* Beispiel-Verwaltung (Elaa Beauty) – Leistungen und Startseite */ .vwb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; } .vwb-fenster { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; } .vwb-leiste { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--band); overflow-x: auto; scrollbar-width: none; } .vwb-leiste button { font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; white-space: nowrap; } .vwb-leiste button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); } .vwb-leiste button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .vwb-tafel { padding: clamp(14px, 2vw, 22px); } .vwb-tafel[hidden] { display: none; } .vwb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .vwb-liste li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: .95rem; } .vwb-liste li b { color: var(--ink); } .vwb-liste li span { color: var(--muted); min-width: 0; } .vwb-liste li i { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .vwb-liste li i.vwb-ab { color: var(--ink); background: var(--accent-soft); } .vwb-stempel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 360px; margin: 6px 0 14px; } .vwb-stempel i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line-2); } .vwb-stempel i.an { border: 2px solid var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--surface); } .vwb-fein { margin: 14px 0 0; font-size: .85rem; color: var(--sub); } .vwb-auto h3 { margin: 0 0 12px; font-size: 1.1rem; } .vwb-auto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .vwb-auto li { display: grid; gap: 2px; padding: 0 0 10px 16px; border-left: 3px solid var(--accent); } .vwb-auto li b { color: var(--ink); } .vwb-auto li span { color: var(--muted); font-size: .95rem; } /* Beispiel-Verwaltung: ein Ablauf statt Reiter (nutzt den .story-Takt aus kino.js) */ .vwb-story { padding: clamp(16px, 2.2vw, 26px); display: grid; gap: 16px; } .vwb-cap { position: relative; margin: 0; min-height: 3.1em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 650; color: var(--ink); } .vwb-cap span { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .vwb-story .c1 { opacity: 1; transform: none; } .vwb-story.is-1 .c1, .vwb-story.is-2 .c1, .vwb-story.is-3 .c1, .vwb-story.is-4 .c1 { opacity: 0; transform: translateY(-8px); } .vwb-story.is-1:not(.is-2) .c2, .vwb-story.is-2:not(.is-3) .c3, .vwb-story.is-3:not(.is-4) .c4, .vwb-story.is-4 .c5 { opacity: 1; transform: none; } .vwb-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; } .vwb-karte { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; } .vwb-karte > b { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); font-weight: 600; } .vwb-zeiten { display: flex; gap: 8px; flex-wrap: wrap; } .vwb-zeiten i { font-style: normal; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-weight: 600; color: var(--muted); transition: background .35s, color .35s, border-color .35s; } .vwb-zeiten i.wahl { border-color: var(--ink); } .vwb-story.is-1 .vwb-zeiten i.wahl { background: var(--ink); color: var(--on-ink); } .vwb-btn { justify-self: start; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: .92rem; transition: transform .25s var(--ease); } .vwb-story.is-1:not(.is-2) .vwb-btn { transform: scale(.94); } .vwb-story .vwb-liste li { padding: 9px 12px; grid-template-columns: 3.4em minmax(0, 1fr) auto; } .vwb-neu { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s; } .vwb-story.is-1 .vwb-neu { opacity: 1; transform: none; background: var(--accent-soft); } .vwb-neu .ab { display: none; } .vwb-story.is-4 .vwb-neu .ok { display: none; } .vwb-story.is-4 .vwb-neu .ab { display: inline-block; } .vwb-story.is-4 .vwb-neu { background: var(--bg); } .vwb-chips { display: flex; gap: 8px; flex-wrap: wrap; min-height: 2.2em; position: relative; } .vwb-chip { font-size: .85rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .vwb-story.is-2 .vwb-chip.m { opacity: 1; transform: none; } .vwb-story.is-3 .vwb-chip.k { opacity: 1; transform: none; } .vwb-story.is-4 .vwb-chip.a { opacity: 1; transform: none; background: var(--accent-soft); } .vwb-story .vwb-fein { margin: 0; } @media (max-width: 900px) { .vwb { grid-template-columns: 1fr; } } @media (max-width: 560px) { .vwb-zwei { grid-template-columns: 1fr; } .vwb-cap { min-height: 4.2em; } } @media (prefers-reduced-motion: reduce) { .vwb-cap span, .vwb-chip, .vwb-neu, .vwb-zeiten i, .vwb-btn { transition: none; } } /* Zwei Pakete nebeneinander (Leistungen, Kleine Betriebe) */ .ang2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .ang2-k { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow-md); } .ang2-k h3 { margin: 0; font-size: var(--t-h3); } .ang2-k .ticket-tag { justify-self: start; } .ang2-p { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; } .ang2-p b { font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; } .ang2-p small { font-size: 1.3rem; color: var(--muted); } .ang2-w { margin: 0; color: var(--sub); font-size: .9rem; } .ang2-k .btn { justify-self: start; margin-top: 6px; } @media (max-width: 820px) { .ang2 { grid-template-columns: 1fr; } }