/* mikekarl.com, Entwurf 2 "Die Raute". Farben nur ueber Tokens, in allen vier Bloecken belegt. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/big-shoulders-display-700_900-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url(../fonts/big-shoulders-display-700_900.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}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-400_700-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/hanken-grotesk-400_700.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{--grund:#ffe500;--tinte:#0b0b08;--block:#0b0b08;--blocktext:#ffe500;--mischung:multiply;--logogrund:#0b0b08;--fokus:#0b0b08;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grund:#0b0b08;--tinte:#ffe500;--block:#ffe500;--blocktext:#0b0b08;--mischung:luminosity;--logogrund:#26261c;--fokus:#ffe500;color-scheme:dark}}
:root[data-theme="light"]{--grund:#ffe500;--tinte:#0b0b08;--block:#0b0b08;--blocktext:#ffe500;--mischung:multiply;--logogrund:#0b0b08;--fokus:#0b0b08;color-scheme:light}
:root[data-theme="dark"]{--grund:#0b0b08;--tinte:#ffe500;--block:#ffe500;--blocktext:#0b0b08;--mischung:luminosity;--logogrund:#26261c;--fokus:#ffe500;color-scheme:dark}
:root{--aus:cubic-bezier(.23,1,.32,1);--balken:clamp(5px,.75vw,12px);--rand:clamp(16px,3vw,44px)}

/* Grund */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;background:var(--grund);color:var(--tinte);overflow-x:clip;font:500 17px/1.55 'Hanken Grotesk',sans-serif}
img{max-width:100%;height:auto;display:block}
body,body *{font-variant-numeric:lining-nums}
a{color:inherit;text-underline-offset:.18em}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{text-wrap:balance;overflow-wrap:break-word}
p,li,dd,td{overflow-wrap:break-word;hyphens:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--tinte);color:var(--grund)}
:focus-visible{outline:3px solid var(--fokus,currentColor);outline-offset:3px}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag{white-space:nowrap;hyphens:manual}
h1,h2,h3,.gross{font-family:'Big Shoulders Display',sans-serif;font-weight:900;line-height:.95;letter-spacing:-.01em}

/* Auftritt: js/site.js setzt .warte und nimmt sie im Bild wieder weg. Ohne Skript bleibt alles sichtbar. */
.warte{opacity:0;transform:translateY(22px)}
[data-auftritt]{transition:opacity 600ms var(--aus),transform 600ms var(--aus)}
[data-auftritt="2"]{transition-delay:80ms}[data-auftritt="3"]{transition-delay:160ms}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.warte{opacity:1;transform:none}[data-auftritt]{transition:none}}

/* Kopf */
.leiste{position:sticky;top:0;z-index:20;background:var(--grund);display:flex;align-items:center;gap:clamp(10px,2vw,28px);padding:12px var(--rand)}
.markeblock{margin-right:auto;display:grid;gap:8px;min-width:0}
.motto{font-weight:600;font-size:clamp(13px,1.1vw,15px);line-height:1.4;hyphens:none;text-wrap:balance}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.marke svg{height:32px;width:auto;flex:none}
.marke span{font:900 var(--namegr,30px)/.74 'Big Shoulders Display',sans-serif;text-transform:uppercase;white-space:nowrap;transform:translateY(.02em)}
.hauptnav{flex:none;display:flex;gap:clamp(8px,2vw,28px)}
.hauptnav a{display:block;padding:12px 0;font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;transition:text-decoration-color 160ms ease}
.hauptnav a.active,.hauptnav a[aria-current]{text-decoration-color:currentColor}
@media (hover:hover){.hauptnav a:hover{text-decoration-color:currentColor}}
.farbknopf{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;transition:transform 160ms var(--aus)}
.farbknopf:active{transform:scale(.94)}

