/* GAST 2026 — Hell und Dunkel nach GL-014, Website-Fassung wie timesaver-ai.com (abgenommen 05.10.2026). Werte aus timesaver-relaunch/theme.css übernommen, Selektoren auf diese Seite zugeschnitten. Am : data-v="dunkel|hell" (Startskript im ), data-s="wechsel" (Bänder im Wechsel), data-h="leicht" (leichtes Hover-Leuchten). Als letzte CSS-Datei laden. */ :root{ --espresso-band:radial-gradient(ellipse 70% 60% at 50% 0%,#5A4314 0%,#2E2312 40%,#1A140C 80%),#1A140C; } /* ═══ Dunkel: Schiefer, Kontrast hoch ═══ */ html[data-v="dunkel"]{ --bg:#2B2C2F; --bg-deep:#232427; --bg-card:#2C2D31; --bg-card-deep:#232427; --bg-box:#36373B; --t1:#FFFFFF; --t2:#E8E4DC; --t3:#C6C0B4; --line-sub:rgba(255,255,255,.10); } /* ═══ Hell: Steingrau, Inhaltskarten weiß ═══ */ html[data-v="hell"]{ --bg:#E7E1D6; --bg-deep:#DDD6C9; --bg-card:#FFFFFF; --bg-card-deep:#F4F1EC; --bg-box:#F4F1EC; --t1:#14110C; --t2:#3A3322; --t3:#5E5544; --gold-lite:#8F6A12; --line:rgba(154,118,17,.32); --line-sub:rgba(20,17,12,.12); } /* Rahmen und Bühnen bleiben in beiden Modi dunkel */ html[data-v="hell"] :is(.panel,.film,.buehne,.formcard){ --t1:#FFFFFF; --t2:#ECE3CC; --t3:#C9BE9E; --gold-lite:#D9AE45; --line-sub:rgba(255,255,255,.10); --bg-box:#2A2318; --bg-card:#2C2D31; --bg-card-deep:#232427; --bg-deep:#232427; --line:rgba(255,255,255,.07); } /* Schrift kräftig: Sora eine Stufe mehr */ html:is([data-v="dunkel"],[data-v="hell"]) :is(h1,h2){font-weight:300} /* Goldschleier hinter den Abschnitten aus, nur das Hero behält ihn (dunkel) */ html:is([data-v="dunkel"],[data-v="hell"]) :is(.glow-l,.glow-r,.glow-t)::before{display:none} /* ═══ Abschnitte im Wechsel ═══ */ html[data-s="wechsel"] main>section{background:var(--bg)} html[data-v="dunkel"][data-s="wechsel"] main>section:nth-of-type(2){background:#2B2C2F} html[data-v="dunkel"][data-s="wechsel"] main>section:nth-of-type(3){background:#35363A} html[data-v="dunkel"][data-s="wechsel"] main>section:nth-of-type(4){background:#232427} html[data-v="dunkel"][data-s="wechsel"] main>section:nth-of-type(5){background:#35363A} html[data-v="dunkel"][data-s="wechsel"] main>section:nth-of-type(6){background:#232427} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(2){background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(3){background:#FFFFFF} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(4){background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(5){background:#FFFFFF} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(6){background:#E7E1D6} html[data-s="wechsel"] main>section:is(:nth-of-type(1),:nth-of-type(7)){background:var(--espresso-band)} /* ═══ Navigation und Fuß ═══ */ html[data-v="dunkel"] .nav{background:rgba(35,36,39,.94);backdrop-filter:saturate(1.2) blur(10px)} html[data-v="hell"] .nav{background:rgba(255,255,255,.90);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid rgba(20,17,12,.08)} html[data-v="dunkel"] footer{background:radial-gradient(ellipse 140% 60% at 50% 0%,#4A3812 0%,#241B0F 50%,#1A140C 100%);border-top:0} html[data-v="hell"] footer{background:#DDD6C9;border-top:1px solid rgba(154,118,17,.25)} /* ═══ Karten: dunkel = Farbkante diagonal, hell = weiß und flach ═══ */ html[data-v="dunkel"] .card, html[data-v="dunkel"] .card:hover,html[data-v="dunkel"] .card:focus-within,html[data-v="dunkel"] .card.is-lit{ background:linear-gradient(135deg, color-mix(in srgb,var(--ac,#C9A03A) 58%,transparent) 0%, color-mix(in srgb,var(--ac,#C9A03A) 19%,transparent) 42%, transparent 74%),#2A2113; border-color:color-mix(in srgb,var(--ac,#C9A03A) 58%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 30px -14px rgba(0,0,0,.70),0 2px 6px rgba(0,0,0,.25), 0 12px 30px -16px color-mix(in srgb,var(--ac,#C9A03A) 35%,transparent); } html[data-v="dunkel"] .card:hover,html[data-v="dunkel"] .card:focus-within,html[data-v="dunkel"] .card.is-lit{ transform:translateY(-2px);border-color:color-mix(in srgb,var(--ac,#C9A03A) 85%,transparent); } /* Videokarte bleibt im Hellen eine dunkle Bühne wie auf der Hauptseite */ html[data-v="hell"] .film{ background:linear-gradient(135deg,rgba(217,174,69,.50) 0%,rgba(217,174,69,.16) 42%,transparent 74%),#2A2113; border-color:rgba(217,174,69,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 44px -10px rgba(30,22,8,.38); } html[data-v="hell"] .film:hover{transform:translateY(-2px);border-color:rgba(217,174,69,.85)} html:is([data-v="dunkel"],[data-v="hell"]) .formcard{ background:linear-gradient(135deg,rgba(201,160,58,.30) 0%,rgba(201,160,58,.10) 42%,transparent 74%),#2A2113; border-color:rgba(201,160,58,.58); } html:is([data-v="dunkel"],[data-v="hell"]) .formcard:hover{transform:translateY(-2px)} html[data-v="hell"] .portrait{box-shadow:0 0 0 1px rgba(20,17,12,.06),0 22px 44px -10px rgba(30,22,8,.30)} /* ═══ Video-Vorschaubild ═══ */ .film-play{overflow:hidden;background:#1A140C;border:0;cursor:pointer;color:#fff} .film-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .film-play::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.10) 0%,rgba(10,8,5,.20) 55%,rgba(10,8,5,.62) 100%);z-index:1} .film-play>*:not(img){position:relative;z-index:2} .film-play .film-icon{width:64px;height:64px;box-shadow:0 10px 30px -8px rgba(0,0,0,.6)} .film-play>span:not(.film-icon){text-shadow:0 1px 8px rgba(0,0,0,.65);font-weight:600} .film-play small{color:#EDE6D4;text-shadow:0 1px 6px rgba(0,0,0,.7)} .film-play>.film-dur{position:absolute;right:12px;bottom:12px;z-index:2;font:500 12px var(--font-mono);padding:3px 8px;border-radius:999px;background:rgba(10,8,5,.72);color:#fff} /* ═══ Umschalter Hell/Dunkel ═══ */ .theme-toggle{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px; background:transparent;border:1px solid var(--line-sub);color:var(--t2);font:500 13px/1 var(--font-body);cursor:pointer; transition:background .2s,color .2s,border-color .2s} .theme-toggle:hover{color:var(--t1);border-color:var(--gold-lite)} .theme-toggle:focus-visible{outline:2px solid var(--gold-lite);outline-offset:2px} .theme-toggle svg{width:16px;height:16px;flex:none} .theme-toggle .tt-sun,html[data-v="hell"] .theme-toggle .tt-moon{display:block} .theme-toggle .tt-moon,html[data-v="hell"] .theme-toggle .tt-sun{display:none} .nav-right{display:flex;align-items:center;gap:8px} @media(max-width:520px){.theme-toggle .tt-lbl{display:none}.theme-toggle{width:38px;padding:0;justify-content:center}} @media (prefers-reduced-motion:reduce){html .card:hover,html .film:hover,html .formcard:hover{transform:none}} /* ═══ Messe: helle Fassung als Standard — alle Bänder hell, nur Grafiken und Videokarte bleiben dunkel ═══ */ html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(1){background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(2){background:#FFFFFF} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(3){background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(4){background:#FFFFFF} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(5){background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(6){background:#FFFFFF} html[data-v="hell"][data-s="wechsel"] main>section:nth-of-type(7){background:#E7E1D6} /* Schlussbühne hell: weiße, flache Karte */ html[data-v="hell"] .final .panel{ --t1:#14110C; --t2:#3A3322; --t3:#5E5544; --gold-lite:#8F6A12; --line:rgba(154,118,17,.32); --bg-card:#FFFFFF; --bg-card-deep:#F4F1EC; background:#FFFFFF;border-color:rgba(20,17,12,.10); box-shadow:0 0 0 1px rgba(20,17,12,.06),0 3px 6px rgba(20,17,12,.06),0 22px 44px -10px rgba(30,22,8,.30); } html[data-v="hell"] .final .panel::before,html[data-v="hell"] .final .panel::after{display:none} /* ═══ Logo statt Textmarke ═══ */ .brand-logo{display:flex;align-items:center;background:none;-webkit-text-fill-color:initial} .brand-logo img{height:34px;width:auto} .brand-logo .logo-d{display:none} html[data-v="hell"] .brand-logo .logo-w{display:none} html[data-v="hell"] .brand-logo .logo-d{display:block} /* ═══ Knöpfe: strahlen, gehen nicht unter ═══ */ .btn{ position:relative;overflow:hidden;font-weight:700;color:#1A140C; background:#EBB93F; box-shadow:inset 0 0 0 1px rgba(255,240,180,.65), 0 10px 26px -8px rgba(212,150,20,.90),0 0 30px rgba(240,190,70,.50); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; } .btn:hover{filter:brightness(1.07);transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,244,196,.85), 0 16px 34px -8px rgba(212,150,20,1),0 0 46px rgba(245,200,80,.75)} .btn::after{content:"";position:absolute;top:-20%;left:-70%;width:38%;height:140%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);transform:skewX(-20deg); animation:btn-shine 3.8s ease-in-out infinite} @keyframes btn-shine{0%,58%{left:-70%}100%{left:140%}} .btn--lg{min-height:64px;font-size:18px;padding:var(--s-4) var(--s-10);border-radius:14px;animation:btn-glow 2.8s ease-in-out infinite} @keyframes btn-glow{ 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,240,180,.65),0 10px 26px -8px rgba(212,150,20,.90),0 0 28px rgba(240,190,70,.45)} 50%{box-shadow:inset 0 0 0 1px rgba(255,240,180,.85),0 14px 34px -8px rgba(212,150,20,1),0 0 52px rgba(245,200,80,.80)}} .btn--lg:hover{animation:none} .btn--nav{font-size:14px} @media (prefers-reduced-motion:reduce){.btn::after{animation:none;display:none}.btn--lg{animation:none}} /* ═══ Hero-Eingabe wie bei Fonio: Website eintragen, ein Knopf ═══ */ .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .hero-form{display:flex;gap:var(--s-3);align-items:stretch;max-width:640px;margin:var(--s-6) 0 0} .hero-form input{flex:1 1 220px;min-width:0;height:64px;padding:0 var(--s-5);border-radius:14px;font:500 16px var(--font-body); color:var(--t1);background:var(--bg-card);border:1.5px solid var(--line-sub);box-shadow:0 1px 0 rgba(255,255,255,.04) inset} html[data-v="hell"] .hero-form input{background:#FFFFFF;border-color:rgba(20,17,12,.18);box-shadow:0 2px 10px -4px rgba(30,22,8,.18)} .hero-form input::placeholder{color:var(--t3);opacity:.85} .hero-form input:focus{outline:2px solid var(--gold-lite);outline-offset:2px;border-color:var(--gold-lite)} .hero-form .btn--lg{flex:0 0 auto;padding:0 var(--s-6);white-space:nowrap;font-size:17px} .hero-hint{margin:var(--s-2) 0 0;color:#B5443A;font-size:14px;font-weight:600} .hero-checks{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-4) 0 0;padding:0;color:var(--t2);font-size:14.5px} .hero-checks li{display:flex;align-items:center;gap:var(--s-2)} .hero-checks svg{width:18px;height:18px;flex:0 0 auto;color:var(--green)} .hero-demo{margin:var(--s-4) 0 0;color:var(--t2);font-size:14.5px} .hero-demo a{color:var(--gold-lite);font-weight:600;text-decoration:underline;text-underline-offset:3px} @media(max-width:640px){.hero-form{flex-direction:column}.hero-form input{flex:0 0 auto}.hero-form .btn--lg{min-height:60px;padding:var(--s-4) var(--s-6);white-space:normal}} /* ═══ Drei Schritte ═══ */ .steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin:var(--s-12) 0 0;padding:0} .steps li{position:relative;padding:var(--s-5) var(--s-5) var(--s-5);border-radius:var(--r-3);background:var(--bg-card);border:1px solid var(--line-sub)} html[data-v="hell"] .steps li{background:#FFFFFF;border-color:rgba(20,17,12,.10);box-shadow:0 0 0 1px rgba(20,17,12,.04),0 3px 6px rgba(20,17,12,.05),0 18px 36px -12px rgba(30,22,8,.22)} html[data-v="dunkel"] .steps li{background:linear-gradient(135deg,rgba(201,160,58,.30) 0%,rgba(201,160,58,.10) 42%,transparent 74%),#2A2113;border-color:rgba(201,160,58,.50)} .steps b{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#EBB93F;color:#1A140C;font:700 16px var(--font-body);margin:0 0 var(--s-3)} .steps h3{margin:0 0 var(--s-2);font:600 17px/1.25 var(--font-body);color:var(--t1)} .steps p{margin:0;font-size:15px;color:var(--t2);max-width:34ch} @media(max-width:820px){.steps{grid-template-columns:1fr}} /* ═══ Fonio-Prinzip: zentrierter Hero, wenig Text, ein Formular ═══ */ .hero-center{display:flex;flex-direction:column;align-items:center;text-align:center} .hero-center h1{max-width:18ch} .hero-center .sub{max-width:none} .hero-form--card{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);width:100%;max-width:560px;margin:var(--s-8) auto 0; padding:var(--s-5);border-radius:20px;background:var(--bg-card);border:1px solid var(--line-sub);text-align:left} html[data-v="hell"] .hero-form--card{background:#FFFFFF;border-color:rgba(20,17,12,.10); box-shadow:0 0 0 1px rgba(20,17,12,.04),0 3px 6px rgba(20,17,12,.05),0 26px 50px -14px rgba(30,22,8,.28)} html[data-v="dunkel"] .hero-form--card{background:linear-gradient(135deg,rgba(201,160,58,.30) 0%,rgba(201,160,58,.10) 42%,transparent 74%),#2A2113;border-color:rgba(201,160,58,.50)} .hero-form--card input{flex:none;width:100%;height:58px;padding:0 var(--s-4);font-size:16px;border-radius:12px} html[data-v="hell"] .hero-form--card input{background:#F7F5F1;border-color:rgba(20,17,12,.14);box-shadow:none} .hero-form--card .hf-wide{grid-column:1 / -1} .hero-form--card .btn--lg{width:100%;margin-top:var(--s-1);justify-content:center;white-space:normal} .hero-center .hero-checks{justify-content:center} .hero-center .steps{width:100%;text-align:left} .center-col{text-align:center} .center-col h2{max-width:22ch;margin-left:auto;margin-right:auto} .testi{max-width:520px;margin:var(--s-8) auto 0;text-align:left} @media(max-width:560px){.hero-form--card{grid-template-columns:1fr;padding:var(--s-4)}.hero-form--card .hf-wide{grid-column:auto}} /* Bänder nach Klassen (statt Reihenfolge) */ html[data-v="hell"][data-s="wechsel"] main>section.band-espresso, html[data-v="hell"][data-s="wechsel"] main>section.band-stone{background:#E7E1D6} html[data-v="hell"][data-s="wechsel"] main>section.band-white{background:#FFFFFF} html[data-v="dunkel"][data-s="wechsel"] main>section.band-espresso{background:var(--espresso-band)} html[data-v="dunkel"][data-s="wechsel"] main>section.band-stone{background:#2B2C2F} html[data-v="dunkel"][data-s="wechsel"] main>section.band-white{background:#35363A}