/* ============================================================
   ALIVIOBIO – gemeinsames Stylesheet für alle Seiten
   (index.html, unsere-geschichte.html, weitere Unterseiten)
   Stand 03.11.2026

   Palette: Pergament #fdfef3 · Karte #FBF8F0 · Tinte #241F18 · Erde #4A3423
            Blattgrün #296e19 · Blattgrün hell #DCE4D6 · Senfgelb #C99A2E
            Tomatenrot #A63A2C · Linie #E2D8C3

   GRÖSSEN-SCHEMA (verbindlich): nur Verdopplungen 4 – 8 – 16 – 32 – 64 – 128 px,
   nie Zwischenwerte. Gilt für Schriftgrößen, Innen-/Außenabstände, Lücken (gap)
   und Eckenradien.
     Schrift:  16 px = Standard (Fließtext, Buttons, Menü, Listen, Tabellen)
               32 px = Zwischenüberschriften (H2), H1 am Handy, Zahlen in Stempeln
               64 px = H1 am Desktop
     Ausnahme (begründet, nur für Schrift):
               12 px = Kleingedrucktes und Stempel-Labels in Space Mono
                       (.stamp-label, Footer, Tabellenköpfe, Quellenangaben,
                       Rechenbeispiel-Tabelle und Zeitleisten-Jahre am Handy)
               24 px = Kundenzitat im grünen Streifen (.quote-strip blockquote):
                       lange Zitate wären in 32 px erdrückend, in 16 px zu schwach
     Nicht vom Schema erfasst: Zeilenhöhen (ohne Einheit), Linienstärken (1–2 px),
     Bildgrößen, Stempeldurchmesser, scroll-margin (Höhe der Menüleiste).
   ============================================================ */

