@import url("/assets/fonts/fonts.css");

:root{
  --papier:#EEF0E6;
  --kreide:#FBFAF5;
  --ink:#1E1913;
  --ink-2:#4A4238;
  --linie:rgba(30,25,19,.14);
  --lehm:#9C7A55;
  --lehm-hell:#C9AE8A;
  --erde:#2C2119;
  --mohn:#D3452D;
  --etsy:#F1641E;
  --etsy-dunkel:#C74B10;
  --kornblume:#3A5DB4;
  --sonne:#EFB62F;
  --wiese:#4B7A3B;
  --petrol:#2E6B72;
  --mint:#A9D8C3;
  --gold:#E2B443;
  --rosa:#E7A9B9;
  --hellblau:#A8C6E6;
  --jute:#B8945E;
  --leinen:#E9E2D3;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --wrap:1180px;
  --r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;font-feature-settings:"ss01"}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{text-decoration-color:var(--mohn)}
:focus-visible{outline:3px solid var(--kornblume);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:99}
.skip:focus{left:8px}
.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}
h1,h2,h3{font-family:var(--disp);font-variation-settings:"wdth" 88,"opsz" 96;line-height:.98;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.9rem,7.4vw,6.4rem);font-weight:800;font-variation-settings:"wdth" 80,"opsz" 96;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:1.35rem;line-height:1.15;font-variation-settings:"wdth" 92,"opsz" 24}
p{margin:0 0 1em}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;color:var(--ink-2);max-width:34em}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:1rem}
.eyebrow::before{content:"";width:.65rem;height:.65rem;border-radius:50%;background:var(--lehm)}
.eyebrow.mohn::before{background:var(--mohn)}
.eyebrow.wiese::before{background:var(--wiese)}
.eyebrow.sonne::before{background:var(--sonne)}
.eyebrow.kornblume::before{background:var(--kornblume)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--papier) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.marke{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--disp);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;font-variation-settings:"wdth" 85}
.marke .k{width:1.55rem;height:1.55rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--lehm-hell),var(--lehm) 55%,var(--erde) 120%);position:relative;flex:none}
.marke .k::after{content:"";position:absolute;inset:0;border-radius:50%;background:
  radial-gradient(circle at 60% 30%,var(--mohn) 0 8%,transparent 9%),
  radial-gradient(circle at 30% 65%,var(--kornblume) 0 7%,transparent 8%),
  radial-gradient(circle at 72% 68%,var(--sonne) 0 7%,transparent 8%)}
.nav{display:flex;gap:1.4rem;align-items:center;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--mohn)}
.nav .btn{margin-left:.4rem}
.menu-btn{display:none;background:none;border:1px solid var(--linie);border-radius:999px;padding:.45rem .9rem;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:860px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--kreide);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--linie);padding:.5rem 1.25rem 1rem}
  .nav a{padding:.75rem 0;border-bottom:1px solid var(--linie)}
  .nav .btn{margin:.9rem 0 0;justify-content:center}
  .nav.offen{display:flex}
  .menu-btn{display:inline-block}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:999px;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-size:1rem;cursor:pointer;font-family:var(--body);line-height:1.2;transition:transform .15s ease,background .15s}
