/* Artcore Startseite — Tokens aus der bestehenden Seite gelesen (18.09.2026). Hell: Grau + Orange wie die Marke. Dunkel: Blau-Schwarz-Verlauf mit blauen Partikeln, angelehnt an das 3D-Original. Umschaltung über data-theme am . */ :root{ --bg:#eaeaea; --panel:#e6e6e6; --sunk:#e6e6e6; --ink:#1a1a1a; --dim:#4a4a4a; --mute:#666666; --accent:#c96a1a; --deep:#8a4512; /* WCAG 2.1 AA (18.09.2026): kleine Schrift braucht 4,5:1. Das Marken-Orange #c96a1a schafft auf Hellgrau nur 3,0:1 — für kleine orange Texte gilt --accent-ink, für Schrift auf orangem Grund --on-accent. Große Schrift und Flächen bleiben --accent. */ --accent-ink:#9f5210; --on-accent:#1a1a1a; --sh-dark:rgba(140,140,140,.55); --sh-light:rgba(255,255,255,.95); --hair:rgba(0,0,0,.10); --wm-ink:#f2f2f2; --wm-sub:#fefefe; --hero-wash:rgba(0,0,0,.17); --bg-img:none; --p-lo:#8a4512; --p-hi:#c96a1a; --blend:source-over; --p-alpha:.90; --display:"Bricolage Grotesque","Archivo Black",Impact,sans-serif; /* seit 18.09.2026 (Markus), vorher Archivo Black */ --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --dock-w:60px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#070b12; --panel:#0e1624; --sunk:#050810; --bg-img:radial-gradient(ellipse 130% 85% at 50% -10%, #17243a 0%, #0b1220 42%, #060a11 72%, #04070c 100%); --ink:#e8eefc; --dim:#9aa8c4; --mute:#8391ad; --accent:#e8873a; --deep:#c06a1f; --accent-ink:#e8873a; --on-accent:#070b12; --sh-dark:rgba(0,0,0,.62); --sh-light:rgba(120,160,255,.05); --wm-ink:#eef3ff; --wm-sub:#ffffff; --hero-wash:rgba(0,0,0,.10); --hair:rgba(150,180,255,.14); --p-lo:#6f8fc4; --p-hi:#3fa9ff; --blend:lighter; --p-alpha:.95; } } :root[data-theme="dark"]{ --bg:#070b12; --panel:#0e1624; --sunk:#050810; --bg-img:radial-gradient(ellipse 130% 85% at 50% -10%, #17243a 0%, #0b1220 42%, #060a11 72%, #04070c 100%); --ink:#e8eefc; --dim:#9aa8c4; --mute:#8391ad; --accent:#e8873a; --deep:#c06a1f; --accent-ink:#e8873a; --on-accent:#070b12; --sh-dark:rgba(0,0,0,.62); --sh-light:rgba(120,160,255,.05); --wm-ink:#eef3ff; --wm-sub:#ffffff; --hero-wash:rgba(0,0,0,.10); --hair:rgba(150,180,255,.14); --p-lo:#6f8fc4; --p-hi:#3fa9ff; --blend:lighter; --p-alpha:.95; } /* Testfassung: Partikel in dunklem Grau statt Orange. Wird über data-particles="grey" am geschaltet — je Thema eigene Werte. */ :root[data-particles="grey"]{--p-lo:#8d8d8d; --p-hi:#2e2e2e; --p-alpha:.855} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-particles="grey"]{--p-lo:#7d889c; --p-hi:#e6edf8; --p-alpha:.85} } :root[data-theme="dark"][data-particles="grey"]{--p-lo:#7d889c; --p-hi:#e6edf8; --p-alpha:.85} /* Handy, hell: Grau deutlich heller, damit "By design." vor dem Löwen lesbar bleibt. Die Dunkel-Regeln oben sind spezifischer und gewinnen dort weiter. */ @media(max-width:899px){:root[data-particles="grey"]{--p-lo:#c2c2c2; --p-hi:#8a8a8a; --p-alpha:.72} :root[data-theme="dark"][data-particles="grey"]{--p-lo:#5d6a82; --p-hi:#b9c4d8; --p-alpha:.6}} @media(max-width:899px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"])[data-particles="grey"]{--p-lo:#5d6a82; --p-hi:#b9c4d8; --p-alpha:.6}} /* Schalter für die Testfassung */ /* Steht in der freien Randspalte unter dem Dock, bündig mit dessen Achse — dort liegt nie Text, auf keiner Breite ab 900 px. */ .ptoggle{position:fixed;right:16px;width:60px;bottom:24px;z-index:4; display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:center;font-family:var(--mono);font-size:9px; letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .ptoggle button{font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer; border:0;border-radius:99px;padding:8px 0;background:var(--panel);color:var(--mute); box-shadow:3px 3px 7px var(--sh-dark),-3px -3px 7px var(--sh-light);transition:color .25s,box-shadow .25s} .ptoggle button:hover,.ptoggle button:focus{background:var(--panel)} .ptoggle button[aria-pressed="true"]{color:var(--accent-ink);background:var(--panel); box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light)} .ptoggle button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:899px){.ptoggle{display:none}} /* 🪤 Hello Elementors reset.css setzt auf JEDEN Button bei :hover und :focus eine pinke Fläche (rgb(204,51,102)). Diese Seite bringt ihre eigenen Flächen mit, also wird die Fremdfarbe hier einmal zentral abbestellt. Die Regel steht bewusst VOR den Komponenten — die setzen danach ihre eigene Fläche und gewinnen bei gleicher Spezifität durch die spätere Position. */ button,[type="button"],[type="submit"], button:hover,button:focus, [type="button"]:hover,[type="button"]:focus, [type="submit"]:hover,[type="submit"]:focus{background-color:transparent} *{box-sizing:border-box} body{margin:0;background-color:var(--bg);background-image:var(--bg-img); background-attachment:fixed;background-repeat:no-repeat; color:var(--ink);font-family:var(--body);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden} .shell{max-width:1120px;margin:0 auto;padding-inline:16px} /* Das Dock rechts braucht 96 px. Die Reserve steht auf BEIDEN Seiten, sonst sitzt der Inhalt 40 px links der Mitte und die Spalten sind ungleich weit vom Rand. */ @media(min-width:900px){.shell{max-width:1200px;padding-inline:96px}} /* ============ erhaben / versenkt — die zwei Grundformen ============ */ .raised{background:var(--panel);border-radius:99px; box-shadow:5px 5px 12px var(--sh-dark),-5px -5px 12px var(--sh-light)} .sunk{background:var(--sunk);border-radius:22px; box-shadow:inset 6px 6px 16px var(--sh-dark),inset -6px -6px 16px var(--sh-light)} /* ============ Dock rechts ============ */ .dock{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60; display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:99px; background:var(--panel);box-shadow:6px 6px 16px var(--sh-dark),-6px -6px 16px var(--sh-light)} .dock button{width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;padding:0; background:var(--panel);color:var(--dim);display:grid;place-items:center; box-shadow:3px 3px 7px var(--sh-dark),-3px -3px 7px var(--sh-light); transition:color .25s,box-shadow .25s} .dock button:hover,.dock button:focus{color:var(--ink);background:var(--panel)} .dock button[aria-expanded="true"],.dock button[aria-pressed="true"]{color:var(--accent); box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light)} .dock button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .dock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .lionicon{width:22px;height:22px;background-color:currentColor; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:contain;mask-size:contain; -webkit-mask-position:center;mask-position:center;display:block} .lang{font-family:var(--mono);font-size:10px;letter-spacing:.02em;line-height:1.05;font-weight:500} .lang .off{color:var(--mute)} .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%; background:var(--accent)} .dock .wrapbtn{position:relative;display:block} /* Handy: geschlossene Leiste, randlos am unteren Rand. Die Fläche ist deckend, damit Text darunter sauber endet statt durchzuscheinen. */ @media(max-width:899px){ .dock{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row; justify-content:space-around;gap:0;border-radius:0; padding:9px 6px calc(8px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 18px var(--sh-dark),0 -1px 0 var(--hair)} .dock>.dk,.dock>.wrapbtn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:6px;position:relative} .dock>.dk::after,.dock>.wrapbtn::after{content:attr(data-l);font-family:var(--mono);font-size:9.5px; letter-spacing:.08em;text-transform:uppercase;color:var(--mute);line-height:1} .dock .wrapbtn .dot{top:4px;right:calc(50% - 17px)} body.admin-bar .dock{margin-top:0} } /* ============ ausklappendes Menü ============ */ .menu{position:fixed;inset:0;z-index:55;display:grid;place-items:center; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)} .menu[hidden]{display:none} .menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px; width:min(320px,82vw)} .menu a{display:block;text-align:center;text-decoration:none;color:var(--dim); font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase; padding:17px 22px;border-radius:99px;background:var(--panel); box-shadow:5px 5px 12px var(--sh-dark),-5px -5px 12px var(--sh-light); transition:color .25s,box-shadow .25s,transform .25s} .menu a:hover{color:var(--accent-ink)} .menu a:active{box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)} .menu a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .menu li{animation:rise .42s cubic-bezier(.2,.8,.2,1) backwards} .menu li:nth-child(2){animation-delay:.05s} .menu li:nth-child(3){animation-delay:.1s} .menu li:nth-child(4){animation-delay:.15s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ============ Typo ============ */ h1,h2,h3{text-wrap:balance} .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--accent-ink)} h2.big{font-family:var(--display);font-size:clamp(1.7rem,4.4vw,3rem);line-height:1.04;margin:.35em 0 0} .lede{color:var(--dim);max-width:60ch;font-size:1.04rem} p{margin:0 0 1em} /* rotierendes Wort — Breite fix, kein Überlaufen */ /* Kasten exakt eine Zeile hoch und oben bündig: dann liegt das Wort auf derselben Grundlinie wie der Satz davor. (vertical-align:bottom + 1.12em hob es an und machte die Zeile höher.) clip-margin lässt Unterlängen stehen. */ .rot{display:inline-block;position:relative;vertical-align:top;overflow:hidden; overflow:clip;overflow-clip-margin:.14em;height:1.04em;line-height:1.04;text-align:left} /* Unsichtbarer Platzhalter mit dem längsten Wort: er gibt dem Kasten die Breite. Keine geratene ch-Zahl mehr, also kann nichts abgeschnitten werden. */ .rot .sz{visibility:hidden;display:block;white-space:nowrap;font-style:normal} /* Alle drei Wörter liegen übereinander, nicht untereinander — sonst ist immer nur das erste im Sichtfenster und danach bleibt der Kasten leer. backwards: vor dem eigenen Einsatz gilt schon der 0%-Zustand (unten, unsichtbar). */ .rot span{position:absolute;left:0;top:0;white-space:nowrap;color:var(--accent); animation:roll 7.5s infinite backwards} .rot span:nth-child(2){animation-delay:2.5s} .rot span:nth-child(3){animation-delay:5s} /* WCAG 2.2.2 (18.09.2026): die Endlos-Rotation lässt sich anhalten — Überfahren, Tastaturfokus oder Antippen/Enter (Umschalter, siehe artcore-front.js). */ .rot:hover span,.rot:focus-visible span,.rot.is-paused span{animation-play-state:paused} .rot[role="button"]{cursor:pointer} .rot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px} @keyframes roll{0%{transform:translateY(130%);opacity:0} 3%,34%{transform:translateY(0);opacity:1} 38%,100%{transform:translateY(-130%);opacity:0}} /* ============ durchlaufendes Canvas hinter der ganzen Seite ============ */ #gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block} .veil{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(ellipse 78% 58% at 50% 50%,transparent 0%,transparent 42%, color-mix(in srgb,var(--bg) 62%,transparent) 82%,var(--bg) 100%)} .page{position:relative;z-index:2} /* ============ Sektion mit versetzter Textspalte ============ */ .act{min-height:100svh;display:flex;align-items:center;padding-block:clamp(72px,11vh,132px)} .act .col{width:min(46%,520px)} .act.right{justify-content:flex-end} .act.right .col{text-align:left} .act.mid{justify-content:center} .act.mid .col{width:min(100%,680px);text-align:center} @media(max-width:899px){ /* Handy: erst der Textblock, darunter eine freie Bühne für die Partikelform. Die Form steht vollständig in der Bühne; verwandelt wird sie nur, solange ein Textblock davorliegt (Takt dazu in beats() im Skript). */ .act{min-height:auto;display:block;padding-block:28px 52svh} .act .col{width:100%;margin-inline:auto} .act.mid .col{width:min(100%,680px)} /* 85 % + leichte Unschärfe: Text klar lesbar, die Verwandlung dahinter ahnt man. */ .act .col{background:color-mix(in srgb,var(--bg) 85%,transparent); border-radius:20px;padding:22px;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)} .act#kontakt{padding-bottom:34svh} } /* ============ Hero ============ */ /* Der Hero steht außerhalb von .shell und läuft randlos. Säße er darin, endete der abgedunkelte Grund an der Spaltenkante und man sähe eine senkrechte Naht. */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center; padding-inline:16px;padding-block:clamp(90px,14vh,150px) clamp(56px,9vh,92px);gap:0} @media(min-width:900px){.hero{padding-inline:96px}} /* Abgedunkelter Grund unter dem Text — weiche Ellipse, kein harter Kasten. Liegt hinter dem Text, aber vor dem Canvas, und dämpft die Partikel dort mit. */ .hero::before{content:"";position:absolute;z-index:-1;pointer-events:none; left:0;right:0;top:0;bottom:0; background:radial-gradient(ellipse 78% 62% at 50% 50%, var(--hero-wash) 0%, color-mix(in srgb,var(--hero-wash) 52%,transparent) 44%, transparent 76%)} /* Statuszeile */ .pill{display:inline-flex;align-items:center;gap:10px;padding:9px 20px;border-radius:99px; background:var(--panel);color:var(--dim);font-family:var(--mono);font-size:10.5px; letter-spacing:.18em;text-transform:uppercase; box-shadow:4px 4px 10px var(--sh-dark),-4px -4px 10px var(--sh-light)} .pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0; animation:beat 2.4s ease-in-out infinite} @keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}} /* Handy: Statuszeile einzeilig */ @media(max-width:560px){.pill{white-space:nowrap;max-width:100%;padding:8px 14px;gap:8px; font-size:min(10.5px,2.6vw);letter-spacing:.08em}} .hero .eyebrow{margin-top:34px} /* Schlagzeile: fett und mager im Wechsel, wie im Vorbild */ .h1{font-family:var(--display);margin:.32em 0 0;line-height:.98;letter-spacing:-.005em; font-size:clamp(2.6rem,8.2vw,5.6rem);color:var(--ink)} .h1 .thin{display:block;font-family:var(--body);font-weight:400;color:var(--mute); letter-spacing:-.01em;margin-top:.06em} @media(max-width:899px){.h1 .thin{color:var(--dim)}} /* Der Satz steht mitten in der Partikelwolke. Ohne eigenen Grund kreuzen die Punkte die Buchstaben und der Kontrast bricht stellenweise ein — das ist ein Lesbarkeits- und Barrierefreiheitsproblem, kein Geschmacksthema. Deshalb: voller Textkontrast plus ein weicher Grund, der zu den Seiten ausläuft. */ .herosub{position:relative;margin:1.1em auto 0;color:var(--ink); font-size:clamp(1.06rem,1.65vw,1.28rem);line-height:1.55;max-width:52ch; font-weight:500;padding:1.9em 2.8em} /* Der Grund sitzt im Innenabstand des Absatzes, nicht in negativen Rändern: ein Element, das seitlich hinausragt, erzeugt auf schmalen Schirmen eine waagrechte Überbreite. So wächst der Kasten nach innen und bleibt gefasst. */ /* Der Verlauf muss INNERHALB des Kastens auf Null auslaufen. Reicht er bis an die Kante, schneidet er die Partikel dahinter hart ab und man sieht ein Rechteck — obwohl der Grund dieselbe Farbe wie die Seite hat. */ .herosub::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0; background:radial-gradient(ellipse 58% 62% at 50% 50%, var(--bg) 0%, var(--bg) 32%, color-mix(in srgb,var(--bg) 58%,transparent) 62%, transparent 94%)} @media(max-width:560px){.herosub{padding:1.6em 1.2em}} /* Zwei Schaltflächen */ .btnrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px} .btn{display:inline-block;text-decoration:none;font-family:var(--mono);font-size:11px; letter-spacing:.2em;text-transform:uppercase;padding:16px 30px;border-radius:99px; transition:color .25s,box-shadow .25s,background .25s} .btn-solid{background:var(--accent);color:var(--on-accent);font-weight:500; box-shadow:5px 5px 14px var(--sh-dark),-5px -5px 14px var(--sh-light)} .btn-solid:hover{background:var(--deep);color:var(--bg)} .btn-solid:active{box-shadow:inset 4px 4px 9px rgba(0,0,0,.28)} .btn-ghost{background:var(--panel);color:var(--dim); box-shadow:5px 5px 14px var(--sh-dark),-5px -5px 14px var(--sh-light)} .btn-ghost:hover{color:var(--accent-ink)} .btn-ghost:active{box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Drei Kennzahlen */ .counters{display:flex;gap:clamp(30px,7vw,78px);justify-content:center;flex-wrap:wrap; margin-top:clamp(44px,6vh,68px)} .counters div{min-width:92px} .counters b{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .counters span{display:block;margin-top:9px;font-family:var(--mono);font-size:12.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--dim)} .scrollhint{margin-top:clamp(40px,6vh,64px);font-family:var(--mono);font-size:9.5px; letter-spacing:.34em;text-transform:uppercase;color:var(--mute); animation:sink 2.6s ease-in-out infinite} @keyframes sink{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}} /* Markenzeichen oben links — bleibt beim Scrollen stehen */ .brand{position:fixed;left:clamp(16px,3vw,34px);top:calc(clamp(16px,3vw,30px) + env(safe-area-inset-top,0px)); z-index:50;text-decoration:none;font-family:var(--display);line-height:.9; font-size:clamp(1.05rem,1.7vw,1.45rem);letter-spacing:.07em;color:var(--wm-ink); text-shadow:2px 2px 4px rgba(0,0,0,.70),5px 5px 12px rgba(0,0,0,.34); filter:drop-shadow(6px 6px 15px rgba(0,0,0,.14))} .brand span{display:block;font-size:.42em;letter-spacing:.34em;margin-top:.5em;color:var(--wm-sub); text-shadow:.12em .12em .22em rgba(0,0,0,.7),.28em .28em .55em rgba(0,0,0,.18)} .brand:focus-visible{outline:2px solid var(--accent);outline-offset:6px} /* Hello Elementors reset.css setzt a:hover{color:#336} (Dunkelblau) — hier unser Orange. */ .brand:hover,.brand:active{color:var(--accent)} .dock .wrapbtn:hover,.dock .wrapbtn:active{color:inherit} @media(max-width:899px){.brand{font-size:.95rem}} /* ============ senkrechte Schiene (ersetzt das Akkordeon) ============ */ .vrail{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:0} .vrail button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer;white-space:normal; border-top:2px solid var(--hair);padding:13px 0 14px;color:var(--mute);font-family:var(--body); display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline; transition:color .3s,border-color .3s} .vrail .no{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute); transition:color .3s} .vrail .lb{font-size:calc(.9rem + 3px);font-weight:600;line-height:1.35} /* Das Akkordeon bleibt flächenlos — Zustand zeigt allein die Linie und die Ziffer. */ .vrail button:hover,.vrail button:focus{color:var(--dim);background:transparent} .vrail button[aria-expanded="true"]{color:var(--ink);border-top-color:var(--accent)} .vrail button[aria-expanded="true"] .no{color:var(--accent-ink)} .vrail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .vpanel{padding:0 0 18px 26px;color:var(--dim);font-size:1.04rem;max-width:60ch} .vpanel[hidden]{display:none} .vpanel p{margin:0} .vrail{border-bottom:2px solid var(--hair)} /* ============ Bühne (Rest) ============ */ .stamp{position:fixed;left:18px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3; font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--mute);pointer-events:none} .stamp b{color:var(--accent-ink);font-weight:500} @media(max-width:899px){.stamp{display:none}} /* ============ Schiene: Zahl · Linie · Text ============ */ .rail{display:grid;gap:10px;margin:0;padding:0;list-style:none} .rail.six{grid-template-columns:repeat(6,1fr)} .rail.three{grid-template-columns:repeat(3,1fr)} .rail button{width:100%;text-align:left;background:transparent;border:0;cursor:pointer; border-top:2px solid var(--hair);padding:11px 6px 0;color:var(--mute);font-family:var(--body); transition:color .3s,border-color .3s} .rail .no{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em; color:var(--mute);margin-bottom:5px;transition:color .3s} .rail .lb{display:block;font-size:.84rem;font-weight:600;line-height:1.32;letter-spacing:.01em} .rail.six .lb{font-family:var(--mono);font-weight:400;font-size:.78rem;letter-spacing:.06em} .rail button:hover{color:var(--dim)} .rail button[aria-selected="true"],.rail button[aria-current="true"]{color:var(--ink); border-top-color:var(--accent)} .rail button[aria-selected="true"] .no,.rail button[aria-current="true"] .no{color:var(--accent-ink)} .rail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:760px){ .rail.six{grid-template-columns:repeat(3,1fr)} .rail.three{grid-template-columns:1fr} } /* Panel unter der Schiene */ .panel{margin-top:26px;padding:30px clamp(20px,4vw,38px);border-radius:20px;background:var(--sunk); box-shadow:inset 5px 5px 14px var(--sh-dark),inset -5px -5px 14px var(--sh-light)} .panel[hidden]{display:none} .panel h3{font-family:var(--body);font-size:1.02rem;font-weight:600;margin:0 0 .6em; letter-spacing:.06em;color:var(--ink)} .panel p{color:var(--dim);max-width:68ch;margin:0} /* ============ Sektionen ============ */ .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .news{padding:28px clamp(20px,3vw,32px);border-radius:20px;background:var(--panel); box-shadow:5px 5px 14px var(--sh-dark),-5px -5px 14px var(--sh-light); display:flex;flex-direction:column;gap:12px} .news .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--mute)} .news h3{font-family:var(--display);font-size:1.28rem;margin:0;line-height:1.12} .news p{color:var(--dim);font-size:.95rem;margin:0} /* display setzen, sonst verpuffen margin-top/bottom an diesem . */ .cta{display:inline-block;align-self:flex-start;margin-top:4px;text-decoration:none; font-family:var(--mono);font-size:11px; letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:13px 24px;border-radius:99px; background:var(--panel);box-shadow:4px 4px 10px var(--sh-dark),-4px -4px 10px var(--sh-light); transition:color .25s,box-shadow .25s} .cta:hover{color:var(--accent-ink)} .cta:active{box-shadow:inset 3px 3px 8px var(--sh-dark),inset -3px -3px 8px var(--sh-light)} .cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sechead{margin-bottom:34px} hr.rule{border:0;border-top:1px solid var(--hair);margin:0} /* Kontakt */ .kontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px; padding:clamp(28px,4vw,46px);border-radius:22px;background:var(--sunk); box-shadow:inset 6px 6px 16px var(--sh-dark),inset -6px -6px 16px var(--sh-light)} .kontakt dt{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--mute);margin-bottom:7px} .kontakt dd{margin:0;color:var(--ink);font-size:1rem;line-height:1.55} .kontakt a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)} .kontakt a:hover{color:var(--accent-ink)} /* Bau-Notiz */ .note{margin-block:0 80px;padding:28px clamp(20px,3vw,34px);border:1px dashed var(--hair); border-radius:16px} .note .lab{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin-bottom:14px} .note h2{font-family:var(--body);font-size:1.05rem;font-weight:600;margin:0 0 .7em} .note p{color:var(--dim);font-size:.94rem;max-width:66ch} .note ul{margin:0;padding-left:1.1em;color:var(--dim);font-size:.94rem} .note li{margin-bottom:.4em} footer{padding-block:30px 60px;border-top:1px solid var(--hair);font-family:var(--mono); font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute); display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:center;text-align:center} @media(max-width:899px){footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}} footer a{color:var(--mute);text-decoration:none} footer a:hover{color:var(--accent-ink)} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} /* Ohne Bewegung stehen alle drei Wörter nebeneinander. position:static ist Pflicht — sonst liegen sie absolut übereinander (Handy mit Energiesparmodus, 18.09.2026). */ .rot{height:auto;min-width:0;overflow:visible;white-space:normal}.rot .sz{display:none} .rot span{animation:none;opacity:1;transform:none;display:inline;position:static;white-space:normal} .rot span:not(:last-child)::after{content:"\00a0· "} } /* ============ Sprunglink ============ */ .skip{position:absolute;left:-9999px;top:0;z-index:100;padding:14px 22px;border-radius:0 0 12px 0; background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:12px; letter-spacing:.16em;text-transform:uppercase;text-decoration:none} .skip:focus{left:0} /* Die WordPress-Adminleiste darf Dock und Markenzeichen nicht überdecken. */ body.admin-bar .dock{margin-top:16px} body.admin-bar .brand{top:calc(46px + env(safe-area-inset-top,0px))} /* ============ Seitenwechsel sanft überblenden (18.09.2026) ============ View Transitions für Navigationen innerhalb der Domain: alte Seite blendet aus, neue ein, 240 ms. Browser ohne Unterstützung wechseln wie bisher hart. Bei „Bewegung reduzieren“ kein Übergang. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:ease} @media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} } /* ============ Eingangsanimation „Horizont“ (Markus 18.09.2026) ============ Eine einzige Choreografie beim Laden: eine Partikellinie steigt zum Löwen auf, die Schrift zieht sich aus der Weite zusammen. Klasse .intro setzt der Kopf (functions.php) — einmal je Sitzung, nie bei „Bewegung reduzieren“. Läuft als reine CSS-Verzögerung, der Text erscheint also auch ohne JavaScript. */ .intro .hero{overflow:clip} .intro .hero .eyebrow,.intro .h1,.intro .h1 .thin,.intro .herosub,.intro .btnrow,.intro .counters{ animation-duration:1s;animation-timing-function:cubic-bezier(.16,.84,.24,1);animation-fill-mode:backwards} @keyframes ib-track{from{opacity:0;letter-spacing:.9em}to{opacity:1}} @keyframes ib-head{from{opacity:0;letter-spacing:.28em}to{opacity:1}} @keyframes ib-thin{from{opacity:0;letter-spacing:.3em}to{opacity:1}} @keyframes ib-fade{from{opacity:0}to{opacity:1}} .intro .hero .eyebrow{animation-name:ib-track;animation-delay:.2s;animation-duration:1.8s} .intro .h1{animation-name:ib-head;animation-delay:1.1s;animation-duration:1.6s} .intro .h1 .thin{animation-name:ib-thin;animation-delay:1.4s;animation-duration:1.6s} .intro .herosub{animation-name:ib-fade;animation-delay:2.2s} .intro .btnrow{animation-name:ib-fade;animation-delay:2.4s} .intro .counters{animation-name:ib-fade;animation-delay:2.6s} /* ============ Überschriften-Schrift Bricolage Grotesque (Markus 18.09.2026) ============ Ersetzt Archivo Black; die Wortmarke oben links bleibt Archivo Black (Logo). :root vorne hebt die Gewichtung an, damit die Werte auch gegen Regeln aus später geladenen Dateien (artcore-kontakt.css …) gewinnen. */ :root .brand{font-family:"Archivo Black",Impact,"Arial Black",sans-serif} :root .h1,:root h2.big,:root .kx-h1{font-weight:720;letter-spacing:-.03em} /* Bricolage läuft schmaler als Archivo Black — ~15 % größer, damit die Zeilen gleich viel Gewicht haben */ :root .h1{font-size:clamp(2.9rem,9.4vw,6.4rem)} :root h2.big{font-size:clamp(1.95rem,5vw,3.45rem)} :root .kx-h1{font-size:clamp(2.5rem,7.3vw,5.2rem)} :root .counters b,:root .kx-h2,:root .dm-h,:root .kr-h,:root .news h3,:root .kr-word,:root .kr-x,:root .kr-ava-t{font-weight:700;letter-spacing:-.02em} /* ============ Kleine Schriften mindestens Footer-Größe (Markus 18.09.2026) ============ Alle Mono-Beschriftungen (Labels, Nummern, Knöpfe, Dock) auf 13 px wie der Footer. :root vorne, damit die Werte auch gegen später geladene Dateien gewinnen. */ :root .ptoggle,:root .lang,:root .dock>.dk::after,:root .dock>.wrapbtn::after,:root .menu a, :root .eyebrow,:root .btn,:root .counters span,:root .scrollhint,:root .vrail .no,:root .stamp, :root .rail .no,:root .rail.six .lb,:root .news .tag,:root .cta,:root .kontakt dt,:root .note .lab, :root .skip,:root .kx-label,:root .kx-field>span,:root .dm-field>span,:root .kx-dl dt, :root .kx-table thead th,:root .kr-cap{font-size:13px} /* 13 px braucht weniger Sperrung, sonst stapeln sich die Hero-Knöpfe am Handy und „PARTIKEL“ ragt am Desktop über die Knopfspalte hinaus. */ :root .ptoggle{letter-spacing:.04em} @media(max-width:560px){:root .btn{letter-spacing:.08em;padding-inline:18px}}