/* stilleHelden, Entwurf 4 "Schaufenster" (Relaunch 2026-11) */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/public-sans-400_700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/public-sans-400_700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zilla-slab-500-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/zilla-slab-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zilla-slab-700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/zilla-slab-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--schatten:rgba(29,26,21,.18);--schatten2:rgba(29,26,21,.35);--bg:#f6f0e4;--surface:#ece4d3;--ink:#1d1a15;--soft:#5e5649;--line:#d6ccb8;--brand:#fab001;--on-brand:#1d1a15;--sprosse:#1d1a15;--glas:#fffaf0;--hl:.3em;--hlc:var(--ink);--ease:cubic-bezier(.23,1,.32,1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#16130e;--surface:#211c15;--ink:#f3ecdf;--soft:#b9ad99;--line:#3a3328;--brand:#fab001;--on-brand:#1d1a15;--sprosse:#fab001;--glas:#0f0d0a;--hl:3px;--hlc:var(--brand)}}
:root[data-theme="dark"]{--bg:#16130e;--surface:#211c15;--ink:#f3ecdf;--soft:#b9ad99;--line:#3a3328;--brand:#fab001;--on-brand:#1d1a15;--sprosse:#fab001;--glas:#0f0d0a;--hl:3px;--hlc:var(--brand)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 'Public Sans',system-ui,sans-serif;overflow-wrap:break-word}
@media (max-width:640px){body{hyphens:auto}}
h1,h2,h3,.marke,.nav a,.knopf,.mail{hyphens:manual}
::selection{background:var(--brand);color:var(--on-brand)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3,p,ul,ol,blockquote,figure{margin:0;padding:0}
ul,ol{list-style:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--bg);padding:10px 16px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.slab{font-family:'Zilla Slab',Rockwell,serif}

.kopf{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:3px solid var(--sprosse)}
.kopf .wrap{max-width:1440px;height:68px;display:flex;align-items:center;gap:24px}
.marke{font:700 24px/1 'Zilla Slab',serif;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center}
.marke b{background:var(--brand);color:var(--on-brand);padding:4px 6px 5px;margin-left:2px;font-weight:700}
.nav{margin-left:auto}
.nav{display:flex;gap:20px}
.nav a{font:600 15px/1 'Public Sans',sans-serif;text-decoration:none;padding:12px 0;display:inline-block;white-space:nowrap;background:linear-gradient(var(--brand),var(--brand)) 0 calc(100% - 4px)/0 3px no-repeat;transition:background-size .25s var(--ease)}
@media (hover:hover){.nav a:hover{background-size:100% 3px}}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font:700 16px/1 'Public Sans',sans-serif;text-decoration:none;border-radius:6px;background:var(--brand);color:var(--on-brand);border:2px solid var(--brand);box-shadow:0 2px 0 var(--schatten);transition:transform .16s var(--ease),box-shadow .16s,background-color .2s}
.knopf:active{transform:translateY(1px) scale(.98);box-shadow:none}
@media (hover:hover){.knopf:hover{transform:translateY(-1px);box-shadow:0 6px 14px -6px var(--schatten2)}}
.knopf.leer{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.kopf .knopf{min-height:42px;white-space:nowrap}
.iconbtn{width:44px;height:44px;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:6px;background:transparent;color:var(--ink);cursor:pointer;transition:transform .16s var(--ease)}
.iconbtn:active{transform:scale(.95)}
.iconbtn svg{width:20px;height:20px}
#themebtn .i-light,#themebtn .i-dark{display:none}
#themebtn[data-mode="light"] .i-auto,#themebtn[data-mode="dark"] .i-auto{display:none}
#themebtn[data-mode="light"] .i-light,#themebtn[data-mode="dark"] .i-dark{display:block}
.menubtn{display:none}
@media (max-width:1240px){
  .menubtn{display:inline-grid}
  .nav{position:fixed;inset:68px 0 0 0;background:var(--bg);padding:16px 20px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .nav.open{opacity:1;visibility:visible}
  .nav{flex-direction:column;gap:0}
  .nav a{font:700 26px/1.2 'Zilla Slab',serif;padding:14px 0;display:block;border-bottom:1px solid var(--line);background:none}
  .kopf .wrap{gap:10px}
  .nav+.knopf{margin-left:auto}
}
@media (max-width:560px){.kopf .knopf{display:none}.menubtn{margin-left:auto}}

/* Hero mit Fenster */
.hero{min-height:calc(100svh - 68px);display:flex;align-items:center;padding:48px 0}
.hero .wrap{width:100%;display:grid;grid-template-columns:5fr 7fr;gap:40px 56px;align-items:center}
.hero h1{grid-column:1/-1}
.hero h1{font:700 clamp(40px,5.8vw,84px)/1 'Zilla Slab',serif;letter-spacing:-.015em;text-wrap:balance;max-width:15em}
.hero h1 em{font-style:normal;color:var(--hlc);background:linear-gradient(var(--brand),var(--brand)) 0 100%/100% var(--hl) no-repeat}
.hero p{margin-top:0;font-size:clamp(17px,1.5vw,20px);max-width:28em;color:var(--soft)}
.hero .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.fenster{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:var(--sprosse);border-radius:4px}
.fenster a{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--glas)}
.fenster img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}
@media (hover:hover){.fenster a:hover img{transform:scale(1.03)}}
@keyframes rollo{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes auftritt{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .fenster{animation:rollo 1.1s cubic-bezier(.77,0,.175,1) .15s both}
.hero .wrap>div,.hero h1{animation:auftritt .8s var(--ease) both}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px}}

main>section{padding:112px 0}
@media (max-width:640px){main>section{padding:72px 0}}
h2{font:700 clamp(34px,4.4vw,60px)/1.02 'Zilla Slab',serif;letter-spacing:-.01em;text-wrap:balance}
.lead{font-size:clamp(19px,1.8vw,23px);line-height:1.55}

.intro{background:var(--surface)}
.intro .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.intro h2{font-size:clamp(36px,5vw,68px)}
.intro p+p{margin-top:18px;color:var(--soft)}
@media (max-width:900px){.intro .wrap{grid-template-columns:1fr;gap:28px}}

.auslage{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:10px;background:var(--sprosse);border-radius:4px;margin-top:48px}
.auslage a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--glas);text-decoration:none}
.auslage img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.auslage span{position:absolute;left:0;bottom:0;background:var(--brand);color:var(--on-brand);font:700 15px/1 'Public Sans',sans-serif;padding:9px 11px}
.auslage span small{font-weight:500;margin-left:6px}
@media (hover:hover){.auslage a:hover img{transform:scale(1.03)}}
@media (max-width:900px){.auslage{grid-template-columns:repeat(2,1fr)}}
.projekte .kopfzeile{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:end}
.projekte .kopfzeile p{color:var(--soft)}
.namen{margin-top:48px;font:700 clamp(20px,2.4vw,30px)/1.45 'Zilla Slab',serif;color:var(--soft)}
.namen b{color:var(--ink)}
@media (max-width:760px){.projekte .kopfzeile{grid-template-columns:1fr;gap:16px}}

