/* ============================================================================ ASCENYX — Rechtsseiten (Impressum, Datenschutz) Ergänzt styles.css, ersetzt nichts. Grundsatz aus dem Regelwerk (§1): Jeder Inhaltsblock ist eine Schriftrolle, die sich öffnet. Diese Seiten benutzen deshalb nicht eine Andeutung davon, sondern dasselbe Bauteil wie der Hero — Energie-Schienen oben und unten, Kanten-Pulse links und rechts, Lichtsweep, Flicker — mit den festen Timings aus §6. Zwei bewusste Abweichungen, beide aus dem Inhalt begründet: 1) Violett statt Cyan. §2 bindet Cyan und Magenta an die zwei Wege und verbietet sie einzeln. Rechtstexte gehören keinem Weg, also die geschlechtsneutrale Leitfarbe. Umgesetzt wie in §7 vorgesehen — ein Bauteil, mehrere Farbvarianten: .legal-scroll schreibt die --cy-*-Tokens lokal auf die Violett-Tokens um, die Mechanik bleibt unangetastet. 2) Aufrollen per clip-path statt fester Panelhöhe. Der Hero rollt auf 352px auf; ein Rechtstext ist beliebig lang. Ein scaleY-Aufziehen würde die Schrift stauchen, eine Höhen-Animation bräuchte eine feste Zahl. clip-path von unten nach oben ist dieselbe Geste über jede Höhe, mit derselben Dauer und derselben Kurve. Kein Schweben (§6, 7 s): Ein ganzseitiger Textblock, der dauerhaft auf und ab wandert, ist beim Lesen unerträglich. Ambient-Bewegung bleibt auf die Ränder beschränkt. Ausrichtung: Fließtext linksbündig, nicht zentriert wie die Hero- Schriftrolle. Zentrierter Mehrzeilentext ist ab etwa drei Zeilen nicht mehr zumutbar zu lesen, und §3 schreibt höchstens 68 Zeichen Zeilenlänge vor — beides zielt auf Lesbarkeit, und die hat bei einem Pflichttext Vorrang. ========================================================================== */ .legal-main{padding:clamp(110px,14vh,150px) 0 clamp(60px,8vh,90px)} .legal-head{max-width:68ch;margin-bottom:clamp(30px,4.5vh,46px)} .legal-head h1{ font-family:var(--display);font-weight:600;font-size:clamp(32px,5.2vw,58px); line-height:1.02;letter-spacing:-.01em;color:#fdfdff; text-shadow:0 0 28px rgba(var(--vi-rgb),.32); } .legal-head .lead{margin-top:16px;font-size:var(--fs-lead);color:var(--muted-strong);max-width:62ch} .legal-head .stand{margin-top:10px;font-family:var(--mono);font-size:var(--fs-fine);color:var(--muted)} /* ============================================================================ Schriftrolle, Violett-Variante ========================================================================== */ .legal-scroll{ /* Farbvariante: dieselben Regeln, andere Tokens. */ --cy-core:var(--vi-core); --cy-hell:var(--vi-hell); --cy-basis:var(--vi-basis); --cy-tief:var(--vi-tief); --cy-akzent:var(--vi-akzent); --cy-side-a:var(--vi-side-a); --cy-side-b:var(--vi-side-b); --cy-puls-a:var(--vi-puls-a); --cy-puls-b:var(--vi-puls-b); --cy-rgb:var(--vi-rgb); max-width:920px; } /* Kein 3D-Kippen und keine Hero-Breite: der Hero zeigt ein Objekt, hier wird gelesen. rotateX über eine ganze Textseite verzerrt die Grundlinien. */ .legal-scroll.scroll-tilt{transform:none;max-width:920px;width:100%} .legal-scroll .scroll-window{opacity:1} /* Das Schweben des Hero-Panels wird hier abbestellt (Begründung oben). */ .legal-scroll.scroll-tilt.run .scroll-window{animation:scrollMaterialize .3s ease-out forwards} /* Ohne JavaScript bleibt alles sofort sichtbar — ein Pflichttext darf nie an einem Skript hängen. Erst die Klasse .js (im gesetzt) schaltet in den Startzustand der Animation. */ .js .legal-scroll .scroll-window{opacity:0} .js .legal-scroll .legal-panel{clip-path:inset(0 0 100% 0)} .js .legal-scroll .s-content{opacity:0} .legal-scroll.run .legal-panel{ animation:legalUnroll 1.05s cubic-bezier(.2,.9,.15,1) .5s forwards; } @keyframes legalUnroll{to{clip-path:inset(0 0 0 0)}} .legal-scroll.run .s-content{animation:scrollFadeUp .6s ease 1.25s forwards} /* Panel: Fläche zwischen den Schienen. Gleiche Farbwelt wie .s-panel-inner, aber mitwachsend. */ .legal-panel{position:relative;z-index:1;margin:0 22px; background:radial-gradient(ellipse at 50% 12%,rgba(var(--vi-rgb),.14),transparent 62%), radial-gradient(ellipse at 50% 40%,var(--panel-a),var(--panel-b) 80%); border-left:1px solid rgba(var(--vi-rgb),.14); border-right:1px solid rgba(var(--vi-rgb),.14); } .legal-panel .s-edge{top:26px;bottom:26px} /* styles.css setzt .s-content{opacity:0} — dort blendet erst die Animation ein. Hier muss der Text auch ohne Skript stehen, deshalb zurueck auf sichtbar; den Startzustand setzt weiter unten allein die .js-Regel. */ .legal-panel .s-content{ position:relative;z-index:3;height:auto;display:block;text-align:left;opacity:1; padding:clamp(30px,4.4vw,56px) clamp(26px,5vw,64px); } @media(max-width:560px){ .legal-panel{margin:0 12px} .legal-panel .s-edge{display:none} } /* ============================================================================ Fließtext ========================================================================== */ .legal-body{font-size:var(--fs-body);color:var(--ink);line-height:1.7} .legal-body > * + *{margin-top:16px} .legal-body h2{ font-family:var(--display);font-weight:600;font-size:var(--fs-h3); letter-spacing:.03em;color:#fff;margin-top:clamp(34px,4.6vh,48px); padding-top:clamp(22px,3vh,30px);border-top:1px solid var(--line); } .legal-body > h2:first-child{margin-top:0;padding-top:0;border-top:0} .legal-body h3{ font-family:var(--display);font-weight:600;font-size:var(--fs-h4); letter-spacing:.02em;color:var(--vi-hell);margin-top:26px; } .legal-body p,.legal-body li{max-width:68ch} .legal-body ul,.legal-body ol{padding-left:22px} .legal-body li{margin-top:7px} .legal-body li::marker{color:var(--vi-basis)} .legal-body a{color:var(--vi-hell);text-decoration:underline;text-underline-offset:3px} .legal-body a:hover{color:var(--vi-core)} .legal-body strong{color:#fff;font-weight:600} .legal-body em{font-style:normal;font-weight:600;color:var(--vi-akzent)} .legal-body .muted{color:var(--muted)} /* Adressblock */ .legal-body .addr{ font-family:var(--mono);font-size:var(--fs-body);line-height:1.75;color:var(--ink); border-left:2px solid var(--vi-side-b);padding:2px 0 2px 18px; } .legal-body .addr b{color:#fff;font-weight:600;letter-spacing:.02em} /* Zweck / Rechtsgrundlage / Speicherdauer */ .legal-body .facts{ display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:1px; background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden; margin-top:18px; } .legal-body .facts dt,.legal-body .facts dd{ background:rgba(10,14,24,.92);padding:12px 16px;margin:0;font-size:var(--fs-fine); } .legal-body .facts dt{font-family:var(--mono);color:var(--muted-strong);letter-spacing:.02em} .legal-body .facts dd{color:var(--ink);max-width:none} @media (max-width:640px){ .legal-body .facts{grid-template-columns:1fr} .legal-body .facts dt{padding-bottom:0} } /* Hinweisblock */ .legal-note{ margin-top:24px;border:1px solid var(--vi-side-a);border-radius:12px; background:rgba(var(--vi-rgb),.07);padding:16px 18px; font-size:var(--fs-fine);color:var(--muted-strong);max-width:68ch; } .legal-note b{color:var(--vi-hell)} .legal-back{margin-top:clamp(30px,4vh,44px);font-size:var(--fs-fine)} .legal-back a{color:var(--muted-strong);text-decoration:none} .legal-back a:hover{color:var(--ink)} /* ============================================================================ Kopfzeile der Rechtsseiten auf kleinen Schirmen. styles.css blendet unter 900px die Navigation und unter 700px den Sprachumschalter aus, weil beides auf der Startseite ins Vollbildmenü hinter dem Burger wandert. Diese Seiten haben dieses Menü nicht — ohne die Rücknahme verschwände auf dem Telefon die Sprachumschaltung ersatzlos, und ein deutscher Besucher käme nicht mehr zur deutschen Fassung. ========================================================================== */ @media(max-width:900px){ .nav-legal nav.links{display:flex;gap:16px} } @media(max-width:700px){ .nav-legal .nav-actions .langsw{display:flex} } @media(max-width:480px){ .nav-legal .wrap.nav-row{gap:10px} .nav-legal nav.links{gap:12px} .nav-legal nav.links a{font-size:12px} .nav-legal .wordmark .logo{height:20px} /* Auf Deutsch sind die Linktexte laenger ("Startseite", "App-Datenschutz"), und Logo, Links und der 44px-Sprachumschalter passen unter 480px nicht mehr in eine Zeile: auf 320px fehlten fast 90px. Die Links sind hier entbehrlich, denn die Fusszeile fuehrt alle Rechtsseiten, das Logo fuehrt zur Startseite, und unter dem Text steht "Zurueck zur Startseite". */ .nav-legal nav.links{display:none} } /* ============================================================================ Speicher-Hinweis. Schlanke Leiste, blockiert die Seite nicht — es ist ein Hinweis, keine Einwilligungsabfrage (§ 25 Abs. 2 Nr. 2 TDDDG). Bestätigung in Violett, nicht in Grün: Grün ist laut §2 dem einen Haupt-Button vorbehalten und darf hier nicht verwässert werden. ========================================================================== */ .storage-note{ position:fixed;left:50%;transform:translateX(-50%); bottom:16px;z-index:90;width:min(660px,calc(100vw - 24px)); display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:linear-gradient(180deg,rgba(16,22,37,.97),rgba(7,10,18,.97)); border:1px solid var(--vi-side-a);border-radius:14px; padding:13px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 18px 50px -24px rgba(0,0,0,.95),0 0 40px -28px rgba(var(--vi-rgb),.8); font-size:var(--fs-fine);color:var(--muted-strong);line-height:1.55; opacity:0;pointer-events:none;transition:opacity .45s var(--ease); } .storage-note.show{opacity:1;pointer-events:auto} .storage-note[hidden]{display:none} .storage-note p{flex:1 1 280px;margin:0;max-width:52ch} .storage-note a{color:var(--vi-hell);text-decoration:underline;text-underline-offset:3px} .storage-note .sn-ok{ flex:0 0 auto;font-family:var(--display);font-size:var(--fs-label);font-weight:700; letter-spacing:.08em;text-transform:uppercase;cursor:pointer; border:1px solid var(--vi-side-b);border-radius:100px; background:rgba(var(--vi-rgb),.16);color:var(--vi-core); padding:9px 18px;transition:background .2s,border-color .2s; } .storage-note .sn-ok:hover{background:rgba(var(--vi-rgb),.3);border-color:var(--vi-basis)} @media (max-width:520px){ .storage-note{bottom:10px;padding:14px} .storage-note .sn-ok{width:100%} } /* ============================================================================ Reduzierte Bewegung: §6 verlangt, dass Schriftrollen sofort geöffnet erscheinen und Sweep wie Pulse stillstehen. Die Seite bleibt vollständig nutzbar. ========================================================================== */ @media(prefers-reduced-motion:reduce){ .js .legal-scroll .scroll-window{opacity:1} .js .legal-scroll .legal-panel{clip-path:none} .js .legal-scroll .s-content{opacity:1} .legal-scroll .s-pulse,.legal-scroll .s-sweep{display:none} .legal-scroll .s-flicker{animation:none} .legal-scroll .s-edge{opacity:1} .legal-scroll .s-rail{transform:scaleX(1)} .legal-scroll .s-rail.bottom{transform:scaleX(1) scaleY(-1)} .storage-note{transition:none} } /* ============================================================================ Touch-Ziele der Rechtsseiten. Gleiche Begründung wie in styles.css: nur eigenständige Bedienelemente, keine Links mitten im Satz. ========================================================================== */ @media (pointer:coarse){ .nav-legal nav.links a{min-height:44px;display:inline-flex;align-items:center} .storage-note .sn-ok{min-height:44px} .legal-back a{min-height:44px;display:inline-flex;align-items:center} } /* Mit dem 44px-Sprachumschalter wurde die fixierte Kopfzeile der Rechtsseiten 98px hoch und damit auf einem Telefon zu dominant. Weniger Polsterung holt sie auf 78px zurück, ohne das Tap-Ziel anzutasten. */ @media (pointer:coarse) and (max-width:900px){ header.nav.nav-legal{padding:12px 0} } /* ============================================================================ Lange deutsche Woerter. "Nutzungsbedingungen" in der h1 und "Leistungsbeschreibung" in einer h2 sind auf 320 bis 390px breiter als die Spalte und schoben die ganze Seite seitlich auf. hyphens:auto trennt sauber, wo das Geraet ein Trennwoerterbuch hat (das lang-Attribut setzt legal.js); overflow-wrap faengt den Rest ab, damit nie etwas ueber den Rand laeuft. ========================================================================== */ .legal-head h1,.legal-body h2,.legal-body h3,.legal-body p,.legal-body li{ overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}