/* neonstack.co – Stil „Dschungel" (Manuel, 01.10.2026): Aufbau von Entwurf B „Salbei" (weiche Karten, viel Luft), Bilder aus dem
   Bananenhain mit dezenter Technik, Logo = dieselbe Banane in ruhigen Farben. Kein Neon. Inhalt ist nie dauerhaft unsichtbar (stil.js). */
:root{--bg:#e8eee4;--karte:#f6f8f3;--ink:#1f2e26;--mut:#5f7266;--acc:#5f8570;--gold:#c9a24a;--kupfer:#b98254}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-weight:400;line-height:1.75;-webkit-font-smoothing:antialiased;padding:clamp(10px,1.6vw,22px)}
a{color:inherit}img{display:block;max-width:100%}
::selection{background:var(--acc);color:#fff}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

header{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(14px,2vw,28px);font-size:13px;letter-spacing:.18em;text-transform:uppercase}
header .marke{display:flex;align-items:center;gap:.9em;text-decoration:none;font-weight:500;letter-spacing:.3em}
header .marke img{width:36px;height:36px;border-radius:9px}
header .pille{text-decoration:none;padding:.65em 1.3em;border-radius:99px;background:var(--karte);transition:background .3s,color .3s}
header .pille:hover{background:var(--ink);color:#fff}

.hero{position:relative;border-radius:34px;overflow:hidden;min-height:80svh;display:grid;align-items:center;margin-bottom:clamp(10px,1.6vw,22px);isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(236,242,232,.82) 0%,rgba(236,242,232,.38) 36%,transparent 66%)}
.hero .in{padding:clamp(28px,6vw,90px)}
h1{font-family:Archivo,Inter,sans-serif;font-weight:100;font-size:clamp(46px,9vw,150px);line-height:.95;letter-spacing:.02em;color:var(--ink)}
.hero .lead{margin-top:.9em;font-family:Archivo,Inter,sans-serif;font-weight:200;font-size:clamp(22px,2.6vw,40px);line-height:1.2;color:var(--ink)}

.raster{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.6vw,22px)}
.k{background:var(--karte);border-radius:30px;padding:clamp(24px,3.4vw,52px)}
.k.s6{grid-column:span 6}.k.s4{grid-column:span 4}.k.s3{grid-column:span 3}.k.s2{grid-column:span 2}
.k.bildk{padding:0;overflow:hidden;min-height:340px;position:relative}
.k.bildk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.k.bildk:hover img{transform:scale(1.03)}
.k.gruen{background:var(--acc);color:#fff}.k.gruen p,.k.gruen .klein{color:#eef5ef}
.klein{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:500;display:block;margin-bottom:1.2em}
h2{font-family:Archivo,Inter,sans-serif;font-weight:200;font-size:clamp(30px,3.8vw,54px);line-height:1.1;margin-bottom:.6em}
p{margin-bottom:1.1em;font-size:clamp(15px,1.15vw,17px);color:#35473d;max-width:62ch}
.num{font-family:Archivo,sans-serif;font-weight:100;font-size:clamp(44px,5vw,72px);line-height:1;color:var(--acc);display:block;margin-bottom:.3em}
.wort{display:block;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);font-weight:500;margin-bottom:.9em}
.k.s2 .t{font-size:clamp(16px,1.35vw,20px);line-height:1.5;display:block}
.kontakt{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,60px);align-items:center}
.banane{width:clamp(170px,22vw,260px);height:auto;justify-self:end;border-radius:22px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.banane:hover{transform:rotate(-2deg) scale(1.03)}
.knopf{display:inline-block;padding:1em 2em;border-radius:99px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;letter-spacing:.14em;transition:background .3s}
.knopf:hover{background:var(--acc)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;padding:26px clamp(14px,2vw,28px) 16px;font-size:13px;color:var(--mut)}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

.wer{list-style:none;padding:0;margin:0 0 1.2em;display:flex;flex-wrap:wrap;gap:.5em}
.wer li{padding:.45em 1em;border:1px solid #cfd9cb;border-radius:99px;font-size:14px;color:#35473d;background:#fff}
.gaerten{display:grid;grid-template-columns:1fr;max-width:520px;gap:clamp(16px,3vw,40px);margin-top:.4em}
.gaerten div{border-top:1px solid rgba(255,255,255,.35);padding-top:1em}
.gaerten b{display:block;font-weight:500;font-size:clamp(20px,1.8vw,26px);margin-bottom:.15em}
.gaerten em{display:block;font-style:normal;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#d6e2d4;margin-bottom:.6em}
.gaerten span{color:#eef5ef;font-size:clamp(15px,1.1vw,17px);line-height:1.6}
/* Rechtstexte */
.recht>*{max-width:780px}
.recht h1{font-size:clamp(32px,5vw,60px);margin-bottom:1em}
.recht h2{font-size:clamp(24px,3vw,38px);margin:2.2em 0 .6em}
.recht h3{font-family:Inter,sans-serif;font-weight:500;font-size:clamp(17px,1.5vw,20px);margin:1.9em 0 .5em}
.recht h4{font-family:Inter,sans-serif;font-weight:500;font-size:15px;margin:1.5em 0 .3em;color:var(--acc);letter-spacing:.04em}
.recht p,.recht li{max-width:none;font-size:clamp(15px,1.1vw,17px)}
.recht ul{margin:0 0 1.15em 1.2em}.recht li{margin-bottom:.35em}
.recht hr{border:0;border-top:1px solid #cfd9cb;margin:2.6em 0}
.recht a{color:var(--acc);text-underline-offset:3px}
.recht strong{font-weight:500}
/* Fehlerseite */
.leer{min-height:60svh;display:grid;place-content:center;text-align:center;gap:1rem}
.leer h1{color:var(--acc)}

/* Einblenden: nur vorab unsichtbar, wenn JavaScript läuft; stil.js blendet beim Scrollen ein, spätestens nach 2,5 s alles */
.js .ein{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .ein.sicht{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .ein{opacity:1!important;transform:none!important;transition:none!important}.k.bildk img,.banane{transition:none}}
@media(max-width:860px){.k.s4,.k.s3,.k.s2{grid-column:span 6}.kontakt,.gaerten{grid-template-columns:1fr}.banane{justify-self:start}.hero{min-height:72svh;border-radius:26px}
 .hero{align-items:end;min-height:82svh}.hero h1{font-size:11vw}.hero>img{object-position:62% 50%}.hero::after{background:linear-gradient(0deg,rgba(236,242,232,.94) 0%,rgba(236,242,232,.78) 30%,rgba(236,242,232,0) 62%)}}