:root{
--bg:#FFFFFF; --grey:#F1F1F1; --ink:#2B2B2A; --ink-2:#3C3C40; --ink-3:#6A6A70; --line:#2B2B2A; --hair:#D9D9DD;
--red:#CF2644; --red-soft:#FAE9EC; --on-red:#FFFFFF;
--sans:'Poppins',ui-sans-serif,system-ui,sans-serif;
--logo:'PT Sans Caption','PT Sans',ui-sans-serif,system-ui,sans-serif;
--brand:'Poppins',ui-sans-serif,system-ui,sans-serif;
--mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--serif:'Newsreader',Georgia,'Times New Roman',serif;
--rail:76px;
}
/* Diese dunklen Werte sind bewusst ausser Betrieb und kein Versehen.
weisslein-frontend.php haengt an jede Seite data-theme="light", deshalb greift
der Block hier nie - die Seite ist immer hell. So ist es entschieden: Der Auftritt
lebt von Weiss und dem Rot, eine automatisch abgeleitete dunkle Fassung war nie
abgestimmt. Die Werte bleiben stehen, damit ein spaeter bewusst gestalteter
Dunkelmodus einen Ausgangspunkt hat; dann in der PHP-Datei "dark" setzen oder den
Filter entfernen. Das Rot bleibt dabei #CF2644 - der Wert ist das Zeichen, und auf
Folie, Papier und Fahne gibt es die Wahl ohnehin nicht. Kontaktdaten kaemen auf
dunklem Grund in Ink mit rotem Zeichen davor, statt das Rot aufzuhellen.
(Erscheinungsbild-Handbuch, Stand 26.09.2026) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0F0F10; --grey:#1A1A1C; --ink:#F4F4F5; --ink-2:#C3C3C8; --ink-3:#85858C; --line:#F4F4F5; --hair:#2E2E33;
--red:#CF2644; --red-soft:#33141A; --on-red:#0F0F10;
}
}
:root[data-theme="dark"]{
--bg:#0F0F10; --grey:#1A1A1C; --ink:#F4F4F5; --ink-2:#C3C3C8; --ink-3:#85858C; --line:#F4F4F5; --hair:#2E2E33;
--red:#CF2644; --red-soft:#33141A; --on-red:#0F0F10;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;margin:0;overflow-x:hidden;font-weight:400;padding-left:var(--rail)}
@media (max-width:860px){body{padding-left:0}}
h1,h2,h3,h4{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
a{color:inherit}
.wl-wrap{max-width:1360px;margin:0 auto;padding-inline:40px}
@media (max-width:700px){.wl-wrap{padding-inline:20px}}
.wl-mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
/* section title with rule */
.wl-sec{padding-block:70px 60px}
@media (max-width:700px){.wl-sec{padding-block:44px 36px}}
.wl-sec .wl-title{font-size:clamp(30px,3vw,40px);font-weight:500;letter-spacing:-.02em;padding-bottom:14px;border-bottom:2px solid var(--line);margin-bottom:34px}
.wl-dotlink{font-family:var(--sans);font-size:14px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:0;cursor:pointer;color:var(--ink)}
.wl-dotlink::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);transition:background .15s,transform .15s}
.wl-dotlink:hover::before{background:var(--red);transform:scale(1.3)}
.wl-dotlink:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wl-dotlink:disabled{opacity:.35;cursor:not-allowed}
.wl-proto{background:var(--grey);font-family:var(--mono);font-size:11px;text-align:center;padding:7px 18px;color:var(--ink-2)}
/* RAIL (fixed sidebar, Dictum) */
.wl-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:30;border-right:1px solid var(--hair);background:var(--bg);display:grid;grid-template-rows:auto 1fr auto auto;align-items:center;justify-items:center;padding:22px 0 26px}
.wl-rail .wl-rb{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:4px;line-height:1}
.wl-rail .wl-rb em{font-style:normal;color:var(--red);font-size:8px;font-weight:600}
.wl-rail .wl-lines{display:grid;gap:5px}
.wl-rail .wl-lines i{display:block;width:1px;height:18px;background:var(--ink);opacity:.5}
.wl-rail .wl-hint{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);margin-bottom:22px}
.wl-rail .wl-burger{justify-self:center}
@media (max-width:860px){.wl-rail{display:none}}
/* NAV (mobile top bar) */
.wl-nav{display:none}
@media (max-width:860px){.wl-nav{display:block}}
.wl-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.wl-nav .wl-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.wl-nav .wl-hours{font-family:var(--mono);font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.wl-nav .wl-hours svg{width:14px;height:14px}
.wl-brand{font-family:var(--logo);font-weight:400;font-size:22px;letter-spacing:-.02em;text-decoration:none;display:flex;align-items:baseline;gap:4px;line-height:1;justify-self:center;white-space:nowrap}
.wl-brand em{font-style:normal;color:var(--red);font-size:9px;font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center}
.wl-burger{justify-self:end;width:40px;height:40px;border-radius:50%;background:var(--ink);border:none;cursor:pointer;display:grid;place-items:center;gap:0;padding:0}
.wl-burger i{display:block;width:16px;height:2px;background:var(--bg);margin:2px 0}
.wl-burger:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:700px){.wl-nav .wl-hours span{display:none}}
.wl-menu{position:fixed;inset:0;z-index:40;background:var(--bg);display:grid;grid-template-rows:76px 1fr auto;padding:0 40px 40px}
.wl-menu[hidden]{display:none}
.wl-menu .wl-top{display:flex;justify-content:flex-end;align-items:center}
.wl-menu ul{list-style:none;margin:0;padding:0;align-self:center}
.wl-menu li a{font-size:clamp(36px,7vw,84px);font-weight:500;letter-spacing:-.03em;line-height:1.1;text-decoration:none;display:inline-block;transition:color .15s}
.wl-menu li a:hover{color:var(--red)}
.wl-menu .wl-foot{font-family:var(--mono);font-size:12px;color:var(--ink-2);display:flex;gap:30px;flex-wrap:wrap}
@media (max-width:700px){.wl-menu{padding:0 20px 24px}}
/* HERO (rote Anzeige-Fläche) */
.wl-panel.wl-hero{text-align:left;background:var(--bg);color:#fff;border-right:none;--h1:clamp(52px,8.4vw,150px);overflow:hidden}
.wl-panel.wl-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:66%;background:var(--red);clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.wl-panel.wl-hero>.wl-kick,.wl-panel.wl-hero>h1,.wl-panel.wl-hero>.wl-tags{position:relative}
.wl-panel.wl-hero>h1{justify-self:start}
.wl-panel.wl-hero>.wl-scrollhint{z-index:1}
.wl-hero-logo{position:absolute;right:clamp(24px,5vw,80px);top:50%;transform:translateY(-50%);width:clamp(220px,26vw,420px)}
.wl-hero-logo img{width:100%;height:auto;display:block}
.wl-panel.wl-hero h1{font-size:var(--h1);font-weight:500;letter-spacing:-.05em;line-height:.88;position:relative;display:inline-block;z-index:1;color:#fff}
.wl-panel.wl-hero h1 .wl-l2{display:block;margin-left:.9em}
.wl-panel.wl-hero .wl-stamp{position:absolute;right:calc(var(--h1) * -.62);bottom:calc(var(--h1) * -.3);width:calc(var(--h1) * .58);height:calc(var(--h1) * .58);border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-family:var(--mono);font-size:calc(var(--h1) * .062);line-height:1.15;text-align:center;letter-spacing:.04em;transform:rotate(-12deg);box-shadow:0 20px 40px rgba(0,0,0,.18)}
.wl-panel.wl-hero .wl-stamp b{font-family:var(--sans);font-weight:600;font-size:3.2em;letter-spacing:-.04em;display:block;line-height:.9}
@media (prefers-reduced-motion:no-preference){.wl-panel.wl-hero .wl-stamp{animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:rotate(-12deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-6%)}}}
.wl-panel.wl-hero .wl-kick{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.85);margin:0 0 22px}
.wl-panel.wl-hero .wl-kick::before{content:"* "}
.wl-panel.wl-hero .wl-tags{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.85);margin:34px 0 0;letter-spacing:.04em}
.wl-panel.wl-hero .wl-tags i{font-style:normal;color:#fff;opacity:.6;margin:0 10px}
.wl-panel.wl-hero .wl-scrollhint{right:auto;left:clamp(24px,5vw,80px);color:rgba(255,255,255,.85)}
.wl-panel.wl-hero .wl-scrollhint::after{background:rgba(255,255,255,.7)}
@media (max-width:700px){.wl-panel.wl-hero h1{display:block}.wl-panel.wl-hero h1 .wl-l2{margin-left:.25em}.wl-panel.wl-hero .wl-stamp{display:none}}
@media (max-width:860px){.wl-panel.wl-hero{padding-bottom:140px}.wl-panel.wl-hero::before{width:100%;clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}.wl-hero-logo{position:absolute;right:auto;left:20px;top:auto;bottom:74px;transform:none;width:min(58vw,250px)}}
/* HORIZONTAL SCROLL (Dictum) */
.wl-hs{position:relative}
.wl-hs .wl-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.wl-hs .wl-track{display:flex;height:100%;will-change:transform}
.wl-panel{flex:0 0 100%;height:100%;position:relative;display:grid;align-content:center;padding:0 clamp(24px,5vw,80px);border-right:1px solid var(--hair)}
.wl-panel.wl-photo{padding:0;background:var(--grey);display:grid;place-items:end start}
.wl-panel.wl-photo .wl-ph{font-family:var(--mono);font-size:11px;color:var(--ink-3);position:absolute;top:24px;left:clamp(24px,5vw,80px)}
.wl-panel.wl-photo .wl-cap{position:relative;padding:0 clamp(24px,5vw,80px) 64px;max-width:70vw}
.wl-panel.wl-photo .wl-cap h2 span{color:var(--ink-3)}
.wl-panel.wl-photo .wl-cap h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5vw,80px);line-height:1;letter-spacing:-.02em;text-wrap:balance;max-width:14ch}
.wl-panel.wl-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(217,0,76,.10),transparent 60%),radial-gradient(50% 60% at 70% 40%,rgba(0,0,0,.06),transparent 70%);pointer-events:none}
.wl-scrollhint{position:absolute;right:clamp(24px,5vw,80px);bottom:34px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);display:flex;gap:10px;align-items:center}
.wl-scrollhint::after{content:"";width:40px;height:1px;background:var(--ink-3)}
.wl-pn{position:absolute;top:28px;right:clamp(24px,5vw,80px);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.wl-fw{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.wl-fw .wl-k{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:0 0 10px}
.wl-fw h3{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.1vw,50px);line-height:1.05;letter-spacing:-.02em;max-width:24ch}
.wl-fw h3 span{color:var(--ink-3)}
.wl-who{list-style:none;margin:0 0 22px;padding:0;columns:2;column-gap:36px;max-width:none}
/* Zwei Spalten, aber als Satzspalten statt als Raster: ein zweizeiliger
Eintrag macht seine Spalte laenger, statt neben dem Nachbarn ein Loch zu
reissen. Die Eintraege laufen erst die linke Spalte hinunter, dann die
rechte. */
.wl-who li{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.7vw,27px);line-height:1.2;letter-spacing:-.02em;display:flex;align-items:baseline;gap:12px;break-inside:avoid;margin-bottom:10px;min-width:0;overflow-wrap:anywhere}
.wl-who li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;transform:translateY(-4px)}
.wl-fw h3.wl-who-h{font-size:clamp(22px,2.1vw,32px);max-width:30ch}
@media (max-width:600px){.wl-who{columns:1}}
.wl-fw-txt{margin:22px 0 0;font-size:15px;color:var(--ink-2);max-width:48ch}
.wl-quote{margin:0;padding:0 0 0 22px;border-left:2px solid var(--red)}
.wl-quote p{margin:0;font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.3;font-weight:300}
.wl-quote footer{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:10px}
@media (max-width:860px){
.wl-hs .wl-sticky{position:static;height:auto;overflow:visible}
.wl-hs .wl-track{display:block;transform:none!important}
.wl-panel{height:auto;min-height:0;padding:56px 20px;border-right:none;border-bottom:1px solid var(--hair)}
.wl-panel.wl-photo{aspect-ratio:4/3;min-height:0;padding:0}
.wl-panel.wl-photo .wl-cap{padding:0 20px 28px}
.wl-scrollhint,.wl-pn{display:none}
.wl-fw{grid-template-columns:1fr;gap:30px}
}
/* two statements */
.wl-two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media (max-width:820px){.wl-two{grid-template-columns:1fr;gap:28px}}
.wl-two .wl-k{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:0 0 8px}
.wl-two h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.wl-two h3 span{color:var(--ink-3)}
/* full bleed image */
.wl-bleed{aspect-ratio:21/9;max-width:100%;background:var(--grey);position:relative;overflow:hidden;display:grid;place-items:center}
@media (max-width:700px){.wl-bleed{aspect-ratio:4/3}}
.wl-bleed .wl-ph{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:center;max-width:36ch;padding:20px}
.wl-bleed::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 30% 60%,rgba(217,0,76,.10),transparent 70%)}
/* grey block */
.wl-block{background:var(--grey);padding-block:90px}
@media (max-width:700px){.wl-block{padding-block:56px}}
.wl-block .wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:820px){.wl-block .wl-grid{grid-template-columns:1fr;gap:28px}}
.wl-block h2{font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.02em;line-height:1}
.wl-block h2 span{color:var(--red)}
.wl-block p{margin:12px 0 0;font-size:15px;color:var(--ink-2);max-width:44ch}
.wl-block .wl-list{font-family:var(--mono);font-size:12px;line-height:2.1;color:var(--ink-2);columns:2;column-gap:40px}
@media (max-width:480px){.wl-block .wl-list{columns:1}}
.wl-block .wl-list span{display:block}
.wl-block .wl-list span::before{content:"● ";color:var(--red);font-size:8px;vertical-align:2px}
/* areas grid */
.wl-areas{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 40px}
@media (max-width:1000px){.wl-areas{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.wl-areas{grid-template-columns:1fr}}
.wl-areas .wl-lead{grid-column:1;grid-row:span 2}
@media (max-width:1000px){.wl-areas .wl-lead{grid-column:1/-1;grid-row:auto;margin-bottom:20px}}
.wl-areas .wl-lead p{margin:0;font-size:15px;color:var(--ink-2);max-width:34ch}
.wl-area{padding:0 0 40px}
.wl-area h3{font-size:22px;font-weight:500;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.wl-area h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none}
.wl-area p{margin:10px 0 14px;font-size:14px;color:var(--ink-2);max-width:36ch}
.wl-area .wl-flow{margin:0;padding:12px 0 0;list-style:none;counter-reset:f;display:grid;gap:6px;border-top:1px solid var(--hair)}
.wl-area .wl-flow[hidden]{display:none}
.wl-area .wl-flow li{counter-increment:f;font-size:13.5px;color:var(--ink-2);display:grid;grid-template-columns:22px 1fr;gap:6px}
.wl-area .wl-flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--red);padding-top:3px}
.wl-area .wl-flow b{font-weight:500;color:var(--ink)}
/* bereiche als Vollslide mit kurzem Halt */
.wl-hold{position:relative;height:150vh}
.wl-hold-sticky{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:40px}
@media (max-width:860px){.wl-hold{height:auto}.wl-hold-sticky{position:static;min-height:0;display:block;padding-block:44px 30px}}
/* pinned finder intro */
.wl-pin{position:relative;background:var(--grey);padding-bottom:140px}
/* Mehr Luft unter der letzten Frage: die Knoepfe klebten sonst an der Kante
zum naechsten Abschnitt. */
@media (max-width:860px){.wl-pin{padding-bottom:90px}}
.wl-pin-sticky{position:sticky;top:env(safe-area-inset-top,0px);height:150px;z-index:12;background:var(--grey);display:grid;place-items:center;padding:0 clamp(24px,5vw,80px)}
.wl-pin-inner{text-align:center;max-width:min(90vw,1100px);transform:translateY(calc(42vh - 75px)) scale(.55);opacity:.35;will-change:transform,opacity;transform-origin:50% 50%}
.wl-pin-inner .wl-k{font-family:var(--mono);font-size:12px;color:var(--red);margin:0 0 18px}
.wl-pin-inner h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,8vw,140px);line-height:.95;letter-spacing:-.03em;max-width:11ch;margin:0 auto}
.wl-pin-inner h2 span{color:var(--ink-3)}
.wl-pin-sub{font-size:16px;color:var(--ink-2);max-width:44ch;margin:26px auto 22px}
/* Die 135vh sind der Weg, den die grosse Ueberschrift zum Wachsen braucht.
Kuerzer probiert (85vh) - dann stimmt der Verlauf nicht mehr. Bleibt so. */
.wl-finder-body{margin-top:135vh;padding-inline:40px}
@media (max-width:860px){.wl-pin-sticky{position:static;height:auto;padding:70px 20px 10px}.wl-pin-inner{transform:none!important;opacity:1!important}.wl-pin-inner .wl-fade{opacity:1!important}.wl-finder-body{margin-top:30px;padding-inline:20px}}
/* FINDER */
#wl-finder .wl-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:50px}
@media (max-width:820px){#wl-finder .wl-intro{grid-template-columns:1fr;gap:16px}}
#wl-finder .wl-intro h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
#wl-finder .wl-intro p{margin:0;font-size:15px;color:var(--ink-2);max-width:44ch}
.wl-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start;padding-inline:0}
@media (max-width:860px){.wl-layout{grid-template-columns:1fr}}
.wl-stream{display:flex;flex-direction:column;gap:44px}
.wl-q{display:none}
.wl-q.wl-on{display:block}
@media (prefers-reduced-motion:no-preference){
.wl-q.wl-on,.wl-result.wl-on{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
.wl-q .wl-ask{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.025em;margin-bottom:6px}
.wl-q .wl-sub{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 20px}
.wl-tiles{display:flex;flex-wrap:wrap;gap:8px}
.wl-tile{appearance:none;background:transparent;border:1px solid var(--ink);border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink);font:inherit;font-size:14px;font-weight:500;line-height:1.2;text-align:left;transition:background .12s,color .12s,border-color .12s}
.wl-tile small{display:none}
.wl-tile:hover{border-color:var(--red);color:var(--red)}
.wl-tile:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wl-tile.wl-sel{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wl-tile b{font-weight:500}
.wl-answered{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wl-answered .wl-chip{font-size:20px;font-weight:500;letter-spacing:-.02em}
.wl-answered .wl-chip::before{content:"● ";color:var(--red);font-size:9px;vertical-align:3px}
.wl-answered button{background:none;border:none;color:var(--ink-3);font:inherit;font-family:var(--mono);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
.wl-q.wl-done .wl-tiles,.wl-q.wl-done .wl-form,.wl-q.wl-done .wl-sub,.wl-q.wl-done .wl-next,.wl-q.wl-done .wl-notice{display:none}
.wl-q.wl-done .wl-ask{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--ink-3);margin-bottom:4px}
.wl-next{margin-top:22px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.wl-notice{background:var(--red-soft);color:var(--red);padding:12px 14px;font-size:14px;margin-top:14px}
.wl-form{display:grid;gap:22px;max-width:520px}
.wl-form label{display:grid;gap:4px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.wl-form input{font:inherit;font-size:16px;padding:8px 0;border:none;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0}
.wl-form input:focus-visible{outline:none;border-bottom-color:var(--red)}
.wl-form .wl-priv{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:0}
.wl-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 170px)}
.wl-sum{border-top:2px solid var(--line);padding-top:14px;background:var(--grey)}
.wl-sum .wl-k{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 8px}
.wl-sum p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.wl-sum .wl-steps{display:flex;gap:4px;margin-top:18px}
.wl-sum .wl-steps i{flex:1;height:2px;background:var(--hair)}
.wl-sum .wl-steps i.wl-on{background:var(--ink)}
@media (max-width:860px){.wl-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:15;padding:0}.wl-sum{background:var(--bg);border-top:2px solid var(--line);padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 12px)}.wl-sum .wl-k{display:none}.wl-sum p{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.wl-sum .wl-steps{margin-top:8px}.wl-side[hidden]{display:none}}
.wl-result{display:none}
.wl-result.wl-on{display:block}
.wl-result .wl-lead{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1;margin-bottom:12px}
.wl-result .wl-lead em{font-style:normal;color:var(--red)}
.wl-result > p{color:var(--ink-2);max-width:60ch;margin:0 0 34px;font-size:15px}
.wl-pkg{display:grid;grid-template-columns:1fr 1fr;gap:40px 60px}
@media (max-width:700px){.wl-pkg{grid-template-columns:1fr;gap:30px}}
.wl-card{border-top:1px solid var(--line);padding-top:16px}
.wl-card .wl-eyebrow{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block}
.wl-card h4{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:6px 0 14px}
.wl-card ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.wl-card li{padding-left:16px;position:relative;font-size:14.5px;color:var(--ink-2)}
.wl-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.wl-card li.wl-soft{color:var(--ink-3)}
.wl-card li.wl-soft::before{background:var(--hair)}
.wl-timeline{display:grid;gap:8px}
.wl-timeline div{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:14.5px;color:var(--ink-2)}
.wl-timeline b{font-family:var(--mono);color:var(--ink);font-size:11px;font-weight:500;padding-top:4px}
.wl-cta{margin-top:30px;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.wl-cta .wl-note{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* WORK rows */
.wl-rows{display:grid;gap:0}
.wl-row{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:26px 0;border-bottom:1px solid var(--hair);text-decoration:none;align-items:center}
.wl-row:first-child{padding-top:0}
@media (max-width:700px){.wl-row{grid-template-columns:1fr;gap:14px}}
.wl-row .wl-img{aspect-ratio:4/3;max-width:100%;background:var(--grey);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);transition:transform .3s}
.wl-row:hover .wl-img{transform:scale(.985)}
.wl-row .wl-k{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wl-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1.05}
.wl-row p{margin:8px 0 12px;font-size:14px;color:var(--ink-2);max-width:48ch}
/* contact */
.wl-contact{background:var(--grey);padding-block:90px}
@media (max-width:700px){.wl-contact{padding-block:56px}}
.wl-cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:start}
@media (max-width:900px){.wl-cgrid{grid-template-columns:1fr;gap:50px}}
.wl-contact .wl-k{font-family:var(--mono);font-size:12px;color:var(--red);margin:0 0 14px}
.wl-contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(48px,6.5vw,104px);letter-spacing:-.03em;line-height:.95}
.wl-contact h2 span{color:var(--ink-3)}
.wl-clead{font-size:16px;color:var(--ink-2);max-width:50ch;margin:24px 0 26px}
.wl-ways{display:grid;gap:22px;margin:0 0 6px}
.wl-ways .wl-k{font-family:var(--mono);font-size:12px;color:var(--ink-3);display:block;margin-bottom:6px}
.wl-ways .wl-sub{font-family:var(--mono);font-size:12px;color:var(--ink-2);display:block;margin-top:8px}
.wl-mail{display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em;color:var(--red);text-decoration:none;border-bottom:1px solid var(--red);line-height:1.2;word-break:break-all}
.wl-mail:hover{border-bottom-width:2px}
.wl-contact .wl-meta{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:22px 0 0}
.wl-contact .wl-meta a{text-decoration:none;color:var(--ink)}
.wl-cform{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;padding-top:30px}
@media (max-width:700px){.wl-cform{grid-template-columns:1fr}}
.wl-cform label{display:grid;gap:4px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.wl-cform .wl-full{grid-column:1/-1}
.wl-cform input,.wl-cform textarea{font:inherit;font-size:16px;padding:8px 0;border:none;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;width:100%}
.wl-cform textarea{min-height:80px;resize:vertical}
.wl-cform textarea::placeholder,.wl-cform input::placeholder{color:var(--ink-3)}
.wl-cform input:focus-visible,.wl-cform textarea:focus-visible{outline:none;border-bottom-color:var(--red)}
/* region dot map */
.wl-rgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
@media (max-width:900px){.wl-rgrid{grid-template-columns:1fr;gap:30px}}
.wl-rtext h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;max-width:24ch}
.wl-rtext h3 span{color:var(--red)}
.wl-rtext p{font-size:15px;color:var(--ink-2);max-width:58ch;margin:20px 0 0}
.wl-rhint{font-family:var(--mono);font-size:11px;color:var(--ink-3)!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wl-rd{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red)}
.wl-rd.wl-dark{background:var(--ink)}
/* Die Karte steht frei: der graue Kasten drumherum machte sie zum Bild in
einem Rahmen, dabei ist sie Teil der Seite. */
.wl-dotmap-wrap{background:none;padding:0;aspect-ratio:600/620;max-width:100%;max-height:78vh;margin-left:auto;width:100%}
@media (min-width:900px){.wl-dotmap-wrap{width:min(100%,62vh)}}
#wl-dotmap{width:100%;height:100%;display:block}
/* loader (Fagel-style: ghost word, name, counter, wipe) */
.wl-loader{position:fixed;inset:0;z-index:100;background:var(--red);color:#fff;display:grid;place-items:center;overflow:hidden;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.wl-loader.wl-out{transform:translateY(-100%)}
.wl-loader .wl-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--sans);font-weight:600;font-size:clamp(70px,17vw,300px);letter-spacing:-.05em;line-height:.9;white-space:nowrap;color:rgba(255,255,255,.10);pointer-events:none;text-align:center}
.wl-loader .wl-lb{position:relative;font-family:var(--sans);font-weight:500;font-size:clamp(26px,3.6vw,44px);letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;line-height:1}
.wl-loader .wl-lb .wl-lb-img{width:clamp(220px,32vw,460px);height:auto;display:block}
.wl-loader .wl-lb em{font-style:normal;color:#fff;opacity:.75;font-size:.32em;font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center}
.wl-loader .wl-pct{position:absolute;top:-1.1em;right:-1.6em;font-family:var(--mono);font-size:13px;letter-spacing:.06em;opacity:.9}
.wl-loader .wl-lm{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:.7}
@media (prefers-reduced-motion:reduce){.wl-loader{display:none}}
/* scroll progress lines */
.wl-prog{position:fixed;left:0;height:3px;background:var(--red);z-index:60;width:0;pointer-events:none}
.wl-prog.wl-top{top:env(safe-area-inset-top,0px)}
.wl-prog.wl-bot{bottom:env(safe-area-inset-bottom,0px);left:auto;right:0}
/* footer */
footer{padding-block:60px 30px}
footer .wl-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:2px solid var(--line)}
@media (max-width:820px){footer .wl-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer .wl-cols{grid-template-columns:1fr}}
footer .wl-brand{justify-self:start;font-size:26px;margin-bottom:12px}
.wl-brand-img{display:block;width:clamp(200px,20vw,280px);margin-bottom:18px}
.wl-brand-img img{width:100%;height:auto;display:block}
footer p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:32ch}
footer h4{font-size:14px;font-weight:600;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink-2);display:grid;gap:6px}
footer ul a{text-decoration:none}
footer .wl-copy{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-top:18px}
/* Menue: Schliessen-Knopf in Groesse und Position wie der Menue-Knopf.
Der fruehere Aufbau drehte den ganzen Knopf um 45 Grad, dadurch wuchs sein
Rahmen von 40 auf 57 Pixel und er sass sichtbar versetzt. */
.wl-menu{grid-template-rows:auto 1fr auto}
.wl-menu .wl-top{height:auto;align-items:flex-start;padding-top:var(--wl-navtop,18px);padding-bottom:18px}
.wl-burger-x{position:relative}
.wl-burger-x i{position:absolute;top:50%;left:50%;margin:0;width:16px;height:2px;background:var(--bg)}
.wl-burger-x i:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.wl-burger-x i:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
/* Zugaenge: im Menue unter den grossen Punkten, im Fussbereich als eigener Block. */
.wl-menu .wl-menu-sub{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 26px;align-self:start}
.wl-menu .wl-menu-sub li a{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:lowercase;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:11px 18px;transition:background .15s,color .15s}
.wl-menu .wl-menu-sub li a:hover{background:var(--ink);color:var(--bg)}
.wl-menu .wl-menu-sub svg,footer .wl-f-sub+ul svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer .wl-f-sub{margin-top:26px}
footer .wl-f-sub+ul a{display:inline-flex;align-items:center;gap:9px}
/* Menue-Knopf: die drei Balken lagen als Grid-Zeilen im 40er-Kreis und standen
dadurch 11 Pixel auseinander – das wirkte auseinandergefallen. Als Spalte mit
festem Abstand sind es 14 Pixel Gesamthoehe, sauber in der Mitte. */
.wl-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.wl-burger i{margin:0}
/* Menue-Knopf: der unterste Balken ist kuerzer und buendig links, wie im Logo
der Strich, der nicht durchlaeuft. Betrifft nur den Oeffnen-Knopf; das Kreuz
zum Schliessen hat zwei Balken. */
.wl-burger i:nth-child(3){width:10px;align-self:flex-start;margin-left:12px}
/* Kontaktformular: Rückmeldung beim Absenden und das unsichtbare Feld
gegen Automaten. Nicht display:none – Felder, die so versteckt sind,
werden von manchen Browsern gar nicht erst mitgesendet. */
.wl-cform .wl-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.wl-cform .wl-cmeldung{grid-column:1/-1;margin:2px 0 0;font-family:var(--mono);font-size:12px;line-height:1.5;min-height:1em}
.wl-cform .wl-cmeldung.gut{color:#1c7a4a}
.wl-cform .wl-cmeldung.fehler{color:var(--magenta,#CF2644)}
.wl-cform .wl-priv{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin:0}
.wl-cform .wl-priv a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.wl-cform button[disabled]{opacity:.6;cursor:progress}
/* Theme und Elementor faerben jeden button:hover rot ein. Bei unseren
Kacheln traf das auf die ebenfalls rote Schrift - rot auf rot, unlesbar.
Deshalb hier der Hintergrund ausdruecklich gesetzt, statt ihn dem Theme
zu ueberlassen. */
.wl-tile:hover,
.wl-tile:focus-visible{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.wl-tile.wl-sel,
.wl-tile.wl-sel:hover,
.wl-tile.wl-sel:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wl-answered button:hover,
.wl-answered button:focus-visible{background:none;color:var(--red)}
.wl-dotlink:hover,
.wl-dotlink:focus-visible{background:none}
/* Dieselbe fremde Regel trifft jeden weiteren Knopf im Auftritt. Hier fuer
unsere Bereiche ausgehebelt - die Kacheln bleiben ausgenommen, die haben
oben ihre eigene Behandlung. */
#wl-finder button:not(.wl-tile):hover,
#wl-finder button:not(.wl-tile):focus-visible,
#wl-kontakt button:hover,
#wl-kontakt button:focus-visible,
.wl-areas button:hover,
.wl-areas button:focus-visible,
.wl-rail button:hover,
.wl-rail button:focus-visible,
.wl-menu button:hover,
.wl-menu button:focus-visible{background:none;color:var(--red)}
/* „So läuft es ab“ ist ein Aufklapper, kein Link. Deshalb statt des Punktes
davor ein Winkel dahinter, der sich beim Öffnen dreht – so sieht man vorher,
dass sich etwas aufklappt, und nachher, dass es offen ist. */
.wl-area .wl-dotlink::before{content:none;display:none}
.wl-area .wl-dotlink{gap:7px}
.wl-area .wl-dotlink::after{
content:"";width:7px;height:7px;flex:0 0 auto;
border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.wl-area .wl-dotlink[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.wl-area .wl-dotlink:hover,
.wl-area .wl-dotlink:focus-visible{color:var(--red);background:none;text-decoration:underline;text-underline-offset:4px}
/* Die Regel aus dem Theme faerbt jeden Knopf beim Ueberfahren ein. Sie ist
hartnaeckig, deshalb hier mit gleicher Waffe: fuer unsere eigenen Knoepfe
gilt ausdruecklich kein Hintergrund. */
button.wl-dotlink:hover,
button.wl-dotlink:focus,
button.wl-dotlink:focus-visible,
a.wl-dotlink:hover,
a.wl-dotlink:focus{background-color:transparent!important;color:var(--red)!important}
.wl-tile:hover,
.wl-tile:focus{background-color:var(--red-soft)!important;color:var(--red)!important}
.wl-tile.wl-sel:hover,
.wl-tile.wl-sel:focus{background-color:var(--ink)!important;color:var(--bg)!important}
.wl-answered button:hover,
.wl-answered button:focus{background-color:transparent!important;color:var(--red)!important}
/* Nachträglich erfragte Adresse unter dem Ergebnis. */
.wl-nachtrag{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.wl-nachtrag-zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wl-nachtrag input{font:inherit;font-family:var(--sans);font-size:15px;padding:7px 0;min-width:240px;border:none;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:0}
.wl-nachtrag input:focus{outline:none;border-bottom-color:var(--red)}
.wl-nachtrag-hinweis{min-height:1em}
.wl-nachtrag-hinweis.fehler{color:var(--red)}
/* Abschnitt „wenn wir zusammenarbeiten“: Portal, Hosting, Sicherheit. */
.wl-portal .wl-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 40px}
.wl-portal .wl-plead{grid-column:1/-1;max-width:62ch}
.wl-portal .wl-plead p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2)}
.wl-portal .wl-pcard{border-top:1px solid var(--line);padding-top:16px}
.wl-portal .wl-pcard .wl-k{display:block;font-family:var(--mono);font-size:12px;color:var(--red);margin-bottom:10px}
.wl-portal .wl-pcard h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0 0 10px}
.wl-portal .wl-pcard p{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.wl-portal .wl-pliste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wl-portal .wl-pliste li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.wl-portal .wl-pliste li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--red)}
@media (max-width:900px){.wl-portal .wl-pgrid{grid-template-columns:1fr;gap:28px}}
/* ---------------------------------------------------------------------------
Arbeiten: Index mit Filter, schrittweiser Anzeige und die Projektseiten.
Fünfundzwanzig Referenzen liest niemand am Stück, deshalb stehen erst acht
da. Die Filterpillen folgen der Form aus dem Projekt-Finder.
--------------------------------------------------------------------------- */
.wl-arb-intro{max-width:62ch;margin:-18px 0 26px;font-size:15px;color:var(--ink-2)}
.wl-arb-statisch{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:10px;max-width:70ch;font-size:15px;color:var(--ink-2)}
.wl-arb-statisch a{font-weight:600;color:var(--ink)}
.wl-arb-statisch[hidden],.wl-js .wl-arb-statisch{display:none}
.wl-arb-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.wl-arb-pill{font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1;min-height:44px;padding:0 18px;border:1px solid var(--hair);border-radius:999px;background:var(--bg);color:var(--ink-2);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.wl-arb-pill:hover{border-color:var(--ink)}
.wl-arb-pill.an{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wl-arb-pill:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* Die Buehne zeigt immer genau eine Seite; die naechsten acht liegen daneben
und kommen von rechts hereingefahren. */
.wl-arb-buehne{overflow:hidden}
.wl-arb-band{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.wl-arb-seite{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:44px 48px;align-content:start;padding-top:4px}
.wl-arb-kachel{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.wl-arb-bild{aspect-ratio:4/3;background:var(--grey);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center;padding:12px;transition:transform .35s}
.wl-arb-kachel:hover .wl-arb-bild{transform:scale(.985)}
.wl-arb-kachel .wl-k{margin:18px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wl-arb-kachel h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;line-height:1.05}
.wl-arb-satz{margin:10px 0 12px;font-size:14px;color:var(--ink-2)}
.wl-arb-marken{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.wl-arb-marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;padding:5px 9px;background:var(--grey);color:var(--ink-3)}
.wl-arb-kachel .wl-dotlink{margin-top:auto}
.wl-arb-leer{max-width:56ch;margin:0;padding:26px 0;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--hair)}
.wl-arb-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px;margin-top:44px;padding-top:24px;border-top:1px solid var(--hair)}
.wl-arb-pfeile{display:flex;gap:8px}
.wl-arb-pfeil{width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:var(--bg);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .18s,color .18s,opacity .18s}
.wl-arb-pfeil:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.wl-arb-pfeil:disabled{opacity:.25;cursor:not-allowed}
.wl-arb-pfeil:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wl-arb-leiste{display:flex;gap:6px;flex:1 1 180px;max-width:320px}
.wl-arb-strich{flex:1 1 0;height:3px;min-height:0;padding:0;border:0;background:var(--hair);cursor:pointer;transition:background .25s}
.wl-arb-strich.an{background:var(--red)}
.wl-arb-strich:hover{background:var(--ink-3)}
.wl-arb-strich:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.wl-arb-stand{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
@media (max-width:760px){
.wl-arb-seite{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){.wl-arb-band{transition:none}}
.wl-arbeit{padding-block:40px 70px}
.wl-arbeit-zurueck{margin:0 0 26px}
.wl-arbeit-kopf{display:inline-block;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wl-arbeit-titel{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1.04;max-width:18ch;margin:0 0 20px}
.wl-arbeit-vorspann{max-width:58ch;margin:0 0 40px;font-size:17px;color:var(--ink-2)}
.wl-arbeit-gross{aspect-ratio:21/9;background:var(--grey);display:grid;place-items:center;margin-bottom:22px}
.wl-arbeit-paar{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:56px}
.wl-arbeit-bild{aspect-ratio:4/3;background:var(--grey);display:grid;place-items:center}
.wl-arbeit-gross span,.wl-arbeit-bild span{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:12px;text-align:center}
/* Echte Fotos in den Kacheln: Bild fuellt die Kachel, Text darunter */
figure.wl-arbeit-echt{margin:0;display:block;background:none;aspect-ratio:auto}
figure.wl-arbeit-echt img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
figure.wl-arbeit-gross.wl-arbeit-echt img{aspect-ratio:21/9}
figure.wl-arbeit-echt figcaption{margin-top:10px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-3)}
.wl-arbeit-text{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:clamp(36px,4.5vw,72px);align-items:start}
.wl-arbeit-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;margin:0 0 12px}
.wl-arbeit-text h2+p{margin:0 0 30px}
.wl-arbeit-text p{max-width:68ch;font-size:16px;color:var(--ink-2)}
.wl-arbeit-steckbrief{border-top:2px solid var(--line);padding-top:20px}
.wl-arbeit-steckbrief .wl-k{margin:18px 0 4px;padding:0;border:0}
.wl-arbeit-steckbrief .wl-k:first-child{margin-top:0}
.wl-arbeit-steckbrief p{margin:0;font-size:15px;color:var(--ink-2)}
.wl-arbeit-kunde{font-family:var(--serif);font-size:24px;color:var(--ink)!important}
.wl-arbeit-marken{display:flex;flex-wrap:wrap;gap:7px}
.wl-arbeit-marke{font-family:var(--mono);font-size:11px;padding:6px 11px;background:var(--grey);color:var(--ink-2)}
.wl-arbeit-hinweis{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink-3)!important}
.wl-arbeit-fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:70px;padding-top:24px;border-top:1px solid var(--hair)}
.wl-arbeit-weiter{margin:6px 0 0}
.wl-arbeit-weiter a{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.wl-arbeit-weiter a:hover{color:var(--red)}
@media (max-width:860px){
.wl-arbeit-text{grid-template-columns:1fr;gap:40px}
.wl-arbeit-paar{grid-template-columns:1fr}
.wl-arbeit-gross{aspect-ratio:4/3}
}
.wl-arbeit-oben{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 30px}
.wl-arbeit-notiz{margin-top:22px!important;padding:16px 18px;background:var(--grey);font-size:14px;color:var(--ink-3)!important}
.wl-arbeit-weitere{margin-top:64px;padding-top:24px;border-top:2px solid var(--line)}
.wl-arbeit-weitere ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:14px 0 0;padding:0}
.wl-arbeit-weitere li a,.wl-arbeit-weitere li span{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.wl-arbeit-weitere li a:hover{color:var(--red)}
.wl-arbeit-weitere li.jetzt span{color:var(--ink-3)}
.wl-arbeit-weitere li.jetzt span::after{content:" · diese seite";font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.wl-arbeit-cta{border-top:2px solid var(--line);padding-top:20px;align-self:start}
.wl-arbeit-cta h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:10px 0 12px}
.wl-arbeit-cta p{font-size:15px;color:var(--ink-2);margin:0 0 18px;max-width:42ch}
/* Unterseiten unter /arbeiten/: genauso aufgebaut wie Impressum und AGB -
die linke Leiste mit Menue kommt von der Kopfvorlage, Kopf und Fuss des
Themes bleiben draussen, der eigene Fussbereich wird angehaengt. */
.wl-arbeitsseite .page-header{display:none}
.wl-arbeitsseite #site-header,.wl-arbeitsseite .site-header,
.wl-arbeitsseite #site-footer,.wl-arbeitsseite .site-footer{display:none}
.wl-arbeitsseite .site-main{padding:0}
.wl-arbeitsseite .page-content{max-width:none;margin:0;padding:0}
.wl-arbeitsseite .wl-arbeit{padding-top:90px}
@media (max-width:860px){.wl-arbeitsseite .wl-arbeit{padding-top:40px}}
/* Kundenstimmen: drei untereinander, eine sichtbar, mit Pfeilen nach oben und
unten. Die Hoehe steht fest, damit beim Wechseln nichts springt. */
.wl-stimmen{display:flex;gap:28px;align-items:stretch}
.wl-stimmen-fenster{flex:1 1 auto;min-width:0}
.wl-stimmen-turm{display:flex;flex-direction:column;gap:26px}
.wl-stimmen-turm > .wl-quote{opacity:.38;border-left-color:var(--hair);transition:opacity .4s,border-color .4s,transform .4s;cursor:pointer}
.wl-stimmen-turm > .wl-quote p{font-size:clamp(17px,1.35vw,21px);line-height:1.35}
.wl-stimmen-turm > .wl-quote.an{opacity:1;border-left-color:var(--red)}
.wl-stimmen-turm > .wl-quote.an p{font-size:clamp(20px,1.8vw,26px)}
.wl-stimmen-turm > .wl-quote:hover{opacity:.7}
.wl-stimmen-turm > .wl-quote.an:hover{opacity:1}
.wl-stimmen-steuer{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.wl-stimmen-pfeil{width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:var(--bg);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .18s,color .18s,border-color .18s,transform .18s}
.wl-stimmen-pfeil:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.wl-stimmen-pfeil:active{transform:scale(.94)}
.wl-stimmen-pfeil:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wl-stimmen-leiste{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.wl-stimmen-strich{width:3px;height:22px;padding:0;border:0;background:var(--hair);cursor:pointer;transition:background .25s}
.wl-stimmen-strich.an{background:var(--red)}
.wl-stimmen-strich:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wl-stimmen-turm > .wl-quote{transition:none}}
/* Die Steiner Zeitung ist kein Projekt mit Anfang und Ende, sondern ein
Rhythmus - deshalb steht sie nicht im Schieber, sondern darunter, über die
volle Breite. */
.wl-arb-dauer{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;background:var(--grey);align-items:stretch}
.wl-arb-dauer-bild{min-height:280px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ink-3);background:#E7E7E5;text-align:center;padding:14px}
.wl-arb-dauer-text{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.wl-arb-dauer-text .wl-k{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);align-self:flex-start}
.wl-arb-dauer-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;line-height:1.02;margin:0 0 14px}
.wl-arb-dauer-text p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);max-width:46ch}
@media (max-width:760px){.wl-arb-dauer{grid-template-columns:1fr}.wl-arb-dauer-text{padding:28px 24px}}
/* Die Zeitung zum Durchblättern. Echtes CSS-3D: jedes Blatt dreht sich um die
Bundkante, Vorder- und Rückseite getrennt. */
.wl-blatt{margin:44px 0 56px}
.wl-blatt-buehne{background:var(--grey);padding:clamp(24px,4vw,56px);display:grid;place-items:center;perspective:2200px}
.wl-blatt-buch{position:relative;width:min(100%,760px);aspect-ratio:3/2;transform-style:preserve-3d;transform:rotateX(7deg)}
.wl-blatt-buch::before{content:"";position:absolute;inset:0;right:50%;background:#FFFFFF;box-shadow:inset -14px 0 26px -20px rgba(0,0,0,.5)}
.wl-blatt-blatt{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.05,.2,1)}
.wl-blatt-seite{position:absolute;inset:0;backface-visibility:hidden;background:#FFFFFF;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(14px,2vw,24px);box-sizing:border-box;overflow:hidden}
.wl-blatt-seite.rueck{transform:rotateY(180deg)}
.wl-blatt-seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wl-blatt-nr{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.wl-blatt-titel{font-family:var(--serif);font-weight:300;font-size:clamp(16px,2vw,24px);line-height:1.15;color:var(--ink)}
.wl-blatt-steuer{display:flex;align-items:center;gap:12px;margin-top:20px}
.wl-blatt-pfeil{width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;background:var(--bg);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .18s,color .18s,opacity .18s}
.wl-blatt-pfeil:hover:not(:disabled){background:var(--ink);color:var(--bg)}
.wl-blatt-pfeil:disabled{opacity:.25;cursor:not-allowed}
.wl-blatt-pfeil:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wl-blatt-stand{margin:0 0 0 8px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.wl-blatt-hinweis{margin:14px 0 0;font-size:13px;color:var(--ink-3);max-width:60ch}
/* Die Eckdaten der Zeitung: vier Zahlen, die für sich sprechen. */
.wl-steiner-daten{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:8px 0 64px;padding-top:24px;border-top:2px solid var(--line)}
.wl-steiner-daten .wl-k{margin:0 0 10px}
.wl-steiner-daten p{margin:0;font-size:14px;color:var(--ink-2)}
.wl-steiner-zahl{font-family:var(--serif)!important;font-weight:300;font-size:clamp(30px,3.6vw,50px)!important;line-height:1;letter-spacing:-.02em;color:var(--ink)!important;margin:0 0 6px!important}
/* Ein Block, kein Zweispalter: eine grüne Kachel über die volle Breite. */
.wl-steiner-cta{margin-top:70px;padding:0;background:none;border:0}
.wl-steiner-cta{display:grid;grid-template-columns:1fr 1fr;gap:0}
.wl-steiner-cta>div>p:last-of-type{margin-bottom:18px}
.wl-steiner-zitat p{margin:0 0 12px!important}
@media(max-width:820px){.wl-steiner-cta{grid-template-columns:1fr}}
.wl-steiner-cta .wl-dotlink,.wl-steiner-cta .wl-dotlink *{text-decoration:none!important}
.wl-steiner-cta .wl-k{display:inline-block;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);color:#00703A}
.wl-steiner-cta h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.05;margin:0 0 14px}
.wl-steiner-cta p{margin:0 0 20px;font-size:15px;color:var(--ink-2);max-width:60ch}
@media (max-width:860px){
.wl-steiner-daten{grid-template-columns:1fr 1fr;gap:24px}
}
@media (prefers-reduced-motion:reduce){.wl-blatt-blatt{transition:none}}
a.wl-arb-dauer{text-decoration:none;color:inherit;transition:background .2s}
a.wl-arb-dauer:hover{background:#E9E9E7}
.wl-arb-dauer-text .wl-dotlink{margin-top:16px}
/* Die Steiner Zeitung tritt unter ihrer eigenen Farbe auf: Grün statt Rot.
Weil die Akzentfarbe überall als var(--red) steht, genügt es, sie in diesem
Abschnitt umzudefinieren - Schrift und Aufbau bleiben, wie sie sind. */
.wl-steiner,.wl-arb-dauer.wl-gruen{--red:#009847;--red-soft:#E6F4EC}
.wl-steiner-logo{display:block;height:clamp(34px,4vw,54px);width:auto;margin:0 0 22px}
.wl-steiner-karte{margin:26px 0 0}
.wl-steiner-karte img{display:block;width:100%;height:auto;border:1px solid var(--hair)}
.wl-steiner-karte figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:8px}
/* Die erste Ausgabe steht auf einer eigenen Bühne - dunkel, damit das Blättern
wirkt wie etwas, das man in die Hand nimmt. */
.wl-steiner-buehne{background:#10231A;margin:0 calc(50% - 50vw) 56px;padding:clamp(40px,6vw,80px) 0;color:#F4F4F5}
.wl-steiner-buehne-innen{max-width:1360px;margin:0 auto;padding-inline:40px}
.wl-steiner-buehne-kopf{margin-bottom:34px;max-width:56ch}
.wl-steiner-buehne-kopf .wl-k{color:#6FD39E;margin:0 0 12px}
.wl-steiner-buehne-kopf h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;color:#FFFFFF}
.wl-steiner-buehne-kopf p{margin:0;font-size:15px;color:#B6C6BD}
.wl-steiner-buehne .wl-blatt{margin:0}
.wl-steiner-buehne .wl-blatt-buehne{background:transparent;padding:clamp(20px,3vw,44px)}
.wl-steiner-buehne .wl-blatt-pfeil{border-color:#F4F4F5;background:none;color:#F4F4F5}
.wl-steiner-buehne .wl-blatt-pfeil:hover:not(:disabled){background:#F4F4F5;color:#10231A}
.wl-steiner-buehne .wl-blatt-stand,.wl-steiner-buehne .wl-blatt-hinweis{color:#9DB3A6}
.wl-arb-dauer.wl-gruen{background:#173426;color:#F4F4F5}
.wl-arb-dauer.wl-gruen:hover{background:#1C3D2D}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-bild{position:relative;background:#10231A;padding:36px 32px 44px;min-height:340px;overflow:hidden}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-titel{width:min(58%,230px);height:auto;display:block;box-shadow:0 2px 3px rgba(0,0,0,.25),0 22px 40px rgba(0,0,0,.45);transform:rotate(-3deg);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.wl-arb-dauer.wl-gruen:hover .wl-arb-dauer-titel{transform:rotate(-1.5deg) translateY(-4px)}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-schild{position:absolute;left:32px;bottom:22px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#6FD39E}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-text .wl-k{color:#6FD39E;border-bottom-color:rgba(255,255,255,.18)}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-text h3{color:#FFFFFF}
.wl-arb-dauer.wl-gruen .wl-arb-dauer-text p{color:#B6C6BD}
.wl-arb-dauer.wl-gruen .wl-dotlink{color:#FFFFFF}
.wl-arb-dauer.wl-gruen .wl-dotlink::before{background:#6FD39E}
@media (max-width:860px){.wl-steiner-buehne-innen{padding-inline:20px}}
/* Auf den Unterseiten kein Ladebildschirm - der gehört auf die Startseite. */
.wl-arbeitsseite #wl-loader{display:none!important}
.wl-arbeitsseite .wl-arbeit{padding-top:40px}
/* Der Kontaktblock der Unterseiten traegt laengere Saetze als die Startseite.
Mit deren 104 Pixeln fuellt er drei Zeilen und erschlaegt alles. */
.wl-arbeit-kontakt h2{font-size:clamp(30px,3.6vw,52px);line-height:1.02}
/* Volle Breite auf den Unterseiten, so wie auf der Startseite. Theme und
Elementor setzen hier eigene Innenabstände und Breiten; die Abschnitte
bringen ihre eigene über .wl-wrap mit. */
body.wl-arbeitsseite .site-main{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
body.wl-arbeitsseite .page-content,
body.wl-arbeitsseite .entry-content{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
body.wl-arbeitsseite .site-main > *{max-width:none}
/* Der Kopf einer Projektseite: weiß, über die volle Breite, mit einer Linie
nach unten. Links der Kopf der Zeitung und die Schlagzeile, rechts daneben
die Einordnung - so fängt die Seite nicht einfach im Leeren an. */
.wl-arbeit-hero{background:var(--bg);padding:clamp(28px,4vw,52px) 0 0}
.wl-arbeit-hero-innen{max-width:1360px;margin:0 auto;padding-inline:40px}
.wl-arbeit-hero .wl-arbeit-oben{margin-bottom:clamp(30px,5vw,60px)}
.wl-arbeit-hero-gitter{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:end;padding-bottom:clamp(26px,3vw,40px);border-bottom:2px solid var(--line)}
.wl-arbeit-hero .wl-arbeit-titel{margin:0;max-width:16ch}
.wl-arbeit-hero-neben{padding-bottom:6px}
.wl-arbeit-hero-neben .wl-arbeit-kopf{display:inline-block;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wl-arbeit-hero .wl-arbeit-vorspann{margin:0;font-size:16px;max-width:46ch}
.wl-arbeit-hero .wl-steiner-logo{margin:0 0 26px}
@media (max-width:900px){
.wl-arbeit-hero-gitter{grid-template-columns:1fr;gap:26px;align-items:start}
.wl-arbeit-hero-innen{padding-inline:20px}
}
/* Die Kachel neben dem Steckbrief: der Weg zum Inserieren. */
.wl-steiner-kachel{display:block;margin-top:28px;padding:24px 26px;background:#E6F4EC;text-decoration:none;color:inherit;transition:background .2s}
.wl-steiner-kachel:hover{background:#D8EDE1}
.wl-steiner-kachel,.wl-steiner-kachel *{text-decoration:none!important}
.wl-steiner-kachel+.wl-steiner-kachel{margin-top:14px}
.wl-steiner-zitat{position:relative;margin:44px 0 0;padding:86px 0 0 26px;border-left:2px solid #009847}
.wl-steiner-zitat p{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.3vw,34px);line-height:1.25;letter-spacing:-.02em;margin:0 0 16px}
.wl-steiner-zitat footer{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-2)}
.wl-steiner-zitat footer strong{font-weight:500;color:var(--ink)}
.wl-arbeit-text a:not(.wl-steiner-kachel):not(.wl-dotlink){color:#00703A;text-decoration:underline;text-underline-offset:3px}
.wl-steiner-kachel .wl-k{margin:0 0 10px!important;padding:0!important;border:0!important;color:#00703A!important}
.wl-steiner-kachel h3{font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-.02em;line-height:1.1;margin:0 0 10px}
.wl-steiner-kachel p{font-size:14px;color:var(--ink-2);margin:0 0 14px}
/* Direkt unter der Linie soll das Grün anfangen - der Abschnitt bringt sonst
seinen eigenen Abstand mit und reißt ein Loch. */
body.wl-arbeitsseite .wl-steiner{padding-top:clamp(26px,3vw,44px)}
.wl-steiner > .wl-steiner-buehne:first-child{margin-top:0}
/* Die aktuelle Ausgabe steht ohne Hintergrund da - sie braucht keine Bühne,
sie ist einfach das, was gerade im Briefkasten liegt. */
.wl-steiner-aktuell{margin:0 0 64px}
.wl-steiner-aktuell .wl-k{display:inline-block;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wl-steiner-aktuell h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.05;margin:0 0 10px}
.wl-steiner-aktuell-text{margin:0 0 26px;font-size:15px;color:var(--ink-2);max-width:52ch}
.wl-blatt-blank .wl-blatt-buehne{background:var(--grey);padding:clamp(36px,5vw,72px) clamp(24px,4vw,56px)}
.wl-blatt-blank .wl-blatt-buch{box-shadow:0 18px 50px -28px rgba(0,0,0,.45)}
/* Kopf der Projektseite: Logo größer, Schlagzeile ruhiger. */
.wl-steiner-logo{height:clamp(46px,6vw,82px)}
.wl-arbeit-hero .wl-arbeit-titel{font-size:clamp(28px,3.4vw,46px)}
/* Das echte Blätterwerk: der Rahmen schneidet die leere Hälfte ab, damit neben
Titel- und Rückseite kein weißes Blatt steht. */
.jsb-rahmen{margin:0 auto;overflow:visible;transition:width .35s cubic-bezier(.22,.61,.36,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)) drop-shadow(0 18px 34px rgba(0,0,0,.28))}
.jsb-schieber{transition:transform .35s cubic-bezier(.22,.61,.36,1),clip-path .35s cubic-bezier(.22,.61,.36,1)}
.jsb-buch{margin:0 auto}
.wl-blatt-echt .wl-blatt-buch{box-shadow:none}
.wl-blatt-echt .wl-blatt-buehne{perspective:none}
/* Lupe: die scharfe Fassung liegt über dem Buch, der Griff fängt das Ziehen
ab, sobald vergrößert ist. */
.jsb-schieber{position:relative}
.jsb-scharf{position:absolute;inset:0;display:none;pointer-events:none}
.jsb-scharf.an{display:flex}
.jsb-scharf img{width:50%;height:100%;object-fit:fill;display:none}
.jsb-scharf.solo img{width:100%}
.jsb-griff{position:absolute;inset:0;display:none;cursor:grab}
.jsb-griff.an{display:block}
.jsb-griff.haelt{cursor:grabbing}
.wl-blatt-lupe{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.wl-blatt-stufe{font-family:var(--mono);font-size:12px;color:var(--ink-3);min-width:52px;text-align:center}
.wl-blatt-steuer{flex-wrap:wrap}
.wl-blatt-lupe .wl-blatt-pfeil{width:40px;height:40px;font-size:15px}
/* Die beschrifteten Seiten der ersten Ausgabe im echten Blätterwerk. */
.wl-blatt-papier{background:#FFFFFF;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(14px,2vw,24px);box-sizing:border-box}
.wl-steiner-buehne .wl-blatt-papier{background:#FFFFFF;color:var(--ink)}
/* Lupe: die vergroesserte Ansicht bleibt in der Buehne, Pfeile und Lupe darunter bleiben immer erreichbar. */
.wl-blatt-echt .wl-blatt-buehne{overflow:hidden;position:relative;z-index:0}
.wl-blatt-steuer{position:relative;z-index:2}
.wl-steiner-zitat footer{padding:0!important;margin:0!important;background:none!important}
/* Verteiler-Formular im gruenen Block der Steiner Zeitung */
.wl-vt{margin-top:18px;max-width:520px}
.wl-vt-wabe{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-vt fieldset{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.wl-vt legend{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:0;margin:0 0 6px;width:100%}
.wl-vt fieldset label{font-size:14px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink)}
.wl-vt input[type=radio]{accent-color:#009847;margin:0}
.wl-vt-feld{display:block;margin:0 0 12px}
.wl-vt-feld span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);margin-bottom:4px}
.wl-vt-feld input,.wl-vt-feld select{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hair);border-radius:0;padding:10px 12px;outline:none;box-shadow:none}
.wl-vt-feld input:focus,.wl-vt-feld select:focus{border-color:#009847}
.wl-vt-zeile{display:grid;grid-template-columns:96px 1fr 1fr;gap:10px}
.wl-vt-firma[hidden]{display:none}
.wl-vt-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin:6px 0 0!important;max-width:none!important}
.wl-vt-fuss .wl-dotlink{font-size:15px}
.wl-vt-klein{font-size:12px;color:var(--ink-3)}
.wl-vt-antwort{margin:14px 0 0!important;padding:12px 14px;background:#fff;border-left:2px solid #009847;font-size:14px;color:var(--ink)!important;max-width:none!important}
.wl-vt-antwort.fehler{border-left-color:var(--red)}
.wl-vt.sendet{opacity:.6;pointer-events:none}
@media(max-width:600px){.wl-vt-zeile{grid-template-columns:1fr 1fr}.wl-vt-anrede{grid-column:1/-1}}
.wl-steiner-zitat-zeichen{position:absolute;left:16px;top:-34px;font-family:var(--serif);font-weight:300;font-size:120px;line-height:1;color:#009847;opacity:.9;pointer-events:none}
.wl-steiner-zitat p{margin:0 0 20px!important;color:var(--ink)!important;max-width:none!important}
.wl-steiner-zitat footer{font-size:14px}
.wl-steiner-zitat footer strong{font-size:15px}
.wl-steiner-kachel{margin-top:28px}
.wl-quote footer{padding:0!important;margin:10px 0 0!important;background:none!important}
.wl-stimmen-turm{gap:22px}
.wl-stimmen-turm > .wl-quote p{font-size:clamp(16px,1.2vw,19px)}
.wl-stimmen-turm > .wl-quote.an p{font-size:clamp(19px,1.55vw,23px)}
.wl-steiner-kachel-stark{background:#009847!important;color:#fff!important}
.wl-steiner-kachel-stark:hover{background:#00803C!important}
.wl-steiner-kachel-stark .wl-k{color:#CFEFDD!important}
.wl-steiner-kachel-stark h3,.wl-steiner-kachel-stark p{color:#fff!important}
.wl-steiner-kachel-stark .wl-dotlink{color:#fff}
.wl-steiner-kachel-stark .wl-dotlink::before{background:#fff}
.wl-dotlink-gross{font-size:16px!important}
.wl-steiner-cta strong{font-weight:500;color:var(--ink)}
.wl-arbeit-oben .wl-dotlink,.wl-arbeit-weitere a,.wl-arbeit-kontakt .wl-dotlink{text-decoration:none!important}
.wl-steiner-cta>div{padding:clamp(32px,4vw,56px)}
.wl-steiner-cta-vt{background:#E6F4EC}
.wl-steiner-cta-ins{background:#173426;color:#fff}
.wl-steiner-cta-ins .wl-k{color:#6FD39E!important;border-bottom-color:rgba(255,255,255,.2)!important}
.wl-steiner-cta-ins h2,.wl-steiner-cta-ins strong{color:#fff!important}
.wl-steiner-cta-ins p{color:#B6C6BD!important}
.wl-steiner-cta-ins .wl-dotlink{color:#fff}
.wl-steiner-cta-ins .wl-dotlink::before{background:#fff}
.wl-knopf{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:15px 22px;background:#fff;color:#00703A!important;font-family:var(--sans);font-size:15px;font-weight:500;text-decoration:none!important;border:0;transition:transform .15s,box-shadow .15s}
.wl-knopf::after{content:"\2192";font-size:17px;line-height:1}
.wl-knopf:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.18)}
.wl-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.wl-knoepfe .wl-knopf{margin-top:0}
.wl-knopf-leicht{background:transparent;color:#fff!important;border:1px solid rgba(255,255,255,.45);font-weight:400}
.wl-knopf-leicht:hover{background:rgba(255,255,255,.1);box-shadow:none;border-color:#fff}
/* ===== Projektseiten nach dem Muster der Steiner Zeitung: Farben je Kunde ===== */
.wl-projekt .wl-steiner,.wl-projekt .wl-arbeit-hero{--red:var(--pf);--red-soft:var(--pf-hell)}
.wl-projekt .wl-steiner-buehne{background:var(--pf-dunkel)}
.wl-projekt .wl-steiner-buehne-kopf .wl-k,.wl-projekt .wl-pj-buehne-kopf .wl-k{color:var(--pf-akzent);margin:0 0 12px}
.wl-pj-buehne-kopf{margin-bottom:34px;max-width:56ch}
.wl-pj-buehne-kopf h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;color:#fff}
.wl-pj-buehne-kopf p{margin:0;font-size:15px;color:rgba(255,255,255,.72)}
.wl-pj-hinweis{margin:22px 0 0!important;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5)!important}
.wl-pj-wortmarke{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em;line-height:1;margin:0 0 22px;color:var(--pf)}
.wl-pj-logo{display:block;height:clamp(40px,5vw,70px);width:auto;margin:0 0 22px}
.wl-projekt .wl-steiner-kachel{background:var(--pf-hell)}
.wl-projekt .wl-steiner-kachel:hover{filter:brightness(.97)}
.wl-projekt .wl-steiner-kachel .wl-k{color:var(--pf)!important}
.wl-projekt .wl-steiner-cta-ins{background:var(--pf-dunkel)}
.wl-projekt .wl-steiner-cta-ins .wl-k{color:var(--pf-akzent)!important}
.wl-projekt .wl-steiner-cta-vt{background:var(--pf-hell)}
.wl-projekt .wl-steiner-cta .wl-k{color:var(--pf)}
.wl-projekt .wl-knopf{color:var(--pf-dunkel)!important}
.wl-projekt .wl-knopf-leicht{color:#fff!important}
.wl-projekt .wl-arbeit-marke{background:var(--pf-hell)}
.wl-projekt .wl-arbeit-hinweis{margin-top:22px}
.wl-projekt .wl-steiner-buehne .wl-blatt-buehne{background:rgba(255,255,255,.06)}
.wl-projekt .wl-blatt-papier{color:var(--ink)}
/* Einblenden beim Scrollen */
.wl-pj-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0)*.12s)}
.wl-pj-reveal.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wl-pj-reveal{opacity:1;transform:none;transition:none}}
/* Brummer: Etikett, Schild, Banner */
.wl-hof{display:grid;grid-template-columns:.85fr 1.25fr 2.6fr;gap:clamp(24px,3vw,44px);align-items:end}
.wl-hof>div{position:relative;background:#F6F1E8;color:#2A1A0E;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.wl-hof-etikett{aspect-ratio:1/1.15;border-radius:50% 50% 50% 50%/45% 45% 55% 55%;padding:18px;border:6px double var(--pf)}
/* Gutschein DIN lang: vorn zu sehen, beim Darueberfahren dreht er sich - wie die Kundenkarte bei den Stadtwerken */
.wl-hof>.wl-hof-gutschein{background:none;box-shadow:none;aspect-ratio:2000/955;perspective:900px;display:block}
.wl-hof-gs-innen{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.wl-hof-gutschein:hover .wl-hof-gs-innen,.wl-hof-gutschein.dreht .wl-hof-gs-innen{transform:rotateY(180deg)}
.wl-hof-gs-vorn,.wl-hof-gs-hinten{position:absolute;inset:0;border-radius:4px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:hidden}
.wl-hof-gs-vorn{background:var(--pf);color:#fff}
.wl-hof-gs-vorn .wl-hof-marke,.wl-hof-gs-vorn .wl-hof-klein{color:#fff}
.wl-hof-gs-hinten{background:#FBF7F0;color:#2A1A0E;transform:rotateY(180deg)}
.wl-hof-gs-hinten .wl-hof-klein{margin-top:4px}
.wl-hof-gutschein img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wl-hof-gutschein .wl-hof-unten{color:#fff}
.wl-hof-schild{aspect-ratio:1.3/1;padding:22px;border:3px solid var(--pf);background:#FBF7F0}
.wl-hof-banner{aspect-ratio:3/1;padding:22px;background:var(--pf);color:#fff!important;animation:wl-hof-wehen 5s ease-in-out infinite;transform-origin:left center}
.wl-hof-banner .wl-hof-marke{color:#fff}
.wl-hof>.wl-hof-banner-echt{aspect-ratio:700/400;padding:0;background:none;overflow:visible;animation:none;box-shadow:none;display:block;margin:-110px -9vw 0 0}
/* Der Zaun ragt oben in den Text hinein und rechts aus dem Bild - die Buehne schneidet ab */
.wl-steiner-buehne:has(.wl-hof){overflow:hidden}
.wl-steiner-buehne-innen:has(.wl-hof) .wl-pj-buehne-kopf{max-width:50ch;margin-bottom:clamp(24px,3vw,40px);padding-top:clamp(20px,4vw,60px)}
@media (max-width:1100px){.wl-hof>.wl-hof-banner-echt{margin:-60px -8vw 0 0}}
.wl-zaun{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.45))}
/* Die Plane haengt mittig im Zaunfeld, mit Kabelbindern in den Ecken */
.wl-zaun-plane{position:absolute;left:11%;right:11%;top:13%;aspect-ratio:2000/1027;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.wl-zaun-plane img{display:block;width:100%;height:100%;object-fit:cover}
.wl-zaun-plane i{position:absolute;width:6px;height:16px;border-radius:2px;background:#1b1b1b;box-shadow:0 1px 2px rgba(0,0,0,.6);transform:rotate(45deg)}
.wl-zaun-plane i:nth-child(2){left:-3px;top:-6px}.wl-zaun-plane i:nth-child(3){right:-3px;top:-6px;transform:rotate(-45deg)}
.wl-zaun-plane i:nth-child(4){left:-3px;bottom:-6px;transform:rotate(-45deg)}.wl-zaun-plane i:nth-child(5){right:-3px;bottom:-6px}
.wl-hof-banner-echt .wl-hof-unten{bottom:-26px}
.wl-hof>.wl-hof-schild-echt{aspect-ratio:1/1;padding:0;border:0;background:#fff;overflow:visible;border-radius:4px}
.wl-hof-schild-echt img{display:block;width:100%;height:100%;object-fit:cover}
.wl-hof-marke{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,34px);letter-spacing:-.02em;line-height:1;color:var(--pf)}
.wl-hof-klein{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;opacity:.75}
.wl-hof-linie{width:40%;height:1px;background:currentColor;opacity:.3;margin:10px 0 2px}
.wl-hof-unten{position:absolute;left:0;right:0;bottom:-24px;opacity:.55;color:#fff}
@keyframes wl-hof-wehen{0%,100%{transform:skewY(0)}50%{transform:skewY(-1.2deg) translateY(3px)}}
@media (max-width:760px){.wl-hof{grid-template-columns:1fr 1fr}.wl-hof-banner,.wl-hof-gutschein{grid-column:1/-1}.wl-hof>.wl-hof-banner-echt{margin:0}}
/* Stadt Stein: Rundgang */
.wl-rg{position:relative;padding-top:10px}
.wl-rg-weg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wl-rg-pfad{fill:none;stroke:var(--pf-akzent);stroke-width:2;stroke-dasharray:2000;stroke-dashoffset:2000;transition:stroke-dashoffset 2.4s cubic-bezier(.22,.61,.36,1)}
.wl-rg.da .wl-rg-pfad{stroke-dashoffset:0}
.wl-rg-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:12px;position:relative}
.wl-rg-station{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.wl-rg-station:nth-child(odd){padding-top:70px}.wl-rg-station:nth-child(even){padding-top:10px}
.wl-rg-nr{width:40px;height:40px;border-radius:50%;background:var(--pf-akzent);color:var(--pf-dunkel);font-family:var(--mono);font-size:12px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.wl-rg-name{font-family:var(--serif);font-weight:300;font-size:15px;color:#fff}
@media (max-width:760px){.wl-rg-liste{grid-template-columns:repeat(4,1fr)}.wl-rg-weg{display:none}.wl-rg-station{padding-top:0!important}}
/* Stadtwerke: Karte, Flag, Haltestelle */
.wl-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:end}
.wl-sw-stueck{text-align:center}
.wl-sw-stueck>p{margin:18px 0 0;font-family:var(--sans);font-size:14px;color:#fff}
.wl-sw-stueck>p span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
.wl-sw-karte{position:relative;width:min(100%,260px);aspect-ratio:1.586/1;margin:60px auto 0;perspective:900px}
.wl-sw-karte>div{position:absolute;inset:0;border-radius:10px;padding:16px 18px;text-align:left;backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:space-between;transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.wl-sw-karte-vorn{background:linear-gradient(135deg,var(--pf),var(--pf-akzent));color:#fff}
.wl-sw-karte-hinten{background:#F1F1F1;color:var(--ink);transform:rotateY(180deg)}
.wl-sw-karte .wl-k{margin:0;color:inherit!important;opacity:.8}
.wl-sw-karte strong{font-family:var(--serif);font-weight:300;font-size:26px;letter-spacing:-.02em}
.wl-sw-karte em{font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.14em}
.wl-sw-karte:hover .wl-sw-karte-vorn,.wl-sw-karte.dreht .wl-sw-karte-vorn{transform:rotateY(180deg)}
.wl-sw-karte:hover .wl-sw-karte-hinten,.wl-sw-karte.dreht .wl-sw-karte-hinten{transform:rotateY(360deg)}
.wl-sw-flag{position:relative;height:240px;display:flex;justify-content:center}
.wl-sw-mast{width:4px;height:100%;background:#cfd3d6;border-radius:2px}
.wl-sw-tuch{position:absolute;top:8px;left:calc(50% + 2px);width:78px;height:190px;background:var(--pf);border-radius:0 40px 60px 0;transform-origin:left top;animation:wl-sw-wind 3.2s ease-in-out infinite;display:flex;align-items:center;justify-content:center}
.wl-sw-tuch span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-family:var(--serif);font-weight:300;font-size:22px;letter-spacing:.02em}
@keyframes wl-sw-wind{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(4deg) scaleX(.92)}}
.wl-sw-halte{position:relative;height:240px;display:flex;flex-direction:column;align-items:center}
.wl-sw-halte-schild{width:120px;padding:10px 12px 12px;background:#fff;color:var(--ink);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);text-align:center}
.wl-sw-h{display:block;width:54px;height:54px;margin:0 auto 8px;border-radius:50%;background:#1E8A3B;color:#FFD600;font:700 34px/54px var(--sans)}
.wl-sw-halte-schild em{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:500}
.wl-sw-mast-lang{flex:1}
@media (max-width:760px){.wl-sw{grid-template-columns:1fr}}
/* ROM: Schriftzug Tag/Nacht */
.wl-rom-fassade{position:relative;padding:clamp(40px,7vw,90px) 24px;background:#D9D4CC;transition:background 1.2s;text-align:center;overflow:hidden}
.wl-rom-schrift{display:flex;justify-content:center;gap:.04em;font-family:var(--sans);font-weight:600;font-size:clamp(70px,14vw,180px);line-height:1;letter-spacing:.06em;color:var(--pf);transition:color 1.2s,text-shadow 1.2s}
.wl-rom-zeile{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:18px;font-family:var(--mono);font-size:clamp(12px,1.4vw,16px);letter-spacing:.2em;text-transform:uppercase;color:#3b3631;transition:color 1.2s,text-shadow 1.2s}
.wl-rom-zeile i{width:34px;height:1px;background:currentColor;opacity:.5}
.wl-rom.nacht .wl-rom-fassade{background:#0E0A08}
.wl-rom.nacht .wl-rom-schrift{color:#FFD9BE;text-shadow:0 0 12px rgba(255,178,122,.9),0 0 40px var(--pf),0 0 110px var(--pf);animation:wl-rom-flackern 3.6s 1}
.wl-rom.nacht .wl-rom-zeile{color:#FFE7D3;text-shadow:0 0 10px rgba(255,178,122,.8),0 0 30px var(--pf)}
@keyframes wl-rom-flackern{0%{opacity:.2}6%{opacity:1}9%{opacity:.35}14%{opacity:1}20%{opacity:.6}24%,100%{opacity:1}}
.wl-rom-steuer{display:flex;gap:8px;margin-top:18px}
.wl-rom-knopf{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 16px;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;cursor:pointer;border-radius:999px}
.wl-rom-knopf.an{background:#fff;color:var(--pf-dunkel);border-color:#fff}
/* Ortner & Stöhr: Rollups */
.wl-ru{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:end;max-width:900px;margin:0 auto}
.wl-ru-rollup{display:flex;flex-direction:column;align-items:center}
.wl-ru-rollup.wl-pj-reveal{transform:none;opacity:1}
.wl-ru-bahn{width:100%;aspect-ratio:1/2.2;background:linear-gradient(180deg,var(--pf-hell) 0,#fff 55%,var(--pf-hell) 100%);color:var(--ink);padding:22px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 44px rgba(0,0,0,.4);transform-origin:bottom center;clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0)*.25s)}
.wl-ru-rollup.da .wl-ru-bahn{clip-path:inset(0 0 0 0)}
.wl-ru-bahn .wl-k{margin:0;color:var(--pf)!important}
.wl-ru-bahn strong{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.6vw,34px);letter-spacing:-.02em;line-height:1.05}
.wl-ru-bahn em{font-style:normal;font-size:13px;color:var(--ink-2)}
.wl-ru-fuss{width:110%;height:12px;background:#3a3a3a;border-radius:3px;margin-top:-2px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
/* weitere arbeiten: bei 24 Eintraegen kleiner */
.wl-arbeit-weitere-viele ul{gap:6px 18px}
.wl-arbeit-weitere-viele li a,.wl-arbeit-weitere-viele li span{font-size:clamp(16px,1.4vw,19px)}
/* Regal: Flaschen mit Etiketten */
.wl-regal{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,3vw,40px);padding:0 20px 18px}
.wl-regal-flasche{position:relative;width:clamp(54px,7vw,84px);height:clamp(190px,24vw,300px);background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 55%,rgba(0,0,0,.2));border-radius:14px 14px 8px 8px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.wl-regal-flasche::before{content:"";position:absolute;left:32%;right:32%;top:-22px;height:26px;background:rgba(255,255,255,.12);border-radius:6px 6px 0 0}
.wl-regal-etikett{position:absolute;left:8%;right:8%;top:38%;height:34%;background:#FBF7F0;border-top:6px solid var(--sorte);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:6px}
.wl-regal-etikett b{font-family:var(--serif);font-weight:300;font-size:clamp(11px,1.2vw,15px);letter-spacing:-.02em;color:var(--ink);line-height:1.05}
.wl-regal-etikett em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.wl-regal-brett{position:absolute;left:0;right:0;bottom:0;height:12px;background:#3a2c1f;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
/* Ortseingang */
.wl-ort{position:relative;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden}
.wl-ort-strasse{position:absolute;left:-10%;right:-10%;bottom:0;height:70px;background:#2b2b2b;transform:skewY(-1.2deg)}
.wl-ort-strasse::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed rgba(255,255,255,.35)}
.wl-ort-schild{position:relative;z-index:1;width:min(78%,420px);padding:22px 26px;background:#FBF7F0;color:var(--ink);text-align:center;border:4px solid var(--pf);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.wl-ort-schild .wl-k{margin:0 0 6px;color:var(--pf)!important}
.wl-ort-schild strong{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(28px,4vw,52px);letter-spacing:-.02em;line-height:1}
.wl-ort-schild em{display:block;font-style:normal;font-size:13px;color:var(--ink-2);margin-top:8px}
.wl-ort-pfosten{position:relative;z-index:0;width:10px;height:110px;background:#9aa0a6;margin-top:-4px}
/* Fest: drei Fahnen */
.wl-fest{display:flex;justify-content:center;gap:clamp(30px,8vw,120px);height:280px}
.wl-fest-fahne{position:relative;width:60px;display:flex;justify-content:center}
.wl-fest-tuch{position:absolute;top:6px;left:calc(50% + 2px);width:64px;height:210px;background:var(--pf);border-radius:0 30px 50px 0;transform-origin:left top;animation:wl-sw-wind 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.9s);display:flex;align-items:center;justify-content:center}
.wl-fest-tuch span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-family:var(--serif);font-weight:300;font-size:19px}
/* Laden: Schaufenster, Kaertchen, Tasche */
.wl-laden{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:28px;align-items:end}
.wl-laden>div{position:relative;color:var(--ink)}
.wl-laden strong{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:12px;text-align:center}
.wl-laden-glas{display:block;aspect-ratio:1.5/1;background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.08) 45%,rgba(255,255,255,.25));border:10px solid #2b2b2b;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 18px 40px rgba(0,0,0,.45);position:relative}
.wl-laden-glas::after{content:"";position:absolute;left:18%;right:18%;top:38%;height:2px;background:var(--pf);box-shadow:0 14px 0 var(--pf),0 -14px 0 var(--pf)}
.wl-laden-karte{aspect-ratio:1.6/1;perspective:1000px;background:none;box-shadow:none}
.wl-laden-karte-innen{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.wl-laden-karte:hover .wl-laden-karte-innen{transform:rotateY(180deg)}
.wl-laden-karte-vorn,.wl-laden-karte-hinten{position:absolute;inset:0;background:#FBF7F0;padding:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(0,0,0,.45);backface-visibility:hidden}
.wl-laden-karte-hinten{transform:rotateY(180deg);background:var(--pf);color:#fff}
.wl-laden-karte-hinten strong{color:#fff!important;font-size:24px!important}
.wl-laden-karte-hinten em{color:rgba(255,255,255,.85)!important;font-family:var(--sans)!important;font-size:14px!important}
.wl-laden-karte-hinten small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.wl-laden-karte .wl-k{margin:0;color:var(--pf)!important}
.wl-laden-karte strong{color:var(--ink);font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em;text-transform:none;margin:0;text-align:left}
.wl-laden-karte em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.wl-laden-tasche{display:flex;flex-direction:column;align-items:center}
.wl-laden-griff{width:50%;height:44px;border:4px solid var(--pf-hell);border-bottom:0;border-radius:40px 40px 0 0}
.wl-laden-tasche::before{content:"";width:100%;aspect-ratio:.85/1;background:var(--pf);box-shadow:0 18px 40px rgba(0,0,0,.45);order:1}
.wl-laden-tasche strong{order:2}
@media (max-width:760px){.wl-laden{grid-template-columns:1fr 1fr}.wl-laden-fenster{grid-column:1/-1}}
/* Homepage: Rechner und Telefon */
.wl-web{display:grid;grid-template-columns:2.2fr 1fr;gap:28px;align-items:end;max-width:820px;margin:0 auto}
.wl-web-rechner{background:#1b1b1b;border-radius:10px;padding:0 0 8px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.wl-web-leiste{display:flex;gap:6px;padding:10px 12px}
.wl-web-leiste i{width:9px;height:9px;border-radius:50%;background:#555}
.wl-web-seite{background:#fff;margin:0 8px;aspect-ratio:16/10;overflow:hidden;padding:10px;display:flex;flex-direction:column;gap:8px}
.wl-web-telefon{background:#1b1b1b;border-radius:18px;padding:14px 8px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.wl-web-telefon .wl-web-seite{aspect-ratio:9/16;margin:0;border-radius:10px}
.wl-web-kopf{height:8px;width:40%;background:var(--pf)}
.wl-web-held{height:34%;background:var(--pf-hell);animation:wl-web-puls 4s ease-in-out infinite}
.wl-web-zeilen{display:flex;flex-direction:column;gap:5px}
.wl-web-zeilen i{height:5px;background:#e6e6e6;width:90%}
.wl-web-zeilen i:nth-child(2){width:70%}.wl-web-zeilen i:nth-child(3){width:80%}.wl-web-zeilen i:nth-child(4){width:60%}
.wl-web-kacheln{display:flex;gap:6px}
.wl-web-kacheln i{flex:1;aspect-ratio:1.4/1;background:var(--pf-hell)}
@keyframes wl-web-puls{0%,100%{opacity:1}50%{opacity:.6}}
@media (max-width:600px){.wl-web{grid-template-columns:1fr}}
/* Fahrzeug */
.wl-auto{position:relative;height:260px;overflow:hidden}
.wl-auto-strasse{position:absolute;left:0;right:0;bottom:0;height:60px;background:#2b2b2b}
.wl-auto-strasse::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed rgba(255,255,255,.35)}
.wl-auto-wagen{position:absolute;bottom:40px;left:50%;width:min(80%,520px);height:150px;transform:translateX(-50%)}
.wl-auto-wagen.wl-pj-reveal{transform:translateX(-160%);opacity:1;transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.wl-auto-wagen.wl-pj-reveal.da{transform:translateX(-50%)}
.wl-auto-kasten{position:absolute;left:0;top:0;width:72%;height:110px;background:#fff;border-radius:8px 4px 4px 8px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:center;padding:0 22px}
.wl-auto-marke{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,38px);letter-spacing:-.02em;color:var(--pf);line-height:1}
.wl-auto-zeile{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);margin-top:6px}
.wl-auto-kabine{position:absolute;left:72%;top:30px;width:26%;height:80px;background:#fff;border-radius:4px 22px 4px 4px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.wl-auto-kabine::after{content:"";position:absolute;left:12%;top:10px;width:55%;height:34px;background:#9fc3d6;border-radius:2px 14px 2px 2px}
.wl-auto-rad{position:absolute;z-index:2;bottom:-6px;width:44px;height:44px;border-radius:50%;background:#111;border:8px solid #444;animation:wl-auto-dreh 1.2s linear infinite}
.wl-auto-rad-h{left:12%}.wl-auto-rad-v{left:76%}
@keyframes wl-auto-dreh{to{transform:rotate(360deg)}}
/* Heft: drei Seiten gefaechert */
.wl-heft{position:relative;height:320px;max-width:600px;margin:0 auto}
.wl-heft-seite{position:absolute;bottom:0;left:50%;width:210px;height:290px;background:#fff;color:var(--ink);padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.45);transform-origin:bottom center;display:flex;flex-direction:column;gap:10px}
.wl-heft-seite:nth-child(1){transform:translateX(-50%) rotate(-12deg) translateX(-70px)}
.wl-heft-seite:nth-child(2){transform:translateX(-50%) rotate(-5deg) translateX(-30px)}
.wl-heft-seite:nth-child(3){transform:translateX(-50%) rotate(3deg) translateX(20px)}
.wl-heft-seite.wl-pj-reveal{transition:opacity .7s,transform 1s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--i,0)*.15s)}
.wl-heft-titel{background:var(--pf);color:#fff;justify-content:flex-end}
.wl-heft-titel .wl-k{color:rgba(255,255,255,.7)!important;margin:0}
.wl-heft-titel strong{font-family:var(--serif);font-weight:300;font-size:34px;letter-spacing:-.02em;line-height:1}
.wl-heft-titel em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
/* Echte Homepage im Bildschirm: scrollbar, laeuft von allein, haelt unter der Maus */
.wl-pj-buehne-zwei{margin-top:0}
.wl-screen{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:end;max-width:1100px;margin:0 auto}
.wl-screen-rechner{background:#1c1c1e;border-radius:12px 12px 4px 4px;box-shadow:0 30px 70px rgba(0,0,0,.55);padding:0 0 6px}
.wl-screen-leiste{display:flex;align-items:center;gap:6px;padding:10px 12px}
.wl-screen-leiste i{width:9px;height:9px;border-radius:50%;background:#555}
.wl-screen-leiste span{margin-left:12px;flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:#9a9a9e;background:#2a2a2d;border-radius:5px;padding:3px 10px}
.wl-screen-fenster{position:relative;margin:0 6px;background:#fff;overflow-y:auto;overflow-x:hidden;aspect-ratio:16/9;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.35) transparent;overscroll-behavior:contain}
.wl-screen-fenster img{display:block;width:100%;height:auto}
.wl-screen-fuss{height:14px;margin:6px 15% 0;background:#2a2a2d;border-radius:0 0 8px 8px}
.wl-screen-telefon{background:#1c1c1e;border-radius:26px;padding:12px 8px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.wl-screen-telefon .wl-screen-fenster{aspect-ratio:9/19.5;margin:0;border-radius:16px}
.wl-screen-video{margin-top:clamp(28px,4vw,48px)}
.wl-screen-video .wl-k{color:var(--pf-akzent);margin:0 0 12px}
.wl-screen-video video{display:block;width:100%;max-width:1100px;margin:0 auto;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.5);background:#000}
.wl-pj-hinweis a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.wl-pj-hinweis a:hover{color:#fff;border-color:#fff}
@media (max-width:760px){.wl-screen{grid-template-columns:1fr}.wl-screen-telefon{max-width:260px;margin:0 auto}}
/* Zwei Farben mit Verlauf (Katheder & Roth: Wasser blau, Waerme rot) */
.wl-pj-verlauf .wl-steiner-buehne{background:linear-gradient(120deg,var(--pf-dunkel) 0%,var(--pf-dunkel) 35%,var(--pf2-dunkel) 100%)}
.wl-pj-verlauf .wl-steiner-cta-ins{background:linear-gradient(120deg,var(--pf-dunkel),var(--pf2-dunkel))}
.wl-pj-verlauf .wl-steiner-cta-vt{background:linear-gradient(120deg,var(--pf-hell),var(--pf2-hell))}
.wl-pj-verlauf .wl-pj-wortmarke{background:linear-gradient(90deg,var(--pf),var(--pf2));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.wl-pj-verlauf .wl-arbeit-hero-gitter{border-image:linear-gradient(90deg,var(--pf),var(--pf2)) 1}
.wl-pj-verlauf .wl-steiner-kachel{background:linear-gradient(135deg,var(--pf-hell),var(--pf2-hell))}
.wl-pj-verlauf .wl-steiner-daten{border-image:linear-gradient(90deg,var(--pf),var(--pf2)) 1}
.wl-projekt .wl-steiner-zitat{border-left-color:var(--pf);margin-top:30px}
.wl-projekt .wl-steiner-zitat-zeichen{color:var(--pf)}
.wl-pj-verlauf .wl-steiner-zitat{border-image:linear-gradient(180deg,var(--pf),var(--pf2)) 1}
/* Kontakt: nur die eigene Linie unter E-Mail und Telefon, nicht auch die Unterstreichung des Themes; etwas kleiner */
.wl-mail,.wl-mail:hover{text-decoration:none!important}
.wl-mail{font-size:clamp(20px,2.1vw,30px)}
.wl-arbeit-steckbrief .wl-k+.wl-arbeit-marken-mehr{margin-top:0}
.wl-arbeit-marken-mehr{margin-bottom:6px}
.wl-projekt .wl-steiner-zitat{margin-top:36px}
.wl-arb-bild.hat-bild{padding:0;overflow:hidden;background:#e9e9e7}
.wl-arb-bild.hat-bild img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.wl-arb-kachel:hover .wl-arb-bild.hat-bild img{transform:scale(1.03)}
/* Päckerts: Anzeigen in Festschrift, Kirchweih, Kollektivseite */
.wl-anz{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:clamp(16px,3vw,36px);align-items:end}
.wl-anz-blatt{background:#FBF8F3;color:var(--ink);padding:18px;box-shadow:0 20px 44px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:12px;min-height:300px}
.wl-anz-blatt>.wl-k{margin:0;color:var(--pf)!important}
.wl-anz-anzeige{background:#fff;border:2px solid var(--pf);padding:14px;display:flex;flex-direction:column;gap:6px}
.wl-anz-anzeige b{font-family:var(--serif);font-weight:300;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;line-height:1;color:var(--pf)}
.wl-anz-anzeige em{font-style:normal;font-size:13px;line-height:1.35}
.wl-anz-anzeige small{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wl-anz-viertel{width:70%;align-self:flex-end}
.wl-anz-halb{width:100%}
.wl-anz-text{display:flex;flex-direction:column;gap:5px}
.wl-anz-text i{height:5px;background:#e3ded6;width:95%}
.wl-anz-text i:nth-child(2n){width:80%}.wl-anz-text i:nth-child(3n){width:88%}
.wl-anz-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wl-anz-raster span{aspect-ratio:1/1;background:#ECE6DC}
.wl-anz-klein{grid-column:span 2;padding:10px;justify-content:center}
.wl-anz-klein b{font-size:20px}
@media (max-width:760px){.wl-anz{grid-template-columns:1fr}}
/* Drehbare Einkaufstasche (CSS 3D) */
.wl-tasche-buehne{height:440px;display:grid;place-items:center;perspective:1400px}
.wl-tasche{position:relative;width:220px;height:300px;transform-style:preserve-3d;animation:wl-tasche-dreh 14s linear infinite;cursor:grab}
.wl-tasche.haelt{animation-play-state:paused;cursor:grabbing}
.wl-tasche-buehne:hover .wl-tasche{animation-play-state:paused}
.wl-tasche-seite{position:absolute;left:0;top:0;width:220px;height:300px;background:var(--pf-dunkel);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;backface-visibility:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}
.wl-tasche-seite b{font-family:var(--serif);font-weight:300;font-size:34px;letter-spacing:-.02em;color:var(--pf)}
.wl-tasche-seite small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-akzent)}
.wl-tasche-vorn{transform:translateZ(45px)}
.wl-tasche-hinten{transform:rotateY(180deg) translateZ(45px)}
.wl-tasche-links{width:90px;transform:rotateY(-90deg) translateZ(45px);background:color-mix(in srgb,var(--pf-dunkel) 80%,#000)}
.wl-tasche-rechts{width:90px;transform:rotateY(90deg) translateZ(175px);background:color-mix(in srgb,var(--pf-dunkel) 80%,#000)}
.wl-tasche-boden{position:absolute;left:0;top:255px;width:220px;height:90px;background:#000;transform:rotateX(-90deg) translateZ(0);opacity:.9}
.wl-tasche-griff{position:absolute;left:60px;top:-46px;width:100px;height:60px;border:5px solid var(--pf);border-bottom:0;border-radius:60px 60px 0 0}
.wl-tasche-griff-v{transform:translateZ(38px)}
.wl-tasche-griff-h{transform:translateZ(-38px)}
@keyframes wl-tasche-dreh{from{transform:rotateX(-8deg) rotateY(0)}to{transform:rotateX(-8deg) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.wl-tasche{animation:none;transform:rotateX(-8deg) rotateY(-25deg)}}
.wl-mitnehmen{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,60px);align-items:center;max-width:900px;margin:0 auto}
.wl-mitnehmen .wl-laden-karte{color:var(--ink)}
.wl-mitnehmen .wl-laden-karte-vorn .wl-k{color:var(--pf)!important;margin:0}
.wl-mitnehmen .wl-laden-karte-vorn strong{font-family:var(--serif);font-weight:300;font-size:20px;letter-spacing:-.02em}
.wl-mitnehmen .wl-laden-karte-vorn em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
@media (max-width:700px){.wl-mitnehmen{grid-template-columns:1fr}}
/* T-Shirts (Ortner & Stöhr): gruen, weiss bedruckt, drehen sich beim Hover einmal um */
.wl-shirts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);max-width:960px;margin:0 auto;perspective:1400px}
.wl-shirt{aspect-ratio:1/1.05;perspective:1200px}
.wl-shirt-innen{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 2.2s cubic-bezier(.22,.61,.36,1)}
.wl-shirt:hover .wl-shirt-innen{transform:rotateY(360deg)}
.wl-shirt-seite{position:absolute;inset:0;background:var(--pf);clip-path:polygon(22% 0,36% 6%,50% 12%,64% 6%,78% 0,100% 14%,92% 30%,80% 24%,80% 100%,20% 100%,20% 24%,8% 30%,0 14%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:30%;backface-visibility:hidden;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
.wl-shirt-hinten{transform:rotateY(180deg);background:color-mix(in srgb,var(--pf) 88%,#000)}
.wl-shirt-druck{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;gap:4px;max-width:60%}
.wl-shirt-druck b{font-family:var(--serif);font-weight:300;font-size:clamp(14px,1.5vw,20px);letter-spacing:-.02em;line-height:1.05}
.wl-shirt-druck small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.wl-shirt-druck-gross b{font-size:clamp(20px,2.4vw,32px)}
@media (max-width:640px){.wl-shirts{grid-template-columns:1fr 1fr}}
/* Bogner: Flotte, die fahrt */
.wl-flotte{position:relative;height:420px;overflow:hidden}
.wl-flotte-strasse{position:absolute;left:0;right:0;bottom:0;height:70px;background:#2b2b2b}
.wl-flotte-strasse::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed rgba(255,255,255,.35)}
.wl-auto2{position:absolute;bottom:50px;left:0;transform:translateX(-120%);animation:wl-auto2-fahrt var(--dauer,22s) linear infinite;animation-delay:calc(var(--i,0)*-7s)}
.wl-auto2-karosse{position:relative;background:var(--lack,#fff);border-radius:10px 26px 6px 6px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:center;padding:0 22px}
.wl-auto2-marke{font-family:var(--serif);font-weight:300;font-size:clamp(18px,2.2vw,30px);letter-spacing:-.02em;color:var(--schrift,var(--pf));line-height:1}
.wl-auto2-zeile{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--schrift,var(--ink-2));opacity:.8;margin-top:5px}
.wl-auto2-fenster{position:absolute;background:#9fc3d6;border-radius:4px 14px 2px 2px}
.wl-auto2-rad{position:absolute;bottom:-16px;width:40px;height:40px;border-radius:50%;background:#111;border:8px solid #444;animation:wl-auto-dreh 1s linear infinite;z-index:2}
/* Kastenwagen: hoch, kantig */
.wl-auto2-kasten{bottom:60px}
.wl-auto2-kasten .wl-auto2-karosse{width:420px;height:150px;border-radius:8px 30px 6px 6px}
.wl-auto2-kasten .wl-auto2-fenster{right:14px;top:14px;width:70px;height:44px}
.wl-auto2-kasten .wl-auto2-rad-h{left:50px}.wl-auto2-kasten .wl-auto2-rad-v{left:320px}
/* Limousine: lang, flach, Kabine oben */
.wl-auto2-limo .wl-auto2-karosse{width:380px;height:78px;border-radius:14px 22px 8px 8px;padding-left:30px}
.wl-auto2-limo .wl-auto2-fenster{left:110px;top:-40px;width:170px;height:44px;background:var(--lack,#fff);border-radius:22px 26px 0 0}
.wl-auto2-limo .wl-auto2-fenster::after{content:"";position:absolute;left:14px;right:14px;top:8px;bottom:0;background:#9fc3d6;border-radius:14px 16px 0 0}
.wl-auto2-limo .wl-auto2-rad-h{left:56px}.wl-auto2-limo .wl-auto2-rad-v{left:290px}
/* Kleinwagen: kurz, rund */
.wl-auto2-klein .wl-auto2-karosse{width:250px;height:84px;border-radius:26px 34px 8px 8px;padding-left:22px}
.wl-auto2-klein .wl-auto2-marke{font-size:18px}
.wl-auto2-klein .wl-auto2-fenster{left:60px;top:-36px;width:130px;height:40px;background:var(--lack,#fff);border-radius:30px 30px 0 0}
.wl-auto2-klein .wl-auto2-fenster::after{content:"";position:absolute;left:12px;right:12px;top:8px;bottom:0;background:#9fc3d6;border-radius:20px 20px 0 0}
.wl-auto2-klein .wl-auto2-rad-h{left:34px}.wl-auto2-klein .wl-auto2-rad-v{left:180px}
@keyframes wl-auto2-fahrt{from{transform:translateX(-120%)}to{transform:translateX(calc(100vw + 40%))}}
@media (prefers-reduced-motion:reduce){.wl-auto2{animation:none;transform:translateX(calc(var(--i,0)*30%))}}
/* Bogner: Logo-Familie */
.wl-lf{display:flex;flex-direction:column;gap:clamp(24px,4vw,44px);align-items:center}
.wl-lf-haupt{background:#fff;color:var(--ink);padding:clamp(24px,4vw,48px) clamp(32px,6vw,90px);display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);border-top:8px solid var(--pf)}
.wl-lf-wort{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.wl-lf-haupt .wl-lf-wort{font-size:clamp(34px,5vw,72px)}
.wl-lf-ort{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.wl-lf-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;max-width:1000px}
.wl-lf-karte{background:#fff;color:var(--ink);padding:18px 16px 16px;border-top:6px solid var(--kenn);display:flex;flex-direction:column;gap:6px;align-items:flex-start;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.wl-lf-karte .wl-lf-wort{font-size:clamp(16px,1.6vw,22px)}
.wl-lf-bereich{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;background:var(--kenn);color:#fff}
.wl-lf-karte[style*="--pf-akzent"] .wl-lf-bereich{color:#1A1212}
@media (max-width:700px){.wl-lf-reihe{grid-template-columns:1fr 1fr}}
/* Kleiner Bildschirm mit Text daneben */
.wl-webklein{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,4vw,60px);align-items:center}
.wl-webklein-text h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,42px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;color:#fff}
.wl-webklein-text .wl-k{color:var(--pf-akzent);margin:0 0 12px}
.wl-webklein-text p{font-size:15px;color:rgba(255,255,255,.75);margin:0 0 18px}
.wl-webklein-rechner{max-width:640px}
@media (max-width:760px){.wl-webklein{grid-template-columns:1fr}}
/* Bogner: echtes Fahrzeug + mehr Modelle */
.wl-auto-echt{max-width:1000px;margin:0 auto 10px}
.wl-auto-echt img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 40px rgba(0,0,0,.5))}
.wl-flotte{margin-top:18px}
/* Kombi: lang, mit langem Dach */
.wl-auto2-kombi .wl-auto2-karosse{width:400px;height:80px;border-radius:12px 18px 8px 8px;padding-left:30px}
.wl-auto2-kombi .wl-auto2-fenster{left:100px;top:-42px;width:260px;height:46px;background:var(--lack,#fff);border-radius:18px 14px 0 0}
.wl-auto2-kombi .wl-auto2-fenster::after{content:"";position:absolute;left:14px;right:10px;top:8px;bottom:0;background:#9fc3d6;border-radius:12px 8px 0 0}
.wl-auto2-kombi .wl-auto2-rad-h{left:60px}.wl-auto2-kombi .wl-auto2-rad-v{left:310px}
/* Pickup: Kabine vorn, Ladeflaeche hinten */
.wl-auto2-pickup{bottom:56px}
.wl-auto2-pickup .wl-auto2-karosse{width:420px;height:88px;border-radius:6px 20px 8px 8px;padding-left:26px}
.wl-auto2-pickup .wl-auto2-fenster{left:250px;top:-48px;width:120px;height:52px;background:var(--lack,#fff);border-radius:10px 22px 0 0}
.wl-auto2-pickup .wl-auto2-fenster::after{content:"";position:absolute;left:12px;right:12px;top:8px;bottom:0;background:#9fc3d6;border-radius:6px 14px 0 0}
.wl-auto2-pickup .wl-auto2-rad-h{left:56px}.wl-auto2-pickup .wl-auto2-rad-v{left:330px}
.wl-flotte{height:460px}
/* Weitere Bausteine als Kacheln, zweispaltig, statt weiterer voller Buehnen */
.wl-pj-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 56px}
.wl-pj-kachel-dunkel{background:var(--pf-dunkel);color:#F4F4F5;padding:clamp(24px,3vw,40px);min-width:0;overflow:hidden}
.wl-pj-verlauf .wl-pj-kachel-dunkel{background:linear-gradient(120deg,var(--pf-dunkel),var(--pf2-dunkel))}
.wl-pj-kachel-breit{grid-column:1/-1}
.wl-pj-kachel-dunkel .wl-pj-buehne-kopf{margin-bottom:22px;max-width:none}
.wl-pj-kachel-dunkel .wl-pj-buehne-kopf h2{font-size:clamp(24px,2.4vw,34px)}
.wl-pj-kachel-dunkel .wl-pj-buehne-kopf p{font-size:14px}
.wl-pj-kachel-dunkel .wl-screen{grid-template-columns:1fr;max-width:none}
.wl-pj-kachel-dunkel .wl-screen-telefon{display:none}
.wl-pj-kachel-dunkel .wl-screen-video{margin-top:20px}
.wl-pj-kachel-dunkel .wl-lf-haupt{padding:20px 28px}
.wl-pj-kachel-dunkel .wl-lf-haupt .wl-lf-wort{font-size:clamp(26px,3vw,44px)}
.wl-pj-kachel-dunkel .wl-lf-reihe{grid-template-columns:1fr 1fr;gap:10px}
.wl-pj-kachel-dunkel .wl-shirts{grid-template-columns:repeat(3,1fr);gap:14px}
.wl-pj-kachel-dunkel .wl-mitnehmen{grid-template-columns:1fr 1fr;gap:24px}
.wl-pj-kachel-dunkel .wl-tasche-buehne{height:360px}
.wl-pj-kachel-dunkel .wl-blatt-buehne{padding:clamp(16px,2vw,28px);background:rgba(255,255,255,.06)}
.wl-pj-kachel-dunkel .wl-blatt-pfeil{border-color:#F4F4F5;background:none;color:#F4F4F5}
.wl-pj-kachel-dunkel .wl-blatt-pfeil:hover:not(:disabled){background:#F4F4F5;color:var(--pf-dunkel)}
.wl-pj-kachel-dunkel .wl-blatt-stand,.wl-pj-kachel-dunkel .wl-blatt-hinweis{color:rgba(255,255,255,.6)}
.wl-pj-kachel-dunkel .wl-blatt{margin:0}
@media (max-width:820px){.wl-pj-kacheln{grid-template-columns:1fr!important}}
.wl-pj-kachel-dunkel .wl-pj-hinweis{margin-top:14px!important}
.wl-pj-kachel-dunkel .wl-screen-rechner{max-width:none}
/* Rotenbauer: Hoffoto als Bühne, Produkt-Kacheln */
.wl-hoffoto{margin:0;max-width:1040px;margin:0 auto}
.wl-hoffoto img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.wl-hoffoto figcaption{margin-top:14px;font-size:13px;opacity:.75;text-align:center}
.wl-prod{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;align-items:center;height:100%}
.wl-prod-bild{overflow:hidden;border-radius:6px;background:rgba(255,255,255,.06)}
.wl-prod-bild img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform 1.4s ease}
.wl-prod:hover .wl-prod-bild img{transform:scale(1.06)}
.wl-prod-hoch .wl-prod-bild img{aspect-ratio:17/20}
.wl-prod-text h2{font-size:clamp(20px,2vw,28px);margin:6px 0 10px;color:#fff}
.wl-prod-text p{font-size:14px;margin:0;opacity:.85}
.wl-prod-text .wl-k{opacity:.6}
@media (max-width:600px){.wl-prod{grid-template-columns:1fr}}
/* Bauzaunbanner */
.wl-bz{position:relative;max-width:820px;margin:0 auto;aspect-ratio:16/8;background:linear-gradient(#0000 70%,rgba(255,255,255,.05));border-bottom:6px solid rgba(255,255,255,.12)}
.wl-bz-pfosten{position:absolute;top:0;bottom:-6px;width:10px;background:linear-gradient(90deg,#9aa0a6,#d9dde1 40%,#8b9096);border-radius:3px 3px 0 0}
.wl-bz-pfosten.l{left:4%}.wl-bz-pfosten.r{right:4%}
.wl-bz-gitter{position:absolute;left:4%;right:4%;top:6%;bottom:0;background:
repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 2px,#0000 2px 34px),
repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 2px,#0000 2px 34px);border-top:3px solid rgba(255,255,255,.35)}
.wl-bz-banner{position:absolute;left:9%;right:9%;top:16%;height:52%;background:var(--pf);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4% 6%;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);transform-origin:top center;animation:wl-bz-weht 6s ease-in-out infinite}
.wl-bz-banner .wl-k{color:#fff;opacity:.8;margin:0 0 6px}
.wl-bz-banner strong{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.5vw,64px);line-height:1;letter-spacing:-.01em}
.wl-bz-banner em{font-style:italic;font-size:clamp(13px,1.4vw,18px);margin-top:8px;opacity:.9}
.wl-bz-oese{position:absolute;width:12px;height:12px;border-radius:50%;background:#e9ecef;box-shadow:inset 0 0 0 3px #6b7178}
.wl-bz-oese.a{left:8px;top:8px}.wl-bz-oese.b{right:8px;top:8px}.wl-bz-oese.c{left:8px;bottom:8px}.wl-bz-oese.d{right:8px;bottom:8px}
@keyframes wl-bz-weht{0%,100%{transform:skewX(0) scaleY(1)}50%{transform:skewX(-.6deg) scaleY(1.008)}}
.wl-pj-kachel-dunkel .wl-bz{max-width:none}
.wl-pj-kachel-dunkel .wl-ru{max-width:none;gap:14px}
.wl-pj-kachel-dunkel .wl-blatt{margin:20px 0 0}
.wl-pj-kachel-dunkel .wl-blatt-buehne{background:rgba(255,255,255,.06)}
.wl-pj-kachel-dunkel .wl-blatt-pfeil{border-color:#fff;color:#fff;background:transparent}
.wl-pj-kachel-dunkel .wl-blatt-pfeil:hover:not(:disabled){background:#fff;color:var(--pf-dunkel)}
.wl-pj-kachel-dunkel .wl-blatt-stand,.wl-pj-kachel-dunkel .wl-blatt-stufe,.wl-pj-kachel-dunkel .wl-blatt-hinweis{color:#fff;opacity:.7}
/* Drei Kacheln: die letzte läuft über die Breite */
.wl-pj-kacheln:not(.wl-drei) > .wl-pj-kachel-dunkel:last-child:nth-child(odd){grid-column:1/-1}
/* Stadtrundgang-Heft mit Ausklappkarte */
.wl-sp{--pw:clamp(112px,15vw,168px);--ph:calc(var(--pw)*2);position:relative;height:calc(var(--ph) + 70px);display:grid;place-items:center;perspective:1800px;overflow:hidden;margin:0 auto}
.wl-sp-heft{position:relative;width:var(--pw);height:var(--ph);transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.4,.05,.2,1);transform:translateX(0) rotateY(0)}
.wl-sp.rueck .wl-sp-heft{transform:rotateY(180deg)}
.wl-sp.k2 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*.5))}
.wl-sp.k3 .wl-sp-heft{transform:rotateY(180deg) translateX(var(--pw))}
.wl-sp.k4 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*1.5))}
.wl-sp-basis,.wl-sp-s,.wl-sp-panel{position:absolute;inset:0;background:#fff;color:#333;box-sizing:border-box;padding:12% 10%;display:flex;flex-direction:column;gap:6%;backface-visibility:hidden;box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.wl-sp-basis{backface-visibility:visible;transform:translateZ(0)}
.wl-sp-blatt{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.4s cubic-bezier(.4,.05,.2,1)}
.wl-sp-blatt .hinten{transform:rotateY(180deg)}
.wl-sp.auf .deckel{transform:rotateY(-178deg)}
.wl-sp.b1 .b1{transform:rotateY(-176deg)}
.wl-sp.b2 .b2{transform:rotateY(-174deg)}
.wl-sp-nr{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#888}
.wl-sp-foto{display:block;width:100%;aspect-ratio:4/3;background:linear-gradient(135deg,var(--pf-hell),var(--pf-akzent))}
.wl-sp-zeile{display:block;height:5px;background:#ddd;border-radius:3px;width:100%}
.wl-sp-zeile.l{width:60%;height:7px;background:var(--pf)}.wl-sp-zeile.k{width:45%}
.wl-sp-titel{background:var(--pf);color:#fff;justify-content:flex-end;gap:10px}
.wl-sp-titel .wl-k{color:#fff;opacity:.75;margin:0}
.wl-sp-titel strong{font-family:var(--serif);font-weight:300;font-size:clamp(17px,2vw,26px);line-height:1.05}
.wl-sp-titel em{font-style:italic;font-size:11px;opacity:.85}
.wl-sp-rueck{position:absolute;inset:0;transform:rotateY(180deg) translateZ(2px);transform-style:preserve-3d}
.wl-sp-panel{padding:0;overflow:visible;background:#F3EFE4;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.2s cubic-bezier(.4,.05,.2,1)}
.wl-sp-panel.p2,.wl-sp-panel.p3,.wl-sp-panel.p4{left:100%;right:auto;width:100%;backface-visibility:visible;border-left:1px solid rgba(0,0,0,.08);opacity:0;transition:transform 1.2s cubic-bezier(.4,.05,.2,1),opacity .25s}
.wl-sp-panel.p2{transform:rotateY(-180deg) translateZ(-1px)}.wl-sp-panel.p3{transform:rotateY(-180deg) translateZ(-2px)}.wl-sp-panel.p4{transform:rotateY(-180deg) translateZ(-3px)}
.wl-sp.k2 .p2{transform:rotateY(0);opacity:1}.wl-sp.k3 .p3{transform:rotateY(0);opacity:1}.wl-sp.k4 .p4{transform:rotateY(0);opacity:1}
.wl-sp-karte{position:absolute;inset:0;overflow:hidden;background:
linear-gradient(90deg,#0000 48%,#DCE8F4 48% 56%,#0000 56%),
repeating-linear-gradient(20deg,#0000 0 26px,#E6E2D6 26px 29px),
repeating-linear-gradient(110deg,#0000 0 34px,#E6E2D6 34px 37px),#F3EFE4}
.wl-sp-panel.p1 .wl-sp-karte{background:
linear-gradient(110deg,#0000 30%,#DCE8F4 30% 40%,#0000 40%),
repeating-linear-gradient(20deg,#0000 0 26px,#E6E2D6 26px 29px),
repeating-linear-gradient(110deg,#0000 0 34px,#E6E2D6 34px 37px),#F3EFE4}
.wl-sp-punkt{position:absolute;left:var(--x);top:var(--y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--pf);color:#fff;font:600 9px/18px var(--sans);text-align:center;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wl-sp-panel.p2 .wl-sp-punkt:nth-child(odd),.wl-sp-panel.p3 .wl-sp-punkt:nth-child(3n),.wl-sp-panel.p4 .wl-sp-punkt:nth-child(even){display:none}
.wl-sp-legende{position:absolute;left:8%;bottom:6%;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#555;background:rgba(255,255,255,.8);padding:3px 6px}
.wl-sp-stand{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-family:var(--mono);font-size:12px;opacity:.7}
@media (max-width:600px){.wl-sp{--pw:min(26vw,120px)}}
/* Das echte Heft: Seiten als Bilder, die Karte auf den ausgeklappten Umschlagteilen */
.wl-sp-echt .wl-sp-basis,.wl-sp-echt .wl-sp-s,.wl-sp-echt .wl-sp-panel{padding:0;overflow:hidden;background:#fff}
.wl-sp-echt .wl-sp-panel{overflow:visible}
.wl-sp-echt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wl-sp-echt .wl-sp-panel.p4{width:100%}
.wl-sp-echt .wl-sp-panel.p2{box-shadow:-6px 0 14px -8px rgba(0,0,0,.4)}
/* Das echte Heft steht gross rechts und darf hinter den Text laufen */
.wl-sp-echt{--pw:clamp(150px,18vw,250px);overflow:visible;height:calc(var(--ph) + 40px);margin:-130px 0 0 auto;width:72%;align-items:end;padding-bottom:40px;z-index:1}
.wl-steiner-buehne:has(.wl-sp-echt){overflow:hidden}
.wl-steiner-buehne-innen:has(.wl-sp-echt) .wl-pj-buehne-kopf{position:relative;z-index:2;text-shadow:0 1px 12px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.6)}
.wl-sp-echt.k2 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*.8))}
.wl-sp-echt.k3 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*1.5))}
.wl-sp-echt.k4 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*2.15))}
@media (max-width:900px){.wl-sp-echt{margin:-30px auto 0;width:100%}.wl-sp-echt.k2 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*.5))}.wl-sp-echt.k3 .wl-sp-heft{transform:rotateY(180deg) translateX(var(--pw))}.wl-sp-echt.k4 .wl-sp-heft{transform:rotateY(180deg) translateX(calc(var(--pw)*1.5))}}
/* Wortmarke oben am Handy: nie unterstreichen – auch nicht das gedrehte „und" (Safari zeichnet die Unterstreichung dort als Strich daneben) */
.wl-nav .wl-brand,.wl-nav .wl-brand em,.wl-brand,.wl-brand em,.wl-rb,.wl-rb em{text-decoration:none!important;-webkit-text-decoration:none!important;text-decoration-line:none!important;border-bottom:0!important;box-shadow:none!important}
.wl-nav .wl-brand{-webkit-tap-highlight-color:transparent}
/* Rotenbauer: Etiketten-Bühne */
.wl-etiketten{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px);justify-content:center;align-items:flex-end;max-width:1180px;margin:0 auto;padding:10px 0}
.wl-et{position:relative;background:#FBF6EA;color:#2A1F12;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);transition:transform .5s ease;font-family:var(--sans)}
.wl-et:hover{transform:translateY(-6px) rotate(-1deg)}
.wl-et-kaese{width:clamp(180px,20vw,250px);aspect-ratio:5/3;border:2px solid var(--et);border-radius:6px;padding:26px 14px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}
.wl-et-kaese strong{font-size:clamp(17px,1.8vw,24px);letter-spacing:-.01em;color:var(--et);line-height:1.05}
.wl-et-kaese em{font-style:normal;font-size:10px;font-weight:600;color:#4B6B22;margin-top:4px}
.wl-et-kaese small{font-size:9px;opacity:.7;margin-top:3px}
.wl-et-demeter{position:absolute;top:6px;left:50%;transform:translateX(-50%);background:#E8621A;color:#fff;font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:lowercase;padding:2px 8px;border-radius:999px}
.wl-et-hof{position:absolute;top:22px;left:10px;font-family:var(--serif);font-style:italic;font-size:10px;color:#5A3A1A}
.wl-et-bio{position:absolute;left:10px;bottom:10px;width:24px;height:16px;border-radius:3px;background:#6CA83A;color:#fff;font-size:8px;font-weight:700;display:grid;place-items:center;text-transform:uppercase}
.wl-et-familie{position:absolute;right:10px;bottom:8px;width:34px;height:22px;border-radius:3px;background:linear-gradient(180deg,#9EC0E0,#7FA46A 60%,#5E7F44);opacity:.9}
.wl-et-oel{width:clamp(96px,10vw,130px);aspect-ratio:3/4;border-radius:6px;padding:26px 10px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#FBF6EA}
.wl-et-oel strong{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:.95;color:#5A3A1A}
.wl-et-oel strong::first-line{font-size:.55em;font-family:var(--sans);color:#4B6B22;text-transform:uppercase;letter-spacing:.08em}
.wl-et-oel em{font-style:normal;font-size:11px;color:#C8392B;font-weight:700;margin-top:6px}
.wl-et-oel small{font-size:8px;opacity:.7;margin-top:4px}
.wl-et-oel .wl-et-bio{left:8px;bottom:8px}
.wl-et-eis{width:clamp(120px,13vw,160px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#F4F0E4 0 46%,#DCD7CA 47% 52%,#F4F0E4 53% 100%);display:grid;place-items:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.55),inset 0 0 0 6px rgba(0,0,0,.05)}
.wl-et-deckel{text-align:center;display:grid;gap:2px}
.wl-et-deckel strong{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.8vw,22px);color:#3E7A2E;transform:rotate(-8deg);display:block}
.wl-et-deckel em{font-style:normal;font-size:10px;font-weight:600;color:#4A3F7A}
.wl-pj-reveal.wl-et{transition-delay:calc(var(--i)*.12s)}
@media (max-width:600px){.wl-et-kaese{width:calc(50% - 8px)}}
/* Stadtwerke: echte Kundenkarte (Vorder-/Rueckseite als Bild) und echte Beachflag */
.wl-sw-karte-echt>div{padding:0;background:none;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.wl-sw-karte-echt img{display:block;width:100%;height:100%;object-fit:cover}
/* Die echte Beachflag: vier Meter hoch, deshalb ragt sie neben dem Text nach
oben - so bleibt der Abschnitt kompakt. Der Mast ist im SVG gezeichnet und
laeuft mit dem Bogen der Fahne; der Wind kommt aus einer leichten Drehung
um den Mast plus einem Flattern im Stoff (SVG-Filter). */
.wl-sw-flag-echt{height:760px;margin-top:-420px;position:relative;perspective:1400px;display:block}
.wl-sw-flag-echt::before{content:"";position:absolute;left:calc(50% - 70px);bottom:-10px;width:200px;height:24px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.45),rgba(0,0,0,0) 70%)}
.wl-sw-tuch-echt{position:absolute;top:0;left:calc(50% - 90px);height:760px;width:auto;overflow:visible;filter:drop-shadow(10px 10px 14px rgba(0,0,0,.35))}
/* Der Mast steht fest - nur der Stoff bewegt sich: leichte Drehung um die Vorderkante plus das Flattern aus dem Filter. */
.wl-sw-tuch-echt .wl-sw-stoff{transform-box:fill-box;transform-origin:0 0;animation:wl-sw-wind-echt 4.2s ease-in-out infinite}
@keyframes wl-sw-wind-echt{0%,100%{transform:skewY(0)}35%{transform:skewY(.5deg)}70%{transform:skewY(-.3deg)}}
/* Der Text rueckt neben der Fahne nach unten - sonst haengt er oben allein. */
.wl-steiner-buehne-innen:has(.wl-sw) .wl-pj-buehne-kopf{padding-top:205px}
@media(max-width:900px){.wl-steiner-buehne-innen:has(.wl-sw) .wl-pj-buehne-kopf{padding-top:0}.wl-sw-flag-echt{height:520px;margin-top:0}.wl-sw-tuch-echt{height:520px;left:calc(50% - 60px)}}
@media(prefers-reduced-motion:reduce){.wl-sw-tuch-echt .wl-sw-stoff{animation:none}}
/* Limesbad-Schild als Mockup: Platte leicht gedreht, gefraeste Teile mit
Kante (dunkle, versetzte Kopie) und Schlagschatten vor der Platte. */
.wl-lb-kachel{aspect-ratio:auto}
.wl-projekt .wl-lb{width:100%;box-sizing:border-box;aspect-ratio:21/9;background:radial-gradient(ellipse at 50% 30%,#f3f3f0,#d9dad6 75%);display:grid;place-items:center;perspective:1800px;overflow:hidden;border-radius:4px}
.wl-lb-platte{position:relative;width:60%;aspect-ratio:3000/1850;background:linear-gradient(160deg,#fff,#f4f4f2);border-radius:3px;
transform:rotateY(-12deg) rotateX(3deg);transform-style:preserve-3d;
box-shadow:-3px 1px 0 #7f868b,0 40px 70px -24px rgba(0,0,0,.5),0 10px 24px -10px rgba(0,0,0,.3)}
.wl-lb-platte img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Der duenne Metallrahmen um die Platte: aussen ein Alu-Profil, innen ein Hauch Schatten */
.wl-lb-platte::before{content:"";position:absolute;inset:-4px;border-radius:4px;border:4px solid #b8bcbf;
border-color:#d7dadc #9ea3a7 #8d9296 #c9ccce;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 0 6px rgba(0,0,0,.18);pointer-events:none;z-index:2}
.wl-lb-folie{opacity:.92}
.wl-lb-kante{filter:brightness(.35);transform:translate(-2px,2px) translateZ(8px)}
.wl-lb-kante-farbe{filter:brightness(.6) saturate(.8)}
.wl-lb-hoch{transform:translate(-4px,-1px) translateZ(16px);filter:drop-shadow(-6px 8px 5px rgba(0,0,0,.4))}
@media(max-width:760px){.wl-projekt .wl-lb{aspect-ratio:4/3}.wl-lb-platte{width:88%;transform:rotateY(-8deg) rotateX(2deg)}}
/* Tasche mit echtem Druck: Flaechen tragen das Druckbild, die Griffe sind
schwarze Satinbaender - flach, mit leichtem Glanz. */
.wl-tasche-echt .wl-tasche-seite{background:#0a0a0a;border:0;box-shadow:inset 0 0 40px rgba(0,0,0,.5);overflow:hidden}
.wl-tasche-echt .wl-tasche-seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wl-tasche-echt .wl-tasche-links img,.wl-tasche-echt .wl-tasche-rechts img{object-fit:cover}
.wl-tasche-echt .wl-tasche-griff{left:58px;top:-70px;width:104px;height:84px;border:9px solid #141414;border-bottom:0;border-radius:52px 52px 0 0;
border-color:#2a2a2a #101010 #101010 #1c1c1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05)}
.wl-tasche-echt .wl-tasche-griff::after{content:"";position:absolute;inset:-9px;border-radius:inherit;border:9px solid transparent;border-bottom:0;
border-top-color:rgba(255,255,255,.12);filter:blur(1px);pointer-events:none}
/* Vierseiter im Zickzackfalz: klappt auf, dreht sich, klappt zu. Jede Tafel
haengt an der vorigen (Falz = linke Kante), Rueckseiten sind glatt beige.
Tafel 96 x 138; aufgeklappt 384 breit - der Rahmen ist so breit, damit das
Ganze in der Mitte steht. Zusammengeklappt rueckt es nach rechts in die Mitte. */
.wl-falt-buehne{height:420px;display:grid;place-items:center;perspective:1600px;overflow:visible}
.wl-falt{position:relative;width:360px;height:128px;transform-style:preserve-3d;scale:1.55;animation:wl-falt-dreh 18s ease-in-out infinite}
.wl-falt-t{position:absolute;top:0;left:180px;width:180px;height:128px;transform-style:preserve-3d;transform-origin:0 50%;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.wl-falt-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden}
.wl-falt-t img+img{transform:rotateY(180deg)}
.wl-falt-titel{animation:wl-falt-auf 18s ease-in-out infinite;z-index:2}
@keyframes wl-falt-auf{0%,10%{transform:translateZ(1px) rotateY(0)}26%,54%{transform:translateZ(1px) rotateY(-178deg)}70%,100%{transform:translateZ(1px) rotateY(0)}}
@keyframes wl-falt-dreh{0%,10%{transform:translateX(-90px) rotateX(-8deg) rotateY(-16deg)}26%{transform:translateX(0) rotateX(-8deg) rotateY(-8deg)}54%{transform:translateX(0) rotateX(-8deg) rotateY(8deg)}70%{transform:translateX(-90px) rotateX(-8deg) rotateY(16deg)}80%,90%{transform:translateX(-90px) rotateX(-8deg) rotateY(196deg)}100%{transform:translateX(-90px) rotateX(-8deg) rotateY(344deg)}}
@media (prefers-reduced-motion:reduce){.wl-falt,.wl-falt-t{animation:none!important}.wl-falt{transform:rotateX(-8deg) rotateY(-8deg)}.wl-falt-titel{transform:rotateY(-178deg)}}
@media (max-width:700px){.wl-falt-buehne{height:260px}.wl-falt{scale:.85}}
/* Aktuelle Ausgabe: das Heft 2/3, rechts daneben das Archiv mit Auswahl */
.wl-steiner-aktuell-reihe{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.wl-steiner-aktuell-reihe .wl-blatt{margin:0}
.wl-steiner-archiv{background:var(--grey);padding:clamp(20px,3vw,32px);position:sticky;top:96px}
.wl-steiner-archiv h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.05;margin:0 0 10px}
.wl-steiner-archiv p{margin:0 0 16px;font-size:14px;color:var(--ink-2)}
.wl-archiv-feld{display:block;margin:0 0 12px}
.wl-archiv-feld span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.wl-archiv-wahl{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink);border-radius:0}
.wl-archiv-stand{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.wl-archiv-wahl:disabled{opacity:.5}
@media (max-width:820px){.wl-steiner-aktuell-reihe{grid-template-columns:1fr}.wl-steiner-archiv{position:static}}
/* Kacheln ueber die volle Breite - aus dem Wrap heraus bis an die Raender */
.wl-pj-kacheln-voll{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:clamp(16px,3vw,40px)}
/* Plakatwand: die Plakate der Stadt Stein nebeneinander, leicht versetzt wie an einer Wand */
.wl-plakatwand{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(10px,1.4vw,22px);align-items:end;padding-bottom:16px}
.wl-plakat{margin:0;position:relative;transition:transform .35s ease}
.wl-plakat img{display:block;width:100%;height:auto;box-shadow:0 18px 34px -14px rgba(0,0,0,.65),0 2px 4px rgba(0,0,0,.3);background:#fff}
.wl-plakat:nth-child(2n){transform:translateY(-14px) rotate(.6deg)}.wl-plakat:nth-child(3n){transform:rotate(-.5deg)}
.wl-plakat:hover{transform:translateY(-10px) scale(1.06);z-index:2}
.wl-plakat figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;opacity:.6;text-align:center}
@media (max-width:900px){.wl-plakatwand{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.wl-plakatwand{grid-template-columns:repeat(2,1fr)}}
/* Das Limesbad-Schild oben in der Stadtwerke-Buehne, zwischen Karte und Fahne: ohne grauen Kasten */
.wl-projekt .wl-lb-buehne{aspect-ratio:auto;background:none;overflow:visible;border-radius:0;height:240px;align-items:end}
.wl-lb-buehne .wl-lb-platte{width:92%;transform:rotateY(-10deg) rotateX(3deg)}
/* Die Ladesaeule als Koerper: vier Seiten aus den Ansichten, dreht sich langsam um die eigene Achse */
.wl-lade-buehne{--lh:400px;--lb:212px;--lt:92px;height:calc(var(--lh) + 70px);display:grid;place-items:end center;perspective:1600px;position:relative}
.wl-lade{position:relative;width:var(--lb);height:var(--lh);transform-style:preserve-3d;animation:wl-lade-dreh 22s linear infinite;margin-bottom:30px}
.wl-lade-f{position:absolute;top:0;left:50%;height:100%;transform-style:preserve-3d;backface-visibility:hidden}
.wl-lade-f img{display:block;height:100%;width:auto}
.wl-lade-vorn,.wl-lade-hinten{width:var(--lb);margin-left:calc(var(--lb) / -2)}
.wl-lade-rechts,.wl-lade-links{width:var(--lt);margin-left:calc(var(--lt) / -2)}
.wl-lade-vorn{transform:translateZ(calc(var(--lt) / 2))}
.wl-lade-hinten{transform:rotateY(180deg) translateZ(calc(var(--lt) / 2))}
.wl-lade-rechts{transform:rotateY(90deg) translateZ(calc(var(--lb) / 2))}
.wl-lade-links{transform:rotateY(-90deg) translateZ(calc(var(--lb) / 2))}
.wl-lade-links img{transform:scaleX(-1)}
.wl-lade-boden{position:absolute;left:50%;bottom:22px;width:calc(var(--lb) * 1.6);height:calc(var(--lb) * .45);margin-left:calc(var(--lb) * -.8);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 70%);transform:translateZ(-1px)}
@keyframes wl-lade-dreh{from{transform:rotateX(-8deg) rotateY(0)}to{transform:rotateX(-8deg) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.wl-lade{animation:none;transform:rotateX(-8deg) rotateY(-30deg)}}
@media (max-width:700px){.wl-lade-buehne{--lh:300px;--lb:159px;--lt:69px}}
/* Der echte ROM-Schriftzug: Logo auf heller Platte, nachts rueckseitig beleuchtet (Halo aus einer weichen Kopie) */
.wl-rom-echt .wl-rom-fassade{background:#3a3733;padding:clamp(30px,5vw,60px) 24px}
.wl-rom-platte{position:relative;width:min(100%,640px);margin:0 auto;aspect-ratio:1.2/1;background:#d9d6d0;display:grid;place-items:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transition:background 1.2s}
.wl-rom-platte img{width:74%;height:auto;display:block;grid-area:1/1}
.wl-rom-logo{position:relative;z-index:2;filter:drop-shadow(1px 2px 1px rgba(0,0,0,.45));transition:filter 1.2s}
.wl-rom-halo{z-index:1;opacity:0;filter:brightness(0) invert(1) blur(6px) drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px rgba(255,236,200,.9));transition:opacity 1.2s}
.wl-rom-echt.nacht .wl-rom-fassade{background:#000}
.wl-rom-echt.nacht .wl-rom-platte{background:#5e5b56}
.wl-rom-echt.nacht .wl-rom-halo{opacity:1;animation:wl-rom-flackern 3.6s 1}
.wl-rom-echt.nacht .wl-rom-logo{filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
/* Gleiches Spaltmass: der Abstand von der Buehne zu den Kacheln ist derselbe wie zwischen den Kacheln */
.wl-steiner-buehne:has(+ .wl-pj-kacheln){margin-bottom:20px}
.wl-pj-kacheln + .wl-pj-kacheln{margin-top:-36px}
/* ROM: die Buehne bleibt wie immer, nur der Kasten wechselt - grau bei Tag, schwarz bei Nacht */
/* Die ganze Buehne nimmt die Farbe des Kastens an: grau bei Tag, schwarz bei Nacht, Schrift passt sich an */
.wl-projekt .wl-steiner-buehne:has(#wl-rom){transition:background 1.2s,color 1.2s}
.wl-projekt .wl-steiner-buehne:has(#wl-rom:not(.nacht)){background:#B9B9B9;color:#141414}
.wl-projekt .wl-steiner-buehne:has(#wl-rom.nacht){background:#0A0A0A}
.wl-steiner-buehne .wl-pj-buehne-kopf h2,.wl-steiner-buehne .wl-pj-buehne-kopf p,.wl-steiner-buehne .wl-pj-buehne-kopf .wl-k{transition:color 1.2s}
.wl-steiner-buehne:has(#wl-rom:not(.nacht)) .wl-pj-buehne-kopf h2{color:#141414}
.wl-steiner-buehne:has(#wl-rom:not(.nacht)) .wl-pj-buehne-kopf p{color:rgba(20,20,20,.78)}
.wl-steiner-buehne:has(#wl-rom:not(.nacht)) .wl-pj-buehne-kopf .wl-k{color:#141414!important;opacity:.7}
.wl-rom-echt .wl-rom-steuer{margin-top:16px}
.wl-rom-echt:not(.nacht) .wl-rom-knopf{border-color:rgba(20,20,20,.45);color:#141414}
.wl-rom-echt:not(.nacht) .wl-rom-knopf.an{background:#141414;color:#fff;border-color:#141414}
.wl-rom-echt:not(.nacht) .wl-rom-fassade{background:#A6A6A6}
.wl-rom-echt:not(.nacht) .wl-rom-platte{background:#E3E3E0}
/* Ein einzelnes Foto nur in der rechten Spalte */
.wl-arbeit-paar .wl-arbeit-rechts{grid-column:2}
@media (max-width:760px){.wl-arbeit-paar .wl-arbeit-rechts{grid-column:auto}}
/* Paar-Reihe mit Zitat links und Foto rechts: beides beginnt oben */
.wl-arbeit-paar-oben{align-items:start}
.wl-arbeit-zitatzelle{grid-column:1;align-self:start}
.wl-arbeit-zitatzelle .wl-steiner-zitat{margin-top:0!important;padding-top:70px}
.wl-zitat-unten{margin-top:40px!important}
.wl-foto-unten{margin:40px 0 0}
.wl-foto-unten + .wl-zitat-unten{margin-top:32px!important}
/* Echte Shirts: Mockup vorn/hinten dreht sich, daneben die Druckmotive auf Gruen */
.wl-shirts-echt{display:grid;grid-template-columns:1fr;justify-items:center;max-width:960px;margin:0 auto}
.wl-shirts-echt .wl-shirt-echt{width:min(100%,460px)}
.wl-shirt-echt{aspect-ratio:1/1;perspective:1200px}
.wl-shirt-echt .wl-shirt-seite{clip-path:none;background:none;padding:0;object-fit:contain;width:100%;height:100%;filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
.wl-shirt-echt .wl-shirt-hinten{transform:rotateY(180deg)}
/* Das Shirt dreht sich von allein einmal rum - vorn, hinten, vorn; anhalten mit der Maus */
.wl-shirt-echt .wl-shirt-innen{animation:wl-shirt-dreh 14s linear infinite;transition:none}
.wl-shirt-echt:hover .wl-shirt-innen{animation-play-state:paused}
@keyframes wl-shirt-dreh{0%{transform:rotateX(-4deg) rotateY(0)}100%{transform:rotateX(-4deg) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.wl-shirt-echt .wl-shirt-innen{animation:none}}
.wl-shirt-motive{background:var(--pf);border-radius:6px;padding:clamp(16px,2.4vw,28px);display:grid;gap:18px;justify-items:center}
.wl-shirt-motive .wl-k{margin:0;color:rgba(255,255,255,.7)!important;justify-self:start}
.wl-shirt-motive img{display:block;max-width:100%;height:auto}
.wl-shirt-motive > img{width:80%}
.wl-shirt-motive-reihe{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:center;width:100%}
.wl-shirt-motive-reihe img:first-child{width:70%;justify-self:center}
@media (max-width:640px){.wl-shirts-echt{grid-template-columns:1fr}}
/* Echte Rollup-Bahnen als Bild */
.wl-ru-bahn-echt{padding:0;background:#fff;aspect-ratio:500/1200;overflow:hidden}
.wl-ru-bahn-echt img{display:block;width:100%;height:100%;object-fit:cover}
.wl-ru-4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1000px}
@media (max-width:640px){.wl-ru-4{grid-template-columns:1fr 1fr}}
/* 3D-Shirt: Leinwand fuellt den Kasten, das Ersatzbild steht bis Three.js da ist */
/* Das Shirt als Film (in Blender gerechnet): Hintergrund im Film = --pf-dunkel */
.wl-shirt-film-kasten{width:min(100%,560px);margin:0 auto;display:grid;justify-items:center;gap:12px}
.wl-shirt-film{display:block;width:100%;height:auto;aspect-ratio:1/1;background:var(--pf-dunkel);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 84%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 84%,transparent 100%)}
.wl-shirt-film-knopf{font:500 13px/1 var(--mono);letter-spacing:.02em;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:9px 16px;cursor:pointer;opacity:.85}
.wl-shirt-film-knopf:hover,.wl-shirt-film-knopf:focus-visible{opacity:1}
.wl-shirt-film-quelle{margin:0;font:400 11px/1.4 var(--mono);opacity:.7;text-align:center}
/* Shirt zum Drehen (Hintergrund im Bild = --pf-dunkel) */
.wl-shirt-dreh{max-width:560px;margin:0 auto;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:6px}
.wl-shirt-dreh.zieht{cursor:grabbing}
.wl-shirt-dreh img{display:block;width:100%;height:auto;pointer-events:none}
.wl-shirt-dreh-hinweis{margin:8px 0 0;text-align:center;font:400 12px/1.4 var(--mono);opacity:.65}
/* Shirt als zwei Standbilder (Hintergrund im Bild = --pf-dunkel) */
.wl-shirt-bilder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,2vw,24px);max-width:980px;margin:0 auto}
.wl-shirt-bilder img{display:block;width:100%;height:auto}
.wl-shirt-bilder .wl-shirt-film-quelle{grid-column:1/-1}
@media (max-width:640px){.wl-shirt-bilder{grid-template-columns:1fr}}
/* Filme allgemein (z. B. Fahrzeug Bogner): Hintergrund im Film = --pf-dunkel */
.wl-film-kasten{max-width:1000px;margin:18px auto 26px;display:grid;justify-items:center;gap:12px}
.wl-film{display:block;width:100%;height:auto;aspect-ratio:2/1;background:var(--pf-dunkel);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
.wl-film-knopf{font:500 13px/1 var(--mono);letter-spacing:.02em;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:9px 16px;cursor:pointer;opacity:.85}
.wl-film-knopf:hover,.wl-film-knopf:focus-visible{opacity:1}
.wl-film-quelle{margin:0;font:400 11px/1.4 var(--mono);opacity:.6;text-align:center}
.wl-shirt-film-quelle a{color:inherit}
/* Sonnige Seiten: die dunklen Flaechen sind gelb, die Schrift darauf dunkel */
.wl-pj-sonne{--sonne-ink:#2A2205}
.wl-pj-sonne .wl-steiner-buehne,.wl-pj-sonne .wl-pj-kachel-dunkel,.wl-pj-sonne .wl-steiner-cta-ins{color:var(--sonne-ink)}
.wl-pj-sonne .wl-pj-buehne-kopf h2,.wl-pj-sonne .wl-steiner-buehne-kopf h2,.wl-pj-sonne .wl-steiner-cta-ins h2,.wl-pj-sonne .wl-steiner-cta-ins h3{color:var(--sonne-ink)}
.wl-pj-sonne .wl-pj-buehne-kopf p,.wl-pj-sonne .wl-steiner-cta-ins p{color:rgba(42,34,5,.78)}
.wl-pj-sonne .wl-steiner-buehne .wl-k,.wl-pj-sonne .wl-pj-kachel-dunkel .wl-k,.wl-pj-sonne .wl-steiner-cta-ins .wl-k{color:var(--sonne-ink)!important;opacity:.7}
.wl-pj-sonne .wl-blatt-pfeil{border-color:rgba(42,34,5,.45);color:var(--sonne-ink)}
.wl-pj-sonne .wl-blatt-pfeil:hover:not(:disabled){background:var(--sonne-ink);color:#fff}
.wl-pj-sonne .wl-blatt-stand,.wl-pj-sonne .wl-blatt-stufe,.wl-pj-sonne .wl-blatt-hinweis{color:var(--sonne-ink);opacity:.75}
.wl-pj-sonne .wl-knopf{background:var(--sonne-ink);color:#fff!important;border-color:var(--sonne-ink)}
.wl-pj-sonne .wl-knopf:hover{background:#000}
.wl-pj-sonne .wl-arbeit-hero .wl-arbeit-name{color:var(--pf)}
/* Foto rechts unter dem Steckbrief, ungeschnitten */
.wl-foto-rechts{margin:28px 0 0}
.wl-foto-rechts img{aspect-ratio:auto!important;height:auto;object-fit:contain}
.wl-pj-sonne .wl-steiner-cta-ins h2,.wl-pj-sonne .wl-steiner-cta-ins strong{color:var(--sonne-ink)!important}
.wl-pj-sonne .wl-steiner-cta-ins p{color:rgba(42,34,5,.78)!important}
.wl-pj-sonne .wl-steiner-cta-ins .wl-k{color:var(--sonne-ink)!important;opacity:.7;border-bottom-color:rgba(42,34,5,.25)!important}
.wl-pj-sonne .wl-pj-buehne-kopf p,.wl-pj-sonne .wl-pj-kachel-dunkel p{color:rgba(42,34,5,.78)}
/* Die echten Ortsschilder: zwei Tafeln auf Pfosten, dazwischen Solnhofen als Landschaft */
.wl-ort-echt{height:auto;aspect-ratio:3/1;max-height:none;overflow:hidden;border-radius:0;background:none;width:100vw;margin-left:calc(50% - 50vw);display:block;perspective:1200px}
.wl-ort-land{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:.9}
.wl-ort-tafel{position:absolute;bottom:14%;z-index:1;display:grid;justify-items:center;width:15%}
.wl-ort-links{left:14%}.wl-ort-rechts{right:14%}
.wl-ort-blech{width:100%;background:#fff;padding:4px;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.wl-ort-links .wl-ort-blech{transform:rotateY(14deg)}.wl-ort-rechts .wl-ort-blech{transform:rotateY(-14deg)}
.wl-ort-blech img{display:block;width:100%;height:auto;border-radius:9px}
.wl-ort-tafel .wl-ort-pfosten{position:absolute;top:calc(100% - 14px);left:26%;height:calc(100% * .32 + 40px);width:7px;border-radius:4px;z-index:-1;background:linear-gradient(90deg,#7c8288,#b7bdc2,#6d7378)}
.wl-ort-tafel .wl-ort-pfosten-2{left:auto;right:26%}
.wl-ort-tafel::after{content:"";position:absolute;left:0;right:0;bottom:-32%;height:14px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(6px);z-index:-2}
@media (max-width:640px){.wl-ort-echt{aspect-ratio:4/3}.wl-ort-tafel{width:28%;bottom:12%}.wl-ort-links{left:5%}.wl-ort-rechts{right:5%}}
/* Solnhofen: die Zeichnung schliesst die Buehne unten ab - kein Blau mehr unter den Schildern */
.wl-steiner-buehne:has(.wl-ort-echt){padding-bottom:0}
.wl-ort-echt{margin-bottom:0}
/* Ganz ausgeklappt zeigt die linke Tafel das Inhaltsverzeichnis statt der Rueckseite */
.wl-sp-inhalt{opacity:0;transition:opacity .5s}
.wl-sp.k2 .wl-sp-inhalt{opacity:1;transition-delay:.3s}
/* Vorschau-Kacheln mit Animation: der Buehnen-Baustein in 600 x 450, auf die Kachel skaliert.
Nichts davon reagiert auf die Maus - ausser den Tag/Nacht-Knoepfen bei ROM. */
.wl-arb-bild.hat-anim{padding:0;overflow:hidden;position:relative;background:var(--pf-dunkel,#111)}
.wl-arb-anim{position:absolute;left:0;top:0;width:600px;height:450px;transform:scale(var(--wl-anim-skala,.5));transform-origin:0 0;background:var(--pf-dunkel);display:grid;place-items:center;pointer-events:none;overflow:hidden}
.wl-arb-anim .wl-pj-reveal{opacity:1;transform:none}
.wl-arb-anim-stadt-stein .wl-sp-echt{--pw:125px!important;--ph:250px!important;margin:0;width:100%;height:100%;padding:0;align-items:center;justify-items:center;overflow:hidden}
.wl-arb-anim-stadt-stein .wl-sp-heft{margin-left:0}
.wl-arb-anim-stadt-stein .wl-sp-stand{display:none}
.wl-arb-anim-stadtwerke-weissenburg .wl-sw-karte{width:340px;margin:0}
.wl-arb-anim-rom{pointer-events:none}
.wl-arb-anim-rom .wl-rom-echt{width:100%;height:100%;padding:16px 24px;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center}
.wl-arb-anim-rom .wl-rom-fassade{padding:0;background:none!important;width:100%}
.wl-arb-anim-rom .wl-rom-platte{width:400px;aspect-ratio:1.4/1}
.wl-arb-anim-rom .wl-rom-platte img.wl-rom-logo,.wl-arb-anim-rom .wl-rom-platte img.wl-rom-halo{width:52%!important;max-width:52%;height:auto!important;max-height:80%;object-fit:contain;align-self:center;justify-self:center}
.wl-arb-anim-rom .wl-rom-echt{background:#B9B9B9;transition:background 1.2s}
.wl-arb-anim-rom .wl-rom-echt.nacht{background:#0A0A0A}
.wl-arb-anim-rom .wl-rom-steuer{margin-top:8px;pointer-events:auto;position:relative;z-index:3}
.wl-arb-anim-katheder-roth .wl-screen-rechner{width:540px}
.wl-arb-anim-kaefer .wl-tasche-buehne{height:450px}
.wl-arb-anim-kaefer .wl-tasche{cursor:default}
.wl-arb-anim-kaefer .wl-tasche-buehne:hover .wl-tasche{animation-play-state:running}
/* In der Kachel dreht sich die Kundenkarte von allein, immer wieder */
.wl-arb-anim .wl-sw-karte .wl-sw-karte-vorn{animation:wl-kk-v 9s ease-in-out infinite;transition:none}
.wl-arb-anim .wl-sw-karte .wl-sw-karte-hinten{animation:wl-kk-h 9s ease-in-out infinite;transition:none}
@keyframes wl-kk-v{0%,40%{transform:rotateY(0)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes wl-kk-h{0%,40%{transform:rotateY(180deg)}50%,90%{transform:rotateY(360deg)}100%{transform:rotateY(540deg)}}
/* Wickelfalz: bevor die Klappe aufgeht, sieht man ihre Aussenseite (Einladung), erst dann innen (Lage) */
.wl-sp-aussen{transform:rotateY(180deg);backface-visibility:hidden}
.wl-sp-echt .wl-sp-panel img:not(.wl-sp-aussen){backface-visibility:hidden}
.wl-sp.k1:not(.k2) .p2{opacity:1;transform:rotateY(-180deg) translateZ(-1px)}
.wl-sp.k1:not(.k2) .wl-sp-inhalt{opacity:0}
.wl-arb-anim-paeckerts .wl-anz{width:540px;gap:14px;align-items:end;font-size:11px}
.wl-arb-anim-paeckerts .wl-anz-blatt{min-height:0;padding:12px;gap:8px}
.wl-arb-anim-paeckerts .wl-anz-anzeige{padding:10px;gap:4px}
.wl-arb-anim-paeckerts .wl-anz-anzeige b{font-size:16px}
.wl-arb-anim-paeckerts .wl-anz-anzeige em{font-size:11px}
.wl-arb-anim-paeckerts .wl-anz-anzeige small{font-size:8px}
.wl-arb-anim-ortner-stoehr .wl-ru{width:380px;gap:36px;max-width:none;grid-template-columns:1fr 1fr}
.wl-arb-anim-ortner-stoehr .wl-ru-bahn-echt{height:400px;aspect-ratio:auto}
.wl-arb-anim-ortner-stoehr .wl-ru-bahn{clip-path:inset(0 0 0 0);animation:wl-ru-loop 10s ease-in-out infinite;animation-delay:calc(var(--i,0)*.35s);transition:none}
@keyframes wl-ru-loop{0%,6%{clip-path:inset(100% 0 0 0)}18%,82%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(100% 0 0 0)}}
/* Zaunreihe: ein oder zwei Zaunfelder nebeneinander, jedes mit seiner Plane */
.wl-zaunreihe{display:grid;gap:clamp(16px,3vw,40px);align-items:end}
.wl-zaunreihe-2{grid-template-columns:1fr 1fr}
.wl-zaunfeld{position:relative;aspect-ratio:700/400}
.wl-zaunfeld .wl-zaun-plane{left:9%;right:9%;top:11%;aspect-ratio:2000/1023}
@media (max-width:700px){.wl-zaunreihe-2{grid-template-columns:1fr}}
.wl-ru-1{grid-template-columns:1fr;max-width:260px}
.wl-arb-anim-stadt-stein .wl-sp-heft{transition:transform 1.3s cubic-bezier(.4,.05,.2,1),margin-left 1.3s cubic-bezier(.4,.05,.2,1)}
.wl-arb-anim-stadt-stein .wl-sp.k2 .wl-sp-heft{margin-left:250px}
/* Mini-Heft in der Kachel: zwei Seiten, ein Blatt schlaegt um */
.wl-arb-bild.hat-heft{padding:0;overflow:hidden;position:relative;display:grid;place-items:center;perspective:1400px}
.wl-mh{position:relative;width:62%;aspect-ratio:1.414/1;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.05,.2,1)}
.wl-mh.zu{transform:translateX(-25%)}
.wl-mh-l,.wl-mh-r,.wl-mh-blatt,.wl-mh-v,.wl-mh-h{position:absolute;top:0;bottom:0;width:50%;background:#fff center/cover no-repeat}
.wl-mh-l{left:0;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.wl-mh-r{right:0;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.wl-mh-l.leer,.wl-mh-r.leer{visibility:hidden}
.wl-mh-l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 80%,rgba(0,0,0,.18))}
.wl-mh-r::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 20%)}
.wl-mh-blatt{left:50%;background:none;transform-origin:left center;transform-style:preserve-3d;visibility:hidden;z-index:2}
.wl-mh-v,.wl-mh-h{left:0;width:100%;backface-visibility:hidden}
.wl-mh-h{transform:rotateY(180deg)}
/* Tasche nach Druckdaten: Vorderseite 220 x 293, Seitenfalte 91 breit; das MK-Rund laeuft ueber die Kante */
.wl-tasche-echt{height:293px}
.wl-tasche-echt .wl-tasche-seite{height:293px}
.wl-tasche-echt .wl-tasche-vorn{transform:translateZ(45.5px)}
.wl-tasche-echt .wl-tasche-hinten{transform:rotateY(180deg) translateZ(45.5px)}
.wl-tasche-echt .wl-tasche-links{width:91px;transform:rotateY(-90deg) translateZ(45.5px)}
.wl-tasche-echt .wl-tasche-rechts{width:91px;transform:rotateY(90deg) translateZ(174.5px)}
/* Satinbaender, die vorn und hinten locker nach unten haengen (statt stehendem Buegel) */
.wl-tasche-echt .wl-tasche-griff{left:0;top:0;width:220px;height:170px;border:0!important;border-radius:0;background:none;box-shadow:none;transform-origin:50% 8%}
.wl-tasche-echt .wl-tasche-griff::after,.wl-tasche-echt .wl-tasche-griff::before{display:none}
.wl-tasche-echt .wl-tasche-griff svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.wl-tasche-echt .wl-tasche-griff-v{transform:translateZ(47px)}
.wl-tasche-echt .wl-tasche-griff-h{transform:rotateY(180deg) translateZ(47px)}
@keyframes wl-band-schwing{0%,100%{rotate:x 0deg}50%{rotate:x 8deg}}
@keyframes wl-band-schwing-h{0%,100%{rotate:x 0deg}50%{rotate:x -8deg}}
/* Kaefer: Faltblatt 2/3, Tasche 1/3 */
.wl-mitnehmen-allein{grid-template-columns:1fr!important;max-width:none}
.wl-falt-gross.wl-falt-buehne{height:460px}
.wl-falt-gross .wl-falt{scale:1.9}
@media (max-width:1400px){.wl-falt-gross .wl-falt{scale:1.6}}
@media (max-width:1150px){.wl-falt-gross.wl-falt-buehne{height:380px}.wl-falt-gross .wl-falt{scale:1.3}}
@media (max-width:820px){.wl-falt-gross .wl-falt{scale:1.3}}
@media (max-width:560px){.wl-falt-gross.wl-falt-buehne{height:260px}.wl-falt-gross .wl-falt{scale:.85}}
/* Bewegter Teil im Bildschirmfoto (Video im Kopf der Homepage) */
.wl-screen-bild{position:relative;overflow:hidden}
.wl-screen-film{position:absolute;display:block;object-fit:contain;pointer-events:none}
/* Wer am Geraet "Bewegung reduzieren" eingestellt hat, bekommt keine
Endlosanimationen: jede Animation springt sofort auf ihren Endstand und
laeuft nur einmal. Die Einzelregeln oben bleiben; das hier faengt alles ab,
was dort nicht eigens bedacht ist. Skriptgesteuerte Bewegung haelt
js/45-js-projekt.js an. */
@media (prefers-reduced-motion:reduce){
[class*="wl-"],[class*="wl-"]::before,[class*="wl-"]::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
}
/* Limesbad zum Durchlaufen (Stadtwerke): 3D-Welt, Stationen, kleine Karte */
.wl-pj-welt{margin:clamp(28px,5vw,64px) 0 0}
.wl-pj-welt .wl-pj-buehne-kopf{max-width:760px;margin-bottom:22px}
.wl-lbw{position:relative;width:100%;aspect-ratio:16/9;min-height:440px;max-height:86vh;border-radius:6px;overflow:hidden;background:linear-gradient(#bfe4f4,#cfe3a8);isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wl-lbw:fullscreen{max-height:none;border-radius:0;aspect-ratio:auto}
.wl-lbw-flaeche{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;cursor:pointer}
.wl-lbw.laeuft{touch-action:none}
.wl-lbw-flaeche:focus-visible{box-shadow:inset 0 0 0 3px #00788a}
.wl-lbw.laeuft .wl-lbw-flaeche{cursor:crosshair}
.wl-lbw-schilder{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wl-lbw-schild{position:absolute;left:0;top:0;pointer-events:auto;font:600 12px/1 var(--sans,system-ui);letter-spacing:.02em;padding:7px 11px;border-radius:99px;border:0;background:#fff;color:#062c33;box-shadow:0 4px 14px rgba(6,44,51,.18);white-space:nowrap;cursor:pointer;transition:opacity .3s,background .2s}
.wl-lbw-schild::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);z-index:-1}
.wl-lbw-schild.unsere{background:#ffd23f}
.wl-lbw-schild.an{background:#00788a;color:#fff}
.wl-lbw:not(.laeuft) .wl-lbw-schild{pointer-events:none}
.wl-lbw-start{position:absolute;left:clamp(16px,4vw,48px);bottom:clamp(16px,4vw,48px);max-width:380px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);padding:24px 26px;border-radius:6px;box-shadow:0 18px 50px rgba(6,44,51,.2);transition:opacity .4s,transform .4s}
.wl-lbw-start h3{margin:6px 0 8px;font-size:clamp(22px,2.6vw,30px);line-height:1.1}
.wl-lbw-start p{margin:0 0 16px;font-size:14px;line-height:1.5}
.wl-lbw-start .wl-k{margin:0;color:#00788a}
.wl-lbw.laeuft .wl-lbw-start{opacity:0;transform:translateY(20px);pointer-events:none}
.wl-lbw-karte{position:absolute;top:16px;left:16px;width:min(340px,calc(100% - 32px));background:#fff;border-radius:6px;box-shadow:0 18px 50px rgba(6,44,51,.25);overflow:hidden;opacity:0;transform:translateX(-20px);pointer-events:none;transition:opacity .3s,transform .3s}
.wl-lbw-karte.offen{opacity:1;transform:none}
.wl-lbw-karte img{display:block;width:100%;height:170px;object-fit:cover;background:#e2f2f4}
.wl-lbw-karte img[src$=".png"]{object-fit:contain;padding:14px;box-sizing:border-box}
.wl-lbw-karte .wl-k,.wl-lbw-marke{margin:14px 18px 0;font-size:11px}
.wl-lbw-marke{display:inline-block;background:#ffd23f;color:#062c33;font:600 11px/1 var(--mono,monospace);text-transform:uppercase;letter-spacing:.08em;padding:5px 8px;border-radius:3px}
.wl-lbw-karte h3{margin:8px 18px 6px;font-size:19px;line-height:1.2}
.wl-lbw-karte p:last-child{margin:0 18px 18px;font-size:14px;line-height:1.5}
.wl-lbw-mini{position:absolute;right:14px;bottom:14px;width:clamp(120px,17vw,200px);height:auto;border-radius:6px;background:rgba(255,255,255,.75);padding:6px;box-shadow:0 8px 24px rgba(6,44,51,.18);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.wl-lbw.laeuft .wl-lbw-mini{opacity:1;pointer-events:auto}
.wl-lbw-oben{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.wl-lbw-oben button{font:600 12px/1 var(--sans,system-ui);padding:9px 13px;border-radius:99px;border:0;background:rgba(255,255,255,.92);color:#062c33;cursor:pointer;box-shadow:0 4px 14px rgba(6,44,51,.15)}
.wl-lbw-ende{display:none}
.wl-lbw.laeuft .wl-lbw-ende{display:block}
.wl-lbw.blitz::after{content:"";position:absolute;inset:0;background:#fff;animation:wl-lbw-blitz .35s ease-out forwards;pointer-events:none}
@keyframes wl-lbw-blitz{from{opacity:.9}to{opacity:0}}
.wl-lbw-ohne{display:none;position:absolute;inset:auto 16px 16px;margin:0;background:#fff;padding:14px 16px;border-radius:6px}
.wl-lbw.ohne-3d .wl-lbw-ohne{display:block}
.wl-lbw.ohne-3d .wl-lbw-start,.wl-lbw.ohne-3d .wl-lbw-oben,.wl-lbw.ohne-3d .wl-lbw-mini,.wl-lbw.ohne-3d .wl-lbw-flaeche{display:none}
.wl-lbw.ohne-3d{aspect-ratio:auto;max-height:none;min-height:0;background:none}
.wl-lbw.ohne-3d .wl-lbw-ohne{position:static;padding:0 0 14px}
.wl-lbw.ohne-3d .wl-lbw-daten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.wl-lbw-daten article{background:#fff;border-radius:6px;overflow:hidden}
.wl-lbw-daten img{display:block;width:100%;height:150px;object-fit:cover}
.wl-lbw-daten h3,.wl-lbw-daten p{margin:10px 14px}
.wl-lbw-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.wl-lbw-nav button{font:500 13px/1 var(--sans,system-ui);padding:10px 14px;border-radius:99px;border:1px solid rgba(6,44,51,.18);background:#fff;color:#062c33;cursor:pointer;transition:background .2s,color .2s}
.wl-lbw-nav button.unsere{border-color:#e6b800;background:#fff6d1}
.wl-lbw-nav button:hover,.wl-lbw-nav button.an{background:#00788a;border-color:#00788a;color:#fff}
@media(max-width:760px){
.wl-lbw{aspect-ratio:3/4;min-height:0;max-height:78vh}
.wl-lbw-start{left:12px;right:12px;bottom:12px;max-width:none;padding:18px}
.wl-lbw-karte{top:auto;bottom:12px;left:12px;width:calc(100% - 24px)}
.wl-lbw-karte img{height:120px}
.wl-lbw-mini{top:52px;bottom:auto;right:12px;width:104px}
.wl-lbw-oben{top:10px;right:10px;gap:6px}
.wl-lbw-oben button{font-size:11px;padding:7px 10px}
.wl-lbw-gross{display:none}
}
.wl-lbw-satz{margin:22px 0 4px;font-family:var(--serif,Newsreader,Georgia,serif);font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.3;color:#062c33;max-width:760px}
/* Die Welt steht auf hellem Grund: Überschrift und Text dunkel statt weiß */
.wl-pj-welt .wl-pj-buehne-kopf h2{color:#062c33}
.wl-pj-welt .wl-pj-buehne-kopf p{color:rgba(6,44,51,.75)}
.wl-projekt .wl-pj-welt .wl-pj-buehne-kopf .wl-k{color:var(--pf)}
/* KBS-Wandkalender: A4 quer (297 × 210), Wire-O oben an der Längsseite, blättert beim Scrollen */
.wl-kal{position:relative;height:calc(13 * 38vh + 100vh)}
.wl-kal-halter{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.wl-kal-wand{position:relative;width:min(760px,88vw,calc((100vh - 170px) * 297 / 210));perspective:2200px}
.wl-kal-ringe{position:absolute;left:4%;right:4%;top:-14px;height:30px;display:flex;justify-content:space-between;z-index:500;pointer-events:none}
.wl-kal-ringe i{width:7px;height:30px;border-radius:5px;background:linear-gradient(90deg,#6d7479,#e6e9eb 45%,#8b9296);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.wl-kal-ringe::before{content:"";position:absolute;left:-4%;right:-4%;top:-12px;height:4px;border-radius:2px;background:#c9ced1;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.wl-kal-stapel{position:relative;aspect-ratio:297/210;transform-style:preserve-3d}
.wl-kal-rueck{position:absolute;inset:0;background:#e9e6df;border-radius:2px;box-shadow:0 30px 60px rgba(0,0,0,.45);z-index:0}
.wl-kal-blatt{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.wl-kal-vorn,.wl-kal-hinten{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;overflow:hidden}
.wl-kal-vorn{background:#fff;color:#1d2a30;display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.wl-kal-hinten{background:#f3f1ec;transform:rotateX(180deg)}
.wl-kal-titel .wl-kal-vorn{display:flex;flex-direction:column;justify-content:flex-end;padding:7% 8%;background:linear-gradient(150deg,var(--pf,#2C6E8F),var(--pf-dunkel,#0B222C));color:#fff}
.wl-kal-titel strong{font-family:var(--serif);font-weight:300;font-size:clamp(34px,6vw,76px);line-height:1;letter-spacing:-.02em}
.wl-kal-titel em{font-style:normal;opacity:.8;margin-top:10px;font-size:clamp(13px,1.4vw,17px)}
.wl-kal-titel .wl-k{color:var(--pf-akzent,#86C4DF);margin:0 0 auto}
.wl-kal-motiv{position:relative;background:linear-gradient(160deg,var(--m1),var(--m2));display:flex;flex-direction:column;justify-content:flex-end;padding:8%}
.wl-kal-motiv::before{content:"";position:absolute;right:12%;top:14%;width:34%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.35)}
.wl-kal-motiv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:rgba(255,255,255,.22);clip-path:polygon(0 60%,22% 30%,45% 55%,70% 15%,100% 45%,100% 100%,0 100%)}
.wl-kal-motiv span{position:relative;z-index:1;font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.6vw,46px);line-height:1;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.18)}
.wl-kal-motiv small{position:relative;z-index:1;font:500 10px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:8px}
.wl-kal-monat{padding:7% 7% 6%;display:flex;flex-direction:column}
.wl-kal-monat p{margin:0 0 6%;font-family:var(--serif);font-size:clamp(16px,2vw,26px);line-height:1}
.wl-kal-monat p em{font-style:normal;color:#8a959b;font-size:.7em}
.wl-kal-tage{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:1fr;column-gap:3px;flex:1}
.wl-kal-tage b,.wl-kal-tage i{font-style:normal;font-size:clamp(9px,1.1vw,14px);line-height:1.6}
.wl-kal-tage b{text-align:left;padding:0 0 4px 3px}
.wl-kal-tage i{border-top:1px solid #e6e8e9;padding:2px 0 0 3px}
.wl-kal-tage i:empty{border-top-color:transparent}
.wl-kal-tage b{font-weight:600;color:#8a959b;font-size:clamp(8px,.9vw,11px)}
.wl-kal-tage i.s{color:#2C6E8F}
.wl-kal-tage i.f{color:#c0392b;font-weight:600}
.wl-kal-stand{margin:0;font:500 12px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
@media (max-width:760px){.wl-kal{height:calc(13 * 30vh + 100vh)}.wl-kal-vorn{grid-template-columns:1fr 1.1fr}.wl-kal-monat{padding:10% 5% 4%}.wl-kal-ringe i:nth-child(2n){display:none}.wl-kal-ringe i{width:5px;height:22px}.wl-kal-ringe{top:-10px}}
/* Felsenbräu-Tresen: Flaschen in 3D, beim Scrollen wandert die Reihe weiter */
.wl-tresen{position:relative;height:calc(11 * 42vh + 100vh);margin:0 -40px}
.wl-tresen-halter{position:sticky;top:0;height:100vh;overflow:hidden}
.wl-tresen-flaeche{position:absolute;inset:0;width:100%;height:100%;display:block}
.wl-tresen-info{position:absolute;left:clamp(16px,4vw,56px);top:clamp(70px,12vh,120px);width:min(340px,70vw);color:#eef5f0;pointer-events:none}
.wl-tresen-zahl{margin:0 0 10px;font:500 12px/1 var(--mono,monospace);letter-spacing:.1em;color:var(--pf-akzent,#E6B77A)}
.wl-tresen-name{margin:0 0 14px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,56px);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.wl-tresen-tabelle{display:grid;grid-template-columns:auto 1fr;margin:0;border-top:1px solid rgba(238,245,240,.5)}
.wl-tresen-tabelle dt,.wl-tresen-tabelle dd{margin:0;padding:6px 0;border-bottom:1px solid rgba(238,245,240,.25);font-size:13px}
.wl-tresen-tabelle dt{font:500 10px/1.9 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;opacity:.7;padding-right:18px}
.wl-tresen-tabelle dd{text-align:right}
.wl-tresen-satz{position:absolute;left:0;right:0;bottom:clamp(24px,7vh,70px);margin:0;text-align:center;font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,40px);line-height:1.1;text-transform:uppercase;color:#eef5f0;pointer-events:none;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.wl-tresen.wechsel .wl-tresen-info,.wl-tresen.wechsel .wl-tresen-satz{animation:wl-tresen-rein .5s ease-out}
@keyframes wl-tresen-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wl-tresen-sorten{display:none}
.wl-tresen.ohne-3d{height:auto;margin:0}
.wl-tresen.ohne-3d .wl-tresen-halter{position:static;height:auto}
.wl-tresen.ohne-3d .wl-tresen-flaeche,.wl-tresen.ohne-3d .wl-tresen-info,.wl-tresen.ohne-3d .wl-tresen-satz{display:none}
.wl-tresen.ohne-3d .wl-tresen-sorten{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;list-style:none;padding:0}
.wl-tresen.ohne-3d .wl-tresen-sorten img{width:100%;display:block}
.wl-tresen.ohne-3d .wl-tresen-sorten dl{display:none}
@media (max-width:860px){.wl-tresen{margin:0 -20px;height:calc(11 * 32vh + 100vh)}.wl-tresen-info{top:20px}.wl-tresen-tabelle{display:none}.wl-tresen-name{font-size:30px}}
.wl-tresen-halter::before,.wl-tresen-halter::after{content:"";position:absolute;z-index:1;pointer-events:none}
.wl-tresen-halter::before{left:0;top:0;bottom:0;width:48%;background:linear-gradient(90deg,rgba(12,42,30,.85),rgba(12,42,30,0))}
.wl-tresen-halter::after{left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(12,42,30,.8),rgba(12,42,30,0))}
.wl-tresen-info,.wl-tresen-satz{z-index:2}
/* Felsenbräu: die drei Limos nebeneinander, schweben leicht, heben sich unter der Maus */
.wl-limos{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,6vw,90px);padding:clamp(10px,3vw,40px) 0 10px}
.wl-limo{margin:0;text-align:center;animation:wl-limo-schweben 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.6s)}
.wl-limo img{display:block;height:clamp(240px,34vw,460px);width:auto;margin:0 auto;filter:drop-shadow(0 26px 22px rgba(0,0,0,.45));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wl-limo:hover img{transform:translateY(-14px) rotate(-3deg) scale(1.03)}
.wl-limo figcaption{margin-top:18px;font:500 11px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
@keyframes wl-limo-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.wl-limo{animation:none}}
@media (max-width:560px){.wl-limos{gap:10px}.wl-limo img{height:200px}}
/* Felsenbräu: kleine Kachel „Einschenken“ (Kling-Film) */
.wl-einschenken{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(18px,4vw,48px);align-items:center;margin:0 0 clamp(36px,5vw,60px);padding:clamp(18px,3vw,28px);border-radius:8px;background:rgba(255,255,255,.05)}
.wl-einschenken-text h3{margin:6px 0 8px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.1}
.wl-einschenken-text p{margin:0 0 16px;font-size:14px;opacity:.8}
.wl-einschenken-text .wl-k{margin:0;opacity:1;color:var(--pf-akzent,#E6B77A)}
.wl-einschenken-film{border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.wl-einschenken-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0c2a1e}
.wl-einschenken-los:disabled{opacity:.7;cursor:default}
@media(max-width:700px){.wl-einschenken{grid-template-columns:1fr}}
.wl-limo figcaption{opacity:.85;color:#eef5f0}
/* Limos zwei Drittel, Einschenken ein Drittel */
.wl-limo-reihe{display:grid;grid-template-columns:2fr 1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.wl-limo-reihe .wl-limos{gap:clamp(12px,3vw,48px)}
.wl-limo-reihe .wl-limo img{height:clamp(220px,26vw,400px)}
.wl-limo-reihe .wl-einschenken{display:flex;flex-direction:column;justify-content:center;gap:14px;margin:0}
.wl-limo-reihe .wl-einschenken-text p{margin:0}
.wl-limo-reihe .wl-einschenken-los{align-self:flex-start}
@media(max-width:900px){.wl-limo-reihe{grid-template-columns:1fr}}
/* Oberst: Hühner im Etiketten-Stil, die der Maus folgen */
.wl-huehner{position:relative;border-radius:8px;overflow:hidden;cursor:crosshair;touch-action:pan-y;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.wl-huehner svg{display:block;width:100%;height:auto;user-select:none}
.wl-huehner .boden{fill:none;stroke:#6b4a2b;stroke-width:3;stroke-linecap:round}
.wl-huehner .boden.duenn{stroke-width:1.6;opacity:.7}
.wl-huehner .gras{fill:none;stroke:#7dbb3a;stroke-width:3.2;stroke-linecap:round}
.wl-huehner .huhn .koerper{fill:#fff;stroke:#5a3a22;stroke-width:2.4;stroke-linejoin:round}
.wl-huehner .huhn .linie{fill:none;stroke:#5a3a22;stroke-width:1.8;stroke-linecap:round}
.wl-huehner .huhn .kamm,.wl-huehner .huhn .lappen{fill:#e03a2c;stroke:#5a3a22;stroke-width:1.4}
.wl-huehner .huhn .schnabel{fill:#f3a21a;stroke:#5a3a22;stroke-width:1.4;stroke-linejoin:round}
.wl-huehner .huhn .auge{fill:#3a2412}
.wl-huehner .huhn .beine path{fill:none;stroke:#e8891a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wl-huehner .huhn.klein .koerper{stroke-width:2.8}
/* Felsenbräu-Tresen mit Fotos (ersetzt die 3D-Fassung) */
.wl-tresen-halter{background:radial-gradient(ellipse at 50% 55%,#15402c 0%,#0c2a1e 60%)}
.wl-tresen-holz{position:absolute;left:0;right:0;bottom:0;height:17vh;background:linear-gradient(#5e371a,#3a200d);box-shadow:inset 0 5px 0 #7a4a24}
.wl-tresen-reihe{position:absolute;left:50%;bottom:16.4vh;margin:0;padding:0;list-style:none;will-change:transform;z-index:1}
.wl-tresen-reihe li{position:absolute;bottom:0;width:clamp(58px,7vw,118px);transform-origin:50% 100%}
.wl-tresen-reihe img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 12px rgba(0,0,0,.5));user-select:none;-webkit-user-drag:none}
.wl-tresen-reihe dl{display:none}
.wl-tresen-info,.wl-tresen-satz{z-index:3}
.wl-tresen-halter::before,.wl-tresen-halter::after{display:none}
@media (max-width:860px){.wl-tresen-reihe li{width:62px}}
/* über die volle Breite, so hoch wie der Kopfbereich */
.wl-steiner-buehne:has(.wl-huehner){padding:0;background:#fdf6dc}
.wl-steiner-buehne:has(.wl-huehner) .wl-steiner-buehne-innen{max-width:none;padding:0}
.wl-steiner-buehne .wl-huehner{border-radius:0;box-shadow:none;height:clamp(420px,72vh,760px)}
.wl-steiner-buehne .wl-huehner svg{width:100%;height:100%}
/* Tresen schräg in die Tiefe */
.wl-tresen-reihe{left:0;right:0;bottom:12vh;height:0}
.wl-tresen-reihe li{width:clamp(78px,9.5vw,150px);transition:opacity .4s}
.wl-tresen-holz{height:auto;top:auto;bottom:0;height:34vh;background:linear-gradient(170deg,#6b3f1f 0%,#4a2811 45%,#2e1808 100%);clip-path:polygon(0 38%,100% 0,100% 100%,0 100%);box-shadow:none}
.wl-tresen-holz::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(170deg,rgba(255,220,170,.18),rgba(0,0,0,0) 30%);clip-path:polygon(0 38%,100% 0,100% 2.5%,0 41%)}
@media (max-width:860px){.wl-tresen-reihe li{width:90px}}
/* KBS-Kalender mit echten Blättern und Wire-O wie am Original */
.wl-kal{height:calc(14 * 34vh + 100vh)}
.wl-kal-vorn{display:block;background:#fff}
.wl-kal-vorn img,.wl-kal-rueck img{display:block;width:100%;height:100%;object-fit:cover}
.wl-kal-rueck{background:#fff;overflow:hidden}
.wl-kal-ringe{left:1.5%;right:1.5%;top:-9px;height:18px;gap:0;justify-content:space-between;align-items:flex-start}
.wl-kal-ringe::before{display:none}
.wl-kal-ringe i{width:auto;flex:1;height:18px;margin:0 1px;border-radius:0;background:none;box-shadow:none;position:relative}
.wl-kal-ringe i::before,.wl-kal-ringe i::after{content:"";position:absolute;top:0;width:2.2px;height:17px;border-radius:2px;background:linear-gradient(90deg,#9aa0a4,#fff 45%,#b7bcbf);box-shadow:0 1px 1.5px rgba(0,0,0,.35)}
.wl-kal-ringe i::before{left:30%}.wl-kal-ringe i::after{left:58%}
.wl-kal-ringe i:nth-child(odd)::before{height:16px}
.wl-kal-haken{flex:none;width:7%;position:relative;height:18px}
.wl-kal-haken::before{content:"";position:absolute;left:50%;top:-16px;width:44px;height:26px;margin-left:-22px;border:2.4px solid #c9ced1;border-bottom:none;border-radius:24px 24px 0 0;box-shadow:0 -1px 1px rgba(0,0,0,.25)}
.wl-kal-wand::before{content:"";position:absolute;left:1.5%;right:1.5%;top:-2px;height:6px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(0,0,0,.45) 5px 7px);z-index:499;opacity:.55;pointer-events:none}
@media (max-width:760px){.wl-kal-ringe i:nth-child(3n)::after{display:none}.wl-kal-haken::before{width:30px;margin-left:-15px;height:18px;top:-11px}}
/* Kalender flüssiger: eigene Ebenen, kein Schatten auf den bewegten Blättern */
.wl-kal-blatt{will-change:transform,opacity;contain:layout paint}
.wl-kal-vorn{box-shadow:none}
.wl-kal-rueck{box-shadow:0 30px 60px rgba(0,0,0,.45)}
/* KBS-Kalender räumlicher: schräg an der Wand, Blattstapel mit Kante, Schatten beim Umblättern */
.wl-kal-halter{perspective:1600px}
.wl-kal-wand{transform:rotateX(9deg) rotateY(-14deg) rotateZ(.6deg);transform-style:preserve-3d;transition:transform .6s}
.wl-kal-rueck{box-shadow:28px 40px 60px rgba(0,0,0,.55),10px 12px 18px rgba(0,0,0,.35)}
.wl-kal-rueck::after{content:"";position:absolute;left:0;right:-1px;bottom:-7px;height:7px;background:repeating-linear-gradient(0deg,#e9e6df 0 1px,#cfcac0 1px 2px);transform:skewX(-35deg);transform-origin:0 0;border-radius:0 0 2px 2px}
.wl-kal-rueck::before{content:"";position:absolute;top:0;bottom:-7px;right:-7px;width:7px;background:repeating-linear-gradient(90deg,#e9e6df 0 1px,#cfcac0 1px 2px);transform:skewY(-35deg);transform-origin:0 0}
.wl-kal-vorn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0) 18%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06));pointer-events:none}
.wl-kal-hinten{background:linear-gradient(0deg,#e7e3da,#f7f5f0)}
@media (max-width:760px){.wl-kal-wand{transform:rotateX(7deg) rotateY(-8deg)}}
.wl-kal-blatt{contain:none}
/* Tresen: Bierdeckel unter jeder Flasche, Infos unter dem Kopf der Seite, weichere Bewegung */
.wl-tresen-reihe li{will-change:transform}
.wl-tresen-reihe li::before{content:"";position:absolute;left:50%;bottom:-9%;width:175%;aspect-ratio:1/.32;transform:translateX(-50%);border-radius:50%;
background:url(../img/felsenbraeu/wappen.png) center 74%/20% auto no-repeat,radial-gradient(ellipse at 50% 45%,#fbf6ea 0 60%,#efe6d2 61% 66%,#e6dcc4 67%);
box-shadow:0 5px 0 #d2c6a8,0 10px 16px rgba(0,0,0,.45);z-index:-1}
.wl-tresen-reihe img{position:relative}
.wl-tresen-satz{bottom:clamp(10px,2.5vh,26px);font-size:clamp(18px,2.2vw,30px)}
.wl-tresen-reihe{bottom:15vh}
.wl-tresen-info{top:clamp(96px,15vh,140px)}
@media (max-width:860px){
.wl-tresen-info{top:92px;left:16px;right:16px;width:auto}
.wl-tresen-tabelle{display:grid;max-width:280px}
.wl-tresen-name{font-size:28px;margin-bottom:8px}
.wl-tresen-tabelle dt,.wl-tresen-tabelle dd{padding:4px 0;font-size:12px}
}
/* Oberst: Körner, gelegte Eier und die 10er-Schachtel (js/49-js-huehner.js) */
.wl-huehner .huhn{pointer-events:none}
.wl-huehner .korn{fill:#e0ad3a;stroke:#8a5a1c;stroke-width:.6}
.wl-huehner .ei{cursor:pointer;outline:none}
.wl-huehner .ei-fang{fill:transparent}
.wl-huehner .ei-form{fill:#cf9563;stroke:#5a3a22;stroke-width:1.6}
.wl-huehner .ei.weiss .ei-form{fill:#f8f3e8}
.wl-huehner .ei-glanz{fill:rgba(255,255,255,.6)}
.wl-huehner .ei-schatten{fill:rgba(90,58,34,.22)}
.wl-huehner .ei:focus-visible .ei-form{stroke:#e03a2c;stroke-width:2.6}
.wl-huehner .ei-wackel{transform-box:fill-box;transform-origin:50% 90%;animation:wl-ei-wackel 1.7s ease-in-out infinite}
.wl-huehner .ei.neu .ei-wackel{animation:wl-ei-plopp .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes wl-ei-wackel{0%,58%,100%{transform:rotate(0)}66%{transform:rotate(-13deg)}74%{transform:rotate(11deg)}82%{transform:rotate(-6deg)}90%{transform:rotate(3deg)}}
@keyframes wl-ei-plopp{from{transform:scale(0)}to{transform:scale(1)}}
.wl-hu-flug{position:absolute;left:0;top:0;z-index:4;aspect-ratio:10/13;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;background:radial-gradient(circle at 36% 30%,#f6dcc0 0 12%,#d59e70 45%,#b67a4b 100%);box-shadow:inset 0 0 0 1.5px rgba(90,58,34,.8);pointer-events:none}
.wl-hu-flug.weiss{background:radial-gradient(circle at 36% 30%,#fff 0 14%,#f3eee4 50%,#d2c9b9 100%)}
.wl-huehner .wl-hu-hinweis,.wl-huehner .wl-hu-zaehler{position:absolute;top:16px;z-index:3;margin:0;padding:7px 14px;border-radius:20px;background:rgba(253,246,220,.92);box-shadow:0 2px 8px rgba(90,58,34,.12);color:#5a3a22;font-size:13px;line-height:1.3;pointer-events:none;max-width:none}
.wl-huehner .wl-hu-hinweis{left:50%;transform:translateX(-50%);white-space:nowrap}
.wl-huehner .wl-hu-zaehler{right:16px;font-weight:600}
.wl-huehner .wl-hu-zaehler[hidden]{display:none}
.wl-hu-schachtel{--b:300px;--t:112px;--h:46px;--lh:30px;--pappe:#cfc8ba;position:absolute;right:2.5%;bottom:1%;z-index:2;width:360px;height:300px;perspective:1100px;perspective-origin:50% 10%;pointer-events:none}
.wl-hu-schachtel .sch-fahrt{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.55,0,.35,1)}
.wl-hu-schachtel.raus .sch-fahrt,.wl-hu-schachtel.rein .sch-fahrt{transform:translateX(170%)}
.wl-hu-schachtel.ohne-uebergang .sch-fahrt,.wl-hu-schachtel.ohne-uebergang .sch-deckel{transition:none}
.wl-hu-schachtel .sch-fahrt::before{content:"";position:absolute;left:4%;right:4%;bottom:9%;height:40px;background:radial-gradient(ellipse at 50% 50%,rgba(90,58,34,.32),rgba(90,58,34,0) 70%)}
.wl-hu-schachtel .sch-welt{position:absolute;left:50%;top:64%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-34deg) rotateY(-12deg)}
.wl-hu-schachtel .sch-f{position:absolute;left:50%;top:50%;box-sizing:border-box;background-color:var(--pappe);background-image:radial-gradient(rgba(70,55,35,.07) 1px,transparent 1.6px);background-size:5px 5px;backface-visibility:hidden}
.wl-hu-schachtel .sch-f img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.wl-hu-schachtel .sch-oben{width:var(--b);height:var(--t);margin:calc(var(--t) / -2) 0 0 calc(var(--b) / -2);padding:5px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);transform-style:preserve-3d;transform:translateY(calc(var(--h) / -2)) rotateX(90deg);background-color:#c3bcae}
.wl-hu-schachtel .sch-mulde{position:relative;margin:3px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#958e80 0 34%,#b1aa9c 58%,#c3bcae 72%);transform-style:preserve-3d}
.wl-hu-schachtel .sch-ei{position:absolute;left:50%;bottom:50%;width:30px;height:40px;margin-left:-15px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;background:radial-gradient(circle at 36% 30%,#f6dcc0 0 12%,#d59e70 45%,#b67a4b 100%);box-shadow:inset 0 0 0 1.2px rgba(90,58,34,.7);transform-origin:50% 100%;transform:rotateX(-90deg) translateY(12px) scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.wl-hu-schachtel .sch-ei.weiss{background:radial-gradient(circle at 36% 30%,#fff 0 14%,#f3eee4 50%,#d2c9b9 100%)}
.wl-hu-schachtel .voll .sch-ei{transform:rotateX(-90deg) translateY(12px) scale(1)}
.wl-hu-schachtel .sch-vorn{width:var(--b);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--b) / -2);padding:3px 8px;transform:translateZ(calc(var(--t) / 2))}
.wl-hu-schachtel .sch-links,.wl-hu-schachtel .sch-rechts{width:var(--t);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--t) / -2);background-color:#bdb6a8}
.wl-hu-schachtel .sch-links{transform:translateX(calc(var(--b) / -2)) rotateY(-90deg)}
.wl-hu-schachtel .sch-rechts{transform:translateX(calc(var(--b) / 2)) rotateY(90deg)}
.wl-hu-schachtel .sch-hinten{width:var(--b);height:calc(var(--h) + var(--lh));margin:calc(var(--h) / -2 - var(--lh)) 0 0 calc(var(--b) / -2);transform:translateZ(calc(var(--t) / -2));background-color:#b9b2a4;backface-visibility:visible}
.wl-hu-schachtel .sch-deckel{position:absolute;left:50%;top:50%;width:var(--b);height:var(--t);margin-left:calc(var(--b) / -2);transform-style:preserve-3d;transform-origin:50% 0;transform:translate3d(0,calc(var(--h) / -2 - var(--lh)),calc(var(--t) / -2)) rotateX(208deg);transition:transform .9s cubic-bezier(.5,0,.3,1.15)}
.wl-hu-schachtel.zu .sch-deckel{transform:translate3d(0,calc(var(--h) / -2 - var(--lh)),calc(var(--t) / -2)) rotateX(90deg)}
.wl-hu-schachtel .sch-aussen,.wl-hu-schachtel .sch-innen{left:0;top:0;width:100%;height:100%;margin:0;padding:6px 10px}
.wl-hu-schachtel .sch-innen{transform:rotateX(180deg);background-color:#d6cfc1}
.wl-hu-schachtel .sch-lasche{left:0;top:100%;width:100%;height:calc(var(--lh) + 10px);margin:0;transform-origin:50% 0;transform:rotateX(-90deg)}
.wl-hu-schachtel .sch-seite{top:0;width:calc(var(--lh) + 10px);height:100%;margin:0;background-color:#bdb6a8;backface-visibility:visible}
.wl-hu-schachtel .sch-seite.l{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.wl-hu-schachtel .sch-seite.r{left:auto;right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
@media (max-width:760px){
.wl-hu-schachtel{right:0;bottom:0;transform:scale(.6);transform-origin:100% 100%}
.wl-huehner .wl-hu-hinweis{font-size:12px;white-space:normal;width:max-content;max-width:calc(100% - 32px);text-align:center}
.wl-huehner .wl-hu-zaehler{top:auto;bottom:12px;left:16px;right:auto}
}
/* Ortner-Rollups ohne Umweltaussagen (3.9.36): Bilder 700x1556 */
.wl-ru-4 .wl-ru-bahn-echt{aspect-ratio:700/1556}
/* Brummer: Bulle auf der Weide, der Kopf folgt der Maus (js/50-js-weide.js) */
.wl-weide .wl-weide-buehne{position:absolute;inset:0}
.wl-weide .wl-weide-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;z-index:1;user-select:none;-webkit-user-drag:none;pointer-events:none}
.wl-weide .wl-weide-hinten{display:none}
.wl-weide .wl-weide-zwei{will-change:opacity}
.wl-weide .wl-weide-hinweis{position:absolute;left:24px;bottom:18px;z-index:2;margin:0;padding:7px 14px;border-radius:20px;background:rgba(242,248,230,.92);color:#1C2A08;font-size:13px;line-height:1.3;pointer-events:none}
@media (max-width:760px){.wl-weide{aspect-ratio:2/1;max-height:34vh;margin-bottom:34px}.wl-weide .wl-weide-bild{object-position:50% 24%}.wl-weide .wl-weide-hinweis{left:16px;font-size:12px}}
/* Brummer: Bauzaunbanner als echtes Foto statt gezeichnetem Zaun */
.wl-hof .wl-hof-zaeune{display:grid;gap:52px}
.wl-hof .wl-hof-zaeune figure{margin:0}
.wl-hof .wl-hof-zaeune img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(28,42,8,.28))}
.wl-hof .wl-hof-zaeune figcaption{margin-top:8px}
@media (min-width:780px){.wl-hof .wl-hof-zaeune{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:end}}
.wl-hof .wl-hof-zaeune{width:100%;max-width:none}
/* Limesbad-Rundgang über die volle Breite */
@media (max-width:760px){.wl-pj-welt .wl-lbw{max-height:66vh}}
/* Limesbad: Knöpfe und kleine Karte bleiben auch in schmalen Fenstern im Bild */
.wl-lbw-oben{left:auto;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:flex-end}
.wl-lbw-mini{max-width:calc(100% - 24px)}
@media (max-width:560px){
.wl-lbw-oben{top:8px;right:8px;gap:5px;max-width:calc(100% - 16px)}
.wl-lbw-oben button{font-size:10px;padding:6px 9px}
.wl-lbw-mini{right:8px;width:clamp(78px,24vw,110px)}
}
/* Volle Breite ohne die Scrollleiste mitzuzaehlen */
.wl-pj-welt .wl-lbw{border-radius:0;max-height:72vh}
.wl-pj-welt .wl-lbw-nav{padding:0 clamp(16px,4vw,56px);justify-content:center}
.wl-pj-welt .wl-lbw-satz,.wl-pj-welt .wl-pj-hinweis{max-width:none;padding:0 clamp(16px,4vw,56px);text-align:center}
.wl-weide{position:relative;margin:0 0 46px;aspect-ratio:3/1;max-height:62vh;overflow:hidden;background:#6f9a3c}
@media (max-width:760px){.wl-pj-welt .wl-lbw{max-height:66vh}}
/* Startseite: Projekt-Finder auf Weiss statt Grau, mehr Luft bis "arbeiten" */
.wl-pin,.wl-pin-sticky{background:var(--bg)}
.wl-pin{padding-bottom:230px}
@media (max-width:860px){.wl-pin{padding-bottom:140px}}
/* Elektro Meister: Hissfahne im Wind (Zeichenflaeche), Bauzaun, Anzeige */
.wl-meister{display:grid;gap:44px;align-items:end;margin-top:34px}
@media (min-width:780px){.wl-meister{grid-template-columns:minmax(220px,1fr) 1.7fr;gap:clamp(30px,5vw,80px)}}
.wl-meister-fahne{max-width:360px}
.wl-fahne{position:relative;height:clamp(380px,58vh,600px);padding-left:10px}
.wl-fahne-mast{position:absolute;left:0;top:-10px;bottom:0;width:7px;border-radius:4px;background:linear-gradient(90deg,#868d93,#e6eaed 45%,#959ca2)}
.wl-fahne-mast::before{content:"";position:absolute;left:-3px;top:-8px;width:13px;height:13px;border-radius:50%;background:#c9ced3}
.wl-fahne-tuch{display:block;width:100%;height:100%;opacity:0;transition:opacity .5s}
.fahne-bereit .wl-fahne-tuch{opacity:1}
.wl-meister-klein{display:block;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.wl-meister-zaun{margin:0}
.wl-meister-zaun img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.22))}
.wl-meister-anzeige{margin:54px auto 0;max-width:620px;transform:rotate(-1.2deg)}
.wl-meister-anzeige img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.2)}
.wl-meister-anzeige figcaption{transform:rotate(1.2deg)}
/* Brummer: Weide am Desktop flacher – der Bulle ist bis zum Bauch zu sehen, dann kommt der naechste Abschnitt */
@media (min-width:761px){.wl-weide{aspect-ratio:4.4/1}.wl-weide .wl-weide-bild{object-position:50% 18%}}
/* Brummer: die beiden Bauzaeune stehen frei auf der Buehne, ohne helle Karte dahinter */
.wl-hof .wl-hof-banner.wl-hof-zaeune{background:none;border:0;box-shadow:none;padding:0;border-radius:0;align-self:end;aspect-ratio:auto;animation:none;transform:none}
.wl-hof .wl-hof-zaeune figcaption{color:#fff;opacity:.7}
/* Brummer: Bauzaeune groesser, einzeln, leicht versetzt und ueberlappend – der zweite steht ein Stueck vor dem ersten */
@media (min-width:780px){
.wl-hof .wl-hof-banner.wl-hof-zaeune{grid-column:1/-1;display:block;position:relative;max-width:1100px;margin:28px auto 0;padding-bottom:9%}
.wl-hof .wl-hof-zaeune figure{width:60%;position:relative;z-index:1}
.wl-hof .wl-hof-zaeune figure+figure{position:absolute;left:44%;top:14%;width:56%;z-index:2}
.wl-hof .wl-hof-zaeune figure+figure img{filter:drop-shadow(0 22px 34px rgba(0,0,0,.45))}
}
/* Brummer: Gutschein und Schild in der schmalen Kachel, die Bauzaeune in der breiten */
.wl-pj-kachel-dunkel .wl-hof.wl-hof-eins{display:grid;grid-template-columns:1fr;gap:34px;margin-top:28px;justify-items:start;align-items:start}
.wl-pj-kachel-dunkel .wl-hof-eins .wl-hof-gutschein,.wl-pj-kachel-dunkel .wl-hof-eins .wl-hof-schild-echt{width:100%;max-width:360px}
.wl-pj-kachel-dunkel .wl-hof.wl-hof-zwei{display:block;margin-top:28px}
.wl-pj-kachel-dunkel .wl-hof-zwei .wl-hof-banner.wl-hof-zaeune{max-width:none;margin-top:0}
/* Brummer: die Buehne endet direkt mit der Weide, kein gruener Streifen unter dem Bullen */
.wl-steiner-buehne:has(.wl-weide){padding-bottom:0}
.wl-steiner-buehne .wl-weide{margin-bottom:0}
/* Felsenbraeu: keine Bierdeckel mehr unter den Flaschen */
.wl-tresen-reihe li::before{display:none}
/* Felsenbraeu: Flaschen breiter, die vordere waechst im Skript staerker */
.wl-tresen-reihe li{width:clamp(96px,12vw,190px)}
@media (max-width:860px){.wl-tresen-reihe li{width:112px}}
/* Felsenbraeu: Flaschenbreite so, dass die vordere auch auf flachen Bildschirmen ganz zu sehen ist */
.wl-tresen-reihe li{width:clamp(88px,10.5vw,165px)}
@media (max-width:860px){.wl-tresen-reihe li{width:104px}}
/* Felsenbraeu: Flaschen nochmal deutlich breiter; die Hoehe des Bildschirms begrenzt, damit die vordere ganz zu sehen bleibt */
.wl-tresen-reihe li{width:clamp(100px,min(13vw,19.5vh),230px)}
@media (max-width:860px){.wl-tresen-reihe li{width:min(120px,20vh)}}
/* Felsenbraeu: echter Holztresen mit Hopfen und Gerste (Bild aus ChatGPT) statt der braunen Flaeche */
.wl-tresen-holz{height:42vh;clip-path:none;background:url(../img/felsenbraeu/tresen.jpg) center bottom/cover no-repeat;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 34%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 34%)}
.wl-tresen-holz::before{display:none}
@media (max-width:860px){.wl-tresen-holz{height:30vh;background-position:60% bottom}}
/* Felsenbraeu: alle Flaschen gleich hoch wie die Felsator-Flasche, Breite ergibt sich aus dem Foto – so wirken alle gleich breit */
.wl-tresen-reihe li{width:auto}
.wl-tresen-reihe li img{width:auto;height:clamp(323px,min(42vw,63vh),743px)}
@media (max-width:860px){.wl-tresen-reihe li{width:auto}.wl-tresen-reihe li img{height:min(388px,65vh)}}
/* Felsenbraeu: Limo-Kachel ohne den Einschenk-Film, volle Breite */
.wl-limo-reihe{grid-template-columns:1fr}
/* Felsenbraeu: die Brauerei zum Umschauen (Kugelpanoramen, volle Breite) */
.wl-pj-welt .wl-brau{position:relative;aspect-ratio:2/1;max-height:76vh;background:#0c2a1e;overflow:hidden;margin-top:clamp(20px,3vw,36px)}
.wl-pj-welt .wl-brau canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline:none}
.wl-pj-welt .wl-brau canvas.zieht{cursor:grabbing}
.wl-pj-welt .wl-brau canvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.wl-brau-schild{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);max-width:min(60%,440px);color:#fff;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.wl-brau-schild .wl-brau-titel{margin:0 0 6px;font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);letter-spacing:0;text-transform:none;color:#fff;font-weight:300;line-height:1.1}
.wl-brau-schild .wl-brau-text{margin:0;font-size:14px;line-height:1.5;opacity:.9}
.wl-brau-kompass{position:absolute;right:clamp(16px,3vw,40px);top:clamp(16px,3vw,36px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.25);pointer-events:none}
.wl-brau-kompass i{position:absolute;left:50%;top:6px;width:2px;height:16px;margin-left:-1px;background:var(--pf-akzent,#E6B77A);border-radius:2px}
.wl-brau-kompass::after{content:"N";position:absolute;left:0;right:0;bottom:5px;text-align:center;font-family:var(--mono);font-size:9px;color:#fff;opacity:.8}
.wl-brau-gross{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,36px);padding:8px 14px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:12px;cursor:pointer}
.wl-brau-gross:hover{background:rgba(0,0,0,.5)}
.wl-brau.laedt::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:wl-brau-dreh 1s linear infinite;pointer-events:none}
@keyframes wl-brau-dreh{to{transform:rotate(360deg)}}
.wl-brau.vollbild{aspect-ratio:auto;max-height:none;height:100vh}
.wl-brau-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:18px clamp(16px,4vw,56px) 0}
.wl-brau-nav button{padding:9px 16px;border:1px solid rgba(0,0,0,.18);border-radius:999px;background:#fff;color:var(--ink,#111);font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}
.wl-brau-nav button:hover{background:var(--pf-hell,#E6F1EA)}
.wl-brau-nav button.ist{background:var(--pf,#1E6B46);border-color:var(--pf,#1E6B46);color:#fff}
.wl-brau.ohne-webgl{display:none}
@media (max-width:760px){.wl-pj-welt .wl-brau{aspect-ratio:4/3;max-height:70vh}.wl-brau-schild{max-width:75%}.wl-brau-schild .wl-brau-text{font-size:13px}.wl-brau-gross{display:none}}
/* Felsenbraeu: die drei Tafelwasser unter den Limos, gleiche Reihe wie die Limos */
.wl-wasser-kopf{margin-top:clamp(36px,5vw,70px)}
.wl-limos.wl-wasser .wl-limo img{height:clamp(250px,36vw,480px)}
@media (max-width:560px){.wl-limos.wl-wasser .wl-limo img{height:210px}}
/* Katheder & Roth: Schmutzfangteppich mit Fussspuren, Baustellenschilder auf Pfosten */
.wl-teppich{perspective:900px;padding:26px 0 6px;overflow:hidden}
.wl-teppich-boden{transform:rotateX(50deg);transform-origin:50% 100%;padding:30px 0 10px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 60px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 60px),linear-gradient(#cfd4d8,#aeb5bb);border-radius:6px}
.wl-teppich-matte{position:relative;width:min(58%,300px);margin:0 auto;aspect-ratio:1/2;border-radius:6px;overflow:hidden;box-shadow:0 18px 30px rgba(0,0,0,.35),0 2px 0 #1a1a1a;touch-action:pan-y;cursor:crosshair}
.wl-teppich-matte img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.wl-teppich-spuren{position:absolute;inset:0;pointer-events:none}
.wl-tritt{position:absolute;width:22px;height:50px;opacity:0;transition:opacity .25s}
.wl-tritt.da{opacity:1}
.wl-tritt.weg{opacity:0;transition:opacity 3s ease-out}
.wl-tritt svg{display:block;width:100%;height:100%;fill:rgba(120,95,70,.62)}
.wl-bauschilder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;padding:10px 12px 22px;background:linear-gradient(transparent 78%,rgba(0,0,0,.25) 78%,rgba(0,0,0,.35));border-radius:8px}
.wl-bauschild{position:relative;margin:0;text-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),z-index 0s;z-index:1;padding-bottom:34px}
.wl-bauschild img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 10px 18px rgba(0,0,0,.4)}
.wl-bauschild::before,.wl-bauschild::after{content:"";position:absolute;bottom:14px;width:7px;height:40px;background:linear-gradient(90deg,#8a8f94,#d6dade 50%,#8a8f94);z-index:-1}
.wl-bauschild::before{left:18%}.wl-bauschild::after{right:18%}
.wl-bauschild figcaption{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.wl-bauschild:hover{transform:scale(1.5);z-index:5}
.wl-bauschild:hover::before,.wl-bauschild:hover::after{opacity:0}
@media (max-width:560px){.wl-bauschilder{grid-template-columns:repeat(2,1fr)}.wl-bauschild:hover{transform:scale(1.25)}}
/* Katheder & Roth: Teppich naeher dran (Ausschnitt um das Logo), Spuren kraeftiger */
.wl-teppich-matte{aspect-ratio:3/4;width:min(64%,330px)}
.wl-teppich-boden{padding:22px 0 8px}
.wl-teppich{padding-top:14px}
.wl-tritt{width:26px;height:58px}
.wl-tritt svg{fill:rgba(110,85,60,.72)}
/* Startseite: Liste aller Referenzen unter den Arbeiten */
.wl-arb-alle{margin-top:56px}
/* Katheder & Roth: nur das bestellte Baustellenschild, gross auf zwei Pfosten */
.wl-bauschilder.wl-bauschilder-eins{grid-template-columns:1fr;padding:18px 6% 26px}
.wl-bauschilder-eins .wl-bauschild{padding-bottom:70px}
.wl-bauschilder-eins .wl-bauschild::before,.wl-bauschilder-eins .wl-bauschild::after{height:78px;width:9px;bottom:16px}
.wl-bauschilder-eins .wl-bauschild::before{left:12%}.wl-bauschilder-eins .wl-bauschild::after{right:12%}
.wl-bauschilder-eins .wl-bauschild:hover{transform:scale(1.03) rotate(-.6deg)}
.wl-bauschilder-eins .wl-bauschild:hover::before,.wl-bauschilder-eins .wl-bauschild:hover::after{opacity:1}
/* Elektro Meister: Fahne, Bauzaun und Anzeige (als Zeitungsseite) nebeneinander */
@media (min-width:780px){.wl-meister{grid-template-columns:minmax(180px,.8fr) 1.7fr minmax(200px,.9fr);align-items:end}}
@media (min-width:780px) and (max-width:1023px){.wl-meister{grid-template-columns:1fr 1fr}.wl-meister-fahne{grid-row:span 2}}
.wl-meister-blatt{min-height:0;gap:10px;max-width:380px;justify-self:center;width:100%}
.wl-meister-blatt .wl-anz-echt{display:block;width:100%;height:auto;border:1px solid #d9d2c6}
.wl-meister-blatt .wl-meister-klein{color:var(--ink-3);opacity:1;margin-top:2px}
/* Felsenbraeu: Tresen ueber die volle Breite, die Buehne endet mit dem Holz; Limos und Wasser halb/halb */
.wl-steiner-buehne:has(.wl-tresen){padding-bottom:0}
.wl-tresen{margin-bottom:0}
.wl-pj-kachel-dunkel .wl-limos{padding-top:clamp(16px,3vw,34px)}
.wl-pj-kachel-dunkel .wl-limos .wl-limo img{height:clamp(220px,22vw,400px)}
.wl-pj-kachel-dunkel .wl-limos{gap:clamp(12px,3vw,44px)}
.wl-limo-reihe{display:block}
/* Elektro Meister: Zeitungsseite dreispaltig, die Anzeige laeuft ueber alle drei Spalten */
.wl-anz-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wl-anz-spalten .wl-anz-text i{width:100%}
.wl-anz-spalten .wl-anz-text i:nth-child(2n){width:86%}.wl-anz-spalten .wl-anz-text i:nth-child(3n){width:93%}
.wl-meister-blatt{max-width:440px}
/* Katheder & Roth: Schmutzfangmatte mit Gummisaum auf hellem Boden, damit man sie sieht */
.wl-teppich-boden{background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 64px),linear-gradient(#ffffff,#e9ecef);border-radius:8px;padding:26px 0 12px}
.wl-teppich-matte{border:9px solid #1f1f1f;border-radius:7px;box-shadow:0 22px 34px rgba(0,0,0,.35),inset 0 0 0 2px #2c2c2c,inset 0 0 22px rgba(0,0,0,.6);background:#2b2b2b}
.wl-teppich-matte::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.35)}
.wl-teppich-matte img{filter:contrast(1.05) brightness(1.06)}
.wl-tritt svg{fill:rgba(160,130,95,.78)}
/* Feuerwehrfest Alesheim: Fahne, Buehnenbanner an der Stange, Bauzaun; Festschrift und Shirts in Kacheln */
@media (min-width:780px){.wl-meister.wl-ffw{grid-template-columns:minmax(160px,.7fr) 1.5fr 1.4fr;align-items:end}}
.wl-ffw-banner{margin:0;position:relative;padding-top:14px}
.wl-ffw-stange{height:8px;border-radius:4px;background:linear-gradient(#e8e8e8,#9a9a9a);box-shadow:0 2px 4px rgba(0,0,0,.4);margin-bottom:0}
.wl-ffw-banner img{display:block;width:100%;height:auto;margin-top:-2px;box-shadow:0 18px 30px rgba(0,0,0,.4);transform-origin:50% 0;animation:wl-ffw-wehen 6s ease-in-out infinite}
@keyframes wl-ffw-wehen{0%,100%{transform:rotateX(0deg) skewX(0deg)}50%{transform:rotateX(4deg) skewX(-.6deg)}}
@media (prefers-reduced-motion:reduce){.wl-ffw-banner img{animation:none}}
.wl-festshirts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,36px);margin-top:26px;perspective:1200px}
.wl-festshirt{margin:0;text-align:center;cursor:pointer;outline:none}
.wl-festshirt-dreh{position:relative;aspect-ratio:1/1.2;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wl-festshirt:hover .wl-festshirt-dreh,.wl-festshirt:focus-visible .wl-festshirt-dreh,.wl-festshirt.um .wl-festshirt-dreh{transform:rotateY(180deg)}
.wl-festshirt-dreh img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;filter:drop-shadow(0 16px 18px rgba(0,0,0,.45))}
.wl-festshirt-dreh img.hinten{transform:rotateY(180deg)}
.wl-festshirt figcaption{margin-top:8px;font-size:13px;line-height:1.4;opacity:.85}
.wl-festshirt figcaption strong{display:block;font-weight:600}
.wl-festshirt figcaption span{font-size:12px;opacity:.75}
@media (max-width:560px){.wl-festshirts{gap:10px}}
/* Haengefahne: kein Mast links, das Tuch haengt an der Querstange */
.wl-fahne-haenge{padding-left:0}
/* Oberst: Osterspezial – bunte Eier; Knopf oben links im Kasten */
.wl-huehner .wl-hu-ostern{position:absolute;left:16px;top:16px;z-index:3;padding:7px 14px;border:0;border-radius:20px;background:rgba(253,246,220,.92);box-shadow:0 2px 8px rgba(90,58,34,.12);color:#5a3a22;font:600 13px/1.2 var(--sans);cursor:pointer}
.wl-huehner .wl-hu-ostern[aria-pressed="true"]{background:#f5c52a;color:#3a2a08}
.wl-huehner .ei.bunt-1 .ei-form{fill:#f6a9c7}.wl-huehner .ei.bunt-2 .ei-form{fill:#9ecbf0}.wl-huehner .ei.bunt-3 .ei-form{fill:#b7e089}.wl-huehner .ei.bunt-4 .ei-form{fill:#f8de6a}.wl-huehner .ei.bunt-5 .ei-form{fill:#c9a9ee}.wl-huehner .ei.bunt-6 .ei-form{fill:#f9b46e}
.wl-hu-flug.bunt-1,.wl-hu-schachtel .sch-ei.bunt-1{background:radial-gradient(circle at 36% 30%,#fde3ee 0 12%,#f6a9c7 45%,#d97ea3 100%)}
.wl-hu-flug.bunt-2,.wl-hu-schachtel .sch-ei.bunt-2{background:radial-gradient(circle at 36% 30%,#e6f3fc 0 12%,#9ecbf0 45%,#6ea6d6 100%)}
.wl-hu-flug.bunt-3,.wl-hu-schachtel .sch-ei.bunt-3{background:radial-gradient(circle at 36% 30%,#eaf7dc 0 12%,#b7e089 45%,#86bb58 100%)}
.wl-hu-flug.bunt-4,.wl-hu-schachtel .sch-ei.bunt-4{background:radial-gradient(circle at 36% 30%,#fff5c9 0 12%,#f8de6a 45%,#d9b93a 100%)}
.wl-hu-flug.bunt-5,.wl-hu-schachtel .sch-ei.bunt-5{background:radial-gradient(circle at 36% 30%,#efe3fb 0 12%,#c9a9ee 45%,#a07fd0 100%)}
.wl-hu-flug.bunt-6,.wl-hu-schachtel .sch-ei.bunt-6{background:radial-gradient(circle at 36% 30%,#fde9d3 0 12%,#f9b46e 45%,#d8893f 100%)}
@media (max-width:640px){.wl-huehner .wl-hu-ostern{top:auto;bottom:12px;right:16px;left:auto}.wl-huehner .wl-hu-zaehler{bottom:12px;left:16px}}
/* Oberst: Eingangsfahne (haengend) und Fensterfahne am schraegen Ausleger vor der Hauswand */
.wl-of{display:grid;gap:clamp(20px,4vw,60px);margin-top:26px;align-items:start}
@media (min-width:700px){.wl-of{grid-template-columns:1fr 1.2fr}}
.wl-of-eingang{height:clamp(320px,44vw,440px);max-width:300px;margin:0 auto}
.wl-of-wand{position:relative;height:clamp(320px,44vw,440px);border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#f3efe7,#e3ded3);box-shadow:inset 0 0 40px rgba(0,0,0,.08)}
.wl-of-fenster{position:absolute;right:10%;top:16%;width:26%;height:36%;background:linear-gradient(160deg,#3a3f44,#1e2226);border:6px solid #f8f8f6;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.wl-of-anker{position:absolute;left:34px;top:52%}
.wl-of-arm{position:absolute;left:0;top:-4px;width:230px;height:8px;border-radius:4px;background:linear-gradient(#777,#3b3b3b);transform-origin:left center;transform:rotate(-30deg);box-shadow:0 3px 6px rgba(0,0,0,.3)}
.wl-of-arm::before{content:"";position:absolute;left:-10px;top:-12px;width:14px;height:32px;border-radius:3px;background:#444}
.wl-of-flagge{position:absolute;left:139px;top:-120px;width:120px;height:auto;transform-origin:50% 0;animation:wl-of-schwingen 4.5s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
@keyframes wl-of-schwingen{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.wl-of-flagge{animation:none}}
@media (max-width:420px){.wl-of-anker{left:16px}.wl-of-arm{width:180px}.wl-of-flagge{left:110px;top:-95px;width:100px}}
/* Oberst: Fensterfahne hat feste Breite (die Kachel-Regel img{width:100%} greift sonst) */
.wl-of-anker{width:300px;height:0}
.wl-of-anker .wl-of-flagge{width:120px!important;height:auto!important;max-width:none}
@media (max-width:420px){.wl-of-anker .wl-of-flagge{width:100px!important}}
/* Oberst: echter Eierkarton als Foto (offen mit Mulden, geschlossen zum Ueberblenden) */
.wl-hu-schachtel.foto{width:min(400px,46%);height:auto;perspective:none;bottom:2%;right:2%}
.wl-hu-schachtel.foto .sch-fahrt{position:relative;inset:auto}
.wl-hu-schachtel.foto .sch-fahrt::before{left:8%;right:8%;bottom:6%;height:14%;filter:blur(6px)}
.wl-hu-schachtel.foto .sch-foto{position:relative;width:100%;aspect-ratio:1672/941}
.wl-hu-schachtel.foto .sch-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.wl-hu-schachtel.foto .sch-bild-zu{opacity:0;transition:opacity .7s ease}
.wl-hu-schachtel.foto.zu .sch-bild-zu{opacity:1}
.wl-hu-schachtel.foto .sch-mulde{position:absolute;margin:0;border-radius:0;background:none;aspect-ratio:1/1.25;transform:translate(-50%,-62%);transition:opacity .35s}
.wl-hu-schachtel.foto.zu .sch-mulde{opacity:0}
.wl-hu-schachtel.foto .sch-ei{left:0;top:0;bottom:auto;width:100%;height:100%;margin:0;opacity:0;transform:scale(.5);transform-origin:50% 60%;transition:opacity .2s,transform .25s;box-shadow:inset 0 0 0 1px rgba(90,58,34,.55),0 6px 8px rgba(60,40,20,.35)}
.wl-hu-schachtel.foto .voll .sch-ei{opacity:1;transform:none}
@media (max-width:760px){.wl-hu-schachtel.foto{width:52%;bottom:3%}}
/* Oberst: Knopf Osterspezial rechts oben (links wird er von der Menueleiste angeschnitten), Zaehler darunter */
.wl-huehner .wl-hu-ostern{left:auto;right:16px}
.wl-huehner .wl-hu-zaehler{top:58px}
@media (max-width:640px){.wl-huehner .wl-hu-ostern{top:auto;bottom:12px;right:16px}.wl-huehner .wl-hu-zaehler{top:auto;bottom:12px;left:16px}}
/* Oberst: Knopf Osterspezial mittig unter dem Hinweis (rechts ragt die Buehne ueber den Rand) */
.wl-huehner .wl-hu-ostern{left:50%;right:auto;top:54px;transform:translateX(-50%)}
.wl-huehner .wl-hu-zaehler{top:16px}
@media (max-width:640px){.wl-huehner .wl-hu-ostern{top:auto;bottom:12px;left:50%;right:auto}}
/* Rotenbauer: die Etiketten laufen von der Rolle; der Eisbecher mit rundem Deckeletikett */
.wl-rolle{display:flex;align-items:center;gap:14px;margin:30px 0 10px}
.wl-rolle-spule{flex:0 0 auto;width:74px;height:200px;border-radius:12px;background:linear-gradient(90deg,#9c8870,#e9dcc6 40%,#b39c80 70%,#7d6a53);box-shadow:inset 0 0 0 2px rgba(0,0,0,.15),0 10px 22px rgba(0,0,0,.35);position:relative}
.wl-rolle-spule i{position:absolute;left:50%;top:-10px;bottom:-10px;width:18px;margin-left:-9px;border-radius:9px;background:linear-gradient(90deg,#444,#999 50%,#333)}
.wl-rolle-fenster{flex:1 1 auto;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wl-rolle-band{display:flex;gap:18px;width:max-content;animation:wl-rolle-lauf 42s linear infinite;padding:6px 0}
.wl-rolle:hover .wl-rolle-band,.wl-rolle:focus-within .wl-rolle-band{animation-play-state:paused}
@keyframes wl-rolle-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wl-rolle-et{margin:0;flex:0 0 auto;width:clamp(200px,24vw,300px);text-align:center;background:#fff;padding:6px;border-radius:4px;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.wl-rolle-et img{display:block;width:100%;height:auto;border-radius:2px}
.wl-rolle-et figcaption{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5a4030}
@media (prefers-reduced-motion:reduce){.wl-rolle-band{animation:none}}
.wl-eisbecher-reihe{display:grid;gap:clamp(20px,4vw,60px);align-items:center;margin-top:clamp(30px,5vw,60px)}
@media (min-width:700px){.wl-eisbecher-reihe{grid-template-columns:minmax(220px,300px) 1fr}}
.wl-eisbecher{position:relative;width:min(100%,260px);margin:0 auto;aspect-ratio:1/1.05;perspective:900px;cursor:pointer;outline:none}
.wl-eisbecher-korpus{position:absolute;left:8%;right:8%;bottom:0;height:62%;border-radius:8px 8px 40% 40%/8px 8px 18% 18%;background:linear-gradient(90deg,#d9cfc0,#fbf6ee 35%,#efe6d8 70%,#c9bfae);box-shadow:inset 0 -10px 20px rgba(0,0,0,.12),0 18px 30px rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.wl-eisbecher-korpus span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b5238}
.wl-eisbecher-deckel{position:absolute;left:0;right:0;top:0;height:74%;transform:rotateX(58deg) translateZ(0);transform-origin:50% 60%;transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:2}
.wl-eisbecher-deckel img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 14px 24px rgba(0,0,0,.4),inset 0 0 0 6px rgba(255,255,255,.55)}
.wl-eisbecher:hover .wl-eisbecher-deckel,.wl-eisbecher:focus-visible .wl-eisbecher-deckel{transform:rotateX(38deg) translateY(-34px) translateZ(40px) rotateZ(-6deg)}
.wl-eisbecher-text h3{margin:6px 0 10px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.wl-eisbecher-text p{margin:0;font-size:14px;line-height:1.55;opacity:.85}
.wl-eisbecher-text .wl-k{margin:0;color:var(--pf-akzent,#F5A96E)}
/* Riedl: Handy mit laufendem Instagram-Feed, Tragetasche zum Umdrehen, Schaufenster-Fotos, Zeitungsseite */
.wl-riedl{display:grid;gap:clamp(24px,5vw,80px);align-items:center;margin-top:30px;justify-items:center}
@media (min-width:760px){.wl-riedl{grid-template-columns:1fr 1.2fr}}
.wl-handy{width:min(100%,290px)}
.wl-handy-rahmen{position:relative;aspect-ratio:9/19;border-radius:40px;background:#111;padding:12px;box-shadow:0 30px 50px rgba(0,0,0,.5),inset 0 0 0 2px #333}
.wl-handy-kerbe{position:absolute;left:50%;top:14px;width:36%;height:22px;margin-left:-18%;border-radius:12px;background:#111;z-index:3}
.wl-handy-schirm{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.wl-handy-kopf{display:flex;align-items:center;gap:8px;padding:40px 14px 10px;font:600 12px/1 var(--sans);color:#222;border-bottom:1px solid #eee}
.wl-handy-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#8C2C5A,#E9A3C4)}
.wl-handy-feed{flex:1;overflow:hidden;position:relative}
.wl-handy-lauf{display:flex;flex-direction:column;gap:10px;padding:10px;animation:wl-handy-scroll 40s linear infinite}
.wl-handy-lauf img{display:block;width:100%;height:auto;border-radius:6px}
.wl-handy:hover .wl-handy-lauf{animation-play-state:paused}
@keyframes wl-handy-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.wl-handy-lauf{animation:none}}
.wl-tasche3{margin:0;width:min(100%,420px);text-align:center;perspective:1200px;cursor:pointer;outline:none}
.wl-tasche3-dreh{position:relative;aspect-ratio:1/1.1;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wl-tasche3:hover .wl-tasche3-dreh,.wl-tasche3:focus-visible .wl-tasche3-dreh{transform:rotateY(180deg)}
.wl-tasche3-dreh img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;filter:drop-shadow(0 20px 24px rgba(0,0,0,.45))}
.wl-tasche3-dreh img.hinten{transform:rotateY(180deg)}
.wl-fenster-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.wl-fenster-foto{margin:0;overflow:hidden;border-radius:6px;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:1;position:relative}
.wl-fenster-foto img{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
.wl-fenster-foto:hover{transform:scale(1.35);z-index:5;box-shadow:0 20px 40px rgba(0,0,0,.5)}
@media (max-width:560px){.wl-fenster-reihe{grid-template-columns:repeat(2,1fr)}.wl-fenster-foto:hover{transform:scale(1.15)}}
.wl-riedl-blatt{margin:24px auto 0;max-width:460px}
.wl-riedl-blatt .wl-anz-klein2{grid-column:span 2}
/* Rafiye: Faltblatt (3D, klappt auf), Kundenstopper mit Plakatwechsel, Schaufenster mit Glas */
.wl-rafiye{display:grid;gap:clamp(24px,5vw,80px);align-items:end;margin-top:30px;justify-items:center}
@media (min-width:760px){.wl-rafiye{grid-template-columns:1.4fr 1fr}}
.wl-falt{position:relative;width:min(100%,560px);perspective:1600px;cursor:pointer;outline:none;text-align:center}
.wl-falt-innenrechts,.wl-falt-deckel{position:absolute;top:0;width:50%;aspect-ratio:849/900}
.wl-falt{aspect-ratio:1120/900;height:auto}
.wl-falt-innenrechts{right:0;overflow:hidden;box-shadow:0 18px 30px rgba(0,0,0,.35)}
.wl-falt-innenrechts img{position:absolute;right:0;top:0;width:200%;height:100%;object-fit:cover}
.wl-falt-deckel{right:0;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);z-index:2}
.wl-falt:hover .wl-falt-deckel,.wl-falt:focus-visible .wl-falt-deckel,.wl-falt.auf .wl-falt-deckel{transform:rotateY(-180deg)}
.wl-falt-vorn,.wl-falt-hinten{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;box-shadow:0 18px 30px rgba(0,0,0,.35)}
.wl-falt-vorn img{position:absolute;right:0;top:0;width:200%;height:100%;object-fit:cover}
.wl-falt-hinten{transform:rotateY(180deg)}
.wl-falt-hinten img{position:absolute;left:0;top:0;width:200%;height:100%;object-fit:cover}
.wl-falt-text{position:absolute;left:0;right:0;bottom:-28px}
.wl-stopper{position:relative;width:min(100%,260px);text-align:center}
.wl-stopper-rahmen{position:relative;aspect-ratio:1/1.45;border:10px solid #d9dadc;border-bottom-width:14px;border-radius:6px 6px 2px 2px;background:#fff;box-shadow:0 20px 34px rgba(0,0,0,.4);transform:perspective(900px) rotateY(-10deg) rotateX(3deg);overflow:hidden}
.wl-stopper-plakate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:wl-stopper-wechsel 16s infinite;animation-delay:calc(var(--i) * -4s)}
@keyframes wl-stopper-wechsel{0%,22%{opacity:1}28%,100%{opacity:0}}
.wl-stopper-fuss{height:18px;margin:0 22%;background:linear-gradient(#aeb1b5,#6d7074);border-radius:0 0 6px 6px;transform:perspective(900px) rotateY(-10deg)}
@media (prefers-reduced-motion:reduce){.wl-stopper-plakate img{animation:none}.wl-stopper-plakate img:first-child{opacity:1}}
.wl-glas{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,40px);margin-top:26px;padding:clamp(18px,3vw,36px);background:linear-gradient(160deg,#2b1e26,#120b10);border:10px solid #3a3a3d;border-radius:6px;overflow:hidden}
.wl-glas-plakat{margin:0}
.wl-glas-plakat img{display:block;width:100%;height:auto;box-shadow:0 14px 26px rgba(0,0,0,.5)}
.wl-glas-schein{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 52%,rgba(255,255,255,.06) 70%,rgba(255,255,255,0) 80%)}
/* Rafiye: Faltblatt-Bilder duerfen doppelt so breit sein wie die Seite (Panel-Ausschnitt), Beschriftung unter dem Blatt */
.wl-falt-vorn img,.wl-falt-hinten img,.wl-falt-innenrechts img{max-width:none!important;width:200%!important}
.wl-falt{padding-bottom:34px}
.wl-falt-text{bottom:0}
/* Rafiye: Faltblatt ist A4 einmal gefalzt – zwei hohe DIN-lang-Seiten */
.wl-falt{aspect-ratio:1698/1800;width:min(100%,420px)}
.wl-falt-innenrechts,.wl-falt-deckel{aspect-ratio:849/1800}
/* Riedl: Matte quer (16:9) auf hellem Boden */
.wl-teppich-quer .wl-teppich-matte{aspect-ratio:16/9;width:min(88%,420px)}
.wl-teppich-quer .wl-teppich-boden{transform:rotateX(46deg);padding:36px 0 14px}
/* Schmutzfangmatten (Katheder, Riedl): draussen auf Pflastersteinen, der Boden reicht bis an den Kachelrand unten und seitlich */
.wl-pj-kachel-dunkel .wl-teppich{margin:26px calc(-1 * clamp(24px,3vw,40px)) calc(-1 * clamp(24px,3vw,40px));padding:20px 0 0;overflow:hidden}
.wl-pj-kachel-dunkel .wl-teppich-boden{width:150%;margin-left:-25%;border-radius:0;padding:40px 0 46px;box-shadow:none;
background-color:#a7a49c;
background-image:url("data:image/svg+xml;utf8,");
background-size:120px 60px}
.wl-pj-kachel-dunkel .wl-teppich-boden::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 45%,rgba(0,0,0,.12))}
.wl-pj-kachel-dunkel .wl-teppich-boden{position:relative}
.wl-pj-kachel-dunkel .wl-teppich-matte{position:relative;z-index:1}
.wl-tritt svg{fill:rgba(70,55,40,.7)}
/* Riedl: Zeitungsausschnitte als Stapel, kompakt */
.wl-schnipsel-stapel{position:relative;height:clamp(300px,34vw,420px);margin-top:24px}
.wl-schnipsel{position:absolute;margin:0;width:46%;left:calc(8% + var(--i) * 10%);top:calc(6% + (var(--i) * 7%));transform:rotate(calc(-6deg + var(--i) * 3deg));background:#fbf8f3;padding:6px;box-shadow:0 12px 24px rgba(0,0,0,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1),z-index 0s;z-index:calc(1 + var(--i));cursor:pointer;outline:none}
.wl-schnipsel img{display:block;width:100%;height:auto;max-height:clamp(200px,24vw,300px);object-fit:contain;object-position:top}
.wl-schnipsel:hover,.wl-schnipsel:focus-visible{transform:rotate(0deg) scale(1.22);z-index:20}
@media (max-width:560px){.wl-schnipsel{width:56%}}
/* Rafiye: die vier Plakate nebeneinander */
@media (min-width:760px){.wl-rafiye{grid-template-columns:1fr 2fr}}
.wl-plakatreihe{width:100%;text-align:center}
.wl-plakatreihe-bilder{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.5vw,18px);align-items:end}
.wl-plakatreihe-bilder img{display:block;width:100%;height:auto;box-shadow:0 14px 26px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative;z-index:1}
.wl-plakatreihe-bilder img:hover{transform:scale(1.35);z-index:5}
@media (max-width:560px){.wl-plakatreihe-bilder{grid-template-columns:repeat(2,1fr)}}
/* Rafiye: Leporello (Wickelfalz, vier Felder): zickzack gefaltet, bei Maus darueber flach */
.wl-lepo-halter{width:100%;text-align:center}
.wl-lepo{position:relative;height:clamp(220px,26vw,330px);perspective:1400px;cursor:pointer;outline:none;margin:0 auto;width:100%;display:flex;justify-content:flex-start;padding-left:4%}
.wl-lepo-s{position:relative;height:100%;aspect-ratio:1131/2400;flex:0 0 auto;background-size:400% 100%;background-repeat:no-repeat;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 24px rgba(0,0,0,.35)}
.wl-lepo-s .wl-lepo-s{position:absolute;left:100%;top:0}
.wl-lepo .s1{background-position:0% 0;transform:rotateY(-38deg)}
.wl-lepo .s2{background-position:33.333% 0;transform:rotateY(76deg)}
.wl-lepo .s3{background-position:66.666% 0;transform:rotateY(-76deg)}
.wl-lepo .s4{background-position:100% 0;transform:rotateY(76deg)}
.wl-lepo:hover .wl-lepo-s,.wl-lepo:focus-visible .wl-lepo-s,.wl-lepo.auf .wl-lepo-s{transform:rotateY(0deg)}
.wl-lepo .s2::after,.wl-lepo .s4::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%);transition:opacity .9s}
.wl-lepo:hover .wl-lepo-s::after,.wl-lepo.auf .wl-lepo-s::after{opacity:0}
.wl-lepo-knoepfe{margin-top:14px}
.wl-lepo-knoepfe .wl-knopf{font-size:12px;padding:8px 14px}
@media (max-width:760px){.wl-lepo{height:200px}}
/* Elektro Meister: Fahne ganz rechts, damit sie die volle Hoehe nutzen kann */
@media (min-width:780px){.wl-meister{grid-template-columns:1.7fr minmax(200px,.9fr) minmax(180px,.8fr)}.wl-meister-fahne{order:3}.wl-meister-zaun{order:1}.wl-meister-blatt{order:2}.wl-fahne{height:clamp(420px,60vh,640px)}}
/* Katheder: Baustellenschild kleiner, damit die Matten-Kachel nicht so viel dunklen Raum bekommt; hellere Fussspuren */
.wl-bauschilder.wl-bauschilder-eins{max-width:72%;margin:10px auto 0;padding:14px 5% 22px}
.wl-bauschilder-eins .wl-bauschild{padding-bottom:56px}
.wl-bauschilder-eins .wl-bauschild::before,.wl-bauschilder-eins .wl-bauschild::after{height:62px}
.wl-tritt svg{fill:rgba(235,222,205,.85)}
/* Startseite: Projekt-Finder wieder grau (war ein Missverstaendnis), der groessere Abstand bleibt */
.wl-pin,.wl-pin-sticky{background:var(--grey)}
/* Startseite: Referenzliste steht jetzt ueber der Bereichsauswahl */
.wl-arb-alle{margin:26px 0 30px;padding-top:0;border-top:0}
.wl-arb-alle ul{margin-top:10px}
/* Oberst: Ostereier mit Mustern – im Kasten (SVG-Pattern) und in der Schachtel/im Flug (CSS) */
.wl-huehner .ei.bunt-1 .ei-form{fill:url(#wl-oster-1)}.wl-huehner .ei.bunt-2 .ei-form{fill:url(#wl-oster-2)}.wl-huehner .ei.bunt-3 .ei-form{fill:url(#wl-oster-3)}
.wl-huehner .ei.bunt-4 .ei-form{fill:url(#wl-oster-4)}.wl-huehner .ei.bunt-5 .ei-form{fill:url(#wl-oster-5)}.wl-huehner .ei.bunt-6 .ei-form{fill:url(#wl-oster-6)}
.wl-hu-flug.bunt-1,.wl-hu-schachtel .sch-ei.bunt-1{background:repeating-linear-gradient(180deg,#f6a9c7 0 5px,#fff 5px 8px)}
.wl-hu-flug.bunt-2,.wl-hu-schachtel .sch-ei.bunt-2{background:radial-gradient(circle at 30% 30%,#fff 0 2px,transparent 2.5px) 0 0/8px 8px,radial-gradient(circle at 70% 70%,#fff 0 2px,transparent 2.5px) 0 0/8px 8px,#9ecbf0}
.wl-hu-flug.bunt-3,.wl-hu-schachtel .sch-ei.bunt-3{background:repeating-linear-gradient(135deg,#b7e089 0 4px,#fff5a0 4px 7px)}
.wl-hu-flug.bunt-4,.wl-hu-schachtel .sch-ei.bunt-4{background:radial-gradient(circle,#f26a6a 0 1.8px,transparent 2.2px) 0 0/7px 7px,#f8de6a}
.wl-hu-flug.bunt-5,.wl-hu-schachtel .sch-ei.bunt-5{background:repeating-linear-gradient(90deg,#c9a9ee 0 4px,#fff 4px 6px)}
.wl-hu-flug.bunt-6,.wl-hu-schachtel .sch-ei.bunt-6{background:radial-gradient(circle,transparent 0 2px,#3aa3d9 2.2px 3.4px,transparent 3.6px) 0 0/9px 9px,#f9b46e}
.wl-hu-flug.bunt,.wl-hu-schachtel .sch-ei.bunt{box-shadow:inset 0 0 0 1px rgba(90,58,34,.45),inset -4px -6px 10px rgba(0,0,0,.18),inset 3px 4px 8px rgba(255,255,255,.35)}
/* Startseite: Hinweistext zur Referenzliste */
.wl-arb-alle-text{max-width:70ch;margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
/* Fliesen Schmidt: Drehteller – Kasten aus vier Ansichten (--l Laenge, --b Breite, --h Hoehe in px, skaliert ueber --s) */
.wl-dreh{--l:560px;--b:266px;--h:216px;--s:1;position:relative;margin:34px auto 0;width:min(100%,760px);height:calc(var(--h) * var(--s) + 120px);perspective:1500px;cursor:grab;outline:none;touch-action:pan-y;user-select:none}
.wl-dreh.zieht{cursor:grabbing}
.wl-dreh:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.4)}
.wl-dreh-buehne{position:absolute;left:50%;top:40px;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-9deg) scale(var(--s))}
.wl-dreh-koerper{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.wl-dreh-f{position:absolute;top:0;height:var(--h);width:auto;backface-visibility:hidden;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35));-webkit-user-drag:none}
.wl-dreh-f.vorn{left:calc(var(--b) / -2);transform:translateZ(calc(var(--l) / 2))}
.wl-dreh-f.hinten{left:calc(var(--b) / -2);transform:rotateY(180deg) translateZ(calc(var(--l) / 2))}
.wl-dreh-f.rechts{left:calc(var(--l) / -2);transform:rotateY(90deg) translateZ(calc(var(--b) / 2))}
.wl-dreh-f.links{left:calc(var(--l) / -2);transform:rotateY(-90deg) translateZ(calc(var(--b) / 2))}
.wl-dreh-schatten{position:absolute;left:calc(var(--l) * -0.55);top:calc(var(--h) - 12px);width:calc(var(--l) * 1.1);height:calc(var(--b) * 1.1);border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0) 65%);transform:rotateX(90deg);pointer-events:none}
@media (max-width:900px){.wl-dreh{--s:.72;height:calc(216px * .72 + 90px)}}
@media (max-width:560px){.wl-dreh{--s:.5;height:calc(216px * .5 + 70px)}}
.wl-fliesen-paar{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;align-items:start}
.wl-fliesen-paar figure{margin:0}
.wl-fliesen-paar img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 12px 24px rgba(0,0,0,.4)}
@media (max-width:560px){.wl-fliesen-paar{grid-template-columns:1fr}}
/* Drehteller: die Ansichten duerfen breiter sein als ihr (breitenloser) Traeger */
.wl-dreh-f{max-width:none!important;width:auto!important}
/* Regionalbuffet: der Filter-Film steht in der Reihe neben dem Telefon */
.wl-screen:has(.wl-screen-filmspalte){grid-template-columns:1.45fr .55fr 1.25fr;align-items:start}
.wl-screen .wl-screen-filmspalte{margin:0;align-self:start;position:static}
.wl-screen .wl-screen-filmspalte .wl-k{margin:0 0 10px}
.wl-screen .wl-screen-filmspalte video{width:100%;height:auto;max-width:none;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
@media (max-width:900px){.wl-screen:has(.wl-screen-filmspalte){grid-template-columns:1fr 1fr}.wl-screen .wl-screen-filmspalte{grid-column:1/-1}}
/* Brummer: bestickte Weste (Drehfolge) und Polos */
.wl-hofwesten{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:4px}
.wl-hofwesten-text .wl-k{margin-top:0}
.wl-polos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.wl-pj-kachel-dunkel .wl-polos img{width:100%;height:auto;border-radius:10px;background:#fff}
.wl-weste{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:800/1071;border-radius:16px;background:radial-gradient(ellipse at 50% 30%,#fafbf7,#e9ede3 75%);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;outline:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.wl-weste.zieht{cursor:grabbing}
.wl-weste:focus-visible{box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.wl-pj-kachel-dunkel .wl-weste img{position:absolute;inset:0;width:100%!important;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none;border-radius:0}
.wl-weste-hinweis{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.45);pointer-events:none;transition:opacity .5s}
.wl-weste.zieht .wl-weste-hinweis{opacity:0}
@media (max-width:820px){.wl-hofwesten{grid-template-columns:1fr}.wl-weste{max-width:420px}}
/* Brummer: das graue Polo dreht sich um (statt der sechs Farben) */
.wl-polo{margin:26px 0 0;max-width:300px;perspective:1200px;cursor:pointer;outline:none}
.wl-polo-dreh{position:relative;aspect-ratio:1/1.22;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wl-polo:hover .wl-polo-dreh,.wl-polo:focus-visible .wl-polo-dreh,.wl-polo.um .wl-polo-dreh{transform:rotateY(180deg)}
.wl-pj-kachel-dunkel .wl-polo-dreh img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;border-radius:12px;background:#fff}
.wl-polo-dreh img.hinten{transform:rotateY(180deg)}
.wl-polo figcaption{margin-top:8px;font-size:12px;opacity:.75}
/* Bogner: die Flotte faehrt vorbei (Vollbreite), massstaeblich nach Fahrzeuglaenge --l in Metern */
.wl-flotte2{--m:clamp(38px,7.2vw,96px);position:relative;margin:18px 0 40px;padding:36px 0 0;overflow:hidden;background:linear-gradient(#f5f6f2,#e7e9e3)}
.wl-flotte2-bahn{display:flex;width:max-content;animation:wl-fahrt 72s linear infinite}
.wl-flotte2:hover .wl-flotte2-bahn,.wl-flotte2:focus-within .wl-flotte2-bahn{animation-play-state:paused}
.wl-flotte2-zug{display:flex;align-items:flex-end;gap:calc(var(--m) * 1.6);padding:0 calc(var(--m) * .8)}
.wl-flotte2-wagen{position:relative;margin:0;width:calc(var(--m) * var(--l));flex:none;transition:transform .35s}
.wl-flotte2-wagen img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 18px rgba(0,0,0,.28));-webkit-user-drag:none}
.wl-flotte2-wagen:hover{transform:translateY(-6px)}
.wl-flotte2-wagen figcaption{position:absolute;left:50%;top:-30px;transform:translateX(-50%);white-space:nowrap;font-size:12px;line-height:1.3;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;color:#1a1212}
.wl-flotte2-wagen figcaption strong{display:block;font-weight:600}
.wl-flotte2-wagen:hover figcaption{opacity:1}
.wl-flotte2-strasse{height:46px;margin-top:-4px;background:#2c2c2e;position:relative}
.wl-flotte2-strasse::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:#5a5a5c}
.wl-flotte2-strasse::after{content:"";position:absolute;left:0;right:0;top:55%;border-top:3px dashed rgba(255,255,255,.45)}
@keyframes wl-fahrt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wl-flotte2-bahn{animation:none}}
/* Bogner: zwei Hissfahnen nebeneinander, echte Logos */
.wl-bogner-fahnen{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.wl-bogner-fahnen .wl-fahne{height:clamp(360px,50vh,560px)}
.wl-bogner-logos{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.wl-bogner-logos figure{margin:0;background:#fff;border-radius:14px;padding:clamp(16px,3vw,34px) clamp(14px,2.6vw,28px) 12px;text-align:center}
.wl-pj-kachel-dunkel .wl-bogner-logos img{width:100%;height:auto;display:block}
.wl-bogner-logos figcaption{margin-top:12px;font-size:12px;color:#444}
@media (max-width:560px){.wl-bogner-logos{grid-template-columns:1fr}.wl-bogner-fahnen .wl-fahne{height:300px}}
/* Rafiye: Terminkarte zum Umdrehen, Schaufensterfolien als Ladenfront */
.wl-rafiye-karte{max-width:340px}
.wl-rafiye-karte .wl-polo-dreh{aspect-ratio:1400/2137}
.wl-laden{display:grid;grid-template-columns:1fr 1fr 1fr .62fr;gap:12px;margin-top:26px;padding:14px 14px 0;background:linear-gradient(#3b3b3e,#26262a);border-radius:8px 8px 0 0;border-bottom:16px solid #4a4a4e}
.wl-laden-scheibe{position:relative;margin:0;aspect-ratio:1536/2103;background:#111;border:6px solid #57575b;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.wl-pj-kachel-dunkel .wl-laden-scheibe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;display:block}
.wl-laden-schein{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.16) 47%,rgba(255,255,255,0) 54%,rgba(255,255,255,.05) 72%,rgba(255,255,255,0) 82%)}
@media (max-width:700px){.wl-laden{grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 0}.wl-laden-scheibe:last-child{grid-column:1/-1;aspect-ratio:2/1.4}}
/* Henninger: Etiketten auf den 250-ml-Flaschen (CSS-Flaschen mit Saftfarbe), Flyer 6 Seiten, Jubiläumskarte */
.wl-flaschen{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,5vw,72px);margin:34px auto 6px;padding-bottom:26px}
.wl-flasche{--b:clamp(88px,11vw,150px);--glanz:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 50%,rgba(0,0,0,.05) 74%,rgba(0,0,0,.3));position:relative;width:var(--b);margin:0;outline:none;transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 28px 22px rgba(0,0,0,.42))}
.wl-flasche:hover,.wl-flasche:focus-visible{transform:translateY(-12px) rotate(-2.5deg)}
.wl-flasche-kappe{width:40%;margin:0 auto;height:calc(var(--b) * .3);border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#181818,#4d4d4d 28%,#1a1a1a 64%,#3a3a3a)}
.wl-flasche-hals{width:32%;margin:-1px auto 0;height:calc(var(--b) * 1.05);background:var(--glanz),linear-gradient(180deg,rgba(226,232,222,.55) 0 26%,var(--saft) 26%)}
.wl-flasche-schulter{height:calc(var(--b) * .5);margin-top:-1px;background:var(--glanz),var(--saft);clip-path:polygon(34% 0,66% 0,100% 100%,0 100%)}
.wl-flasche-koerper{position:relative;height:calc(var(--b) * 3.62);margin-top:-1px;background:var(--saft);border-radius:0 0 12px 12px;overflow:hidden}
.wl-flasche-koerper img{position:absolute;left:3.5%;top:4%;width:93%!important;max-width:none!important;height:auto;display:block}
.wl-flasche-koerper::after{content:"";position:absolute;inset:0;background:var(--glanz);pointer-events:none}
.wl-flasche figcaption{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:12px;white-space:nowrap;text-align:center;font-size:12px;line-height:1.35}
.wl-flasche figcaption strong{display:block;font-weight:600}
.wl-flasche figcaption span{opacity:.7}
@media (max-width:600px){.wl-flasche figcaption span{display:none}.wl-flaschen{gap:14px}}
.wl-lepo-drei .wl-lepo-s{background-size:300% 100%}
.wl-lepo-drei .s2{background-position:50% 0}
.wl-lepo-drei .s3{background-position:100% 0;transform:rotateY(-76deg)}
.wl-lepo-drei .s3::after{content:none}
.wl-jubel{margin:26px 0 0;perspective:1200px}
.wl-pj-kachel-dunkel .wl-jubel img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.45);transform:rotateY(-8deg) rotateX(3deg);transition:transform .6s}
.wl-jubel:hover img{transform:rotateY(0) rotateX(0)}
/* Regionalbuffet: die Bauzaunbanner unten in der Broschüren-Kachel */
.wl-broschuere-zaun{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.wl-broschuere-zaun .wl-k{margin:0 0 6px}
.wl-broschuere-zaun>p:not(.wl-k){margin:0 0 18px;max-width:60ch}
.wl-broschuere-zaun .wl-zaunreihe{margin-top:0}
/* Feuerwehrfest: Fahne links, Bühnenbanner in der Mitte, Fahne rechts – wie im Zelt */
.wl-ffw-zelt{display:grid;grid-template-columns:minmax(96px,.5fr) 2.2fr minmax(96px,.5fr);gap:clamp(12px,3vw,44px);align-items:start;margin-top:34px}
.wl-ffw-zelt .wl-meister-fahne{max-width:none;text-align:center}
.wl-ffw-zelt .wl-fahne{height:clamp(280px,42vw,640px)}
.wl-ffw-zelt .wl-ffw-banner{padding-top:0}
.wl-ffw-zelt .wl-ffw-banner figcaption{text-align:center}
.wl-pj-kachel-dunkel .wl-meister-zaun{margin-top:26px}
@media (max-width:560px){.wl-ffw-zelt .wl-meister-klein{display:none}}
/* Feuerwehrfest: feste Spalten, damit keine alte Reihenfolge-Regel dazwischenfunkt */
.wl-ffw-zelt>.wl-meister-fahne:first-child{grid-column:1;order:0}
.wl-ffw-zelt>.wl-ffw-banner{grid-column:2;order:0;max-width:none}
.wl-ffw-zelt>.wl-meister-fahne:last-child{grid-column:3;order:0}
/* Feuerwehrfest: Fahne, Bühnenbanner, Fahne – alle gleich hoch, oben bündig */
.wl-ffw-zelt{container-type:inline-size;--zh:min(clamp(280px,44vw,620px),calc((100cqw - 2 * clamp(12px,3vw,44px)) / 2.24));display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,3vw,44px)}
.wl-ffw-zelt>.wl-meister-fahne:first-child,.wl-ffw-zelt>.wl-meister-fahne:last-child{flex:none;width:calc(var(--zh) * .3375 + 30px)}
.wl-ffw-zelt .wl-fahne{height:calc(var(--zh) + 6px)}
.wl-ffw-zelt>.wl-ffw-banner{flex:none;width:auto}
.wl-ffw-zelt .wl-ffw-banner img{width:auto;height:calc(var(--zh) - 6px);max-width:none}
/* Startseite: Einleitung links, „alle referenzen“ rechts, die Namensliste darunter in voller Breite */
.wl-arb-kopf{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,6vw,96px);align-items:start;margin-top:8px}
.wl-arb-kopf .wl-arb-intro{margin:0;max-width:none}
.wl-arb-alle-kopf .wl-k{margin:0 0 6px}
.wl-arb-alle-kopf .wl-arb-alle-text{margin:0;max-width:none}
.wl-arb-alle.wl-arbeit-weitere-viele{margin:22px 0 30px;padding-top:0;border-top:0}
.wl-arb-alle ul{margin-top:0}
@media (max-width:760px){.wl-arb-kopf{grid-template-columns:1fr;row-gap:22px}}
/* Oberst: die Fensterfahne hängt am Saugnapf oben links an der Hühner-Bühne, die Stange steigt nach rechts an */
.wl-huehner .wl-ff{position:absolute;left:1.6%;top:2.5%;width:clamp(64px,12%,120px);aspect-ratio:440/1100;z-index:4;pointer-events:none}
.wl-huehner .wl-ff-tuch{position:absolute;left:0;top:0;width:100%!important;max-width:none!important;height:auto;clip-path:polygon(0 10.7%,100% 0,100% 100%,0 100%);transform-origin:50% 0;animation:wl-ff-wehen 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.wl-huehner .wl-ff-stange{position:absolute;left:-7%;top:10.7%;width:114%;height:5%;max-height:6px;border-radius:3px;background:linear-gradient(#f0f0f0,#8d9196);box-shadow:0 2px 3px rgba(0,0,0,.3);transform-origin:0 50%;transform:translateY(-50%) rotate(-15deg)}
.wl-huehner .wl-ff-saug{position:absolute;left:-13%;top:10.7%;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e9ecef,#7c8188 70%,#4a4e53);box-shadow:0 2px 4px rgba(0,0,0,.35);transform:translateY(-50%)}
@keyframes wl-ff-wehen{0%,100%{transform:rotate(0) skewX(0)}50%{transform:rotate(1.6deg) skewX(-1.2deg)}}
@media (prefers-reduced-motion:reduce){.wl-huehner .wl-ff-tuch{animation:none}}
/* Startseite: jede Referenz als Knopf in der Hausfarbe des Kunden */
.wl-arb-alle ul{gap:10px 10px}
.wl-arb-alle li a{display:inline-block;padding:9px 18px 10px;border-radius:999px;background:var(--f,var(--ink));color:#fff;font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.5vw,21px);line-height:1.05;letter-spacing:-.01em;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.08);transition:transform .2s,box-shadow .25s,filter .2s}
.wl-arb-alle li a:hover,.wl-arb-alle li a:focus-visible{color:#fff;transform:translateY(-2px);filter:saturate(1.1) brightness(1.05);box-shadow:0 10px 22px color-mix(in srgb,var(--f,#000) 40%,transparent)}
/* Elektro Meister: Bauzaun, Anzeige und Fahne unten bündig (Bildunterschriften alle unter dem Objekt), Text etwas tiefer */
.wl-meister-blatt{position:relative;margin-bottom:26px}
.wl-meister-blatt .wl-meister-klein{position:absolute;left:0;top:100%;margin-top:10px;color:rgba(255,255,255,.75)}
.wl-meister-fahne .wl-meister-klein,.wl-meister-zaun .wl-meister-klein{margin-top:10px}
.wl-meister-fahne .wl-fahne{margin-bottom:0}
@media (min-width:780px){.wl-pj-buehne:has(.wl-meister:not(.wl-ffw)) .wl-pj-buehne-kopf{padding-top:44px}.wl-meister:not(.wl-ffw){margin-top:-24px}}
/* Henninger: der Flyer hat vier Seiten (A4 einmal gefaltet) – zwei Tafeln je Seite */
.wl-lepo-zwei .wl-lepo-s{aspect-ratio:700/991;background-size:200% 100%}
.wl-lepo-zwei .s1{background-position:0 0;transform:rotateY(-30deg)}
.wl-lepo-zwei .s2{background-position:100% 0;transform:rotateY(62deg)}
.wl-lepo-zwei .s2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%);transition:opacity .9s}
.wl-lepo.wl-lepo-zwei{padding-left:8%}
/* Oberst: Fensterfahne ist die „Hofladen Eingang“-Fahne (55 × 80), die Stange steigt nach rechts; das tiefe Motiv ist das Alu-Dibond-Schild */
.wl-huehner .wl-ff{aspect-ratio:952/1400;width:clamp(76px,14%,150px)}
.wl-huehner .wl-ff-tuch{clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}
.wl-huehner .wl-ff-stange{top:18%}
.wl-huehner .wl-ff-saug{top:18%}
.wl-of-schild{position:relative;margin:26px auto 0;width:min(100%,220px);perspective:1200px}
.wl-pj-kachel-dunkel .wl-of-schild img{display:block;width:100%;height:auto;border:3px solid #e9e9e6;border-radius:3px;box-shadow:0 2px 0 #b9b9b4,0 26px 40px rgba(0,0,0,.45);transform:rotateY(-10deg) rotateX(2deg);transform-origin:50% 50%;transition:transform .6s}
.wl-of-schild:hover img{transform:none}
.wl-of-schild i{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f4f2,#8a8d90 65%,#55585b);box-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none}
.wl-of-schild .s1{left:8px;top:8px}.wl-of-schild .s2{right:8px;top:8px}.wl-of-schild .s3{left:8px;bottom:36px}.wl-of-schild .s4{right:8px;bottom:36px}
.wl-of-schild figcaption{text-align:center}
/* Oberst: geschlossener Karton sitzt auf derselben Standfläche wie der offene – kein Hüpfer beim Schließen */
.wl-hu-schachtel.foto .sch-bild-zu{transform:translate(-.3%,7.75%) scale(.982);transform-origin:50% 100%}
/* Unterseiten: „weitere arbeiten“ ebenfalls als Knöpfe in der Hausfarbe; die eigene Seite als heller Knopf mit Rand */
.wl-arbeit-weitere-viele ul{gap:10px 10px}
.wl-arbeit-weitere-viele li a,.wl-arbeit-weitere-viele li.jetzt span{display:inline-block;padding:9px 18px 10px;border-radius:999px;background:var(--f,var(--ink));color:#fff;font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.5vw,21px);line-height:1.05;letter-spacing:-.01em;text-decoration:none;box-shadow:0 2px 0 rgba(0,0,0,.08);transition:transform .2s,box-shadow .25s,filter .2s}
.wl-arbeit-weitere-viele li a:hover,.wl-arbeit-weitere-viele li a:focus-visible{color:#fff;transform:translateY(-2px);filter:saturate(1.1) brightness(1.05);box-shadow:0 10px 22px color-mix(in srgb,var(--f,#000) 40%,transparent)}
.wl-arbeit-weitere-viele li.jetzt span{background:#fff;color:var(--f,var(--ink));box-shadow:inset 0 0 0 2px var(--f,var(--ink))}
.wl-arbeit-weitere-viele li.jetzt span::after{content:" · diese seite";font-family:var(--mono);font-size:11px;letter-spacing:.02em;opacity:.8}
/* Oberst: Fensterfahne etwas größer und weiter in die Bühne hinein */
.wl-huehner .wl-ff{left:4.5%;top:4%;width:clamp(90px,17%,190px)}
/* Oberst: Eier sitzen etwas tiefer in der Mulde */
.wl-hu-schachtel.foto .sch-mulde{transform:translate(-50%,-68%)}
/* Oberst: das Schild hinten in der Hühner-Bühne, mit weichem Schatten */
.wl-huehner .hu-schild{filter:drop-shadow(0 6px 6px rgba(80,60,20,.35))}
/* Feuerwehrfest: Bauzaunbanner unter den Shirts in derselben Kachel */
.wl-pj-kachel-dunkel .wl-festzaun{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.wl-festzaun figcaption{text-align:center}
/* Oberst: beim Schließen verschwindet der offene Karton (samt aufgestelltem Deckel), der geschlossene steht dahinter an derselben Stelle */
.wl-hu-schachtel.foto .sch-bild-offen{position:absolute;z-index:2;transition:opacity .7s ease}
.wl-hu-schachtel.foto .sch-bild-zu{z-index:1}
.wl-hu-schachtel.foto.zu .sch-bild-offen{opacity:0}
.wl-hu-schachtel.foto .sch-mulde{z-index:3}
/* Oberst: der Zähler „Schachtel voll“ sitzt unten links – rechts oben ragte er am Rand hinaus */
.wl-huehner .wl-hu-zaehler{top:auto;right:auto;left:16px;bottom:16px;max-width:calc(100% - 32px);white-space:nowrap}
/* Henninger: schlanke, hohe Brennerei-Flasche (langer Hals, Korken, klares Glas) – Inhalt in der Farbe des Produkts */
.wl-flasche{--b:clamp(78px,9.5vw,130px);--glas:linear-gradient(90deg,rgba(255,255,255,.62),rgba(255,255,255,.14) 22%,rgba(255,255,255,0) 48%,rgba(0,0,0,.06) 72%,rgba(0,0,0,.28));--luft:linear-gradient(90deg,rgba(255,255,255,.75),rgba(226,234,230,.45) 28%,rgba(236,240,238,.28) 58%,rgba(120,130,125,.35));width:var(--b);filter:drop-shadow(0 30px 24px rgba(0,0,0,.45))}
.wl-flasche-kork{width:36%;margin:0 auto;height:calc(var(--b) * .34);border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#b8946a,#e2c59a 30%,#c9a678 62%,#8f6d47);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.wl-flasche-muendung{width:34%;margin:-1px auto 0;height:calc(var(--b) * .16);border-radius:2px;background:var(--luft);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.wl-flasche-hals{width:27%;margin:-1px auto 0;height:calc(var(--b) * 2);background:var(--luft);border-radius:0}
.wl-flasche-schulter{height:calc(var(--b) * .55);margin-top:-1px;background:var(--glas),linear-gradient(180deg,rgba(226,234,230,.5) 0 18%,var(--saft) 18%);clip-path:polygon(36.5% 0,63.5% 0,100% 100%,0 100%)}
.wl-flasche-koerper{height:calc(var(--b) * 3.62);border-radius:0 0 9px 9px;background:var(--saft)}
.wl-flasche-koerper::after{background:var(--glas)}
.wl-flasche-koerper img{top:3%}
@media (max-width:600px){.wl-flasche{--b:clamp(64px,22vw,90px)}}
/* Henninger: echte Flaschenfotos (ChatGPT-Flasche, unser Etikett aufgelegt) statt CSS-Flaschen */
.wl-flasche.wl-flasche-foto{--b:clamp(96px,12vw,170px);width:var(--b);filter:drop-shadow(0 30px 26px rgba(0,0,0,.5))}
.wl-flasche-foto img{display:block;width:100%!important;max-width:none!important;height:auto}
@media (max-width:600px){.wl-flasche.wl-flasche-foto{--b:clamp(70px,24vw,100px)}}
/* Helle Bühne (Henninger): die Flaschen stehen auf Weiß, ohne dunkle Fläche */
.wl-pj-buehne-hell .wl-steiner-buehne{background:#fff;color:var(--ink)}
.wl-pj-buehne-hell .wl-pj-buehne-kopf p{color:var(--ink-2)}
.wl-pj-buehne-hell .wl-pj-buehne-kopf .wl-k{color:var(--pf)}
.wl-pj-buehne-hell .wl-flasche figcaption{color:var(--ink)}
.wl-pj-buehne-hell .wl-flasche figcaption span{color:var(--ink-2);opacity:1}
.wl-pj-buehne-hell .wl-flasche.wl-flasche-foto{filter:drop-shadow(0 26px 22px rgba(0,0,0,.28))}
/* Rafiye: Fotowand (XXL-Rollup) mit Stange oben und Kassette unten; Schaufenster-Scheiben alle gleich hoch */
.wl-fotowand{position:relative;margin:26px auto 0;width:min(100%,360px);perspective:1200px;text-align:center}
.wl-fotowand-stange{height:8px;border-radius:4px;background:linear-gradient(#f2f2f2,#9a9a9a);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.wl-pj-kachel-dunkel .wl-fotowand img{display:block;width:100%;height:auto;margin-top:-2px;box-shadow:0 24px 48px rgba(0,0,0,.5);transform:rotateY(-7deg);transform-origin:50% 50%;transition:transform .6s}
.wl-fotowand:hover img{transform:none}
.wl-fotowand-fuss{height:16px;margin:-2px auto 0;width:104%;margin-left:-2%;border-radius:4px 4px 6px 6px;background:linear-gradient(#d9d9d9,#8f8f8f 60%,#5a5a5a)}
.wl-laden-scheibe:last-child{aspect-ratio:auto;height:100%}
/* Riedl: Matte auf hellen Holzdielen mit dunkler Fußleiste (wie im Laden) */
.wl-teppich-holz{background:linear-gradient(180deg,#f2eee7 0,#f2eee7 30px,#43382f 30px,#43382f 42px,#e6d3b4 42px);border-radius:8px;padding-top:30px}
.wl-teppich-holz .wl-teppich-boden{background:repeating-linear-gradient(90deg,rgba(90,60,30,.16) 0 2px,transparent 2px 150px),repeating-linear-gradient(0deg,rgba(90,60,30,.06) 0 1px,transparent 1px 26px),linear-gradient(180deg,#eadbbf,#d9c19a);border-radius:0;padding:34px 0 16px}
.wl-teppich-holz .wl-teppich-matte{box-shadow:0 26px 40px rgba(60,40,20,.38),0 4px 8px rgba(0,0,0,.25)}
/* Helle Bühne: Überschrift dunkel, Kicker in der Hausfarbe */
.wl-projekt.wl-pj-buehne-hell .wl-pj-buehne-kopf h2{color:var(--ink)}
.wl-projekt.wl-pj-buehne-hell .wl-pj-buehne-kopf .wl-k{color:var(--pf)}
/* Rotenbauer: das Eisglas als Foto (ChatGPT-Glas, Deckeletikett und Sortenzettel aufgelegt) */
.wl-eisbecher.wl-eisbecher-foto{aspect-ratio:auto;width:min(100%,360px);perspective:none;cursor:default;margin:0 auto}
.wl-pj-kachel-dunkel .wl-eisbecher-foto img,.wl-eisbecher-foto img{display:block;width:100%!important;max-width:none!important;height:auto;filter:drop-shadow(0 28px 30px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wl-eisbecher-foto:hover img{transform:translateY(-8px) rotate(-2deg)}
/* Rotenbauer: zwei Eisgläser – Heidelbeere stehend, Schoko liegend mit Deckel nach vorn */
.wl-eisglaeser{display:flex;align-items:flex-end;justify-content:center;gap:2%;width:100%;max-width:640px;margin:0 auto}
.wl-eisglaeser .wl-eisbecher-foto{margin:0;width:44%;max-width:none}
.wl-eisglaeser .wl-eisglas-liegt{width:54%}
.wl-eisglaeser .wl-eisglas-liegt img{filter:drop-shadow(0 22px 26px rgba(0,0,0,.45))}
/* Rotenbauer: die Soja-Öl-Flaschen (echte Fotos, freigestellt) neben dem Text */
.wl-oel-reihe{display:grid;gap:clamp(20px,4vw,60px);align-items:center;margin-top:clamp(30px,5vw,60px)}
@media (min-width:760px){.wl-oel-reihe{grid-template-columns:1fr 1fr}}
.wl-oelflaschen{display:flex;align-items:flex-end;justify-content:center;gap:6%;max-width:420px;margin:0 auto}
.wl-oelflasche{margin:0;text-align:center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wl-oelflasche.gross{width:38%}.wl-oelflasche.klein{width:31%}
.wl-pj-kachel-dunkel .wl-oelflasche img,.wl-oelflasche img{display:block;width:100%!important;max-width:none!important;height:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.5))}
.wl-oelflasche:hover{transform:translateY(-8px)}
.wl-oelflasche figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
/* Startseite am Handy: roter Kopfbereich links tiefer gezogen, die Schräge dadurch steiler */
@media (max-width:860px){.wl-panel.wl-hero{padding-bottom:190px}.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% 74%,0 100%)}.wl-hero-logo{bottom:96px}}
/* Oberst am Handy: der Hinweis weicht der Fensterfahne nach rechts aus, die Fahne bleibt links oben */
@media (max-width:760px){
.wl-huehner .wl-hu-hinweis{left:auto;right:10px;transform:none;white-space:normal;max-width:58%;font-size:12px;line-height:1.35;text-align:center;padding:6px 12px}
.wl-huehner .wl-ff{left:3%;top:3%;width:clamp(84px,24%,120px)}
}
/* Startseite am Handy: roter Kopfbereich links ganz nach unten, darunter links der Hinweis auf die Referenzen */
.wl-hero-refs{display:none}
@media (max-width:860px){
.wl-panel.wl-hero{padding-bottom:270px}
.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% 58%,0 100%)}
.wl-hero-logo{bottom:150px}
.wl-hero-refs{display:block;position:absolute;left:20px;bottom:44px;z-index:2;color:#fff;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.2}
.wl-hero-refs .wl-k{display:block;color:rgba(255,255,255,.8);margin:0 0 4px}
.wl-panel.wl-hero .wl-scrollhint{display:none}
}
/* Startseite am Handy: der Referenz-Hinweis steht zweizeilig ganz im Roten, das Logo darüber */
@media (max-width:860px){
.wl-hero-logo{bottom:215px}
.wl-hero-refs{bottom:118px;max-width:170px;font-size:17px;line-height:1.15}
}
/* Startseite am Handy: Schräge nur leicht, der Hinweis bleibt darunter im Roten */
@media (max-width:860px){
.wl-panel.wl-hero{padding-bottom:200px}
.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)}
.wl-hero-logo{bottom:150px}
.wl-hero-refs{bottom:58px;max-width:none}
}
/* Startseite am Handy: kein Logo im Kopfbereich, der Referenz-Hinweis rückt entsprechend nach */
@media (max-width:860px){
.wl-hero-logo{display:none}
.wl-panel.wl-hero{padding-bottom:150px}
.wl-hero-refs{bottom:52px}
}
/* Startseite am Handy: das dunkle Logo sitzt unten rechts im weißen Bereich, der Hinweis links im Roten */
@media (max-width:860px){
.wl-panel.wl-hero{padding-bottom:230px}
.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% 60%,0 100%)}
.wl-hero-logo{display:block;left:auto;right:20px;bottom:22px;width:min(50vw,200px);z-index:2}
.wl-hero-refs{bottom:150px}
}
/* Prüfrunde 25.09.: Bildunterschriften in dunklen Kacheln hell; Henninger-Beschriftung am Handy; Feuerwehr-Fahnen am Handy groß genug */
.wl-pj-kachel-dunkel .wl-meister-klein{color:rgba(255,255,255,.75);opacity:1}
@media (max-width:600px){.wl-flasche figcaption{white-space:normal;width:120%;font-size:11px}.wl-flasche figcaption span{display:none}.wl-flaschen{padding-bottom:40px}}
@media (max-width:560px){
.wl-ffw-zelt{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;--zh:auto}
.wl-ffw-zelt>.wl-ffw-banner{grid-column:1/-1;width:100%;order:0}
.wl-ffw-zelt .wl-ffw-banner img{width:100%;height:auto}
.wl-ffw-zelt>.wl-meister-fahne:first-child,.wl-ffw-zelt>.wl-meister-fahne:last-child{width:auto;order:1}
.wl-ffw-zelt .wl-fahne{height:min(78vw,300px)}
}
@media (max-width:560px){
.wl-ffw-zelt>.wl-ffw-banner{grid-column:1/-1;grid-row:1}
.wl-ffw-zelt>.wl-meister-fahne:first-child{grid-column:1;grid-row:2}
.wl-ffw-zelt>.wl-meister-fahne:last-child{grid-column:2;grid-row:2}
.wl-ffw-zelt .wl-ffw-banner img{height:auto!important;width:100%!important}
}
/* Prüfrunde 25.09., zweiter Teil */
/* Startseite: echtes Bild im Foto-Panel (Bogner-Flotte), Kundenstimmen weg – der Text nutzt die Breite */
.wl-panel.wl-photo{position:relative;overflow:hidden}
.wl-photo-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.wl-panel.wl-photo .wl-cap{z-index:1}
.wl-fw{grid-template-columns:minmax(0,1fr)}
.wl-fw>div:first-child{max-width:72ch}
/* Päckert’s: echte Anzeigen als Ausschnitte auf dem Blatt */
.wl-anz.wl-anz-drei{grid-template-columns:1.5fr 1fr 1fr;align-items:end}
.wl-anz-echtblatt{min-height:0;margin:0;gap:10px}
.wl-anz-echtblatt .wl-k{margin:0;color:var(--pf)}
.wl-anz-echtblatt .wl-anz-echt{display:block;width:100%;height:auto;border:1px solid #d9d2c6}
.wl-paeckerts-fahne{height:clamp(360px,50vh,560px);max-width:320px;margin-top:26px}
@media (max-width:760px){.wl-anz.wl-anz-drei{grid-template-columns:1fr 1fr}.wl-anz-echtblatt:first-child{grid-column:1/-1}}
/* Fliesen Schmidt: die Bande am Sportplatz – Brett mit Rahmen, davor der Rasen */
.wl-bande{position:relative;padding:18px 6% 0;background:linear-gradient(180deg,#dfe9f4 0,#cfe0f0 44%,#4f8f3c 44%,#5e9e48 70%,#4b8438);border-radius:6px;overflow:hidden}
.wl-bande-brett{position:relative;padding:5px;background:linear-gradient(#f4f4f2,#cfd2d4);border-radius:3px;box-shadow:0 10px 18px rgba(0,0,0,.35)}
.wl-bande-brett img{display:block;width:100%;height:auto;border-radius:0!important;box-shadow:none!important}
.wl-bande-brett::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(#9aa0a4,#5c6165)}
.wl-bande-rasen{height:64px;margin:8px -6.5% 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 44px,rgba(255,255,255,.06) 44px 88px)}
.wl-bande-rasen::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:4px;background:rgba(255,255,255,.85)}
/* Käfer: die schwarze Tasche bekommt einen goldenen Lichtschein hinter sich */
.wl-pj-kaefer .wl-tasche-buehne{background:radial-gradient(ellipse 55% 60% at 50% 58%,rgba(184,150,62,.42),rgba(184,150,62,0) 70%)}
/* Oberst: die Wiese läuft bis zum unteren Rand der Bühne weiter (Grasbüschel als Muster), das Bild sitzt oben; Karton am Handy größer */
.wl-steiner-buehne .wl-huehner{background:url("data:image/svg+xml;utf8,") repeat,linear-gradient(180deg,#f7e7a8,#f3dfa0)}
.wl-steiner-buehne .wl-huehner{background-size:260px 120px,auto;background-position:0 60%,0 0}
.wl-steiner-buehne .wl-huehner svg{position:relative;z-index:1}
@media (max-width:760px){.wl-hu-schachtel.foto{width:74%;bottom:4%;right:3%}}
/* Startseite am Handy: der rote Kopfbereich füllt den ersten Bildschirm ganz, das Graue kommt erst beim Scrollen */
@media (max-width:860px){.wl-panel.wl-hero{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px);box-sizing:border-box}}
/* Startseite am Handy: die Schräge ist immer 260 px hoch, egal wie hoch der Kopfbereich ist – der Referenz-Hinweis bleibt im Roten */
@media (max-width:860px){.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% calc(100% - 250px),0 100%)}}
/* Startseite am Handy: Hinweis auf die Referenzen steht direkt unter den Bereichen, deutlich über der Schräge */
@media (max-width:860px){
.wl-hero-refs{bottom:auto;top:auto;position:relative;left:0;margin:34px 0 0;max-width:none}
.wl-panel.wl-hero{padding-bottom:230px}
.wl-panel.wl-hero::before{clip-path:polygon(0 0,100% 0,100% calc(100% - 200px),0 100%)}
.wl-hero-logo{bottom:22px}
}
/* Brummer: die Weste steht in der Gutschein-Kachel an der Stelle des Schilds */
.wl-pj-kachel-dunkel .wl-hof-eins>.wl-weste{display:block;width:100%;max-width:360px;aspect-ratio:800/1071;padding:0;border:0;border-radius:16px;background:radial-gradient(ellipse at 50% 30%,#fafbf7,#e9ede3 75%);box-shadow:0 18px 40px rgba(0,0,0,.35);overflow:visible;margin-bottom:26px}
.wl-pj-kachel-dunkel .wl-hof-eins>.wl-weste img{border-radius:16px}
.wl-pj-kachel-dunkel .wl-hof-eins>.wl-weste .wl-weste-hinweis{bottom:10px}
.wl-pj-kachel-dunkel .wl-hof-eins>.wl-weste .wl-hof-unten{bottom:-24px;opacity:.55}
/* Rundgang 360 als dunkle Kachel (Päckert's: neben der Broschüre) */
.wl-pj-kachel-dunkel .wl-brau{position:relative;aspect-ratio:4/3;max-height:70vh;background:#0c2a1e;overflow:hidden;border-radius:8px;margin-top:4px}
.wl-pj-kachel-dunkel .wl-brau canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;outline:none}
.wl-pj-kachel-dunkel .wl-brau canvas.zieht{cursor:grabbing}
.wl-pj-kachel-dunkel .wl-brau canvas:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.wl-pj-kachel-dunkel .wl-brau.vollbild{aspect-ratio:auto;max-height:none;height:100vh;border-radius:0}
.wl-pj-kachel-dunkel .wl-brau-nav{justify-content:flex-start;padding:14px 0 0}
.wl-pj-kachel-dunkel .wl-brau-nav button{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.wl-pj-kachel-dunkel .wl-brau-nav button:hover{background:rgba(255,255,255,.25)}
.wl-pj-kachel-dunkel .wl-brau-nav button.ist{background:#fff;border-color:#fff;color:var(--pf-dunkel)}
/* Riedl: die Matte allein in der breiten Kachel – groesser auf den Dielen */
.wl-pj-riedl .wl-teppich-quer .wl-teppich-matte{width:min(78%,560px)}
/* Fliesen Schmidt: Bande und Anzeige untereinander */
.wl-pj-fliesen-schmidt .wl-fliesen-paar{grid-template-columns:1fr;max-width:520px;gap:26px}
/* Katheder & Roth: die Matten-Kachel braucht die Höhe nicht – weniger Boden, Matte etwas kleiner */
.wl-pj-katheder-roth .wl-pj-kachel-dunkel .wl-teppich{margin-top:16px;padding-top:8px}
.wl-pj-katheder-roth .wl-pj-kachel-dunkel .wl-teppich-boden{padding:14px 0 12px}
.wl-pj-katheder-roth .wl-teppich-matte{width:min(54%,260px)}
/* Rafiye: oben Faltflyer und Fotowand, die Plakate als 2×2 in der Kachel – alle gleich groß */
@media (min-width:760px){.wl-pj-rafiye .wl-rafiye{grid-template-columns:1.6fr 1fr;align-items:end}}
.wl-rafiye .wl-fotowand{margin:0 auto;width:min(100%,330px);perspective:1200px;text-align:center}
.wl-rafiye .wl-fotowand img{display:block;width:100%;height:auto;margin-top:-2px;box-shadow:0 24px 48px rgba(0,0,0,.5);transform:rotateY(-7deg);transform-origin:50% 50%;transition:transform .6s}
.wl-rafiye .wl-fotowand:hover img{transform:none}
.wl-rafiye .wl-fotowand figcaption{display:block;margin-top:14px}
.wl-plakatreihe-vier{margin-top:22px}
.wl-plakatreihe-vier .wl-plakatreihe-bilder{grid-template-columns:1fr 1fr;gap:16px;max-width:520px;margin:0 auto}
.wl-pj-kachel-dunkel .wl-plakatreihe-vier .wl-plakatreihe-bilder img{width:100%;aspect-ratio:1/1.414;height:auto;object-fit:cover;border-radius:2px}
.wl-plakatreihe-vier .wl-plakatreihe-bilder img:hover{transform:scale(1.25)}
.wl-plakatreihe-vier .wl-meister-klein{display:block;margin-top:16px}
/* Rafiye: acht Plakate in einer Zeile wie bei Stadt Stein (am Tablet vier, am Handy zwei) */
.wl-pj-rafiye .wl-plakatwand{grid-template-columns:repeat(8,1fr)}
@media (max-width:900px){.wl-pj-rafiye .wl-plakatwand{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.wl-pj-rafiye .wl-plakatwand{grid-template-columns:repeat(2,1fr)}}
/* Katheder & Roth: der Blau-Rot-Verlauf wieder deutlich sichtbar (war zu dunkel und dezent) */
.wl-pj-katheder-roth .wl-steiner-buehne{background:linear-gradient(120deg,#0E2E48 0%,#1B4C70 32%,#7A1C1C 72%,#3A0C0C 100%)}
.wl-pj-katheder-roth .wl-pj-kachel-dunkel{background:linear-gradient(120deg,#0F3352,#6E1A1A)}
.wl-pj-katheder-roth .wl-steiner-cta-ins{background:linear-gradient(120deg,#0F3352,#6E1A1A)}
/* Startseite: die Karten-Vorschauen hell in der Kundenfarbe statt dunkel – freundlicher (Rom bleibt dunkel, Leuchtschrift) */
.wl-arb-anim:not(.wl-arb-anim-rom){background:var(--pf-hell);color:var(--pf-dunkel)}
/* Riedl: die Anzeigen auf einer Zeitungsseite (oben, neben dem Handy), die Tasche in der Kachel */
.wl-zeitung{margin:0;width:min(100%,540px);text-align:center}
.wl-zeitung-blatt{background:#f7f4ee;color:#2a2a2a;padding:16px 16px 20px;box-shadow:0 26px 48px rgba(0,0,0,.45);border-radius:2px;text-align:left;transform:rotate(-1.2deg)}
.wl-zeitung-kopf{border-bottom:3px double #333;padding-bottom:5px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serif);font-size:22px;font-weight:300;letter-spacing:-.01em;color:#222}
.wl-zeitung-kopf small{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.wl-zeitung-satz{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:72px;gap:10px}
.wl-zt{background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 2px,transparent 2px 6px);border-radius:1px;min-height:0}
.wl-zt-titel{background:linear-gradient(#2a2a2a,#2a2a2a) 0 0/88% 16px no-repeat,linear-gradient(#2a2a2a,#2a2a2a) 0 22px/60% 10px no-repeat,repeating-linear-gradient(180deg,transparent 0 40px,rgba(0,0,0,.16) 40px 42px,transparent 42px 46px)}
.wl-zeitung .wl-zanz{display:block;width:100%;height:100%;object-fit:contain;object-position:top;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);transition:transform .35s cubic-bezier(.2,.8,.2,1);position:relative;z-index:1;outline:none;cursor:zoom-in}
.wl-zeitung .wl-zanz:hover,.wl-zeitung .wl-zanz:focus-visible{transform:scale(1.7);z-index:6;box-shadow:0 22px 44px rgba(0,0,0,.45)}
.wl-zeitung figcaption{display:block;margin-top:16px}
@media (max-width:560px){.wl-zeitung-satz{grid-auto-rows:54px;gap:7px}.wl-zeitung-blatt{padding:12px}.wl-zeitung-kopf{font-size:18px}}
.wl-pj-kachel-dunkel .wl-tasche3{margin:26px auto 0;width:min(100%,380px)}
.wl-pj-kachel-dunkel .wl-tasche3-dreh img{width:100%!important;border-radius:0;background:none}
/* Stadtwerke: die Ladesäule als Drehfolge (freigestellte Bilder auf der dunklen Kachel) */
.wl-pj-kachel-dunkel .wl-lade-dreh{max-width:280px;margin:22px auto 0;aspect-ratio:337/494;background:none;box-shadow:none;border-radius:0;overflow:visible}
.wl-pj-kachel-dunkel .wl-lade-dreh img{mix-blend-mode:normal;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5))}
.wl-pj-kachel-dunkel .wl-lade-dreh .wl-weste-hinweis{color:rgba(255,255,255,.55);bottom:-22px}
.wl-lade-dreh:not(.folge-bereit)::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:wl-brau-dreh 1s linear infinite;pointer-events:none}
/* Stadtwerke: in der Bühne nur noch die Beachflag, mittig */
.wl-sw.wl-sw-eins{grid-template-columns:1fr;justify-items:center}
.wl-sw-eins .wl-sw-stueck{width:min(100%,420px)}
/* Stadtwerke: die Beachflag rechts neben dem Text, damit sie nicht über die Überschrift läuft */
.wl-sw.wl-sw-eins{justify-items:end;padding-right:6%}
@media (max-width:900px){.wl-sw.wl-sw-eins{justify-items:center;padding-right:0}}
/* Stadtwerke: Kundenkarte und Limesbad-Schild als Fotos in der Bühne */
.wl-sw .wl-sw-foto{display:block;width:100%;height:auto;margin:0 auto}
.wl-sw .wl-sw-foto-karte{max-width:380px;filter:drop-shadow(0 22px 28px rgba(0,0,0,.45))}
.wl-sw .wl-sw-foto-schild{max-width:420px;border-radius:8px;box-shadow:0 22px 44px rgba(0,0,0,.45)}
.wl-sw .wl-sw-stueck:first-child,.wl-sw .wl-sw-stueck:nth-child(2){align-self:end}
/* Stadtwerke: die Beachflag als kurzes Video (Kling), im Rahmen wie das Schild */
.wl-sw .wl-sw-video{width:min(100%,290px);margin:0 auto;border-radius:10px;overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.45);background:#e4e4e4}
.wl-sw .wl-sw-video video{display:block;width:100%;height:auto}
/* Erscheinungsbild: der Schlusspunkt ist das Zeichen für „vollständig" und immer der Akzent
gegen den Grund – auf hellem Grund rot, auf der roten Fläche in Ink (dort wäre Rot unsichtbar
und Weiß nicht vom normalen Satzzeichen zu unterscheiden). */
.wl-punkt{color:var(--red)}
.wl-panel.wl-hero h1 .wl-punkt{color:#1A1A18}
/* Oberst: Nudeletikett als eigene Kachel unter der Huehner-Buehne. Text links, Etikett rechts,
damit die volle Kachelbreite nicht leer wirkt; unter 820 px untereinander. */
.wl-on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(22px,4vw,56px);align-items:center}
.wl-on-text{margin:0}
.wl-on-etikett{margin:0}
.wl-on-etikett img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 20px 44px rgba(0,0,0,.34)}
.wl-on-etikett figcaption{margin-top:.6em}
@media (max-width:820px){.wl-on{grid-template-columns:1fr}.wl-on-etikett{max-width:300px;margin:0 auto}}
/* Rotenbauer: unter der Etikettenrolle stehen Eis, Soja-Öl und Homepage zu dritt nebeneinander.
Die Flaschen sind von Natur aus hoch – hier deshalb schmaler, sonst zieht das Öl die ganze
Zeile in die Länge. Eis und Öl sitzen mittig in der freien Fläche, damit die drei Kacheln
gleich ruhig wirken. Am Handy stehen sie untereinander und dürfen wieder groß sein. */
.wl-pj-rotenbauer .wl-pj-kacheln.wl-drei > div{display:flex;flex-direction:column}
.wl-pj-rotenbauer .wl-pj-kacheln.wl-drei .wl-oelflaschen{max-width:250px}
.wl-pj-rotenbauer .wl-pj-kacheln.wl-drei .wl-eisglaeser,
.wl-pj-rotenbauer .wl-pj-kacheln.wl-drei .wl-oelflaschen{margin-top:auto;margin-bottom:auto}
@media (max-width:860px){.wl-pj-rotenbauer .wl-pj-kacheln.wl-drei .wl-oelflaschen{max-width:420px}}
/* Stadtwerke: die Beachflag steht jetzt frei auf der Buehne - im Film ist der helle
Studiogrund gegen den Buehnenton getauscht. Deshalb hier keine Karte mehr drumherum:
kein Grund, keine runden Ecken, kein Schlagschatten (den wirft die Fahne im Film selbst). */
.wl-sw .wl-sw-video{background:none;border-radius:0;box-shadow:none;overflow:visible}
/* Stadtwerke: das Eingangsschild ist jetzt freigestellt wie die Kundenkarte - also kein
Bilderrahmen mehr, sondern ein weicher Schatten an der Form entlang. */
.wl-sw .wl-sw-foto-schild{max-width:420px;border-radius:0;box-shadow:none;filter:drop-shadow(0 22px 28px rgba(0,0,0,.45))}
/* Neues Logo (02.10.2026): Der rote Strich hinter dem Schriftzug ist durch den Punkt
ersetzt. Dadurch ist die Datei 901 statt 1400 Einheiten breit – bei gleicher CSS-Breite
wäre die Schrift also plötzlich ein Drittel größer. Die Breiten hier sind deshalb auf
64 Prozent gesetzt, damit der Schriftzug genauso groß bleibt wie vorher und sich nur
das Zeichen am Ende ändert. */
.wl-hero-logo{width:clamp(142px,17vw,270px)}
.wl-brand-img{width:clamp(129px,13vw,180px)}
.wl-loader .wl-lb .wl-lb-img{width:clamp(142px,21vw,296px)}
@media (max-width:860px){.wl-hero-logo{width:min(32vw,129px)}}
/* Die vierzig Jahre stehen jetzt so im Slogan wie auf dem Bauzaunbanner: als kleine
Plakette aus hellerem Rot, links die Marke „40 JAHRE“ mit der Null als offenem Ring,
rechts „KREATIVITÄT+ / ERFAHRUNG“. Kein Stempel, kein zweiter Kreis neben dem Punkt –
der Punkt schließt den Satz weiter wie im Logo. Alle Maße hängen an --m (Höhe der
40-Marke) und sind aus dem Banner abgemessen, damit die Verhältnisse stimmen.
Die Fläche ist etwas dunkler als auf dem gedruckten Banner: Bei dessen Aufhellung
bleibt weiße Schrift nur bei 4,1:1 lesbar, mit diesem Wert sind es 4,6:1 – am
Bildschirm ist das der Unterschied zwischen „geht so“ und „liest sich“. */
.wl-panel.wl-hero .wl-jub{box-sizing:border-box;max-width:100%;
display:inline-flex;align-items:flex-end;gap:calc(var(--m) * .44);
padding:calc(var(--m) * .56) calc(var(--m) * .78);
background:rgba(255,255,255,.1)}
.wl-jub-marke{height:var(--m);width:auto;flex:none;display:block;fill:#fff;
font-family:var(--sans);font-weight:300}
.wl-jub-txt{margin:0 0 calc(var(--m) * -.03);min-width:0;color:#fff;
font-family:var(--sans);font-weight:300;
text-transform:uppercase;letter-spacing:.015em;
font-size:calc(var(--m) * .41);line-height:1.26}
.wl-jub-txt span{display:block}
@media (max-width:520px){.wl-panel.wl-hero .wl-hero-fuss{--m:30px;margin-top:20px}}
@media (max-width:360px){.wl-panel.wl-hero .wl-hero-fuss{--m:26px}}
/* Unten links im roten Feld steht der Block aus Plakette und Knopf „Arbeitsbeispiele“,
darunter der Hinweis „scrollen“. Beide Kacheln sind gleich groß: die Plakette gibt die
Höhe vor, der Knopf zieht sich mit (align-items:stretch); die Breite machen zwei gleich
breite Rasterspalten (1fr), damit beide Kacheln wirklich dieselbe Größe haben. --m steht
hier am Block, damit beide an derselben Zahl hängen.
Warum „scrollen“ eine Zeile tiefer steht statt daneben: Bei 1280 Pixeln reicht die Breite
bis zur roten Schräge sonst nicht für zwei Kacheln.
grid-column:auto ist nötig, sobald der Block absolut sitzt – mit grid-column:1 wäre das
Rasterfeld der Bezug und der Block stünde um die Innenabstände versetzt, also nicht
bündig unter „werbung“. */
.wl-panel.wl-hero .wl-hero-fuss{--m:clamp(30px,3.25vw,47px);
position:relative;z-index:1;grid-column:1;justify-self:start;
margin:26px 0 0;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;
gap:calc(var(--m) * .27)}
.wl-fuss-kacheln{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
gap:clamp(20px,2.6vw,38px);max-width:100%}
.wl-hero-fuss .wl-scrollhint{position:static;left:auto;right:auto;bottom:auto;flex:none}
@media (min-width:861px){
.wl-panel.wl-hero .wl-hero-fuss{position:absolute;grid-column:auto;
left:clamp(24px,5vw,80px);bottom:34px;margin:0}
}
/* Zwischen 861 und 1000 Pixeln ist das rote Feld schmal und die Schräge nah – dort werden
beide Kacheln kleiner, sonst läuft der Knopf ins Weiße. */
@media (min-width:861px) and (max-width:1000px){.wl-panel.wl-hero .wl-hero-fuss{--m:26px}}
/* Der Knopf sieht aus wie die Plakette, ist aber anklickbar und führt zu den Arbeiten.
Am Handy bleibt es beim bisherigen Hinweis darunter (.wl-hero-refs), sonst stünde
dieselbe Aufforderung zweimal da. */
.wl-jub-knopf{box-sizing:border-box;display:none;flex-direction:column;justify-content:center;align-items:flex-start;
padding:calc(var(--m) * .56) calc(var(--m) * .78);
background:rgba(255,255,255,.1);color:#fff;text-decoration:none;
font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.015em;
font-size:calc(var(--m) * .41);line-height:1.26;
transition:background .25s,transform .25s}
.wl-jub-knopf span{display:block}
.wl-jub-knopf i{font-style:normal;margin-left:.3em}
.wl-jub-knopf:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.wl-jub-knopf:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (min-width:861px){.wl-jub-knopf{display:flex}}
/* Der Slogan ist so eingerückt, dass das g von „werbung“ genau über dem e von
„komplett“ steht – gemessen, nicht geschätzt: 0,58 em stimmt bei jeder Fenstergröße,
weil beide Zeilen dieselbe Schriftgröße haben. Vorher waren es 0,9 em, da stand das g
über dem zweiten t. */
.wl-panel.wl-hero h1 .wl-l2{margin-left:.58em}
/* Stadtwerke-Bühne: der große Leerraum über der Überschrift stammte von der alten,
vier Meter hohen SVG-Beachflag, die oben aus der Reihe ragte – dafür war der Text
um 205 px nach unten gerückt. Die Flagge ist längst ein Film, der Platz blieb leer
stehen. Außerdem war der Film so hoch, dass Karte und Schild erst weit darunter
anfingen (sie stehen ja alle auf einer Linie). Beides zusammen waren rund 300 px
Nichts. */
.wl-steiner-buehne-innen:has(.wl-sw) .wl-pj-buehne-kopf{padding-top:0}
.wl-sw .wl-sw-video{width:min(100%,240px)}
/* Zweiter Durchgang: Philipp sieht immer noch zu viel Blau. Deshalb über und unter
dem Text weniger Abstand (Bühnenrand 80 → 44, Abstand unter dem Text 34 → 18) und
der Film noch einmal schmaler. Der Film ist der eigentliche Grund für die Leere:
Karte, Schild und Flagge stehen auf einer Linie, also zieht das höchste Stück die
ganze Reihe auf und links daneben bleibt Blau übrig. */
.wl-steiner-buehne:has(.wl-sw){padding:clamp(24px,3vw,44px) 0}
.wl-steiner-buehne-innen:has(.wl-sw) .wl-pj-buehne-kopf{margin-bottom:18px}
.wl-sw .wl-sw-video{width:min(100%,200px)}
/* Die Beachflag darf wieder groß sein, ohne dass die Leere zurückkommt: Sie ragt nach
oben in die freie Fläche neben der Überschrift – genau dafür war früher der Platz
gedacht, nur hatte damals der Text nachgegeben statt die Fahne. Der negative Abstand
oben zieht sie hoch, ohne die Reihe aufzuziehen (die drei stehen ja auf einer Linie).
Am Handy steht alles untereinander, dort gibt es den Versatz nicht. */
.wl-sw .wl-sw-video{width:min(100%,300px)}
@media (min-width:761px){.wl-sw .wl-sw-stueck:nth-child(3){margin-top:max(-16vw,-270px)}}
/* Bogner: die Flotte in 3D. Die ganze Bühne steht in einem etwas tieferen Bogner-Rot
(#C42D1C statt #E03020, Philipp 04.10.: „bisschen dunkler“), der Film hat genau
denselben Grund – die Autos stehen also frei auf Rot, ohne Kasten. Der Film läuft
über die volle Fensterbreite (45-js-projekt.js, WAHL), damit die Autos am Fensterrand
herein- und hinausfahren; oben und unten wird nur leeres Rot abgeschnitten. */
.wl-pj-bogner .wl-steiner-buehne{background:#C42D1C}
.wl-pj-bogner .wl-steiner-buehne .wl-pj-buehne-kopf .wl-k{color:#fff;opacity:.82}
.wl-flotte3{position:relative;height:clamp(230px,31vw,580px);margin:4px 0 0;overflow:hidden;background:#C42D1C}
.wl-flotte3-film{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.wl-flotte3-name{position:absolute;left:50%;bottom:clamp(8px,1.8vw,24px);transform:translate(-50%,6px);margin:0;
font:500 clamp(11px,1vw,14px)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;
opacity:0;transition:opacity .45s,transform .45s;pointer-events:none;white-space:nowrap}
.wl-flotte3-name.an{opacity:.9;transform:translate(-50%,0)}
.wl-flotte3-quelle{margin:8px 0 0;font:400 11px/1.4 var(--mono);color:rgba(255,255,255,.72);text-align:right}
/* Auf dem Bogner-Rot braucht kleine Schrift deckendes Weiß (5,6:1) – mit 72 %
Deckkraft läge sie zu knapp an der Grenze. Der Knopf zum Anhalten sitzt unten rechts im Film. */
.wl-pj-bogner .wl-steiner-buehne .wl-pj-buehne-kopf p,.wl-pj-bogner .wl-steiner-buehne .wl-pj-buehne-kopf .wl-k{color:#fff;opacity:1}
.wl-flotte3-name.an{opacity:1}
.wl-flotte3-quelle{color:#fff}
.wl-flotte3 .wl-film-knopf{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(10px,1.8vw,22px);color:#fff;border-color:#fff;opacity:1;background:rgba(196,45,28,.6)}
.wl-flotte3 .wl-film-knopf:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:600px){.wl-flotte3 .wl-film-knopf{padding:7px 12px;font-size:12px}.wl-flotte3-name{bottom:auto;top:10px}}
/* Bogner, kompakter: weniger Rand über dem Text und unter dem Film. Der Film ist genau
so hoch, wie die Autos ihn brauchen (im ganzen Film reichen sie von Zeile 81 bis 579
von 640 – das sind 79,7 % der Höhe), oben und unten fällt nur leeres Rot weg. Am
Handy bleibt er mindestens 230 px hoch und wird seitlich beschnitten, damit die Autos
nicht winzig werden. */
.wl-pj-bogner .wl-steiner-buehne{padding:clamp(28px,3.4vw,50px) 0 clamp(8px,1.2vw,18px)}
.wl-pj-bogner .wl-steiner-buehne .wl-pj-buehne-kopf{margin-bottom:4px}
.wl-flotte3{height:auto;margin:0;container-type:inline-size}
.wl-flotte3-film{height:max(230px,31.9cqw);object-position:50% 58%}
/* Die vier Kacheln darunter im selben Rot, Schrift deckend weiß (5,6:1) */
.wl-pj-bogner .wl-pj-kachel-dunkel{background:#C42D1C}
.wl-pj-bogner .wl-pj-kachel-dunkel .wl-k,.wl-pj-bogner .wl-pj-kachel-dunkel .wl-pj-buehne-kopf p,.wl-pj-bogner .wl-pj-kachel-dunkel>p,.wl-pj-bogner .wl-pj-kachel-dunkel .wl-pj-hinweis,.wl-pj-bogner .wl-pj-kachel-dunkel .wl-pj-hinweis a{color:#fff;opacity:1}
/* Fliesen Schmidt: der Nissan als echter 3D-Drehteller (72 Ansichten aus bau/auto/flotte).
Gedreht wird mit dem Bilder-Drehen der Brummer-Weste (.wl-weste in 53-js-teppich.js);
hier nur Größe und Hintergrund – die Bilder stehen schon auf dem Bühnenblau #111F27. */
.wl-weste.wl-dreh3d{max-width:min(100%,940px);aspect-ratio:900/496;margin:18px auto 0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.wl-weste.wl-dreh3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none}
.wl-weste.wl-dreh3d .wl-weste-hinweis{color:rgba(255,255,255,.62);bottom:-4px}
.wl-weste.wl-dreh3d:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
/* Projekt-Finder, Ergebnis „Aus Ihrer Branche“: ein bis zwei echte Referenzen mit Bild,
Branche und einem Satz, verlinkt auf die Projektseite (37-js-projekt-finder.js). */
.wl-refs{display:grid;gap:14px}
.wl-ref{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;color:inherit;text-decoration:none}
.wl-ref img{display:block;width:120px;height:90px;object-fit:cover;border-radius:6px;background:var(--grey)}
.wl-ref b{display:block;font-weight:500;font-size:15.5px;letter-spacing:-.01em}
.wl-ref small{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:1px}
.wl-ref em{display:block;font-style:normal;font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:4px}
.wl-ref:hover b,.wl-ref:focus-visible b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.wl-ref{grid-template-columns:96px 1fr;gap:12px}.wl-ref img{width:96px;height:72px}}
/* Die beiden Kacheln unten im Kopfbereich klein geschrieben wie der Rest der Seite
(Philipp 05.10.: „alles klein, außer JAHRE“) – „JAHRE“ steckt in der Marke selbst. */
.wl-panel.wl-hero .wl-jub-txt,.wl-panel.wl-hero .wl-jub-knopf{text-transform:none;letter-spacing:0}
/* Rotenbauer: ohne Spule – nur die an der Stanzkontur freigestellten Etiketten laufen durch
(Philipp 05.10.: „die Rolle weg, einfach nur die Etiketten durchrollen“) */
.wl-rolle-frei .wl-rolle-band{gap:clamp(16px,2vw,26px);padding:14px 0 26px}
.wl-rolle-frei .wl-rolle-et{background:none;padding:0;border-radius:0;box-shadow:none}
.wl-rolle-frei .wl-rolle-et img{border-radius:0;aspect-ratio:629/397;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
/* Korrekturbogen 08.10.2026: Päckert’s mit den drei neuen Printanzeigen – Spalten nach dem
Seitenverhältnis (Buxheim quer, Kirchweih fast quadratisch, Gersdorf schmal), damit alle gleich hoch stehen */
.wl-anz.wl-anz-drei.wl-anz-neu{grid-template-columns:1.41fr .96fr .51fr;align-items:end}
@media (max-width:760px){.wl-anz.wl-anz-drei.wl-anz-neu{grid-template-columns:.96fr .51fr}}
/* Bogner arbeitet eckig – die Logokarten ohne runde Ecken */
.wl-bogner-logos figure{border-radius:0}
/* Päckert’s: Rundgang und Broschüre nebeneinander, darunter Homepage und Bauzaunbanner (Philipp 08.10.2026) */
/* Henninger auf Beere (09.10.2026): die Flaschennamen hell, sonst verschwinden sie im dunklen Grund */
.wl-pj-henninger .wl-flasche figcaption{color:#F6ECEF}
/* Korrekturbogen Teil 2 (09.10.2026, „Schriftart“): Kacheln, deren Überschrift ohne .wl-pj-buehne-kopf
direkt in der Kachel steht, bekommen dieselbe Schrift wie alle anderen Kachel-Überschriften */
.wl-pj-kachel-dunkel > h2{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;line-height:1.05;margin:0 0 12px;color:#fff}
.wl-pj-kachel-dunkel > .wl-k{font-size:14px;line-height:1.6;margin:0 0 12px;color:var(--pf-akzent)}
.wl-pj-kachel-dunkel > h2 + p{font-size:14px;line-height:1.6;margin:0;color:rgba(255,255,255,.72)}
/* Käfer: der Care Guide lag über der Überschrift – alte Faltblatt-Regeln der früheren Rafiye-Fassung
(Breite 420, Seitenverhältnis, gedrehte Rückseite, 200-%-Bilder) griffen auf die Käfer-Tafeln durch.
Innerhalb der Falt-Bühne wieder die eigenen Maße */
.wl-falt-buehne .wl-falt{width:360px;height:128px;aspect-ratio:auto;padding-bottom:0;cursor:default;text-align:left}
.wl-falt-buehne .wl-falt-t.wl-falt-hinten{inset:auto;top:0;left:180px;transform:none;overflow:visible;backface-visibility:visible}
.wl-falt-buehne .wl-falt-t img{width:100%!important;max-width:100%!important;height:100%;left:0;right:auto}
@media (max-width:560px){.wl-falt-buehne.wl-falt-gross .wl-falt{scale:.74}}
/* Kundenname im Infokasten der Projektseiten in derselben Schrift wie die übrigen Angaben (Korrekturmodus 16.10.2026) */
.wl-arbeit-kunde{font-family:var(--sans)!important}