.btn:hover{background:var(--mohn);border-color:var(--mohn);transform:translateY(-1px)}
.btn.hell{background:transparent;color:var(--ink)}
.btn.hell:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.mohn{background:var(--mohn);border-color:var(--mohn)}
.btn.mohn:hover{background:var(--ink);border-color:var(--ink)}
.btn.etsy,.erdig .btn.etsy{background:var(--etsy);border-color:var(--etsy);color:#fff}
.btn.etsy:hover{background:var(--etsy-dunkel);border-color:var(--etsy-dunkel);color:#fff}
.btn.klein{padding:.5rem .95rem;font-size:.9rem}
.btn svg{width:1em;height:1em}

/* Abschnitte */
.abschnitt{padding:clamp(3.5rem,8vw,7rem) 0}
.abschnitt.eng{padding-block:clamp(2.5rem,5vw,4rem)}
.kreide{background:var(--kreide)}
.erdig{background:var(--erde);color:#F3ECE0}
.erdig .lede,.erdig .eyebrow{color:#D8CBB8}
.erdig .btn.hell{color:#F3ECE0;border-color:#F3ECE0}
.erdig .btn.hell:hover{background:#F3ECE0;color:var(--erde)}
.kopfzeile{max-width:44em;margin-bottom:clamp(2rem,4vw,3.5rem)}

/* Held */
.held{position:relative;isolation:isolate;overflow:hidden;background:var(--papier);
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(7rem,16vw,14rem)}
.held-video{position:absolute;left:0;right:0;bottom:0;z-index:-2;line-height:0}
.held-video video{width:100%;height:auto;display:block}
.held-video::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--papier) 0,rgba(238,240,230,.82) 20%,rgba(238,240,230,.18) 48%,rgba(238,240,230,0) 66%)}
.held .wrap{position:relative;z-index:1}
.held .inhalt{max-width:min(36rem,60%)}
.held h1 .zeile{display:block}
.held h1 .farbe{color:var(--mohn)}
.held .cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.held .fakten{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linie);font-size:.95rem;color:var(--ink-2)}
.held .fakten b{display:block;font-family:var(--disp);font-size:1.5rem;color:var(--ink);line-height:1;font-variation-settings:"wdth" 85}
.held .kugel{position:absolute;right:0;top:.5rem;width:clamp(200px,25vw,330px);max-width:none;margin:0;z-index:1;pointer-events:none}
@media (max-width:900px){.held .kugel{display:none}}
.vid-schalter{position:absolute;right:1.1rem;bottom:1.1rem;z-index:3;border:1px solid var(--linie);
  background:rgba(251,250,245,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);
  border-radius:999px;padding:.42rem .9rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;line-height:1.2}
.vid-schalter:hover{background:var(--kreide)}
@media (max-width:900px){
  .held{padding-bottom:clamp(6rem,30vw,11rem)}
  .held .inhalt{max-width:none}
  .held-video{left:-22%;right:-22%}
}

/* Schriftring im Held */
.kugel{position:relative;aspect-ratio:1;max-width:560px;margin-inline:auto;width:100%}
.kugel .foto{position:absolute;inset:9%;border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -30px rgba(44,33,25,.55)}
.kugel .foto img{width:100%;height:100%;object-fit:cover}
.kugel .ring{position:absolute;inset:0;width:100%;height:100%;transform-box:view-box;transform-origin:50% 50%;animation:dreh 45s linear infinite}
.kugel .ring text{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink);font-variation-settings:"wdth" 85}
.kugel .samen{position:absolute;border-radius:50%;width:14px;height:14px;transform:translate(-50%,-50%)}
.kugel .s1{background:var(--mohn);left:11.1%;top:11.1%}
.kugel .s3{background:var(--sonne);left:88.9%;top:11.1%}
.kugel .s2{background:var(--kornblume);left:88.9%;top:88.9%}
.kugel .s4{background:var(--wiese);left:11.1%;top:88.9%}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kugel .ring{animation-duration:120s}}


/* Bestandteile */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.teil{background:var(--kreide);border-radius:var(--r);padding:1.75rem 1.6rem 1.6rem;position:relative;border:1px solid var(--linie)}
.teil .punkt{width:92px;height:92px;border-radius:50%;margin-bottom:1.1rem;display:block;object-fit:cover;
  background:var(--leinen);box-shadow:0 10px 22px -14px rgba(44,33,25,.55)}
.teil p{margin:0;color:var(--ink-2)}
.teil .anteil{position:absolute;top:1.4rem;right:1.5rem;font-family:var(--disp);font-weight:700;color:var(--ink-2);font-size:.95rem;letter-spacing:.04em}
@media (max-width:760px){.drei{grid-template-columns:1fr}}

