/* ---- Schriften: lokal ausgeliefert ----
Bewusst KEIN Google-Fonts-CDN: Beim Laden von fonts.googleapis.com wird die
IP-Adresse des Besuchers ohne Rechtsgrundlage an Google uebertragen
(Art. 6 DSGVO, § 25 TDDDG; vgl. LG Muenchen I, Urt. v. 20.01.2022 - 3 O 17493/20).
Ein Hinweis in der Datenschutzerklaerung ersetzt die Rechtsgrundlage nicht,
da die Uebertragung bereits vor jeder Kenntnisnahme stattfindet.
Quelle: Google Fonts - Bricolage Grotesque, Geist, Geist Mono.
Alle drei stehen unter der SIL Open Font License 1.1, die das Selbst-Hosten
ausdruecklich erlaubt. Dateien liegen unter assets/fonts/.
Subsets: latin + latin-ext (kyrillisch/vietnamesisch bewusst weggelassen).
Alle drei sind Variable Fonts - die Gewichtsvarianten teilen sich je eine
Datei, der Browser laedt sie daher nur einmal. Gesamt rd. 191 KB.
Die griechische Zeile (tau-epsilon-lambda-omikron-sigma) laeuft bewusst ueber
Georgia als Systemschrift, siehe .etym-greek / .name-note .greek weiter unten.
Aktualisieren: CSS von fonts.googleapis.com mit Browser-User-Agent abrufen,
woff2-Dateien austauschen, unicode-range unveraendert uebernehmen. */
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url("fonts/bricolage-grotesque-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("fonts/geist-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("fonts/geist-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist-mono-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/geist-mono-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist-mono-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("fonts/geist-mono-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist-mono-variable-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("fonts/geist-mono-variable-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--ink:#0A0A0A;--ink-2:#141414;--ink-3:#1C1C1C;--ink-4:#262626;--line:#2A2A2A;--line-soft:rgba(10,10,10,.1);--paper:#F4F4F2;--bone:#FAFAF8;--white:#FFFFFF;--acid:#D4FF3A;--acid-2:#B8E029;--acid-deep:#7A9900;--coral:#FF6A3D;--muted-d:#8A8A8A;--muted-l:#6B6B6B;--danger:#C1432B}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Geist",system-ui,sans-serif;font-size:17px;line-height:1.5;text-wrap:pretty}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;margin:0;letter-spacing:-0.02em}
p{margin:0}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acid-deep)}
img{max-width:100%;display:block}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.wrap{padding:0 22px}}
/* type */
.mono{font-family:"Geist Mono",ui-monospace,monospace}
.label{font-family:"Geist",sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--muted-l)}
/* Section marker set like a printed legal commentary: a hairline rule leading
into the kicker, rather than a status dot. */
.sec-tag{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.sec-tag .dot{width:30px;height:1px;border-radius:0;background:var(--ink);opacity:.3;flex-shrink:0}
.slide-dark .sec-tag .dot,.on-dark .sec-tag .dot{background:var(--paper);opacity:.35}
.sec-tag span.t{font-family:"Geist",sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.slide-dark .sec-tag span.t,.on-dark .sec-tag span.t{color:var(--muted-d)}
h1.hero{font-size:clamp(40px,6vw,88px);line-height:.98;letter-spacing:-.03em;font-weight:500}
h2.disp{font-size:clamp(32px,4.2vw,58px);line-height:1.02;font-weight:500;letter-spacing:-.025em}
h3.disp-s{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.02em}
.em{color:var(--acid-deep);font-weight:600}
.on-dark .em{color:var(--acid)}
.lede{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--muted-l);max-width:640px}
.on-dark .lede{color:var(--muted-d)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:16px;letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent;cursor:pointer;font-family:"Geist",sans-serif}
.btn-primary{background:var(--acid);color:var(--ink);border-color:var(--acid-2)}
.btn-primary:hover{background:var(--acid-2);color:var(--ink)}
.btn.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit;opacity:.9}
.btn-ghost:hover{opacity:1;color:inherit}
.btn-dark{background:var(--ink);color:var(--acid);border-color:var(--ink)}
.btn-dark:hover{color:var(--acid);background:var(--ink-2)}
.btn-arrow{width:24px;height:24px;border-radius:100%;background:var(--ink);color:var(--acid);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.btn-primary .btn-arrow,.btn-dark .btn-arrow{background:var(--ink);color:var(--acid)}
.btn-sm{padding:11px 18px;font-size:14px}
/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.logo-block{display:flex;align-items:center;gap:12px;flex-shrink:0;color:var(--ink)}
.logo-block:hover{color:var(--ink)}
/* Logo liegt inline im HTML, nicht als ![]()
: nur so erbt es die Textfarbe
und laesst sich im dunklen Footer hell ausgeben. Die Quelldatei fuer Druck,
Signatur und Social ist assets/Telos_Logo.svg. */
.logo-block svg{height:28px;width:auto;display:block}
.logo-block .lg-accent{fill:var(--acid-deep)}
footer.site .logo-block,footer.site .logo-block:hover{color:var(--paper)}
footer.site .logo-block .lg-accent{fill:var(--acid)}
/* Wortmarke: die echte Kanzleimarke aus assets/Telos_Logo.svg, inline
eingesetzt, damit fill="currentColor" greift — im Header dunkel auf hell,
im Footer hell auf dunkel. Der viewBox ist gegenueber der
Illustrator-Datei auf die tatsaechlichen Konturen beschnitten (dort steht
oben und unten Leerraum), sonst wuerde die Marke im Kopf zu klein wirken.
Die Exportdatei enthaelt aeltere Entwuerfe, per .st0/.st1 auf display:none
gesetzt; uebernommen sind nur die sichtbaren Pfade.
Hoehe schlaegt .logo-block svg, deshalb mit .logo-block davor.
Im Footer darf die Marke groesser stehen: dort ist sie das Kopfelement der
Absenderspalte, im Header teilt sie sich die Zeile mit der Navigation. */
.logo-block .logo-wordmark{height:32px;width:auto;display:block}
footer.site .logo-block .logo-wordmark{height:42px}
@media(max-width:720px){
.logo-block .logo-wordmark{height:27px}
footer.site .logo-block .logo-wordmark{height:36px}
}
nav.main-nav{display:flex;gap:30px;align-items:center}
nav.main-nav a{font-size:15px;font-weight:500;color:var(--ink-3)}
nav.main-nav a.active{color:var(--ink);border-bottom:2px solid var(--acid-deep);padding-bottom:2px}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}
@media(max-width:980px){
/* bleibt display:flex und wird über opacity/visibility geschaltet —
display selbst ist nicht animierbar, daher das bisherige "Aufploppen" */
nav.main-nav{display:flex;position:fixed;inset:70px 0 0 0;background:var(--paper);flex-direction:column;padding:30px 22px;gap:6px;overflow-y:auto;z-index:49;
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s}
nav.main-nav.open{opacity:1;visibility:visible;transform:none;
transition:opacity .26s ease,transform .26s ease,visibility 0s}
nav.main-nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:18px;
opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease}
nav.main-nav.open a{opacity:1;transform:none}
nav.main-nav.open a:nth-child(1){transition-delay:.05s}
nav.main-nav.open a:nth-child(2){transition-delay:.10s}
nav.main-nav.open a:nth-child(3){transition-delay:.15s}
nav.main-nav.open a:nth-child(4){transition-delay:.20s}
nav.main-nav.open a:nth-child(5){transition-delay:.25s}
nav.main-nav.open a:nth-child(6){transition-delay:.30s}
.nav-burger{display:block}
.nav-actions .btn-ghost{display:none}
}
/* Burger wird zum Kreuz — aria-expanded setzt bereits das JS */
.nav-burger span{transition:transform .26s ease,opacity .18s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* footer */
footer.site{background:var(--ink);color:var(--paper);padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand p{color:var(--muted-d);font-size:15px;line-height:1.6;max-width:280px;margin-top:14px}
.foot-kammern{font-size:12.5px!important;line-height:1.5;margin-top:14px;color:var(--muted-d)}
.foot-col .label{color:var(--muted-d);margin-bottom:16px;display:block}
.foot-col a{display:block;color:var(--muted-d);font-size:15px;padding:6px 0}
.foot-col a:hover{color:var(--acid)}
/* ---- Social-Profile vorerst ausgeblendet (28.07.2026) ----
LinkedIn und Instagram gibt es noch nicht; die Platzhalter zeigten auf "#"
und haetten ins Leere gefuehrt. Bewusst hier ausgeblendet statt das Markup
aus 21 Seiten und der Team-Seite zu entfernen: zum Aktivieren genuegt es,
diese beiden Regeln zu loeschen und die echten Adressen einzutragen.
.foot-social steht im Fuss jeder Seite, .social-row bei den beiden
Berufstraegern auf der Team-Seite. Siehe docs/SEO.md, Punkt 3. */
.foot-social,.social-row{display:none !important}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{width:38px;height:38px;border-radius:100%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--paper)}
.foot-social a:hover{border-color:var(--acid);color:var(--acid)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;color:var(--muted-d);flex-wrap:wrap;gap:10px}
.foot-bottom a{color:var(--muted-d)}
.foot-bottom a:hover{color:var(--acid)}
/* sections */
section{padding:84px 0}
section.tight{padding:52px 0}
@media(max-width:720px){section{padding:56px 0}}
.slide-dark,.on-dark{background:var(--ink);color:var(--paper)}
.slide-bone{background:var(--bone)}
.slide-acid{background:var(--acid);color:var(--ink)}
.muted{color:var(--muted-l)}
.on-dark .muted{color:var(--muted-d)}
/* grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
/* zwei Spalten werden früher einspaltig — bei 640px sind Paare wie die
Team-Karten längst zu schmal (das alte "1fr 1fr" bei 900px war wirkungslos) */
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}
@media(max-width:640px){.grid-3,.grid-4{grid-template-columns:1fr}}
/* cards */
.card{background:var(--white);border:1px solid var(--line-soft);border-radius:10px;padding:32px}
.on-dark .card{background:var(--ink-2);border-color:var(--line)}
.card h3{font-size:22px;margin-bottom:10px}
.card p{color:var(--muted-l);font-size:15.5px;line-height:1.55}
.on-dark .card p{color:var(--muted-d)}
/* flow — Abläufe mit echter Reihenfolge. Die Schiene trägt die Sequenz,
das Label die Frist. Ersetzt dekorative 01/02/03-Nummerierung. */
.flow{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.flow--4{grid-template-columns:repeat(4,1fr)}
.flow li{position:relative;padding-top:32px}
.flow li::before{content:"";position:absolute;top:6px;left:0;right:-26px;height:1px;background:var(--line-soft)}
.flow li:last-child::before{right:0}
.flow li::after{content:"";position:absolute;top:1px;left:0;width:11px;height:11px;border-radius:50%;background:var(--acid);border:1px solid var(--acid-2)}
.flow-when{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acid-deep);margin-bottom:9px}
.flow h3{font-size:19px;margin-bottom:7px}
.flow p{font-size:14.5px;line-height:1.55;color:var(--muted-l)}
.on-dark .flow li::before,.slide-dark .flow li::before{background:var(--line)}
.on-dark .flow-when,.slide-dark .flow-when{color:var(--acid)}
.on-dark .flow p,.slide-dark .flow p{color:var(--muted-d)}
@media(max-width:820px){.flow--4{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
.flow,.flow--4{grid-template-columns:1fr;gap:0}
.flow li{padding:0 0 26px 26px}
.flow li::before{top:6px;left:5px;right:auto;width:1px;height:100%}
.flow li:last-child::before{height:0}
.flow li::after{top:1px;left:0}
}
/* CTA banner */
.cta-banner{background:var(--ink);color:var(--paper);border-radius:14px;padding:48px 52px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.cta-banner h3{font-size:clamp(22px,2.6vw,32px);max-width:600px}
.cta-banner .actions{display:flex;gap:12px;flex-wrap:wrap}
/* stacked and centred on phones — half-width pills next to each other read as broken */
@media(max-width:720px){
.cta-banner{padding:34px 24px;text-align:center;justify-content:center}
.cta-banner h3{max-width:none}
.cta-banner .actions{width:100%;flex-direction:column;align-items:stretch;gap:10px}
.cta-banner .actions .btn{width:100%;justify-content:center}
}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.on-dark .stats{border-color:var(--line)}
.stat{padding:28px 24px;border-right:1px solid var(--line-soft)}
.on-dark .stat{border-color:var(--line)}
.stat:last-child{border-right:none}
.stat .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:44px;letter-spacing:-.03em;color:var(--acid-deep)}
.on-dark .stat .v{color:var(--acid)}
.stat p{font-size:14.5px;color:var(--muted-l);margin-top:6px}
.on-dark .stat p{color:var(--muted-d)}
/* column count follows the number of stats, so the row never leaves an empty cell */
.stats.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.stats,.stats.cols-3{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--line-soft)}}
/* forms */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-size:14px;font-weight:600;color:var(--ink-3)}
.on-dark .field label{color:var(--paper)}
.field input,.field select,.field textarea{font-family:"Geist",sans-serif;font-size:16px;padding:14px 16px;border-radius:6px;border:1px solid var(--line-soft);background:var(--white);color:var(--ink)}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{background:var(--ink-2);border-color:var(--line);color:var(--paper)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--acid-deep);outline-offset:1px}
/* Erklaerung unter einem Eingabefeld - dort, wo die richtige Eingabe eine
fachliche Entscheidung ist (netto/brutto, mit/ohne Vorsteuer). */
.field-hint{font-size:13px;line-height:1.5;color:var(--muted-l);margin-top:-2px}
.on-dark .field-hint{color:var(--muted-d)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.checkbox-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted-l)}
.on-dark .checkbox-row{color:var(--muted-d)}
.checkbox-row input{margin-top:4px}
.disclaimer-box{background:rgba(212,255,58,.12);border:1px solid rgba(122,153,0,.3);border-radius:8px;padding:18px 20px;font-size:14.5px;color:var(--ink-3);line-height:1.55}
.on-dark .disclaimer-box{background:rgba(212,255,58,.08);border-color:rgba(212,255,58,.25);color:var(--muted-d)}
.form-success{display:none;text-align:center;padding:60px 20px}
.form-success.show{display:block}
.form-success .icon{width:64px;height:64px;border-radius:100%;background:var(--acid);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
/* cta strip (compact, repeated scroll ctas) */
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--acid);color:var(--ink);border-radius:10px;padding:22px 28px;flex-wrap:wrap}
.cta-strip strong{font-size:17px;font-weight:700}
.cta-strip .btn{flex-shrink:0}
@media(max-width:720px){
.cta-strip{flex-direction:column;text-align:center;padding:24px 22px}
.cta-strip .btn{width:100%;justify-content:center}
}
/* social row on team cards */
.social-row{display:flex;gap:10px;margin-top:14px}
.social-row a{width:36px;height:36px;border-radius:100%;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink-3)}
.social-row a:hover{border-color:var(--acid-deep);color:var(--acid-deep)}
/* AI disclaimer callout */
.ai-callout{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:40px}
.ai-callout .icon{width:48px;height:48px;border-radius:12px;background:var(--acid);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:20px}
/* image-slot setzt intern :host{height:100%}. In einem gestreckten Grid-Item
hat der Container eine definite Höhe, dann gewinnt height:100% gegen
aspect-ratio und das Bild legt sich über den Text darunter. Dokument-Regeln
schlagen :host; die inline gesetzten clamp()-Höhen schlagen weiterhin diese. */
image-slot{height:auto}
/* skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--acid);color:var(--ink);padding:10px 16px;z-index:100}
.skip-link:focus{left:10px;top:10px}
/* keyboard focus — visible on both surfaces */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--acid-deep);outline-offset:3px;border-radius:4px}
.on-dark a:focus-visible,.slide-dark a:focus-visible,.on-dark button:focus-visible,.cta-banner a:focus-visible,footer.site a:focus-visible{outline-color:var(--acid)}
/* any bare link on an ink surface stays legible (default a{} colour is ink-on-ink) */
.cta-banner a:not(.btn),.on-dark a:not(.btn),.slide-dark a:not(.btn){color:var(--paper)}
.cta-banner a:not(.btn):hover,.on-dark a:not(.btn):hover,.slide-dark a:not(.btn):hover{color:var(--acid)}
/* ============ interaction & motion ============ */
/* bubbles — lift, glow, and let the arrow lead the eye.
hover:hover only, so touch devices don't get stuck in a hover state */
.btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.btn-arrow{transition:transform .18s ease}
@media(hover:hover){
.btn:hover{transform:translateY(-2px)}
.btn:hover .btn-arrow{transform:translateX(3px)}
.btn-primary:hover{box-shadow:0 12px 26px -12px rgba(122,153,0,.7)}
.btn-dark:hover{box-shadow:0 12px 26px -12px rgba(10,10,10,.75)}
.btn-ghost:hover{box-shadow:0 10px 22px -14px rgba(10,10,10,.45)}
/* chips are not clickable — colour shift only, no lift, so they don't fake an affordance */
.trust-chip:hover{border-color:var(--acid-deep);box-shadow:0 8px 20px -14px rgba(10,10,10,.45)}
.foot-social a:hover,.social-row a:hover{transform:translateY(-2px)}
}
.btn:active{transform:translateY(0)}
.trust-chip{transition:border-color .18s ease,box-shadow .18s ease}
.foot-social a,.social-row a{transition:transform .18s ease,border-color .18s ease,color .18s ease}
/* sticky header earns depth once you leave the top */
header.site{transition:box-shadow .25s ease}
header.site.is-stuck{box-shadow:0 10px 30px -22px rgba(10,10,10,.55)}
/* scroll reveal — .js-reveal is only set when motion is allowed AND supported,
so with no JS (or reduced motion) everything stays plainly visible */
.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none}
/* hero load-in: the one orchestrated moment on the page */
.js-hero .hero-seq>*{opacity:0;animation:tel-rise .65s cubic-bezier(.22,.61,.36,1) both}
.js-hero .hero-seq>*:nth-child(1){animation-delay:.06s}
.js-hero .hero-seq>*:nth-child(2){animation-delay:.14s}
.js-hero .hero-seq>*:nth-child(3){animation-delay:.22s}
.js-hero .hero-seq>*:nth-child(4){animation-delay:.30s}
.js-hero .hero-seq>*:nth-child(5){animation-delay:.38s}
.js-hero .hero-media{opacity:0;animation:tel-fade .8s ease .18s both}
@keyframes tel-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tel-fade{from{opacity:0}to{opacity:1}}
/* calculator result announces itself when it appears */
.calc-pop{animation:tel-rise .45s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;animation-delay:0s!important}
.js-reveal [data-reveal],.js-hero .hero-seq>*,.js-hero .hero-media{opacity:1!important;transform:none!important}
}
/* ---------------------------------------------------------------------------
Leere Bildplatzhalter erscheinen nicht auf der Website.
---------------------------------------------------------------------------
ist ausserhalb der Autorenumgebung READ-ONLY (siehe Kopfkommentar
in image-slot.js). Auf der ausgelieferten Seite kann also niemand ein Bild
hineinziehen — ein leerer Platzhalter waere dauerhaft eine leere Box mit
Beschriftung. Sobald jemand src="..." setzt, erscheint die Stelle von selbst.
Zum Befuellen in der Autorenumgebung: setzen, dann sind
die leeren Platzhalter wieder sichtbar und lassen sich bestuecken.
Die Huellen muessen mitverschwinden, sonst bleiben leere Karten und Abstaende
stehen. Fuenf Muster kommen im Bestand vor, sie werden unterschiedlich
behandelt — eine Teamkarte soll ihren Text behalten, ein Abschnitt, der nur
aus dem Bild besteht, nicht. */
html:not([data-show-slots]) image-slot:not([src]),
html:not([data-show-slots]) image-slot[src=""]{display:none!important}
/* Karte, die nichts ausser dem Platzhalter enthaelt (z. B. die Karte auf der
Kontaktseite) — sonst bliebe ein leerer Rahmen stehen. */
html:not([data-show-slots]) .card:has(> image-slot:not([src]):only-child){display:none!important}
/* Klassenlose Huelle: auf der Loginseite umschliesst sie das Vorschaubild und
ein absolut positioniertes Abspiel-Symbol. Ohne Bild schwebte das Symbol
sonst ueber dem Nichts. */
html:not([data-show-slots]) div:not([class]):has(> image-slot:not([src])){display:none!important}
/* Ganzer Abschnitt, wenn er ausser dem Bild nichts zeigt — sonst bleibt ein
Absatz Leerraum zwischen zwei Textbloecken. */
html:not([data-show-slots]) section:has(> .wrap > image-slot:not([src]):only-child){display:none!important}
/* Zweispaltiges Raster faellt auf eine Spalte zurueck, wenn die Bildspalte
entfaellt — sonst stuende der Text auf halber Breite neben einer Luecke. */
html:not([data-show-slots]) .grid-2:has(> image-slot:not([src])){grid-template-columns:1fr}
/* Optischer Ausgleich fuer das Logo auf schmalen Bildschirmen.
Kopfzeile und Inhalt teilen sich .wrap und stehen damit rechnerisch buendig.
Optisch nicht: Das "T" der Logoschrift (Bricolage Grotesque, fett) hat kaum
Vorbreite, waehrend Fliesstext darunter eine sichtbare mitbringt — das Logo
wirkt dadurch nach links herausgerueckt. Nur links korrigiert; rechts bleibt
der Abstand zum Menuesymbol wie gehabt. */
@media(max-width:720px){header.site .wrap{padding-left:28px}}
/* Login im Klappmenue.
Der Login-Knopf in der Kopfzeile ist ein .btn-ghost und wird unterhalb von
980px ausgeblendet (Regel weiter oben), damit neben dem Menuesymbol Platz
bleibt. Ohne diesen Eintrag gaebe es unterhalb der Grenze gar keinen Weg zur
Anmeldung — das betrifft nicht nur Handys, sondern auch ein nicht
maximiertes Fenster am Rechner.
Auf dem Desktop bleibt er verborgen, dort steht der Knopf ja in der Kopfzeile.
Auf den Portalseiten fehlt nichts: dort ist "Abmelden" ein Vollton-Knopf und
bleibt sichtbar. */
nav.main-nav .nav-login{display:none}
@media(max-width:980px){
nav.main-nav .nav-login{
display:inline-flex;width:100%;justify-content:center;
margin-top:20px;padding:14px 26px;font-size:16px;
border-bottom:1px solid currentColor}
/* Der Login ist der siebte Eintrag — ohne diese Zeile liefe er ausserhalb
der gestaffelten Einblendung der uebrigen Punkte. */
nav.main-nav.open a:nth-child(7){transition-delay:.35s}
}
/* Abmelden im Klappmenue: gleiche Optik wie der Login-Eintrag, nur etwas
abgesetzt. Wird von assets/site.js eingehaengt, sobald jemand angemeldet ist —
der Abmelden-Knopf in der Kopfzeile ist dann ein .btn-ghost und unterhalb von
980px ausgeblendet, damit die Kopfzeile aufgeraeumt bleibt. */
nav.main-nav .nav-logout{margin-top:10px}
/* Klappmenue buendig zur Kopfzeile.
nav.main-nav ist position:fixed und erbt deshalb NICHT den Innenabstand von
.wrap. Ohne diese Regel begannen die Menueeintraege fest bei 22px, waehrend
die Kopfzeile darueber bei 40px steht (bis 980px) bzw. bei 28px (bis 720px,
der optische Ausgleich fuers Logo). Das Menue wirkte dadurch verschoben. */
@media(max-width:980px){nav.main-nav{padding-left:40px;padding-right:40px}}
@media(max-width:720px){nav.main-nav{padding-left:28px;padding-right:22px}}