/* ══════════════════════════════════════════════════════════════════════════ KRYPTIK — GESTALTUNG DER EINWILLIGUNG Angelegt 2026-08-10. Gehört zu assets/js/consent.js. 🔍 FÜR DICH ERKLÄRT Ein Einwilligungsfenster ist zwangsläufig ein Kasten — man kann es nicht „wegdesignen". Also wird es ein Kasten in DIESER Bildsprache: ein Manga-Panel mit schräger Ober- und Unterkante, Ben-Day-Punktraster im Papier und Neon-Lila an der Schnittkante. Es sieht aus wie eine Sprech- blase aus der Doppelseite, nicht wie ein Cookie-Hinweis von der Stange. ── DREI BAUREGELN DIESES HAUSES, HIER EINGEHALTEN ──────────────────────── 1 · KEINE `border`. Nirgends. Jede Kante ist ein Verlauf, ein Licht oder ein Schnitt (clip-path) — genau wie im Rest beider Seiten. Die Abnahme misst „sichtbare CSS-border = 0", und das bleibt so. 2 · `clip-path` und `drop-shadow` NIE auf demselben Element. Der Schnitt würde den Schatten an der Kante zu einem Rechteck kappen — das ist die technische Ursache der „billigen Kästen". Deshalb trägt die Box einen Schnitt und ihr Leuchten kommt von INNEN (::before), nicht als Außenschatten. 3 · Alles liegt `position:fixed` über der Seite. Es wird keine einzige Zeile Inhalt verschoben — das freigegebene Layout bleibt unberührt, und Google misst keinen Layout-Sprung (CLS bleibt bei 0). ══════════════════════════════════════════════════════════════════════ */ /* Eigene Farbwerte statt var(--mg-…): die Manga-Variablen sind im style.css an `.manga` gebunden, dieses Fenster hängt aber an . Werte 1:1 aus style.css übernommen, damit sie nicht auseinanderlaufen. ⚠ Sie stehen auf :root und NICHT auf .cq — gemessen am 2026-08-10: Der Platzhalter (.cq-embed) sitzt mitten im Seiteninhalt, also außerhalb des Banners. Standen die Werte auf .cq, waren sie dort unbekannt, und der Knopf verlor Fläche und Hausschrift (ungültige var() ohne Rückfallwert löscht die Eigenschaft). Im Screenshot sah man nur nackten Serifentext. */ :root{ --cq-ink: #08060d; --cq-ink-2: #100a1c; --cq-ink-3: #17102a; --cq-paper: #f2edfb; --cq-neon: #b026ff; --cq-neon-hi: #e3b0ff; --cq-neon-lo: #5c0fb0; --cq-neon-dk: #2c0755; --cq-disp: 'Dela Gothic One','Yu Gothic','MS Gothic',Impact,sans-serif; --cq-body: 'Zen Kaku Gothic New','Yu Gothic','Segoe UI',sans-serif; --cq-mono: 'JetBrains Mono','Cascadia Mono',Consolas,ui-monospace,monospace; } .cq{ position:fixed; inset:0; z-index:9999; display:flex; align-items:flex-end; justify-content:center; padding:clamp(.7rem,2.2vw,1.6rem); font-family:var(--cq-body); } /* Der Scrim nimmt der Seite dahinter die Aufmerksamkeit, ohne sie zu verstecken — der Besucher sieht, wo er ist. */ .cq__scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 100%, rgba(44,7,85,.62), rgba(4,2,10,.86) 70%); backdrop-filter:blur(3px) saturate(.85); -webkit-backdrop-filter:blur(3px) saturate(.85); } /* ── DAS PANEL ───────────────────────────────────────────────────────── Der Schnitt ist derselbe Gedanke wie bei .mg-foot: die Oberkante läuft schräg, als wäre die Blase aus der Seite geschnitten. */ .cq__box{ position:relative; width:min(660px,100%); padding:clamp(1.5rem,3.4vw,2.3rem) clamp(1.2rem,3vw,2.1rem) clamp(1.1rem,2.4vw,1.6rem); background:linear-gradient(158deg,var(--cq-ink-3) 0%,var(--cq-ink-2) 46%,var(--cq-ink) 100%); clip-path:polygon(0 3.2%, 100% 0, 100% 100%, 0 97.2%); color:var(--cq-paper); animation:cq-auf .42s cubic-bezier(.16,.84,.24,1) both; } /* Kantenlicht + Punktraster von INNEN — kein Außenschatten, siehe Bauregel 2. ::before ist das Neon an der Schnittkante, ::after das Ben-Day-Raster. */ .cq__box::before{ content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, var(--cq-neon) 0 2px, transparent 2px), linear-gradient(0deg, var(--cq-neon-lo) 0 2px, transparent 2px), linear-gradient(180deg, rgba(176,38,255,.20), transparent 38%); clip-path:inherit; opacity:.92; } .cq__box::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(rgba(227,176,255,.30) .8px, transparent .9px) 0 0/7px 7px; mix-blend-mode:screen; opacity:.28; clip-path:inherit; } .cq__box > *{ position:relative; z-index:1; } /* Das Fenster bekommt beim Öffnen den Fokus (damit Screenreader es vorlesen). Es ist per Tabulator nicht erreichbar, deshalb braucht es keinen Ring — und darf keinen haben, sonst sähe es aus wie ein anklickbares Feld. */ .cq__box:focus{ outline:none; } @keyframes cq-auf{ from{ transform:translateY(16px); opacity:0; } to { transform:none; opacity:1; } } /* ── SCHRIFT ────────────────────────────────────────────────────────── */ .cq__kicker{ margin:0 0 .55rem; font-family:var(--cq-mono); font-size:clamp(.56rem,.72vw,.68rem); letter-spacing:.34em; text-transform:uppercase; color:var(--cq-neon-hi); } .cq__titel{ margin:0 0 .7rem; font-family:var(--cq-disp); font-size:clamp(1.02rem,2.1vw,1.42rem); line-height:1.22; letter-spacing:.005em; } .cq__text{ margin:0 0 .55rem; font-size:clamp(.79rem,1.06vw,.9rem); line-height:1.62; color:rgba(242,237,251,.86); } /* Die tatsächlich angefragten Adressen — gerechnet, nicht getippt. */ .cq__hosts{ margin:0 0 1.15rem; font-family:var(--cq-mono); font-size:clamp(.62rem,.8vw,.72rem); letter-spacing:.06em; color:var(--cq-neon-hi); opacity:.82; overflow-wrap:anywhere; } /* ── DIE ZWEI KNÖPFE ─────────────────────────────────────────────────── Baugleich, bewusst. Gleiche Fläche, gleiche Farbe, gleiche Schrift — nur der Text unterscheidet sie. Ein hervorgehobenes „Akzeptieren" neben einem blassen „Ablehnen" ist die häufigste Abmahnursache überhaupt. */ .cq__reihe{ display:flex; gap:clamp(.5rem,1.2vw,.8rem); flex-wrap:wrap; } .cq-b{ flex:1 1 190px; padding:.82em 1.1em; background:linear-gradient(150deg,var(--cq-neon-lo),var(--cq-neon-dk)); color:var(--cq-paper); font-family:var(--cq-body); font-weight:700; font-size:clamp(.72rem,.95vw,.83rem); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border:0; /* Browser-Vorgabe abstellen, kein Rahmen */ clip-path:polygon(0 0, 100% 0, 100% 78%, calc(100% - 12px) 100%, 0 100%); transition:filter .18s ease, transform .18s ease; } .cq-b:hover{ filter:brightness(1.32) saturate(1.1); } .cq-b:active{ transform:translateY(1px); } /* Sichtbarer Fokus als INNENRING — ein outline würde über den Schnitt hinauslaufen und die Form zerstören. */ .cq-b:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--cq-neon-hi); filter:brightness(1.24); } .cq__fein{ margin:.95rem 0 0; font-size:clamp(.64rem,.82vw,.72rem); line-height:1.6; color:rgba(242,237,251,.52); } .cq__fein a{ color:var(--cq-neon-hi); text-decoration:underline; text-underline-offset:2px; } /* ══ PLATZHALTER STATT FREMDINHALT ═══════════════════════════════════════ Steht dort, wo später der Player sitzt, und ist exakt so groß wie er — deshalb springt beim Laden nichts. Ebenfalls ein Panel, kein grauer Kasten: Schnitt, Punktraster, Neon-Naht. */ .cq-embed{ position:relative; aspect-ratio:var(--cq-ar,152/100); width:100%; background:linear-gradient(158deg,var(--cq-ink-3),var(--cq-ink) 78%); clip-path:polygon(0 2.2%, 100% 0, 100% 100%, 0 97.8%); display:grid; place-items:center; overflow:hidden; } .cq-embed::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(rgba(227,176,255,.26) .8px, transparent .9px) 0 0/7px 7px; mix-blend-mode:screen; opacity:.3; } .cq-embed.is-geladen{ background:none; clip-path:none; display:block; } .cq-embed.is-geladen::after{ content:none; } .cq-embed__frame{ width:100%; height:100%; border:0; display:block; } .cq-ph{ position:relative; z-index:1; font-family:var(--cq-body); /* body dieser Seite setzt keine Schrift */ text-align:center; padding:1.1rem; display:flex; flex-direction:column; align-items:center; gap:.72rem; } .cq-ph__k{ margin:0; font-family:var(--cq-mono); font-size:clamp(.58rem,.75vw,.68rem); letter-spacing:.3em; text-transform:uppercase; color:var(--cq-neon-hi); } .cq-ph__b{ flex:0 0 auto; } .cq-ph__t{ margin:0; max-width:34ch; font-size:clamp(.62rem,.8vw,.7rem); line-height:1.55; color:rgba(242,237,251,.5); } /* ══ WIDERRUF IM FUSS ════════════════════════════════════════════════════ Erbt die Fuß-Gestaltung, damit er wie ein Geschwister der anderen Fuß-Einträge aussieht und nicht wie ein Fremdkörper. */ .cq-widerruf{ cursor:pointer; } .mg-foot .cq-widerruf:hover{ color:var(--cq-neon-hi); } /* Nur der Notfall-Platz, falls der Fuß einmal umgebaut wird. */ .cq-widerruf--frei{ position:fixed; right:10px; bottom:8px; z-index:9998; padding:.4em .7em; background:rgba(8,6,13,.86); color:rgba(242,237,251,.6); font-family:var(--cq-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; } /* ══ SCHMALE FASSUNG ════════════════════════════════════════════════════ */ @media (max-width:560px){ .cq{ align-items:flex-end; padding:0; } .cq__box{ width:100%; clip-path:polygon(0 2.4%, 100% 0, 100% 100%, 0 100%); } .cq-b{ flex:1 1 100%; } } /* ══ RUHE-EINSTELLUNG ═══════════════════════════════════════════════════ Wer im Betriebssystem „weniger Bewegung" gewählt hat, bekommt das Fenster ohne Anflug — sofort da, sonst identisch. */ @media (prefers-reduced-motion:reduce){ .cq__box{ animation:none; } .cq-b{ transition:none; } }