/* Wachstum */
.reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:tag}
.schritt{position:relative}
.schritt .bild{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--erde);margin-bottom:.9rem}
.schritt .bild img{width:100%;height:100%;object-fit:cover}
.schritt .bild video{width:100%;height:100%;object-fit:cover;display:block;background:var(--papier)}
.schritt .zeit{font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:.02em;font-variation-settings:"wdth" 85}
.schritt h3{margin:.15rem 0 .35rem}
.schritt p{margin:0;color:var(--ink-2);font-size:.97rem}
@media (max-width:860px){.reihe{grid-template-columns:repeat(2,1fr)}}

/* Mischungen */
.sorten{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.sorte{background:var(--kreide);border-radius:var(--r);overflow:hidden;border:1px solid var(--linie);display:flex;flex-direction:column;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.sorte:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(44,33,25,.5)}
.sorte .bild{aspect-ratio:1;overflow:hidden}
.sorte .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sorte:hover .bild img{transform:scale(1.04)}
.sorte .text{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.sorte .beutel{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.sorte .beutel i{width:.8rem;height:.8rem;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:var(--f,var(--jute))}
.sorte h3{font-size:1.15rem;margin:.1rem 0 .05rem}
.sorte p{margin:0;color:var(--ink-2);font-size:.92rem;flex:1}
.sorte .preis{margin-top:.6rem;font-family:var(--disp);font-weight:700;font-size:1.1rem;display:flex;justify-content:space-between;align-items:baseline}
.sorte .preis small{font-family:var(--body);font-weight:500;font-size:.8rem;color:var(--mohn)}
@media (max-width:1020px){.sorten{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.sorten{grid-template-columns:repeat(2,1fr)}.sorte .text{padding:.8rem}}

/* Mengen-Skala */
.skala{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;align-items:stretch}
.stufe{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:background .15s,border-color .15s,transform .18s ease}
.stufe:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.stufe .foto{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;background:#241b14}
.stufe .foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.stufe:hover .foto img{transform:scale(1.06)}
.stufe .foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(180deg,rgba(20,14,10,0),rgba(20,14,10,.8))}
.stufe .zahl{position:absolute;left:.7rem;bottom:.45rem;z-index:1;font-family:var(--disp);font-weight:800;
  font-size:2rem;line-height:1;color:#fff;font-variation-settings:"wdth" 80;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.stufe .text{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem 1rem;flex:1}
.stufe .was{font-size:.88rem;line-height:1.3;color:#D8CBB8}
.stufe .p{margin-top:auto;padding-top:.55rem;font-family:var(--disp);font-weight:700;font-size:1.05rem;color:#fff}
@media (max-width:1020px){.skala{grid-template-columns:repeat(3,1fr)}}
.kopf-zwei{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.kopf-zwei .kopfzeile{margin-bottom:0}
.hinweise{list-style:none;margin:0;padding:1.25rem 1.4rem;display:grid;gap:.7rem;border:1px solid rgba(255,255,255,.16);
  border-radius:18px;background:rgba(255,255,255,.05);font-size:.92rem;color:#D8CBB8;line-height:1.4}
.hinweise li{padding-left:1.35rem;position:relative}
.hinweise li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;border-radius:50%;background:var(--lehm-hell)}
@media (max-width:900px){.kopf-zwei{grid-template-columns:1fr;align-items:start}}
@media (max-width:520px){.skala{grid-template-columns:repeat(2,1fr)}.stufe .zahl{font-size:1.7rem}}

/* Zweispaltig */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.zwei .bild{border-radius:var(--r);overflow:hidden}
.zwei .bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}
.liste{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.liste li{padding-left:1.4rem;position:relative}
.liste li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;border-radius:50%;background:var(--wiese)}

/* FAQ */
.faq{max-width:52em}
.faq details{border-top:1px solid var(--linie);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:700;font-size:1.2rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-variation-settings:"wdth" 90}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.6rem;color:var(--mohn);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.75rem 0 0;color:var(--ink-2);max-width:46em}

/* Formular */
.formular{display:grid;gap:1.1rem;max-width:36em}
.feld{display:grid;gap:.35rem}
.feld label{font-weight:600;font-size:.95rem}
.feld input,.feld select,.feld textarea{font:inherit;padding:.75rem .9rem;border:1.5px solid var(--linie);border-radius:12px;background:var(--kreide);color:var(--ink);width:100%}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--kornblume);outline:none;box-shadow:0 0 0 3px rgba(58,93,180,.18)}
.feld textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.klein{font-size:.88rem;color:var(--ink-2)}
.kontaktwege{display:grid;gap:1rem;margin-top:1.5rem}
.kontaktwege a{display:flex;gap:.9rem;align-items:center;text-decoration:none;padding:1rem 1.1rem;background:var(--kreide);border:1px solid var(--linie);border-radius:16px}
.kontaktwege a:hover{border-color:var(--ink)}
.kontaktwege i{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;color:#fff}
.kontaktwege small{display:block;color:var(--ink-2);font-size:.85rem}
.kontaktwege b{font-family:var(--disp);font-weight:700}

/* Fließtext */
.prose{max-width:46em}
.prose h2{font-size:1.6rem;margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul{padding-left:1.2rem}
.prose .kasten{background:var(--kreide);border:1px solid var(--linie);border-radius:var(--r);padding:1.4rem 1.6rem;margin:1.5rem 0}
.crumbs{font-size:.88rem;color:var(--ink-2);padding-top:1.2rem}
.crumbs a{text-decoration:none}
.crumbs .sep{margin:0 .5rem}

/* Fuß */
.fuss{background:var(--erde);color:#D8CBB8;padding:3.5rem 0 2rem;font-size:.95rem}
.fuss .oben{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.12)}
.fuss h4{font-family:var(--disp);color:#fff;margin:0 0 .6rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.fuss a{color:#F3ECE0;text-decoration:none}
.fuss a:hover{text-decoration:underline;text-decoration-color:var(--mohn)}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.fuss .marke{color:#fff;margin-bottom:.8rem}
.fuss .unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.4rem;font-size:.85rem}
.fuss .schwester a{border-bottom:1px solid rgba(255,255,255,.3)}
@media (max-width:760px){.fuss .oben{grid-template-columns:1fr}}

/* Sprache */
.lang{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;font-size:.8rem;font-weight:700;letter-spacing:.06em;margin-left:.4rem}
.lang a,.lang span{padding:.35rem .6rem;text-decoration:none;border-bottom:0!important}
.lang span{background:var(--ink);color:#fff}
.lang a:hover{background:var(--papier)}
@media (max-width:860px){.lang{margin:.6rem 0 0;align-self:flex-start}}

/* Artikelraster */
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1020px){.raster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.raster{grid-template-columns:repeat(2,1fr)}}
.gruppe{margin-top:clamp(2rem,4vw,3.5rem)}
.gruppe h3.gt{font-size:1.6rem;margin-bottom:.3rem}
.gruppe .gp{color:var(--ink-2);margin-bottom:1.2rem;max-width:40em}

/* Artikelseite */
.artikel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:860px){.artikel{grid-template-columns:1fr}}
.gal{position:sticky;top:80px}
.gal .haupt{position:relative;border-radius:var(--r);overflow:hidden;background:var(--kreide);aspect-ratio:1;border:1px solid var(--linie)}
.gal .haupt img,.gal .haupt video{width:100%;height:100%;object-fit:cover;display:block}
.gal .haupt video[hidden]{display:none}
.gal .zaehler{position:absolute;right:.8rem;bottom:.8rem;background:rgba(30,25,19,.75);color:#fff;font-size:.75rem;padding:.25rem .6rem;border-radius:999px;font-weight:600}
.gal .nav{position:absolute;top:50%;transform:translateY(-50%);width:2.4rem;height:2.4rem;border-radius:50%;border:0;background:rgba(251,250,245,.9);color:var(--ink);font-size:1.3rem;cursor:pointer;display:grid;place-items:center}
.gal .nav.prev{left:.7rem}.gal .nav.next{right:.7rem}
.gal .thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-top:.6rem}
.gal .thumbs button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;aspect-ratio:1;position:relative}
.gal .thumbs button[aria-current="true"]{border-color:var(--mohn)}
.gal .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gal .thumbs .isvid::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.1rem;background:rgba(0,0,0,.28)}
.kauf{background:var(--kreide);border:1px solid var(--linie);border-radius:var(--r);padding:1.4rem 1.5rem;margin:1.5rem 0}
.kauf .p{font-family:var(--disp);font-weight:800;font-size:2rem;line-height:1;font-variation-settings:"wdth" 85}
.kauf .p small{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--ink-2);margin-left:.5rem}
.kauf .btn{margin-top:1rem}
.kauf .hinweis{font-size:.86rem;color:var(--ink-2);margin:1rem 0 0}
.beutelzeile{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:.8rem}
.beutelzeile i{width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.arten{margin-top:1.5rem}
.arten details{border:1px solid var(--linie);border-radius:14px;padding:.8rem 1rem;background:var(--kreide)}
.arten summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:.6rem}
.arten summary i{width:.8rem;height:.8rem;border-radius:50%;display:inline-block}
.arten p{margin:.6rem 0 0;font-size:.92rem;color:var(--ink-2);line-height:1.55}
.passt{margin-top:clamp(2.5rem,5vw,4rem)}
.brot{background:var(--erde);color:#F3ECE0;border-radius:var(--r);padding:1.6rem 1.8rem;margin-top:2rem}
.brot h3{color:#fff}
.brot p{color:#D8CBB8;margin:0}
.brot a{color:#fff}


/* Schlagwoerter auf den Artikelseiten */
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none}
.tags li{font-size:.82rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--linie);background:var(--kreide);color:var(--ink-2)}


/* Aussaat- und Bluetezeit */
.kalender{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:1.2rem}
.kalender div{text-align:center;font-size:.72rem;padding:.55rem .1rem;border-radius:6px;background:var(--kreide);border:1px solid var(--linie);color:var(--ink-2)}
.kalender div.saat{background:var(--erde);color:#F3ECE0;border-color:var(--erde)}
.kalender div.bluete{background:var(--b,var(--wiese));color:#fff;border-color:transparent}
.legende{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.7rem;font-size:.85rem;color:var(--ink-2)}
.legende span{display:inline-flex;align-items:center}
.legende span::before{content:"";display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.45rem}
.legende .l1::before{background:var(--erde)}
.legende .l2::before{background:var(--b,var(--wiese))}
@media (max-width:560px){.kalender{grid-template-columns:repeat(6,1fr)}}

/* Blog */
.beitrag-kopf{max-width:46em}
.beitrag-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.9rem;color:var(--ink-2);margin:.6rem 0 1.4rem}
.beitrag-meta span+span::before{content:"·";margin-right:1rem;color:var(--linie)}
.beitrag-bild{border-radius:var(--r);overflow:hidden;margin:0 0 clamp(2rem,4vw,3rem)}
.beitrag-bild img{width:100%;height:auto;display:block}
.monate{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:0;border-top:1px solid var(--linie)}
.monate li{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--linie)}
.monate b{font-family:var(--disp);font-weight:700;font-size:1.05rem;font-variation-settings:"wdth" 88}
.monate .los{color:var(--wiese)}
.monate .stopp{color:var(--ink-2)}
.monate p{margin:0;color:var(--ink-2)}
@media (max-width:600px){.monate li{grid-template-columns:1fr;gap:.2rem}}
.blog-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:1000px){.blog-liste{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-liste{grid-template-columns:1fr}}
.blog-karte{background:var(--kreide);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.blog-karte:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(44,33,25,.5)}
.blog-karte .bild{aspect-ratio:3/2;overflow:hidden}
.blog-karte .bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.blog-karte:hover .bild img{transform:scale(1.04)}
.blog-karte .text{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.blog-karte h3{margin:0;font-size:1.2rem}
.blog-karte p{margin:0;color:var(--ink-2);font-size:.95rem;flex:1}
.blog-karte .datum{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.weiter{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}