/* ========================================================================= S-Charge — site.css Gemeinsames Stylesheet fuer alle Seiten. Keine externen Ressourcen (CSP: default-src 'self'). Inter kommt aus assets/inter.css. INHALT 01 Tokens (:root) 02 Reset, Basis-Typografie 03 Utilities: container, section, label, lead, sr-only, skip-link 04 Buttons 05 Scroll-Progress 06 Navigation (Desktop, Mobile, aktive Seite) 07 Hero (Startseite) 08 Seitenkopf .page-hero / .breadcrumb / .toc [NEU] 09 Textbausteine .prose .bullets .steps-num .factbox .datatable [NEU] 10 Abschluss-Bausteine .cta-band .next-pages [NEU] 11 Karten und Raster (.card .grid-2/3/4) 12 Bestandssektionen A: Pillars, Why-Stats, Steps, Chain 13 Bestandssektionen B: Segmente, Wege, Erklaerkarten 14 Bestandssektionen C: Kostentabelle, Rechenbeispiel, Foerderkarten, Notice, Begriffe, Leiter, Rechenkette 15 Bestandssektionen D: Trust, FAQ, Kontakt + Formular 16 Footer 17 Floating-CTA, Back-to-top, Cookie-Banner, Modal 18 Produkt-3D "Rotationsstudio" (.pv-*) 19 Reveal (.fade-in) und Fokus 20 Media-Queries 21 prefers-reduced-motion, .no-js, @supports-Fallback 22 Anhang: Abweichungen und neu eingefuehrte Namen (Kommentarblock) ========================================================================= */ /* ========================================================================= 01 TOKENS Farben, Radien, Schatten unveraendert aus der Altseite uebernommen. ========================================================================= */ :root{ --red:#E30613; --red-d:#B00510; --red-bg:#FDF1F2; --blue:#3E4E80; --blue-d:#2C3A63; --blue-bg:#F1F3F9; --brand-grad:linear-gradient(95deg,#E30613 0%,#8E2C4C 52%,#3E4E80 100%); --ink:#1A2332; --ink-soft:#3C454F; --muted:#6B7682; --line:#E7EBEF; --line-2:#EEF1F4; --bg-alt:#F6F8FA; --white:#fff; --radius:16px; --container:1180px; --shadow:0 1px 2px rgba(26,35,50,.04), 0 12px 32px rgba(26,35,50,.07); --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* Produkthardware: Anthrazit-Korpus wie die reale Saeule */ --hw-1:#4B5158; --hw-2:#3B4046; --hw-3:#2D3238; --hw-edge:#5E656D; /* Produkt-3D: Buehnenhoehe und Groessenanpassung je Breakpoint. --pv-fit ist ein reiner CSS-Massstab (das JS fasst ihn nicht an), --sc bleibt fuer das JS reserviert. */ --pv-stage-h:376px; --pv-fit:.80; --pv-tilt:-6deg; /* konstante Neigung, damit die Kappe sichtbar ist */ } /* ========================================================================= 02 RESET, BASIS-TYPOGRAFIE ========================================================================= */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; font-family:var(--font); color:var(--ink-soft); background:var(--white); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ color:var(--ink); line-height:1.14; letter-spacing:-.02em; margin:0; font-weight:800; } h1{ font-size:clamp(34px,5.2vw,60px); } h2{ font-size:clamp(26px,3.6vw,40px); } h3{ font-size:20px; letter-spacing:-.01em; } h4{ font-size:17px; letter-spacing:-.01em; } p{ margin:0 0 1em; } a{ color:var(--red-d); text-decoration:none; } img,svg{ display:block; max-width:100%; } ul{ margin:0; padding:0; } strong,b{ color:var(--ink); } hr{ border:0; border-top:1px solid var(--line); margin:34px 0; } /* ========================================================================= 03 UTILITIES ========================================================================= */ .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } section{ scroll-margin-top:78px; } [id]{ scroll-margin-top:88px; } .section{ padding:clamp(54px,7vw,96px) 0; } .section--alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .section--tight{ padding:clamp(34px,4.4vw,58px) 0; } .label{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:14px; } .section-header{ max-width:720px; margin:0 auto 46px; text-align:center; } .section-header p{ font-size:clamp(16px,1.8vw,19px); color:var(--ink-soft); margin-top:14px; } .section-header--left{ margin-left:0; text-align:left; } .lead{ font-size:clamp(17px,2vw,20px); color:var(--ink-soft); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Sprunglink: erst bei Tastaturfokus sichtbar */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#fff; font-size:15px; font-weight:700; padding:12px 20px; border-radius:0 0 10px 0; box-shadow:var(--shadow); } .skip-link:focus{ left:0; } /* Opt-in fuer tiefe, lange Sektionen (Renderkosten senken, kein Layoutsprung) */ .section--cv{ content-visibility:auto; contain-intrinsic-size:auto 900px; } /* ========================================================================= 04 BUTTONS ========================================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:16px; font-weight:600; padding:14px 24px; border-radius:10px; border:1.5px solid transparent; cursor:pointer; transition:.18s ease; text-decoration:none; white-space:nowrap; } .btn-primary{ background:var(--red); color:#fff; border-color:var(--red); } .btn-primary:hover{ background:var(--red-d); border-color:var(--red-d); transform:translateY(-1px); box-shadow:0 8px 20px rgba(227,6,19,.25); } .btn-outline{ background:#fff; color:var(--ink); border-color:var(--line); } .btn-outline:hover{ border-color:var(--ink); transform:translateY(-1px); } /* Textbutton fuer sekundaere Verweise */ .btn-ghost{ background:transparent; color:var(--red-d); border-color:transparent; padding-left:8px; padding-right:8px; font-weight:700; } .btn-ghost:hover{ color:var(--red); text-decoration:underline; } .btn-sm{ font-size:15px; padding:11px 18px; } /* ========================================================================= 05 SCROLL-PROGRESS ========================================================================= */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--brand-grad); background-size:100vw 100%; z-index:120; transition:width .1s linear; } /* ========================================================================= 06 NAVIGATION 7 Links + CTA. Hamburger ab max-width:1024px. ========================================================================= */ .nav{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:68px; } .nav__logo{ display:flex; align-items:center; flex:0 0 auto; } .nav__logo img{ display:block; height:34px; width:auto; } /* Das Original-Logo (seit 08.10.2026) steht ohne Farbflaeche und traegt den Balken "A BRAND OF Suer" in der eigenen Hoehe -- bei 34px wirkt es leichter als die alte Nachbildung im Kasten. Ab 1180px ist Platz (gemessen: 85px Luft zwischen Menue und Knopf), darunter bleibt es bei 34px, sonst wird es bei 1060px eng (25px Luft). */ @media (min-width:1180px){ .nav__logo img{ height:40px; } } .nav__links{ display:flex; gap:18px; list-style:none; align-items:center; margin:0 auto; } /* Zwischen der Hamburger-Grenze (1024px) und 1100px wird es mit sieben Menuepunkten eng: das Original-Logo ist 10px breiter als die Nachbildung, bei 1025px mit Scrollleiste stiess der Knopf an den rechten Rand (gemessen 09.10.2026). 4px weniger Abstand je Punkt geben 24px frei. */ @media (min-width:1025px) and (max-width:1099px){ .nav__links{ gap:14px; } } .nav__links a{ position:relative; display:inline-block; color:var(--ink-soft); font-size:15px; font-weight:500; white-space:nowrap; padding:6px 0; } .nav__links a:hover{ color:var(--red-d); } .nav__links a.is-active, .nav__links a[aria-current="page"]{ color:var(--red-d); font-weight:600; } .nav__links a.is-active:after, .nav__links a[aria-current="page"]:after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--red); border-radius:2px; } .nav__cta{ font-size:15px; padding:11px 20px; flex:0 0 auto; } .nav__hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; } .nav__hamburger span{ width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; } .nav__mobile{ display:none; position:fixed; inset:68px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; padding:18px 24px; gap:6px; z-index:89; box-shadow:var(--shadow); max-height:calc(100vh - 68px); overflow-y:auto; } .nav__mobile.open{ display:flex; } .nav__mobile a{ padding:12px 4px; color:var(--ink); font-weight:600; border-bottom:1px solid var(--line-2); } .nav__mobile a.is-active, .nav__mobile a[aria-current="page"]{ color:var(--red-d); } .nav__mobile .btn{ margin-top:10px; } /* --- Bereichskennung in der Navigation -------------------------------- Die Navigation ist seit dem Umbau auf drei Bereiche kategoriegebunden: Laden, Batterie und Kraftwerk fuehren jeweils eigene Menuepunkte. Das Logo bleibt der Weg zurueck zur Weiche, die Kennung daneben nennt den Bereich, in dem man gerade ist. Ohne sie waere nicht erklaerbar, warum das Menue auf zwei Seiten unterschiedlich aussieht. Sie bleibt unterhalb von 1024px sichtbar, wo Links und CTA hinter dem Hamburger verschwinden -- gerade dort ist die Ortsangabe am wichtigsten. */ .nav__bereich{ position:relative; flex:0 0 auto; margin-left:15px; padding-left:16px; font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap; } .nav__bereich::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:19px; margin-top:-10px; background:var(--line); } .nav__bereich:hover{ color:var(--red-d); } .nav--kraftwerk .nav__bereich:hover{ color:var(--blue-d); } @media (max-width:400px){ .nav__bereich{ margin-left:10px; padding-left:11px; font-size:14px; } } /* Die Weiche traegt bewusst keine Themenpunkte: dort stehen nur die Marke und der Kontaktknopf. Das ist Absicht, keine vergessene Navigation. */ .nav--start .nav__inner{ justify-content:space-between; } /* Die Kennung bleibt am Logo, wenn kein Menue dazwischen steht: auf batterie.html (keine Unterseiten) und unter 1025px, wo das Menue zum Hamburger wird. Sonst verteilt space-between Logo, Kennung und Knopf ueber die ganze Breite und die Kennung schwebt in der Mitte. */ .nav__bereich + .nav__cta{ margin-left:auto; } @media (max-width:1024px){ .nav__bereich{ margin-right:auto; } } /* ========================================================================= 07 HERO (Startseite) ========================================================================= */ /* Lichtflecken im Hintergrund: siehe "Bewegter Markenhintergrund" in Abschnitt 08. */ .hero{ position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); } .hero__inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:52px; align-items:center; padding-top:clamp(44px,6vw,80px); padding-bottom:clamp(52px,7vw,88px); } .hero__tag{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); background:var(--red-bg); border:1px solid #F6D6DC; padding:6px 14px; border-radius:30px; margin-bottom:22px; } .hero h1 .accent{ color:var(--red); } /* Rasterfeld in .hero__inner. min-width:0 haelt lange Zeilen in der Spalte: Grid-Elemente haben min-width:auto und wachsen sonst ueber die Spalte hinaus. */ .hero__content{ min-width:0; } .hero__sub{ font-size:clamp(17px,2vw,20px); color:var(--ink-soft); margin:22px 0 0; max-width:54ch; } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; } .hero__trust{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; } .hero__trust-item{ font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; } .hero__trust-item:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto; } .hero__visual{ display:flex; flex-direction:column; gap:14px; } .hero__img{ border-radius:var(--radius); border:1px solid var(--line); aspect-ratio:16/9; overflow:hidden; box-shadow:var(--shadow); } .hero__img svg{ width:100%; height:100%; display:block; } .hero__stats{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; } .hero__stat{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); } .hero__stat-val{ font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1; } .hero__stat-val .counter{ color:var(--red); } .hero__stat-lbl{ font-size:13px; color:var(--muted); margin-top:7px; line-height:1.35; } .counter{ font-variant-numeric:tabular-nums; } /* ========================================================================= 08 SEITENKOPF .page-hero, .breadcrumb, .toc [NEU] Schlanker Kopf fuer Unterseiten: gleiche Sprache wie .hero, aber ohne Bild und ohne Vollbildhoehe. ========================================================================= */ .page-hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--white); border-bottom:1px solid var(--line); } /* --- Bewegter Markenhintergrund (12.10.2026) ------------------------------ Rueckmeldung: die Seite soll moderner und bewegter wirken. Zwei weiche Lichtflecken in Signalrot und Markenblau wandern langsam durch die rechte obere Ecke von .hero und .page-hero. Reines CSS: keine Datei, kein Skript, also keine Ausnahme in der CSP. Bewegt wird nur transform (Grafikkarte). isolation:isolate am Kopf haelt z-index:-1 innerhalb des Kopfes: die Flecken liegen ueber dessen weissem Grund, aber unter dem Inhalt. Lage mit Absicht weit weg vom Kicker oben links. Bis 1100px Breite reicht der Text so weit nach rechts, dass er unter die Flecken geriete; dort wandern sie deshalb nach unten rechts. Kicker in --red-d, Meta-Zeile und Trust-Zeile in --ink-soft: beide halten auch auf getoentem Grund ueber 4,5:1 (nachgemessen 15.10.2026). Signalrot (--red) haelt das nicht. Bewegung reduzieren: stehen still (Abschnitt 21). Druck und Kontrast- modus: aus. Die Prozentwerte in den Keyframes beziehen sich auf die Fleckgroesse, die Bahn schrumpft auf dem Telefon also mit. */ .hero:before,.hero:after,.page-hero:before,.page-hero:after{ content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%; will-change:transform; } .hero:before,.page-hero:before{ width:780px; height:780px; right:-240px; top:-440px; background:radial-gradient(closest-side, rgba(227,6,19,.20), rgba(227,6,19,.07) 55%, rgba(227,6,19,0)); animation:sc-glut-rot 12s ease-in-out infinite alternate; } .hero:after,.page-hero:after{ width:900px; height:900px; right:-460px; top:-320px; background:radial-gradient(closest-side, rgba(62,78,128,.22), rgba(62,78,128,.08) 55%, rgba(62,78,128,0)); animation:sc-glut-blau 16s ease-in-out infinite alternate; } @keyframes sc-glut-rot{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-26%,14%,0) scale(1.14); } 100%{ transform:translate3d(-8%,30%,0) scale(.92); } } @keyframes sc-glut-blau{ 0%{ transform:translate3d(0,0,0) scale(1.06); } 50%{ transform:translate3d(-28%,-6%,0) scale(.9); } 100%{ transform:translate3d(-46%,14%,0) scale(1.12); } } @media (max-width:1100px){ .hero:before,.page-hero:before{ width:440px; height:440px; right:-200px; top:auto; bottom:-260px; } .hero:after,.page-hero:after{ width:520px; height:520px; right:-300px; top:auto; bottom:-300px; } } .page-hero__inner{ position:relative; z-index:1; max-width:860px; padding-top:clamp(38px,5vw,64px); padding-bottom:clamp(26px,3.5vw,44px); } .page-hero__kicker{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red-d); margin-bottom:12px; } .page-hero h1{ font-size:clamp(30px,4.4vw,50px); } .page-hero__lead{ font-size:clamp(16.5px,1.9vw,20px); color:var(--ink-soft); margin:18px 0 0; max-width:66ch; } .page-hero__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; font-size:14px; color:var(--ink-soft); } .breadcrumb{ font-size:13.5px; color:var(--muted); background:var(--white); border-bottom:1px solid var(--line-2); } .breadcrumb .container{ padding-top:13px; padding-bottom:13px; } .breadcrumb ol,.breadcrumb ul{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; padding:0; } .breadcrumb li{ display:flex; align-items:center; } .breadcrumb li + li:before{ content:"\203A"; color:#AEB6BF; padding:0 9px; } .breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:var(--red-d); text-decoration:underline; } .breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:600; } .breadcrumb__sep{ color:#AEB6BF; padding:0 9px; } .toc{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:0 0 36px; } .toc__title{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; } .toc__list{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; } .toc__list li{ position:relative; padding-left:15px; } .toc__list li:before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--red); } .toc__list a{ font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid transparent; } .toc__list a:hover{ color:var(--red-d); border-bottom-color:var(--red); } /* Auf dem Telefon eine Spalte: als flex-wrap-Reihe landen Eintraege unterschiedlicher Laenge zufaellig gepaart ("TITAN" neben "Vergleich", der Rest allein darunter) und die Liste liest sich ungeordnet. */ @media(max-width:619px){ .toc__list{ flex-direction:column; gap:9px; } } /* ========================================================================= 09 TEXTBAUSTEINE [NEU] ========================================================================= */ .prose{ max-width:72ch; } .prose > :first-child{ margin-top:0; } .prose h2{ margin:44px 0 14px; } .prose h3{ margin:30px 0 10px; } .prose h4{ margin:24px 0 8px; } .prose p{ font-size:16.5px; color:var(--ink-soft); } .prose p:last-child{ margin-bottom:0; } .prose a{ text-decoration:underline; text-underline-offset:2px; } .prose small{ font-size:13px; color:var(--muted); display:block; margin-top:-.4em; } .bullets{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 1.1em; padding:0; } .bullets li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--ink-soft); } .bullets li:before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--red); font-weight:800; } .bullets li strong{ color:var(--ink); } .bullets--tight li{ font-size:15px; } .bullets--cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 26px; } .steps-num{ list-style:none; counter-reset:sn; display:flex; flex-direction:column; gap:16px; margin:0 0 1.1em; padding:0; } .steps-num li{ counter-increment:sn; position:relative; padding-left:46px; font-size:15.5px; color:var(--ink-soft); } .steps-num li:before{ content:counter(sn); position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:10px; background:var(--red-bg); color:var(--red-d); font-size:14px; font-weight:800; display:grid; place-items:center; } .steps-num li b,.steps-num li strong{ display:block; color:var(--ink); } .factbox{ background:var(--blue-bg); border:1px solid #D8DEEC; border-left:4px solid var(--blue); border-radius:10px; padding:20px 22px; margin:24px 0; font-size:15px; color:var(--ink-soft); } .factbox__title{ font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em; margin:0 0 8px; } .factbox p:last-child{ margin-bottom:0; } .factbox .bullets{ margin-bottom:0; } .factbox--warn{ background:var(--red-bg); border-color:#F5C2C7; border-left-color:var(--red); } .factbox--warn .factbox__title{ color:var(--red-d); } /* Tabellen: der Wrapper scrollt, nie die Seite */ table.datatable, .datatable > table, .datatable--scroll > table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } table.datatable th, .datatable > table th, .datatable--scroll > table th{ text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--bg-alt); padding:14px 18px; border-bottom:1px solid var(--line); font-weight:700; white-space:nowrap; } table.datatable td, .datatable > table td, .datatable--scroll > table td{ padding:14px 18px; border-bottom:1px solid var(--line-2); font-size:15px; vertical-align:top; } table.datatable tr:last-child td, .datatable > table tr:last-child td, .datatable--scroll > table tr:last-child td{ border-bottom:none; } table.datatable td:first-child, .datatable > table td:first-child, .datatable--scroll > table td:first-child{ font-weight:700; color:var(--ink); } table.datatable td.num, .datatable > table td.num, .datatable--scroll > table td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); } table.datatable tr.sum td, .datatable > table tr.sum td, .datatable--scroll > table tr.sum td{ background:var(--bg-alt); font-weight:800; color:var(--ink); border-top:2px solid var(--line); } .datatable--scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .datatable--scroll > table{ min-width:520px; } /* Folgen zwei dieser Bloecke direkt aufeinander, fehlt der Abstand: .section-header und .card bringen eigene Raender mit, .why__stats und .datatable--scroll nicht. Ohne diese Regel stossen Zahlenkacheln und Tabelle auf der Batterieseite ohne Luft aneinander. */ .why__stats + .datatable--scroll, .datatable--scroll + .datatable--scroll, .datatable--scroll + .why__stats, .datatable--scroll + .grid-2, .datatable--scroll + .grid-3{ margin-top:34px; } .datatable__note{ font-size:12.5px; color:var(--muted); margin:12px 0 0; } /* ========================================================================= 10 ABSCHLUSS-BAUSTEINE .cta-band, .next-pages [NEU] ========================================================================= */ .cta-band{ background:var(--ink); color:#c7ccd2; } .cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding:clamp(34px,4.6vw,58px) 0; } .cta-band__text{ max-width:60ch; } .cta-band h2{ color:#fff; font-size:clamp(23px,3vw,34px); } .cta-band p{ color:#c7ccd2; font-size:16px; margin:12px 0 0; } .cta-band__actions{ display:flex; gap:14px; flex-wrap:wrap; } .cta-band .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); } .cta-band .btn-outline:hover{ background:rgba(255,255,255,.08); border-color:#fff; } .next-pages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .next-pages__card{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; color:var(--ink); transition:.18s ease; } .next-pages__card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:#dbe0e6; } .next-pages__card h3{ font-size:17px; margin:0 0 6px; } .next-pages__card p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .next-pages__card:after{ content:"\2192"; display:inline-block; margin-top:14px; font-size:16px; font-weight:800; color:var(--red-d); } .next-pages__kicker{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } /* ========================================================================= 11 KARTEN UND RASTER ========================================================================= */ .grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; } .grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:.18s ease; } .card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:#dbe0e6; } .card--flat:hover{ box-shadow:none; transform:none; border-color:var(--line); } .card h3{ margin-bottom:10px; } .card p:last-child{ margin-bottom:0; } /* ========================================================================= 12 BESTANDSSEKTIONEN A ========================================================================= */ /* Pillars */ .pillar-card__icon{ width:52px; height:52px; border-radius:13px; background:var(--red-bg); display:grid; place-items:center; margin-bottom:18px; } .pillar-card h3{ margin-bottom:10px; } .pillar-card p{ font-size:15.5px; color:var(--ink-soft); margin:0 0 16px; } .pillar-card__specs{ display:flex; flex-wrap:wrap; gap:7px 7px; margin-bottom:18px; } /* Pillen-Reihe. PFLICHT als Wrapper um mehrere .spec-tag: Inline-Elemente ohne Whitespace dazwischen haben KEINE Umbruch- gelegenheit — drei nowrap-Pillen bilden dann einen unteilbaren Block und laufen aus der Karte. Als Flex-Container mit gap umbricht jede Pille fuer sich. */ .taglist{ display:flex; flex-wrap:wrap; gap:7px; } .spec-tag{ font-size:12.5px; font-weight:600; color:var(--ink); background:var(--bg-alt); border:1px solid var(--line); border-radius:20px; padding:4px 11px; /* Eine Pille bricht NIE innerhalb: sonst reisst das Wort und es bleibt eine halbleere Pille stehen. Passt sie nicht, rutscht sie in die naechste Zeile. Deshalb muessen die Beschriftungen kurz sein (Richtwert: max. 17 Zeichen). */ white-space:nowrap; } .pillar-card__link{ font-weight:700; font-size:15px; color:var(--red-d); } .pillar-card__link:hover{ text-decoration:underline; } /* Marktzahlen */ .why__stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } .why__stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; text-align:center; } .why__stat-val{ font-size:clamp(34px,4.4vw,48px); font-weight:800; color:var(--red); letter-spacing:-.03em; line-height:1; } .why__stat-lbl{ font-size:14.5px; color:var(--ink-soft); margin-top:14px; } /* --- Suer-Bezug (12.10.2026) ---------------------------------------------- Startseite #suer: Kennzahlen plus zwei Wege weiter. Kraftwerk und Batterie: ein Band am Ende des letzten Abschnitts vor dem CTA. Ueber uns #geschichte: Zeitleiste nach der Firmenhistorie auf suer.de. */ /* Kennzahlen: .grid-4 faellt unter 980px auf eine Spalte -- vier hohe Karten untereinander. Hier zwei Spalten bis 560px (Spezifitaet .grid-4.x schlaegt die spaetere Sammelregel im 980px-Block). */ @media (max-width:980px){ .grid-4.suer__zahlen,.grid-4.about__kpis{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (max-width:560px){ .grid-4.suer__zahlen,.grid-4.about__kpis{ grid-template-columns:minmax(0,1fr); } } .suer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; } .suer-band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 28px; margin-top:40px; padding:22px 28px; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(100deg, var(--red-bg), var(--blue-bg)); } .suer-band p{ margin:0; max-width:72ch; font-size:15.5px; color:var(--ink-soft); } .suer-band p strong{ color:var(--ink); } .suer-band a{ font-weight:700; white-space:nowrap; } .zeitleiste{ list-style:none; margin:0 auto; padding:0; max-width:820px; display:grid; gap:4px; } .zeitleiste li{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:20px; align-items:baseline; padding:15px 20px; border-radius:12px; } .zeitleiste li:nth-child(odd){ background:var(--bg-alt); } .zeitleiste li p{ margin:0; color:var(--ink-soft); } .zeitleiste__jahr{ font-size:17px; font-weight:800; color:var(--red-d); font-variant-numeric:tabular-nums; white-space:nowrap; } .zeitleiste li:last-child .zeitleiste__jahr{ color:var(--blue-d); } @media (max-width:560px){ .zeitleiste li{ grid-template-columns:minmax(0,1fr); gap:2px; } } .why__source{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:24px; } .why__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; } /* Steps */ .steps__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; } .step{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; } .step__number{ width:42px; height:42px; border-radius:11px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:800; font-size:18px; margin-bottom:16px; } .step__title{ font-weight:800; color:var(--ink); font-size:18px; margin-bottom:8px; } .step__desc{ font-size:15px; margin:0 0 14px; } .step__badge{ display:inline-block; font-size:12px; font-weight:700; color:var(--red-d); background:var(--red-bg); border-radius:6px; padding:4px 10px; white-space:nowrap; } /* Wertschoepfungskette */ .chain{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center; } .chain__node{ flex:1 1 150px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px 18px; text-align:center; } .chain__num{ width:34px; height:34px; border-radius:9px; background:var(--red-bg); color:var(--red-d); font-weight:800; display:grid; place-items:center; margin:0 auto 12px; } .chain__node h4{ font-size:15.5px; margin-bottom:5px; } .chain__node p{ font-size:13px; color:var(--muted); margin:0; } .chain__arrow{ display:flex; align-items:center; color:var(--red); font-size:22px; padding:0 6px; } .chain__depot{ margin-top:24px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:26px 30px; text-align:center; } .chain__depot h3{ color:#fff; margin-bottom:6px; } .chain__depot p{ color:#c7ccd2; margin:0 0 16px; } .chain__locations{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .loc-tag{ font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:5px 13px; white-space:nowrap; } /* ========================================================================= 13 BESTANDSSEKTIONEN B ========================================================================= */ /* Segment-Tabs */ .segments__tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; } .segment-tab{ font-family:inherit; font-size:15px; font-weight:600; color:var(--ink-soft); background:#fff; border:1.5px solid var(--line); border-radius:30px; padding:10px 20px; cursor:pointer; transition:.16s; } .segment-tab:hover{ border-color:var(--red); color:var(--red-d); } .segment-tab.active{ background:var(--red); border-color:var(--red); color:#fff; } .segment-panel{ display:none; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:26px; } .segment-panel.active{ display:grid; } .segment-panel__content{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; } .segment-panel__content h3{ margin-bottom:10px; } .segment-panel__content > p{ font-size:15.5px; margin-bottom:18px; } .segment-feature{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-top:1px solid var(--line-2); font-size:15px; color:var(--ink-soft); } .segment-feature-icon{ flex:0 0 auto; font-size:18px; } .segment-panel__metrics{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:26px; align-self:start; } .segment-panel__metrics h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; opacity:.7; } .metric-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px; } .metric-row:last-child{ border-bottom:none; } .metric-lbl{ color:#c7ccd2; } .metric-val{ font-weight:700; color:#fff; text-align:right; } .metric-val.highlight{ color:#ff8a9b; } /* Zwei Wege */ .way-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; } .way{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; overflow:hidden; } .way::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--red); } .way--alt::before{ background:var(--brand-grad); } .way__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .way__tag{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--red); border-radius:6px; padding:5px 10px; white-space:nowrap; } .way__tag--alt{ background:var(--blue); } /* Ebenen-unabhaengig: das Markup nutzt h3, damit die Ueberschriftenhierarchie der Seite sprungfrei bleibt. Der Selektor stand vorher nur auf h4 und lief nach dieser Umstellung leer — die Karten fielen auf die globale h3-Groesse zurueck. Beide Ebenen nennen, dann kann das nicht wieder verrotten. */ .way__head h3, .way__head h4{ font-size:19px; margin:0; color:var(--ink); } .way > p{ font-size:15px; margin:0 0 16px; } .way__fit{ font-size:14.5px; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line-2); color:var(--ink-soft); } /* Kategorie-Kacheln: die drei Sortimentsbereiche als Weiche. Jede Kachel ist als Ganzes anklickbar und fuehrt auf die Kategorieseite. Ausnahme: eine noch nicht verfuegbare Kategorie wird als
statt ausgeliefert - eine Kachel, die auf eine leere Seite fuehrt, ist schlimmer als eine, die ehrlich sagt, dass es noch nichts zu sehen gibt. */ .kat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; } .kat{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } /* Kopfleiste als erstes Flex-Element. flex:0 0 4px ist Pflicht - mit bloss height:4px staucht der Flex-Container sie auf 0. */ .kat::before{ content:""; flex:0 0 4px; background:var(--red); } .kat--kraftwerk::before{ background:var(--brand-grad); } .kat--soon::before{ background:#C3C9D0; } a.kat:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:#dbe0e6; } /* Im Kopf stehen nur Kicker und Titel, beide immer einzeilig. Dadurch liegen die Bildflaechen aller drei Kacheln konstruktiv auf einer Linie. Die Unterzeile ist je Kategorie unterschiedlich lang und steht deshalb UNTER dem Bild - stand sie im Kopf, verrutschten die Bilder gegeneinander. */ .kat__head{ padding:24px 26px 22px; } .kat__kicker{ display:block; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; } .kat__head h2{ font-size:clamp(22px,2.3vw,27px); margin:0; } /* Gleiche Bildflaeche fuer alle drei: 4:3 auf demselben hellen Grund. Der Grund ist identisch mit dem Grund im Batterie-SVG, damit freigestelltes Foto und Zeichnung auf derselben Flaeche zu stehen scheinen. */ .kat__bild{ aspect-ratio:4/3; background:linear-gradient(#FBFBFC,#EFEFF1); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); } .kat__bild img{ display:block; width:100%; height:100%; object-fit:cover; } .kat__body{ display:flex; flex-direction:column; flex:1; padding:22px 26px 26px; } .kat__sub{ font-size:15px; color:var(--ink-soft); margin:0 0 16px; } .kat__body .bullets{ margin-bottom:18px; } .kat__mehr{ margin-top:auto; font-size:15px; font-weight:700; color:var(--red-d); } .kat__mehr::after{ content:"\00a0\2192"; } .kat--kraftwerk .kat__mehr{ color:var(--blue-d); } .kat__hinweis{ margin-top:auto; font-size:14.5px; color:var(--muted); } .kat__badge{ position:absolute; top:16px; right:18px; z-index:2; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); background:#fff; border:1px solid #C3C9D0; border-radius:999px; padding:6px 12px; } /* Bildband auf der Kraftwerk-Seite. Einziges grossflaechiges Foto der Website; die Bildunterschrift traegt die Aussage, das Bild allein wuerde dekorieren. */ .kw-figur{ margin:0; } .kw-figur img{ display:block; width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); } .kw-figur figcaption{ margin-top:12px; font-size:14.5px; color:var(--muted); max-width:760px; } /* Erklaer-Bausteine */ .explain-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .explain-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; } .explain-card__top{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; } /* flex-wrap ist Pflicht: .explain-card__badge traegt white-space:nowrap. Ohne Umbruch schob das Badge die Ueberschrift bei 320px um 32px aus der Karte. */ .explain-card__badge{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--brand-grad); border-radius:6px; padding:5px 10px; white-space:nowrap; } .explain-card h3{ font-size:19px; margin:0; } .explain-card p{ font-size:15px; margin:0 0 14px; } .explain-card__rows{ border-top:1px solid var(--line-2); } .explain-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14.5px; } .explain-row span:first-child{ color:var(--muted); } .explain-row span:last-child{ font-weight:700; color:var(--ink); text-align:right; } /* ========================================================================= 14 BESTANDSSEKTIONEN C ========================================================================= */ /* Kostentabelle */ .cost-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .cost-table th{ text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--bg-alt); padding:14px 18px; border-bottom:1px solid var(--line); font-weight:700; } .cost-table td{ padding:14px 18px; border-bottom:1px solid var(--line-2); font-size:15px; vertical-align:top; } .cost-table tr:last-child td{ border-bottom:none; } .cost-table td:first-child{ font-weight:700; color:var(--ink); } .cost-table td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); } .cost-table tr.sum td{ background:var(--bg-alt); font-weight:800; color:var(--ink); border-top:2px solid var(--line); } .cost-table__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Rechenbeispiel */ .example{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .example__side{ padding:30px; } .example__side--facts{ background:var(--ink); color:#fff; } .example__side--facts h3{ color:#fff; font-size:19px; margin-bottom:6px; } .example__side--facts > p{ color:#aab3bf; font-size:14.5px; margin:0 0 18px; } .example__fact{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14.5px; color:#dfe4ea; } .example__fact b{ color:#fff; white-space:nowrap; } .example__side--calc h3{ font-size:19px; margin-bottom:6px; } .example__side--calc > p{ font-size:14.5px; margin:0 0 18px; } .example__line{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:15px; } .example__line b{ white-space:normal; font-variant-numeric:tabular-nums; } /* nowrap entfernt: die Regel war fuer Zahlenwerte gedacht, traf aber auch Prosa wie "nahe am Ausgangswert" und schnitt sie bei 360px ab. Zahlen halten ihre Einheit ueber   zusammen. */ .example__line--total{ border-bottom:none; border-top:2px solid var(--line); margin-top:6px; padding-top:14px; font-weight:800; color:var(--ink); font-size:17px; } .example__note{ font-size:13px; color:var(--muted); margin:16px 0 0; line-height:1.55; } /* Foerder-Karten */ .fund-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:22px; } .fund-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:relative; overflow:hidden; } .fund-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--brand-grad); } .fund-card h4{ font-size:17px; margin:8px 0 8px; } .fund-card p{ font-size:14.5px; margin:0 0 12px; } .fund-card__tag{ display:inline-block; font-size:12px; font-weight:700; color:var(--blue-d); background:var(--blue-bg); border-radius:6px; padding:4px 10px; } .notice{ display:flex; gap:14px; align-items:flex-start; background:var(--blue-bg); border:1px solid #D8DEEC; border-left:4px solid var(--blue); border-radius:10px; padding:18px 20px; font-size:14.5px; color:var(--ink-soft); } .notice strong{ color:var(--ink); } /* Begriffe */ .terms{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .term{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; } .term dt{ font-weight:800; color:var(--ink); font-size:15.5px; margin-bottom:5px; } .term dd{ margin:0; font-size:14.5px; color:var(--ink-soft); } /* Netzanschluss-Leiter */ .ladder{ display:flex; flex-direction:column; } .ladder__step{ display:grid; grid-template-columns:56px minmax(0,1fr) 190px; gap:20px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin-bottom:14px; position:relative; } .ladder__step::after{ content:""; position:absolute; left:47px; bottom:-14px; width:2px; height:14px; background:var(--line); } .ladder__step--last::after{ display:none; } .ladder__num{ width:40px; height:40px; border-radius:11px; background:var(--brand-grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:17px; } .ladder__step--last .ladder__num{ background:var(--ink); } .ladder__body h3{ font-size:18px; margin:6px 0 8px; } .ladder__body p{ font-size:15px; margin:0; } .ladder__meta{ display:flex; flex-direction:column; gap:7px; padding-top:8px; } .ladder__cost,.ladder__time{ font-size:13px; font-weight:700; border-radius:6px; padding:5px 11px; text-align:center; } .ladder__cost{ color:var(--red-d); background:var(--red-bg); } .ladder__time{ color:var(--blue-d); background:var(--blue-bg); } /* Rechenkette */ .calcchain{ display:flex; align-items:stretch; justify-content:center; flex-wrap:wrap; gap:8px; } .calcchain__box{ flex:1 1 165px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 14px; text-align:center; position:relative; } .calcchain__box--result{ background:var(--ink); border-color:var(--ink); } .calcchain__step{ display:block; width:24px; height:24px; margin:0 auto 9px; border-radius:7px; background:var(--brand-grad); color:#fff; font-size:12px; font-weight:800; line-height:24px; } .calcchain__box b{ display:block; font-size:14px; color:var(--ink); margin-bottom:5px; } .calcchain__box span:last-child{ font-size:14.5px; color:var(--muted); font-variant-numeric:tabular-nums; } .calcchain__box--result b,.calcchain__box--result span:last-child{ color:#fff; } .calcchain__op{ display:flex; align-items:center; font-size:20px; font-weight:800; color:var(--red); padding:0 2px; } /* ========================================================================= 15 BESTANDSSEKTIONEN D ========================================================================= */ /* Trust / Ueber uns */ .trust__partner{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; max-width:760px; margin:0 auto; } .trust__partner-name{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-bottom:8px; } .trust__partner h3{ font-size:23px; margin-bottom:12px; } .trust__partner > p{ font-size:16px; color:var(--ink-soft); margin-bottom:18px; } .trust__partner-facts{ display:flex; flex-direction:column; gap:9px; } .trust__fact{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink-soft); } .trust__fact:before{ content:"\2713"; color:var(--red); font-weight:800; flex:0 0 auto; } .trust__quote{ max-width:760px; margin:34px auto 0; text-align:center; } .trust__quote-text{ font-size:clamp(20px,2.6vw,28px); font-weight:700; color:var(--ink); letter-spacing:-.01em; line-height:1.3; } .trust__quote-author{ font-size:14px; color:var(--muted); margin-top:12px; } .trust__key-partners{ max-width:760px; margin:34px auto 0; text-align:center; } .trust__key-partners h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:16px; } .trust__partner-logos{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .trust__partner-logo{ font-size:14px; font-weight:700; color:var(--ink); background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; padding:9px 16px; } /* FAQ */ .faq__list{ max-width:820px; margin:0 auto; } .faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; } .faq-item[open]{ border-color:#dbe0e6; box-shadow:var(--shadow); } .faq-question{ list-style:none; cursor:pointer; padding:20px 22px; font-weight:600; color:var(--ink); font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-question::-webkit-details-marker{ display:none; } .faq-icon{ flex:0 0 auto; width:22px; height:22px; position:relative; } .faq-icon:before,.faq-icon:after{ content:""; position:absolute; background:var(--red); border-radius:2px; transition:.2s; } .faq-icon:before{ top:10px; left:3px; right:3px; height:2px; } .faq-icon:after{ left:10px; top:3px; bottom:3px; width:2px; } .faq-item[open] .faq-icon:after{ transform:scaleY(0); } .faq-answer{ padding:0 22px 20px; } .faq-answer p{ margin:0; color:var(--ink-soft); font-size:15.5px; } .faq-answer p + p{ margin-top:.8em; } /* Kontakt */ .contact__inner{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:36px; } .contact__info > p{ font-size:16px; } .person-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin:20px 0; } .person-card__header{ display:flex; align-items:center; gap:14px; } .person-card__avatar{ background:var(--red-bg); border-radius:50%; padding:2px; } .person-card__name{ font-weight:800; color:var(--ink); } .person-card__title{ font-size:13.5px; color:var(--muted); } .person-card__quote{ font-style:italic; font-size:15px; color:var(--ink-soft); margin:16px 0; } .person-card__contact{ display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:600; } .person-card__availability{ font-size:12.5px; color:var(--muted); margin-top:12px; } .contact__details{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } .contact__detail{ display:flex; gap:11px; } .contact__detail-icon{ font-size:18px; } .contact__detail-label{ font-size:12.5px; color:var(--muted); } .contact__detail-val{ font-size:14.5px; color:var(--ink); font-weight:600; } /* Formular (Netlify Forms) */ .contact__form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; } .form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; } .form-group{ margin-bottom:16px; } .form-label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:7px; } .form-input,.form-textarea{ width:100%; font-family:inherit; font-size:15px; padding:12px 14px; border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); transition:.15s; } .form-input:focus,.form-textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(227,6,19,.12); } .form-textarea{ resize:vertical; min-height:90px; } .form-radio-group{ display:flex; gap:8px; flex-wrap:wrap; } .form-radio{ flex:1; min-width:70px; display:flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--line); border-radius:9px; padding:9px; font-size:14px; cursor:pointer; } .form-radio:has(input:checked){ border-color:var(--red); background:var(--red-bg); color:var(--red-d); font-weight:600; } .form-radio input{ accent-color:var(--red); } .form-radio:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px rgba(227,6,19,.12); } .form-submit{ width:100%; margin-top:4px; } .form-note{ font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center; } .form-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-error{ margin:0 0 12px; padding:12px 15px; border-radius:9px; background:var(--red-bg); border:1px solid #F5C2C7; color:var(--red-d); font-size:14.5px; line-height:1.5; } .form-submit[aria-busy="true"]{ opacity:.65; cursor:progress; } /* ========================================================================= 16 FOOTER ========================================================================= */ .footer{ background:var(--ink); color:#c7ccd2; padding:54px 0 30px; } .footer__top{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:30px; } /* Erstes der fuenf Rasterfelder in .footer__top, siehe .hero__content. */ .footer__brand{ min-width:0; } .footer__logo{ margin-bottom:16px; } .footer__logo img{ display:block; height:46px; width:auto; } /* Farbfassung nur fuer den Druck (siehe @media print). Die Klasse allein reicht nicht: .footer__logo img ist spezifischer und setzte display:block. */ .footer__logo img.footer__logo-druck{ display:none; } .footer__byline{ font-size:13.5px; line-height:1.6; } .footer__col h3{ color:#fff; font-size:14px; margin:0 0 14px; } .footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; } .footer__col a{ color:#9aa3ad; font-size:14px; } .footer__col a:hover{ color:#fff; } .footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); } .footer__legal{ display:flex; gap:18px; font-size:13px; flex-wrap:wrap; } .footer__legal a{ color:#9aa3ad; } .footer__legal a:hover{ color:#fff; } .footer__partners{ display:flex; gap:10px; flex-wrap:wrap; } .footer__partner-badge{ font-size:12px; color:#9aa3ad; background:rgba(255,255,255,.06); border-radius:6px; padding:5px 11px; } /* ========================================================================= 17 FLOATING UI, COOKIE, MODAL ========================================================================= */ .floating-cta{ position:fixed; right:22px; bottom:22px; z-index:80; opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s, visibility .25s; } .floating-cta.visible{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .floating-cta__btn{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; font-weight:700; font-size:15px; padding:14px 22px; border-radius:30px; box-shadow:0 10px 30px rgba(227,6,19,.4); } .back-to-top{ position:fixed; left:22px; bottom:22px; z-index:80; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); color:var(--ink); font-size:20px; cursor:pointer; box-shadow:var(--shadow); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s, visibility .25s; } .back-to-top.visible{ opacity:1; visibility:visible; pointer-events:auto; } .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:110; background:var(--ink); color:#c7ccd2; transform:translateY(100%); visibility:hidden; transition:transform .3s, visibility .3s; } .cookie-banner.visible{ transform:none; visibility:visible; } .cookie-banner__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; flex-wrap:wrap; } .cookie-banner__text{ font-size:13.5px; margin:0; } .cookie-banner__text a{ color:#fff; text-decoration:underline; } .cookie-banner__actions{ display:flex; gap:10px; } .btn-cookie-decline,.btn-cookie-accept{ font-family:inherit; font-size:14px; font-weight:600; padding:10px 18px; border-radius:8px; cursor:pointer; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; } .btn-cookie-accept{ background:var(--red); border-color:var(--red); } .modal-overlay{ position:fixed; inset:0; z-index:130; background:rgba(26,35,50,.6); display:none; align-items:center; justify-content:center; padding:24px; } .modal-overlay.open{ display:flex; } .modal{ background:#fff; border-radius:18px; padding:40px; max-width:420px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.3); } .modal__icon{ width:60px; height:60px; border-radius:50%; background:#ECFDF3; color:#16a34a; font-size:30px; display:grid; place-items:center; margin:0 auto 18px; } .modal h3{ margin-bottom:10px; } .modal p{ color:var(--ink-soft); margin-bottom:22px; } /* ========================================================================= 18 PRODUKT-3D "ROTATIONSSTUDIO" Echtes CSS-3D, keine Bibliothek, keine Bilder. Das JS setzt ausschliesslich --ry (deg), --rx (deg), --ty (px), --sc (unitless) und --rev (0..1). Alles andere rechnet das CSS. --pv-w / --pv-h / --pv-d stehen inline auf .pv-model (Modell-Partial). ========================================================================= */ /* --- Raster der Vorschaukarten (Startseite) ---------------------------- */ .pv-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; } /* --- Karte ------------------------------------------------------------- */ .pv-card{ position:relative; padding:22px 22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(120% 92% at 50% 10%, #FBFCFD 0%, #EEF1F5 100%); cursor:pointer; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .pv-card:hover{ box-shadow:var(--shadow); border-color:#dbe0e6; } .pv-card:focus-visible{ outline:2px solid var(--red); outline-offset:3px; } .pv-card.is-open{ box-shadow:var(--shadow); border-color:#d3d9e0; } /* --- Buehne: feste Hoehe, damit beim Reveal nichts umbricht ------------ place-items:end center legt alle Modelle einer Reihe auf eine gemeinsame Standlinie (Modellhoehen 330-430px). */ .pv-stage{ position:relative; display:grid; place-items:end center; min-height:var(--pv-stage-h); padding-bottom:30px; perspective:1400px; perspective-origin:50% 42%; } /* --- Modell ------------------------------------------------------------ --pv-fit skaliert die Geometrie (Layoutbox mitgerechnet), nicht die transform-Kette: sonst schrumpft das Modell zur Boxmitte und die Standlinien der vier Modelle laufen auseinander. Standfuss als transform-origin: Drehung und --sc lassen das Modell auf der Standlinie stehen. */ .pv-model{ position:relative; transform-style:preserve-3d; --pv-fw:calc(var(--pv-w,140px) * var(--pv-fit,1)); --pv-fh:calc(var(--pv-h,360px) * var(--pv-fit,1)); --pv-fd:calc(var(--pv-d,92px) * var(--pv-fit,1)); width:var(--pv-fw); height:var(--pv-fh); transform-origin:50% 100%; transform: translateX(var(--pv-dx,0px)) translateY(var(--ty,0px)) rotateY(var(--ry,-34deg)) rotateX(calc(var(--pv-tilt,-6deg) + var(--rx,0deg))) scale(var(--sc,1)); transition:none; } /* Die Scroll-Kopplung laeuft ohne transition (das JS setzt jeden Frame). Erst nach dem Reveal setzt das JS .is-settled und gibt den weichen Zeiger-Tilt frei. */ .pv-model.is-settled{ transition:transform 420ms cubic-bezier(.22,.61,.36,1); } /* --- Flaechen ---------------------------------------------------------- */ .pv-face{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--hw-1); } .pv-face svg{ width:100%; height:100%; display:block; } .pv-face--front{ background:var(--hw-1); transform:translateZ(calc(var(--pv-fd,92px) / 2)); } .pv-face--back{ background:linear-gradient(180deg,var(--hw-2),var(--hw-3)); transform:rotateY(180deg) translateZ(calc(var(--pv-fd,92px) / 2)); } /* Flanke: Breite = Tiefe, horizontal zentriert, dann aufgestellt und an die Aussenkante geschoben. Bei --ry:-34deg zeigt genau diese Flanke zum Betrachter (Begruendung im Anhang, Punkt 1). */ .pv-face--side{ width:var(--pv-fd,92px); left:calc(50% - var(--pv-fd,92px) / 2); right:auto; background:linear-gradient(90deg,var(--hw-3) 0%,var(--hw-2) 62%,var(--hw-3) 100%); box-shadow:inset 1px 0 0 rgba(92,102,116,.55); transform:rotateY(90deg) translateZ(calc(var(--pv-fw,140px) / 2)); } /* Kappe: Hoehe = Tiefe, auf Modellmitte zentriert, dann per rotateX(90deg) + translateZ in die Deckelebene (y = -h/2) gelegt. */ .pv-face--top{ height:var(--pv-fd,92px); top:calc(50% - var(--pv-fd,92px) / 2); bottom:auto; background:linear-gradient(180deg,var(--hw-edge) 0%,var(--hw-2) 100%); box-shadow:inset 0 -1px 0 rgba(0,0,0,.25); transform:rotateX(90deg) translateZ(calc(var(--pv-fh,360px) / 2)); } /* --- Glanzband --------------------------------------------------------- */ .pv-sheen{ position:absolute; top:-2%; bottom:-2%; left:-45%; right:-45%; pointer-events:none; mix-blend-mode:screen; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.16) 54%, transparent 70%); /* Basis: an den Reveal-Fortschritt gekoppelt (unitless, laeuft ueberall) */ transform:translateX(calc(var(--rev,1) * 34% - 12%)); } /* Wo calc() Winkel in Zahlen umrechnen kann, direkt an --ry koppeln; dann reagiert das Glanzband auch auf den Zeiger-Tilt. */ @supports (transform:translateX(calc(1deg / 1deg * 1px))){ .pv-sheen{ transform:translateX(calc(var(--ry,-34deg) / 1deg * -1.6px)); } } .pv-model.is-settled .pv-sheen{ transition:transform 420ms cubic-bezier(.22,.61,.36,1); } /* --- Bodenschatten ----------------------------------------------------- */ .pv-shadow{ position:absolute; left:50%; bottom:16px; height:28px; width:calc(46% + var(--rev,1) * 26%); transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(26,35,50,.58) 0%, rgba(26,35,50,.26) 55%, rgba(26,35,50,0) 78%); opacity:calc(.10 + var(--rev,1) * .18); /* Maximum .28 */ filter:blur(calc(4px + (1 - var(--rev,1)) * 6px)); pointer-events:none; } /* --- Hotspots: visuelle Pins auf der Frontflaeche ---------------------- */ .pv-hotspot{ position:absolute; left:var(--hx,50%); top:var(--hy,50%); display:flex; align-items:center; gap:10px; margin:0; padding:0; border:0; background:none; font-family:inherit; transform:translate(-50%,-50%) translateZ(calc(var(--pv-fd,92px) / 2 + 14px)) scale(.7); opacity:0; pointer-events:none; transition:opacity .24s ease, transform .24s ease; } .pv-card.is-open .pv-hotspot{ opacity:1; pointer-events:auto; cursor:default; transform:translate(-50%,-50%) translateZ(calc(var(--pv-fd,92px) / 2 + 14px)) scale(1); } .pv-hotspot__dot{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--red); color:#fff; font-size:12px; font-weight:800; line-height:22px; text-align:center; box-shadow:0 2px 8px rgba(227,6,19,.45), 0 0 0 3px rgba(255,255,255,.55); } .pv-hotspot__label{ white-space:nowrap; font-size:12.5px; font-weight:700; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:5px 10px; box-shadow:var(--shadow); opacity:0; transform:translateX(-6px); transition:opacity .24s ease, transform .24s ease; } .pv-card.is-open .pv-hotspot__label, .pv-hotspot:hover .pv-hotspot__label, .pv-hotspot:focus-visible .pv-hotspot__label{ opacity:1; transform:none; } /* Staffelung. Die Pins sind die einzigen