@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument";src:url(fonts/instrument-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument";src:url(fonts/instrument-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --white:#FFFFFF;
  --mist:#F2F5EF;      /* zartes Blattgrün-Grau */
  --ink:#1B2420;       /* Konturfarbe aus dem Logo, leicht grün */
  --muted:#56625B;
  --line:#DCE3D8;
  --pumpkin:#EE7A12;   /* Kürbis */
  --pumpkin-ink:#B85600;
  --gold:#F6C324;      /* Krone */
  --leaf:#4E8A25;      /* Ranken */
  --dev:#A87200;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font:400 1.0625rem/1.6 "Instrument",system-ui,sans-serif}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--pumpkin);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
h1,h2,h3{font-family:"Bricolage",system-ui,sans-serif;letter-spacing:-.025em;margin:0}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:10}

/* Kopf */
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding-block:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.3rem/1 "Bricolage";letter-spacing:-.02em}
.brand img{width:44px;height:44px}
.brand b{color:var(--pumpkin);font-weight:800}
.nav{display:flex;gap:6px}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;padding:8px 14px;border-radius:999px;color:var(--muted)}
.nav a:hover{color:var(--ink);background:var(--mist)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--mist)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;border-radius:999px;padding:14px 24px;border:2px solid var(--ink);transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:#000}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--mist)}
.btn.orange{background:var(--pumpkin);border-color:var(--pumpkin);color:#1B1206}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ===== Startseite: Hero ===== */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 600px at 78% 45%,#FFF1DC 0%,rgba(255,241,220,0) 60%),
  radial-gradient(700px 500px at 10% 100%,#EEF6E6 0%,rgba(238,246,230,0) 70%),var(--white)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:32px;min-height:min(86vh,820px);padding-block:24px 72px}
.hero h1{font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:.94;font-weight:800;letter-spacing:-.045em;font-variation-settings:"opsz" 96}
.hero h1 .line{display:block}
.hero .lead{font-size:1.2rem;color:var(--muted);max-width:40ch;margin:28px 0 36px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}

.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:end;perspective:900px}
.burst{position:absolute;inset:-18%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(246,195,36,.34) 0deg 9deg,rgba(246,195,36,0) 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%)}
.ring{position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(238,122,18,.35)}
.mascot{position:absolute;inset:4% 6% 0 6%;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .2s ease-out}
.mascot img{width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(27,36,32,.18))}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.92rem;box-shadow:4px 4px 0 var(--ink);white-space:nowrap}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--leaf);display:inline-block}
.chip.c1{top:12%;left:-4%}
.chip.c2{top:40%;right:-8%}
.chip.c3{bottom:-1%;left:4%}

@media (prefers-reduced-motion:no-preference){
  .burst{animation:spin 80s linear infinite, fadein 1.2s ease both}
  .mascot img{animation:pop .9s cubic-bezier(.2,1.4,.4,1) .1s both}
  .chip{animation:chip .6s cubic-bezier(.2,1.3,.4,1) both}
  .chip.c1{animation-delay:.7s}.chip.c2{animation-delay:.85s}.chip.c3{animation-delay:1s}
  .hero h1 .line{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .hero h1 .line:nth-child(2){animation-delay:.08s}.hero h1 .line:nth-child(3){animation-delay:.16s}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes fadein{from{opacity:0}}
  @keyframes pop{from{opacity:0;transform:scale(.82) translateY(30px)}}
  @keyframes chip{from{opacity:0;transform:scale(.6)}}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}}
}

/* Abschnitte */
.section{padding-block:96px}
.section.mist{background:var(--mist)}
.head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}
.head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:700;line-height:1.05;max-width:18ch}
.head p{color:var(--muted);max-width:46ch;margin:0}
.more{font-weight:600;color:var(--pumpkin-ink);text-decoration:none;border-bottom:2px solid currentColor}
.more:hover{color:var(--ink)}

