/* ════════════════════════════════════════════════════════════════════ thesen16 · Profil-Overlay — STRUKTUR (skin-agnostisch) Farben/Skin kommen aus thesen16-{a,b,c}.css via --ov-* Variablen. Liegt am (außerhalb .v6-fx-drift) → Tokens hier neu gemappt. ════════════════════════════════════════════════════════════════════ */ .cu-ov{ /* Token-Remap (Fonts/Marken-Farben global) */ --font-display:var(--font-serif); --font-wide:var(--font-sans-breit); --font-mono:"Söhne Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ink:var(--color-near-black); --paper:var(--color-white); --blue:var(--color-blue); --yellow:var(--color-yellow); --graphite:#46484B; --silver:#9799A0; --ease-out:cubic-bezier(.22,.61,.36,1); /* Skin-Defaults (Variante A „Nacht") — von Skin-Files überschrieben */ --ov-scrim:rgba(6,6,12,.93); --ov-fg:#FFFFFF; --ov-muted:rgba(255,255,255,.66); --ov-eyebrow:var(--yellow); --ov-line:rgba(255,255,255,.16); --ov-card:rgba(255,255,255,.05); --ov-cardline:rgba(255,255,255,.18); --ov-field-bg:var(--yellow); --ov-field-fg:var(--ink); --ov-link:var(--yellow); --ov-btn-bg:var(--yellow); --ov-btn-fg:var(--ink); --ov-chip-bg:rgba(255,255,255,.1); --ov-chip-fg:#FFFFFF; --ov-chip-on:var(--yellow); --ov-pill-bg:var(--yellow); --ov-pill-fg:var(--ink); --ov-close:#FFFFFF; position:fixed; inset:0; z-index:10000; /* über dem Cookie-Banner (9999) */ } .cu-ov[hidden]{display:none;} .cu-ov__scrim{ position:absolute; inset:0; background:var(--ov-scrim); opacity:0; transition:opacity .32s var(--ease-out); } .cu-ov.is-open .cu-ov__scrim{opacity:1;} .cu-ov__scroll{ position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; transform:translateY(14px); transition:opacity .34s var(--ov-ease,var(--ease-out)) .04s, transform .34s var(--ease-out) .04s; } .cu-ov.is-open .cu-ov__scroll{opacity:1; transform:none;} body.cu-ov-lock{overflow:hidden;} .cu-ov__close{ position:fixed; top:18px; right:20px; z-index:2; width:44px; height:44px; border-radius:50%; cursor:pointer; background:transparent; border:1px solid var(--ov-line); color:var(--ov-close); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease-out), transform .15s var(--ease-out); } .cu-ov__close:hover{background:var(--ov-card); transform:rotate(90deg);} .cu-ov__inner{ max-width:760px; margin:0 auto; padding:clamp(64px,9vw,108px) clamp(22px,6vw,56px) clamp(72px,12vw,140px); color:var(--ov-fg); font-family:var(--font-sans); } /* ── Kopf-/Body-Wrapper (Layout kommt aus den Skins) ────────────── */ .cu-ov-head,.cu-ov-body{display:block;} /* Scroll-Reveal je Sektion (JS setzt .cu-ov-inview) */ .cu-ov-head{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);} .cu-ov-head.cu-ov-inview{opacity:1; transform:none;} .cu-ov-body > .cu-ov-block{opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);} .cu-ov-body > .cu-ov-block.cu-ov-inview{opacity:1; transform:none;} /* ── Kopf ───────────────────────────────────────────────────────── */ .cu-ov-sharp{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; line-height:1.5; color:var(--ov-muted); margin:0 0 26px; max-width:46ch; } .cu-ov-eyebrow{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ov-eyebrow); margin-bottom:14px; } .cu-ov-archhead{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px;} .cu-ov-genus{display:inline-flex; border:1px solid var(--ov-cardline); border-radius:999px; overflow:hidden;} .cu-ov-genus-opt{ appearance:none; cursor:pointer; border:0; background:transparent; color:var(--ov-muted); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-right:1px solid var(--ov-cardline); transition:background .15s, color .15s; } .cu-ov-genus-opt:last-child{border-right:0;} .cu-ov-genus-opt:hover{color:var(--ov-fg);} .cu-ov-genus-opt.is-active{background:var(--ov-chip-on); color:var(--ov-field-fg);} .cu-ov-shareicon{ appearance:none; cursor:pointer; flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:transparent; border:1px solid var(--ov-cardline); color:var(--ov-fg); font-size:16px; transition:background .15s, transform .15s; } .cu-ov-shareicon:hover{background:var(--ov-card); transform:translateY(-2px);} .cu-ov-arch{ font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(28px,7vw,60px); line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ov-fg); text-wrap:balance; overflow-wrap:break-word; hyphens:auto; } .cu-ov-arch-desc{font-family:var(--font-display); font-style:italic; font-size:clamp(20px,3.4vw,27px); line-height:1.4; margin:18px 0 0; color:var(--ov-fg);} .cu-ov-arch-bridge{font-family:var(--font-sans); font-weight:600; font-size:clamp(16px,2.4vw,19px); line-height:1.5; margin:14px 0 0; color:var(--ov-fg);} .cu-ov-barr{color:var(--ov-eyebrow); font-weight:800;} /* ── Blöcke ─────────────────────────────────────────────────────── */ .cu-ov-block{margin-top:clamp(48px,8vw,80px); padding-top:clamp(32px,5vw,44px); border-top:1px solid var(--ov-line);} .cu-ov-blockhead{ font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:clamp(22px,4vw,32px); line-height:1.05; letter-spacing:-.015em; margin:0 0 14px; color:var(--ov-fg); } .cu-ov-blockintro{font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--ov-muted); margin:0 0 26px; max-width:54ch;} .cu-ov-spur{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ov-muted); margin:0 0 18px;} /* Block 1 — Achsen */ .cu-ov-axes{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px;} .cu-ov-axis{opacity:.58; transition:opacity .4s var(--ease-out);} .cu-ov-axis.is-on{opacity:1;} .cu-ov-axis-pol{ display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ov-eyebrow); margin:12px 0 7px; } .cu-ov-axis.is-on .cu-ov-axis-pol::before{content:"● "; } .cu-ov-axis-text{font-family:var(--font-sans); font-size:16.5px; line-height:1.62; margin:0; color:var(--ov-fg); max-width:60ch;} /* Bipolar-Skala mit gleitendem Node — greift das Profil-Panel-Prinzip auf */ .cu-ov-axis-scale{display:grid; grid-template-columns:minmax(0,auto) 1fr minmax(0,auto); align-items:center; gap:14px;} .cu-ov-axis-end{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ov-muted); line-height:1.2; } .cu-ov-axis-end--pos{text-align:right;} .cu-ov-axis.is-pos .cu-ov-axis-end--pos, .cu-ov-axis.is-neg .cu-ov-axis-end--neg{color:var(--ov-eyebrow); font-weight:600;} .cu-ov-axis-rail{position:relative; height:2px; border-radius:2px; background:var(--ov-cardline);} .cu-ov-axis-rail::before{ /* Mittelmarke */ content:""; position:absolute; left:50%; top:-3px; width:1px; height:8px; transform:translateX(-.5px); background:var(--ov-line); } .cu-ov-axis-dot{ position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:50%; background:var(--ov-muted); transform:translate(-50%,-50%); box-shadow:0 0 0 0 transparent; transition:left .85s cubic-bezier(.34,1.3,.5,1), background .4s var(--ease-out), box-shadow .4s var(--ease-out); } .cu-ov-axis.is-on .cu-ov-axis-dot{background:var(--ov-eyebrow);} .cu-ov.is-open .cu-ov-axis-dot{left:calc(var(--cu-pos,50) * 1%);} .cu-ov.is-open .cu-ov-axis.is-on .cu-ov-axis-dot{box-shadow:0 0 0 6px color-mix(in srgb, var(--ov-eyebrow) 22%, transparent);} /* Block 2 — Stärken / Blindstelle / Impulse */ .cu-ov-staerken{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:20px;} .cu-ov-staerke{ font-family:var(--font-sans); font-size:17px; line-height:1.6; color:var(--ov-fg); padding-left:20px; border-left:3px solid var(--ov-eyebrow); max-width:62ch; } .cu-ov-uebergang{font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.45; color:var(--ov-muted); margin:0 0 12px; max-width:50ch;} .cu-ov-blind{ font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--ov-fg); background:var(--ov-card); border:1px solid var(--ov-cardline); border-radius:8px; padding:18px 20px; margin:0 0 30px; max-width:64ch; } .cu-ov-impulselead{font-family:var(--font-wide); font-weight:700; font-size:14px; letter-spacing:.01em; text-transform:uppercase; margin:0 0 14px; color:var(--ov-fg);} .cu-ov-impulse-list{list-style:none; margin:0 0 38px; padding:0; counter-reset:imp; display:flex; flex-direction:column; gap:14px;} .cu-ov-impulse{ position:relative; font-family:var(--font-sans); font-size:16px; line-height:1.55; color:var(--ov-fg); padding-left:42px; max-width:60ch; counter-increment:imp; } .cu-ov-impulse::before{ content:counter(imp); position:absolute; left:0; top:-2px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ov-chip-bg); color:var(--ov-chip-fg); font-family:var(--font-mono); font-size:13px; } /* Mail-Dialog */ .cu-ov-mail{background:var(--ov-card); border:1px solid var(--ov-cardline); border-radius:12px; padding:clamp(22px,4vw,32px);} .cu-ov-mailhead{font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:-.01em; margin:0 0 10px; color:var(--ov-fg);} .cu-ov-mailsub{font-family:var(--font-sans); font-size:15px; line-height:1.55; color:var(--ov-muted); margin:0 0 20px; max-width:54ch;} .cu-ov-mailrow{display:flex; flex-direction:column; align-items:stretch; gap:0;} .cu-ov-maillabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ov-muted); margin-bottom:4px; } .cu-ov-maillabel-star{color:var(--ov-eyebrow);} .cu-ov-mailinput{ appearance:none; min-width:0; border:0; border-bottom:1.5px solid var(--ov-cardline); background:transparent; color:var(--ov-fg); font-family:var(--font-sans); font-size:clamp(18px,2.4vw,21px); padding:10px 2px; border-radius:0; transition:border-color .2s var(--ease-out); } .cu-ov-mailinput::placeholder{color:var(--ov-muted);} .cu-ov-mailinput:focus{outline:none; border-bottom-color:var(--ov-eyebrow);} .cu-ov-mailbtn{ align-self:flex-start; margin-top:22px; appearance:none; cursor:pointer; border:0; background:var(--ov-btn-bg); color:var(--ov-btn-fg); font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.02em; padding:18px 30px; border-radius:0; display:inline-flex; align-items:center; gap:18px; transition:transform .15s var(--ease-out), opacity .15s; } .cu-ov-mailarrow{display:inline-block; transition:transform .2s var(--ease-out);} .cu-ov-mailbtn:hover{transform:translateY(-2px);} .cu-ov-mailbtn:hover .cu-ov-mailarrow{transform:translateX(6px);} .cu-ov-mailbtn:disabled{opacity:.5; cursor:default; transform:none;} .cu-ov-mailhint{font-family:var(--font-sans); font-size:12.5px; line-height:1.5; color:var(--ov-muted); margin:18px 0 16px; max-width:56ch;} .cu-ov-check{display:flex; gap:13px; align-items:flex-start; margin-top:14px; font-family:var(--font-sans); font-size:13px; line-height:1.5; color:var(--ov-fg); cursor:pointer;} .cu-ov-check input{ appearance:none; flex:0 0 auto; margin-top:1px; width:22px; height:22px; cursor:pointer; border:1.5px solid var(--ov-cardline); border-radius:3px; background:transparent; position:relative; transition:background .15s var(--ease-out), border-color .15s var(--ease-out); } .cu-ov-check input:checked{background:var(--ov-chip-on); border-color:var(--ov-chip-on);} .cu-ov-check input:checked::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--ov-field-fg); } .cu-ov-check input:focus-visible{outline:2px solid var(--ov-eyebrow); outline-offset:2px;} .cu-ov-mailmsg{font-family:var(--font-sans); font-size:14px; margin:16px 0 0; font-weight:600;} .cu-ov-mailmsg.is-ok{color:#1F9A5A;} .cu-ov-mailmsg.is-error{color:#D33;} /* Block 3 — Situationsfrage */ .cu-ov-sitq{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,3vw,24px); margin:0 0 18px; color:var(--ov-fg);} .cu-ov-sitopts{display:flex; flex-direction:column; gap:10px; margin-bottom:24px;} .cu-ov-sitopt{ appearance:none; cursor:pointer; text-align:left; border:1px solid var(--ov-cardline); background:transparent; color:var(--ov-fg); font-family:var(--font-sans); font-size:16px; padding:15px 18px; border-radius:8px; transition:background .15s, border-color .15s, transform .12s; } .cu-ov-sitopt:hover{transform:translateY(-1px); border-color:var(--ov-eyebrow);} .cu-ov-sitopt.is-active{background:var(--ov-chip-on); color:var(--ov-field-fg); border-color:var(--ov-chip-on);} .cu-ov-sitresult{margin-top:6px; padding-top:6px;} .cu-ov-bruecke{font-family:var(--font-sans); font-size:16.5px; line-height:1.6; color:var(--ov-fg); margin:0 0 18px; max-width:60ch;} .cu-ov-formate{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;} .cu-ov-formatlink{ display:inline-flex; align-items:center; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--ov-pill-fg); background:var(--ov-pill-bg); text-decoration:none; padding:9px 15px; border-radius:999px; transition:transform .15s var(--ease-out); } .cu-ov-formatlink:hover{transform:translateY(-2px);} .cu-ov-einstieg{font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--ov-muted); margin:0 0 18px;} .cu-ov-einstieg .cu-ov-formatlink{background:transparent; color:var(--ov-link); padding:0; border-radius:0; text-decoration:underline; font-family:var(--font-mono); font-weight:400;} .cu-ov-wende{font-family:var(--font-sans); font-size:15px; line-height:1.55; color:var(--ov-muted); margin:6px 0 0;} .cu-ov-wende .cu-ov-formatlink{background:transparent; color:var(--ov-link); padding:0; text-decoration:underline;} .cu-ov-textlink{appearance:none; background:none; border:0; cursor:pointer; color:var(--ov-link); font:inherit; text-decoration:underline; padding:0; text-align:left;} /* Schluss — Share + Challenge */ .cu-ov-sharecard-wrap{margin:22px 0 18px; max-width:420px;} .cu-ov-sharecanvas{width:100%; height:auto; display:block; border:1px solid var(--ov-cardline); border-radius:10px; background:var(--paper);} .cu-ov-sharebtns{display:flex; flex-wrap:wrap; gap:10px;} .cu-ov-sharedl{ appearance:none; cursor:pointer; border:1px solid var(--ov-cardline); background:transparent; color:var(--ov-fg); font-family:var(--font-sans); font-weight:600; font-size:14px; padding:11px 18px; border-radius:8px; transition:background .15s, transform .12s; } .cu-ov-sharedl:hover{background:var(--ov-card); transform:translateY(-1px);} .cu-ov-sharenote{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ov-muted); margin:12px 0 0;} .cu-ov-challenge{margin-top:clamp(40px,7vw,64px); padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--ov-line);} .cu-ov-challengeintro{font-family:var(--font-display); font-style:italic; font-size:clamp(19px,3vw,25px); line-height:1.4; color:var(--ov-fg); margin:0 0 22px; max-width:52ch;} .cu-ov-challengebtn{ appearance:none; cursor:pointer; border:0; background:var(--ov-btn-bg); color:var(--ov-btn-fg); font-family:var(--font-wide); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.01em; padding:16px 26px; border-radius:8px; transition:transform .15s var(--ease-out); } .cu-ov-challengebtn:hover{transform:translateY(-2px);} @media (prefers-reduced-motion:reduce){ .cu-ov__scrim,.cu-ov__scroll{transition:none !important;} .cu-ov__close:hover,.cu-ov-sitopt:hover,.cu-ov-formatlink:hover,.cu-ov-mailbtn:hover{transform:none !important;} .cu-ov-head,.cu-ov-body > .cu-ov-block{opacity:1 !important; transform:none !important; transition:none !important;} .cu-ov-axis-dot{transition:none !important;} .cu-ov.is-open .cu-ov-axis-dot{left:calc(var(--cu-pos,50) * 1%);} }