:root{
  --paper:#fdfef3; --card:#FBF8F0;
  --ink:#241F18; --soil:#4A3423;
  --leaf:#296e19; --leaf-soft:#DCE4D6;
  --mustard:#C99A2E; --tomato:#A63A2C;
  --line:#E2D8C3;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Karla',sans-serif;background:var(--paper);color:var(--soil);font-size:16px;line-height:1.65;}
h1,h2,h3{font-family:'Archivo Black',sans-serif;color:var(--leaf);font-weight:400;text-transform:uppercase;letter-spacing:.3px;}
h1,h2,h3{overflow-wrap:break-word;word-break:break-word;hyphens:auto;}
h1,h2,h3{hyphens:manual;}
h1{font-size:64px;line-height:1.05;}
h2{font-size:32px;line-height:1.15;}
h3{font-size:16px;line-height:1.3;}
@media (max-width:640px){h1{font-size:32px;line-height:1.15;}}
a{color:inherit;}
:focus-visible{outline:2px solid var(--tomato);outline-offset:3px;}
.stamp-label{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tomato);}
.wrap{max-width:1100px;margin:0 auto;padding:0 32px;position:relative;}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:40;background:rgba(253,254,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1100px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;}
.brand-logo{height:32px;width:auto;display:block;}
.brand-mark{width:32px;height:32px;border-radius:50%;background:var(--leaf);color:var(--mustard);display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;font-size:16px;flex-shrink:0;}
.brand-name{font-family:'Archivo Black',sans-serif;font-size:16px;color:var(--leaf);letter-spacing:.5px;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;flex-wrap:wrap;}
.nav-links a{font-size:16px;text-decoration:none;color:var(--soil);}
.nav-links a:hover{color:var(--tomato);}
.nav-links a.btn-primary {color: var(--paper);}
.btn{font-family:'Karla',sans-serif;font-size:16px;font-weight:700;padding:8px 32px;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block;border:2px solid var(--leaf);transition:translate .08s ease, box-shadow .2s ease;text-transform:uppercase;letter-spacing:.5px;}
.btn-primary{background:linear-gradient(180deg,#3a8e29,var(--leaf));color:var(--paper);box-shadow:inset 0 1px 0 rgba(253,254,243,.35),inset 0 -2px 0 rgba(36,31,24,.2),0 1px 2px rgba(36,31,24,.4),0 8px 24px -6px rgba(41,110,25,.6);}
.btn-primary:hover{background:linear-gradient(0deg,#3a8e29,var(--leaf));}
.btn-primary:active{translate:0 1px;box-shadow:inset 0 2px 4px rgba(36,31,24,.27);}
/* Aufmerksamkeit: Nav-Button wackelt alle 10 s zweimal links/rechts */
.nav-cta{animation:nav-cta-wiggle 10s ease-in-out infinite;}
.nav-cta:hover{animation-play-state:paused;}
@keyframes nav-cta-wiggle{0%,8%,100%{transform:translateX(0);}1%{transform:translateX(-5px);}2%{transform:translateX(5px);}3%{transform:translateX(-5px);}4%{transform:translateX(5px);}5%{transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.nav-cta{animation:none;}}
.btn-ghost:active{translate:0 1px;}
.btn-ghost{background:transparent;color:var(--leaf);}
.btn-ghost:hover{background:var(--leaf-soft);}
/* ── NAV FÜR MOBILE ANSICHT ── */
.nav-cta{order:3;}
.nav-links{order:2;}
.brand{order:1;}
.nav-toggle{display:none;order:4;}

@media (max-width:640px){
  .section h2{font-size:32px;}
  .nav-inner{flex-wrap:nowrap;padding:8px 16px;position:relative;}
  .brand-name{display:none;}
  .brand-logo{height:24px;}
  .brand-mark{width:24px;height:24px;font-size:16px;}
  .nav-cta{padding:8px 16px;font-size:16px;white-space:nowrap;}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;width:28px;height:28px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;}
  .nav-toggle span{display:block;width:100%;height:2px;background:var(--leaf);border-radius:2px;transition:transform .25s ease, opacity .25s ease;}
  .nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.active span:nth-child(2){opacity:0;}
  .nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .nav-links{flex-wrap:nowrap;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);gap:0;max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:16px 16px;font-size:16px;border-top:1px solid var(--line);}
}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;padding:64px 0 64px;}
.hero-bg-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg-photo img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.hero-bg-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(253,254,243,.65) 0%, rgba(253,254,243,.15) 45%, rgba(253,254,243,.75) 100%);}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:64px;flex-wrap:wrap;position:relative;z-index:2;}
.hero-text{flex:1;min-width:280px;max-width:540px;}
.hero-text p{font-size:16px;color:var(--ink);max-width:540px;margin-bottom:32px;line-height:1.7;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.hero{padding:32px 0 32px;}
.hero-text{max-width:640px;}
.hero-text h1{font-size:64px;line-height:1.05;margin:16px 0 32px;text-wrap:balance;}
.hero-text p.hero-lead{font-size:16px;line-height:1.7;margin-bottom:16px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.price-compare{width:100%;max-width:460px;border-collapse:collapse;background:rgba(251,248,240,.92);border:1px solid var(--line);border-radius:8px;font-size:16px;margin-bottom:8px;}
.price-compare th,.price-compare td{padding:4px 8px;text-align:left;border-bottom:1px solid var(--line);}
.price-compare thead th{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--soil);}
.price-compare tbody th{font-weight:700;color:var(--ink);}
.price-compare td{white-space:nowrap;}
.price-compare td.coop{font-weight:700;color:var(--leaf);}
.price-compare tbody tr:last-child th,.price-compare tbody tr:last-child td{border-bottom:none;}
.hero-text p.hero-saving{font-size:16px;line-height:1.5;margin-bottom:16px;color:var(--ink);}
.hero-saving strong{color:var(--leaf);}
.btn-lg{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;font-size:16px;}
.price-compare-title{font-family:'Karla',sans-serif;font-size:16px;font-weight:400;line-height:1.45;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 8px;padding-left:calc(8px + 1px);}
.cost-box{list-style:none;max-width:460px;margin:16px 0 0;font-size:16px;line-height:1.45;color:var(--ink);text-align:left;}
.cost-box li{position:relative;padding-left:16px;margin-bottom:4px;}
.cost-box li::before{content:'✓';position:absolute;left:0;top:0;color:var(--leaf);font-weight:700;}
.cost-box.on-dark{margin:16px auto 0;color:#D8D0C0;font-size:16px;}
.cost-box.on-dark li::before{color:var(--mustard);}
.hero-text p.hero-more{font-size:16px;margin:8px 0 0;}
.hero-more a{color:var(--leaf);font-weight:700;}
.nav-cta-wrap{order:3;display:flex;flex-direction:column;align-items:center;gap:2px;}
.nav-cta-note{font-size:12px;line-height:1.2;color:var(--soil);text-align:center;}
.hero-rating{display:flex;align-items:center;gap:8px;margin-top:32px;font-family:'Space Mono',monospace;font-size:12px;color:var(--soil);}
.hero-rating .stars{color:var(--mustard);letter-spacing:1px;}
.stars-dyn{position:relative;display:inline-block;color:var(--line)!important;white-space:nowrap;}
.stars-dyn .stars-fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--mustard);}

