/* Brandt-Variante. Knopf- und Farbsystem nach dominicbrandt.de (ausgelesen 04.11.2026):
   Basis 20 px, alles fett, Pillen mit 2 px Radius, Filter rund, Primär- und Sekundärknöpfe,
   die beim Überfahren ihre Farben tauschen. Eigene Abweichungen: Lila statt Neongrün,
   dunklere Schrift im Tagmodus für ausreichenden Kontrast, Inter (SIL OFL) statt Helvetica Now. */
@font-face{font-family:Inter;src:url(fonts/Inter-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
 font-size:20px;
 --white:#fff;--black:#000;--grey:#a0a5af;--light-grey:#bec3c8;--lila:#9d94ff;
 /* Nacht (Standard) */
 --bg:var(--black);--text:var(--light-grey);--text2:var(--grey);--lines:#3a3c40;
 --btn:var(--white);--btn-text:#5b5f69;--btn-h:var(--light-grey);--btn-h-text:#111;
 --sec:var(--black);--sec-text:var(--light-grey);--sec-h:var(--white);--sec-h-text:#5b5f69;
 --tag:var(--light-grey);--tag-text:#111;--tag-h:var(--white);--tag-h-text:#5b5f69;
 --toggle:var(--lila);--toggle-text:#111;
 --stage:#111;
}
html[data-mode="tag"]{
 --bg:var(--white);--text:#2f3237;--text2:#62666f;--lines:#d4d7dc;
 --btn:var(--grey);--btn-text:#111;--btn-h:var(--black);--btn-h-text:var(--white);
 --sec:var(--white);--sec-text:#5b5f69;--sec-h:var(--black);--sec-h-text:var(--white);
 --tag:#dfe2e6;--tag-text:#111;--tag-h:var(--black);--tag-h-text:var(--white);
 --stage:#f2f3f5;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased;
 /* Kerning immer an (Inter-Subsets enthalten GPOS kern); Laufweite Grundtext 0 */
 font-kerning:normal;letter-spacing:0;transition:background-color .4s,color .4s}
body{margin:0;min-height:100vh;font-size:.8rem;line-height:1.45}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--lila);outline-offset:2px}

/* Knöpfe. Text auf Versalhöhe und Grundlinie beschnitten: sitzt optisch exakt mittig. */
.pill{display:inline-block;vertical-align:bottom;padding:.27rem .5rem;border-radius:2px;
 font-size:.7rem;font-weight:700;line-height:1;text-box:trim-both cap alphabetic;white-space:nowrap;
 background:var(--btn);color:var(--btn-text);transition:background-color .5s,color .5s}
@media (hover:hover){.pill:hover{background:var(--btn-h);color:var(--btn-h-text)}}
.pill.sec{background:var(--sec);color:var(--sec-text)}
@media (hover:hover){.pill.sec:hover{background:var(--sec-h);color:var(--sec-h-text)}}
.pill.on{background:var(--btn-h);color:var(--btn-h-text)}
.pill.sec.on{background:var(--sec-h);color:var(--sec-h-text)}
.pill.label{background:var(--toggle);color:var(--toggle-text);cursor:default}
.pill.logo{background:transparent!important;color:var(--btn);margin-left:-.5rem;text-transform:uppercase;letter-spacing:.025em}
/* Laufweite: Versalien leicht gesperrt (oben), Headlines ab 1.25rem −.015em, Fließtext 0, Zähler tabellarisch */
html[data-mode="tag"] .pill.logo{color:#111}
@media (hover:hover){.pill.logo:hover{color:var(--light-grey)}html[data-mode="tag"] .pill.logo:hover{color:var(--grey)}}
.pill.mode{padding:.25rem .5rem}.pill.mode::before{content:"";display:block;width:.4rem;height:.4rem;margin:.05rem 0;border-radius:.4rem;background:var(--bg)}
.pills{display:flex;gap:.25rem;align-items:center}
/* Sprachumschalter wie bei Brandt: zwei Sekundärknöpfe ohne Abstand, aktive Sprache invertiert */
.lang{display:flex;gap:0}.lang .pill{text-transform:capitalize}
.foot .lang{margin-left:.25rem}
/* Handy: Mail-Knopf im Fuß ausblenden (steht auf About), damit Rechtliches und Sprache in eine Zeile passen */
@media (max-width:560px){.foot .pill[href^="mailto:"]{display:none}}

/* Kopfzeile: fest, feine Linie, Verlauf darunter */
.bar{position:fixed;left:0;right:0;z-index:20;padding:0 .6rem}
.bar.top{top:0}
.bar.top .inner{display:flex;align-items:center;justify-content:space-between;height:2rem;border-bottom:1px solid var(--lines)}
.bar.top::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:3rem;background:linear-gradient(0deg,transparent,var(--bg));pointer-events:none}
.bar.bottom{bottom:0;display:flex;justify-content:space-between;align-items:center;padding-top:.3rem;padding-bottom:.3rem;pointer-events:none}
.bar.bottom>*{pointer-events:auto}
.bar.bottom::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:3rem;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}