.schilder{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.schilder li{background:var(--surface);border-radius:6px;padding:32px 30px 36px;border-top:10px solid var(--brand)}
.schilder h3{font:700 30px/1.05 'Zilla Slab',serif;margin-bottom:14px}
.schilder p{color:var(--soft);font-size:16px}
@media (max-width:960px){.schilder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.schilder{grid-template-columns:1fr}}
.leistungen .wrap>.lead{margin-top:20px;max-width:38em}

.schritte ol{margin-top:48px;border-top:3px solid var(--sprosse)}
.schritte li{display:grid;grid-template-columns:120px 4fr 7fr;gap:32px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line)}
.schritte .n{font:700 72px/.8 'Zilla Slab',serif;color:var(--brand);-webkit-text-stroke:1.5px var(--ink)}
.schritte h3{font:700 30px/1.1 'Zilla Slab',serif}
.schritte p{color:var(--soft)}
@media (max-width:760px){.schritte li{grid-template-columns:64px 1fr;gap:8px 18px}.schritte .n{font-size:52px;grid-row:1/3}}

.preise{background:var(--brand);color:var(--on-brand)}
.preise .wrap{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end}
.preise h2{font-size:clamp(40px,6.4vw,92px);line-height:.95}
.preise .motto{margin-top:28px;font:700 20px/1.4 'Zilla Slab',serif}
.preise .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.preise .knopf{background:var(--on-brand);border-color:var(--on-brand);color:var(--brand)}
.preise .knopf.leer{background:transparent;color:var(--on-brand);border-color:var(--on-brand)}
@media (max-width:900px){.preise .wrap{grid-template-columns:1fr;gap:28px}}

.team .wrap{display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center}
.team .rahmen{padding:10px;background:var(--sprosse);border-radius:4px}
.team .rahmen div{aspect-ratio:4/3;overflow:hidden;background:var(--brand)}
.team .rahmen img{width:100%;height:100%;object-fit:cover}
.team p{margin-top:20px}
.team p+p{color:var(--soft)}
@media (max-width:900px){.team .wrap{grid-template-columns:1fr;gap:32px}}

