/* Optionale Schriften: woff2-Dateien in den Ordner /fonts legen (siehe Hinweis). Ohne Dateien greifen moderne Systemschriften. */
@font-face{font-family:"Space Grotesk";src:local("Space Grotesk"),url(fonts/SpaceGrotesk-Variable.woff2) format("woff2"),url(fonts/SpaceGrotesk-Variable.ttf) format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:local("Inter"),url(fonts/Inter-Variable.woff2) format("woff2"),url(fonts/Inter-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--beige:#e8dfca;--beige-d:#d8ccb0;--black:#101010;--green:#39ff14;--green-text:#1d5a0b;--ink:#1f1f1b;
--head:"Space Grotesk","Segoe UI Variable Display","Bahnschrift","Helvetica Neue",Arial,sans-serif;
--body:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--beige);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.05;margin:0 0 .5em;letter-spacing:-.02em}
a{color:var(--green-text);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--black);box-shadow:0 0 0 6px var(--green)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header{background:var(--black);position:sticky;top:0;z-index:5;border-bottom:1px solid #2a2a2a}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
header img{height:48px;width:auto;display:block}
nav a{color:var(--beige);text-decoration:none;margin-left:22px;font-weight:500;font-size:.95rem}nav a:hover{color:var(--green)}
.hero{background:var(--black);color:var(--beige);padding:80px 0 88px;border-bottom:6px solid var(--green)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.8rem);font-weight:700}
.hero p{max-width:34em;font-size:1.1rem;color:#cfc6b0}.hero p strong{color:var(--beige)}
.badge{display:inline-block;background:var(--green);color:var(--black);padding:5px 14px;border-radius:99px;font:600 .85rem var(--head);margin-bottom:24px}
.btn{display:inline-block;background:var(--green);color:var(--black);border:2px solid var(--green);border-radius:99px;padding:13px 28px;font:700 1rem var(--head);text-decoration:none;cursor:pointer;margin:8px 12px 0 0;transition:box-shadow .2s}
.btn:hover{box-shadow:0 0 22px var(--green)}.btn.alt{background:transparent;border-color:var(--beige);color:var(--beige)}.btn.alt:hover{border-color:var(--green);color:var(--green);box-shadow:none}
section{padding:80px 0}section h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.lead{max-width:38em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:32px}
.box{background:#f2ebdb;border:2px solid var(--black);border-left:10px solid var(--green);border-radius:6px;padding:22px}.box h3{font-size:1.3rem}.box p{margin:0}
.dark{background:var(--black);color:var(--beige)}.dark .box{background:#1b1b19;border-color:#333;border-left-color:var(--green)}
/* Bildplatzhalter */
.ph{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/3;border:2px dashed var(--black);border-radius:6px;color:#4a4636;font:500 .9rem var(--head);padding:16px;background:repeating-linear-gradient(135deg,var(--beige-d) 0 14px,#cfc2a3 14px 28px)}
.ph.wide{aspect-ratio:16/9}.ph.tall{aspect-ratio:3/4}
.hero .ph{background:repeating-linear-gradient(135deg,#1c1c1a 0 14px,#242421 14px 28px);border-color:var(--green);color:var(--green)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}.gallery .ph{aspect-ratio:1/1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
form{background:#f2ebdb;border:2px solid var(--black);border-top:8px solid var(--green);border-radius:6px;padding:28px;margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.full{grid-column:1/-1}label{display:block;font-weight:600;margin-bottom:4px;font-size:.95rem}
input,select,textarea{width:100%;padding:11px 12px;border:2px solid #b9ad90;border-radius:6px;background:#fff;font:inherit;color:var(--ink)}
.order{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:16px}form.is-order .order{display:grid}
.hp{position:absolute;left:-9999px}.check{display:flex;gap:10px;align-items:flex-start}.check input{width:auto;margin-top:6px}.check label{font-weight:400}
.msg{padding:14px 18px;margin-top:16px;font-weight:600;border-radius:6px}.ok{background:var(--green);color:var(--black)}.err{background:#ecc9c0;border-left:6px solid #8a2a1a}
footer{background:var(--black);color:#b8b09a;padding:32px 0;border-top:6px solid var(--green)}footer a{color:var(--beige);font-weight:500}footer a:hover{color:var(--green)}
.legal{max-width:760px;padding:56px 20px}.legal h2{margin-top:1.6em;font-size:1.5rem}
@media(max-width:860px){.hero .wrap,.split{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:640px){form,.order{grid-template-columns:1fr}nav a{margin-left:14px}header img{height:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:4px}

/* Banner über volle Breite mit Logo-Overlay */
.banner{position:relative;width:100%;border-top:6px solid var(--green);border-bottom:6px solid var(--green);background:var(--black)}
.banner .ph{aspect-ratio:21/9;min-height:280px;width:100%;border:0;border-radius:0;color:var(--green);background:repeating-linear-gradient(135deg,#1c1c1a 0 14px,#242421 14px 28px)}
.banner .ph img{border-radius:0}
.banner::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(16,16,16,.55) 0,rgba(16,16,16,.25) 60%,rgba(16,16,16,.1) 100%);pointer-events:none}
.banner-logo{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:clamp(90px,22vw,230px);max-width:80%;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}