:root{ --forest-950:#0a130f; --forest-900:#0f1c15; --forest-800:#182a20; --forest-700:#22392c; --paper:#f4f1e6; --paper-dim:#d9d4c2; --lime:#c8f169; --lime-dim:#9fce4a; --amber:#ff8a3d; --mist:#8fb39e; --line: rgba(244,241,230,0.14); --font-display: 'Fraunces', serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --ease: cubic-bezier(.16,.8,.24,1); /* ---------- Zeiger: eine kleine Taschenlampe ---------- * Passend zum Lichtkegel, der dem Cursor ohnehin folgt (.page-glow), haelt * man jetzt auch die Lampe selbst in der Hand. Der Griff ist bewusst leicht * krumm gezeichnet (Q-Kurven statt Geraden), die Strahlen sind * unterschiedlich lang – im selben handgemachten Ton wie die Jahresringe. * * Kopf und Griff sind gleich breit, ein durchgehender Stab. Getrennt werden * sie nur ueber die Farbe: vorne das Licht, hinten das Gehaeuse. * * Jede Form steht zweimal drin: erst dick in Waldschwarz als Kontur, dann * duenner in Limette darueber. Ohne die Kontur verschwaende der helle Zeiger * auf der limettenen CTA-Flaeche. * * Der Griffpunkt (3 3) sitzt an der Spitze des Lichts – dort klickt es, dort * steht auch der Kegel. Zwei Fassungen: ruhend und, ueber allem Anklickbaren, * eingeschaltet (heller, ein Strahl mehr, ein Hauch Schein). */ --cursor-torch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Cpath%20d%3D%22M13.2%2012.6%20Q15.2%2014.6%2017.2%2017.0%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%229.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.0%2018.8%20Q23.4%2022.6%2027.2%2027.8%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%229.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.8%208.4%20Q6.2%205.8%203.4%203.2%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11.6%207.2%20Q10.6%204.8%209.8%202.4%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.4%2011.4%20Q4.9%2010.2%202.5%209.4%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.2%2012.6%20Q15.2%2014.6%2017.2%2017.0%22%20fill%3D%22none%22%20stroke%3D%22%23b3cc79%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.0%2018.8%20Q23.4%2022.6%2027.2%2027.8%22%20fill%3D%22none%22%20stroke%3D%22%23d9d4c2%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.8%208.4%20Q6.2%205.8%203.4%203.2%22%20fill%3D%22none%22%20stroke%3D%22%23b3cc79%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11.6%207.2%20Q10.6%204.8%209.8%202.4%22%20fill%3D%22none%22%20stroke%3D%22%23b3cc79%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.4%2011.4%20Q4.9%2010.2%202.5%209.4%22%20fill%3D%22none%22%20stroke%3D%22%23b3cc79%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 3; --cursor-torch-on: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%3E%3Ccircle%20cx%3D%226.4%22%20cy%3D%226.4%22%20r%3D%226.2%22%20fill%3D%22%23b3cc79%22%20opacity%3D%22.2%22%2F%3E%3Cpath%20d%3D%22M13.2%2012.6%20Q15.2%2014.6%2017.2%2017.0%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%229.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.0%2018.8%20Q23.4%2022.6%2027.2%2027.8%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%229.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.8%208.4%20Q6.2%205.8%203.4%203.2%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11.6%207.2%20Q10.6%204.8%209.8%202.4%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.4%2011.4%20Q4.9%2010.2%202.5%209.4%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.4%209.8%20Q7.6%207.4%204.6%205.2%22%20fill%3D%22none%22%20stroke%3D%22%230a130f%22%20stroke-width%3D%223.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.2%2012.6%20Q15.2%2014.6%2017.2%2017.0%22%20fill%3D%22none%22%20stroke%3D%22%23d1e0af%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M19.0%2018.8%20Q23.4%2022.6%2027.2%2027.8%22%20fill%3D%22none%22%20stroke%3D%22%23d9d4c2%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.8%208.4%20Q6.2%205.8%203.4%203.2%22%20fill%3D%22none%22%20stroke%3D%22%23d1e0af%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11.6%207.2%20Q10.6%204.8%209.8%202.4%22%20fill%3D%22none%22%20stroke%3D%22%23d1e0af%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M7.4%2011.4%20Q4.9%2010.2%202.5%209.4%22%20fill%3D%22none%22%20stroke%3D%22%23d1e0af%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.4%209.8%20Q7.6%207.4%204.6%205.2%22%20fill%3D%22none%22%20stroke%3D%22%23d1e0af%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 3; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--forest-950); color:var(--paper); font-family:var(--font-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; cursor:var(--cursor-torch), auto; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{list-style:none;} button{font-family:inherit;background:none;border:none;color:inherit;} /* Ueberall dort, wo etwas passiert, geht die Lampe an. Der Block steht bewusst NACH den Grundregeln oben – sonst gaebe der spaetere button{cursor:pointer} bei gleicher Spezifitaet wieder die Systemhand zurueck. */ a[href], button, summary, label[for], [role="button"], .spine{ cursor:var(--cursor-torch-on), pointer; } /* In Eingabefeldern bleibt der Textbalken – dort will man setzen, nicht leuchten. */ input, textarea, select{cursor:auto;} input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"]{ cursor:var(--cursor-torch-on), pointer; } [disabled], .is-disabled{cursor:not-allowed;} ::selection{background:var(--lime);color:var(--forest-950);} :focus-visible{outline:2px solid var(--lime);outline-offset:3px;} .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:18px;height:1px; background:var(--lime); display:inline-block; } /* ---------- reveal ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{opacity:1;transform:translateY(0);} /* ================= NAV ================= */ /* Ueber die ID, NICHT ueber das Element `header`. Der Entwurf hatte genau ein
auf der Seite; im Theme gibt es sieben. `page.php`, `single.php`, `archive.php`, `index.php` und `404.php` setzen ihren Titelblock jeweils als
. Die Elementregel machte daraus ein zweites `position:fixed; top:0; left:0` – die Ueberschrift klebte oben links im Eck und lag ueber der Kopfleiste, waehrend der Rest der Seite ordentlich im Rahmen stand. Genau dieses Bild. */ #siteHeader{ position:fixed; top:0;left:0;right:0; z-index:200; padding:22px 0; transition:padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); border-bottom:1px solid transparent; } #siteHeader.scrolled{ padding:12px 0; background:rgba(10,19,15,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } /* ---------- WordPress-Werkzeugleiste ---------- Angemeldet blendet WordPress oben eine Leiste ein und schiebt dafuer um deren Hoehe nach unten. Feststehende Elemente kennen diesen Rand aber nicht: die Kopfleiste blieb bei top:0 und verschwand zur Haelfte hinter der Leiste. Sie und das Vollbildmenue ruecken deshalb selbst nach. Die Hoehe liefert WordPress als eigene Variable mit; die Zahl dahinter ist nur der Rueckfall, falls eine aeltere Fassung sie nicht setzt. */ body.admin-bar #siteHeader, body.admin-bar .menu-overlay{ top: var(--wp-admin--admin-bar--height, 32px); } body.admin-bar .hero{ min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); } @media screen and (max-width:782px){ /* Schmal steht die Leiste nicht fest, sondern scrollt mit weg. Sobald die Seite laeuft (ab 40px, dort greift .scrolled), darf die Kopfleiste also wieder ganz nach oben – sonst klaffte dauerhaft eine Luecke. */ body.admin-bar #siteHeader, body.admin-bar .menu-overlay{ top: var(--wp-admin--admin-bar--height, 46px); } body.admin-bar #siteHeader.scrolled{ top:0; } } nav.wrap{ display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex;align-items:center;gap:14px; font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:.01em; } /* Der Textblock neben dem Zeichen: zwei Zeilen, **eine** linke Kante. Beide Zeilen sind Bloecke im selben Kasten und beginnen damit zwangslaeufig an derselben Kante – der Einzug zum Zeichen haengt an `gap`, an einer Zahl also, und nicht an Schriftmetriken. Die eigene Zeilenhoehe ist der eigentliche Punkt: Ohne sie erbt der Name die Vorgabe „normal", und Fraunces bringt dort reichlich Luft mit – der Block fiel dadurch weit auseinander. */ .brand > span:not(.mark){ display:block; line-height:1.08; } .brand .mark{ width:40px;height:40px; border-radius:10px; background:var(--paper); display:grid;place-items:center; flex-shrink:0; padding:3px; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); } .brand .mark-img{ width:100%;height:100%; object-fit:contain; filter:brightness(0) saturate(100%); opacity:.88; } .brand small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:10px; /* Ohne eigene Zeilenhoehe legt die Unterzeile ihre halbe Zeilenschaltung oben drauf – genau die Luft, die hier weg soll. Der Abstand steht statt dessen als eine einzige, ablesbare Zahl im Rand. */ line-height:1; letter-spacing:.1em; color:var(--mist); text-transform:uppercase; margin-top:2px; } .nav-right{display:flex;align-items:center;gap:14px;} .nav-cta{ padding:11px 22px; background:var(--lime); color:var(--forest-950); border-radius:100px; font-size:14px; font-weight:700; transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(200,241,105,.5);} .burger{ width:48px;height:48px; position:relative; border-radius:50%; border:1px solid var(--line); background:rgba(244,241,230,0.04); transition:background .3s, border-color .3s, transform .3s var(--ease); z-index:400; } .burger:hover{background:rgba(200,241,105,0.12);border-color:var(--lime);transform:scale(1.06);} .burger span{ position:absolute;left:14px;right:14px;height:2px;background:var(--paper); border-radius:2px; transition:transform .35s var(--ease), opacity .25s, background .3s; } .burger span:nth-child(1){top:17px;} .burger span:nth-child(2){top:23px;} .burger span:nth-child(3){top:29px;} .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* ---------- fullscreen menu overlay ---------- */ .menu-overlay{ position:fixed; inset:0; z-index:300; background: radial-gradient(ellipse 800px 500px at 85% 0%, rgba(200,241,105,0.08), transparent 60%), var(--forest-900); clip-path:circle(0% at calc(100% - 66px) 46px); transition:clip-path .7s var(--ease); overflow:hidden; visibility:hidden; } .menu-overlay.open{ clip-path:circle(150% at calc(100% - 66px) 46px); visibility:visible; } .menu-inner{ height:100%; display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:center; padding-top:80px; padding-bottom:120px; } .menu-main{display:flex;flex-direction:column;} .menu-link{ display:flex; align-items:baseline; gap:22px; padding:8px 0; opacity:0; transform:translateY(34px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .menu-overlay.open .menu-link{opacity:1;transform:translateY(0);} .menu-overlay.open .menu-link:nth-child(1){transition-delay:.10s;} .menu-overlay.open .menu-link:nth-child(2){transition-delay:.16s;} .menu-overlay.open .menu-link:nth-child(3){transition-delay:.22s;} .menu-overlay.open .menu-link:nth-child(4){transition-delay:.28s;} .menu-overlay.open .menu-link:nth-child(5){transition-delay:.34s;} .menu-overlay.open .menu-link:nth-child(6){transition-delay:.40s;} .menu-overlay.open .menu-link:nth-child(7){transition-delay:.46s;} .menu-overlay.open .menu-link:nth-child(8){transition-delay:.52s;} .menu-num{ font-family:var(--font-mono); font-size:12px; color:var(--mist); width:26px; flex-shrink:0; transition:color .3s; } .menu-word{ font-family:var(--font-display); font-size:clamp(30px, 4.6vw, 58px); font-weight:600; line-height:1.12; color:var(--paper-dim); position:relative; transition:color .3s var(--ease), transform .3s var(--ease), font-style .3s; } .menu-link:hover .menu-word, .menu-link:focus-visible .menu-word{ color:var(--lime); font-style:italic; transform:translateX(14px); } .menu-link:hover .menu-num{color:var(--lime);} .menu-ext{ font-family:var(--font-mono); font-size:.45em; vertical-align:super; color:var(--mist); font-style:normal; } .menu-link:hover .menu-ext{color:var(--lime);} .menu-side{ display:flex; flex-direction:column; gap:26px; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease) .4s, transform .6s var(--ease) .4s; } .menu-overlay.open .menu-side{opacity:1;transform:translateY(0);} .menu-side-block h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; } .menu-side-block p{font-size:14.5px;color:var(--paper-dim);line-height:1.7;} .menu-side-block a{transition:color .2s;} .menu-side-block a:hover{color:var(--lime);} .menu-side-badge{ font-family:var(--font-mono); font-size:11px; color:var(--mist); letter-spacing:.05em; border-top:1px solid var(--line); padding-top:18px; } .menu-rings{ position:absolute; right:-160px; bottom:-200px; width:640px;height:640px; pointer-events:none; perspective:900px; opacity:0; transform:scale(.85); transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; } .menu-overlay.open .menu-rings{opacity:1;transform:scale(1);} .menu-rings svg{ width:100%;height:100%; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); transform-style:preserve-3d; animation:rings-rotate 120s linear infinite; } @keyframes rings-rotate{from{rotate:0deg;}to{rotate:360deg;}} .ring{ fill:none; stroke:rgba(200,241,105,0.13); stroke-width:1; transition:stroke .3s; } .ring-core{fill:var(--lime);opacity:.5;} .ring.pulse{ animation:ring-pulse 1.4s var(--ease) forwards; animation-delay:calc(var(--i) * 55ms); } .ring.pulse-solo{ animation:ring-pulse 2s var(--ease) forwards; } @keyframes ring-pulse{ 0%{stroke:rgba(200,241,105,0.13);stroke-width:1;} 30%{stroke:rgba(200,241,105,0.75);stroke-width:2.2;} 100%{stroke:rgba(200,241,105,0.13);stroke-width:1;} } body.menu-open{overflow:hidden;} /* ---------- große Jahresring-Scheibe im Seitenhintergrund ---------- */ .page-rings{ position:fixed; z-index:0; pointer-events:none; } .page-rings svg{animation:rings-rotate 180s linear infinite;} .rings-left svg{animation-duration:220s;animation-direction:reverse;} .rings-right{ right:-260px; top:50%; width:760px;height:760px; margin-top:-380px; opacity:.9; } .ring-wolf{ position:absolute; left:50%;top:50%; width:190px; transform:translate(-50%, -52%); filter:brightness(0) invert(1); opacity:0; transition:opacity .9s var(--ease); pointer-events:none; } .ring-wolf.wolf-sm{width:150px;} .ring-wolf.wolf-menu{width:170px;} .rings-left{ left:-300px; bottom:-280px; width:620px;height:620px; opacity:.7; } main, footer, .marquee-band{position:relative;z-index:1;} .page-rings svg{width:100%;height:100%;display:block;} .page-ring{ fill:none; stroke:rgba(200,241,105,0.06); stroke-width:1; } .page-ring.pulse-solo{ animation:page-ring-pulse 2.4s var(--ease) forwards; } @keyframes page-ring-pulse{ 0%{stroke:rgba(200,241,105,0.06);stroke-width:1;} 35%{stroke:rgba(200,241,105,0.42);stroke-width:1.8;} 100%{stroke:rgba(200,241,105,0.06);stroke-width:1;} } body.menu-open .page-rings{opacity:0;transition:opacity .4s;} @media (max-width:900px){ .rings-right{right:-420px;opacity:.55;} .rings-left{display:none;} } /* ================= HERO ================= */ .hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; overflow:hidden; } .hero-bg{ position:absolute;inset:0; z-index:0; background: radial-gradient(ellipse 900px 500px at 80% -10%, rgba(200,241,105,0.12), transparent 60%), radial-gradient(ellipse 700px 500px at 10% 10%, rgba(255,138,61,0.08), transparent 60%), linear-gradient(180deg, var(--forest-950) 0%, var(--forest-900) 100%); } .hero-topo{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .hero-topo svg{ width:100%;height:100%; display:block; } .hero-topo path{ fill:none; stroke:rgba(200,241,105,0.10); stroke-width:1; } .hero-topo path.pulse{ animation:topo-pulse 2.6s var(--ease) forwards; } @keyframes topo-pulse{ 0%{stroke:rgba(200,241,105,0.10);stroke-width:1;} 35%{stroke:rgba(200,241,105,0.65);stroke-width:1.8;} 100%{stroke:rgba(200,241,105,0.10);stroke-width:1;} } .hero-topo g{transform-origin:center;} .topo-a{animation:topo-drift-a 46s ease-in-out infinite alternate;} .topo-b{animation:topo-drift-b 58s ease-in-out infinite alternate;} .topo-c{animation:topo-drift-c 52s ease-in-out infinite alternate;} @keyframes topo-drift-a{from{transform:translate(0,0) rotate(0deg);}to{transform:translate(-28px,16px) rotate(1.2deg);}} @keyframes topo-drift-b{from{transform:translate(0,0) rotate(0deg);}to{transform:translate(24px,-14px) rotate(-1.4deg);}} @keyframes topo-drift-c{from{transform:translate(0,0) rotate(0deg);}to{transform:translate(-16px,-20px) rotate(0.9deg);}} .page-glow{ position:fixed; inset:auto; width:560px;height:560px; left:0;top:0; transform:translate(60vw, 20vh); border-radius:50%; background:radial-gradient(circle, rgba(200,241,105,0.13) 0%, rgba(200,241,105,0.04) 38%, transparent 68%); mix-blend-mode:screen; transition:transform .9s cubic-bezier(.2,.7,.3,1), opacity .5s; will-change:transform; pointer-events:none; z-index:2; opacity:1; } body.menu-open .page-glow{opacity:0;} @media (hover:none){.page-glow{display:none;}} .hero .wrap{position:relative;z-index:2;} .hero-headline{ font-family:var(--font-display); font-weight:600; font-size:clamp(40px, 6.4vw, 92px); line-height:1.02; letter-spacing:-.01em; max-width:920px; margin-top:22px; } .hero-headline em{ font-style:italic; font-weight:500; color:var(--lime); } .hero-sub{ margin-top:26px; max-width:520px; font-size:17px; line-height:1.6; color:var(--paper-dim); } .hero-actions{ margin-top:38px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .btn-primary{ padding:15px 28px; background:var(--lime); color:var(--forest-950); border-radius:100px; font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(200,241,105,.45);} .btn-ghost{ padding:15px 26px; border:1px solid var(--line); border-radius:100px; font-weight:600; font-size:14.5px; transition:border-color .3s, background .3s; } .btn-ghost:hover{border-color:var(--paper-dim);background:rgba(244,241,230,0.05);} .hero-scroll{ position:absolute; bottom:36px;right:32px; z-index:2; display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist); } .hero-scroll .dot{ width:6px;height:6px;border-radius:50%;background:var(--lime); animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}} /* ================= MARQUEE ================= */ .marquee-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--forest-900); padding:18px 0; overflow:hidden; position:relative; z-index:3; } /* Das Band besteht aus zwei gleichen Haelften; die Bewegung um -50 % setzt die zweite genau dort ab, wo die erste stand – daher der nahtlose Lauf. Der Abstand zwischen den Haelften darf deshalb **nicht** als `gap` am Band stehen: Er zaehlt zur Gesamtbreite, gehoert aber keiner Haelfte, und -50 % landete um seine halbe Breite daneben. Bei jedem Durchlauf sprang das Band um 26px. Der Abstand sitzt jetzt als Innenrand in den Haelften selbst und wandert damit korrekt mit. */ .marquee-track{ display:flex; width:max-content; animation:scroll-left 28s linear infinite; } .marquee-half{ display:flex; align-items:center; gap:52px; padding-right:52px; } @keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}} .marquee-track span{ font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--mist); text-transform:uppercase; white-space:nowrap; /* Das gap haelt die Raute (::after) auf Abstand zum eigenen Wort. */ display:flex;align-items:center;gap:52px; } .marquee-track span::after{content:'◆';color:var(--amber);font-size:9px;} /* ================= SECTION shared ================= */ section{padding:120px 0;position:relative;} .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap; } .section-title{ font-family:var(--font-display); font-size:clamp(30px,3.6vw,48px); font-weight:600; line-height:1.1; max-width:600px; margin-top:14px; } .section-note{ max-width:340px; font-size:14.5px; color:var(--mist); line-height:1.6; } /* ================= PILLARS ================= */ .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; } .pillar{ background:var(--forest-950); padding:40px 34px; transition:background .35s var(--ease); } .pillar:hover{background:var(--forest-900);} .pillar .num{ font-family:var(--font-mono); font-size:12px; color:var(--lime); margin-bottom:26px; display:block; } .pillar h3{ font-family:var(--font-display); font-size:23px; font-weight:600; margin-bottom:12px; } .pillar p{ font-size:14.5px; color:var(--paper-dim); line-height:1.65; } /* ================= PORTFOLIO SHELF ================= */ .shelf{ display:flex; gap:14px; height:460px; align-items:stretch; } .spine{ position:relative; flex:0 0 100px; border-radius:16px; cursor:var(--cursor-torch-on), pointer; overflow:hidden; transition:flex-basis .55s var(--ease), background .55s var(--ease), padding .55s var(--ease); background:var(--forest-800); border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; padding:26px 18px; } .shelf:hover .spine{flex-basis:90px;} /* Aufgeklappt zieht der Rand auf 26px nach – dieselbe Kante, an der auch der Text der aufgeklappten Karte beginnt. Die Nummer steht damit exakt ueber der Kennzeichnung statt 8px daneben. Zusammengeklappt bleiben es 18px, sonst wird die schmale Spalte zu eng. */ .spine:hover, .spine.active{ flex-basis:340px !important; background:var(--forest-700); padding-left:26px; padding-right:26px; } .spine .spine-index{ font-family:var(--font-mono); font-size:11px; color:var(--lime); } .spine .spine-title{ font-family:var(--font-display); font-size:19px; font-weight:600; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; transition:opacity .3s; } .spine.active .spine-title, .spine:hover .spine-title{opacity:0;position:absolute;pointer-events:none;} /* Die aufgeklappte Karte liegt als eigene Ebene ueber der Spalte (`inset:0`) und weiss deshalb nichts von der Nummer darunter. Bei 30px Rand landete die Kennzeichnung genau auf der „03" – beide standen uebereinander. Der obere Rand haelt jetzt Platz fuer die Nummer frei: 26px Rand + rund 16px Zeile, dazu Luft. */ .spine-expand{ position:absolute;inset:0; padding:52px 26px 30px; opacity:0; transform:translateY(10px); transition:opacity .35s var(--ease) .1s, transform .35s var(--ease) .1s; display:flex; flex-direction:column; } .spine.active .spine-expand, .spine:hover .spine-expand{opacity:1;transform:translateY(0);} .spine-expand .tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--lime); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; } .spine-expand h4{ font-family:var(--font-display); font-size:25px; font-weight:600; margin-bottom:12px; } .spine-expand p{ font-size:14px; color:var(--paper-dim); line-height:1.6; flex:1; } .spine-expand .go{ margin-top:16px; font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; color:var(--paper); display:inline-flex; align-items:center; gap:8px; padding-bottom:2px; border-bottom:1px solid var(--paper); width:fit-content; transition:gap .25s, color .25s, border-color .25s; } .spine-expand .go:hover{gap:12px;color:var(--lime);border-color:var(--lime);} /* ================= VALUES ================= */ .values{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; } .value-list{display:flex;flex-direction:column;gap:0;} .value-item{ padding:30px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:56px 1fr; gap:22px; } .value-item:last-child{border-bottom:1px solid var(--line);} .value-icon{ width:52px;height:52px; border-radius:14px; background:var(--forest-800); display:grid;place-items:center; font-size:20px; } .value-item h4{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:8px; } .value-item p{ font-size:14.5px; color:var(--mist); line-height:1.65; } .facts-card{ background:var(--forest-900); border:1px solid var(--line); border-radius:22px; padding:40px; position:sticky; top:120px; } .facts-card .fc-label{ font-family:var(--font-mono); font-size:11px; color:var(--lime); text-transform:uppercase; letter-spacing:.1em; margin-bottom:26px; } .fact-row{ display:flex;justify-content:space-between; padding:16px 0; border-top:1px solid var(--line); font-size:14px; } .fact-row:first-of-type{border-top:none;} .fact-row span:first-child{color:var(--mist);} .fact-row span:last-child{font-family:var(--font-mono);text-align:right;} /* ================= TESTIMONIALS ================= */ .testi-outer{overflow:hidden;position:relative;} .testi-outer::before, .testi-outer::after{ content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2; pointer-events:none; } .testi-outer::before{left:0;background:linear-gradient(90deg, var(--forest-950), transparent);} .testi-outer::after{right:0;background:linear-gradient(270deg, var(--forest-950), transparent);} /* Die Laufschrift ist ein echter Scroll-Container statt einer CSS-Animation: nur so laesst sich per Wisch/Drag selbst nach links und rechts blaettern. Den Dauerlauf uebernimmt main.js, es scrollt den Container Bild fuer Bild weiter und haelt an, sobald jemand selbst anfasst. */ .testi-scroller{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* alte Edge */ -webkit-overflow-scrolling:touch; /* Schwung auf iOS */ overscroll-behavior-x:contain; /* kein Zurueckwischen der Seite */ cursor:grab; } .testi-scroller::-webkit-scrollbar{display:none;} /* Beim Ziehen mit der Maus darf nicht nebenbei Text markiert werden. */ .testi-scroller.dragging{cursor:grabbing;user-select:none;} .testi-scroller:focus-visible{outline:2px solid var(--lime);outline-offset:4px;} .testi-track{ display:flex; gap:20px; width:max-content; } /* ---------- Blaetterknoepfe als kleine Jahresring-Scheiben ---------- Die Ringe sind absichtlich krumm (siehe Kommentar im Markup), der Pfeil ist ein einzelner, leicht schiefer Strich. Beide Knoepfe zeigen dieselben Ringe, stehen aber unterschiedlich gedreht – so wirken sie wie zwei Scheiben vom selben Stamm und nicht wie ein gespiegeltes Icon-Paar. */ .testi-nav{ position:absolute; top:50%; z-index:3; width:52px;height:52px; display:grid;place-items:center; padding:0; border-radius:50%; color:var(--mist); background:rgba(10,19,15,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transform:translateY(-50%); transition:color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); } .testi-prev{left:12px;} .testi-next{right:12px;} .testi-nav svg{width:44px;height:44px;display:block;overflow:visible;} .testi-nav .nav-rings{ /* Drehpunkt in Nutzereinheiten des viewBox – die Mitte der Scheibe. Ueber transform-box:center liefe es bei manchen Browsern in die Ecke. */ transform-box:view-box; transform-origin:22px 22px; transition:rotate 1.2s var(--ease); } .testi-prev .nav-rings{rotate:-14deg;} .testi-next .nav-rings{rotate:106deg;} .nav-ring{fill:none;stroke:currentColor;stroke-width:1;} .nav-ring-1{opacity:.30;} .nav-ring-2{opacity:.20;} .nav-ring-3{opacity:.14;} .nav-arrow{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .testi-nav:hover, .testi-nav:focus-visible{ color:var(--lime); background:rgba(10,19,15,0.82); transform:translateY(-50%) scale(1.07); } /* Beim Anfassen dreht sich die Scheibe ein Stueck weiter – wie ein Stamm, den man kurz andreht. Jeder Knopf in seine eigene Richtung. */ .testi-prev:hover .nav-rings, .testi-prev:focus-visible .nav-rings{rotate:-46deg;} .testi-next:hover .nav-rings, .testi-next:focus-visible .nav-rings{rotate:142deg;} .testi-nav:active{transform:translateY(-50%) scale(.96);} .testi-nav:hover .nav-ring-1, .testi-nav:focus-visible .nav-ring-1{opacity:.65;} .testi-nav:hover .nav-ring-2, .testi-nav:focus-visible .nav-ring-2{opacity:.45;} .testi-nav:hover .nav-ring-3, .testi-nav:focus-visible .nav-ring-3{opacity:.3;} .testi-card{ width:340px; background:var(--forest-900); border:1px solid var(--line); border-radius:18px; padding:30px; flex-shrink:0; } .stars{color:var(--amber);font-size:13px;letter-spacing:2px;margin-bottom:16px;} .testi-card p{font-size:14.5px;line-height:1.65;color:var(--paper-dim);min-height:96px;} .testi-foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; color:var(--mist); } /* ================= CTA BAND ================= */ .cta-band{ background:linear-gradient(120deg, var(--lime) 0%, #e7f4ab 100%); color:var(--forest-950); border-radius:28px; padding:70px 60px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; } .cta-band h2{ font-family:var(--font-display); font-size:clamp(28px,3.4vw,42px); font-weight:600; max-width:520px; line-height:1.1; } .cta-band .btn-primary{background:var(--forest-950);color:var(--paper);} .cta-band .btn-primary:hover{box-shadow:0 14px 30px -10px rgba(10,19,15,.4);} /* ================= FOOTER ================= */ footer{border-top:1px solid var(--line);padding:80px 0 30px;} .foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; } .foot-brand p{color:var(--mist);font-size:14px;line-height:1.6;margin-top:16px;max-width:280px;} .foot-col h5{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mist); margin-bottom:18px; } .foot-col a{ display:block; font-size:14px; color:var(--paper-dim); padding:6px 0; transition:color .2s; width:fit-content; } .foot-col a:hover{color:var(--lime);} .foot-bottom{ border-top:1px solid var(--line); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--mist); } /* ================= RESPONSIVE ================= */ @media (max-width:900px){ .nav-cta{display:none;} .menu-inner{grid-template-columns:1fr;gap:34px;align-content:start;padding-top:110px;overflow-y:auto;} .menu-side{padding-bottom:100px;} .pillars{grid-template-columns:1fr;} .values{grid-template-columns:1fr;} .facts-card{position:static;} .foot-top{grid-template-columns:1fr 1fr;} .shelf{height:auto;flex-direction:column;} .spine{flex-basis:auto !important;height:76px;flex-direction:row;align-items:center;} .spine .spine-title{writing-mode:horizontal-tb;transform:none;} /* Am Telefon liegt die Spalte quer, die Nummer steht deshalb mittig links. Aufgeklappt saesse sie damit mitten im Text – sie wandert nach oben, wo auch am Rechner ihr Platz freigehalten wird. */ .spine.active{height:280px;align-items:flex-start;} .spine.active .spine-title{display:none;} .cta-band{padding:44px 28px;} } @media (max-width:560px){ .wrap{padding:0 20px;} section{padding:80px 0;} .testi-card{width:270px;} /* Auf dem schmalen Schirm verdeckten die 120px breiten Verlaeufe die halbe Karte – hier reicht ein Hauch, damit der Rand weich bleibt. */ .testi-outer::before, .testi-outer::after{width:40px;} .testi-nav{width:44px;height:44px;} .testi-nav svg{width:38px;height:38px;} .testi-prev{left:4px;} .testi-next{right:4px;} } @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;} } /* ========================================================================= * Robustheit gegen Elementors globale Kit-Styles (nachträglich angehängt). * * Elementor lädt seitenweit CSS, das ELEMENT-Farben auf h1–h6 und a setzt. * Der Designentwurf oben verlässt sich bei einigen Überschriften auf Vererbung * von body; dadurch überschrieb Elementor sie (Headline dunkelblau). Hier wird * exakt dieselbe Palette explizit und mit Klassen-Spezifität erneut gesetzt – * die Optik bleibt identisch, gewinnt aber gegen Elementors Element-Regeln. * Betrifft nur die handgebauten Bereiche (Kopf, Menü, Startseite via body.home, * Footer); Elementor-Seiteninhalte bleiben unberührt. * ====================================================================== */ /* Seitenhintergrund: nirgends weiß. Gilt für ALLE Seiten, nicht nur die Startseite. Farbe identisch mit body{background:var(--forest-950)} ganz oben, hier aber unüberschreibbar – eine fremde body{...}-Regel, die nach main.css geladen wird, gewinnt sonst über gleiche Spezifität + Ladereihenfolge. Die Container, die Elementor-Seiteninhalte umschließen, gleich mit. */ html, body { background-color: var(--forest-950) !important; } /* Hier stand eine Ausnahme fuer ArtSense (template-kunst.php), solange diese Seite einen weissen Grund hatte. Sie steht jetzt auf dem Hausgrund wie jede andere Seite – die Regel darueber gilt damit wieder ohne Ausnahme. */ /* Die Container darueber NICHT einfaerben, sondern durchsichtig schalten. Weiss kann so trotzdem nirgends entstehen – darunter liegt der dunkle Body. Der Unterschied ist wichtig: mit eigener Deckfarbe verdeckte
die Jahresring-Scheiben, die als position:fixed mit z-index:0 HINTER dem Inhalt liegen. Samt Wolf. Durchsichtig gestellt scheinen sie wieder durch. */ #page, #content, main, .site, .site-content, .elementor, .elementor-section, .elementor-container, .e-con, .e-con-inner { background-color: transparent !important; } /* Ausnahmen: Flächen, die im Entwurf bewusst hell bzw. farbig sind. */ .brand .mark { background: var(--paper) !important; } .cta-band { background: linear-gradient(120deg, var(--lime) 0%, #e7f4ab 100%) !important; } /* Elementors Kit faerbt JEDEN