/* Startseite */
.filters{position:fixed;top:2.6rem;left:0;right:0;z-index:19;display:flex;gap:.25rem;padding:0 .6rem;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .pill:not(.label){border-radius:5rem;background:var(--tag);color:var(--tag-text)}
.filters .pill[data-filter=""]{border-radius:2px}
.filters .pill:not(.label).on{background:var(--tag-h);color:var(--tag-h-text)}
@media (hover:hover){.filters .pill:not(.label):hover{background:var(--tag-h);color:var(--tag-h-text)}}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem .6rem;padding:4.6rem .6rem 4rem}
.tile h2{margin:0 0 .35rem;font-size:.7rem;font-weight:700;color:var(--text)}
.tile-media{aspect-ratio:3/4;background:var(--stage);overflow:hidden}
.tile-media video{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
@media (hover:hover){.tile:hover .tile-media video{opacity:.9}}
.tile[hidden]{display:none}
@media (min-width:2200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* Case */
.case-page .foot{display:none}
.case-title{position:fixed;top:2.35rem;left:.6rem;margin:0;font-size:.7rem;font-weight:700;color:var(--text2);z-index:5}
.slider{position:fixed;top:3.6rem;bottom:2.4rem;left:0;right:0;display:flex;gap:.6rem;padding:0 1.7rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1.7rem;scrollbar-width:none;overscroll-behavior-x:contain}
.slider::-webkit-scrollbar{display:none}
.slide{flex:none;height:100%;margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
.slide img,.slide video{aspect-ratio:var(--r);height:min(calc(100% - 1.2rem),calc((100vw - 3.4rem) / (var(--r))));width:auto;object-fit:contain}
.slide figcaption{height:1.2rem;padding-top:.3rem;font-size:.7rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 3.4rem)}
.slide.next{width:max(13rem,32vw);justify-content:flex-end;padding:0 0 1.2rem .8rem;border-left:1px solid var(--lines)}
.slide.next span{color:var(--text2);font-size:.7rem}
.slide.next strong{font-size:1.25rem;line-height:1.1;letter-spacing:-.015em;margin-top:.3rem;color:var(--text)}
@media (hover:hover){.slide.next:hover strong{color:var(--lila)}}
/* Blätterzonen links und rechts über die volle Höhe, mit Punkt */
.slider-button{position:fixed;top:0;height:100vh;width:1.7rem;display:flex;align-items:center;justify-content:center;z-index:2}
.slider-button::before{content:"";display:block;width:.5rem;height:.5rem;border-radius:.5rem;background:var(--text2);transition:background-color .25s}
@media (hover:hover){.slider-button:hover::before{background:var(--btn)}}
.slider-button.prev{left:0}.slider-button.next{right:0}
.casebar .push{flex:1}
.count{font-size:.7rem;min-width:3rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--text2)}
.casebar .lang{margin-left:.6rem}
.panel-foot{display:none}
.panel{position:fixed;top:2rem;bottom:2.2rem;left:0;right:0;z-index:15;background:var(--bg);overflow:auto}
.panel[hidden]{display:none}
.panel-inner{padding:1.4rem .6rem 2rem;max-width:40rem}
.panel .meta{color:var(--text2);font-size:.7rem;margin:0 0 .7rem}
.panel h2{font-size:1.25rem;font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:0 0 .9rem;color:var(--text)}
.panel p{font-size:.8rem;line-height:1.45;margin:0 0 .7rem;max-width:62ch}
.panel h3{font-size:.7rem;font-weight:700;color:var(--text2);margin:1.3rem 0 .4rem}
.panel ul{list-style:none;margin:0;padding:0;font-size:.8rem;line-height:1.5}
.panel .note p{font-size:.7rem;color:var(--text2)}
.thumbs{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
.thumbs a{display:block}
.thumbs .thumb{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--stage)}
.thumbs span{display:block;font-size:.7rem;color:var(--text2);margin-top:.2rem;font-variant-numeric:tabular-nums}

/* Über und Rechtliches */
.about,.legal{padding:3.6rem .6rem 5rem}
.lead{font-size:1.25rem;line-height:1.25;letter-spacing:-.015em;max-width:34em;margin:0 0 1rem;color:var(--text)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem .6rem;margin-top:2.8rem;max-width:55rem}
.cols h3{font-size:.7rem;font-weight:700;margin:0 0 .2rem;color:var(--text)}
.cols p{margin:0;color:var(--text2);font-size:.7rem}
@media (max-width:640px){.cols{grid-template-columns:1fr 1fr}}
.legal{max-width:38rem}
.legal h1,.legal h2{font-weight:700;font-size:1rem;margin:1.4rem 0 .5rem;color:var(--text)}
.legal p,.legal li{line-height:1.55;font-weight:500}

@media (max-width:640px){
 .slider{align-items:center;padding:0 .6rem;scroll-padding-inline:.6rem}
 .slider-button{display:none}
 .casebar .lang{display:none}
 .panel-foot{display:block;margin-top:1.6rem}
 .slide{height:auto;max-height:100%}
 .slide img,.slide video{height:min(calc(100vh - 11rem),calc((100vw - 1.2rem) / (var(--r))));width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}