.stamp-wrap{position:relative;width:210px;height:210px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.stamp{width:180px;height:180px;border-radius:50%;border:2px solid var(--leaf);display:flex;align-items:center;justify-content:center;position:relative;background:var(--card);}
.stamp-ring-text{position:absolute;inset:0;width:100%;height:100%;}
@media (prefers-reduced-motion:no-preference){.stamp-ring-text,.order-trust-ring{animation:spin 26s linear infinite;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.stamp-core{width:110px;height:110px;border-radius:50%;background:var(--leaf);color:var(--mustard);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;text-align:center;line-height:1.15;}
.stamp-core .big{font-size:32px;}
.hero-stamps{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;align-self:stretch;}
.savings-stamp{position:relative;width:190px;height:190px;border-radius:50%;border:2px dashed var(--tomato);background:linear-gradient(180deg,rgba(253,254,243,.55),rgba(253,254,243,0) 60%),rgba(253,254,243,.18);box-shadow:inset 0 2px 0 rgba(253,254,243,.7),inset 0 -4px 8px rgba(36,31,24,.18),0 2px 4px rgba(36,31,24,.3),0 10px 24px -6px rgba(166,58,44,.5);cursor:pointer;transform:rotate(-8deg);transition:transform .2s ease, background .2s ease, box-shadow .2s ease;padding:0;font-family:'Archivo Black',sans-serif;color:var(--tomato);flex-shrink:0;}
.savings-stamp:hover{transform:rotate(-8deg) scale(1.05);background:linear-gradient(180deg,rgba(253,254,243,.7),rgba(253,254,243,.1) 60%),rgba(253,254,243,.3);}
.savings-stamp:active{transform:rotate(-8deg) scale(1.02);box-shadow:inset 0 2px 6px rgba(36,31,24,.3);}
.savings-stamp-ring{position:absolute;inset:0;width:100%;height:100%;}
.savings-stamp-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:1.15;text-transform:uppercase;padding-bottom:16px;}
.savings-stamp-core .big{font-size:32px;line-height:1.05;}
@media (prefers-reduced-motion:reduce){.savings-stamp{transition:none;}}
.stamp-core .small{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;margin-top:2px;color:var(--paper);}

.hero-bg-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:1;}
.shape-a{width:340px;height:340px;background:var(--leaf-soft);top:-120px;right:-100px;}
.shape-b{width:220px;height:220px;background:#F0E2C0;bottom:-100px;left:-80px;}
.parallax-layer{will-change:transform;}

/* ── QUOTE / RATING STRIP ── */
.quote-strip{overflow:hidden;background:var(--leaf);color:var(--paper);padding:32px 0;text-align:center;}
.quote-strip .stamp-label{color:var(--mustard);}
.statement-strip{padding:64px 0;}
.statement-carousel{display:grid;max-width:640px;margin:0 auto;}
.statement-slide{grid-area:1/1;opacity:0;transform:translateX(36px);transition:opacity .6s ease, transform .6s ease;pointer-events:none;}
.statement-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;}
.statement-slide h2{color:var(--paper);font-size:32px;line-height:1.3;margin:0 0 16px;text-transform:none;letter-spacing:0;}
.statement-slide p{font-size:16px;color:#D8D0C0;line-height:1.7;}
.statement-dots{display:flex;gap:8px;margin-top:16px;justify-content:center;}
.statement-dots span{width:7px;height:7px;border-radius:50%;background:rgba(253,254,243,.3);transition:background .3s ease;}
.statement-dots span.active{background:var(--mustard);}
@media (prefers-reduced-motion:reduce){.statement-slide{transition:none;}}
.quote-strip blockquote{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:24px;text-transform:none;letter-spacing:0;max-width:600px;margin:16px auto 0;line-height:1.35;}

/* ── SECTIONS ── */
.section{padding:64px 0;}
.section h2{font-size:32px;margin-bottom:8px;}
.section .lead{font-size:16px;color:var(--soil);max-width:520px;margin-bottom:32px;line-height:1.8;}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.about-grid p{font-size:16px;margin-bottom:16px;line-height:1.85;}
@media (max-width:760px){.about-grid{grid-template-columns:1fr;}}
.about-photo{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--leaf-soft);border:1px solid var(--line);}
.about-photo img{width:100%;height:100%;object-fit:cover;display:block;}

.offers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.offer-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:32px;position:relative;}
.offer-card{background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;border:2px solid var(--leaf);transition:transform .25s ease, box-shadow .25s ease;}
.offer-card:hover{transform:scale(1.04);box-shadow:0 10px 24px rgba(41,110,25,.22);z-index:3;}
@media (prefers-reduced-motion:reduce){.offer-card{transition:none;}.offer-card:hover{transform:none;}}
.offer-card.bg-obst{background-image:linear-gradient(180deg,rgba(251,248,240,.82),rgba(251,248,240,.7)),url('/images/3_fruit-veggies.png');}
.offer-card.bg-trocken{background-image:linear-gradient(180deg,rgba(251,248,240,.82),rgba(251,248,240,.7)),url('/images/3_trockenware-mopro.png');}
.offer-card.bg-drogerie{background-image:linear-gradient(180deg,rgba(251,248,240,.82),rgba(251,248,240,.7)),url('/images/3_drogerie.png');}
.offer-card.bg-conv{background-image:linear-gradient(180deg,rgba(251,248,240,.82),rgba(251,248,240,.7)),url('/images/3_convenience.png');}
.sogehts{position:relative;overflow:hidden;}
.sogehts-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.sogehts-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.sogehts-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(220,228,214,.65) 0%, rgba(220,228,214,.15) 45%, rgba(220,228,214,.75) 100%);}
.offer-card::before{content:'';position:absolute;top:14px;right:14px;width:26px;height:26px;border:2px solid var(--mustard);border-radius:50%;}
.offer-card h3{font-family:'Archivo Black',sans-serif;font-size:16px;color:var(--leaf);margin-bottom:8px;text-transform:uppercase;}
.offer-card p{font-size:16px;color:var(--ink);font-weight:700;line-height:1.7;}

