/* ------------------------------------------------------------------
   Gartenanlagen Dettinger
   Type:  IBM Plex Serif / Sans / Mono (SIL OFL) + Cinzel für die Wortmarke
   Icons: Lucide (ISC), als SVG-Sprite eingebettet
   ------------------------------------------------------------------ */
:root{
    --slate:#2F3E4A; --slate-deep:#212D36;
    --paper:#DEDDD8; --paper-2:#F4F3F0; --sand:#C9C3B4;
    --line:#BFBEB8; --line-dark:rgba(244,243,240,.18);
    --ink:#1B242B; --ink-2:#4C5860;
    --moss:#415B33; --moss-light:#91BB7C;
    --serif:"IBM Plex Serif",Georgia,serif;
    --sans:"IBM Plex Sans",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
    --cinzel:"Cinzel",Georgia,serif;
    --gut:clamp(1.15rem,4.5vw,3.5rem);
    --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
svg{display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.eyebrow{font:500 .72rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--moss);margin:0}
.h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--slate-deep);margin:.9rem 0 .25rem}
.h2sub{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.35rem);font-weight:500;color:var(--moss);margin:0 0 1.2rem}
.sect{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.tone-2{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tone-dark{background:var(--slate);color:var(--paper-2)}
.tone-dark .eyebrow{color:var(--moss-light)}
.tone-dark .h2{color:var(--paper-2)}
.tone-dark .h2sub{color:var(--moss-light)}
.tone-dark p{color:rgba(244,243,240,.75)}

/* Wortmarke */
.mark{text-align:center;line-height:1}
.mark .n{font-family:var(--cinzel);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.mark .s{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:.35em;
    font:500 .58rem/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--ink-2)}
.mark .s::before,.mark .s::after{content:"";height:1px;background:var(--line);flex:1;max-width:2.6em}

/* 01 Kopf: eine transparente Nav-Leiste über dem Hero */
header{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent;
    transition:background .3s ease,backdrop-filter .3s ease}
header.nav--scrolled{background:rgba(30,30,30,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:.9rem;padding-bottom:.9rem}
.head .mark .n{font-size:1.4rem;color:var(--paper-2)}
.head .mark .s{color:rgba(244,243,240,.75)}
.head .mark .s::before,.head .mark .s::after{background:rgba(244,243,240,.35)}
.head-contact{display:flex;align-items:center;gap:1.1rem;font:400 .78rem/1 var(--mono);color:rgba(244,243,240,.85)}
.head-contact a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:inherit;white-space:nowrap}
.head-contact a:hover{color:#fff}
.head-contact .icon{width:14px;height:14px}
.head-right{display:flex;align-items:center;gap:1.4rem}
@media(max-width:820px){.head-contact{display:none}}
header .btn{background:rgba(244,243,240,.12);color:var(--paper-2);border-color:rgba(244,243,240,.5);backdrop-filter:blur(3px)}
header .btn:hover{background:var(--paper-2);color:var(--slate-deep)}
nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;align-items:center}
nav a{text-decoration:none;font:500 .95rem/1 var(--mono);color:var(--paper-2);
    padding:.4rem 0;border-bottom:2px solid transparent;display:inline-block}
nav a:hover{border-bottom-color:var(--moss-light)}
.has-sub{position:relative}
.has-sub > ul{position:absolute;left:-1rem;top:100%;display:none;flex-direction:column;gap:0;
    background:var(--paper-2);border:1px solid var(--line);padding:.5rem 0;min-width:16rem;z-index:5}
.has-sub:hover > ul,.has-sub:focus-within > ul{display:flex}
.has-sub > ul a{display:block;padding:.5rem 1rem;border:0;text-transform:none;letter-spacing:.02em;font-family:var(--sans);font-size:.9rem;color:var(--slate)}
.has-sub > ul a:hover{background:var(--paper);color:var(--moss)}
@media(max-width:980px){nav{display:none}}
section[id]{scroll-margin-top:5.5rem}

/* 02 Bühne */
.stage{position:relative;background:var(--slate-deep);color:var(--paper-2);overflow:hidden;min-height:100svh}
.stage-img{position:absolute;inset:0;overflow:hidden}
.stage-img::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(0,0,0,.4) 0,transparent 190px),
        linear-gradient(100deg,rgba(20,28,34,.9) 0%,rgba(20,28,34,.62) 45%,rgba(20,28,34,.28) 78%)}
