/* ========================================================================== CM Autoglas . Showcase 2026 . Konzeptstudie Statisches CSS, kein Build-Schritt. Mobile first. ========================================================================== */ /* 1. Tokens ------------------------------------------------------------- */ :root{ --ink: #060a0e; --ink-2: #0c131a; --ink-3: #121e28; --ink-4: #1a2a36; --paper: #f4f1ec; --paper-2: #e8e3da; --paper-3: #d9d2c6; --fg: #eef4f8; --fg-dim: #97a9b6; --fg-ink: #0a1219; --fg-ink-dim: #55636e; --amber: #ff8b3d; --amber-2: #ffb078; --amber-ink: #a8480c; /* Amber-Variante fuer helle Flaechen, 5.2:1 auf --paper */ --cool: #7ad3ff; --violet: #a693ff; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --line-ink: rgba(10,18,25,.14); --maxw: 1320px; --gutter: clamp(1.25rem, 5vw, 4.5rem); --ff-display: "Instrument Serif", "Times New Roman", Georgia, serif; --ff-ui: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --ease: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); --refract: linear-gradient(100deg, var(--cool) 0%, #cfe9ff 22%, var(--violet) 46%, var(--amber-2) 72%, var(--amber) 100%); --h3-item: clamp(1.5rem, 2.6vw, 2.1rem); } /* 2. Reset -------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; padding:0; } ul,ol{ list-style:none; } img,svg,video{ display:block; max-width:100%; } button,input,textarea,select{ font:inherit; color:inherit; } a{ color:inherit; text-decoration:none; } body{ font-family:var(--ff-ui); font-size:clamp(1rem, .96rem + .2vw, 1.075rem); line-height:1.62; font-weight:350; letter-spacing:-.005em; color:var(--fg); background:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* 3. Grain + Vignette --------------------------------------------------- */ .grain{ position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.055; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cursor-light{ position:fixed; z-index:1; top:0; left:0; width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(122,211,255,.14), rgba(122,211,255,0) 62%); opacity:0; transition:opacity .5s var(--ease); will-change:transform; } body.has-pointer .cursor-light{ opacity:1; } body.on-paper .cursor-light{ background:radial-gradient(circle, rgba(255,139,61,.16), rgba(255,139,61,0) 62%); } @media (pointer:coarse){ .cursor-light{ display:none; } } /* 4. Layout ------------------------------------------------------------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ position:relative; padding-block:clamp(4.5rem, 9vw, 9.5rem); } .section--tight{ padding-block:clamp(3rem, 6vw, 6rem); } .section--paper{ background:var(--paper); color:var(--fg-ink); } .section--paper .lede,.section--paper .muted{ color:var(--fg-ink-dim); } /* Amber ist auf Papier nur 2.07:1 . auf hellen Flaechen die dunkle Variante */ .section--paper .usp__n, .section--paper .note__k, .section--paper .card__no, .section--paper .step::before, .section--paper .crumb a:hover{ color:var(--amber-ink); } .section--paper .step p{ color:var(--fg-ink-dim); } /* Trennstriche und der senkrechte Verbinder des Zeitstrahls stehen sonst in --line (weiss) auf hellem Papier und sind damit unsichtbar. */ .section--paper .step{ border-top-color:var(--line-ink); } .section--paper .step::after{ background:var(--line-ink); } .section--paper :focus-visible{ outline-color:var(--amber-ink); } .section--ink2{ background:var(--ink-2); } .section--paper::before,.section--ink2::before{ content:""; position:absolute; inset:0 0 auto 0; height:1.5px; background:var(--refract); opacity:.4; } .grid{ display:grid; gap:clamp(1.25rem, 2.6vw, 2.25rem); } .g-2{ grid-template-columns:1fr; } .g-3{ grid-template-columns:1fr; } @media (min-width:720px){ .g-2{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1040px){ .g-3{ grid-template-columns:repeat(3,1fr); } } /* 5. Typografie --------------------------------------------------------- */ .display{ font-family:var(--ff-display); font-weight:400; line-height:.92; letter-spacing:-.025em; text-wrap:balance; } .d-xl{ font-size:clamp(3.1rem, 11.5vw, 10.5rem); } .d-l { font-size:clamp(2.6rem, 6.6vw, 5.4rem); } .d-m { font-size:clamp(2rem, 4.2vw, 3.35rem); } .d-s { font-size:clamp(1.5rem, 2.6vw, 2.1rem); } .it{ font-style:italic; } .refract{ background:var(--refract); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sweep 9s linear infinite; } @keyframes sweep{ to{ background-position:220% 0; } } .eyebrow{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); display:inline-flex; align-items:center; gap:.7rem; } .eyebrow::before{ content:""; width:2.2rem; height:1px; background:currentColor; opacity:.55; } .section--paper .eyebrow{ color:var(--fg-ink-dim); } .lede{ font-size:clamp(1.06rem, 1.5vw, 1.32rem); line-height:1.58; color:var(--fg-dim); max-width:62ch; font-weight:330; } .muted{ color:var(--fg-dim); } .small{ font-size:.86rem; line-height:1.55; } p + p{ margin-top:1em; } .hairline{ height:1px; background:var(--line); border:0; } .section--paper .hairline{ background:var(--line-ink); } /* 6. Buttons ------------------------------------------------------------ */ .btn{ --bg:var(--amber); --fgc:#1a0d03; position:relative; display:inline-flex; align-items:center; gap:.75rem; padding:1.05rem 1.85rem; border:0; border-radius:999px; cursor:pointer; background:var(--bg); color:var(--fgc); font-family:var(--ff-ui); font-size:.95rem; font-weight:560; letter-spacing:.01em; overflow:hidden; isolation:isolate; transition:transform .5s var(--ease), box-shadow .5s var(--ease); box-shadow:0 0 0 rgba(255,139,61,0); } .btn::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(100deg,#fff0e4,var(--amber-2)); transform:translateY(102%); transition:transform .55s var(--ease); } .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -14px rgba(255,139,61,.6); } .btn:hover::after{ transform:translateY(0); } .btn .arw{ transition:transform .45s var(--ease); } .btn:hover .arw{ transform:translateX(4px); } .btn--ghost{ --bg:transparent; --fgc:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2); } .btn--ghost::after{ background:rgba(255,255,255,.94); } .btn--ghost:hover{ --fgc:var(--fg-ink); box-shadow:inset 0 0 0 1px transparent; } .section--paper .btn--ghost{ --fgc:var(--fg-ink); box-shadow:inset 0 0 0 1px var(--line-ink); } .section--paper .btn--ghost::after{ background:var(--ink); } .section--paper .btn--ghost:hover{ --fgc:var(--paper); } .btn--lg{ padding:1.2rem 2.25rem; font-size:1.02rem; } .link-u{ position:relative; display:inline-flex; align-items:center; gap:.5rem; font-weight:500; padding-block:.15rem; } .link-u::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .45s var(--ease); } .link-u:hover::after{ transform-origin:left; animation:relink .55s var(--ease); } @keyframes relink{ 0%{transform:scaleX(1);transform-origin:right} 49%{transform:scaleX(0);transform-origin:right} 50%{transform:scaleX(0);transform-origin:left} 100%{transform:scaleX(1);transform-origin:left} } /* 7. Header ------------------------------------------------------------- */ .hdr{ position:fixed; top:0; left:0; right:0; z-index:800; transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; } .hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:clamp(4.25rem, 6vw, 5.5rem); } .hdr.is-stuck{ background:rgba(6,10,14,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); } .hdr.is-stuck::after{ content:""; position:absolute; inset:auto 0 -1px 0; height:1px; background:var(--refract); opacity:.22; } .hdr.is-hidden{ transform:translateY(-102%); } .hdr{ transform:translateY(0); transition:transform .55s var(--ease), background .5s var(--ease), border-color .5s var(--ease); } .brand{ display:flex; align-items:center; gap:.8rem; } .brand__mark{ width:34px; height:34px; flex:none; } .brand__ring{ transform-box:fill-box; transform-origin:center; animation:ripple 3.4s var(--ease-io) infinite; } .brand__txt{ line-height:1.05; } .brand__n{ font-family:var(--ff-display); font-size:1.32rem; letter-spacing:-.01em; } .brand__s{ font-family:var(--ff-mono); font-size:.575rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); } .nav{ display:none; } @media (min-width:1000px){ .nav{ display:flex; align-items:center; gap:2.1rem; } .nav a{ font-size:.925rem; font-weight:420; color:var(--fg-dim); position:relative; transition:color .35s; } .nav a::after{ content:""; position:absolute; left:0; bottom:-.35rem; width:100%; height:1px; background:var(--amber); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); } .nav a:hover,.nav a[aria-current="page"]{ color:var(--fg); } .nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; } } .hdr__cta{ display:none; } @media (min-width:1000px){ .hdr__cta{ display:inline-flex; } } .burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:6px; width:46px; height:46px; padding:0 11px; border:1px solid var(--line-2); border-radius:999px; background:transparent; cursor:pointer; } @media (min-width:1000px){ .burger{ display:none; } } .burger span{ display:block; height:1.5px; background:var(--fg); transition:transform .45s var(--ease), opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } .drawer{ position:fixed; inset:0; z-index:790; background:var(--ink); padding:7rem var(--gutter) calc(3rem + env(safe-area-inset-bottom,0)); display:flex; flex-direction:column; justify-content:space-between; clip-path:inset(0 0 100% 0); overflow-y:auto; /* visibility haelt das geschlossene Menue aus Tab-Reihenfolge und Screenreader heraus . clip-path allein tut das nicht. BEWUSST OHNE visibility in der Transition: eine Transition mit Dauer 0s wird nicht ausgefuehrt, der berechnete Wert blieb dadurch nach dem Schliessen auf "visible" haengen . die Menuelinks lagen unsichtbar weiter im Tastaturfluss. Das verzoegerte Umschalten macht jetzt site.js. */ visibility:hidden; transition:clip-path .7s var(--ease); } .drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .7s var(--ease); } .drawer a.drawer__l{ display:block; font-family:var(--ff-display); font-size:clamp(2.1rem,9vw,3.2rem); line-height:1.18; border-bottom:1px solid var(--line); padding-block:.6rem; opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .drawer.is-open a.drawer__l{ opacity:1; transform:none; } .drawer__foot{ margin-top:2.5rem; display:grid; gap:1rem; } /* 8. Hero --------------------------------------------------------------- */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-block:9rem 3.5rem; overflow:hidden; background:radial-gradient(120% 90% at 78% 8%, #16303f 0%, #0a141c 42%, var(--ink) 78%); } .hero__glass{ position:absolute; inset:-10% -5%; z-index:0; pointer-events:none; opacity:.32; will-change:transform; } .hero__beam{ position:absolute; top:-40%; left:50%; width:70vw; height:170%; z-index:0; transform:translateX(-50%) rotate(14deg); background:linear-gradient(90deg, rgba(122,211,255,0) 0%, rgba(122,211,255,.09) 45%, rgba(255,139,61,.10) 60%, rgba(255,139,61,0) 100%); filter:blur(38px); pointer-events:none; } .hero__in{ position:relative; z-index:2; width:100%; } .hero__badge{ display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.6rem; padding:.5rem 1rem .5rem .65rem; border:1px solid var(--line-2); border-radius:999px; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; background:rgba(255,255,255,.03); backdrop-filter:blur(8px); } .hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 rgba(255,139,61,.55); animation:pulse 2.4s infinite; } @keyframes pulse{ 70%{ box-shadow:0 0 0 11px rgba(255,139,61,0); } 100%{ box-shadow:0 0 0 0 rgba(255,139,61,0); } } .hero__brand{ margin-bottom:.5rem; color:var(--amber); } .hero h1{ margin-bottom:1.8rem; text-wrap:balance; } .hero__grid{ display:grid; gap:2.5rem; align-items:end; } @media (min-width:960px){ .hero__grid{ grid-template-columns:1.35fr .85fr; gap:4rem; } /* Auf dem Desktop war der Hero ueber zwei Bildschirmhoehen hoch, die CTAs lagen komplett unter der Falz. Headline zusaetzlich an die Viewporthoehe koppeln. */ .hero{ padding-block:6.5rem 3.5rem; } .hero h1{ font-size:clamp(3.1rem, min(9.5vw, 13vh), 9.5rem); margin-bottom:1.4rem; } .hero__acts{ margin-top:1.6rem; } } .hero__acts{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; } .hero__meta{ display:grid; gap:1.4rem; } .hero__meta dl{ display:grid; gap:.2rem; padding-top:1rem; border-top:1px solid var(--line); } .hero__meta dt{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); } .hero__meta dd{ font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.1; } .scrollcue{ position:absolute; left:var(--gutter); bottom:1.6rem; z-index:2; display:none; align-items:center; gap:.7rem; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); } @media (min-width:960px){ .scrollcue{ display:flex; } } .scrollcue i{ display:block; width:1px; height:44px; background:linear-gradient(var(--fg-dim),transparent); animation:cue 2.2s var(--ease-io) infinite; transform-origin:top; } @keyframes cue{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(0);transform-origin:bottom} } /* 9. Word reveal -------------------------------------------------------- */ .w{ display:inline-block; overflow:hidden; vertical-align:top; } .wi{ display:inline-block; transform:translateY(105%); transition:transform 1.05s var(--ease); } .is-in .wi{ transform:translateY(0); } /* 10. Reveal ------------------------------------------------------------ */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:calc(var(--i,0) * 90ms); } [data-reveal].is-in{ opacity:1; transform:none; } [data-reveal="line"]{ transform:none; clip-path:inset(0 100% 0 0); opacity:1; transition:clip-path 1.1s var(--ease); } [data-reveal="line"].is-in{ clip-path:inset(0 0 0 0); } /* 11. Marquee ----------------------------------------------------------- */ .marquee{ position:relative; overflow:hidden; padding-block:1.15rem; border-block:1px solid var(--line); background:var(--ink-2); } .marquee__t{ display:flex; width:max-content; gap:3.5rem; animation:slide 46s linear infinite; } .marquee:hover .marquee__t,.marquee:focus-within .marquee__t{ animation-play-state:paused; } @keyframes slide{ to{ transform:translateX(-50%); } } .marquee__i{ display:inline-flex; align-items:center; gap:3.5rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); white-space:nowrap; } .marquee__i b{ color:var(--amber); font-weight:400; } /* 12. Karten ------------------------------------------------------------ */ .card{ position:relative; padding:clamp(1.6rem,2.6vw,2.4rem); border-radius:4px; background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014)); border:1px solid var(--line); overflow:hidden; isolation:isolate; transition:border-color .6s var(--ease), transform .6s var(--ease); transform-style:preserve-3d; } .card::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(122,211,255,.16), transparent 62%); transition:opacity .5s var(--ease); } .card:hover{ border-color:var(--line-2); } .card:hover::before{ opacity:1; } .card.is-tapped::before{ opacity:1; } .card__no{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; color:var(--amber); } .card h3{ font-family:var(--ff-display); font-size:var(--h3-item); line-height:1.08; margin:1.15rem 0 .8rem; font-weight:400; } .card p{ color:var(--fg-dim); font-size:.98rem; } .card__list{ margin-top:1.2rem; display:grid; gap:.5rem; } .card__list li{ display:flex; gap:.6rem; font-size:.9rem; color:var(--fg-dim); } .card__list li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.62rem; border-radius:50%; background:var(--amber); } .card__ico{ width:44px; height:44px; color:var(--cool); } .card__ico [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease); } .card.is-in .card__ico [data-draw]{ stroke-dashoffset:0; } .card__ico [data-draw]:nth-child(2){ transition-delay:.08s; } .card__ico [data-draw]:nth-child(3){ transition-delay:.16s; } .card__ico [data-draw]:nth-child(4){ transition-delay:.24s; } .section--paper .card{ background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.45)); border-color:var(--line-ink); } .section--paper .card p,.section--paper .card__list li{ color:var(--fg-ink-dim); } .section--paper .card::before{ background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,139,61,.14), transparent 62%); } .section--paper .card__ico{ color:var(--ink-4); } /* 13. USP Split --------------------------------------------------------- */ .split{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start; } @media (min-width:900px){ .split{ grid-template-columns:.9fr 1.1fr; } } .usp{ display:grid; gap:0; } .usp__row{ display:grid; gap:.4rem 2rem; padding-block:clamp(1.6rem,2.6vw,2.3rem); border-top:1px solid var(--line-ink); position:relative; } @media (min-width:760px){ .usp__row{ grid-template-columns:5.5rem 1fr; } } .usp__n{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.18em; color:var(--amber); padding-top:.55rem; } .usp__row h3{ font-family:var(--ff-display); font-weight:400; font-size:var(--h3-item); line-height:1.06; margin-bottom:.65rem; } .usp__row p{ color:var(--fg-ink-dim); max-width:60ch; } /* 14. Stat / Zahlenband ------------------------------------------------- */ .stats{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); } @media (min-width:680px){ .stats{ grid-template-columns:repeat(4,1fr); } } .stat{ position:relative; background:var(--ink); padding:clamp(1.8rem,3.6vw,3rem) clamp(1.3rem,2.2vw,2.2rem); overflow:hidden; isolation:isolate; } .stat::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(122,211,255,.16), transparent 62%); transition:opacity .5s var(--ease); } .stat:hover::before{ opacity:1; } .stat__v{ font-family:var(--ff-display); font-size:clamp(2.8rem,6.5vw,5.2rem); line-height:.95; letter-spacing:-.03em; } .stat__l{ margin-top:.6rem; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); } /* 15. Zitate ------------------------------------------------------------ */ .quotes{ display:flex; gap:1.25rem; width:max-content; animation:slide 64s linear infinite; } .quotes:hover,.quotes:focus-within{ animation-play-state:paused; } .quote{ width:min(84vw,26rem); padding:2rem; border:1px solid var(--line); border-radius:4px; background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); display:flex; flex-direction:column; gap:1rem; } .quote p{ font-family:var(--ff-display); font-size:1.32rem; line-height:1.32; } .quote footer{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-top:auto; } .stars{ display:flex; gap:.22rem; color:var(--amber); } .stars svg{ width:15px; height:15px; } /* 16. Servicegebiet ----------------------------------------------------- */ .map{ position:relative; } .map svg{ width:100%; height:auto; overflow:visible; } .map-stage{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); height:clamp(28rem,88vh,58rem); background:radial-gradient(130% 100% at 50% 12%, #16303f 0%, #0a141c 46%, var(--ink) 82%); } .map-stage svg{ width:100%; height:100%; } .map .node{ cursor:default; transition:opacity .4s var(--ease); } .map .node circle.core{ fill:var(--amber); } .map .node circle.ring{ fill:none; stroke:var(--amber); stroke-width:1; opacity:.5; transform-box:fill-box; transform-origin:center; animation:ripple 3.4s var(--ease-io) infinite; } .map .node.sec circle.core{ fill:var(--cool); } .map .node.sec circle.ring{ stroke:var(--cool); animation-delay:1.1s; } @keyframes ripple{ 0%{ transform:scale(.4); opacity:.65 } 100%{ transform:scale(3.4); opacity:0 } } .map .lbl{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--fg-dim); /* Die Routenlinien laufen sonst quer durch die Beschriftung . dunkle Kontur dahinter */ paint-order:stroke; stroke:#0a141c; stroke-width:3.5px; stroke-linejoin:round; } .map .route{ fill:none; stroke:url(#routeg); stroke-width:1.4; stroke-dasharray:4 6; animation:dash 22s linear infinite; } @keyframes dash{ to{ stroke-dashoffset:-260; } } .map .land{ fill:rgba(255,255,255,.028); stroke:var(--line-2); stroke-width:1; } .arealist{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); } @media (min-width:640px){ .arealist{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px){ .arealist{ grid-template-columns:repeat(3,1fr); } } .arealist li{ background:var(--ink); padding:1.05rem 1.3rem; font-size:.94rem; display:flex; justify-content:space-between; gap:1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .4s; } .arealist li:hover{ background:var(--ink-3); } .arealist li span{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; color:var(--fg-dim); align-self:center; } /* 17. Accordion --------------------------------------------------------- */ .acc{ border-top:1px solid var(--line-ink); } /* padding-inline bewusst NICHT animiert: die Panelhoehe wird direkt nach dem Setzen von .is-expanded gemessen (site.js, Modul 10). Waere das Padding noch im Uebergang, saehe die Messung den Startwert und das Panel bliebe zu kurz. */ .acc__i{ position:relative; border-bottom:1px solid var(--line-ink); border-radius:0; transition:background .4s var(--ease), border-radius .4s var(--ease); } .acc__i.is-expanded{ background:linear-gradient(160deg, #fff 0%, var(--paper) 140%); border-radius:6px; padding-inline:clamp(1rem,2.5vw,1.5rem); } .acc__b{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:clamp(1.15rem,2.2vw,1.7rem) 0; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--ff-display); font-weight:400; font-size:clamp(1.18rem,2.2vw,1.6rem); line-height:1.2; color:inherit; transition:color .35s; } .acc__b:hover{ color:var(--amber); } .acc__pm{ position:relative; flex:none; width:26px; height:26px; margin-top:.25rem; } .acc__pm::before,.acc__pm::after{ content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor; transition:transform .5s var(--ease); } .acc__pm::after{ transform:rotate(90deg); } .acc__b[aria-expanded="true"] .acc__pm::after{ transform:rotate(0); } .acc__p{ overflow:hidden; height:0; transition:height .6s var(--ease); } .acc__p > div{ padding-bottom:1.7rem; max-width:68ch; color:var(--fg-ink-dim); } .acc__p > div > * + *{ margin-top:.9rem; } .acc__p ul{ display:grid; gap:.45rem; } .acc__p ul li{ display:flex; gap:.65rem; } .acc__p ul li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.6rem; border-radius:50%; background:var(--amber); } /* 18. CTA-Band ---------------------------------------------------------- */ .cta{ position:relative; overflow:hidden; background:radial-gradient(90% 130% at 20% -10%, #17303f 0%, rgba(23,48,63,0) 62%), var(--ink-2); } .cta__bg{ position:absolute; inset:0; z-index:0; opacity:.5; } .cta__in{ position:relative; z-index:1; text-align:center; display:grid; justify-items:center; gap:1.6rem; } .tel{ position:relative; font-family:var(--ff-display); font-size:clamp(2.6rem,9vw,6.5rem); line-height:.95; letter-spacing:-.03em; display:inline-block; margin-block:clamp(.5rem,2.5vw,1.4rem); /* Der Bindestrich waere sonst eine Umbruchstelle mitten in der Rufnummer */ white-space:nowrap; } .tel:hover{ color:var(--amber); } .tel::after{ content:""; position:absolute; left:0; right:0; bottom:-.15em; height:2px; background:var(--refract); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); } .tel:hover::after{ transform:scaleX(1); } .disclaimer{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); border:1px dashed var(--line-2); padding:.6rem 1rem; border-radius:3px; display:inline-block; } .section--paper .disclaimer{ color:var(--fg-ink-dim); border-color:var(--line-ink); } /* 19. Formular ---------------------------------------------------------- */ .form{ display:grid; gap:1.35rem; } @media (min-width:720px){ .form__2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.35rem; } } .field{ position:relative; } .field input,.field textarea,.field select{ width:100%; padding:1.5rem 1rem .7rem; background:rgba(255,255,255,.035); border:0; border-bottom:1px solid var(--line-2); border-radius:3px 3px 0 0; transition:background .4s, border-color .4s; outline:0; font-size:1rem; } /* Natives Dropdown-Popup wird vom Browser gerendert, nicht von .field-CSS. Ohne color-scheme zeichnet es helle System-Standardfarben, während der geerbte helle Textcolor bestehen bleibt: weiß auf weiß. color-scheme:dark lässt Chrome/Edge das ganze Popup passend dunkel rendern; die explizite option-Farbe ist das Firefox-Fallback, falls color-scheme dort nicht für die Popup-Farbwahl greift. */ .field select{ color-scheme:dark; } .field select option{ background:var(--ink-3); color:var(--fg); } .field textarea{ min-height:9rem; resize:vertical; } .field label{ position:absolute; left:1rem; top:1.15rem; font-size:.95rem; color:var(--fg-dim); pointer-events:none; transform-origin:left top; transition:transform .35s var(--ease), color .35s; } .field input:focus,.field textarea:focus,.field select:focus{ background:rgba(255,255,255,.07); border-bottom-color:var(--amber); box-shadow:0 8px 20px -14px var(--amber); } .field input:focus + label,.field textarea:focus + label, .field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label, .field select:focus + label,.field select.has-val + label{ transform:translateY(-.72rem) scale(.74); color:var(--amber); } .form__note{ font-size:.82rem; color:var(--fg-dim); } .form__privacy{ font-size:.8rem; line-height:1.55; color:var(--fg-dim); max-width:60ch; } .field__err{ display:block; margin-top:.45rem; font-size:.8rem; line-height:1.4; color:#ff8f8f; } .field.has-err input,.field.has-err textarea,.field.has-err select{ border-bottom-color:#ff8f8f; } .formmsg{ display:none; padding:1rem 1.2rem; border:1px solid var(--line-2); border-radius:3px; background:rgba(122,211,255,.07); font-size:.92rem; } .formmsg.is-on{ display:block; } .formmsg.is-ok{ border-color:#4ade80; background:rgba(74,222,128,.1); color:#4ade80; } .formmsg.is-error{ border-color:#ff6363; background:rgba(255,99,99,.1); color:#ff6363; } /* 19b. Foto-Upload -------------------------------------------------------- */ .upload{ position:relative; } .upload__input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .upload__zone{ display:flex; align-items:center; gap:1rem; padding:1.3rem 1.4rem; border:1px dashed var(--line-2); border-radius:4px; background:rgba(255,255,255,.035); color:var(--fg-dim); cursor:pointer; transition:border-color .35s, background .35s, color .35s; } .upload__ico{ flex:none; color:var(--fg-dim); transition:color .35s; } .upload__txt{ display:block; font-size:.92rem; line-height:1.5; } .upload__txt strong{ display:block; color:var(--fg); font-weight:400; font-size:1rem; } .upload:hover .upload__zone,.upload.is-drag .upload__zone{ border-color:var(--amber); background:rgba(255,139,61,.06); color:var(--fg-dim); } .upload:hover .upload__ico,.upload.is-drag .upload__ico{ color:var(--amber); } .upload__input:focus-visible + .upload__zone{ outline:2px solid var(--amber); outline-offset:3px; } .upload__list{ display:grid; gap:.5rem; margin-top:.9rem; } .upload__list:empty{ display:none; } .upload__item{ display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem; border:1px solid var(--line-2); border-radius:3px; background:rgba(255,255,255,.03); font-size:.86rem; color:var(--fg-dim); } .upload__item img{ flex:none; width:34px; height:34px; object-fit:cover; border-radius:2px; } .upload__item span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); } .upload__rm{ flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); background:none; color:var(--fg-dim); cursor:pointer; line-height:1; transition:border-color .3s, color .3s; } .upload__rm:hover{ border-color:var(--amber); color:var(--amber); } .upload__hint{ margin-top:.6rem; font-size:.78rem; color:#ff8f8f; } /* 20. Kontaktkacheln ---------------------------------------------------- */ .tiles{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); } @media (min-width:760px){ .tiles{ grid-template-columns:repeat(3,1fr); } } .tile{ position:relative; background:var(--ink); padding:clamp(1.5rem,2.6vw,2.2rem); display:grid; gap:.55rem; align-content:start; transition:background .45s var(--ease); overflow:hidden; isolation:isolate; } .tile:hover{ background:var(--ink-3); } .tile::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(122,211,255,.16), transparent 62%); transition:opacity .5s var(--ease); } .tile:hover::before{ opacity:1; } .tile__k{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); } .tile__v{ font-family:var(--ff-display); font-size:clamp(1.45rem,2.6vw,2rem); line-height:1.08; } /* 21. Footer ------------------------------------------------------------ */ .ftr{ position:relative; background:var(--ink); border-top:1px solid var(--line); padding-block:clamp(3rem,6vw,5rem) 2rem; } /* Die fixierte Callbar lag sonst ueber der letzten Footerzeile */ @media (max-width:999px){ .ftr{ padding-bottom:calc(2rem + 3.4rem + env(safe-area-inset-bottom,0px)); } } .ftr__glint{ position:absolute; top:-1px; left:0; right:0; height:2px; background:var(--refract); } .ftr__grid{ display:grid; gap:2.5rem; } @media (min-width:860px){ .ftr__grid{ grid-template-columns:1.4fr .8fr .8fr .9fr; } } .ftr h3,.ftr h4{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); font-weight:400; margin-bottom:1rem; } .ftr ul{ display:grid; gap:.55rem; } .ftr__sub{ display:block; margin-top:.15rem; font-size:inherit; font-weight:inherit; color:inherit; } .ftr__adr{ margin-top:1.1rem; display:grid; gap:.35rem; font-style:normal; font-size:.86rem; line-height:1.5; color:var(--fg-dim); } .ftr__adr a{ color:var(--fg); } .ftr__route{ display:inline-flex; align-items:center; gap:.45rem; } .ftr__route::after{ content:"\2197"; font-size:.85em; color:var(--amber); } /* Tippziele im Footer auf Touch vergroessern */ @media (max-width:859px){ .ftr ul{ gap:.15rem; } .ftr ul a{ display:inline-block; padding-block:.62rem; } .ftr__adr{ gap:.15rem; } .ftr__adr a{ display:inline-block; padding-block:.5rem; } } .ftr a:hover{ color:var(--amber); } .ftr__bot{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem; color:var(--fg-dim); } /* 22. Sticky Call (mobil) ----------------------------------------------- */ .callbar{ position:fixed; left:0; right:0; bottom:0; z-index:700; display:flex; gap:1px; background:var(--line); transform:translateY(110%); transition:transform .6s var(--ease); border-top:1px solid var(--line); } .callbar.is-on{ transform:none; } @media (min-width:1000px){ .callbar{ display:none; } } .callbar a{ flex:1; padding:.95rem .5rem calc(.95rem + env(safe-area-inset-bottom,0)) .5rem; text-align:center; background:var(--ink-2); font-size:.88rem; font-weight:520; } .callbar a.pri{ position:relative; overflow:hidden; background:var(--amber); color:#1a0d03; } .callbar a.pri::after{ content:""; position:absolute; inset:-40% -20%; z-index:1; pointer-events:none; background:var(--refract); opacity:.75; transform:translateX(-130%) skewX(-12deg); } .callbar.has-shown a.pri::after{ transition:transform .9s var(--ease) .15s, opacity .6s var(--ease) .85s; transform:translateX(130%) skewX(-12deg); opacity:0; } /* 23. Seiten-Hero (Unterseiten) ----------------------------------------- */ .phero{ position:relative; overflow:hidden; padding-block:clamp(8rem,14vw,12rem) clamp(3rem,6vw,5rem); background:radial-gradient(110% 100% at 85% 0%, #16303f 0%, #0a141c 46%, var(--ink) 80%); } .phero__beam{ position:absolute; top:-60%; left:50%; width:70vw; height:140%; z-index:0; transform:translateX(-50%) rotate(14deg); background:linear-gradient(90deg, rgba(122,211,255,0) 0%, rgba(122,211,255,.09) 45%, rgba(255,139,61,.10) 60%, rgba(255,139,61,0) 100%); filter:blur(38px); pointer-events:none; } .phero__in{ position:relative; z-index:2; } .phero .lede{ margin-top:clamp(1.5rem, 3vw, 2.75rem); } .crumb{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:1.4rem; } .crumb a:hover{ color:var(--amber); } /* 24. Prozess-Zeitstrahl ------------------------------------------------ */ .steps{ display:grid; gap:0; counter-reset:s; } .step{ position:relative; display:grid; gap:.5rem 2rem; padding:clamp(1.6rem,3vw,2.4rem) 0 clamp(1.6rem,3vw,2.4rem) 3.4rem; border-top:1px solid var(--line); } @media (min-width:820px){ .step{ grid-template-columns:1fr 1.4fr; padding-left:4.5rem; } } .step::before{ counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:clamp(1.6rem,3vw,2.4rem); font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; color:var(--amber); } .step::after{ content:""; position:absolute; left:1.1rem; top:calc(clamp(1.6rem,3vw,2.4rem) + 1.8rem); bottom:0; width:1px; background:var(--line); } @media (min-width:820px){ .step::after{ left:1.5rem; } } .step:last-child::after{ display:none; } .step h3{ font-family:var(--ff-display); font-weight:400; font-size:var(--h3-item); line-height:1.1; } .step p{ color:var(--fg-dim); } /* 25. Vergleichstabelle ------------------------------------------------- */ .tbl-wrap{ overflow-x:auto; border:1px solid var(--line-ink); border-radius:4px; } .tbl{ width:100%; border-collapse:collapse; min-width:38rem; } .tbl th,.tbl td{ padding:1.05rem 1.2rem; text-align:left; border-bottom:1px solid var(--line-ink); font-size:.95rem; vertical-align:top; } .tbl thead th{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-ink-dim); font-weight:400; } .tbl tbody tr:last-child th,.tbl tbody tr:last-child td{ border-bottom:0; } .tbl tbody tr{ transition:background .35s var(--ease), box-shadow .35s var(--ease); } .tbl tbody tr:hover{ background:rgba(255,139,61,.05); box-shadow:inset 3px 0 0 var(--amber); } .tbl tbody th{ font-family:var(--ff-display); font-weight:400; font-size:1.15rem; white-space:nowrap; } .tbl td{ color:var(--fg-ink-dim); } /* 26. Utility ----------------------------------------------------------- */ .stack-s > * + *{ margin-top:.9rem; } .stack-m > * + *{ margin-top:1.6rem; } .stack-l > * + *{ margin-top:2.6rem; } .mt-l{ margin-top:clamp(2.5rem,5vw,4.5rem); } .mt-m{ margin-top:clamp(1.6rem,3vw,2.6rem); } .center{ text-align:center; } .maxw-s{ max-width:52ch; } .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip{ position:absolute; left:-9999px; top:0; z-index:1000; padding:1rem; background:var(--amber); color:#1a0d03; } .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .skip:focus{ left:0; } :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; } /* 27. Reduced Motion ---------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; } .wi{ transform:none !important; } .cursor-light,.hero__beam,.grain{ display:none; } .marquee__t,.quotes{ animation:none; transform:none; } } /* 28. Fotos . Behandlung ------------------------------------------------- Wiederverwendbarer Rahmen ".ph" um jedes echte Foto. Trägt die eigentliche Wirkung: Splitter-Maske, Refraktions-Wisch, Clip-Reveal, Ink-Tint, Container-Parallax, Rissoverlay bei Cursor-Licht. Animiert wird nur transform / opacity / clip-path / filter. */ .ph{ position:relative; overflow:hidden; border-radius:4px; isolation:isolate; background:var(--ink-3); } .ph__img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter 1.15s var(--ease), transform 1.15s var(--ease); } /* Clip-Reveal beim Scroll-In, gleiche Kurve wie [data-reveal="line"]. Wichtig: der Clip-Path sitzt am inneren Bild, nicht am beobachteten ".ph"-Element selbst. Ein clip-path auf dem IntersectionObserver-Ziel nullt dessen Schnittfläche und die Beobachtung würde nie auslösen. */ [data-reveal="img"]{ opacity:1; transform:none; } [data-reveal="img"] .ph__img{ clip-path:inset(0 0 100% 0); transform:scale(1.09); transition:clip-path 1.2s var(--ease), transform 1.3s var(--ease); transition-delay:calc(var(--i,0) * 90ms); } [data-reveal="img"].is-in .ph__img{ clip-path:inset(0 0 0 0); transform:scale(1); } /* Ink-Tint: entsättigt und in die Tiefe getönt, geht beim Reveal in Farbe */ .ph--tint .ph__img{ filter:saturate(.3) brightness(.7) contrast(1.06); } .ph--tint.is-in .ph__img{ filter:saturate(1) brightness(1) contrast(1); } /* Refraktions-Wisch: schmaler Lichtstreifen wandert einmal quer, danach ruhig */ .ph__sheen{ position:absolute; inset:-10% -10%; z-index:2; pointer-events:none; background:var(--refract); opacity:.85; transform:translateX(-130%) skewX(-12deg); } .ph--sheen.is-in .ph__sheen{ transition:transform .95s var(--ease) .1s, opacity .7s var(--ease) .85s; transform:translateX(130%) skewX(-12deg); opacity:0; } /* Container-Parallax: Bild größer als Rahmen, bewegt sich langsamer */ .ph--parallax .ph__img{ height:126%; margin-top:-13%; } /* Rissüberlagerung, sichtbar nur dort, wo das Cursor-Licht steht */ .ph__crack{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .5s var(--ease); -webkit-mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), #000, transparent 72%); mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), #000, transparent 72%); } .ph:hover .ph__crack,.ph:focus-within .ph__crack{ opacity:.9; } @media (pointer:coarse){ .ph__crack{ display:none; } } /* Splitter-Maske: Foto sitzt in einer Glasscherbe statt im Rechteck */ .ph--shard-a{ clip-path:polygon(9% 2%,100% 8%,93% 90%,50% 100%,0 76%); border-radius:0; } .ph--shard-b{ clip-path:polygon(3% 12%,88% 0,100% 84%,58% 100%,0 90%); border-radius:0; } .ph--shard-c{ clip-path:polygon(5% 6%, 98% 0%, 100% 76%, 60% 100%, 0% 84%); border-radius:0; } /* Zurückhaltender Scherben-Schliff für große, foto-tragende Flächen: nur zwei winzige Ecken gekappt (5% diagonal), das Bild bleibt zu ~95% intakt rechteckig. Nickt dem Glas-Motiv zu, ohne die Bildqualität zu opfern. */ .ph--shard-d{ clip-path:polygon(0 0, 96% 0, 100% 5%, 100% 100%, 4% 100%, 0 95%); border-radius:0; } /* Drei weitere zurückhaltende Varianten, gleiche Idee wie shard-d (kleine Eck-Nicks statt großer Diagonalschnitte), für 16:9-Kino-Frames, wo die dramatischen shard-a/b/c zu viel vom Bildinhalt kappen würden. */ .ph--shard-e{ clip-path:polygon(4% 0, 100% 0, 100% 95%, 96% 100%, 0 100%, 0 5%); border-radius:0; } .ph--shard-f{ clip-path:polygon(0 0, 94% 0, 100% 6%, 100% 100%, 0 100%); border-radius:0; } .ph--shard-g{ clip-path:polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 94%); border-radius:0; } /* Hero-Bühne: großes, zentriertes Foto unterhalb von Headline/Lede, volle Aufmerksamkeit auf Bildqualität statt Verdunkelung. Reveal läuft über das normale [data-reveal="img"]-Muster aus Abschnitt 28 (clip-path sitzt am Kind-Element .ph__img, nicht am beobachteten .ph — der IO/clip-path-Bug kann hier also nicht greifen). */ .hero__stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; margin-top:3.5rem; } .hero__stage::before{ content:""; position:absolute; z-index:0; inset:-8% 4% auto 4%; height:75%; background:radial-gradient(60% 100% at 50% 15%, rgba(255,139,61,.16), transparent 72%); filter:blur(44px); pointer-events:none; } .hero__photo{ position:relative; z-index:1; width:clamp(20rem,66vw,56rem); aspect-ratio:4/3; box-shadow:0 30px 70px -30px rgba(0,0,0,.65); } .hero__photo .ph__img{ object-position:50% 40%; } .hero__photo::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--refract); mix-blend-mode:overlay; opacity:.09; } .hero__photo::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .hero__photo-cap{ position:relative; z-index:1; margin-top:1.1rem; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); } @media (max-width:640px){ .hero__stage{ margin-top:2.2rem; } } /* 29. Galerie "So arbeiten wir" — Kino-Scherben-Karussell + Lightbox ------ Backbone ist natives scroll-snap (Touch/Momentum/Zugänglichkeit kommen gratis vom Browser). Die native Scrollbar wird komplett versteckt und durch ein eigenes HUD ersetzt (Pfeile, Mono-Zähler, scherbenförmige Dots). Aktives Frame bekommt einen ruhigen Ken-Burns-Zoom, Nachbarframes werden abgedunkelt und mit einem cool/violet/amber-Tonschimmer (Referenz an --refract) versehen. Reveal ([data-reveal="img"], Abschnitt 28) und Ken-Burns teilen sich denselben Ausgangswert scale(1.12), damit Reveal ausschließlich clip-path und Ken-Burns ausschließlich transform steuert — keine zwei Regeln konkurrieren um dieselbe Eigenschaft. Scherben-Dots und der Eckenglanz (::after) tragen zwar clip-path, sind aber nie IntersectionObserver-Ziele, der bekannte IO/clip-path-Bug kann dort nicht greifen. */ .gallery-cinema{ position:relative; } .gallery--cinema{ display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(var(--gutter) * -1); padding-block-end:.4rem; padding-inline:var(--gutter); gap:1.6rem; outline-offset:6px; } .gallery--cinema::-webkit-scrollbar{ display:none; } .gallery--cinema:focus-visible{ outline:2px solid var(--amber); } .gallery__frame{ position:relative; flex:0 0 auto; width:clamp(19rem,78vw,54rem); scroll-snap-align:start; background:none; border:0; padding:0; text-align:left; color:inherit; font:inherit; cursor:zoom-in; isolation:isolate; transition:opacity .6s var(--ease), filter .6s var(--ease); opacity:.42; filter:saturate(.5) brightness(.72); } .gallery__frame.is-current{ opacity:1; filter:none; } .gallery__frame .ph{ aspect-ratio:16/9; } /* Eckenglanz: reines Pseudoelement, nie IO-beobachtet, daher clip-path hier sicher */ .gallery__frame::after{ content:""; position:absolute; top:0; right:0; z-index:2; pointer-events:none; width:2.6rem; height:2.6rem; opacity:0; clip-path:polygon(100% 0,100% 100%,0 0); background:linear-gradient(225deg, rgba(255,255,255,.55), transparent 70%); transition:opacity .5s var(--ease); } .gallery__frame.is-current::after{ opacity:.35; } /* Cool/Violet/Amber-Tonschimmer je Frame, Referenz an --refract; wirkt nur auf abgedunkelten Nachbarbildern spürbar (opacity skaliert mit Dimming) */ .gallery__frame[data-tone]::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:overlay; opacity:.16; transition:opacity .6s var(--ease); } .gallery__frame.is-current[data-tone]::before{ opacity:0; } .gallery__frame[data-tone="cool"]::before{ background:linear-gradient(160deg, transparent 55%, var(--cool) 140%); } .gallery__frame[data-tone="violet"]::before{ background:linear-gradient(160deg, transparent 55%, var(--violet) 140%); } .gallery__frame[data-tone="amber"]::before{ background:linear-gradient(160deg, transparent 55%, var(--amber) 140%); } /* Ken-Burns: Reveal (Erstauftritt) steuert ausschließlich clip-path, Ken-Burns (is-current) steuert ausschließlich transform, beide teilen scale(1.12) als gemeinsamen Ausgangswert. Überschreibt die generische Reveal-Regel aus Abschnitt 28 gezielt nur für Kino-Frames (höhere Selektor-Spezifität). */ .gallery__frame .ph--kenburns[data-reveal="img"] .ph__img{ clip-path:inset(0 0 100% 0); transform:scale(1.12); transition:clip-path 1.2s var(--ease), transform 6.5s var(--ease), filter 1.15s var(--ease); transition-delay:calc(var(--i,0) * 90ms); } .gallery__frame .ph--kenburns[data-reveal="img"].is-in .ph__img{ clip-path:inset(0 0 0 0); } .gallery__frame.is-current .ph--kenburns[data-reveal="img"] .ph__img{ transform:scale(1); } .gallery__cap{ margin-top:.9rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); } /* HUD: Pfeile + Zähler + Scherben-Dots ersetzen die native Scrollbar komplett */ .gallery__hud{ display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-top:1.8rem; } .gallery__arrow{ flex:none; width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); background:rgba(255,255,255,.06); backdrop-filter:blur(10px); color:var(--fg); cursor:pointer; transition:border-color .35s var(--ease), color .35s var(--ease); } .gallery__arrow:hover{ border-color:var(--amber); color:var(--amber); } .gallery__arrow:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; } .gallery__arrow--prev svg{ transform:scaleX(-1); } @media (max-width:640px){ .gallery__arrow{ width:44px; height:44px; } } .gallery__meta{ display:grid; gap:.65rem; justify-items:center; min-width:11rem; } .gallery__count{ font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.12em; font-variant-numeric:tabular-nums; color:var(--fg-dim); white-space:nowrap; } .gallery__count b{ color:var(--fg); font-weight:600; } .gallery__dots{ display:flex; align-items:center; gap:.7rem; } .gallery__dot{ width:.95rem; height:.95rem; padding:0; border:1px solid var(--line-2); background:var(--ink-4); cursor:pointer; transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .gallery__dot[data-shard="a"]{ clip-path:polygon(20% 0,100% 20%,80% 100%,0 80%); } .gallery__dot[data-shard="b"]{ clip-path:polygon(0 15%,85% 0,100% 85%,15% 100%); } .gallery__dot[data-shard="c"]{ clip-path:polygon(10% 0,100% 10%,90% 100%,0 90%); } .gallery__dot[data-shard="d"]{ clip-path:polygon(0 0,90% 10%,100% 100%,10% 90%); } .gallery__dot[data-shard="e"]{ clip-path:polygon(15% 0,100% 15%,85% 100%,0 85%); } .gallery__dot[data-shard="f"]{ clip-path:polygon(5% 5%,95% 0,100% 95%,0 100%); } .gallery__dot.is-done{ background:var(--line-2); border-color:var(--line-2); } .gallery__dot.is-active{ background:var(--refract); border-color:transparent; transform:scale(1.55); } .gallery__dot:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; } .lightbox{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:clamp(1.2rem,4vw,3rem); background:rgba(6,10,14,.74); backdrop-filter:blur(20px) saturate(140%); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); } .lightbox.is-open{ opacity:1; pointer-events:auto; } .lightbox__stage{ position:relative; max-width:min(92vw,62rem); } .lightbox__stage img{ max-width:100%; max-height:78svh; border-radius:4px; display:block; margin-inline:auto; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); transform:scale(.94); transition:transform .45s var(--ease); } .lightbox.is-open .lightbox__stage img{ transform:scale(1); } .lightbox__cap{ margin-top:1rem; text-align:center; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); } .lightbox__close,.lightbox__prev,.lightbox__next{ position:absolute; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.05); backdrop-filter:blur(8px); color:var(--fg); cursor:pointer; transition:border-color .35s, color .35s; } .lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{ border-color:var(--amber); color:var(--amber); } .lightbox__close{ top:-3.4rem; right:0; } .lightbox__prev{ left:-.5rem; top:50%; transform:translateY(-50%); } .lightbox__next{ right:-.5rem; top:50%; transform:translateY(-50%); } .lightbox__prev svg{ transform:scaleX(-1); } @media (min-width:900px){ .lightbox__close{ top:-1rem; right:-3.2rem; } } @media (max-width:680px){ .lightbox__prev,.lightbox__next{ display:none; } } .lightbox__mobnav{ display:none; margin-top:.6rem; gap:1rem; justify-content:center; } @media (max-width:680px){ .lightbox__mobnav{ display:flex; } .lightbox__mobnav button{ background:none; border:0; padding:0; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); cursor:pointer; } } /* 30. Team-Sektion -------------------------------------------------------- */ .team__group .ph{ aspect-ratio:16/9; } .team{ display:grid; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); max-width:64rem; margin-inline:auto; } @media (min-width:640px){ .team{ grid-template-columns:repeat(2,1fr); } } @media (min-width:900px){ .team{ grid-template-columns:repeat(3,1fr); } } .team__p{ background:var(--paper); color:var(--fg-ink); padding:1.5rem 1.5rem 1.9rem; display:grid; gap:.8rem; } .team__p .ph{ aspect-ratio:3/4; } .team__n{ font-family:var(--ff-display); font-size:var(--h3-item); line-height:1.1; } .team__r{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-ink-dim); } /* 31. Zertifikate-Zeile ---------------------------------------------------- */ .certrow{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:clamp(2.2rem,5vw,4.4rem); } .certrow figure{ width:clamp(8rem,17vw,12.5rem); text-align:center; } .certrow .ph{ aspect-ratio:3/4; background:#fff; padding:.9rem; border-radius:4px; box-shadow:0 20px 40px -24px rgba(10,18,25,.3); } .certrow .ph__img{ object-fit:contain; } /* --fg-ink-dim ist die gedimmte Farbe fuer HELLE Flaechen. Hier steht die Zeile auf dunklem Grund, deshalb --fg-dim . sonst nur 3,2:1 statt der noetigen 4,5:1. */ .certrow figcaption{ margin-top:.9rem; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); } /* 32. Merkkasten (Leihfahrzeug / WhatsApp-Weg / Erste Hilfe) --------------- */ .note{ position:relative; padding:clamp(1.4rem,2.4vw,1.9rem); border-radius:4px; border:1px dashed var(--line-2); background:rgba(255,139,61,.06); display:grid; gap:.6rem; align-content:start; } .section--paper .note{ border-color:var(--line-ink); background:rgba(255,139,61,.09); } .note__k{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); } .note h3{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.15; } .note p{ font-size:.92rem; } .note ul{ display:grid; gap:.4rem; margin-top:.3rem; } .note ul li{ display:flex; gap:.55rem; font-size:.9rem; } .note ul li::before{ content:""; flex:none; width:5px; height:5px; margin-top:.55rem; border-radius:50%; background:var(--amber); } .notes-wide{ max-width:1680px; margin-inline:auto; padding-inline:var(--gutter); display:grid; gap:clamp(1.6rem,3.2vw,2.75rem); } @media (min-width:760px){ .notes-wide{ grid-template-columns:repeat(2,1fr); } } .note--big{ padding:clamp(2.1rem,4vw,3.4rem); gap:.9rem; } .note--big .note__k{ font-size:.72rem; } .note--big h3{ font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; } .note--big p{ font-size:1.04rem; line-height:1.62; } .note--big ul li{ font-size:1rem; } /* 33. FAQ-Erweiterung: Suche + Cluster-Navigation -------------------------- */ .faqcluster__ico{ --ico-ink:var(--ink); --ico-dim:var(--fg-ink-dim); width:48px; height:48px; margin-bottom:.2rem; } .faqcluster__ico [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease); } .faqcluster__ico.is-in [data-draw]{ stroke-dashoffset:0; } .faqcluster__ico [data-draw]:nth-child(2){ transition-delay:.08s; } .faqcluster__ico [data-draw]:nth-child(3){ transition-delay:.16s; } .faqcluster__ico [data-draw]:nth-child(4){ transition-delay:.24s; } .faqsearch{ position:relative; max-width:34rem; } .faqsearch input{ width:100%; padding:1.05rem 1.3rem 1.05rem 3rem; border:1px solid var(--line-ink); border-radius:999px; background:rgba(255,255,255,.55); font-size:.98rem; outline:0; transition:border-color .35s, background .35s; } .faqsearch input:focus{ border-color:var(--amber); background:#fff; } .faqsearch svg{ position:absolute; left:1.2rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--fg-ink-dim); pointer-events:none; } .faqnav{ position:sticky; top:calc(clamp(4.25rem,6vw,5.5rem) + 1rem); z-index:6; display:flex; flex-wrap:wrap; gap:.5rem; padding-block:.9rem; background:linear-gradient(var(--paper) 72%, transparent); } .faqnav a{ font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-ink-dim); padding:.55rem .9rem; border:1px solid var(--line-ink); border-radius:999px; white-space:nowrap; transition:background .35s, color .35s, border-color .35s; } .faqnav a:hover{ border-color:var(--ink); color:var(--fg-ink); } .faqnav a.is-active{ position:relative; background:var(--ink); border-color:var(--ink); color:var(--paper); } .faqnav a.is-active::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2px; background:var(--refract); border-radius:1px; } .faqcluster{ padding-block:clamp(2.5rem,5vw,4rem); scroll-margin-top:9rem; } .faqcluster + .faqcluster{ border-top:1px solid var(--line-ink); } .faqcluster__team{ max-width:38rem; margin-inline:auto; } .faq-empty{ display:none; padding-block:2.5rem; color:var(--fg-ink-dim); } .faq-empty.is-on{ display:block; } .acc__i.is-hidden{ display:none; } .acc__i:target{ scroll-margin-top:9rem; } /* 34. Schadensleitfaden ----------------------------------------------------- */ .sl-grid{ display:grid; gap:1px; background:var(--line-ink); border:1px solid var(--line-ink); } @media (min-width:640px){ .sl-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1040px){ .sl-grid{ grid-template-columns:repeat(3,1fr); } } .sl-card{ background:var(--paper); padding:clamp(1.4rem,2.2vw,1.9rem); display:grid; gap:.9rem; text-align:left; border:0; cursor:pointer; font:inherit; color:var(--fg-ink); position:relative; transition:background .35s var(--ease), transform .4s var(--ease-io), box-shadow .4s var(--ease-io); } .sl-card:hover,.sl-card:focus-visible{ background:#fff; transform:translateY(-4px) scale(1.005); box-shadow:0 20px 40px -20px rgba(10,18,25,.25); } .sl-card:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; } .sl-card.is-active{ background:#fff; } .sl-card__ico{ --sl-ink:var(--ink); --sl-dim:var(--fg-ink-dim); --sl-line:var(--line-ink); width:100%; aspect-ratio:1; background:#f0ece3; border-radius:3px; } .sl-card__ico [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease); } .sl-card.is-in .sl-card__ico [data-draw]{ stroke-dashoffset:0; } .sl-card__ico [data-draw]:nth-child(2){ transition-delay:.06s; } .sl-card__ico [data-draw]:nth-child(3){ transition-delay:.12s; } .sl-card__ico [data-draw]:nth-child(4){ transition-delay:.18s; } .sl-card__ico [data-draw]:nth-child(5){ transition-delay:.24s; } .sl-card__ico [data-draw]:nth-child(6){ transition-delay:.3s; } .sl-card__ico [data-draw]:nth-child(7){ transition-delay:.36s; } .sl-card__ico [data-draw]:nth-child(8){ transition-delay:.42s; } .sl-card__ico [data-draw]:nth-child(9){ transition-delay:.48s; } .sl-ico__halo{ transition:opacity .3s var(--ease); } .sl-card:hover .sl-ico__halo,.sl-card:focus-visible .sl-ico__halo{ opacity:.24; } .sl-card__title{ font-family:var(--ff-display); font-size:1.28rem; } .sl-card__sub{ font-size:.86rem; color:var(--fg-ink-dim); margin-top:.15rem; } .sl-card__expand{ position:absolute; right:1.1rem; bottom:1.1rem; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-ink); display:grid; place-items:center; color:var(--fg-ink-dim); background:transparent; transition:background .3s,color .3s,border-color .3s; } .sl-card:hover .sl-card__expand,.sl-card:focus-visible .sl-card__expand,.sl-card.is-active .sl-card__expand{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .sl-badge{ justify-self:start; font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .75rem; border-radius:999px; } .sl-badge--repair{ background:rgba(20,140,180,.14); color:#0c6e8f; } .sl-badge--check{ background:rgba(255,139,61,.16); color:#a3540f; } .sl-badge--replace{ background:rgba(120,90,220,.15); color:#5b45c9; } /* Datenquelle für das Modal: nie sichtbar, aber im Accessibility-Baum vorhanden */ .sl-detail{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; margin:-1px; padding:0; } /* Modal „Befund-Karte“, eigenständige Familie, verwandt mit der Lightbox */ .sl-modal{ position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:clamp(1.2rem,4vw,3rem); background:rgba(6,10,14,.74); backdrop-filter:blur(20px) saturate(140%); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); } .sl-modal.is-open{ opacity:1; pointer-events:auto; } .sl-modal__panel{ position:relative; background:var(--paper); color:var(--fg-ink); border:1px solid var(--paper-3); border-radius:6px; box-shadow:0 40px 120px -30px rgba(0,0,0,.65); max-width:min(90vw,56rem); max-height:90svh; overflow:auto; display:grid; transform:scale(.32); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease); } .sl-modal.is-open .sl-modal__panel{ transform:scale(1); opacity:1; } @media (min-width:820px){ .sl-modal__panel{ grid-template-columns:minmax(0,44%) minmax(0,56%); } } .sl-modal__stage{ --sl-ink:var(--fg-ink); --sl-dim:var(--fg-ink-dim); --sl-line:var(--line-ink); position:relative; padding:clamp(1.6rem,4vw,4rem); display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,var(--paper-2),var(--paper-3) 130%); } .sl-modal__stage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 45%,var(--sl-tint,var(--cool)),transparent 70%); opacity:.16; } .sl-modal__ico{ position:relative; z-index:1; width:min(100%,20rem); } @media (max-width:819px){ .sl-modal__ico{ width:min(58%,11rem); } } /* Auf dem Desktop richtet sich die Hoehe der Buehne nach der Textspalte daneben. Bei fixem 5:4-Foto blieben davon rund zwei Drittel leer, bei voller Hoehe wuerde das Schadensfoto dagegen extrem hochkant beschnitten . 3:4 ist der Kompromiss: fuellt die Spalte spuerbar und laesst vom Schaden genug stehen. Der Rest bleibt bewusst als Rahmen um das Bild. */ @media (min-width:820px){ .sl-modal__stage{ padding:clamp(2.6rem,4vw,3.4rem); } .sl-modal__ico{ width:100%; } /* Selektor bewusst eine Stufe spezifischer als ".sl-modal__ico .ph" in Abschnitt 37, das dort spaeter steht und sonst gewinnen wuerde. */ .sl-modal .sl-modal__ico .ph{ aspect-ratio:3/4; } } .sl-modal__ico svg{ width:100%; height:auto; } .sl-modal__ico [data-draw]{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease); } .sl-modal__ico.is-drawn [data-draw]{ stroke-dashoffset:0; } .sl-modal__ico [data-draw]:nth-child(2){ transition-delay:.06s; } .sl-modal__ico [data-draw]:nth-child(3){ transition-delay:.12s; } .sl-modal__ico [data-draw]:nth-child(4){ transition-delay:.18s; } .sl-modal__ico [data-draw]:nth-child(5){ transition-delay:.24s; } .sl-modal__ico [data-draw]:nth-child(6){ transition-delay:.3s; } .sl-modal__ico [data-draw]:nth-child(7){ transition-delay:.36s; } .sl-modal__ico [data-draw]:nth-child(8){ transition-delay:.42s; } .sl-modal__ico [data-draw]:nth-child(9){ transition-delay:.48s; } .sl-modal__eyebrow{ position:absolute; top:clamp(1rem,3vw,1.6rem); left:clamp(1rem,3vw,1.6rem); font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-ink-dim); } .sl-modal__content{ padding:clamp(1.6rem,4vw,3rem); display:grid; gap:.9rem; align-content:start; } .sl-modal__title{ font-family:var(--ff-display); font-size:clamp(2rem,4vw,3rem); color:var(--fg-ink); } .sl-modal__text{ color:var(--fg-ink-dim); max-width:34ch; line-height:1.6; } .sl-modal .sl-badge--repair{ background:rgba(20,140,180,.14); color:#0c6e8f; } .sl-modal .sl-badge--check{ background:rgba(255,139,61,.16); color:#a3540f; } .sl-modal .sl-badge--replace{ background:rgba(120,90,220,.15); color:#5b45c9; } .sl-modal__list{ display:grid; gap:.5rem; margin-top:.6rem; } .sl-modal__list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--fg-ink-dim); } .sl-modal__list li::before{ content:""; flex:none; width:7px; height:7px; margin-top:.4rem; background:var(--sl-accent,var(--amber)); clip-path:polygon(20% 0,100% 20%,80% 100%,0 80%); } .sl-modal__acts{ margin-top:.3rem; } .sl-modal__acts .btn--ghost{ --fgc:var(--fg-ink); box-shadow:inset 0 0 0 1px var(--line-ink); } .sl-modal__acts .btn--ghost::after{ background:var(--ink); } .sl-modal__acts .btn--ghost:hover{ --fgc:var(--paper); } .sl-modal__disclaimer{ margin-top:.2rem; color:var(--fg-ink-dim); } /* Der Schliessen-Knopf sitzt auf dem hellen Panel, Vor/Zurueck stehen auf dem dunklen Overlay . dort derselbe Stil wie die Lightbox-Pfeile (Modul 29), sonst haette dieselbe Geste zwei Erscheinungsbilder. */ .sl-modal__close,.sl-modal__prev,.sl-modal__next{ position:absolute; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-ink); background:rgba(255,255,255,.6); backdrop-filter:blur(8px); color:var(--fg-ink); cursor:pointer; transition:border-color .35s,color .35s; z-index:2; } .sl-modal__prev,.sl-modal__next{ border-color:var(--line-2); background:rgba(255,255,255,.05); color:var(--fg); } .sl-modal__close:hover,.sl-modal__prev:hover,.sl-modal__next:hover{ border-color:var(--amber); color:var(--amber); } .sl-modal__close{ top:1rem; right:1rem; } .sl-modal__prev,.sl-modal__next{ top:50%; transform:translateY(-50%); } .sl-modal__prev{ left:clamp(.75rem,3vw,2rem); } .sl-modal__next{ right:clamp(.75rem,3vw,2rem); } .sl-modal__prev svg{ transform:scaleX(-1); } @media (max-width:680px){ .sl-modal__prev,.sl-modal__next{ display:none; } } .sl-modal__mobnav{ display:none; margin-top:.4rem; gap:1rem; } @media (max-width:680px){ .sl-modal__mobnav{ display:flex; } .sl-modal__mobnav button{ background:none; border:0; padding:0; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-ink-dim); cursor:pointer; } } .qtest{ display:grid; gap:0; counter-reset:q; } .qtest__q{ display:grid; gap:1.1rem; padding:clamp(1.6rem,3vw,2.2rem) 0; border-top:1px solid var(--line); } .qtest__q:first-child{ padding-top:0; border-top:0; } .qtest__q > p{ display:flex; align-items:baseline; gap:.9rem; font-family:var(--ff-display); font-size:clamp(1.1rem,2vw,1.4rem); } .qtest__q > p::before{ counter-increment:q; content:counter(q,decimal-leading-zero); flex:none; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; color:var(--amber); } .qtest__opts{ display:flex; flex-wrap:wrap; gap:.7rem; } .qopt{ position:relative; flex:none; } .qopt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .qopt span{ display:inline-flex; align-items:center; white-space:nowrap; padding:.85rem 1.3rem; border:1px solid var(--line-2); border-radius:999px; font-size:.92rem; transition:all .3s; } .qopt:hover span{ border-color:var(--line-2); background:rgba(255,255,255,.05); } .qopt input:checked + span{ border-color:var(--amber); background:rgba(255,139,61,.14); color:var(--amber-2); } .qopt input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:2px; } @media (max-width:480px){ .qopt span{ white-space:normal; } } /* Heller Kasten in einer dunklen Sektion: die Textfarben muessen mitwechseln, sonst steht der geerbte helle Fliesstext auf fast weissem Grund. */ .qtest__result{ padding:clamp(1.6rem,3vw,2.4rem); border-radius:4px; border:1px solid var(--line-ink); background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.55)); color:var(--fg-ink); display:none; } .qtest__result.is-on{ display:block; } .qtest__result .eyebrow, .qtest__result .muted, .qtest__result .small{ color:var(--fg-ink-dim); } /* 35. Reduced Motion, Zusatz für neue Effekte ------------------------------ */ @media (prefers-reduced-motion:reduce){ .ph__sheen{ display:none; } .ph--tint .ph__img{ filter:none; } [data-reveal="img"] .ph__img{ clip-path:none !important; transform:none !important; } .lightbox,.lightbox__stage img{ transition:none; } .sl-card{ transition:none; } .sl-card:hover,.sl-card:focus-visible{ transform:none; } .sl-card__expand{ transition:none; } .sl-ico__halo{ transition:none; } .sl-card__ico [data-draw],.sl-modal__ico [data-draw],.faqcluster__ico [data-draw],.card__ico [data-draw]{ stroke-dashoffset:0 !important; transition:none; } .sl-modal,.sl-modal__panel{ transition:none; } .sl-modal:not(.is-open){ display:none; } .gallery__frame{ opacity:1 !important; filter:none !important; } .gallery__frame::after,.gallery__frame[data-tone]::before{ display:none; } } /* 36. Seitenübergang ----------------------------------------------------- */ .pagefade{ position:fixed; inset:0; z-index:999; background:var(--ink); opacity:1; pointer-events:none; transition:opacity .32s var(--ease); } .pagefade.is-out{ opacity:0; } /* 37. Schadensleitfaden . Fotokacheln ------------------------------------- Die sechs Schadensbilder sind echte Fotos statt gezeichneter Icons. Sie laufen durch dieselbe Foto-Behandlung wie der Rest der Seite (".ph" aus Abschnitt 28): Clip-Reveal von unten, Ink-Tint, Refraktions-Wisch. Nur enger gerahmt und im 5:4-Format, damit vom Schadensbild nichts wegfaellt. Alle Elemente sind span, weil die Karte ein