/* ===================================================================== TOBIXSOULGROWTH · MUSTER RESET Salespage Semantisches HTML/CSS, kein Framework. Farben kommen aus tokens.css. Typografie: eine Familie, Inter als Variable Font. Die opsz-Achse liefert die Display-Schnitte fuer grosse Headlines, wght deckt Regular bis ExtraBold ab. Keine Serifenschrift. 01 Tokens (in tokens.css) 02 Reset & Base 03 Typografie 04 Layout 05 Komponenten 06 Motion 07 Responsive 08 Rechtsseiten und 404 ===================================================================== */ /* --------------------------------------------------------------------- 01 LOKALE TOKENS ------------------------------------------------------------------- */ :root{ --max:1120px; --gutter:clamp(20px,5vw,40px); --radius:18px; --radius-lg:24px; --radius-pill:999px; --radius-btn:12px; /* Buttons: abgerundetes Rechteck wie in der Referenz */ --section-y:clamp(64px,8.2vw,112px); --ease:cubic-bezier(.22,.61,.36,1); --dur:.22s; --schatten-karte:0 1px 2px rgba(27,20,36,.04),0 14px 32px -24px rgba(27,20,36,.2); --icon-check:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E"); --icon-pfeil-rechts:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --icon-pfeil-runter:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------- 02 RESET & BASE ------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16.5px; font-weight:400; line-height:1.62; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{display:block;max-width:100%;height:auto} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-ink)} button{font:inherit;color:inherit} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} ::selection{background:rgba(107,75,209,.18)} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px} .dark :focus-visible,.offer-box :focus-visible{outline-color:var(--brand-light)} .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; } .skip-link{ position:absolute;left:12px;top:-100px;z-index:200; background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px; font-size:14px;font-weight:600; } .skip-link:focus{top:12px;color:#fff} /* --------------------------------------------------------------------- 03 TYPOGRAFIE Display-Schnitte: maximale optische Groesse, eng gesetzt. ------------------------------------------------------------------- */ .h1,.h2,.h3{ font-family:var(--display); font-weight:800; font-variation-settings:'opsz' 32; letter-spacing:-.03em; line-height:1.07; text-wrap:balance; } .h1{font-size:clamp(2.25rem,5.2vw,3.85rem);margin:0 0 22px} .h2{font-size:clamp(1.72rem,3.5vw,2.6rem);line-height:1.1;margin:0 0 16px} .h3{ font-size:clamp(1.02rem,1.3vw,1.14rem); font-weight:700;letter-spacing:-.018em;line-height:1.32; margin:0 0 8px; } .h1-line{display:block} .em{color:var(--brand)} .dark .em,.final .em{color:var(--brand-light)} .soft{color:var(--muted)} .lead{ font-size:clamp(1.02rem,1.25vw,1.12rem); line-height:1.68;color:var(--muted);max-width:52ch; } .center .lead{margin-inline:auto} /* --------------------------------------------------------------------- 04 LAYOUT ------------------------------------------------------------------- */ .shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .shell--narrow{max-width:800px} .center{text-align:center} .center .h2{margin-inline:auto} .section{padding-block:var(--section-y);position:relative} .section + .section{border-top:1px solid var(--line)} .section--soft{background:var(--paper-soft);border-top-color:transparent} .section--soft + .section{border-top-color:transparent} .section--tint{background:var(--brand-tint);border-top-color:transparent} .section--tint + .section{border-top-color:transparent} .dark{background:var(--ink-deep);color:var(--on-dark);border-top:none !important} .dark::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 70% at 50% -10%,rgba(184,156,255,.15),transparent 62%); } .dark > *{position:relative;z-index:1} .dark .h2{color:var(--on-dark)} .dark p,.dark .lead{color:var(--on-dark-soft)} /* Die Offerbox ist eine helle Flaeche in der dunklen Sektion. Hier gelten wieder die dunklen Textfarben. */ .dark .offer-box .h2{color:var(--ink)} .dark .offer-box p,.dark .offer-box .lead,.dark .offer-box .micro{color:var(--muted)} .dark .offer-box .offer-marke{color:var(--brand)} .dark .offer-box li{color:var(--ink)} .dark .offer-box .price{color:var(--ink)} .section-head .h2{max-width:20em} .section-head.center,.center .section-head{margin-inline:auto} .section-head.center .h2{max-width:22em;margin-inline:auto} .section-body{margin-top:clamp(26px,3vw,36px)} /* Bild neben Text. Ohne Modifier steht das Bild rechts. */ .medien{display:grid;gap:clamp(28px,4vw,58px);align-items:center} @media (min-width:900px){ .medien{grid-template-columns:1.06fr .94fr} .medien--umgekehrt .medien-text{order:0} } .medien--umgekehrt .medien-text{order:-1} .medien-bild img{width:100%;max-width:600px;margin-inline:auto} /* --------------------------------------------------------------------- 05 KOMPONENTEN ------------------------------------------------------------------- */ /* --- Topbar ------------------------------------------------------- */ .topbar{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); } @supports not (background:color-mix(in srgb,red 50%,blue)){ .topbar{background:rgba(252,251,254,.94)} } .topbar-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px} .wordmark{ font-family:var(--display);font-size:1.02rem;font-weight:700; letter-spacing:-.02em;line-height:1;color:var(--ink); } .wordmark i{font-style:normal;color:var(--brand)} a.wordmark{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px} .topbar-cta{ display:inline-flex;align-items:center;gap:12px; font-size:.85rem;font-weight:500;color:var(--ink); opacity:0;transform:translateY(-4px);pointer-events:none; transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); } .topbar-price{color:var(--muted)} body.is-scrolled .topbar-cta{opacity:1;transform:none;pointer-events:auto} .topbar-cta .btn{min-height:42px;padding-inline:20px;font-size:.85rem} /* --- Buttons ------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:54px;padding:14px 30px; border:1px solid var(--ink);border-radius:var(--radius-btn); background:var(--ink);color:#fff; font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.3; text-align:center;text-wrap:balance;cursor:pointer; transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), transform .12s var(--ease); } .btn:hover{background:#2a2036;border-color:#2a2036;color:#fff} .btn:active{transform:translateY(1px)} .btn--brand{ background:linear-gradient(135deg,var(--brand),#7a56d8); border-color:transparent; box-shadow:0 12px 28px -14px rgba(107,75,209,.6); } .btn--brand:hover{ background:linear-gradient(135deg,#523394,#6a47c6);border-color:transparent;color:#fff; } .btn--glow{box-shadow:0 14px 34px -12px rgba(122,86,216,.8),0 0 48px -12px rgba(184,156,255,.55)} .btn--glow:hover{box-shadow:0 16px 38px -12px rgba(122,86,216,.9),0 0 58px -10px rgba(184,156,255,.68)} .btn--light{background:var(--paper);border-color:var(--paper);color:var(--ink-deep)} .btn--light:hover{background:#fff;border-color:#fff;color:var(--ink-deep)} .btn--block{width:100%} .micro{margin:14px 0 0;font-size:.82rem;line-height:1.6;color:var(--muted)} .dark .micro{color:var(--on-dark-soft)} .cta-group{margin-top:28px} /* --- Platzhalter-Kennzeichnung ------------------------------------- */ .ph{ position:relative;border:1px dashed var(--line-strong);border-radius:var(--radius); background: repeating-linear-gradient(135deg,rgba(107,75,209,.035) 0 10px,transparent 10px 20px), var(--brand-tint); color:var(--muted); } .ph-label{ display:inline-flex;align-items:center;gap:8px; font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--brand); } .ph-note{ margin-top:24px;padding:15px 18px; border:1px dashed var(--line-strong);border-left:3px solid var(--brand); border-radius:12px;background:rgba(255,255,255,.6); font-size:.82rem;line-height:1.62;color:var(--muted); } .ph-note b{color:var(--brand);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem} /* --- Hero ---------------------------------------------------------- */ .hero{ position:relative;overflow:hidden; padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(52px,6vw,80px); } /* Weicher Lavender-Schein hinter der Headline. Bleibt dezent, er soll die Schrift tragen und nicht selbst auffallen. */ .hero::before{ content:"";position:absolute;left:50%;top:-34%; width:min(1320px,148%);aspect-ratio:1/1;transform:translateX(-50%); background:radial-gradient(closest-side, rgba(122,86,216,.30),rgba(150,118,232,.16) 38%, rgba(184,156,255,.06) 60%,transparent 76%); pointer-events:none; } .hero > *{position:relative;z-index:1} /* Der Hero laeuft breiter als der Rest, damit die Headline auf wenige Zeilen kommt. */ .hero-shell{max-width:1080px} /* Im breiten Hero eine Spur kleiner gesetzt, damit der zweite Satz auf zwei Zeilen laeuft statt auf drei. */ .hero .h1{max-width:none;font-size:clamp(2.1rem,4.4vw,3.3rem)} /* Ab Laptopbreite genau zwei Zeilen: jeder Satz eine Zeile. Der lange zweite Satz ist in dieser Schrift 30em breit. Deshalb darf die Ueberschrift breiter laufen als der Hero (zentriert ueber negative Raender, alles andere bleibt unberuehrt), und die Schriftgroesse folgt der verfuegbaren Breite geteilt durch 31em (etwas Luft). */ @media (min-width:1024px){ .hero .h1{ --h1-breite:min(100vw - 80px,1440px); width:var(--h1-breite); margin-inline:calc((100% - var(--h1-breite)) / 2); font-size:min(3.3rem,calc(var(--h1-breite) / 31)); } } .hero .lead{max-width:880px;margin-bottom:clamp(28px,3.2vw,36px)} /* Buehne fuer den Videorahmen: traegt den umlaufenden Rand und den Schein nach aussen. Der Rahmen selbst bleibt sauber beschnitten. */ .video-buehne{ /* Deutlich schmaler als die Headline, wie in der Referenz. Das Video soll den Hero nicht dominieren. */ max-width:720px;margin-inline:auto; position:relative;border-radius:calc(var(--radius-lg) + 3px);padding:3px; background: conic-gradient(from var(--randwinkel,0deg), rgba(150,118,232,.22) 0deg, rgba(150,118,232,.22) 52deg, rgba(168,136,246,.75) 92deg, #8a6ce0 128deg, rgba(168,136,246,.75) 164deg, rgba(150,118,232,.22) 206deg, rgba(150,118,232,.22) 246deg, rgba(140,108,226,.5) 286deg, rgba(150,118,232,.22) 320deg, rgba(150,118,232,.22) 360deg); box-shadow:0 30px 70px -34px rgba(27,20,36,.44),0 0 66px -22px rgba(122,86,216,.62); animation:rand-laeuft 7s linear infinite; } @property --randwinkel{syntax:'';initial-value:0deg;inherits:false} @keyframes rand-laeuft{to{--randwinkel:360deg}} @media (prefers-reduced-motion:reduce){ .video-buehne{animation:none} } .video-frame{ position:relative;width:100%;aspect-ratio:16/9; border-radius:var(--radius-lg);overflow:hidden; background: radial-gradient(120% 90% at 50% 0%,rgba(184,156,255,.28),transparent 60%), linear-gradient(160deg,#241a33,var(--ink-deep) 62%); } .video-frame > iframe,.video-frame > video{position:absolute;inset:0;width:100%;height:100%;border:0} .video-ph{ position:absolute;inset:0;width:100%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; background:none;border:0;cursor:pointer;padding:24px;text-align:center; } .video-ph .play{ width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:var(--on-dark); transition:transform var(--dur) var(--ease),background var(--dur) var(--ease); } .video-ph .play svg{width:20px;height:20px;margin-left:3px} .video-ph:hover .play{transform:scale(1.05);background:rgba(255,255,255,.16)} .video-ph .ph-label{color:var(--brand-light)} .video-ph .video-hint{font-size:.88rem;color:var(--on-dark-soft);max-width:34ch} .video-status{margin-top:12px;font-size:.82rem;color:var(--brand);min-height:1.2em} .video-frame > video{object-fit:cover;background:var(--ink-deep)} .video-ph--start{background:radial-gradient(60% 60% at 50% 50%,rgba(23,16,31,.34),rgba(23,16,31,.08))} .video-ph--start .play{width:76px;height:76px;background:rgba(23,16,31,.42);backdrop-filter:blur(6px)} .video-ph--start .play svg{width:24px;height:24px} .video-ph--start[hidden]{display:none} .ico-check{ flex:none;width:17px;height:17px;background-color:var(--brand); -webkit-mask-image:var(--icon-check);mask-image:var(--icon-check); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } .dark .ico-check{background-color:var(--brand-light)} /* --- Hero-Marke --------------------------------------------------- Produktname ueber der Headline, auf Wunsch des Briefings vom 08.10.2026. Ruhig gesetzt, ohne Pille und ohne Rahmen. */ .hero-marke{ margin:0 0 18px;font-size:.78rem;font-weight:800;letter-spacing:.22em; color:var(--brand); } .hero .cta-group .micro{margin-top:12px} /* --- Momente -------------------------------------------------------- Wiedererkennung als ruhige Liste: ein Satz je Zeile, feine Linien, ein kleiner Lavendel-Punkt. Darunter der Schlusssatz als Uebergang. */ .momente{border-top:1px solid var(--line-strong)} .momente li{ position:relative;padding:18px 0 18px 30px; border-bottom:1px solid var(--line-strong); font-size:clamp(1.04rem,1.45vw,1.2rem);line-height:1.5;color:var(--ink); } .momente li::before{ content:"";position:absolute;left:4px;top:calc(18px + .55em); width:9px;height:9px;border-radius:50%; background:linear-gradient(135deg,var(--brand-light),var(--brand)); } .momente-schluss{ margin:clamp(40px,5vw,60px) auto 0;max-width:24em;text-align:center; font-family:var(--display);font-weight:800;font-variation-settings:'opsz' 32; font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.16;letter-spacing:-.028em; text-wrap:balance;color:var(--ink); } .momente-schluss .em{display:block} /* --- Problem und Loesung ------------------------------------------ Ruhige Liste mit Haarlinien statt Tabelle. Das Problem ist leise, die Loesung traegt das Gewicht, das Werkzeug ist ein kleines Label. Mobil: Problem, Pfeil nach unten, Loesung, Werkzeug. Ab 820 px: Problem links, Pfeil, Loesung rechts. */ .loesungen{max-width:960px;margin-inline:auto;border-top:1px solid var(--line-strong)} .loesung{ display:grid;gap:10px;justify-items:start; padding:24px 0;border-bottom:1px solid var(--line-strong); } .loesung-problem{font-size:1rem;line-height:1.5;color:var(--muted)} .loesung-pfeil{ width:16px;height:16px;background:var(--brand-light); -webkit-mask:var(--icon-pfeil-runter) center/contain no-repeat; mask:var(--icon-pfeil-runter) center/contain no-repeat; } .loesung-titel{ margin:0 0 10px;font-family:var(--display);font-weight:800;font-variation-settings:'opsz' 32; font-size:clamp(1.24rem,2vw,1.55rem);line-height:1.2;letter-spacing:-.024em; text-wrap:balance;color:var(--ink); } .loesung-weg{font-size:.8rem;line-height:1.5;color:var(--muted)} .loesung-weg span{ /* inline mit geklonter Kante: bricht ein langes Label sauber um */ display:inline;margin-left:4px;padding:3px 10px;border-radius:var(--radius-pill); line-height:2;-webkit-box-decoration-break:clone;box-decoration-break:clone; background:var(--brand-tint);color:var(--brand-ink);font-weight:600; } @media (min-width:820px){ .loesung{ grid-template-columns:minmax(0,.82fr) 22px minmax(0,1.18fr); column-gap:clamp(22px,3vw,36px);align-items:center;padding:30px 0; } .loesung-pfeil{ width:20px;height:20px; -webkit-mask-image:var(--icon-pfeil-rechts);mask-image:var(--icon-pfeil-rechts); } } /* --- Aufbau: Jetzt, Verstehen, Verankern --------------------------- Oben eine gefasste Leiste als Ueberblick und Sprungmarke, darunter je Ebene Bild und Inhalt. Das grosse Wort ist die Ueberschrift. */ .ebenen-leiste{ display:grid;max-width:1000px;margin-inline:auto; background:var(--paper-card);border:1px solid var(--line-accent,#ddd0f8); border-radius:22px; } .ebenen-leiste li{position:relative} .ebenen-leiste li + li{border-top:1px solid var(--line)} .ebenen-leiste a{ display:block;height:100%;padding:20px 24px;color:var(--ink); border-radius:21px;transition:background var(--dur) var(--ease); } .ebenen-leiste a:hover{background:var(--brand-tint);color:var(--ink)} .ebene-wort{ display:block;font-family:var(--display);font-weight:800;font-variation-settings:'opsz' 32; letter-spacing:-.03em;line-height:1.05;color:var(--brand); } .ebenen-leiste .ebene-wort{font-size:1.4rem} .ebene-zweck{display:block;margin-top:6px;font-size:.93rem;line-height:1.5;color:var(--muted)} /* Pfeil zur naechsten Ebene: auf der Trennlinie sitzend */ .ebenen-leiste li:not(:last-child)::after{ content:"";position:absolute;z-index:1;left:50%;bottom:-13px;transform:translateX(-50%) rotate(90deg); width:26px;height:26px;border-radius:50%; background:var(--paper-card);border:1px solid var(--line); } /* Der Pfeil liegt als Maske darueber, damit er die Markenfarbe traegt */ .ebenen-leiste li:not(:last-child)::before{ content:"";position:absolute;z-index:2;left:50%;bottom:-6px;transform:translateX(-50%) rotate(90deg); width:12px;height:12px;background:var(--brand); -webkit-mask:var(--icon-pfeil-rechts) center/contain no-repeat; mask:var(--icon-pfeil-rechts) center/contain no-repeat; } @media (min-width:820px){ .ebenen-leiste{grid-template-columns:repeat(3,minmax(0,1fr))} .ebenen-leiste li + li{border-top:0;border-left:1px solid var(--line)} .ebenen-leiste a{padding:24px 28px} .ebenen-leiste li:not(:last-child)::after{left:auto;right:-13px;bottom:auto;top:50%;transform:translateY(-50%)} .ebenen-leiste li:not(:last-child)::before{left:auto;right:-6px;bottom:auto;top:50%;transform:translateY(-50%)} } .ebenen{display:grid;gap:clamp(56px,7vw,104px);margin-top:clamp(56px,7vw,96px)} .ebene{scroll-margin-top:96px} .ebene-titel{margin:0} .ebene .ebene-wort{font-size:clamp(2.2rem,4.4vw,3.2rem)} .ebene-sub{ display:block;margin-top:10px;font-size:clamp(1.12rem,1.6vw,1.3rem); font-weight:700;letter-spacing:-.015em;line-height:1.3;color:var(--ink); } .ebene-inhalt + .ebene-sub{margin-top:28px} .ebene-inhalt{margin-top:16px;border-top:1px solid var(--line-strong);max-width:34rem} .ebene-inhalt li{ display:grid;gap:2px;padding:13px 0;border-bottom:1px solid var(--line); } .ebene-inhalt b{font-size:.98rem;font-weight:700;color:var(--ink)} .ebene-inhalt span{font-size:.9rem;line-height:1.5;color:var(--muted)} /* Kauf-CTA am Ende des Systems: ruhig, mit Luft davor */ .aufbau-cta{margin-top:clamp(64px,8vw,104px)} .ebene-foto{ border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(27,20,36,.05),0 26px 54px -30px rgba(27,20,36,.42); } /* --- Prozess: 4 Schritte als Kette --------------------------------- Dunkle Verlaufsboxen wie beim Video, jede mit laufendem Lila-Rand. Ein Schein wandert nacheinander von Schritt 1 bis 4 und zeigt damit die Reihenfolge. Pfeile verbinden die Boxen: nebeneinander auf breiten Schirmen, untereinander auf schmalen. */ .process{ display:grid;gap:40px; max-width:540px;margin:clamp(30px,3.4vw,42px) auto 0; } @media (min-width:1060px){ .process{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px;max-width:none} } .step{ position:relative;isolation:isolate;text-align:center; padding:clamp(22px,2.2vw,28px) clamp(18px,1.8vw,22px) clamp(24px,2.4vw,30px); border-radius:var(--radius); background: radial-gradient(120% 90% at 50% 0%,rgba(184,156,255,.2),transparent 62%), linear-gradient(160deg,#271c37,#140d1b 72%); box-shadow:0 18px 40px -26px rgba(0,0,0,.6); animation:schritt-schein 8s ease-in-out infinite; } .step:nth-child(2){animation-delay:2s} .step:nth-child(3){animation-delay:4s} .step:nth-child(4){animation-delay:6s} @keyframes schritt-schein{ 0%,28%,100%{box-shadow:0 18px 40px -26px rgba(0,0,0,.6)} 10%,18%{box-shadow:0 18px 40px -26px rgba(0,0,0,.6),0 0 46px -8px rgba(138,108,224,.72)} } /* Umlaufender Rand, per Maske auf einen Ring beschnitten. Die Startwinkel sind versetzt, damit die vier Lichtbogen nicht im Gleichschritt laufen. */ .step::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:conic-gradient(from var(--randwinkel,0deg), rgba(150,118,232,.28) 0deg, rgba(150,118,232,.28) 52deg, rgba(168,136,246,.85) 92deg, #9a7ff0 128deg, rgba(168,136,246,.85) 164deg, rgba(150,118,232,.28) 206deg, rgba(150,118,232,.28) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; animation:rand-laeuft 7s linear infinite; } .step:nth-child(2)::before{animation-delay:-1.75s} .step:nth-child(3)::before{animation-delay:-3.5s} .step:nth-child(4)::before{animation-delay:-5.25s} /* Pfeil zum naechsten Schritt: auf schmalen Schirmen nach unten */ .step:not(:last-child)::after{ content:"";position:absolute;width:24px;height:24px; left:50%;top:100%;margin-top:8px;transform:translateX(-50%); background:var(--brand-light);opacity:.85; -webkit-mask-image:var(--icon-pfeil-runter);mask-image:var(--icon-pfeil-runter); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain; } @media (min-width:1060px){ .step:not(:last-child)::after{ left:100%;top:50%;margin:0 0 0 10px;transform:translateY(-50%); -webkit-mask-image:var(--icon-pfeil-rechts);mask-image:var(--icon-pfeil-rechts); } } .step-label{ display:inline-block;margin-bottom:12px; font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--brand-light); } .step h3{ font-family:var(--display);font-size:clamp(1.25rem,1.6vw,1.45rem);font-weight:800; font-variation-settings:'opsz' 32;letter-spacing:-.025em;line-height:1.15; margin:0 0 10px;color:var(--on-dark); } .step p{font-size:.92rem;line-height:1.6;margin:0} .process-text strong{color:var(--on-dark);font-weight:600} .process-text{ max-width:52ch;margin:clamp(30px,3.2vw,40px) auto 0;text-align:center; font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.68; } /* Aufploppen beim Drueberfahren: leichter Zoom mit kleinem Nachfedern, dazu leuchtet der Rand kraeftiger. Nur mit Maus, nicht auf Touch. */ .step{transition:scale .32s cubic-bezier(.34,1.56,.64,1),background .32s var(--ease)} .step::before{transition:filter .32s var(--ease)} @media (hover:hover){ .step:hover{ scale:1.05;z-index:2; background: radial-gradient(120% 90% at 50% 0%,rgba(184,156,255,.32),transparent 64%), linear-gradient(160deg,#2d2040,#160e1e 72%); } .step:hover::before{filter:drop-shadow(0 0 6px rgba(184,156,255,.9))} } /* Die Einblend-Animation setzt ihre eigene transition. Damit der Zoom nicht verschluckt oder verzoegert wird, stehen hier alle drei Eigenschaften zusammen, der Zoom immer ohne Verzoegerung. */ @media (prefers-reduced-motion:no-preference){ .js .process .step{ transition:opacity .6s var(--ease),transform .6s var(--ease), scale .32s cubic-bezier(.34,1.56,.64,1),background .32s var(--ease); } .js .process .step.reveal-delay-1{transition-delay:.07s,.07s,0s,0s} .js .process .step.reveal-delay-2{transition-delay:.14s,.14s,0s,0s} .js .process .step.reveal-delay-3{transition-delay:.21s,.21s,0s,0s} } @media (prefers-reduced-motion:reduce){ .step,.step::before{animation:none} .step:hover{scale:none} } /* --- Module -------------------------------------------------------- Seit 08.10.2026 kompakt als Liste in zwei Spalten statt sechs Karten: die Module erklaeren den Mechanismus, sie sind nicht mehr das Hauptargument der Seite. */ .module-no{ display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--brand);margin-bottom:10px; } .modul-liste{display:grid;max-width:1000px;margin-inline:auto;column-gap:clamp(32px,4.4vw,64px)} @media (min-width:820px){ .modul-liste{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column} } .modul{ display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px; padding:18px 0;border-bottom:1px solid var(--line); } .modul .module-no{margin:.32em 0 0;font-size:.74rem;letter-spacing:.08em} .modul-titel{ margin:0 0 4px;font-size:1.04rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;color:var(--ink); } .modul p{font-size:.92rem;line-height:1.55;color:var(--muted)} /* --- Checkliste ---------------------------------------------------- */ .check-list{display:grid} .check-list li{ display:flex;gap:13px;align-items:flex-start; padding:14px 0;border-bottom:1px solid var(--line-strong); font-size:1rem;line-height:1.55; } .check-list li:first-child{border-top:1px solid var(--line-strong)} .check-list .ico-check{margin-top:.28em} /* --- Fuer wen ------------------------------------------------------ */ /* Dunkel, Headline mittig, darunter die Liste in zwei Spalten mit feinen Trennlinien, zum Schluss der Hinweis mittig. Die Liste laeuft spaltenweise: drei Punkte links, der Rest rechts. */ .fuer-wen .h2{text-align:center;margin:0 auto clamp(28px,3.8vw,46px)} .fuer-wen .check-list{max-width:980px;margin-inline:auto} .fuer-wen .check-list li{ border-top:0;border-bottom:1px solid rgba(255,255,255,.1); padding:16px 0;color:var(--on-dark);font-size:1.02rem; } .fuer-wen .check-list li:last-child{border-bottom:0} @media (min-width:860px){ .fuer-wen .check-list{ grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto); grid-auto-flow:column;column-gap:clamp(36px,4.4vw,64px); } .fuer-wen .check-list li:nth-child(4){border-bottom:0} } /* Abgrenzung unter der Liste: ruhig, aber nicht kleingedruckt */ .grenze{ max-width:980px;margin:clamp(30px,3.8vw,46px) auto 0; padding:18px 22px;border-radius:var(--radius); border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); } .grenze p{font-size:.94rem;line-height:1.6} .grenze p + p{margin-top:6px} /* --- Ueber Tobi ---------------------------------------------------- */ /* Bewusst leise: quadratisches Foto links, Fliesstext rechts, keine Display-Headline. Der erste Satz bleibt fuer die Gliederung eine h2. */ .about{display:grid;gap:clamp(24px,4.4vw,64px);align-items:center} @media (min-width:760px){.about{grid-template-columns:clamp(240px,27vw,320px) minmax(0,1fr)}} .portrait{ aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--paper-soft); box-shadow:0 1px 2px rgba(27,20,36,.06),0 22px 44px -26px rgba(27,20,36,.42); } .portrait img{width:100%;height:100%;object-fit:cover} .about-text{max-width:40em} .about-intro,.about-text p{ font-size:clamp(1.04rem,1.3vw,1.16rem);line-height:1.75; font-weight:400;letter-spacing:0;color:var(--ink); } .about-text > * + *{margin-top:16px} .about-text strong{font-weight:700} .about-text .signature{margin-top:22px;font-size:1rem;color:var(--muted)} /* --- Angebot ------------------------------------------------------- */ .offer{display:grid;gap:clamp(30px,3.6vw,56px);align-items:center} @media (min-width:960px){ .offer{grid-template-columns:1fr 1fr;align-items:start} /* Das Bundle bleibt neben der hohen Angebotsbox im Blick */ .offer-bild{position:sticky;top:110px} } .offer-bild img{width:100%;max-width:560px;margin-inline:auto} .offer-box{ background:var(--paper);color:var(--ink); border-radius:var(--radius-lg);padding:clamp(24px,2.4vw,32px); box-shadow:0 24px 70px rgba(0,0,0,.42); } .offer-marke{ font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--brand);margin-bottom:10px; } .offer-name{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.18;margin-bottom:20px} .price-block{margin-bottom:4px} .price{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; font-family:var(--display);font-weight:800;font-variation-settings:'opsz' 32; letter-spacing:-.035em;font-size:clamp(2.6rem,4.4vw,3.4rem);line-height:1; font-variant-numeric:tabular-nums;margin:0 0 8px;color:var(--ink); } /* Umfang als vier Bloecke: Name des Blocks fett, Inhalt leise darunter */ .offer-bloecke{margin:22px 0 0;border-top:1px solid var(--line)} .offer-bloecke li{ position:relative;display:grid;gap:2px;padding:12px 0 12px 29px;border-bottom:1px solid var(--line); } .offer-bloecke li::before{ content:"";position:absolute;left:0;top:15px;width:17px;height:17px;background:var(--brand); -webkit-mask:var(--icon-check) center/contain no-repeat;mask:var(--icon-check) center/contain no-repeat; } .offer-bloecke b{font-size:.98rem;font-weight:700;color:var(--ink)} .dark .offer-box .offer-bloecke span{font-size:.88rem;line-height:1.5;color:var(--muted)} .dark .offer-box .offer-zugang{margin:14px 0 20px;font-size:.92rem;font-weight:600;color:var(--ink)} .offer-secure{ display:flex;align-items:center;justify-content:center;gap:8px; margin:14px 0 0;font-size:.8rem;color:var(--muted); } .offer-secure svg{width:14px;height:14px;flex:none} /* --- FAQ ----------------------------------------------------------- */ .faq{margin-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-strong)} .faq details{border-bottom:1px solid var(--line-strong)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:20px; padding:19px 0;cursor:pointer;list-style:none; font-size:1.04rem;font-weight:600;letter-spacing:-.014em;line-height:1.4; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";flex:none;width:20px;height:20px;margin-top:.15em;background:var(--brand); -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; transition:transform var(--dur) var(--ease); } .faq details[open] summary::after{transform:rotate(45deg)} .faq .answer{padding:0 0 22px;max-width:62ch} .faq .answer p{color:var(--muted);line-height:1.7} /* --- Abschluss ----------------------------------------------------- */ /* Dunkles Schlussbild: grosse zweizeilige Headline, dahinter ein weicher Lavendel-Schein, der langsam atmet, darunter der leuchtende CTA. */ .final{padding-block:clamp(88px,11vw,150px);overflow:hidden} .final::before{ content:"";position:absolute;left:50%;top:46%; width:min(1100px,150vw);aspect-ratio:2.2/1; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(122,86,216,.34),rgba(122,86,216,.14) 52%,transparent 100%); pointer-events:none; } @media (prefers-reduced-motion:no-preference){ .final::before{animation:final-atmen 9s ease-in-out infinite} } @keyframes final-atmen{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}} .final .h2{ font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.035em; max-width:none;margin:0 auto 22px; } .final .lead{font-size:clamp(1.05rem,1.35vw,1.2rem);max-width:44ch} .final .cta-group{margin-top:clamp(28px,3.2vw,38px)} .final .btn{min-height:60px;padding-inline:40px;font-size:1.04rem} .final .micro{margin-top:16px} /* --- Footer -------------------------------------------------------- */ /* Dunkel wie der Abschluss, zentriert und leise: Hinweise, Rechtslinks, Marke. Eine Haarlinie trennt ihn vom Abschluss. */ .site-footer{ background:var(--ink);color:var(--on-dark-soft); border-top:1px solid rgba(255,255,255,.08); padding-block:clamp(40px,5vw,60px); font-size:.82rem;line-height:1.7;text-align:center; } .footer-inner{display:grid;justify-items:center;gap:clamp(20px,2.4vw,26px)} .footer-hinweise{display:grid;gap:8px;max-width:76ch} .site-footer a,.site-footer button{ color:var(--on-dark-soft); text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.28); transition:color var(--dur) var(--ease),text-decoration-color var(--dur) var(--ease); } .site-footer a:hover,.site-footer button:hover{color:var(--on-dark);text-decoration-color:var(--brand-light)} .footer-nav{display:flex;flex-wrap:wrap;justify-content:center;column-gap:26px;margin-block:-12px} .footer-nav a,.footer-nav button{ position:relative;display:inline-flex;align-items:center;min-height:44px; background:none;border:0;padding:0;font:inherit;cursor:pointer; } /* Mittelpunkt als Trenner. Absolut gesetzt, damit er nicht mit unterstrichen wird. */ .footer-nav > * + *::before{ content:"·";position:absolute;left:-15px;top:50%;transform:translateY(-50%); color:rgba(255,255,255,.32); } /* Ohne das bliebe der Consent-Schalter trotz hidden sichtbar. */ .footer-nav [hidden]{display:none} .footer-marke{display:grid;gap:2px;margin-top:6px} .site-footer .wordmark{font-size:.98rem;color:var(--on-dark)} .site-footer .wordmark i{color:var(--brand-light)} .site-footer .ph-note{ margin-top:4px;max-width:60ch;text-align:left; background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18); border-left-color:var(--brand-light);color:var(--on-dark-soft); } .site-footer .ph-note b{color:var(--brand-light)} /* --------------------------------------------------------------------- 06 MOTION ------------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ .js .reveal{opacity:0;transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease)} .js .reveal.is-in{opacity:1;transform:none} .js .reveal-delay-1{transition-delay:.07s} .js .reveal-delay-2{transition-delay:.14s} .js .reveal-delay-3{transition-delay:.21s} } /* --------------------------------------------------------------------- 07 RESPONSIVE ------------------------------------------------------------------- */ @media (max-width:560px){ body{font-size:16px} .h1{font-size:clamp(2rem,9vw,2.5rem)} .h2{font-size:clamp(1.6rem,7vw,1.95rem);margin-bottom:14px} .final .h2{font-size:clamp(2.05rem,9.6vw,2.6rem)} /* Mobil: engere Abstaende, Cookie-Einstellungen bekommt eine eigene Zeile, damit kein Trennpunkt am Zeilenanfang haengt */ .footer-nav{column-gap:20px} .footer-nav > * + *::before{left:-12px} .footer-nav button{flex-basis:100%;justify-content:center} .footer-nav button::before{display:none} .btn{width:100%} .topbar-cta .btn{width:auto;white-space:nowrap;padding-inline:16px} .topbar-price{display:none} .price{font-size:2.5rem} } @media (max-width:759px){ .portrait{max-width:260px} } @media (max-width:380px){ :root{--gutter:16px} /* Topbar-Button bleibt einzeilig, auch bei 320 px */ .topbar-cta .btn{padding-inline:14px} } @media (max-width:374px){ .topbar-zusatz{display:none} } @media (min-width:1500px){ :root{--section-y:120px} } @media print{ .topbar,.video-frame,.btn{display:none !important} body{background:#fff;color:#000} .dark,.site-footer{background:#fff !important;color:#000 !important} .dark *,.site-footer *{color:#000 !important} } /* --------------------------------------------------------------------- 08 RECHTSSEITEN & 404 ------------------------------------------------------------------- */ .legal{padding-block:clamp(44px,6vw,80px)} .legal-back{ display:inline-flex;align-items:center;gap:8px; margin-bottom:clamp(24px,3vw,34px);font-size:.9rem;color:var(--muted); } .legal-back:hover{color:var(--brand)} .legal h1{ font-family:var(--display);font-weight:800;letter-spacing:-.03em; font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.1;margin:0 0 20px; } .legal h2{ font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:-.01em; color:var(--brand);margin:34px 0 10px; } .legal h2:first-of-type{margin-top:28px} .legal p,.legal li{color:var(--muted);line-height:1.72;max-width:68ch} .legal p + p{margin-top:12px} .legal ul{margin:12px 0 0} .legal ul li{position:relative;padding-left:20px;margin-bottom:8px} .legal ul li::before{ content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px; border-radius:50%;background:var(--brand); } /* Nummerierte Aufzaehlung: die Voraussetzungen in der Widerrufsbelehrung sind durchgezaehlt, nicht nur aufgelistet. */ .legal ol{margin:12px 0 0;padding-left:24px;list-style:decimal} .legal ol li{margin-bottom:8px} /* Trennt die amtliche Belehrung von den zusaetzlichen Hinweisen */ .legal-hinweis{ margin-top:22px;padding-top:14px;border-top:1px solid var(--line); font-size:.9rem;font-style:italic;color:var(--muted);max-width:68ch; } .legal .ph-note{max-width:68ch} .legal-foot{ margin-top:clamp(40px,5vw,60px);padding-top:20px; border-top:1px solid var(--line-strong);font-size:.84rem;color:var(--muted); } .legal-foot a{color:var(--muted)} .legal-foot a:hover{color:var(--brand)} .legal-consent{margin-top:10px} .legal-consent button{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .legal-consent button:hover{color:var(--brand)} .notfound{min-height:74vh;display:grid;place-items:center;text-align:center;padding-block:clamp(56px,8vw,100px)} .notfound .h1{max-width:20ch;margin-inline:auto} .notfound .lead{margin-inline:auto} /* --------------------------------------------------------------------- 09 WILLKOMMENSSEITE nach dem Kauf (/muster-reset/willkommen/) ------------------------------------------------------------------- */ .willkommen{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px) clamp(40px,5vw,72px)} .willkommen::before{ content:"";position:absolute;left:50%;top:0;z-index:0; width:min(1100px,170vw);aspect-ratio:2/1;transform:translate(-50%,-38%); background:radial-gradient(closest-side,rgba(184,156,255,.30),rgba(184,156,255,.10) 55%,transparent); pointer-events:none; } .willkommen > *{position:relative;z-index:1} .willkommen-shell{max-width:720px;text-align:center} .willkommen-siegel{ width:64px;height:64px;border-radius:50%;margin:0 auto 22px; display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),#7a56d8); box-shadow:0 14px 34px -12px rgba(122,86,216,.75),0 0 0 8px rgba(184,156,255,.16); } .willkommen-siegel .ico-check{width:28px;height:28px;background-color:#fff} .willkommen-marke{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:14px} .willkommen .h1{margin-inline:auto} .willkommen .lead{margin-inline:auto;max-width:46ch} .willkommen-schritte{display:grid;gap:12px;max-width:560px;margin:clamp(34px,4.4vw,48px) auto 0;text-align:left} .willkommen-schritte li{ display:flex;align-items:center;gap:16px;padding:16px 18px; background:var(--paper);border:1px solid var(--line-strong);border-radius:16px; box-shadow:0 1px 2px rgba(27,20,36,.04),0 16px 32px -26px rgba(27,20,36,.32); } .willkommen-nr{ flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-size:.86rem;font-weight:700;color:var(--brand-ink); background:var(--brand-tint);border:1px solid #d7c9f7; } .willkommen-nr .ico-check{width:16px;height:16px;background-color:#fff} .willkommen-schritte .is-erledigt .willkommen-nr{background:linear-gradient(135deg,var(--brand),#7a56d8);border-color:transparent} .willkommen-schritte p{font-size:1rem;line-height:1.5;color:var(--ink)} .willkommen-schritte .is-erledigt p{font-weight:600} .willkommen .legal-foot{text-align:center;margin-top:clamp(40px,5vw,56px)} /* Checkout-Knopf, waehrend die Session angefragt wird */ .checkout-form{margin:0} /* --- Kaufbereich: Angaben und die beiden Zustimmungen -------------- */ .kauf-block{ margin:20px 0 0;padding:18px 18px 16px; border:1px solid var(--line-strong);border-radius:var(--radius); background:var(--paper-card); } .kauf-titel{ font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);margin:0 0 12px; } .kauf-daten{display:grid;grid-template-columns:1fr;gap:2px 14px;margin:0 0 16px;font-size:.88rem} .kauf-daten dt{font-weight:600;color:var(--ink)} .kauf-daten dd{margin:0 0 8px;color:var(--muted)} @media (min-width:520px){ .kauf-daten{grid-template-columns:auto 1fr} .kauf-daten dd{margin-bottom:4px} } .zustimmungen{display:grid;gap:12px;margin:0 0 16px} .zustimmung{ display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start; font-size:.86rem;line-height:1.45;color:var(--ink);cursor:pointer; } .zustimmung input{ width:20px;height:20px;margin:1px 0 0;flex:none;cursor:pointer; accent-color:var(--brand); } .zustimmung span{display:block} .kauf-rechtliches{margin:14px 0 0;font-size:.78rem;color:var(--muted);text-align:center} .kauf-rechtliches a{color:var(--brand)} /* Gesperrt, solange eine Zustimmung fehlt. Das Laden bleibt bei cursor:progress, siehe .btn.is-loading. */ .btn[aria-disabled="true"]:not(.is-loading){opacity:.55;cursor:not-allowed} .btn.is-loading{cursor:progress} .btn.is-loading::before{ content:"";width:16px;height:16px;flex:none;border-radius:50%; border:2px solid rgba(255,255,255,.35);border-top-color:#fff; animation:knopf-dreht .8s linear infinite; } @keyframes knopf-dreht{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.btn.is-loading::before{animation-duration:2.4s}} .btn:disabled{opacity:.9;cursor:progress} /* --------------------------------------------------------------------- 10 ZUGANG und ANMELDUNG (/muster-reset/zugang/, /muster-reset/auth/callback/) Baut auf der Willkommensseite auf. ------------------------------------------------------------------- */ .zugang-titel{font-size:clamp(2rem,4.6vw,3.2rem)} .zugang-form{ max-width:440px;margin:clamp(28px,3.6vw,40px) auto 0;text-align:left; display:grid;gap:12px;padding:clamp(20px,2.6vw,28px); background:var(--paper);border:1px solid var(--line-strong);border-radius:20px; box-shadow:0 1px 2px rgba(27,20,36,.04),0 22px 44px -30px rgba(27,20,36,.35); } .zugang-label{font-size:.86rem;font-weight:600;color:var(--ink)} .zugang-feld{ width:100%;min-height:52px;padding:12px 16px; border:1px solid var(--line-strong);border-radius:12px;background:#fff; font:inherit;font-size:1rem;color:var(--ink); } .zugang-feld:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(107,75,209,.14)} .zugang-meldung{min-height:1.55em;font-size:.9rem;line-height:1.55;color:var(--muted)} .zugang-meldung.is-ok{color:var(--brand-ink)} .zugang-meldung.is-fehler{color:#b3261e} .zugang-info{max-width:440px;margin:18px auto 0;padding:10px 14px;border-radius:12px;background:var(--brand-tint);color:var(--brand-ink);font-size:.9rem} .zugang-klein{margin-top:18px;font-size:.88rem;color:var(--muted)} /* --- Widerruf: Formular, Pruefansicht, Knoepfe --------------------- */ .widerruf-form{margin-left:0;margin-right:0} .widerruf-pruefung{ display:grid;grid-template-columns:1fr;gap:0 16px; margin:18px 0 22px;padding:18px;font-size:.94rem; border:1px solid var(--line-strong);border-radius:16px;background:var(--paper-card); } .widerruf-pruefung dt{font-weight:600;color:var(--muted);font-size:.82rem} .widerruf-pruefung dd{margin:0 0 12px;color:var(--ink);overflow-wrap:anywhere} .widerruf-pruefung dd:last-child{margin-bottom:0} @media (min-width:520px){ .widerruf-pruefung{grid-template-columns:auto 1fr} .widerruf-pruefung dt{padding-top:2px} .widerruf-pruefung dd{margin-bottom:8px} } .widerruf-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px} .widerruf-hinweis{margin-top:clamp(26px,3vw,34px);font-size:.88rem;line-height:1.7;color:var(--muted)} .zugang-aktion{margin-top:clamp(24px,3vw,32px)} .zugang-lader{ display:block;width:44px;height:44px;margin:0 auto 22px;border-radius:50%; border:3px solid rgba(107,75,209,.18);border-top-color:var(--brand); animation:knopf-dreht .9s linear infinite; } @media (prefers-reduced-motion:reduce){.zugang-lader{animation-duration:2.4s}} .willkommen-link{margin-top:18px;font-size:.92rem;color:var(--muted)} /* --------------------------------------------------------------------- EINWILLIGUNGS-BANNER Lag vorher als eingespritztes