/* ========================================================================= Penhold — Warteliste. Geteilt von index.html (DE) und en.html (EN). Farben und Schrift sind die Design-Tokens der App („Halle", src/ui/theme.ts). Wer hier eine Farbe ändert, ändert sie dort mit — sonst sehen die Screenshots aus wie aus einer fremden App. Schriften und die WebGL-Bibliothek liegen SELBST GEHOSTET unter assets/. Bewusst kein CDN: jeder Abruf von cdnjs/jsdelivr/fonts.gstatic überträgt die IP der Besucher in die USA und macht aus einer einwilligungsfreien Seite eine, die ein Consent-Banner bräuchte (vgl. LG München I, 3 O 17493/20 zu Google Fonts). ========================================================================= */ @font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Helle Flächen */ --sand:#e9e0cc; --karte:#fffaf0; --hairline:#d3c1a0; --rand:#c3b190; --flaeche:#dccfb2; /* Text. `text3` aus theme.ts (#9c8768) steht hier bewusst NICHT: es kommt auf Sand nur auf 2,63:1 und auf Karte auf 3,32:1. In der App trägt es Kapitälchen-Label und Platzhalter, auf dieser Seite hätte es Fließtext getragen (Diagramm-Kopf, Hinweise, die Seed-Fußnote). Alles davon liegt jetzt auf `text2` mit 5,05:1. */ --ink:#2a2118; --text2:#6b5a44; /* Signal */ --akzent:#c8452c; --stufe:#cf6a1f; --aktion:#1f4d3d; --aktionText:#f6efdf; /* Der einzige Wert, der NICHT aus src/ui/theme.ts stammt. Grund: `--akzent` kommt auf Sand nur auf 3,68:1. In der App ist das unkritisch, weil das Rot dort die Dauer in 17 px Plakatschrift trägt; hier trägt es 11-px-Kapitälchen (.eyebrow, .card .ix), und für die verlangt WCAG AA 4,5:1. Dasselbe Rot um 16 % abgedunkelt: 4,95:1 auf Sand, 6,24:1 auf Karte. Flächen und große Zahlen bleiben bei `--akzent`. */ --akzentText:#a83722; /* Dunkle Flächen (Tischrand-Grün der Diagramme) */ --tief:#16382c; --tiefer:#0d2019; --tiefText:#f6efdf; --tiefText2:#b9c9be; /* Diagramm */ --eigen:#f2c14e; --gegner:#ffffff; --nummer:#1f2d26; --plakat:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --maxw:1080px; } * { box-sizing:border-box; } /* Weiches Scrollen nur, wo Bewegung erwünscht ist — der Sprung vom Schluss-CTA zurück zum Formular ist die längste Bewegung der Seite. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } } body { margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a { color:inherit; } img { max-width:100%; } .wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%; } /* ===== Scroll-Reveal ===== Der unsichtbare Ausgangszustand hängt an `.js` am -Element, das ein winziges Inline-Script im setzt. ⚠️ Nicht vereinfachen zu `.reveal { opacity:0 }`. In der Vorgängerfassung standen CSS und JS inline im selben Dokument — lud das HTML, lief beides. Jetzt sind es zwei getrennte Requests: bleibt `seite.js` aus (Fehl-Deploy, Blocker, abgebrochener Request), stünde die ganze Seite auf opacity 0 und der Besucher sähe eine leere sandfarbene Fläche statt einer Seite ohne Animationen. Daran hängt das Anmeldeformular, die einzige Conversion. */ .js .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease var(--d,0s), transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0s); } .js .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1 !important; transform:none !important; transition:none !important; } } /* ========================================================================= HERO — dunkel, mit Vanta-NET Der CSS-Verlauf steht IMMER. Vanta legt sein Canvas darüber und blendet sich ein; ohne WebGL, bei reduzierter Bewegung oder im Datensparmodus sieht die Seite trotzdem fertig aus statt schwarz. ========================================================================= */ .hero { position:relative; overflow:hidden; isolation:isolate; background: radial-gradient(90% 70% at 15% 0%, rgba(47,107,85,.55) 0%, transparent 55%), radial-gradient(80% 60% at 85% 18%, rgba(200,69,44,.20) 0%, transparent 60%), linear-gradient(180deg, var(--tief) 0%, var(--tiefer) 100%); color:var(--tiefText); } #vanta { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1.2s ease; } /* Bewusst nicht volle Deckkraft: bei 1.0 gewinnt das Netz gegen die Überschrift. Es soll Tiefe geben, nicht gelesen werden. */ #vanta.an { opacity:.6; } /* Weiches Auslaufen nach unten, damit die Kante zum Sand nicht als Bruch liest */ .hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:190px; z-index:1; background:linear-gradient(180deg, transparent 0%, var(--sand) 100%); pointer-events:none; } .hero > .wrap { position:relative; z-index:2; } .topbar { display:flex; align-items:center; justify-content:space-between; padding:20px 0 0; } .brand { display:inline-flex; align-items:baseline; gap:9px; font-family:var(--plakat); font-weight:800; font-size:17px; letter-spacing:-.3px; } /* Markenpunkt: der Tischtennisball vor dem Namen — Ballgelb wie „du" im Diagramm */ .brand .dot { width:11px; height:11px; border-radius:50%; background:var(--eigen); box-shadow:0 0 0 3px rgba(242,193,78,.18); flex:none; align-self:center; } .brand .von { font-family:var(--body); font-weight:400; font-size:12.5px; color:var(--tiefText2); letter-spacing:0; } .lang { font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--tiefText2); text-decoration:none; padding:6px 12px; border:1px solid rgba(246,239,223,.22); border-radius:4px; transition:.18s; } .lang:hover { color:var(--tiefText); border-color:rgba(246,239,223,.5); background:rgba(246,239,223,.07); } .hero-mitte { text-align:center; padding:54px 0 0; position:relative; z-index:0; } /* Schleier hinter Überschrift und Formular. Das Netz darf Tiefe machen, aber nicht durch die Schrift laufen — ohne diesen Verlauf sinkt der Kontrast der Unterzeile stellenweise unter 4,5:1, je nachdem wo gerade eine Linie liegt. */ .hero-mitte::before { content:""; position:absolute; left:50%; top:-30px; transform:translateX(-50%); width:min(940px, 124%); height:620px; z-index:-1; pointer-events:none; background:radial-gradient(58% 52% at 50% 40%, rgba(11,26,20,.86) 0%, rgba(11,26,20,.58) 46%, rgba(11,26,20,0) 74%); } .badge { display:inline-block; font-size:12px; font-family:var(--plakat); font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--eigen); border:1px solid rgba(242,193,78,.35); background:rgba(242,193,78,.08); border-radius:999px; padding:7px 16px; margin-bottom:24px; } h1 { font-family:var(--plakat); font-weight:800; font-size:clamp(32px, 6vw, 62px); line-height:1.03; letter-spacing:-1.4px; margin:0 auto 20px; max-width:15ch; color:var(--tiefText); } .lede { font-size:clamp(16.5px, 2.2vw, 19.5px); color:var(--tiefText2); margin:0 auto 34px; max-width:50ch; } /* ===== Formular ===== */ .signup { max-width:500px; margin:0 auto; scroll-margin-top:24px; } /* uiverse-Idiom: Glow-Ring am Fokus statt hartem Outline */ .pill { display:flex; align-items:center; gap:8px; background:rgba(246,239,223,.07); border:1px solid rgba(246,239,223,.28); border-radius:6px; padding:6px 6px 6px 16px; transition:border-color .2s ease, box-shadow .25s ease, background .2s ease; } .pill:focus-within { border-color:var(--eigen); background:rgba(246,239,223,.12); box-shadow:0 0 0 4px rgba(242,193,78,.16), 0 0 24px -6px rgba(242,193,78,.5); } .pill input { flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:16px; color:var(--tiefText); padding:11px 0; } .pill input::placeholder { color:rgba(185,201,190,.8); } /* uiverse-Idiom: Shine-Sweep — ein Lichtstreif wandert beim Hover durch den Knopf */ .knopf { position:relative; overflow:hidden; flex:none; border:none; border-radius:4px; background:var(--akzent); color:#fff; font-family:var(--plakat); font-weight:800; font-size:15px; letter-spacing:.01em; padding:14px 24px; cursor:pointer; white-space:nowrap; transition:background .18s ease, transform .08s ease, box-shadow .25s ease; } .knopf::before { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-18deg); transition:left .65s cubic-bezier(.2,.7,.3,1); } .knopf:hover { background:#d84e33; box-shadow:0 10px 30px -12px rgba(200,69,44,.85); } .knopf:hover::before { left:130%; } .knopf:active { transform:translateY(1px); } .knopf:focus-visible { outline:3px solid var(--eigen); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { .knopf::before { display:none; } } /* uiverse-Idiom: eigene Checkbox, Haken zeichnet sich ein */ .consent { display:flex; gap:11px; align-items:flex-start; text-align:left; margin:16px auto 0; max-width:460px; font-size:13px; color:var(--tiefText2); cursor:pointer; } .consent input { position:absolute; opacity:0; width:0; height:0; } .box { flex:none; width:19px; height:19px; margin-top:1px; border-radius:3px; border:1.5px solid rgba(246,239,223,.4); background:rgba(246,239,223,.05); display:grid; place-items:center; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; } .box svg { width:12px; height:12px; } .box path { stroke:var(--tief); stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .28s cubic-bezier(.2,.7,.3,1); } .consent input:checked + .box { background:var(--eigen); border-color:var(--eigen); } .consent input:checked + .box path { stroke-dashoffset:0; } .consent input:focus-visible + .box { box-shadow:0 0 0 3px rgba(242,193,78,.45); } .consent a { color:var(--tiefText2); text-underline-offset:3px; } .consent a:hover { color:var(--tiefText); } .form-err { color:#ff9b86; font-size:13.5px; margin:12px 0 0; min-height:1px; } /* Beta-Hinweis: die Runde läuft schon, das ist das stärkste Argument */ .beta { display:flex; align-items:flex-start; justify-content:center; gap:10px; margin:22px auto 0; max-width:420px; font-size:13.5px; color:var(--tiefText2); text-align:left; } .beta .puls { width:8px; height:8px; border-radius:50%; background:#5fd39a; flex:none; position:relative; margin-top:6px; } .beta .puls::after { content:""; position:absolute; inset:0; border-radius:50%; background:#5fd39a; animation:puls 2.4s ease-out infinite; } @keyframes puls { 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(3.2); opacity:0; } } @media (prefers-reduced-motion: reduce) { .beta .puls::after { animation:none; } } .beta b { color:var(--tiefText); font-weight:600; } /* Erfolgs-Zustand: Kreis und Haken zeichnen sich ein */ .success { display:none; } .success.on { display:block; text-align:center; } .success svg { width:58px; height:58px; margin:0 auto 14px; display:block; } .success .kreis { fill:none; stroke:#5fd39a; stroke-width:3; stroke-dasharray:166; stroke-dashoffset:166; animation:zeichne .7s cubic-bezier(.2,.7,.3,1) forwards; } .success .haken { fill:none; stroke:#5fd39a; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:48; stroke-dashoffset:48; animation:zeichne .4s cubic-bezier(.2,.7,.3,1) .5s forwards; } @keyframes zeichne { to { stroke-dashoffset:0; } } @media (prefers-reduced-motion: reduce) { .success .kreis, .success .haken { animation:none; stroke-dashoffset:0; } } .success h3 { font-family:var(--plakat); font-weight:800; margin:0 0 8px; font-size:22px; color:var(--tiefText); } .success p { color:var(--tiefText2); margin:0 auto; font-size:15px; max-width:42ch; } .founder-note { margin:30px auto 0; max-width:48ch; font-size:13.5px; color:var(--tiefText2); } /* ===== Phone-Fächer ===== */ .phones { display:flex; justify-content:center; align-items:flex-start; margin:52px 0 0; padding-bottom:100px; } .ph { position:relative; background:#0b1a14; border-radius:34px; padding:8px; box-shadow:0 30px 60px -22px rgba(0,0,0,.75), 0 0 0 1px rgba(246,239,223,.12); transition:transform .38s cubic-bezier(.2,.7,.3,1), box-shadow .38s ease; } .ph::before { content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:32%; height:15px; background:#0b1a14; border-radius:0 0 11px 11px; z-index:2; } .ph img { display:block; width:100%; height:auto; border-radius:27px; } .ph-center { width:252px; z-index:3; } .ph-side { width:210px; z-index:1; } .ph-left { transform:rotate(-7deg); margin-right:-54px; margin-top:44px; } .ph-right { transform:rotate(7deg); margin-left:-54px; margin-top:44px; } .ph:hover { z-index:5; box-shadow:0 46px 80px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(242,193,78,.35); } .ph-center:hover { transform:translateY(-14px) scale(1.04); } .ph-left:hover, .ph-right:hover { transform:rotate(0deg) translateY(-14px) scale(1.06); } @media (prefers-reduced-motion: reduce) { .ph, .ph:hover, .ph-center:hover, .ph-left:hover, .ph-right:hover { transition:none; } } /* Scroll-Hinweis */ .scroll-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:grid; place-items:center; gap:6px; text-decoration:none; } .scroll-cue span { font-family:var(--plakat); font-weight:800; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text2); } .scroll-cue svg { width:16px; height:16px; stroke:var(--text2); animation:wippe 2.2s ease-in-out infinite; } @keyframes wippe { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } } @media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation:none; } } /* ========================================================================= KAPITEL (hell) ========================================================================= */ .chapter { padding:76px 0 82px; position:relative; } .chapter.alt { background:var(--karte); } .head { display:flex; align-items:flex-end; gap:24px; margin-bottom:36px; } .num { font-family:var(--plakat); font-weight:800; font-size:clamp(56px, 9.5vw, 120px); line-height:.74; letter-spacing:-4px; color:transparent; -webkit-text-stroke:2px var(--akzent); flex:none; user-select:none; transition:opacity .75s ease var(--d,0s); will-change:transform; } @supports not ((-webkit-text-stroke: 2px red)) { .num { color:rgba(200,69,44,.16); } } .num.reveal { transform:none; } .head .txt { padding-bottom:6px; } .eyebrow { display:block; font-family:var(--plakat); font-weight:800; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--akzentText); margin:0 0 10px; } .chapter h2 { font-family:var(--plakat); font-weight:800; font-size:clamp(26px, 4.2vw, 42px); line-height:1.06; letter-spacing:-1px; margin:0; position:relative; } .chapter h2::after { content:""; display:block; width:0; height:4px; border-radius:2px; background:var(--akzent); margin-top:16px; transition:width .85s cubic-bezier(.2,.7,.3,1) .25s; } .chapter h2.in::after { width:64px; } @media (prefers-reduced-motion: reduce) { .chapter h2::after { width:64px; transition:none; } } .prose { color:var(--text2); font-size:clamp(16px, 1.8vw, 18px); line-height:1.68; } .split { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; } .pullquote { font-family:var(--plakat); font-weight:800; font-size:clamp(26px, 4.4vw, 46px); line-height:1.1; letter-spacing:-1.3px; color:var(--ink); margin:0; max-width:15ch; } .pullquote .qm { color:var(--akzent); } /* ========================================================================= BEWEIS-BLOCK — Markup erzeugt von build/beweis.mjs ========================================================================= */ .beweis { background:var(--karte); border:1px solid var(--hairline); border-radius:6px; padding:30px 28px 26px; max-width:760px; margin:0 auto; box-shadow:0 26px 60px -34px rgba(42,33,24,.5); } .chapter.alt .beweis { background:var(--sand); } .beweis-kopf { border-bottom:1px solid var(--hairline); padding-bottom:18px; margin-bottom:6px; } .beweis-label { display:block; font-family:var(--plakat); font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text2); margin-bottom:6px; } .beweis-ziel { font-family:var(--plakat); font-weight:800; font-size:clamp(21px,3.2vw,27px); letter-spacing:-.5px; margin:0 0 4px; } .beweis-meta { margin:0; color:var(--text2); font-size:14.5px; } /* Nur auf der englischen Seite: die Übungstexte sind deutsch, und das steht VOR ihnen statt in der Fußnote darunter. */ .beweis-sprache { margin:14px 0 4px; padding:10px 12px; border-left:3px solid var(--stufe); background:rgba(207,106,31,.07); font-size:13px; line-height:1.55; color:var(--text2); } .sess-liste { list-style:none; margin:0; padding:0; } .sess-zeile { display:flex; align-items:center; gap:14px; padding:15px 12px; border-bottom:1px solid var(--hairline); } .sess-zeile:last-child { border-bottom:none; } .sess-gezeigt { background:rgba(31,77,61,.07); box-shadow:inset 3px 0 0 var(--aktion); } .sess-nr { flex:none; width:25px; height:25px; border-radius:50%; background:var(--flaeche); color:var(--text2); font-family:var(--plakat); font-weight:800; font-size:12.5px; display:grid; place-items:center; } .sess-gezeigt .sess-nr { background:var(--aktion); color:var(--aktionText); } .sess-name { flex:1; font-size:16px; font-weight:600; line-height:1.35; } .sess-dauer { flex:none; font-family:var(--plakat); font-weight:800; font-size:18px; color:var(--akzent); } .sess-dauer em { font-style:normal; font-size:11px; margin-left:2px; } .beweis-diagramm { margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline); } .beweis-diagramm-kopf { font-size:13px; color:var(--text2); margin:0 0 18px; text-align:center; } .beweis-diagramm-kopf span { color:var(--text2); font-weight:600; } .tische { display:flex; gap:10px; justify-content:center; align-items:flex-start; margin:0 auto; max-width:520px; } .tisch-spalte { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; } .tisch-titel { font-size:11px; line-height:1.25; color:var(--text2); text-align:center; min-height:28px; } .tisch { width:100%; height:auto; display:block; } /* Bei reduzierter Bewegung fällt der laufende Ball weg, statt zu springen */ @media (prefers-reduced-motion: reduce) { .lauf-ball { display:none; } } .tisch-legende { display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--text2); margin:14px 0 0; } .pkt { width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:7px; } .pkt-eigen { background:var(--eigen); } .pkt-gegner { background:var(--gegner); box-shadow:inset 0 0 0 1px var(--rand); margin-left:18px; } .sf-kopf { font-family:var(--plakat); font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--aktion); margin:26px 0 12px; } .sf-titel { font-size:12px; font-weight:600; color:var(--text2); margin:16px 0 7px; } .schlagfolge > :first-child { margin-top:0; } .sf-liste { list-style:none; margin:0; padding:0; } .sf-zeile { display:flex; gap:11px; align-items:flex-start; padding:6px 0; font-size:14.5px; line-height:1.5; } .sf-nr { flex:none; width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:700; display:grid; place-items:center; margin-top:2px; color:var(--nummer); } .sf-eigen .sf-nr { background:var(--eigen); } .sf-gegner .sf-nr { background:var(--gegner); box-shadow:inset 0 0 0 1px var(--rand); } .sf-text { color:var(--text2); } .sf-text b { color:var(--ink); font-weight:600; } .sf-hinweis { display:block; font-size:13px; color:var(--text2); font-style:italic; } .beweis-fuss { margin:24px 0 0; padding-top:18px; border-top:1px solid var(--hairline); font-size:13px; line-height:1.6; color:var(--text2); } /* ========================================================================= LÖSUNG — Karten mit laufendem Rahmen (uiverse-Idiom) ========================================================================= */ .cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .card { --kartenGrund:var(--karte); position:relative; background:var(--kartenGrund); border-radius:6px; padding:28px 26px; border:1px solid var(--hairline); isolation:isolate; transition:transform .28s ease, box-shadow .28s ease; } /* Kapitel 03 steht auf Sand, also nehmen die Karten dort die helle Kartenfarbe; in einem `.alt`-Kapitel (Kartenfarbe) drehen sie sich um. Der Wert steckt in einer eigenen Variable, weil ihn auch `::after` braucht. */ .chapter.alt .card { --kartenGrund:var(--sand); } /* Laufender Rahmen beim Hover: ein conic-Verlauf, der einmal herumdreht. @property macht den Winkel überhaupt erst animierbar; ohne Unterstützung bleibt der Rahmen stehen statt zu laufen — kein Bruch. ⚠️ Es braucht ZWEI Pseudo-Elemente, nicht eins. `isolation:isolate` macht die Karte zu einem eigenen Stapelkontext, und darin malt ein Kind mit negativem z-index laut Painting-Order ÜBER den Hintergrund und Rahmen des Elements selbst — nicht darunter. Mit nur `::before` liegt deshalb kein Rahmen um die Karte, sondern ein Farbkeil quer darüber. `::after` holt die Innenfläche in Kartenfarbe zurück und lässt vom Verlauf genau die 1,5 px übrig, die aus dem Rand herausschauen. Es gewinnt, weil bei gleichem z-index die Dokument- reihenfolge entscheidet. */ @property --winkel { syntax:''; initial-value:0deg; inherits:false; } .card::before { content:""; position:absolute; inset:-1.5px; border-radius:7px; z-index:-1; background:conic-gradient(from var(--winkel,0deg), transparent 0deg, var(--akzent) 40deg, var(--stufe) 80deg, transparent 140deg, transparent 360deg); opacity:0; transition:opacity .3s ease; } .card::after { content:""; position:absolute; inset:0; border-radius:5px; z-index:-1; background:var(--kartenGrund); } .card:hover { transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(42,33,24,.55); } .card:hover::before { opacity:1; animation:drehe 2.6s linear infinite; } @keyframes drehe { to { --winkel:360deg; } } @media (prefers-reduced-motion: reduce) { .card:hover::before { animation:none; opacity:.55; } } .card .ix { display:block; font-family:var(--plakat); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--akzentText); margin-bottom:10px; } .card h3 { font-family:var(--plakat); font-weight:800; margin:0 0 10px; font-size:19px; letter-spacing:-.3px; } .card p { margin:0; color:var(--text2); font-size:15px; line-height:1.62; } .fakten { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:30px auto 0; } .fakt { font-size:13px; color:var(--text2); background:var(--flaeche); border-radius:999px; padding:7px 15px; white-space:nowrap; } .roadmap-hint { max-width:620px; margin:26px auto 0; text-align:center; font-size:13.5px; line-height:1.6; color:var(--text2); } .roadmap-hint .v2 { font-family:var(--plakat); font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--aktion); background:rgba(31,77,61,.1); border-radius:999px; padding:4px 10px; margin-right:9px; white-space:nowrap; } /* ===== Founder ===== */ .founder { max-width:640px; } .founder p { color:var(--text2); font-size:clamp(16px, 1.8vw, 18px); line-height:1.7; margin:0 0 18px; } .founder p:last-child { margin-bottom:0; } .founder strong { color:var(--ink); font-weight:600; } /* ========================================================================= SCHLUSS-CTA — dunkel, aber ohne zweite WebGL-Instanz. Vanta rät selbst von mehr als ein bis zwei Effekten pro Seite ab; das Netz hier ist ein statisches SVG-Muster in denselben Farben. ========================================================================= */ .cta-final { position:relative; overflow:hidden; text-align:center; color:var(--tiefText); background:linear-gradient(180deg, var(--tiefer) 0%, var(--tief) 100%); padding:88px 0 92px; } .cta-netz { position:absolute; inset:0; width:100%; height:100%; opacity:.4; z-index:0; pointer-events:none; } .cta-final > .wrap { position:relative; z-index:1; } .cta-final .eyebrow { color:var(--eigen); } .cta-final h2 { font-family:var(--plakat); font-weight:800; font-size:clamp(26px, 4.4vw, 44px); line-height:1.06; letter-spacing:-1px; margin:0 auto; max-width:19ch; color:var(--tiefText); } .cta-final .btn { display:inline-block; margin-top:28px; text-decoration:none; position:relative; overflow:hidden; border-radius:4px; background:var(--akzent); color:#fff; font-family:var(--plakat); font-weight:800; font-size:16px; padding:16px 34px; transition:background .18s ease, transform .18s ease, box-shadow .25s ease; } .cta-final .btn::before { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform:skewX(-18deg); transition:left .65s cubic-bezier(.2,.7,.3,1); } .cta-final .btn:hover { background:#d84e33; transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(200,69,44,.9); } .cta-final .btn:hover::before { left:130%; } .cta-final .btn:active { transform:translateY(0); } .cta-final .btn:focus-visible { outline:3px solid var(--eigen); outline-offset:3px; } @media (prefers-reduced-motion: reduce) { .cta-final .btn::before { display:none; } } /* ===== Footer ===== */ footer { background:var(--tiefer); color:var(--tiefText2); padding:26px 0 34px; } .foot-row { display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; font-size:13.5px; } .foot-row a { text-decoration:none; opacity:.85; } .foot-row a:hover { opacity:1; text-decoration:underline; text-underline-offset:3px; } .foot-row .sep { opacity:.35; } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width:900px) { .ph-side { display:none; } .ph-center { width:246px; } .phones { padding-bottom:92px; } } @media (max-width:760px) { .split { grid-template-columns:1fr; gap:24px; } .pullquote { max-width:none; } .cards { grid-template-columns:1fr; } .chapter { padding:60px 0 64px; } .head { gap:16px; margin-bottom:28px; } .beweis { padding:24px 18px 22px; } .sess-zeile { padding:13px 6px; gap:11px; } .sess-name { font-size:15px; } .tische { gap:6px; } .tisch-titel { font-size:10px; min-height:26px; } } @media (max-width:520px) { .pill { flex-direction:column; align-items:stretch; padding:8px; gap:8px; } .pill input { padding:12px 10px; } .knopf { width:100%; padding:15px; font-size:16px; } .hero-mitte { padding-top:40px; } }