@font-face{font-family:"Geist";src:url(fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#F5F7FC;--bg2:#E6ECF7;--grid:#D9E1EE;--card:#FFFFFF;--card2:#F6F8FC;--line:#E1E7F0;
--ink:#0E1630;--soft:#55617B;--mute:#97A1B5;--iris:#5B4BFF;--iris-bright:#8F84FF;--iris-deep:#4232E0;--iris-dark:#2A1F9C;
--iris-soft:rgba(91,75,255,.10);--logo:#0E1630;--ok:#0A8F68;
--shadow:0 8px 22px rgba(30,45,90,.10),0 2px 6px rgba(30,45,90,.05);
--font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;
background:linear-gradient(180deg,var(--bg) 0,var(--bg2) 1400px) var(--bg2);min-height:100vh}
body::before{content:"";position:absolute;inset:0 0 auto;height:420px;pointer-events:none;z-index:-1;
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:32px 32px;background-position:center -1px;
-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 20%,transparent 75%);mask-image:radial-gradient(120% 100% at 50% 0,#000 20%,transparent 75%);opacity:.7}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.demo{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:7px 16px;font-weight:600}
header.profile{text-align:center;padding:30px 0 6px}
.avatar{display:block;width:96px;height:96px;margin:0 auto 12px;border-radius:50%;padding:3px;
background:conic-gradient(from 210deg,var(--iris-bright),var(--iris),var(--iris-dark),var(--iris-bright));box-shadow:0 10px 26px -8px rgba(91,75,255,.55)}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;border:3px solid var(--bg)}
.profile h1{font-size:21px;line-height:1.2;margin:0;font-weight:750;letter-spacing:-.015em}
.profile .claim{margin:6px auto 0;max-width:30ch;color:var(--soft);font-size:15.5px;line-height:1.4}
.social{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.social a{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none}
.disclosure{display:flex;gap:10px;align-items:flex-start;max-width:640px;margin:18px auto 0;padding:11px 14px;border-radius:14px;
background:var(--card);border:1px solid var(--line);box-shadow:0 1px 0 rgba(30,45,90,.03);font-size:13.5px;line-height:1.45;color:var(--soft);text-align:left}
.disclosure svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--iris)}
.disclosure b{color:var(--ink);font-weight:650}
.sec{margin:26px 0 0;font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--iris);text-align:center}
.search{position:sticky;top:0;z-index:5;max-width:640px;margin:10px auto 0;padding:10px 16px;margin-inline:-16px;
background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.search label{position:relative;display:block}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--soft);pointer-events:none}
.search input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);
border-radius:14px;padding:12px 44px 12px 42px;outline:none;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--mute)}
.search input:focus{border-color:var(--iris);box-shadow:0 0 0 4px var(--iris-soft)}
.search input::-webkit-search-cancel-button{display:none}
.clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--soft);font:inherit;font-size:22px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer;display:none}
.has-q .clear{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meta{display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:2px auto 10px;padding:0 2px;font-size:12.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.meta button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--iris-deep);background:none;border:0;padding:4px 0;cursor:pointer;display:none}
.meta button.on{display:inline}
.tools{list-style:none;margin:0 auto;padding:0;display:grid;gap:14px;max-width:640px}
.tool{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow);scroll-margin-top:84px}
.tool.hit{border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-soft),0 14px 34px -10px rgba(91,75,255,.45)}
.tool .flag{display:none;position:absolute;z-index:3;top:-11px;left:16px;font-size:11.5px;font-weight:700;letter-spacing:.03em;padding:3px 10px;border-radius:999px;background:var(--iris);color:#fff}
.tool.hit .flag{display:block}
.top{display:flex;align-items:center;gap:12px}
.logo{flex:none;display:grid;place-items:center;height:48px;min-width:48px;max-width:150px;padding:0 13px;border-radius:13px;background:var(--logo)}
.logo img{display:block;max-height:20px;max-width:124px;width:auto;height:auto}
.logo.mono{width:48px;padding:0;background:linear-gradient(145deg,var(--iris-bright),var(--iris) 55%,var(--iris-deep));color:#fff;font-weight:750;font-size:22px}
.top h2{margin:0;font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.cat{display:inline-block;margin-top:3px;font-size:12px;font-weight:600;color:var(--soft)}
.blurb{margin:12px 0 0;font-size:15px;color:var(--soft)}
.offer{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--iris-soft);color:var(--iris-dark);font-size:15px;font-weight:550;line-height:1.4}
.offer svg{flex:none;width:18px;height:18px;margin-top:1px}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;min-height:52px;padding:12px 18px;border-radius:14px;
background:var(--iris);color:#fff;font-weight:700;font-size:16.5px;text-decoration:none;box-shadow:0 8px 20px -8px rgba(66,50,224,.7);-webkit-tap-highlight-color:transparent;transition:background .15s}
.cta:hover{background:var(--iris-deep)}
.cta svg{width:18px;height:18px}
.cta:focus-visible,.reel a:focus-visible,.plats a:focus-visible,.social a:focus-visible{outline:3px solid var(--iris-bright);outline-offset:2px}
.adnote{margin:7px 0 0;text-align:center;font-size:12px;color:var(--mute)}
/* Flip-Karte: Vorderseite = Cover-Look (wie StCover: dunkles Logo-Feld + Kategorie + Bit), Rueckseite = Deal + Button.
   Ohne JS und bei prefers-reduced-motion: beide Seiten untereinander, keine Drehung. */
.flip{position:relative}
.face{border-radius:16px}
.front{position:relative;overflow:hidden;padding:18px 16px 16px;text-align:center;
background:linear-gradient(180deg,#F5F7FC,#E6ECF7);border:1px solid var(--line)}
.front::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;
-webkit-mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(90% 80% at 50% 40%,#000 30%,transparent 80%)}
/* Tool-Plakette wie StCover/brandkit ToolPlate: Ink, Hoehe fest, Radius 24 % der Hoehe, Logo unveraendert oder Name in Geist 800 */
.cv-logo{position:relative;align-self:center;display:inline-flex;align-items:center;justify-content:center;height:84px;max-width:100%;padding:0 26px;border-radius:20px;background:var(--logo);
box-shadow:0 14px 28px -10px rgba(14,22,48,.45),0 3px 8px rgba(14,22,48,.15)}
.cv-logo img{display:block;height:35px;width:auto;max-width:230px}
.cv-logo .nm{color:#fff;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.cv-cat{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;margin:14px 0 0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--iris)}
.cv-cat svg{width:18px;height:18px;flex:none}
.cv-row{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.cv-bit{width:34px;height:34px;border-radius:50%;box-shadow:0 4px 10px -3px rgba(91,75,255,.6)}
.turn{font:inherit;font-size:13px;font-weight:700;color:var(--iris-deep);background:var(--card);border:1px solid var(--line);border-radius:999px;
padding:7px 13px;cursor:pointer;-webkit-tap-highlight-color:transparent;display:none}
.turn svg{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
.turn .h{display:none}
.back{padding:2px 0 0}
.back .head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.back .head h2{margin:0;font-size:19px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.back .head .cat{margin:0}
.unturn{display:none;flex:none;align-items:center;gap:5px;white-space:nowrap;font:inherit;font-size:12.5px;font-weight:700;color:var(--soft);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
.unturn svg{width:13px;height:13px}
.nojs-sep{margin-top:14px}
@media (prefers-reduced-motion:no-preference){
 .js .flip{display:grid;perspective:1400px}
 .js .flip>.face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s cubic-bezier(.2,.75,.25,1);transform-style:preserve-3d}
 .js .front{transform:rotateY(0);cursor:pointer;display:flex;flex-direction:column;justify-content:center}
 .js .back{transform:rotateY(180deg);background:var(--card);display:flex;flex-direction:column;justify-content:center;padding:4px 2px}
 .js .flip.on .front{transform:rotateY(-180deg)}
 .js .flip.on .back{transform:rotateY(0)}
 .js .flip:not(.on) .back,.js .flip.on .front{pointer-events:none;visibility:hidden;transition:transform .6s cubic-bezier(.2,.75,.25,1),visibility 0s .3s}
 .js .flip.on .back,.js .flip:not(.on) .front{visibility:visible;transition:transform .6s cubic-bezier(.2,.75,.25,1),visibility 0s .3s}
 .js .turn{display:inline-block}
 .js .unturn{display:inline-flex}
 .js .nojs-sep{margin-top:0}
 @media (hover:hover) and (pointer:fine){
  .js .turn .t{display:none}.js .turn .h{display:inline}
  .js .unturn{display:none}
  .js .tool:hover .flip .front{transform:rotateY(-180deg);pointer-events:none;visibility:hidden}
  .js .tool:hover .flip .back{transform:rotateY(0);pointer-events:auto;visibility:visible}
 }
}
.videos{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.videos h3{margin:0 0 9px;font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.reel{list-style:none;margin:0 -16px;padding:0 16px 4px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel li{flex:none;width:130px;scroll-snap-align:start}
.reel li>a{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--card2);text-decoration:none;color:#fff}
.reel img{display:block;width:100%;height:100%;object-fit:cover}
.reel li>a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(14,22,48,.78))}
.reel .play{position:absolute;right:7px;top:7px;z-index:1;width:26px;height:26px;border-radius:50%;background:var(--iris);display:grid;place-items:center;color:#fff;box-shadow:0 2px 8px rgba(14,22,48,.3)}
.reel .play svg{width:11px;height:11px;margin-left:1px}
.reel .cap{position:absolute;left:8px;right:8px;bottom:7px;z-index:1;font-size:12px;font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plats{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px}
.plats a{font-size:11px;font-weight:600;color:var(--soft);padding:2px 6px;border-radius:7px;background:var(--card2);border:1px solid var(--line);text-decoration:none}
.empty{display:none;max-width:640px;margin:10px auto;text-align:center;color:var(--soft);padding:34px 16px;font-size:15px;background:var(--card);border:1px dashed var(--line);border-radius:18px}
.empty.on{display:block}
footer{max-width:640px;margin:34px auto 0;padding:22px 2px 44px;border-top:1px solid var(--line);font-size:13px;color:var(--soft)}
footer p{margin:0 0 8px}
footer b{color:var(--ink);font-weight:650}
footer nav{display:flex;gap:18px;margin-top:12px}
footer nav a{font-weight:650;color:var(--ink);text-underline-offset:3px}
/* Newsletter */
.nl{max-width:640px;margin:30px auto 0;padding:22px 18px 20px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.nl::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--iris-bright),var(--iris),var(--iris-dark))}
.nl h2{margin:0 0 4px;font-size:21px;letter-spacing:-.3px}
.nl .lead{margin:0 0 16px;color:var(--soft);font-size:15px}
.nl fieldset{border:0;margin:0 0 16px;padding:0}
.nl legend{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;padding:0}
.nl legend span{font-weight:500;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:8px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--card2);color:var(--soft);transition:all .15s}
.chips span::before{content:"+";font-weight:700;color:var(--mute)}
.chips input:checked+span{background:var(--iris-soft);border-color:var(--iris);color:var(--iris-deep)}
.chips input:checked+span::before{content:"✓";color:var(--iris)}
.chips input:focus-visible+span{box-shadow:0 0 0 4px var(--iris-soft)}
.nl .row{display:flex;gap:8px}
.nl input[type=email]{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--card2);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;outline:none}
.nl input[type=email]:focus{border-color:var(--iris);box-shadow:0 0 0 4px var(--iris-soft)}
.nl button{flex:none;font:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--iris);border:0;border-radius:14px;padding:12px 18px;cursor:pointer}
.nl button:hover{background:var(--iris-deep)}
.nl button[disabled]{opacity:.55;cursor:not-allowed}
.nl .fine{margin:10px 0 0;font-size:12px;color:var(--mute)}
.nl .fine a{color:var(--soft)}
.nl .pv{display:inline-block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#5B3B00;background:#FFF0CC;border-radius:6px;padding:2px 7px}
@media (max-width:420px){.nl .row{flex-direction:column}.nl button{width:100%}}
@media (min-width:720px){
 header.profile{padding:52px 0 8px}
 .avatar{width:120px;height:120px}
 .profile h1{font-size:28px}.profile .claim{font-size:17.5px;max-width:36ch}
 .search{margin-inline:auto;padding-inline:0}
 .tools,.disclosure,.search,.meta,.empty,.nl,footer{max-width:680px}
 .tools{gap:18px}
 .tool{padding:20px}
 .cv-logo{height:96px}.cv-logo img{height:40px}
 .reel{margin:0;padding:0 0 4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Rechtsseiten */
.legal{max-width:720px;margin:0 auto;padding:28px 16px 48px}
.legal h1{font-size:26px;margin:16px 0 8px}.legal h2{font-size:18px;margin:26px 0 6px}
.legal .back{font-weight:700;text-decoration:none;color:var(--iris-deep)}
.legal footer{max-width:none}
.todo{background:#FFF0CC;color:#5B3B00;border-radius:6px;padding:0 5px;font-weight:700}