/* ── REVIEWS CAROUSEL ── */
.reviews-carousel-link{display:block;text-decoration:none;color:inherit;}
.reviews-carousel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:150px;overflow:hidden;padding:32px 32px;cursor:pointer;transition:border-color .2s ease;}
.reviews-carousel:hover{border-color:var(--leaf);}
.carousel-slide{position:absolute;inset:0;padding:32px 32px;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateX(36px);transition:opacity .6s ease, transform .6s ease;pointer-events:none;}
.carousel-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;}
.carousel-slide .stars{color:var(--mustard);font-family:'Space Mono',monospace;font-size:12px;margin-bottom:8px;display:block;}
.carousel-slide p{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink);line-height:1.5;}
.carousel-dots{display:flex;gap:8px;margin-top:16px;justify-content:center;}
.carousel-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s ease;}
.carousel-dots span.active{background:var(--leaf);}
.review-source{margin-top:16px;font-family:'Space Mono',monospace;font-size:12px;color:var(--soil);opacity:.75;text-align:center;}
.review-source a{color:var(--leaf);text-decoration:underline;}
@media (prefers-reduced-motion:reduce){
  .carousel-slide{transition:none;}
}

.order{background:var(--ink);color:var(--paper);padding:64px 0;text-align:center;}
.order .stamp-label{color:var(--mustard);}
.order h2{color:var(--paper);}
.order p{font-size:16px;color:#D8D0C0;max-width:480px;margin:16px auto 32px;line-height:1.8;}

.order-trust{position:absolute;top:0;left:32px;width:60px;height:60px;border-radius:50%;border:1.5px solid var(--mustard);display:flex;align-items:center;justify-content:center;background:rgba(253,254,243,.04);}
.order-trust-core{font-family:'Archivo Black',sans-serif;color:var(--mustard);text-align:center;line-height:1.1;}
.order-trust-core .big{font-size:16px;display:block;}
.order-trust-core .small{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;color:var(--paper);display:block;margin-top:1px;}
@media (max-width:640px){.order-trust{position:static;margin:0 auto 16px;}}

.faq{max-width:560px;margin:16px auto 0;text-align:left;}
.faq details{border-top:1px solid rgba(253,254,243,.15);padding:16px 0;}
.faq details:last-of-type{border-bottom:1px solid rgba(253,254,243,.15);}
.faq summary{cursor:pointer;font-family:'Karla',sans-serif;font-weight:700;font-size:16px;color:var(--paper);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:'Archivo Black',sans-serif;color:var(--mustard);font-size:16px;flex-shrink:0;}
.faq details[open] summary::after{content:'–';}
.faq details p{font-size:16px;color:#D8D0C0;margin-top:8px;line-height:1.75;text-align:left;max-width:none;}

/* ── FOOTER ── */
.footer{padding:32px 32px;text-align:center;border-top:1px solid rgba(253,254,243,.12);background:var(--ink);}
.footer-links{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-bottom:8px;font-family:'Space Mono',monospace;font-size:12px;}
.footer-links a{color:#D8D0C0;text-decoration:none;}
.footer-links a:hover{color:var(--mustard);}
.footer-copy{font-family:'Space Mono',monospace;font-size:12px;color:#8A8272;}

@media (max-width:640px){
  .wrap,.nav-inner,.hero-inner{padding-left:16px;padding-right:16px;}
  .hero{padding:16px 0 32px;}
  .hero-inner{gap:32px;align-items:stretch;}
  .hero-text{min-width:0;width:100%;}
  .stamp-wrap{align-self:center;}
  .hero-stamps{flex-direction:row;flex-wrap:wrap;justify-content:center;align-self:center;gap:16px;}
  .hero-stamps .stamp-wrap{margin-bottom:0;}
  .hero{padding-bottom:32px;}
  .savings-stamp{width:150px;height:150px;}
  .savings-stamp-core{font-size:16px;}
  .savings-stamp-core .big{font-size:32px;}
  .hero-text h1{font-size:32px;line-height:1.15;margin:8px 0 16px;}
  .hero-text p.hero-lead{font-size:16px;line-height:1.5;margin-bottom:8px;}
  .hero-text p.hero-saving{font-size:16px;margin-bottom:8px;}
  .price-compare{table-layout:fixed;font-size:16px;margin-bottom:8px;}
  .price-compare thead th:first-child,.price-compare tbody th{width:40%;}
  .price-compare th,.price-compare td{padding:4px 8px;overflow-wrap:anywhere;}
  .cost-box{margin-top:8px;}
  .btn-lg{min-height:46px;padding:8px 16px;}
  .price-compare thead th{font-size:12px;letter-spacing:0;}
  .hero-btns .btn{flex:1 1 100%;}
  .nav-cta-note{font-size:12px;white-space:nowrap;}
  .cost-box{font-size:16px;}
  .price-compare-title{font-size:16px;padding-left:calc(8px + 1px);}
  .hero-inner{flex-direction:column;}
  .stamp-wrap{width:160px;height:160px;}
  .stamp{width:140px;height:140px;}
  .stamp-core{width:88px;height:88px;}
  .stamp-core .big{font-size:32px;}
  .section{padding:32px 0;}
  .nav-links{gap:0;}
}

/* ── CSS ABHOLKARTE ── */
.ab-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--leaf);border-radius:8px;padding:16px 32px;}
.ab-card-full{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:32px;grid-column:1 / -1;}
@media (max-width:760px){.ab-card-full{grid-template-columns:1fr;}}
.ab-address{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin:4px 0 4px;}
.ab-context{font-size:16px;color:var(--soil);margin:0;}
.ab-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.btn-sm{padding:8px 16px;font-size:16px;}
.ab-map-wrap{border-radius:8px;overflow:hidden;height:220px;}
.ab-map-placeholder{height:100%;background:repeating-linear-gradient(45deg,rgba(36,31,24,.04),rgba(36,31,24,.04) 10px,rgba(36,31,24,.07) 10px,rgba(36,31,24,.07) 20px);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--soil);text-align:center;padding:0 16px;}


/* ── LEGAL ── */
.legal{display:none;background:var(--card);padding:64px 0;border-top:2px solid var(--leaf);}
.legal .wrap{max-width:720px;}
.legal h2{font-size:32px;margin-bottom:32px;}
.legal h3{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--leaf);text-transform:uppercase;letter-spacing:1px;margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.legal h3:first-of-type{margin-top:0;}
.legal p{font-size:16px;color:var(--soil);line-height:1.85;margin-bottom:16px;}
.legal strong{color:var(--ink);}
.legal a{color:var(--leaf);}
.legal ul{font-size:16px;color:var(--soil);line-height:2;margin-bottom:16px;padding-left:16px;}
.legal .back-btn{font-family:'Karla',sans-serif;font-size:16px;background:transparent;color:var(--leaf);border:1.5px solid var(--leaf);padding:8px 16px;border-radius:32px;cursor:pointer;}

/* ── SPAR-MODAL (Rechenbeispiel) ── */
.savings-trigger{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--tomato);text-underline-offset:3px;background:none;border:none;font:inherit;font-weight:700;color:inherit;padding:0;}
.savings-trigger:hover{color:var(--tomato);}