.stage-img img{width:100%;height:100%;object-fit:cover;display:block}
.stage-tag{position:absolute;right:1rem;bottom:1rem;z-index:3;
    font:500 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,240,.5);
    border:1px solid rgba(244,243,240,.25);padding:.4rem .6rem}
.stage .wrap{position:relative;z-index:2;min-height:100%;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(3.5rem,9vw,6.5rem);padding-bottom:clamp(3rem,7vw,5.5rem);transform:translateY(1cm)}
.stage h1{font-family:var(--cinzel);font-weight:600;letter-spacing:.01em;
    font-size:clamp(2.2rem,5.8vw,4rem);max-width:16ch;margin:1rem 0 0;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.stage .sub{font-family:var(--serif);font-size:clamp(1.25rem,2.9vw,1.8rem);color:var(--moss-light);margin:1rem 0 0;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.stage .eyebrow{color:var(--moss-light);font-size:.8rem;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.stage .actions{margin-top:2.2rem}
.stage .actions .btn{box-shadow:0 6px 20px rgba(20,28,34,.35)}
.hero-note{font:400 .95rem/1.5 var(--sans);color:rgba(244,243,240,.85);margin:.9rem 0 0}
.hero-note .icon{width:13px;height:13px}
.stage .hero-note{text-shadow:0 1px 6px rgba(0,0,0,.55)}
.scroll-cue{position:absolute;left:50%;bottom:1.6rem;z-index:3;transform:translateX(-50%);
    display:grid;place-items:center;width:2.2rem;height:2.2rem;
    border:1px solid rgba(244,243,240,.4);border-radius:50%;color:var(--paper-2);
    animation:scroll-cue-bounce 1.8s ease-in-out infinite}
.scroll-cue .icon{width:16px;height:16px;transform:rotate(90deg)}
.scroll-cue:hover{border-color:var(--paper-2)}
@keyframes scroll-cue-bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

.actions{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
    font:500 .82rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
    padding:.95rem 1.4rem;border:1px solid var(--slate);background:var(--slate);color:var(--paper-2);
    transition:background .18s,color .18s,border-color .18s}
.btn .icon{width:16px;height:16px}
.btn:hover{background:var(--slate-deep);border-color:var(--slate-deep)}
.btn.ghost{background:transparent;color:var(--slate)}
.btn.ghost:hover{background:var(--slate);color:var(--paper-2)}
.stage .btn,.tone-dark .btn{background:var(--paper-2);color:var(--slate-deep);border-color:var(--paper-2)}
.stage .btn:hover,.tone-dark .btn:hover{background:#fff;border-color:#fff}
.stage .btn.ghost,.tone-dark .btn.ghost{background:rgba(20,28,34,.45);color:var(--paper-2);border-color:rgba(244,243,240,.6);backdrop-filter:blur(3px)}
.stage .btn.ghost:hover,.tone-dark .btn.ghost:hover{background:var(--paper-2);color:var(--slate-deep)}
.link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
    font:500 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--moss);
    border-bottom:1px solid currentColor;padding-bottom:.3rem}
.link .icon{width:15px;height:15px}
.link:hover{color:var(--slate-deep)}
.tone-dark .link{color:var(--moss-light)}
.tone-dark .link:hover{color:var(--paper-2)}

/* Platzhalter */
.ph{position:relative;background:var(--sand);border:1px solid var(--line);
    background-image:linear-gradient(135deg,rgba(47,62,74,.07) 25%,transparent 25%,transparent 50%,rgba(47,62,74,.07) 50%,rgba(47,62,74,.07) 75%,transparent 75%);
    background-size:14px 14px;display:grid;place-items:center;color:var(--slate)}
.ph span{font:500 .66rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;
    background:var(--paper-2);border:1px solid var(--line);padding:.45rem .7rem}

/* 03 Intro */
.intro .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.intro .wrap{grid-template-columns:1fr}}
.intro p:not(.eyebrow):not(.h2sub){color:var(--ink-2);margin:0 0 1rem;max-width:54ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.duo .ph{display:block;width:100%;height:100%;object-fit:cover}
.duo .ph:nth-child(1){aspect-ratio:3/4;grid-row:span 2}
.duo .ph:nth-child(2),.duo .ph:nth-child(3){aspect-ratio:4/3}

/* 04 Themenkacheln */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
@media(max-width:900px){.themes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.themes{grid-template-columns:1fr}}
.theme{background:var(--paper);border-radius:12px;text-decoration:none;color:inherit;
    padding:clamp(2.4rem,4.3vw,3.6rem) 1.5rem;min-height:clamp(260px,28vw,320px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    transition:transform .35s ease,box-shadow .35s ease,background-color .35s ease}
.theme:hover,.theme:focus-visible{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.12);background-color:var(--sand)}
.theme .ring{width:66px;height:66px;border:1px solid var(--slate);border-radius:50%;
    display:grid;place-items:center;margin-bottom:1.6rem;transition:background-color .35s ease,border-color .35s ease,transform .35s ease}
.theme:hover .ring{background-color:var(--moss);border-color:var(--moss);transform:scale(1.08)}
.theme .ring .icon{width:30px;height:30px;color:var(--slate);stroke-width:1.15;transition:color .35s ease}
.theme:hover .ring .icon{color:var(--paper-2)}
.theme h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.3vw,1.7rem);
    color:var(--slate-deep);letter-spacing:0}
