/*
Theme Name: Söthje
Theme URI: https://soethje.com
Author: Ronald Söthje
Description: Landschaftsfilm, Workshops und Produktionen — ein Theme, das aussieht wie der Entwurf.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: soethje
*/

/* ── Schriften, lokal eingebunden (DSGVO: keine Verbindung zu Google) ── */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fonts/archivo-v25-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
 src:url('assets/fonts/archivo-v25-latin-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
 src:url('assets/fonts/archivo-v25-latin-800.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;
 src:url('assets/fonts/newsreader-v26-latin-300.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;
 src:url('assets/fonts/newsreader-v26-latin-300italic.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fonts/newsreader-v26-latin-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
 src:url('assets/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
 src:url('assets/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2')}



:root{
  --paper:#e7e4dd; --ink:#14171a; --graphite:#4a4f54; --hair:#c6c2b9; --stamp:#2f5464;
  --disp:'Archivo',system-ui,sans-serif; --body:'Newsreader',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(18px,4vw,56px); --max:1500px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.slate{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.slate b{color:var(--ink);font-weight:500}
h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(30px,4.6vw,64px);line-height:.92}

/* masthead */
.mast{position:sticky;top:0;z-index:40;background:rgba(231,228,221,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:13px;padding-bottom:13px}
.mast .logo img{width:clamp(120px,15vw,168px)}
.mast nav{display:flex;gap:clamp(13px,1.5vw,26px)}
.mast nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:2px;border-bottom:1px solid transparent;white-space:nowrap}
.mast nav a:hover{border-color:var(--ink)}
.lang{position:relative;display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;
 padding:3px;background:transparent;line-height:1;flex:none}
.lang button{position:relative;z-index:2;background:none;border:0;cursor:pointer;padding:6px 11px;border-radius:999px;
 font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
 transition:color .25s}
.lang button.on{color:var(--paper)}
.lang i{position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
 background:var(--ink);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.lang.de i{transform:translateX(100%)}
.lang:hover{border-color:var(--ink)}
.social{display:flex;align-items:center;gap:14px}
.social a{display:grid;place-items:center;opacity:.62;transition:opacity .25s}
.social a:hover{opacity:1}
.burger{display:none;background:transparent;border:1px solid var(--ink);border-radius:999px;padding:9px 16px;
 font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.mnav{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;flex-direction:column;justify-content:center;gap:4px;padding:var(--pad)}
.mnav a{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(30px,9vw,46px);line-height:1.16;letter-spacing:-.03em;padding:6px 0}
.mnav .mnav-foot{margin-top:32px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.mnav .mnav-foot a{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.14em}
.mnav.open{display:flex}

/* opening */
.opening{position:relative;height:calc(100svh - var(--mast,58px));min-height:520px;overflow:hidden;background:#0e1114;display:flex;flex-direction:column;justify-content:flex-end}
.opening>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opening .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,20,.2),rgba(14,17,20,0) 38%,rgba(14,17,20,.78));z-index:2}
.opening .marks span{position:absolute;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(231,228,221,.72);text-transform:uppercase}
.opening .marks .tl{top:18px;left:calc(var(--pad));}.opening .marks .tr{top:18px;right:var(--pad)}
.opening .line{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(22px,3vw,34px)}
.opening .line p{font-style:italic;color:#eeece7;font-size:clamp(26px,4.4vw,64px);line-height:1.06;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.opening .line .sub{margin-top:16px;display:block;color:rgba(231,228,221,.82)}
.opening .ticker{position:relative;z-index:3;order:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 padding:13px var(--pad);border-top:1px solid rgba(238,236,231,.28);background:rgba(10,12,14,.38);backdrop-filter:blur(6px)}
.opening .ticker .slate{color:rgba(238,236,231,.72)}
.opening .ticker .slate b{color:#eeece7}

section{padding:clamp(64px,8vw,124px) 0}
.reel{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:clamp(28px,4vw,52px)}
.reel .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--stamp)}

.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.still{position:relative;overflow:hidden;background:#d7d3cb;cursor:pointer;border:0;padding:0;display:block;width:100%;aspect-ratio:4/5}
.still.full{grid-column:1 / -1;aspect-ratio:2.4/1}
.still img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .5s}
.still:hover img,.still:focus-visible img{transform:scale(1.045);filter:brightness(.62)}
.still .info{position:absolute;inset:auto 0 0 0;padding:16px 16px 14px;text-align:left;color:#eeece7;z-index:2;
  background:linear-gradient(180deg,rgba(10,12,14,0),rgba(10,12,14,.82));
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.still:hover .info,.still:focus-visible .info{opacity:1;transform:none}
.still .ttl{font-family:var(--disp);font-weight:600;font-size:clamp(14px,1.15vw,18px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
.still .place{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,236,231,.72);margin-top:5px;display:block}
.still .exif{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(238,236,231,.25)}
.still .exif span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(238,236,231,.9)}
.still .zoom{position:absolute;top:12px;right:12px;z-index:2;width:26px;height:26px;border:1px solid rgba(238,236,231,.6);border-radius:50%;
  display:grid;place-items:center;color:#eeece7;font-size:13px;line-height:1;opacity:0;transition:opacity .4s}
.still:hover .zoom,.still:focus-visible .zoom{opacity:1}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(12,14,16,.97);display:none;flex-direction:column}
.lb.open{display:flex}
.lb .frame{flex:1;display:grid;place-items:center;padding:clamp(40px,5vw,64px) var(--pad) 0;min-height:0}
.lb .frame img{max-width:100%;max-height:100%;object-fit:contain}
.lb .frame .vid{width:min(100%,1500px);aspect-ratio:16/9}
.lb .frame .vid iframe{width:100%;height:100%;border:0}
.lb .bar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:18px var(--pad) 26px;color:#eeece7}
.lb .bar .ttl{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(16px,1.6vw,22px)}
.lb .bar .place{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,236,231,.65);margin-top:6px;display:block}
.lb .bar .exif{display:flex;gap:20px;flex-wrap:wrap}
.lb .bar .exif span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(238,236,231,.85)}
.lb .close,.lb .nav{position:absolute;background:transparent;border:0;color:#eeece7;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.lb .close{top:20px;right:var(--pad)}
.lb .nav{top:50%;transform:translateY(-50%);font-size:26px;padding:14px}
.lb .prev{left:6px}.lb .next{right:6px}

.dates{border-top:1px solid var(--hair)}
.date{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1.5fr) minmax(0,1.8fr) minmax(190px,auto);gap:clamp(16px,2.6vw,40px);align-items:start;padding:clamp(20px,2.2vw,26px) 0;border-bottom:1px solid var(--hair);transition:background .25s}
.date:hover{background:rgba(20,23,26,.04)}
.date .thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#d7d3cb;align-self:start;width:100%}
.date .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.date:hover .thumb img,.date .thumb:focus-visible img{transform:scale(1.05)}

.date h3 a{display:inline-block;border-bottom:1px solid transparent;transition:border-color .2s}
.date:hover h3 a{border-color:var(--ink)}
.date h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.2vw,44px);line-height:.92;letter-spacing:-.03em;margin-top:-4px}
.date h3 small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:400;color:var(--graphite);margin-top:10px;text-transform:uppercase}
.date p{font-size:15.5px;line-height:1.5;color:#2a2e32;max-width:46ch;margin-top:-2px}
.date .proof{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--stamp);
 margin-top:12px;padding-left:11px;border-left:2px solid var(--stamp);max-width:40ch;line-height:1.55}
.date .right{text-align:right;white-space:nowrap;padding-top:2px;display:flex;flex-direction:column;align-items:flex-end}
.date .right .book{margin-top:0}
.date .right .more{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite);border-bottom:1px solid var(--hair);padding-bottom:2px}
.date .right .more:hover{color:var(--ink);border-color:var(--ink)}
.date .pline{margin:0 0 16px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--graphite);line-height:1.7;white-space:normal;max-width:22ch}
.date .pline .plabel{display:block;font-size:10px;letter-spacing:.13em;color:#8b9096}
.date .pline b{font-weight:400;color:var(--ink)}
.date .pline em{font-style:normal;display:block;color:#8b9096;font-size:10px;margin-top:2px}
.date.soon{opacity:.5}
.date.soon .thumb{background:#dad6ce}
.date .op{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);display:block;margin-bottom:8px}
.ontour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ontour-text{grid-column:1 / -1;margin-bottom:8px}
.ontour-lead{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;
 padding-bottom:clamp(20px,2.4vw,28px);margin-bottom:clamp(18px,2vw,24px);border-bottom:1px solid var(--hair)}
.ontour-grid figure{position:relative;overflow:hidden;background:#d7d3cb;margin:0;aspect-ratio:4/5}
.ontour-grid .ontour-c{grid-column:1 / -1;aspect-ratio:2.4/1;order:2}
.ontour-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.ontour-grid figure:hover img{transform:scale(1.04)}
.ontour-grid figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#eeece7;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.ontour-text .claim{font-family:var(--body);font-size:clamp(21px,2.3vw,31px);line-height:1.28;margin:0;color:var(--ink)}
.ontour-text .claim b{font-weight:400;color:var(--stamp)}
.ontour-text .claim-sub{font-family:var(--body);font-style:italic;font-size:clamp(18px,1.7vw,22px);line-height:1.35;margin-bottom:20px;color:var(--ink);max-width:24ch}
.ontour-text .extra{font-size:16px;color:#2a2e32;margin:0}
.ontour-text .extra+.extra{margin-top:14px}
.ontour-text .extra b{font-weight:400;color:var(--ink);font-family:var(--disp);font-size:14px;text-transform:uppercase;letter-spacing:-.01em;margin-right:4px}
.how{list-style:none;margin:0;columns:2;column-gap:clamp(28px,4vw,64px)}
.how li{break-inside:avoid}
.how li{display:grid;grid-template-columns:auto 1fr;gap:0 14px;padding:0 0 20px;counter-increment:s}
.how li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--stamp);padding-top:4px}
.how li b{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:-.01em}
.how li span{grid-column:2;font-size:15.5px;color:#2a2e32;margin-top:4px;display:block}
.how{counter-reset:s}
.tour-life{margin-top:clamp(40px,5vw,64px)}
.tour-life .claim{font-family:var(--body);font-style:italic;font-size:clamp(22px,2.6vw,34px);line-height:1.25;max-width:26ch;margin-bottom:26px}
.tour-life .claim b{font-style:normal;font-weight:400;border-bottom:2px solid var(--stamp)}
.tour-life .extra{font-size:17px;color:#2a2e32;max-width:62ch;margin:0 0 30px}
.tour-life .claim-sub{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;
 font-size:clamp(15px,1.4vw,19px);margin:-14px 0 26px;color:var(--ink)}
.lifegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lifegrid figure{position:relative;overflow:hidden;background:#d7d3cb}
.lifegrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.lifegrid figure:hover img{transform:scale(1.04)}
.lifegrid figure.wide{grid-column:span 2}
.lifegrid figure.wide img{aspect-ratio:8/5}
.lifegrid figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#eeece7;text-shadow:0 1px 8px rgba(0,0,0,.8)}.upcoming{align-items:stretch}
.upcoming>div:first-child{display:flex;flex-direction:column}
.upcoming .planshot{margin:22px 0 0;position:relative;flex:1;min-height:150px;overflow:hidden;background:#d7d3cb;cursor:zoom-in}
.upcoming .planshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.upcoming .planshot:hover img{transform:scale(1.04)}
.upcoming .planshot figcaption{position:absolute;left:12px;right:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#eeece7;text-shadow:0 1px 10px rgba(0,0,0,.9)}
@media (max-width:900px){.upcoming .planshot{flex:none;aspect-ratio:16/10;min-height:0}}
.upcoming{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,64px);margin-top:clamp(34px,4vw,52px);
 padding-top:clamp(26px,3vw,36px);border-top:1px solid var(--hair);align-items:start}
.upcoming h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(20px,2vw,27px);line-height:.98;letter-spacing:-.025em;margin:10px 0 12px}
.upcoming p{font-size:16px;color:#2a2e32;max-width:38ch}
.up-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,40px)}
.up-list label{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.up-list label span{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(15px,1.35vw,18px)}
.up-list label em{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.13em;color:var(--graphite)}
.up-list input{appearance:none;width:15px;height:15px;border:1px solid #9a968c;border-radius:2px;cursor:pointer}
.up-list input:checked{background:var(--stamp);border-color:var(--stamp)}
.up-form{display:flex;gap:0;border-bottom:1px solid var(--ink);margin-top:22px}
.up-form input{flex:1;min-width:0;background:transparent;border:0;font:inherit;font-size:16px;padding:11px 0;color:var(--ink)}
.up-form input:focus{outline:0}
.up-form button{background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding-left:14px;color:var(--ink)}
.consent{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin-top:16px;
 font-size:13.5px;line-height:1.55;color:#2a2e32;cursor:pointer;max-width:56ch}
.consent input{appearance:none;width:18px;height:18px;flex:none;border:1.5px solid #8b877d;border-radius:3px;
 background:#fff;margin-top:1px;cursor:pointer;position:relative;transition:background .18s,border-color .18s}
.consent:hover input{border-color:var(--ink)}
.consent input:checked{background:var(--stamp);border-color:var(--stamp)}
.consent input:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:4px;height:9px;
 border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.consent a{text-decoration:underline;text-underline-offset:2px}
.optin{font-size:12.5px;line-height:1.6;color:var(--graphite);margin-top:8px;max-width:56ch}
.credits .consent{color:#b6bbbf}
.credits .consent input{border-color:#6a7278;background:#0f1417}
.credits .consent input:checked{background:var(--paper);border-color:var(--paper)}
.credits .consent input:checked::after{border-color:var(--ink)}
.credits .consent .req{color:#8fb3c2}.credits .optin{color:#8d949a}
.op-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--hair);color:var(--graphite);font-size:14px;max-width:74ch}
.op-note.band{max-width:none;margin:clamp(30px,3.6vw,46px) 0 0;
 padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
 columns:2;column-gap:clamp(30px,4vw,64px);font-size:13.5px;line-height:1.75;color:var(--graphite);
 orphans:2;widows:2}
@media (max-width:820px){.op-note.band{columns:auto}}
.book{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}

.films{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.film{border:0;background:transparent;padding:0;text-align:left;cursor:pointer;display:block;width:100%}
.film .fr{aspect-ratio:16/10;background:#12171b;position:relative;overflow:hidden}
.film .ph{position:absolute;inset:0;display:grid;place-items:center;color:#6d757c;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.film .fr img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1),filter .4s}
.film:hover .fr img{transform:scale(1.04);filter:brightness(.7)}
.film .fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;
 border:1px solid rgba(238,236,231,.75);display:grid;place-items:center;color:#eeece7;font-size:15px;padding-left:4px;
 background:rgba(14,17,20,.28);backdrop-filter:blur(2px);transition:background .3s,transform .4s}
.film:hover .play{background:rgba(14,17,20,.5);transform:translate(-50%,-50%) scale(1.06)}
.film .meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px}
.film .meta b{font-family:var(--disp);font-weight:600;font-size:15px;text-transform:uppercase}

/* Film auf der Workshop-Seite — lädt erst nach Klick */
.filmband{display:block;width:100%;border:0;background:transparent;padding:0;cursor:pointer;text-align:left;margin-top:6px}
.filmband .fr{position:relative;aspect-ratio:16/9;overflow:hidden;background:#12171b}
.filmband .fr img{width:100%;height:100%;object-fit:cover;display:block;
 transition:transform 1s cubic-bezier(.2,.7,.3,1),filter .4s}
.filmband:hover .fr img{transform:scale(1.02);filter:brightness(.72)}
.filmband .fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.filmband .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
 border:1px solid rgba(238,236,231,.75);display:grid;place-items:center;color:#eeece7;font-size:20px;padding-left:5px;
 background:rgba(14,17,20,.28);backdrop-filter:blur(2px);transition:background .3s,transform .4s}
.filmband:hover .play{background:rgba(14,17,20,.5);transform:translate(-50%,-50%) scale(1.05)}
.filmband:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
.filmnote{font-size:12.5px;line-height:1.6;color:var(--graphite);margin-top:12px;max-width:62ch}

.credits{background:var(--ink);color:var(--paper)}
.credits h2{color:var(--paper)}
.credits .reel{border-color:#2c3237}
.credits .slate{color:#8d949a}
/* Arbeiten */
.workhead{height:min(62svh,560px);min-height:340px}
/* Projektseite: Text links, ein Bild rechts, das mitläuft */
.workmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:clamp(28px,4vw,64px);
 align-items:start;margin-top:clamp(26px,3vw,40px)}
.workstory{max-width:66ch}
.workside{position:sticky;top:calc(var(--mast,58px) + 26px)}
/* Terminkarte in der Seitenspalte */
.wdates{border:1px solid var(--hair);padding:18px 20px 16px}
.wdhead{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--graphite);padding-bottom:12px;border-bottom:1px solid var(--hair)}
.wdhead svg{flex:none;color:var(--stamp)}
.wdrow{padding:12px 0;border-bottom:1px solid var(--hair)}
.wdrow:last-of-type{border-bottom:0;padding-bottom:4px}
.wdrow b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.09em;color:var(--ink);font-weight:400}
.wdrow span,.wdrow a{display:block;margin-top:4px;font-size:15px;line-height:1.35;color:var(--graphite)}
.wdrow a{border-bottom:1px solid var(--hair);display:inline-block}
.wdrow a:hover{color:var(--ink);border-color:var(--ink)}
.wdates em{display:block;margin-top:12px;font-style:normal;font-family:var(--mono);font-size:9.5px;
 letter-spacing:.13em;text-transform:uppercase;color:#8b9096}
.workside figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:#d7d3cb}
.workside img{width:100%;height:100%;object-fit:cover;display:block}
.workside span{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--graphite)}
.gal.workgal{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
 .workmain{grid-template-columns:1fr}
 .workside{position:static;margin-top:8px}
 .gal.workgal{grid-template-columns:1fr}
}

.workstory p{font-size:17px;line-height:1.62;color:#22262a;margin:0 0 18px}
.workstory h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;
 font-size:clamp(18px,1.7vw,23px);margin:34px 0 14px;padding-top:20px;border-top:1px solid var(--hair)}
.workstory .pline2{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);line-height:1.9;border-left:2px solid var(--stamp);padding-left:12px;margin:22px 0 24px}
.workstory .pline2 b{display:block;color:var(--ink);font-weight:400;letter-spacing:.13em}
.workstory .pline2 em{font-style:normal;color:#8b9096}
.workstory .pull{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;
 font-size:clamp(20px,2.2vw,30px);line-height:1.15;color:var(--ink);margin:32px 0 18px}
.peekmore{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--graphite);border-bottom:1px solid var(--hair);padding-bottom:2px}
.peekmore:hover{color:var(--ink);border-color:var(--ink)}
/* Passwortformular */
.mkperson{margin:0 0 16px;aspect-ratio:4/5;overflow:hidden;background:#d7d3cb}
.mkperson img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mkperson:hover img{transform:scale(1.04)}
.pwgate{padding-top:clamp(40px,6vw,90px)}
.pwgate .lead-p{font-size:17px;line-height:1.6;color:#22262a;max-width:42ch;margin-bottom:26px}
.pwform{display:flex;border-bottom:1px solid var(--ink);max-width:420px}
.pwform input{flex:1;min-width:0;background:transparent;border:0;font:inherit;font-size:17px;padding:11px 0;color:var(--ink)}
.pwform input:focus{outline:0}
.pwform button{background:transparent;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;
 letter-spacing:.15em;text-transform:uppercase;padding-left:14px;color:var(--ink)}
.pwask{font-size:15.5px;color:var(--graphite);max-width:38ch;margin-bottom:18px}
.pwask a{text-decoration:underline}
.groupline{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
 margin:clamp(44px,5vw,72px) 0 0;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.groupline h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
 font-size:clamp(26px,3.4vw,44px);line-height:.95;margin:0}
.groupline .no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.workitem+.workitem{padding-top:0}
.workitem{scroll-margin-top:80px}
.workitem.alt{background:#e3dfd7}
.workgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.workitem.alt .workgrid{direction:rtl}
.workitem.alt .workgrid>*{direction:ltr}
.workshot{aspect-ratio:16/10;overflow:hidden;background:#d9d5cc}
.workshot{display:block}
.workshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.workshot:hover img,a.workshot:focus-visible img{transform:scale(1.04)}
.workbody h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;
 font-size:clamp(20px,1.9vw,27px);margin:0 0 12px}
.workbody p{max-width:60ch}
.worknote{border-left:1px solid var(--hair);padding-left:16px;color:var(--graphite);font-size:15px;margin-top:18px}
.workbody .facts{margin-top:26px}
@media (max-width:900px){
.workgrid{grid-template-columns:1fr}
.workitem.alt .workgrid{direction:ltr}
}
.clientrow{margin:clamp(30px,3.4vw,44px) 0 clamp(26px,3vw,40px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid #2c3237}
.workpeek{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);margin:0 0 22px}
.peek{display:block;color:var(--paper)}
.peek .pshot{display:block;aspect-ratio:16/10;overflow:hidden;background:#20262b;margin-bottom:14px}
.peek .pshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s}
.peek:hover .pshot img,.peek:focus-visible .pshot img{transform:scale(1.05);opacity:.92}
.peek b{border-bottom:1px solid transparent;transition:border-color .2s;display:inline-block}
.peek:hover b{border-color:var(--paper)}
.peek .slate{color:#7f9aa6;display:block;margin-bottom:6px}
.peek b{display:block;font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;
 font-size:clamp(15px,1.4vw,19px);line-height:1.15}
.peek em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:#8d949a;margin-top:8px}
@media (max-width:900px){.workpeek{grid-template-columns:1fr;gap:26px}}
.clientrow .mklink{margin-top:18px;border-color:#4a5157}
.clientrow .mklink:hover{border-color:var(--paper)}
.clientrow p{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.01em;
 font-size:clamp(13px,1.25vw,16px);line-height:1.85;color:#b9bfc4;margin:10px 0 0;max-width:none}
@media (max-width:900px){.clientrow p{line-height:1.9;font-size:13px}}
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2c3237;border:1px solid #2c3237;overflow:hidden}
.svc>div{background:var(--ink);padding:clamp(26px,2.6vw,34px)}
.svc-ico{display:block;color:#7f9aa6;margin-bottom:14px}
.svc h4{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(19px,1.7vw,24px);margin:10px 0 10px}
.svc p{color:#b6bbbf;font-size:16px;line-height:1.55;max-width:46ch}
.kit{display:grid;grid-template-columns:.62fr 1.18fr .5fr;gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(34px,4vw,54px);padding-top:clamp(26px,3vw,38px);border-top:1px solid #2c3237}
.kit .kitshot{margin:0;aspect-ratio:4/5;overflow:hidden;background:#20262b}
.kit .kitshot img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.kit{grid-template-columns:1fr}.kit .kitshot{max-width:260px}}
.kit h4{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(19px,1.7vw,24px);margin-top:10px}
.kit p{color:#b6bbbf;font-size:16px;max-width:60ch}
.kit p+p{margin-top:14px}
.kit .gear{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kit .gear span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#cdd1d4;border:1px solid #3a4147;padding:6px 10px;border-radius:999px}
.mklink{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid var(--paper);padding-bottom:3px}

.bio{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(30px,5vw,80px);align-items:stretch;margin-top:0}
.bio .portrait{background:#1e2429;position:relative;overflow:hidden;min-height:100%}
.bio .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bio .portrait span{color:#6d757c;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:14px}
.bio p{font-size:clamp(18px,1.5vw,21px);color:#cdd1d4;max-width:54ch}
.bio p+p{margin-top:16px}
.bio p:first-of-type{margin-top:0}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#2c3237;border:1px solid #2c3237;margin-top:30px}
.facts>div{background:var(--ink);padding:16px 18px}
.facts b{display:block;font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;margin-top:6px}

.call{border-top:1px solid #2c3237;margin-top:clamp(46px,6vw,80px);padding-top:clamp(28px,3.4vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.call h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(24px,2.6vw,38px);line-height:.95;letter-spacing:-.02em}
.call form{display:flex;border-bottom:1px solid #4a5157}
.call input{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);font:inherit;font-size:17px;padding:12px 0}
.call input:focus{outline:0}
.call button{background:transparent;border:0;color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding-left:16px}

footer{background:var(--ink);color:#8d949a;padding:34px 0 44px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--paper)}

.rv{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}

@media (max-width:1180px){ .mast nav:not(.mnav){display:none} .burger{display:block} }
@media (max-width:900px){
  .mast .lp{display:none}
  .burger{display:inline-block}
  .stills{grid-template-columns:repeat(2,1fr)}
  .still.full{aspect-ratio:16/9}
  .still .info{opacity:1;transform:none}
  .lb .nav{font-size:20px}
  .date{grid-template-columns:1fr;text-align:left}
  .date .right{align-items:flex-start;text-align:left;white-space:normal}
    .date .thumb{aspect-ratio:2/1}
  .films,.svc,.kit,.bio,.call,.upcoming{grid-template-columns:1fr}
  .ontour-grid{grid-template-columns:1fr 1fr}
  .ontour-text{grid-column:1 / -1}
  .ontour-lead{grid-template-columns:1fr}
  .how{columns:1}
  .ontour-grid .ontour-c{aspect-ratio:16/9}
}


/* ── Workshop-Detailseiten ── */

:root{--paper:#e9e6df;--ink:#14171a;--graphite:#4a4f54;--hair:#c6c2b9;--stamp:#2f5464;
--disp:'Archivo',system-ui,sans-serif;--body:'Newsreader',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;
--pad:clamp(18px,4vw,56px);--max:1400px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.slate{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.slate b{color:var(--ink);font-weight:500}
h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(26px,3.6vw,46px);line-height:.98}
h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em;margin-bottom:8px}
section{padding:clamp(54px,6.5vw,96px) 0;border-top:1px solid var(--hair)}
.reel{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:clamp(26px,3.4vw,44px)}
.reel .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--stamp)}

.mast{position:sticky;top:0;z-index:40;background:rgba(233,230,223,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:13px;padding-bottom:13px}
.mast .logo img{width:clamp(120px,15vw,164px)}
.mast nav{display:flex;gap:clamp(13px,1.5vw,24px)}
.mast nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:2px;border-bottom:1px solid transparent;white-space:nowrap}
.mast nav a:hover{border-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
 font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:12px 18px;border-radius:999px}
.btn:hover{opacity:.86}
.lang{position:relative;display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;
 padding:3px;background:transparent;line-height:1;flex:none}
.lang button{position:relative;z-index:2;background:none;border:0;cursor:pointer;padding:6px 11px;border-radius:999px;
 font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);
 transition:color .25s}
.lang button.on{color:var(--paper)}
.lang i{position:absolute;z-index:1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;
 background:var(--ink);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.lang.de i{transform:translateX(100%)}
.lang:hover{border-color:var(--ink)}

.opening{position:relative;height:min(72svh,660px);min-height:430px;overflow:hidden;background:#0e1114;display:flex;flex-direction:column;justify-content:flex-end}
.opening>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opening .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,17,20,.25),rgba(14,17,20,0) 42%,rgba(14,17,20,.8))}
.opening .line{position:relative;z-index:3;padding:0 var(--pad) clamp(22px,3vw,34px)}
.opening .op{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);
 background:rgba(233,230,223,.92);padding:5px 10px;border-radius:999px;display:inline-block;margin-bottom:14px}
.opening h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;
 font-size:clamp(40px,8vw,104px);line-height:.9;color:#eeece7}
.opening .when{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,236,231,.8);margin-top:12px;display:block}
.opening .ticker{position:relative;z-index:3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 padding:13px var(--pad);border-top:1px solid rgba(238,236,231,.28);background:rgba(10,12,14,.4);backdrop-filter:blur(6px)}
.opening .ticker .slate{color:rgba(238,236,231,.72)}.opening .ticker .slate b{color:#eeece7}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.facts>div{background:var(--paper);padding:20px 22px}
.facts b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.5vw,19px);text-transform:uppercase;margin-top:6px;letter-spacing:-.01em}
/* Projekte: wechselnde Zahl an Angaben — die Zeile füllt sich immer ganz */
/* Zellen füllen die Reihe immer ganz aus — keine angefangenen Zeilen */
.facts.work-facts{display:flex;flex-wrap:wrap}
.facts.work-facts>div{flex:1 1 190px;min-width:0}
@media (max-width:700px){.facts.work-facts>div{flex-basis:45%}}
.lead{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3.5vw,44px)}
.lead p+p{margin-top:14px}
.proof{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);
 padding-left:12px;border-left:2px solid var(--stamp);line-height:1.6;margin-top:18px}

.how{list-style:none;counter-reset:s;columns:2;column-gap:clamp(28px,4vw,64px)}
.how li{break-inside:avoid;display:grid;grid-template-columns:auto 1fr;gap:0 14px;padding:0 0 20px;counter-increment:s}
.how li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--stamp);padding-top:4px}
.how li b{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px}
.how li span{grid-column:2;font-size:15.5px;color:#2a2e32;margin-top:4px;display:block}

.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.two ul{list-style:none}
.two li{padding:11px 0;border-bottom:1px solid var(--hair);font-size:15.5px;color:#2a2e32}
.two li.no{color:var(--graphite)}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal figure{position:relative;overflow:hidden;background:#d7d3cb;aspect-ratio:4/5;margin:0}
.gal figure.full{grid-column:1 / -1;aspect-ratio:2.4/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
 text-transform:uppercase;color:#eeece7;text-shadow:0 1px 8px rgba(0,0,0,.8);opacity:0;transition:opacity .35s}
.gal figure:hover figcaption{opacity:1}

details{border-bottom:1px solid var(--hair);padding:16px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
 font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px}
summary::after{content:"+";font-family:var(--mono);color:var(--stamp)}
details[open] summary::after{content:"–"}
details .a{margin-top:10px;font-size:16px;color:#2a2e32;max-width:74ch}
details .a ul{margin:8px 0 0 18px}
details .a li{padding:3px 0}

.booking{background:var(--ink);color:var(--paper)}
.booking h2{color:var(--paper)}
.booking .reel{border-color:#2c3237}
.booking .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.tiers .tier{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 0;border-bottom:1px solid #2c3237;align-items:baseline}
.tiers .tier .amt{font-family:var(--disp);font-weight:600;font-size:22px}
.tiers .tier.now{color:#eeece7}
.tiers .tier.now .amt{color:#eeece7}
.tiers .tier:not(.now){color:#8d949a}
.booking p{color:#b6bbbf;font-size:16px;max-width:56ch}.booking p+p{margin-top:12px}
.booking .btn{background:var(--paper);color:var(--ink);margin-top:22px}
.booking .slate{color:#8d949a}
.pricenote{font-size:13px;line-height:1.7;color:#8d949a;margin-top:18px;max-width:56ch}

.opnote b{color:var(--ink);font-weight:400}
.opnote+.opnote{margin-top:10px}
.opnote{color:var(--graphite);font-size:14px;line-height:1.75;margin-top:28px;max-width:96ch}
footer{background:var(--ink);color:#8d949a;padding:32px 0 44px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--paper)}
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--stamp);outline-offset:3px}
@media (max-width:1180px){ .mast nav:not(.mnav){display:none} .burger{display:block} }
@media (max-width:900px){
 .facts{grid-template-columns:1fr 1fr}
 .lead,.two,.booking .grid{grid-template-columns:1fr}
 .how{columns:1}
 .gal{grid-template-columns:repeat(2,1fr)}
 .gal figure.full{aspect-ratio:16/9}
}

.contactrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;
 margin-top:clamp(44px,6vw,84px);padding-top:clamp(26px,3vw,38px);border-top:1px solid #2c3237}
.contactrow h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);
 line-height:.98;letter-spacing:-.02em;margin:10px 0 12px}
.contactrow p{color:#b6bbbf;font-size:16px;max-width:50ch}
.contactrow .mail{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(19px,2.2vw,28px);
 letter-spacing:-.03em;border-bottom:2px solid #4a5157;display:inline-block;padding-bottom:4px;color:var(--paper)}
.contactrow .mail:hover{border-color:var(--paper)}
@media (max-width:900px){.contactrow{grid-template-columns:1fr}}


.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,56px)}
/* Karussell ab fünf Stimmen: eine Reihe, seitlich scrollbar,
   mit Fangpunkten. Ohne Skript sichtbar und bedienbar. */
.vcar{position:relative;margin-top:6px}
.vtrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,calc(33.333% - 26px));
 gap:clamp(24px,3.4vw,56px);overflow-x:auto;scroll-snap-type:x mandatory;
 scrollbar-width:none;padding-bottom:4px}
.vtrack::-webkit-scrollbar{display:none}
.vtrack .voice{scroll-snap-align:start}
.vnav{display:flex;gap:10px;margin-top:22px}
.vnav button{background:transparent;border:1px solid var(--hair);border-radius:999px;width:40px;height:40px;
 cursor:pointer;color:var(--graphite);font-size:15px;line-height:1;transition:border-color .2s,color .2s}
.vnav button:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:900px){
 .vtrack{grid-auto-columns:minmax(240px,86%)}
 .vnav{display:none}
}
.voice{margin:0;padding-top:18px;border-top:1px solid var(--hair)}
.voice blockquote{font-family:var(--body);font-style:italic;font-size:clamp(16px,1.4vw,18.5px);
 line-height:1.45;margin:0;color:#22262a}
.voice blockquote::before{content:"\201C"}
.voice blockquote::after{content:"\201D"}
.voice figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--graphite);margin-top:14px}
@media (max-width:900px){.voices{grid-template-columns:1fr}}

.call-sub{color:#b6bbbf;font-size:16px;margin-top:10px;max-width:52ch}
.credits .up-form{border-bottom-color:var(--paper);margin-top:22px}
.credits .up-form input{color:var(--paper)}
.credits .up-form input::placeholder{color:#6a7278}
.credits .up-form button{color:var(--paper)}

.soe-msg{margin-top:10px;font-size:13.5px;line-height:1.5;min-height:1.2em}
.soe-msg.ok{color:var(--stamp)}
.soe-msg.err{color:#8c3b32}
.credits .soe-msg.ok{color:#9dc4d6}
.credits .soe-msg.err{color:#d99b93}
.soe-signup.busy{opacity:.6;pointer-events:none}


/* ── Ergänzungen (September 2026) ───────────────────────────
   Ein Satz Werte für alle Seiten; die Datei enthält zwei
   Stylesheets, unten gewinnt. Zusätzlich: Bildnachweis im
   Kopfbild, Zeile über der Bildstrecke, Porträt ohne Schnitt. */
.mast .logo img{width:clamp(120px,15vw,168px)}
.opening .marks .br{bottom:16px;right:var(--pad);font-size:9.5px;color:rgba(231,228,221,.62);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.galnote{margin-top:clamp(34px,4vw,56px);color:var(--graphite);font-size:15px}
.voice blockquote{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.voice.offen blockquote{display:block;-webkit-line-clamp:none}
.voice .mehr{display:inline-block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
 font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--stamp);
 border-bottom:1px solid currentColor}
.voice .mehr:hover{color:var(--ink)}
.voice::before{content:"\201D";display:block;font-family:var(--body);font-size:38px;line-height:.6;color:var(--stamp);opacity:.55;margin-bottom:6px}
.bio{align-items:start}
.bio .portrait{aspect-ratio:2/3;min-height:0}
h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(26px,3.6vw,46px);line-height:.98}
.mast nav{display:flex;gap:clamp(13px,1.5vw,24px)}
.opening{height:min(72svh,660px);min-height:430px}
.opening-home{height:calc(100svh - var(--mast,58px));min-height:520px}
.mast .logo{flex:none}
.opening h1.viel{font-size:clamp(30px,4.4vw,58px);font-weight:700;letter-spacing:-.018em;line-height:1}
.opening h1.mittel{font-size:clamp(34px,6vw,80px);font-weight:700;letter-spacing:-.026em}
.up-list label.consent{padding:0;border-bottom:0}
.up-list label.consent span{font:inherit;letter-spacing:normal;text-transform:none}
.facts b a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(20,23,26,.35)}
.facts b a:hover{text-decoration-color:currentColor}
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
/* Hero-Text auf denselben Block wie Menü und Inhalt. Bild, Verlauf und
   die Leiste bleiben randlos; nur was Text trägt, rückt auf die Kante
   von Logo, Menü und den Überschriften darunter. Unter 1400 px + Rand
   ändert sich nichts. */
.opening .line{padding-left:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));padding-right:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)))}
.opening .ticker,.opening .stamp,.stamp{padding-left:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));padding-right:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)))}
.opening .marks .tl{left:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)))}
.opening .marks .tr,.opening .marks .br{right:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)))}
.opening h1{text-shadow:0 2px 30px rgba(0,0,0,.55)}
/* Zwei Aufnahmen bei der Arbeit, als leiser Nachsatz unter dem Text
   und über der Faktenzeile. Ort steht darunter. */
.bio .meshots{grid-column:1 / -1;margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:1fr 1fr 2fr;gap:clamp(10px,1.2vw,18px);align-items:end}
.bio .meshots figure{margin:0}
.bio .meshots img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.bio .meshots .shotnote{margin:0 0 4px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(238,236,231,.6)}
@media (max-width:700px){.bio .meshots{grid-template-columns:1fr 1fr}.bio .meshots .shotnote{grid-column:1 / -1;margin:10px 0 0}}
/* Media Kit: zweites Pressefoto unter dem grossen, halbe Breite —
   passt genau in die Hoehe, die die Textspalte daneben ohnehin hat. */
.lead .portraits{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px)}
.lead .portrait-alt{margin:0;width:50%}
.lead .portrait-alt img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.lead .portrait-alt figcaption{margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
@media (max-width:820px){.lead .portrait-alt{width:100%}}
/* Eine Spaltenbreite für die ganze Seite. style.css enthält zwei
   Stylesheets mit 1400 und 1500 — hier gilt 1400 für alles. */
:root{--max:1400px}
/* Sprunglink: nur sichtbar, wenn er den Tastaturfokus hat. */
.zuminhalt{position:absolute;top:0;left:0;z-index:100;background:var(--ink);color:var(--paper);
 font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
 padding:12px 18px;text-decoration:none;
 width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zuminhalt:focus{width:auto;height:auto;overflow:visible;clip-path:none}
/* Das offene Menü lag über der Kopfleiste — damit war der Knopf zum
   Schließen mit Maus und Finger nicht mehr erreichbar. Leiste nach
   oben, Menü darunter. */
.mnav{z-index:45}
.mast{z-index:60}
/* Die Leistungs- und Formatblöcke standen als H4 unter einer H2 —
   eine Ebene übersprungen. Jetzt H3, Aussehen bleibt wie gehabt. */
.svc h3,.formats h3{font-size:clamp(19px,1.7vw,24px);margin:10px 0}
/* Zwischenüberschriften im Projekttext sind jetzt H2 (vorher H3, eine
   Ebene übersprungen). Aussehen bleibt das der alten H3. */
.workstory h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;
 font-size:clamp(17px,1.6vw,21px);letter-spacing:-.01em;line-height:1.25;margin:26px 0 8px}
#inhalt{scroll-margin-top:80px}
/* Der Hero-Satz war ein <p>; damit hatte die Startseite gar keine H1.
   Jetzt ist es eine H1, die aussieht wie vorher der Absatz. */
.opening .line h1.claimline{font-family:var(--body);font-style:italic;font-weight:300;
 text-transform:none;letter-spacing:normal;color:#eeece7;font-size:clamp(26px,4.4vw,64px);
 line-height:1.06;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.head h1{font:inherit;margin:0}
/* ── Kopfzeile auf dem Handy ────────────────────────────────
   Bis 760 px passten Logo, Sprache, Social, Termin-Knopf und Burger
   nicht nebeneinander; nichts davon schrumpfte, also lief die Leiste
   aus dem Bild (390 px Fenster, 454 bzw. 635 px Leiste). Auf dem Handy
   bleiben Logo, Sprache und Burger — alles andere steht im Menü,
   im Text der Seite und im Fuß. */
@media (max-width:760px){
  .mast .social,.mast .wrap>.btn{display:none}
  .mast .wrap{gap:14px}
}
/* Die Reiseliste stand auch auf dem Handy zweispaltig und schob den
   ganzen Block über den Rand. */
@media (max-width:640px){
  .up-cols{grid-template-columns:1fr}
}
@media (max-width:380px){
  .mast .logo img{width:100px}
  .mast .wrap{gap:10px}
}
/* Lange zusammengesetzte Wörter („Verbraucherstreitbeilegung“) sprengten
   auf schmalen Displays die Zeile. */
h1,h2,h3,h4,.mail{overflow-wrap:break-word}
/* Impressum und Datenschutz haben die Breite der Kopfleiste fest
   verdrahtet; hier folgt sie derselben Spalte wie überall. */
.mast .wrap{max-width:var(--max)}
header>.wrap{max-width:var(--max)}
/* Der Kontaktblock unter den Projekten hat nur die Mailadresse. Ohne
   zweite Spalte, ohne verwaiste Vorzeile, ohne doppelte Trennlinie. */
.contactrow.knapp{grid-template-columns:1fr;border-top:0;padding-top:clamp(16px,2vw,24px)}
.contactrow.knapp .mail{font-size:clamp(17px,1.5vw,21px)}
.consent{max-width:none}
.up-list .optin{max-width:none;font-size:12.5px;line-height:1.6;color:var(--graphite)}
.bio>.facts{grid-column:1 / -1;margin-top:clamp(26px,3vw,40px);grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.bio>.facts{grid-template-columns:1fr 1fr}}

/* ── Schmale Displays ───────────────────────────────────────
   Bei 320–430 px liefen mehrere Raster über den Rand: die Faktenzeilen
   (zweispaltig, je ~105 px, deutsche Werte passen dort nicht), die
   Kanalübersicht im Media Kit und lange URLs in der Datenschutz-
   erklärung. Unter 480 px steht alles davon einspaltig, und lange
   Wörter dürfen umbrechen. */
@media (max-width:480px){
  .facts{grid-template-columns:1fr}
  .bio>.facts{grid-template-columns:1fr}
  .facts.work-facts>div{flex-basis:100%}
  .chan{grid-template-columns:1fr}
  .gate-back{display:none}
}
.facts b,.facts span,.chan .h,.chan .n{overflow-wrap:break-word}
.mail,.contactrow a,.contact a{overflow-wrap:anywhere}
/* Quellenangaben in den Rechtstexten sind ungetrennte Adressen. */
main.wrap p,main.wrap li,main.wrap a{overflow-wrap:anywhere}

/* ── Antippbare Flächen ─────────────────────────────────────
   Sprachschalter (37 × 25), Menüknopf (68 × 34) und das Kreuz in der
   Lightbox (61 × 16) waren mit dem Daumen zu klein. Die Trefferfläche
   wächst über ein unsichtbares Feld auf 44 px Höhe — sichtbar ändert
   sich nichts, das Layout bleibt unberührt. */
.lang button,.burger,.lb .close{position:relative}
.lang button::after,.burger::after,.lb .close::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%)}
/* Die Rechtslinks im Menü standen bei 26 px Höhe. */
.mnav-foot a{display:inline-block;padding:14px 0}
/* Auch das Logo ist ein Verweis; die Trefferfläche reicht jetzt auf 44 px. */
.mast .logo{position:relative}
.mast .logo::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ── Media Kit ──────────────────────────────────────────────
   Diese Regeln standen bisher nur in der Demo-Datei media-kit.html.
   Im WordPress wäre die Seite ohne sie ungestaltet gewesen: Zahlen,
   Balken, Ringe und die Kanalzeile hatten keine einzige Regel.
   Gekapselt über body.mk (siehe page-media-kit.php), weil .bar auch
   in der Lightbox und .note auch auf der Newsletter-Seite vorkommt. */
.mk .opening p{color:rgba(238,236,231,.85);font-size:clamp(17px,1.7vw,21px);max-width:44ch;margin-top:14px}
.mk .lead .portrait{overflow:hidden;background:#d7d3cb}
.mk .chan{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.mk .chan a{background:var(--paper);padding:22px;display:block;transition:background .25s}
.mk .chan a:hover{background:#e3e0d8}
.mk .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-bottom:26px}
.mk .kpis div{background:var(--paper);padding:24px}
.mk .kpis b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1}
.mk .kpis span{display:block;margin-top:8px}
.mk .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.mk .bar{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;gap:10px;align-items:center;padding:7px 0}
.mk .bar .bl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase}
.mk .bar .bt{height:4px;background:#d7d3cb;position:relative;overflow:hidden}
.mk .bar .bt i{position:absolute;inset:0 auto 0 0;background:var(--stamp)}
.mk .bar .bv{font-family:var(--mono);font-size:10.5px;color:var(--graphite)}
.mk .donut{display:flex;gap:22px;align-items:center;justify-content:center;padding:8px 0}
.mk .donut figure{text-align:center}
.mk .donut svg{transform:rotate(-90deg)}
.mk .donut figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-top:8px}
.mk .note{font-size:15px;color:#2a2e32;max-width:70ch;margin-top:22px}
.mk .note b{font-weight:400;font-family:var(--disp);text-transform:uppercase;font-size:13px;letter-spacing:-.01em;margin-right:4px}
.mk .two li b{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:13px;margin-right:8px}
@media (max-width:900px){
  .mk .chan{grid-template-columns:1fr 1fr}
  .mk .kpis,.mk .cols3{grid-template-columns:1fr}
}
@media (max-width:480px){
  .mk .chan{grid-template-columns:1fr}
}

/* Vier Regeln, die ebenfalls nur in der Demo standen. */
.consent input:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.up-list label:hover span{color:var(--stamp)}
.credits .consent:hover input{border-color:var(--paper)}
.workshot .ph{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8f8b82}
a.workshot:hover .ph{color:var(--ink)}

/* Die Kundenliste im Media Kit hatte in beiden Paketen keine einzige Regel:
   Browser-Punkte hingen in den Rand, und der Zusatz („Reebok", „via …")
   stand ohne Absetzung hinter dem Namen — „Adidas Reebok" las sich falsch. */
.names{list-style:none;padding:0;margin:0}
.names li{padding:8px 0;border-bottom:1px solid var(--hair);font-size:15.5px;color:#2a2e32;line-height:1.35}
.names li:last-child{border-bottom:0}
.names li span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-top:4px}

/* Die Bilder tragen jetzt width/height im Markup (gegen Layoutsprünge beim
   Laden). Damit die CSS-Breite nicht gegen die Höhe aus dem Attribut läuft: */
img{height:auto}
/* Nachtrag: .chan .n/.h standen im Theme nur in einer Umbruch-Regel, ohne
   eigene Typografie — die Zahlen wären als Fließtext erschienen. */
.mk .chan .n{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;margin:8px 0 2px}
.mk .chan .h{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--graphite)}
.mk .lead{align-items:start}

/* ── Teil-A-Seiten: Startseite, Projektseiten, Projektübersicht ──────
   style.css enthält zwei vollständige Stylesheets. Das zweite (ab
   „Workshop-Detailseiten") steht hinten und gewinnt überall — auch dort,
   wo es andere Werte hat als das erste. Für Startseite und Projektseiten
   sind das die falschen Werte; die Demo zeigt sie mit den Werten des
   ersten Stylesheets. Gemessen wurde gegen die Demo-Seiten, Eigenschaft
   für Eigenschaft im Browser. Gekapselt über die Body-Klassen, die
   WordPress ohnehin setzt. */
body.home,body.single-work,body.page-template-page-work{--paper:#e7e4dd;line-height:1.5}
.home .mast,.single-work .mast,.page-template-page-work .mast{background:rgba(231,228,221,.93)}
.home .mast nav,.single-work .mast nav,.page-template-page-work .mast nav{gap:clamp(13px,1.5vw,26px)}
.home .mast .logo img,.single-work .mast .logo img,.page-template-page-work .mast .logo img{width:clamp(120px,15vw,168px)}
.home section,.single-work section,.page-template-page-work section{padding:clamp(64px,8vw,124px) 0}
.home .reel,.single-work .reel,.page-template-page-work .reel{margin-bottom:clamp(28px,4vw,52px)}
.home .rv,.single-work .rv,.page-template-page-work .rv{transition:opacity .8s ease,transform .8s ease}
.home footer,.single-work footer,.page-template-page-work footer{padding:34px 0 44px}
.home .opening .veil,.single-work .opening .veil,.page-template-page-work .opening .veil{background:linear-gradient(180deg,rgba(14,17,20,.2),rgba(14,17,20,0) 38%,rgba(14,17,20,.78))}
.home .opening .ticker,.single-work .opening .ticker,.page-template-page-work .opening .ticker{background:rgba(10,12,14,.38)}
/* In der Übersicht steht zwischen zwei Projekten ein voller Abstand. */
.page-template-page-work .workitem+.workitem{padding-top:clamp(64px,8vw,124px)}

/* Faktenzeile: dunkel im Über-mich-Block der Startseite, helle Chips auf
   den Projektseiten. Die Spaltenzahl regelt weiter .bio>.facts. */
.home .facts{background:#2c3237;border-color:#2c3237}
.home .facts>div{background:var(--ink);padding:16px 18px}
.facts.work-facts{display:flex;flex-wrap:wrap}
.facts.work-facts>div{flex:1 1 190px;min-width:0;padding:16px 18px}
.facts.work-facts b{font-size:16px;letter-spacing:normal}
@media (max-width:700px){.facts.work-facts>div{flex-basis:45%}}
@media (max-width:480px){.facts.work-facts>div{flex-basis:100%}}

/* Projektgalerien: Unterschrift als Verlaufsband über die volle Breite. */
.gal.workgal figcaption{left:0;right:0;bottom:0;padding:14px 14px 12px;letter-spacing:.12em;
 text-shadow:none;background:linear-gradient(to top,rgba(10,12,14,.75),transparent)}

/* Die Terminliste stand im Theme noch in der ersten, gröberen Fassung. */
.up-list label{align-items:baseline;padding:10px 0}
.up-list label span{font-size:13.5px;letter-spacing:-.01em;line-height:1.25;transition:color .2s}
.up-list label em{font-size:10px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.up-list label:hover span{color:var(--stamp)}
/* Der Haken im Kästchen fehlte: .up-list input war gesetzt, ::after nicht. */
.up-list label input{width:16px;height:16px;flex:none;border:1.5px solid #8b877d;border-radius:3px;background:#fff;position:relative;transform:translateY(2px)}
.up-list label input:checked{background:var(--stamp);border-color:var(--stamp)}
.up-list label input:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;
 border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* Weitere Einzelwerte, die zwischen Theme und Demo auseinanderliefen. */
.workhead{background:var(--ink)}
.workstory{margin-top:clamp(26px,3vw,40px)}
.workmain .workstory{margin-top:0}
.workshot{display:grid;place-items:center}
.how li b{letter-spacing:normal}
.home .how li b{letter-spacing:-.01em}
/* Der Vorspann auf der Projektübersicht ist ein Fließtext, keine Hero-Zeile. */
.page-template-page-work .opening .line p{font-style:normal;font-family:var(--body);
 font-size:clamp(15px,1.5vw,19px);line-height:1.5;max-width:52ch;text-shadow:none}
/* Die Faktenzeile im Über-mich-Block: Schriftgrad wie in der Demo. */
.home .facts b{font-size:16px;letter-spacing:normal}
/* Media Kit setzt Display-Typo eine Spur kleiner als der Rest der Seite. */
.mk .cols3 h3,.mk .two h3{font-size:clamp(16px,1.5vw,20px);margin-bottom:10px}
.mk .opening h1{font-size:clamp(38px,7vw,92px)}

/* ── Rechtsseiten ───────────────────────────────────────────
   Impressum und Datenschutz bringen eigene Zwischenüberschriften mit.
   Ohne eigene Regel erben die das H2 der Seite — 46 px über einer
   Adresszeile. Beide Pakete zeigten das. */
.legal{font-size:17px;line-height:1.65;color:#22262a}
.legal h2{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:19px;
 letter-spacing:-.01em;line-height:1.3;margin:34px 0 10px;color:var(--ink)}
.legal h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:15px;
 letter-spacing:normal;line-height:1.35;margin:22px 0 6px;color:var(--ink)}
.legal h4{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:13px;
 letter-spacing:.02em;margin:18px 0 6px;color:var(--ink)}
.legal p,.legal li{font-size:17px;line-height:1.65;color:#22262a;margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 12px 20px}
.legal a{text-decoration:underline;text-underline-offset:2px}

/* ── Kopfzeile zwischen Burger und voller Breite ─────────────
   Logo, neun Menüpunkte, Sprachschalter und vier Social-Icons brauchen
   zusammen rund 1400 px — auf Deutsch mehr als auf Englisch. Zwischen
   1180 px (ab da greift der Burger) und 1400 px lief die Zeile über den
   rechten Rand hinaus, die Seite bekam eine waagerechte Bildlaufleiste.
   Die Social-Icons stehen auch in der Fußzeile, sie weichen zuerst. */
@media (max-width:1400px){ .mast .social{display:none} }
/* Sprungziele nicht unter die klebende Kopfzeile schieben — gilt für die
   Ankerlinks im Menü und für den Sprachwechsel, der die Stelle mitnimmt. */
section[id],header[id],[id].workitem{scroll-margin-top:calc(var(--mast,58px) + 10px)}

/* ── Über mich ───────────────────────────────────────────────
   Der Text stand mit 21 px als einziger Block im dunklen Band aus der
   Reihe — Leistungen und Ausrüstung daneben laufen mit 16 px. Und weil
   die Textspalte höher wurde als das Porträt, hing rechts Text neben
   nichts. Jetzt gleiche Größe wie die Nachbarn, und das Bild zieht sich
   auf die Höhe der Spalte, falls der Text doch länger wird. */
.bio p{font-size:16px;line-height:1.62;max-width:64ch}
.bio{align-items:stretch}
.bio .portrait{min-height:100%}
/* Der Vorspann bei „Unterwegs" stand mit 31 px weit über allem anderen im
   selben Block (16 px Fließtext, 15,5 px Ablauf). Jetzt eine Stufe darüber
   statt zwei. */
.ontour-text .claim{font-size:clamp(18px,1.6vw,22px);line-height:1.45}
/* Die Anmeldung war kaum als Formular zu erkennen: eine Linie, ein Wort.
   Der Knopf bekommt jetzt eine Fläche, damit klar ist, wo man klickt. */
.up-form{align-items:center;gap:10px;border-bottom-width:1.5px}
.up-form input::placeholder{color:#8b877d}
.up-form button{background:var(--ink);color:var(--paper);border-radius:999px;
 padding:10px 18px;margin:6px 0 8px;transition:background .2s}
.up-form button:hover{background:var(--stamp)}
.credits .up-form button{background:var(--paper);color:var(--ink)}
.credits .up-form button:hover{background:var(--stamp);color:var(--paper)}
/* Das Einwilligungskästchen im dunklen Block war ein dunkles Quadrat auf
   dunklem Grund — praktisch unsichtbar. Heller Rand, klare Fläche im
   angehakten Zustand, und etwas größer. */
/* .call input setzt border:0 — deshalb reichte border-color nicht, das
   Kästchen hatte gar keinen Rahmen mehr. Hier komplett gesetzt. */
.credits .consent input{width:20px;height:20px;flex:0 0 auto;border:1.5px solid #b6bbbf;background:transparent}
.credits .consent:hover input,.credits .consent input:focus-visible{border-color:var(--paper)}
.credits .consent input:checked{background:var(--paper);border-color:var(--paper)}
.credits .consent input:checked::after{border-color:var(--ink);left:6.5px;top:2.5px}
.credits .consent span{color:#cdd1d4}
.credits .up-form input::placeholder{color:#9aa1a7}
/* Sendungsliste im Projekttext — wie die Listen im Media Kit, ohne Punkte. */
.workstory ul.sendungen{list-style:none;margin:18px 0 24px;max-width:60ch}
.workstory ul.sendungen li{padding:9px 0;border-bottom:1px solid var(--hair);font-size:16px;color:#22262a;line-height:1.4}
.workstory ul.sendungen li:last-child{border-bottom:0}
/* Der Verweis auf den Beleg stand mit style="border-color:…" im Markup.
   WordPress liefert dazu eine eigene Regel aus — html :where([style*="border-color"])
   { border-style: solid } — und damit bekam der Link auf einmal einen Rahmen
   ringsherum statt nur der Unterstreichung. Jetzt über eine Klasse. */
.mklink-ink{color:var(--ink);border-bottom-color:var(--ink)}
.mklink-ink:hover{border-bottom-color:var(--stamp);color:var(--stamp)}

/* Der hervorgehobene Absatz im Media Kit. Die Regel stand nur in der Demo;
   im WordPress war der Absatz deshalb gewöhnlicher Fließtext. */
.quote{font-family:var(--body);font-style:italic;font-size:clamp(18px,1.6vw,21px);line-height:1.45;
 border-left:2px solid var(--stamp);padding-left:20px;margin:26px 0;max-width:52ch}

/* ── Sprachwahl: zwei Verweise statt eines Schalters ─────────
   Der Klick führt auf eine andere Adresse. Eine Pille mit Schieber sagt
   „an/aus" und war damit die falsche Form; jetzt sieht es aus, wie es sich
   verhält. Die alten Pillenregeln stehen weiter oben und werden hier
   überschrieben. */
.lang{border:0;border-radius:0;padding:0;gap:8px;font-family:var(--mono);font-size:11px;
 letter-spacing:.13em;text-transform:uppercase;background:none}
.lang i{display:none}
.lang span{color:var(--hair)}
.lang a{position:relative;padding:6px 2px;color:var(--graphite);border-bottom:1px solid transparent}
.lang a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.lang a.on{color:var(--ink);border-bottom-color:var(--ink)}
.lang:hover{border-color:transparent}
.credits .lang a,.mnav .lang a{color:#8d949a}
.credits .lang a.on,.credits .lang a:hover,.mnav .lang a.on,.mnav .lang a:hover{color:var(--paper);border-bottom-color:var(--paper)}
/* Trefferfläche bleibt bei 44 px. */
.lang a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
/* Auf 320 px passten Feld und Knopf nicht mehr nebeneinander — die Zeile
   schob den Block über den rechten Rand. Ab hier steht der Knopf darunter. */
@media (max-width:420px){
  .up-form{flex-wrap:wrap;gap:0}
  .up-form input{flex:1 1 100%}
  .up-form button{width:100%;margin:8px 0 10px}
}

/* Nachtrag: die zwei Verweise waren als Bedienelement zu leise. Sie stehen
   jetzt wieder in einer Kapsel, das aktive Kürzel gefüllt — sichtbar wie ein
   Schalter, im Verhalten aber weiterhin zwei echte Verweise. */
.lang{border:1px solid var(--hair);border-radius:999px;padding:3px;gap:0;background:none}
.lang span{display:none}
.lang a{padding:5px 11px;border-radius:999px;border-bottom:0;color:var(--graphite);transition:background .2s,color .2s}
.lang a:hover{color:var(--ink);border-bottom:0;background:rgba(20,23,26,.06)}
.lang a.on{background:var(--ink);color:var(--paper);border-bottom:0}
.lang a.on:hover{background:var(--ink);color:var(--paper)}
.lang:hover{border-color:var(--ink)}
.credits .lang,.mnav .lang{border-color:#3a4147}
.credits .lang a,.mnav .lang a{color:#8d949a;border-bottom:0}
.credits .lang a:hover,.mnav .lang a:hover{background:rgba(238,236,231,.08);color:var(--paper)}
.credits .lang a.on,.mnav .lang a.on{background:var(--paper);color:var(--ink)}
/* Die Menüpunkte tragen unten 2 px Polster, ihr Text sitzt dadurch 1,2 px
   höher als die Mitte ihrer Box. Die Kapsel bekommt denselben Versatz, sonst
   steht EN/DE sichtbar tiefer als der Rest der Zeile. */
.lang{margin-bottom:2px}

/* Sprachhinweis. Eine Zeile unter dem Kopf, in der Sprache, die der Browser
   bevorzugt — kein Umleiten, keine Ebene über der Seite. Sie gehört zur
   Kopfleiste, damit die Hero-Rechnung (100svh minus Kopfhöhe) stimmt, und
   verschwindet auf Klick. */
.langhint{border-top:1px solid var(--hair);background:rgba(20,23,26,.045)}
.langhint .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:7px;padding-bottom:7px}
.langhint a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--hair);padding-bottom:1px}
.langhint a:hover{border-bottom-color:var(--ink)}
.langhint .zu{position:relative;flex:none;border:0;background:none;padding:0 2px;margin:0;font-family:var(--mono);font-size:16px;line-height:1;color:var(--graphite);cursor:pointer}
/* Trefferfläche 44 px, ohne die Zeile höher zu machen. */
.langhint .zu::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.langhint .zu:hover{color:var(--ink)}
@media (max-width:520px){
  .langhint a{font-size:10px;letter-spacing:.06em}
  .langhint .wrap{gap:10px}
}

/* Die Seitenüberschrift auf einfachen Seiten war ein h2 — Impressum und
   Datenschutz hatten damit gar keine H1. Jetzt ist es eine, sie soll aber
   aussehen wie vorher. */
.reel h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
 font-size:clamp(26px,3.6vw,46px);line-height:.98;margin:0}