/* Was ich baue */
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.skill h3{font-size:1.45rem;font-weight:700;margin:16px 0 8px}
.skill p{margin:0;color:var(--muted)}
.skill .glyph{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.skill .glyph svg{width:28px;height:28px}
.g1{background:#FFE7CC}.g2{background:#FFF3C4}.g3{background:#E3F0D6}

/* Projekte (Startseite, Auswahl) */
.feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feature{background:#fff;border:2px solid var(--ink);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--ink)}
.feature h3{font-size:1.6rem;font-weight:700}
.feature p{margin:0;color:var(--muted);flex:1}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.92rem}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.status.live{color:var(--leaf)}.status.dev{color:var(--dev)}.status.plan{color:var(--muted)}
.plat{color:var(--muted)}
.feature .link{font-weight:600;color:var(--pumpkin-ink)}
.feature .link.none{color:var(--muted);font-weight:400;text-decoration:none}

/* Shop-Teaser Band */
.band{background:var(--pumpkin);color:#1B1206;position:relative;overflow:hidden}
.band .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:88px}
.band h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1;letter-spacing:-.04em}
.band p{font-size:1.15rem;max-width:44ch;margin:20px 0 32px}
.band .btn.primary{border-color:var(--ink)}
.tiers{display:grid;gap:12px}
.tier{display:flex;justify-content:space-between;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:16px 20px;box-shadow:4px 4px 0 var(--ink);font-weight:600}
.tier span{font-weight:400;color:var(--muted);font-size:.95rem}
.band .crown{position:absolute;left:-50px;bottom:-60px;width:240px;opacity:.14;transform:rotate(-14deg);pointer-events:none}

/* Kontakt */
.cta{text-align:left}
.cta h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;max-width:16ch}
.cta p{color:var(--muted);max-width:50ch;margin:20px 0 28px}
.mail{display:inline-block;font:700 clamp(1.4rem,3.6vw,2.4rem)/1.2 "Bricolage";letter-spacing:-.02em;text-decoration:none;border-bottom:4px solid var(--pumpkin);overflow-wrap:anywhere}
.mail:hover{color:var(--pumpkin-ink)}

/* Unterseiten-Kopf */
.pagehead{background:radial-gradient(900px 380px at 85% 0%,#FFF1DC,rgba(255,241,220,0) 70%),var(--white);padding-block:56px 40px;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2.6rem,6vw,4.8rem);font-weight:800;line-height:1;letter-spacing:-.045em}
.pagehead p{color:var(--muted);font-size:1.15rem;max-width:56ch;margin:18px 0 0}

/* Filter */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 8px}
.filters button{font:600 .95rem "Instrument",sans-serif;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* Projektliste */
.plist{list-style:none;margin:0;padding:0}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) 170px 160px;gap:28px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line)}
.prow h2{font-size:1.6rem;font-weight:700}
.prow p{margin:0;color:var(--muted);max-width:58ch}
.prow .side{display:grid;gap:4px;font-size:.95rem}
.prow .go{justify-self:end;font-weight:600;color:var(--pumpkin-ink);white-space:nowrap}
.prow .go.none{color:var(--muted);font-weight:400;text-decoration:none}

/* Shop */
.cat{padding-block:56px 24px}
.cat h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700}
.cat>.wrap>p{color:var(--muted);margin:10px 0 32px;max-width:56ch}
.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.product{position:relative;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:30px 28px;display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--ink)}
.product.hl{background:#FFF6E8}
.product .badge{position:absolute;top:-14px;left:24px;background:var(--gold);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:600}
.product h3{font-size:1.7rem;font-weight:800}
.product .tag{color:var(--muted);margin:4px 0 20px}
.price{font:800 2.2rem/1 "Bricolage";letter-spacing:-.03em;margin-bottom:6px}
.price small{font:400 1rem "Instrument";color:var(--muted);letter-spacing:0}
.price.req{font-size:1.4rem;font-weight:700}
.product ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px;flex:1}
.product li{display:flex;gap:10px;align-items:baseline}
.product li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--pumpkin);transform:rotate(45deg) translateY(-2px)}
.product .btn{justify-content:center}
.note{color:var(--muted);font-size:.95rem;padding-block:24px 72px}

/* Rechtstexte */
.legal{max-width:calc(68ch + 48px);padding-block:48px 88px}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;margin:0 0 28px}
.legal h2{font-size:1.25rem;font-weight:700;margin:36px 0 8px}
.legal p{color:#2D3832}

/* Fuß */
footer{background:var(--ink);color:#C9D2CC}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:36px}
footer .brand{color:#fff}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:#C9D2CC}
footer a:hover{color:#fff}
footer small{display:block;margin-top:6px}

/* Responsiv */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-block:8px 64px}
  .stage{max-width:440px;order:-1}
  .chip.c2{right:0}.chip.c1{left:0}.chip.c3{left:0}
  .skills,.feature-list,.products{grid-template-columns:1fr}
  .band .wrap{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr auto;gap:8px 16px}
  .prow p,.prow .side{grid-column:1/-1}
  .prow .go{grid-column:2;grid-row:1}
  .section{padding-block:72px}
}
@media (max-width:560px){
  .brand span{display:none}
  .nav a{padding:8px 10px}
  .chip{font-size:.8rem;padding:6px 10px}
}