/* Heinrich Strobel Designsystem. Farben aus dem Original-Logo: Rot #ee2e37, Anthrazit #242021, dazu Nachtblau #0c1821 aus dem freigegebenen Entwurf. */
@import url('fonts.css');
:root{
 color-scheme:light;
 --paper:#ffffff;--paper-2:#f4f3f0;--paper-3:#e7e5e0;
 --ink:#1b1c1f;--ink-soft:#44474c;--ink-mute:#6c7076;
 --night:#0c1821;--night-2:#13222d;--night-3:#1d2f3b;
 /* Logo-Rot für Flächen und Linien; --red ist die zugängliche Variante für Text und Buttons (Kontrast ≥ 4.5:1 auf Weiß). */
 --red-logo:#ee2e37;--red:#d91f29;--red-deep:#b0151e;--red-lift:#ff5d63;
 --line:rgba(27,28,31,.13);--line-strong:rgba(27,28,31,.3);--line-dark:rgba(255,255,255,.16);
 --font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --gutter:clamp(20px,5vw,80px);--max:1440px;--space:clamp(80px,10vw,160px);--space-sm:clamp(56px,7vw,100px);
 --radius:2px;--ease:cubic-bezier(.22,.61,.36,1);--spring:cubic-bezier(.2,.8,.2,1);
 --header-h:84px
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%;background:var(--night)}
html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;color:var(--red)}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--red-lift)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block;height:auto}
:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.dark :focus-visible{outline-color:var(--red-lift)}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
.wrap{width:min(100%,var(--max));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space)}
.section-sm{padding-block:var(--space-sm)}
.label{font:700 12px/1.5 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.label-red{color:var(--red)}
.dark{background:var(--night);color:#fff}
.dark .label{color:rgba(255,255,255,.62)}
.dark .label-red{color:var(--red-lift)}
.h2{font-size:clamp(36px,4.6vw,68px)}
.h3{font-size:clamp(28px,3vw,44px)}
.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.dark .lead{color:rgba(255,255,255,.8)}
.copy{color:var(--ink-soft);font-size:17px;line-height:1.75;text-wrap:pretty}
.copy p+p{margin-top:1.1em}
.dark .copy{color:rgba(255,255,255,.76)}
.num{font:700 13px/1 var(--font);letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums}
.dark .num{color:var(--red-lift)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;border-top:3px solid var(--ink);padding-top:24px;margin-bottom:clamp(40px,5vw,72px)}
.dark .section-head{border-color:#fff}
.section-head .label{flex-shrink:0;text-align:right;max-width:30ch}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:14px 24px;font-size:15px;font-weight:700;line-height:1.3;border:2px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:#fff;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.button:hover{background:var(--red);border-color:var(--red)}
.button:active{transform:translateY(1px)}
.button .arrow{font-size:18px;line-height:1;transition:transform .25s var(--ease)}
.button:hover .arrow{transform:translateX(4px)}
.button-red{background:var(--red);border-color:var(--red)}
.button-red:hover{background:var(--red-deep);border-color:var(--red-deep)}
.button-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.button-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.dark .button-outline{color:#fff;border-color:rgba(255,255,255,.7)}
.dark .button-outline:hover{background:#fff;color:var(--ink);border-color:#fff}
.text-link{display:inline-flex;align-items:center;gap:12px;font-weight:700;border-bottom:2px solid var(--red);padding-bottom:4px}
.text-link .arrow{transition:transform .25s var(--ease)}
.text-link:hover .arrow,a:hover .text-link .arrow{transform:translateX(5px)}
.photo{position:relative;overflow:hidden;background:var(--paper-3)}
.photo img{width:100%;height:100%;object-fit:cover}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
mark.todo{background:#ffe7e8;color:var(--red-deep);padding:1px 6px;font-weight:600}
/* Einblendungen nur, wenn Bewegung erlaubt ist (app.mjs setzt .js-motion). */
.js-motion .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--spring),transform .9s var(--spring)}
.js-motion .reveal.visible{opacity:1;transform:none}
.js-motion .reveal-stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--spring),transform .8s var(--spring)}
.js-motion .reveal-stagger.visible>*{opacity:1;transform:none}
.js-motion .reveal-stagger.visible>:nth-child(2){transition-delay:.07s}
.js-motion .reveal-stagger.visible>:nth-child(3){transition-delay:.14s}
.js-motion .reveal-stagger.visible>:nth-child(4){transition-delay:.21s}
.js-motion .reveal-stagger.visible>:nth-child(5){transition-delay:.28s}
.js-motion .reveal-stagger.visible>:nth-child(6){transition-delay:.35s}
.js-motion .reveal-stagger.visible>:nth-child(n+7){transition-delay:.42s}
.js-motion .reveal-img{clip-path:inset(10% 8%);transition:clip-path 1.2s var(--spring)}
.js-motion .reveal-img img{transform:scale(1.12);transition:transform 1.5s var(--spring)}
.js-motion .reveal-img.visible{clip-path:inset(0)}
.js-motion .reveal-img.visible img{transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}