.modal-overlay{position:fixed;inset:0;background:rgba(36,31,24,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:32px;z-index:160;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{background:var(--paper);border:1px solid var(--line);border-radius:8px;max-width:600px;width:100%;max-height:88vh;overflow-y:auto;padding:32px 32px 32px;position:relative;transform:translateY(20px);transition:transform .25s ease;box-shadow:0 20px 60px rgba(36,31,24,.25);}
.modal-overlay.open .modal-box{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.modal-overlay,.modal-box{transition:none;}}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-size:16px;line-height:1;color:var(--soil);display:flex;align-items:center;justify-content:center;}
.modal-close:hover{border-color:var(--leaf);color:var(--leaf);}
.modal-box h3{font-size:32px;line-height:1.15;margin-bottom:8px;padding-right:32px;}
.modal-box .lead{font-size:16px;color:var(--soil);line-height:1.75;margin-bottom:32px;}

.calc-table{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px;}
.calc-row{display:grid;grid-template-columns:1.6fr .9fr .9fr .9fr;gap:8px;padding:8px 16px;font-size:16px;align-items:center;border-bottom:1px solid var(--line);}
.calc-row:last-child{border-bottom:none;}
.calc-row.head{background:var(--leaf-soft);font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--soil);}
.calc-row.total{background:var(--card);font-weight:700;color:var(--ink);}
.calc-row span:nth-child(2),.calc-row span:nth-child(3),.calc-row span:nth-child(4){text-align:right;font-family:'Space Mono',monospace;}
.calc-row .save{color:var(--leaf);font-weight:700;}