/* Startseite: Raute */
#ueber{padding:clamp(28px,4vw,56px) 0 0;position:relative;overflow-x:clip}
.raute{--sp:5;--zl:2;position:relative;display:grid;grid-template-columns:repeat(var(--sp),minmax(0,1fr));grid-auto-rows:1fr;gap:var(--balken);margin:0 calc(var(--rand) + 3vw);transform:skewX(-7deg)}
.steg,.balken{position:absolute;background:var(--tinte);z-index:-1}
.steg{top:-6%;bottom:-6%;width:var(--balken);left:calc(var(--k)*(100% + var(--balken))/var(--sp) - var(--balken))}
.balken{left:-12vw;right:-12vw;height:var(--balken);top:calc(var(--k)*(100% + var(--balken))/var(--zl) - var(--balken))}
.nurschmal{display:none}
@keyframes ziehen{from{transform:scaleX(0)}}@keyframes hoch{from{transform:scaleY(0)}}
.bewegt .balken{transform-origin:left;animation:ziehen 700ms var(--aus) calc(var(--k)*90ms - 90ms) both}
.bewegt .steg{transform-origin:top;animation:hoch 700ms var(--aus) calc(120ms + var(--k)*70ms) both}
@media (prefers-reduced-motion:reduce){.steg,.balken{animation:none!important}}
.feld{min-height:clamp(80px,11vh,140px);width:100%;padding:8px clamp(6px,1.4vw,20px);transition:background-color 180ms ease,color 180ms ease}
.feld span{display:block;transform:skewX(7deg);font:900 clamp(18px,2.5vw,42px)/.98 'Big Shoulders Display',sans-serif;hyphens:manual;overflow-wrap:anywhere;transition:transform 160ms var(--aus)}
.feld:active span{transform:skewX(7deg) scale(.97)}
.feld[aria-pressed="true"]{background:var(--block);color:var(--blocktext)}
@media (hover:hover){.feld:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--block) 14%,transparent)}.feld:hover span{transform:skewX(7deg) scale(1.07)}}
.antworten{padding:clamp(40px,5vw,72px) var(--rand) 0;display:grid;gap:clamp(40px,5vw,72px)}
.antwort{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px clamp(28px,5vw,80px);align-items:start}
.antwort[hidden]{display:none}
.antwort .gross{font-size:clamp(38px,5vw,80px);overflow-wrap:anywhere;hyphens:manual}
.antwort p{font-size:clamp(18px,1.5vw,22px);line-height:1.38;font-weight:600;margin-top:18px;max-width:34em}
.antwort figure{background:var(--grund);aspect-ratio:4/3;overflow:clip;clip-path:polygon(9.2% 0,100% 0,90.8% 100%,0 100%)}
.antwort img{width:100%;height:100%;object-fit:cover;mix-blend-mode:var(--mischung);filter:contrast(1.15)}
.zeigt{animation:zeigen 260ms var(--aus) both}
@keyframes zeigen{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.zeigt{animation:none}}

/* Startseite: Projekte und Stationen */
section{padding-block:clamp(56px,7vw,110px) 0}
.kapitel{font-size:clamp(52px,8.5vw,136px);text-transform:uppercase;padding-inline:var(--rand)}
.unter{padding-inline:var(--rand);font-weight:700;font-size:18px;margin-top:6px}
.gedimmt{color:color-mix(in srgb,var(--tinte) 38%,var(--grund))}
.gedimmt img{opacity:.35}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--balken);margin-top:clamp(28px,4vw,48px);background:var(--tinte);padding-block:var(--balken)}
.kachel{background:var(--grund);padding:clamp(18px,2.4vw,36px) var(--rand);text-decoration:none;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:10px 18px;align-content:start;transition:opacity 500ms ease,background-color 180ms ease,color 180ms ease}
.kachel.warte{transform:none}
.kachel h3{font-size:clamp(40px,5.4vw,84px);text-transform:uppercase;overflow-wrap:anywhere}
.kachel h3.klein{text-transform:none}
.kachel img{width:66px;height:66px;padding:6px;background:var(--logogrund)}
.kachel p{grid-column:1/-1;font-weight:600;font-size:18px}
.kachel .adresse{grid-column:1/-1;font-weight:800}
.kachel.treffer{background:var(--block);color:var(--blocktext)}
@media (hover:hover){.kachel:hover{background:var(--block);color:var(--blocktext)}}
.stationen{margin-top:clamp(28px,4vw,48px);padding-inline:calc(var(--rand) - clamp(12px,1.6vw,24px));display:grid;gap:clamp(8px,1.4vw,20px)}
.station{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:6px clamp(24px,4vw,64px);padding:clamp(12px,1.6vw,24px);transition:opacity 500ms ease,transform 600ms var(--aus),background-color 180ms ease,color 180ms ease}
.station.treffer{background:var(--block);color:var(--blocktext)}
@media (hover:hover){.station:hover{background:var(--block);color:var(--blocktext)}}
.station .gross{font-size:clamp(68px,10vw,152px);line-height:.78}
.station h3{font-size:clamp(28px,2.8vw,40px);line-height:1}
.zeit{display:block;font-weight:800;font-size:17px;margin-top:6px}
.station p{margin-top:12px;max-width:62ch}