.stimmen{background:var(--surface)}
.zitate{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.zitate li{background:var(--bg);border-radius:6px;padding:34px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.zitate blockquote{font:700 clamp(22px,2.2vw,28px)/1.25 'Zilla Slab',serif}
.zitate .wer{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.zitate .wer img{width:48px;height:48px;border-radius:50%;border:3px solid var(--brand)}
.zitate .wer span{display:block;font-weight:400;color:var(--soft)}
@media (max-width:760px){.zitate{grid-template-columns:1fr}.zitate li{padding:28px 22px}}

.kontakt .tafel{padding:10px;background:var(--sprosse);border-radius:4px}
.kontakt .tafel>div{background:var(--glas);padding:clamp(32px,6vw,80px);text-align:center}
.kontakt p{margin:16px auto 0;color:var(--soft);max-width:30em}
.kontakt .mail{display:inline-block;margin-top:24px;font:700 clamp(24px,4.6vw,60px)/1.1 'Zilla Slab',serif;text-decoration:none;background:linear-gradient(var(--brand),var(--brand)) 0 100%/100% var(--hl) no-repeat;transition:color .2s}
@media (hover:hover){.kontakt .mail:hover{color:var(--soft)}}
.kontakt .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
@media (max-width:560px){.kontakt .tafel>div{padding:32px 16px}.kontakt .mail{font-size:22px}}

.fuss{border-top:3px solid var(--sprosse);padding:36px 0}
.fuss .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
.fuss .fusslinks{display:flex;gap:4px 22px;flex-wrap:wrap}
.fuss a{text-decoration:none;padding:14px 0;display:inline-block;font-weight:600;font-size:15px}
@media (hover:hover){.fuss a:hover{text-decoration:underline}}
.fuss small{width:100%;color:var(--soft);font-size:14px}

/* Unterseiten */
.seitenkopf{padding:88px 0 72px;border-bottom:1px solid var(--line)}
.seitenkopf .wrap{display:grid;grid-template-columns:7fr 5fr;gap:40px 64px;align-items:center}
.seitenkopf h1{font:700 clamp(44px,7vw,104px)/.95 'Zilla Slab',serif;letter-spacing:-.015em;animation:auftritt .8s var(--ease) both}
.seitenkopf h1 em{font-style:normal;color:var(--hlc);background:linear-gradient(var(--brand),var(--brand)) 0 100%/100% var(--hl) no-repeat}
.seitenkopf .lead{margin-top:22px;max-width:30em;color:var(--soft)}
.seitenkopf .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.seitenkopf .rahmen{padding:10px;background:var(--sprosse);border-radius:4px;animation:rollo 1.1s cubic-bezier(.77,0,.175,1) .15s both}
.seitenkopf .rahmen div{aspect-ratio:1;overflow:hidden;background:var(--glas)}
.seitenkopf .rahmen img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.seitenkopf .wrap{grid-template-columns:1fr}.seitenkopf .rahmen{max-width:420px}}
@media (max-width:640px){.seitenkopf{padding:56px 0 48px}}
.liste{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:40px;border-top:3px solid var(--sprosse)}
.liste li{font:700 clamp(20px,2vw,26px)/1.25 'Zilla Slab',serif;padding:18px 0;border-bottom:1px solid var(--line)}
@media (max-width:900px){.liste{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.liste{grid-template-columns:1fr}}
.anzahl{color:var(--soft);font:600 16px/1 'Public Sans',sans-serif;margin-top:14px}
.weitere .auslage{margin-top:40px}
.weitere .auslage{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.weitere .auslage{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.weitere .auslage{grid-template-columns:repeat(2,1fr)}}
.anfrage{background:var(--brand);color:var(--on-brand)}
.anfrage .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap}
.anfrage h2{font-size:clamp(30px,4vw,54px);max-width:14em}
.anfrage .knopf{background:var(--on-brand);border-color:var(--on-brand);color:var(--brand)}

/* Rechtstexte */
.recht{padding:72px 0 112px}
.recht .wrap{max-width:860px}
.recht h1{font:700 clamp(40px,6vw,76px)/1 'Zilla Slab',serif;letter-spacing:-.01em;margin-bottom:40px}
.recht h2{font:700 clamp(24px,2.6vw,32px)/1.15 'Zilla Slab',serif;margin:48px 0 14px;padding-top:20px;border-top:3px solid var(--sprosse)}
.recht p,.recht ul{margin-top:14px}
.recht p,.recht li{max-width:46em}
.recht ul{list-style:disc;padding-left:1.4em}
.recht b{font-weight:700}
.recht a{overflow-wrap:anywhere}
.recht .daten{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin-top:14px}
.recht .daten dt{color:var(--soft)}
.recht .daten dd{margin:0}
.recht .weiter li{margin-top:6px}
@media (max-width:640px){.recht{padding:48px 0 72px}}

/* Platzhalter fuer Server-Funktionen (Rahmen, den die Funktion spaeter fuellt) */
.funktion{padding:0 0 112px}
.funktion .platz{max-width:860px;min-height:420px;padding:10px;background:var(--sprosse);border-radius:4px}
.funktion .platz>div{min-height:400px;background:var(--glas);padding:clamp(24px,5vw,56px)}

/* Sitemap */
.karte{padding:72px 0 112px}
.karte h1{font:700 clamp(40px,6vw,76px)/1 'Zilla Slab',serif;margin-bottom:40px}
.karte .spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.karte h2{font:700 26px/1.1 'Zilla Slab',serif;padding-bottom:12px;border-bottom:3px solid var(--sprosse)}
.karte ul{margin-top:8px}
.karte a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
@media (hover:hover){.karte a:hover{text-decoration:underline}}
@media (max-width:900px){.karte .spalten{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.karte .spalten{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}