.calc-net{background:var(--leaf);color:var(--paper);border-radius:8px;padding:16px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.calc-net .label{font-size:16px;}
.calc-net .value{font-family:'Archivo Black',sans-serif;font-size:32px;color:var(--mustard);}
.calc-net .sub{flex-basis:100%;font-size:12px;color:var(--paper);opacity:.8;margin-top:4px;}
.modal-box .fineprint{font-size:12px;color:var(--soil);opacity:.75;line-height:1.6;}
.calc-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.calc-stat{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 16px;text-align:center;}
.calc-stat .stat-value{font-family:'Archivo Black',sans-serif;font-size:32px;color:var(--leaf);display:block;}
.calc-stat .stat-label{font-size:12px;color:var(--soil);margin-top:4px;display:block;line-height:1.4;}

.modal-box .subhead{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--leaf);margin:32px 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.modal-box .subhead:first-of-type{margin-top:0;}

@media (max-width:480px){
  .modal-overlay{padding:8px;}
  .modal-box{padding:32px 16px 16px;}
  /* Wertspalten so breit wie ihr Inhalt: €-Zeichen bleiben in einer Zeile, Spaltentitel bleiben lesbar */
  .calc-row{grid-template-columns:minmax(0,1fr) repeat(3,auto);gap:4px;font-size:12px;padding:8px 8px;}
  .calc-row span:nth-child(2),.calc-row span:nth-child(3),.calc-row span:nth-child(4){white-space:nowrap;font-size:12px;}
  .calc-row.head{font-size:12px;letter-spacing:0;}
  .calc-row.head span:nth-child(2),.calc-row.head span:nth-child(3),.calc-row.head span:nth-child(4){white-space:normal;font-size:12px;}
  .calc-stats{grid-template-columns:1fr;}
}

.story-link{color:var(--leaf);font-weight:700;}
#ergebnis h2{hyphens:manual;text-wrap:balance;}
/* ── WARTELISTE (Gründungsmitglieder, seit 11/2026) ── */
.anchor-alias{position:absolute;top:-90px;}
#warteliste{position:relative;scroll-margin-top:70px;}
.wl-progress{max-width:460px;margin:4px 0 16px;}
.wl-progress[hidden]{display:none;}
.wl-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden;}
.wl-bar-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mustard),var(--leaf));border-radius:999px;transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.hero-text p.wl-count,.wl-count{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.3px;color:var(--ink);margin:4px 0 0;line-height:1.4;}
.wl-count strong{color:var(--leaf);font-size:16px;}
.wl-progress.on-dark{margin:0 auto 32px;}
.wl-progress.on-dark .wl-bar{background:rgba(253,254,243,.15);}
.order .wl-count{color:#D8D0C0;max-width:none;margin:8px 0 0;font-size:12px;}
.order .wl-count strong{color:var(--mustard);}
.wl-form{max-width:560px;margin:0 auto;text-align:left;}
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.wl-field{display:flex;flex-direction:column;gap:4px;font-size:16px;color:#D8D0C0;}
.wl-field em{font-style:normal;opacity:.7;}
.wl-wide{grid-column:1 / -1;}
.wl-field input{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid transparent;border-radius:4px;padding:8px 16px;min-height:46px;width:100%;}
.wl-field input{scroll-margin-top:110px;}
.wl-success{scroll-margin-top:110px;}
.wl-field input:focus{outline:none;border-color:var(--mustard);box-shadow:0 0 0 3px rgba(201,154,46,.3);}
.wl-field input[aria-invalid="true"]{border-color:var(--tomato);}
.wl-field .wl-msg{font-size:12px;color:#F2B8AE;}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.wl-form .btn{display:flex;width:100%;margin-top:16px;}
.wl-form .btn[disabled]{opacity:.7;cursor:wait;}
.order p.wl-note{font-size:12px;line-height:1.5;margin:16px 0 0;max-width:none;color:#BDB4A3;}
.wl-note a{color:var(--paper);}
.order p.wl-error{font-size:16px;color:#F2B8AE;margin:16px 0 0;max-width:none;}
.wl-success{max-width:560px;margin:0 auto;border:1.5px solid var(--mustard);border-radius:8px;padding:16px 16px;background:rgba(253,254,243,.05);}
.wl-success[hidden],.wl-form[hidden],.wl-error[hidden]{display:none;}
.order p.wl-success-title{font-family:'Archivo Black',sans-serif;text-transform:uppercase;color:var(--mustard);font-size:32px;margin:0 0 8px;}
.order .wl-success p{margin:0 auto;}
#warteliste .cost-box.on-dark{max-width:560px;margin-top:32px;}
@media (max-width:640px){
  .wl-grid{grid-template-columns:1fr;}
  .hero-text p.wl-count{font-size:12px;}
  .wl-progress{margin:0 0 8px;}
}
@media (prefers-reduced-motion:reduce){.wl-bar-fill{transition:none;}}

/* ── UNTERSEITEN: Unsere Geschichte ── */
.page-story .hero-text h1 span{display:block;color:var(--soil);}
.summary{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:32px;margin:0 auto;max-width:720px;box-shadow:0 16px 32px -16px rgba(36,31,24,.35);}
.summary h2{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1.5px;color:var(--tomato);margin-bottom:8px;}
.summary p{color:var(--ink);font-size:16px;line-height:1.7;}
.summary-wrap{padding-top:64px;}
.chapter{padding:64px 0;}
.chapter + .chapter{border-top:1px solid var(--line);}
.chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.chapter-grid.flip > figure{order:-1;}
.chapter h2{font-size:32px;line-height:1.15;margin:8px 0 16px;}
.chapter p{font-size:16px;line-height:1.7;margin-bottom:16px;max-width:62ch;}
.chapter p strong{color:var(--ink);}
.chapter figure{border-radius:8px;overflow:hidden;background:var(--leaf-soft);border:1px solid var(--line);aspect-ratio:4/3;}
.chapter figure img{width:100%;height:100%;object-fit:cover;display:block;}
.chapter figure.is-missing{display:none;}
.chapter-grid.no-photo{grid-template-columns:1fr;}
.cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.btn-paper{color:var(--ink);border-color:transparent;background:linear-gradient(180deg,#FFFDF8,#F1E8D8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 0 rgba(36,31,24,.08),inset 0 0 0 1px rgba(36,31,24,.14),0 1px 2px rgba(36,31,24,.18),0 8px 16px -8px rgba(36,31,24,.3);}
@media (hover:hover) and (pointer:fine){.btn-paper:hover{background:linear-gradient(0deg,#FFFDF8,#F1E8D8);}}
.btn-paper:active{translate:0 1px;}

.timeline-sec{background:var(--leaf-soft);padding:64px 0;}
.timeline-sec h2{font-size:32px;line-height:1.15;margin:8px 0 16px;}

.lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px;}
.lesson{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:32px;}
.lesson h3{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:8px;}
.lesson p{font-size:16px;line-height:1.7;margin:0;}
.note{background:var(--ink);color:#D8D0C0;border-radius:8px;padding:32px;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:64px;}
.note p{margin:0;max-width:52ch;font-size:16px;line-height:1.7;}
.note p strong{color:var(--paper);}

.faq-sec{padding:64px 0;border-top:1px solid var(--line);}
.faq-sec .wrap{max-width:720px;}
.faq-sec h2{font-size:32px;line-height:1.15;margin:8px 0 32px;}
.faq-light details{border-top:1px solid var(--line);padding:16px 0;}
.faq-light details:last-of-type{border-bottom:1px solid var(--line);}
.faq-light summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;}
.faq-light summary::-webkit-details-marker{display:none;}
.faq-light summary::after{content:'+';font-family:'Archivo Black',sans-serif;color:var(--mustard);font-size:16px;flex-shrink:0;}
.faq-light details[open] summary::after{content:'–';}
.faq-light details p{margin-top:8px;font-size:16px;line-height:1.7;max-width:65ch;}
.faq-light a,.chapter a:not(.btn){color:var(--leaf);}

@media (max-width:760px){
  .chapter-grid{grid-template-columns:1fr;gap:32px;}
  .chapter-grid.flip > figure{order:0;}
  .lessons{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .summary{padding:16px;}
  .summary-wrap{padding-top:32px;}
  .chapter,.timeline-sec,.faq-sec{padding:32px 0;}
  .lesson{padding:16px;}
  .note{padding:16px;gap:16px;margin-top:32px;}
  .note .btn,.cta-row .btn{flex:1 1 100%;}
}

/* ── BESTÄTIGUNGSSEITE Warteliste ── */
.page-confirm{min-height:calc(100vh - 160px);display:flex;align-items:center;padding:64px 0;}
.page-confirm .wrap{width:100%;position:relative;z-index:2;}
.confirm-card{background:var(--card);border:1px solid var(--line);border-radius:8px;max-width:560px;margin:0 auto;padding:32px;text-align:center;box-shadow:0 16px 32px -16px rgba(36,31,24,.35);}
.confirm-card h1{font-size:32px;line-height:1.15;margin:8px 0 16px;}
.confirm-card p{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:16px;}
.confirm-card .wl-bar{margin:32px 0 8px;}
.confirm-card .wl-count{margin:0 0 16px;}
.confirm-card ul{list-style:none;text-align:left;margin:16px 0 32px;}
.confirm-card li{position:relative;padding-left:32px;margin-bottom:8px;font-size:16px;line-height:1.6;}
.confirm-card li::before{content:'✓';position:absolute;left:8px;color:var(--leaf);font-weight:700;}
.confirm-spinner{width:32px;height:32px;border:4px solid var(--line);border-top-color:var(--leaf);border-radius:50%;margin:16px auto;animation:spin 1s linear infinite;}
@media (prefers-reduced-motion:reduce){.confirm-spinner{animation:none;}}
@media (max-width:640px){.page-confirm{padding:32px 0;}.confirm-card{padding:16px;}}

/* ── ZEITLEISTE, maßstabsgetreu (Unsere Geschichte) ──
   1 Jahr = var(--y) = 64 px. Position eines Elements über --t = Jahre seit 2016 (z. B. 2018 → 2, Feb. 2025 → 9.1).
   Mitte: Freigärtner (Prinzip, durchgehend, Pfeil = geht weiter) · links: Solawi Freigarten Stein · rechts: „Die Freigärtner“/Aliviobio
   Neue Ereignisse: <li class="tl2-ev tl2-r" style="--t:…"> plus Markierung <span class="tl2-mark tl2-mark-r" style="--t:…">. */
.tl-legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 32px;margin:0 0 32px;font-size:16px;color:var(--ink);padding:0;}
.tl-legend li{display:flex;align-items:center;gap:8px;}
.tl-swatch{display:inline-block;width:32px;height:4px;border-radius:2px;}
.tl-swatch.tl-c-fg{height:8px;background:var(--leaf);}
.tl-swatch.tl-c-sola{background:var(--soil);}
.tl-swatch.tl-c-alv{background:var(--tomato);}
.tl-sym{position:relative;display:inline-block;width:32px;height:16px;}
.tl-sym-end::before{content:'';position:absolute;left:14px;top:0;width:4px;height:8px;background:var(--soil);}
.tl-sym-end::after{content:'';position:absolute;left:4px;top:8px;width:24px;height:4px;background:var(--soil);}
.tl-sym-pause::after{content:'';position:absolute;left:8px;top:0;width:16px;height:16px;border-radius:50%;box-sizing:border-box;border:4px solid var(--tomato);background:var(--paper);}

.tl2{--y:64px;--lane:64px;--gap:32px;}
.tl2-head,.tl2-tail{text-align:center;max-width:480px;margin:0 auto;}
.tl2-head{padding-bottom:32px;}
.tl2-tail{padding-top:16px;}
.tl2-chart{position:relative;height:calc(12 * var(--y));}
.tl2-spine{position:absolute;left:calc(50% - 4px);width:8px;top:0;bottom:16px;background:var(--leaf);}
.tl2-spine::after{content:'';position:absolute;bottom:-16px;left:-12px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:16px solid var(--leaf);}
.tl2-yr{position:absolute;top:calc(var(--t) * var(--y) - 16px);left:50%;transform:translateX(-50%);z-index:2;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;line-height:24px;padding:0 8px;border-radius:16px;background:var(--paper);border:4px solid var(--leaf);color:var(--leaf);font-variant-numeric:tabular-nums;}
.tl2-lane{position:absolute;box-sizing:border-box;top:calc(var(--t0) * var(--y) - 2px);height:calc((var(--t1) - var(--t0)) * var(--y) + 2px);width:var(--lane);border-top:4px solid var(--col);}
.tl2-lane-l{--col:var(--soil);right:50%;border-left:4px solid var(--col);border-top-left-radius:16px;}
.tl2-lane-r{--col:var(--tomato);left:50%;border-right:4px solid var(--col);border-top-right-radius:16px;}
.tl2-mark{position:absolute;z-index:1;box-sizing:border-box;top:calc(var(--t) * var(--y) - 8px);width:16px;height:16px;border-radius:50%;background:var(--paper);border:4px solid var(--col);}
.tl2-mark-l{--col:var(--soil);left:calc(50% - var(--lane) - 6px);}
.tl2-mark-r{--col:var(--tomato);left:calc(50% + var(--lane) - 10px);}
.tl2-end{position:absolute;top:calc(var(--t) * var(--y) - 2px);left:calc(50% - var(--lane) - 14px);width:32px;height:4px;background:var(--soil);}
.tl2-pause{position:absolute;z-index:1;box-sizing:border-box;top:calc(var(--t) * var(--y) - 16px);left:calc(50% + var(--lane) - 18px);width:32px;height:32px;border-radius:50%;border:4px solid var(--tomato);background:var(--paper);}
.tl2-events{list-style:none;margin:0;padding:0;}
.tl2-ev{position:absolute;top:calc(var(--t) * var(--y) - 12px);width:calc(50% - var(--lane) - var(--gap));}
.tl2-l{right:calc(50% + var(--lane) + var(--gap));text-align:right;}
.tl2-r{left:calc(50% + var(--lane) + var(--gap));}
.tl2-when{display:block;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;line-height:24px;}
.tl2-l .tl2-when{color:var(--soil);}
.tl2-r .tl2-when{color:var(--tomato);}
.tl2-head .tl2-when,.tl2-tail .tl2-when{color:var(--leaf);font-weight:700;}
.tl2 h3{font-family:'Karla',sans-serif;font-weight:700;font-size:16px;line-height:1.4;text-transform:none;letter-spacing:0;color:var(--ink);margin:0;}
.tl2 p{font-size:16px;line-height:1.6;color:var(--soil);margin:4px 0 0;}
.tl2 a{color:var(--leaf);}

@media (max-width:640px){
  .tl2{--lane:32px;--gap:16px;}
  .tl2-chart{height:calc(14 * var(--y));}
  .tl2-yr{border-width:2px;padding:0 4px;line-height:20px;top:calc(var(--t) * var(--y) - 12px);}
  .tl2-mark-l{left:calc(50% - var(--lane) - 6px);}
  .tl2-lane-l{border-top-left-radius:8px;}
  .tl2-lane-r{border-top-right-radius:8px;}
}