/* Unterseiten: Rechtstexte und Sitemap */
.recht{padding:clamp(40px,6vw,96px) var(--rand) 0;max-width:calc(76ch + 2*var(--rand))}
.recht h1{font-size:clamp(48px,8vw,128px);text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto;margin-bottom:clamp(24px,3vw,44px)}
.recht h2{font-size:clamp(26px,2.6vw,36px);line-height:1;margin:1.6em 0 .5em}
.recht h3{font-size:clamp(21px,2vw,26px);line-height:1.05;margin:1.4em 0 .4em}
.recht h1+h2{margin-top:0}
.recht p,.recht li,.recht td{font-size:17px;line-height:1.6}
.recht p+p{margin-top:.8em}
.recht ul,.recht ol{margin:.6em 0 .8em;padding-left:1.2em;list-style:square}
.recht li+li{margin-top:.35em}
.recht a{font-weight:700;overflow-wrap:anywhere}
.recht table{border-collapse:collapse;margin:.4em 0 .8em}
.recht td{padding:4px 18px 4px 0;vertical-align:top}
.recht .linkliste,.recht .linkliste ul{list-style:none;padding-left:0;margin:0}
.linkliste{display:grid;gap:4px}
.linkliste a{display:inline-block;padding:10px 0;font:900 clamp(26px,3vw,40px)/1 'Big Shoulders Display',sans-serif;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:3px;transition:text-decoration-color 160ms ease}
@media (hover:hover){.linkliste a:hover{text-decoration-color:currentColor}}
.recht .linkliste ul{margin:4px 0 8px;padding-left:22px}
.linkliste ul a{font-size:clamp(20px,2vw,26px)}

/* Fuss */
.ende{margin-top:clamp(56px,7vw,110px);background:var(--block);color:var(--blocktext);padding:clamp(24px,3vw,40px) var(--rand) 24px}
.ende :focus-visible{outline-color:var(--blocktext)}
.fuss{display:flex;flex-wrap:wrap;gap:0 32px;justify-content:space-between;font-size:16px;font-weight:600}
.fusslinks{display:flex;flex-wrap:wrap;gap:0 16px}
.fuss a{display:inline-block;padding:11px 0;text-decoration:underline;text-underline-offset:.2em}
.fuss p{padding:11px 0}
.netz{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:clamp(18px,2.4vw,28px);margin-bottom:clamp(10px,1.4vw,16px);border-bottom:2px solid currentColor}
.laden{display:flex;flex-wrap:wrap;gap:12px}
.laden a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 18px 6px 14px;border:2px solid currentColor;border-radius:10px;text-decoration:none;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--aus)}
.laden svg{width:24px;height:26px;flex:none}
.laden small{display:block;font-size:11px;font-weight:600;line-height:1.3}
.laden b{display:block;font:900 21px/1 'Big Shoulders Display',sans-serif;letter-spacing:.01em}
.socials{display:flex;flex-wrap:wrap;gap:6px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--aus)}
.socials svg{width:20px;height:20px}
.laden a:active,.socials a:active{transform:scale(.96)}
@media (hover:hover){.laden a:hover,.socials a:hover{background:var(--blocktext);color:var(--block)}}

/* Schmal */
@media (max-width:820px){
 .hauptnav{gap:12px;font-size:15px}
 .hauptnav a:nth-child(1){display:none}
 .raute{--sp:2;--zl:5;margin:0 var(--rand);transform:skewX(-4deg)}
 .steg{top:-2%;bottom:-2%}.nurbreit{display:none}.nurschmal{display:block}
 .feld span{font-size:clamp(22px,6.4vw,38px);transform:skewX(4deg)}.feld:active span{transform:skewX(4deg) scale(.97)}
 .feld{min-height:68px;padding:6px 8px}
 @media (hover:hover){.feld:hover span{transform:skewX(4deg) scale(1.07)}}
 .antwort{grid-template-columns:minmax(0,1fr)}
 .antwort figure{clip-path:polygon(5.3% 0,100% 0,94.7% 100%,0 100%)}
 .kacheln{grid-template-columns:minmax(0,1fr)}
 .station{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
 .hauptnav a:nth-child(2){display:none}
 .marke svg{height:26px}.marke{gap:9px;margin-right:auto}
 .leiste{--namegr:24px;padding-block:10px;flex-wrap:wrap;row-gap:4px}
 .markeblock{display:contents}
 .marke span{transform:translateY(.05em)}
 .motto{order:9;flex-basis:100%;font-size:clamp(11px,3.5vw,13px)}
 .laden{gap:10px}.laden a{padding:6px 12px 6px 10px;gap:8px}.laden b{font-size:19px}
 .socials{display:grid;grid-template-columns:repeat(4,44px);gap:6px 18px}
}
@media (max-width:400px){
 .hauptnav a:nth-child(4){display:none}
 .leiste{column-gap:8px}.hauptnav{gap:10px;font-size:14px}.leiste .farbknopf{width:40px}
 .marke span{font-size:22px}.marke svg{height:24px}
}