.theme p{margin:.85rem 0 0;font-size:.85rem;line-height:1.6;color:var(--moss);max-width:26ch}

/* 06 Vorteile */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:860px){.perks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.perks{grid-template-columns:1fr}}
.perk{text-align:center;padding:1.6rem 1rem;border:1px solid var(--line);background:var(--paper-2)}
.perk .icon{width:34px;height:34px;margin:0 auto .9rem;color:var(--moss);stroke-width:1.3}
.perk b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--slate-deep);margin-bottom:.35rem}
.perk small{font-size:.85rem;color:var(--ink-2);line-height:1.5;display:block}

/* 08 Projekte */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
@media(max-width:900px){.projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.projects{grid-template-columns:1fr}}
.project{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);display:block;text-decoration:none}
.project .ph{position:absolute;inset:0;border:0}
.project .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem;
    background:linear-gradient(to top,rgba(33,45,54,.92),rgba(33,45,54,0));color:var(--paper-2)}
.project .cap b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600}
.project .cap small{font-size:.8rem;color:rgba(244,243,240,.72)}

/* 13 Kontakt */
.contact .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.contact .wrap{grid-template-columns:1fr}}
.contact .btn{transition:background .18s,color .18s,border-color .18s,transform .2s ease}
.contact .btn:hover{transform:translateY(-2px)}
.vcard-card{background:var(--slate-deep);border-radius:10px;overflow:hidden}
.vcard{list-style:none;margin:0;padding:0}
.vcard li{display:flex;gap:1rem;padding:.95rem 1.5rem;border-bottom:1px solid var(--line-dark);align-items:flex-start;
    transition:background-color .2s ease}
.vcard li:last-child{border-bottom:0}
.vcard li:hover{background-color:rgba(255,255,255,.05)}
.vcard .icon{width:19px;height:19px;color:var(--moss-light);flex:none;margin-top:.3rem}
.vcard b{display:block;font:400 .68rem/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(244,243,240,.5)}
.vcard a{color:var(--paper-2);text-decoration:none;border-bottom:1px solid rgba(169,188,150,.5);transition:border-color .2s ease}
.vcard li:hover a{border-bottom-color:var(--moss-light)}

.todo{background:rgba(92,111,76,.13);border-bottom:1px dashed var(--moss);padding:0 .2rem}

/* 15 Fuß */
footer{background:rgb(30,30,30);color:rgba(222,221,216,.6);padding-top:3rem;padding-bottom:2rem}
.foot{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;
    border-bottom:1px solid var(--line-dark)}
@media(max-width:820px){.foot{grid-template-columns:1fr;gap:2rem;text-align:center}}
footer .mark .n{font-size:1.5rem;color:var(--paper-2)}
footer .mark .s{color:rgba(222,221,216,.5)}
footer .mark .s::before,footer .mark .s::after{background:rgba(222,221,216,.25)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:.3rem 0;font-size:.92rem}
.foot a{color:rgba(222,221,216,.75);text-decoration:none}
.foot a:hover{color:#fff}
.foot h4{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--moss-light);margin:0 0 .9rem}
.foot address{font-style:normal;font-size:.92rem;line-height:1.8}
.foot-end{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.5rem;
    font:400 .72rem/1.7 var(--mono);color:rgba(222,221,216,.45)}
.foot-end a{color:inherit}