@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
/* Startseite (DE) – Editorial-Design nach Issue #16.
   Gilt nur für Kopfzeile (.b2c-header) und Abschnitte mit .b2c.
   Die Demo (#demo / #sb-demo) behält Schrift, Farben und Hintergrund von vorher. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/playfair-display-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(../assets/fonts/playfair-display-latin-600-italic.woff2) format('woff2')}

.b2c-page{
  --ed-ivory:#FAF7F2;--ed-green-deep:#3A1D47;--ed-green:#5B2A6E;--ed-text:#2A2230;--ed-muted:#6B6270;--ed-line:#E7E0E8;--ed-accent:#D9692A;--ed-tint:#F1EAF2;--ed-tint-line:#DCCDE2;
  --ed-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --ed-sans:Verdana,Geneva,'DejaVu Sans',sans-serif;--ed-head:Verdana,Geneva,'DejaVu Sans',sans-serif;
  background:var(--ed-ivory);font-family:var(--ed-sans)
}
/* Demo unverändert lassen */
.b2c-page #demo{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#F8F7F4}

/* ---------- Grundtypografie ---------- */
.b2c{color:var(--ed-text);font-size:17px;line-height:1.65}
.b2c h1,.b2c h2{font-family:var(--ed-head);font-weight:600;color:var(--ed-text);letter-spacing:-.01em}
.b2c h1{font-size:64px;line-height:1.06}
.b2c h1 em{font-style:italic;color:var(--ed-accent)}
.b2c h2{font-size:44px;line-height:1.12}
.b2c h3{font-family:var(--ed-sans);font-size:19px;font-weight:700;line-height:1.3;color:var(--ed-text);letter-spacing:0}
.b2c p,.b2c .lead{font-size:17px;line-height:1.65;color:var(--ed-muted)}
.b2c .lead{font-size:19px}
.b2c .eyebrow{font-family:var(--ed-sans);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ed-green)}
.b2c .hint,.b2c .fine{font-size:13px;line-height:1.5}

/* ---------- Layout ---------- */
.b2c > .wrap,.b2c-header > .wrap{max-width:1180px;padding-left:32px;padding-right:32px;box-sizing:border-box}
.section.b2c{padding:112px 0}
.b2c .intro{margin-bottom:56px;gap:14px;max-width:680px}

/* ---------- Kopfzeile ---------- */
.b2c-header{background:var(--ed-ivory);border-bottom:1px solid var(--ed-line)}
.b2c-header .brand{font-family:var(--ed-serif);font-weight:700;font-size:24px;color:var(--ed-green-deep)}
.b2c-header .brand span{color:var(--ed-green);font-style:italic}
.b2c-header .site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.b2c-header .site-nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ed-sans);font-size:15px;color:var(--ed-text);text-decoration:none;border:0;background:none;padding:0}
.b2c-header .site-nav a:hover{color:var(--ed-green)}
.b2c-header .site-nav .nav-beta{padding:0 18px;border:1px solid var(--ed-green-deep);border-radius:999px;color:var(--ed-green-deep);font-weight:600}
.b2c-header .site-nav .lang{color:var(--ed-muted)}

/* ---------- Buttons ---------- */
.b2c .pill-btn{min-height:54px;padding:0 28px;border-radius:999px;font-family:var(--ed-sans);font-size:16px;font-weight:600;box-shadow:none;box-sizing:border-box}
.b2c .pill-btn.primary{background:var(--ed-green-deep);color:#fff;border:0}
.b2c .pill-btn.primary:hover{background:var(--ed-green);color:#fff}
.b2c .pill-btn.secondary{background:transparent;border:1px solid var(--ed-green-deep);color:var(--ed-green-deep)}
.b2c a:focus-visible,.b2c summary:focus-visible,.b2c-header a:focus-visible{outline:2px solid var(--ed-green);outline-offset:3px}

/* ---------- Hero ---------- */
.hero.b2c{background:var(--ed-ivory)}
.hero.b2c .wrap{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:96px}
.hero.b2c .hero-copy{display:flex;flex-direction:column;gap:0;min-width:0}
.hero.b2c .eyebrow{margin-bottom:20px}
.hero.b2c h1{margin-bottom:28px}
.hero.b2c .lead{max-width:500px;margin:0 0 36px}
.hero.b2c .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero.b2c .hint{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:0;background:none;border:0;box-shadow:none;color:var(--ed-muted)}
.hero.b2c .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ed-accent)}
.hero.b2c .hero-art{margin:0;display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.hero.b2c .hero-art picture{display:block;width:100%;max-width:669px}
.hero.b2c .hero-art img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:20px;box-shadow:none}
.b2c figcaption,.b2c .b2c-note{font-size:12px;color:var(--ed-muted);margin-top:10px}

/* ---------- Vorteile ---------- */
#vorteile.b2c{background:var(--ed-ivory);border-top:1px solid var(--ed-line)}
.b2c .b2c-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.b2c .b2c-benefits li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:8px 40px;border-left:1px solid var(--ed-line)}
.b2c .b2c-benefits li:first-child{border-left:0}
.b2c-icon{width:72px;height:72px;margin-bottom:6px}
.b2c .b2c-benefits h3{font-family:var(--ed-head);font-size:24px;font-weight:600}
.b2c .b2c-benefits p{font-size:16px;max-width:300px}

/* ---------- Schritte ---------- */
#so-funktionierts.b2c{background:#FBF3E8}
.b2c .b2c-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.b2c .b2c-steps li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0;background:none;border:0;box-shadow:none}
.b2c-mock{display:block;height:317px;width:auto;max-width:100%;object-fit:contain;margin:0 0 18px}
.b2c .b2c-num{font-family:var(--ed-sans);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ed-green)}
.b2c .b2c-num span{color:var(--ed-accent);margin-right:6px}
.b2c .b2c-steps h3{font-family:var(--ed-head);font-size:24px;font-weight:600}
.b2c .b2c-note{margin-top:40px}

/* ---------- Alltag ---------- */
#alltag.b2c{background:var(--ed-ivory)}
#alltag.b2c > .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:80px;align-items:start}
#alltag.b2c .intro{margin-bottom:0}
.b2c-bowl{display:block;width:136px;height:auto;border-radius:50%;margin-bottom:20px}
.b2c .b2c-features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.b2c .b2c-features li{padding:24px 0;border:0;border-top:1px solid var(--ed-line);border-radius:0;background:none}
.b2c .b2c-features h3{font-size:19px;margin-bottom:6px;overflow-wrap:break-word;hyphens:auto}
.b2c .b2c-features p{font-size:16px}

/* ---------- FAQ ---------- */
#fragen.b2c{background:#FBF3E8}
#fragen.b2c > .wrap.faq{max-width:820px}
#fragen.b2c h2{text-align:center;margin-bottom:48px}
#fragen.b2c details{margin:0;padding:0;background:none;border:0;border-top:1px solid #DCCFC0;border-radius:0}
#fragen.b2c details:last-child{border-bottom:1px solid #DCCFC0}
#fragen.b2c summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;min-height:0;font-family:var(--ed-sans);font-size:17px;font-weight:600;line-height:1.4;color:var(--ed-text);cursor:pointer;list-style:none}
#fragen.b2c summary::-webkit-details-marker{display:none}
#fragen.b2c summary::after{content:"+";flex-shrink:0;width:24px;text-align:center;font-size:24px;font-weight:300;line-height:1;color:var(--ed-green)}
#fragen.b2c details[open] summary::after{content:"\2212"}
#fragen.b2c details p{margin:0;padding:0 40px 22px 0;font-size:16px;line-height:1.65;color:var(--ed-muted)}
#fragen.b2c details p a{color:var(--ed-green);min-height:0}

/* ---------- Abschluss ---------- */
.android.b2c{background:var(--ed-green-deep);color:#fff;padding:112px 0}
.android.b2c > .wrap{max-width:760px;text-align:center}
.android.b2c h2{color:#fff}
.android.b2c p{color:rgba(255,255,255,.85)}
.android.b2c .fine{color:rgba(255,255,255,.7)}
.android.b2c .pill-btn.primary{background:var(--ed-ivory);color:var(--ed-green-deep)}
.android.b2c .pill-btn.primary:hover{background:#fff;color:var(--ed-green-deep)}
.android.b2c .pill-btn:focus-visible{outline-color:#fff}

/* ---------- Tablet 768–1023 ---------- */
@media (max-width:1023px){
.b2c > .wrap,.b2c-header > .wrap{padding-left:24px;padding-right:24px}
.section.b2c,.android.b2c{padding:80px 0}
.b2c h1{font-size:50px}
.b2c h2{font-size:38px}
.hero.b2c .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:48px;padding-bottom:72px}
.hero.b2c .hero-art{align-items:center}
.b2c .b2c-benefits li{padding:8px 20px}
.b2c .b2c-steps{gap:28px}
.b2c-mock{height:260px}
#alltag.b2c > .wrap{grid-template-columns:minmax(0,1fr);row-gap:40px}
}

/* ---------- Mobil < 768 ---------- */
@media (max-width:767px){
.b2c > .wrap,.b2c-header > .wrap{padding-left:20px;padding-right:20px}
.section.b2c,.android.b2c{padding:64px 0}
.b2c{font-size:16px;line-height:1.6}
.b2c h1{font-size:40px;line-height:1.08}
.b2c h2{font-size:31px;line-height:1.15}
.b2c p,.b2c .lead{font-size:16px}
.b2c .intro{margin-bottom:36px}
.b2c-header .site-nav{gap:0 16px}
.b2c-header .site-nav a{font-size:14px}
.hero.b2c .wrap{padding-top:32px;padding-bottom:56px;gap:32px}
.hero.b2c .hero-art picture{max-width:268px;margin:0 auto}
.hero.b2c .actions{flex-direction:column;align-items:stretch}
.b2c .pill-btn{width:100%;height:auto;padding:14px 20px;text-align:center}
.b2c .b2c-benefits{grid-template-columns:minmax(0,1fr)}
.b2c .b2c-benefits li{border-left:0;border-top:1px solid var(--ed-line);padding:32px 0}
.b2c .b2c-benefits li:first-child{border-top:0;padding-top:0}
.b2c .b2c-steps{grid-template-columns:minmax(0,1fr);gap:48px}
.b2c .b2c-steps li{align-items:center;text-align:center}
.b2c-mock{height:317px}
.b2c .b2c-features{grid-template-columns:minmax(0,1fr)}
#fragen.b2c h2{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){.b2c *{transition:none!important;animation:none!important}}

/* Heller Bildhintergrund der Konzept-Mockups verschmilzt mit dem Abschnitt */
.b2c-mock{mix-blend-mode:multiply}
/* Footer bündig mit den Abschnitten (Inhalt unverändert) */
.b2c-page .site-footer > .wrap{max-width:1180px;padding-left:32px;padding-right:32px;box-sizing:border-box}
@media (max-width:1023px){.b2c-page .site-footer > .wrap{padding-left:24px;padding-right:24px}}
@media (max-width:767px){.b2c-page .site-footer > .wrap{padding-left:20px;padding-right:20px}}

/* ---------- Schritte als Karussell auf dem Handy ---------- */
.b2c-dots{display:none}
@media (max-width:767px){
.b2c .b2c-steps{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin:0 -20px;padding:4px 20px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.b2c .b2c-steps::-webkit-scrollbar{display:none}
.b2c .b2c-steps li{scroll-snap-align:center;align-items:center;text-align:center}
.b2c .b2c-steps:focus-visible{outline:2px solid var(--ed-green);outline-offset:4px}
.b2c-mock{height:280px}
.b2c-dots{display:flex;justify-content:center;gap:4px;margin-top:20px}
.b2c-dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.b2c-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#D6CBBE;transition:width .15s ease}
.b2c-dots button[aria-current="step"]::before{width:24px;border-radius:4px;background:var(--ed-green)}
.b2c .b2c-note{margin-top:8px;text-align:center}
}

/* ---------- Vorteile als Karussell auf dem Handy ---------- */
@media (max-width:767px){
.b2c .b2c-benefits{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;margin:0 -20px;padding:4px 20px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.b2c .b2c-benefits::-webkit-scrollbar{display:none}
.b2c .b2c-benefits li,.b2c .b2c-benefits li:first-child{scroll-snap-align:center;border:1px solid var(--ed-line);border-radius:20px;background:#fff;padding:28px 20px}
.b2c .b2c-benefits:focus-visible{outline:2px solid var(--ed-green);outline-offset:4px}
}

/* Konzept-Screens als SVG (900×1800): scharf in jeder Größe, Höhe bestimmt die Darstellung */
.b2c-mock{mix-blend-mode:normal;aspect-ratio:1/2}
.b2c-mock{height:400px}
@media (max-width:1023px){.b2c-mock{height:340px}}
@media (max-width:767px){.b2c-mock{height:340px}}

/* ---------- Hero: aufgeräumtes Zweispalten-Layout ab 900px ---------- */
@media (min-width:900px){
.hero.b2c .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:64px;padding-bottom:88px}
.b2c h1{font-size:clamp(46px,4.4vw,64px)}
.hero.b2c .actions{flex-wrap:nowrap}
.hero.b2c .pill-btn{padding:0 22px;white-space:nowrap}
.hero.b2c .hero-art{align-items:stretch}
.hero.b2c .hero-art picture{max-width:none}
.hero.b2c figcaption{text-align:right}
}
@media (min-width:900px) and (max-width:1023px){
.hero.b2c .wrap{gap:36px}
.hero.b2c .actions{flex-wrap:wrap}
}

/* ================= Desktop-Raster vereinheitlichen =================
   Alle Abschnitte nutzen dasselbe Raster wie die (unveränderte) Demo:
   max. 1200px, 16px Rand – so liegen alle linken Kanten auf einer Linie. */
.b2c > .wrap,.b2c-header > .wrap,.b2c-page .site-footer > .wrap{max-width:1200px;padding-left:16px;padding-right:16px}
@media (max-width:1023px){.b2c > .wrap,.b2c-header > .wrap,.b2c-page .site-footer > .wrap{padding-left:16px;padding-right:16px}}
@media (max-width:767px){
.b2c > .wrap,.b2c-header > .wrap,.b2c-page .site-footer > .wrap{padding-left:16px;padding-right:16px}
.b2c .b2c-steps,.b2c .b2c-benefits{margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 16px}
}

/* Vorteile linksbündig wie alle anderen Abschnitte */
@media (min-width:768px){
.b2c .b2c-benefits li{align-items:flex-start;text-align:left;padding:4px 40px 4px 32px}
.b2c .b2c-benefits li:first-child{padding-left:0}
.b2c .b2c-benefits p{max-width:none}
}

/* Alltag: Text und Kacheln beginnen auf derselben Linie, Schale unter dem Text */
#alltag.b2c .b2c-bowl{margin:28px 0 0;width:136px}
#alltag.b2c .b2c-features li:nth-child(-n+2){border-top:0;padding-top:0}

/* FAQ: Überschrift links, Fragen rechts – gleiche Kanten wie der Rest */
@media (min-width:1024px){
#fragen.b2c > .wrap.faq{max-width:1200px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:80px;align-items:start}
#fragen.b2c h2{text-align:left;margin:0}
}
@media (max-width:1023px){#fragen.b2c > .wrap.faq{max-width:1200px}#fragen.b2c h2{text-align:left}}

/* Abschluss bleibt zentriert, aber auf dem Raster */
.android.b2c > .wrap{max-width:760px}

/* Karussells mobil: genau eine Karte pro Ansicht, kein Anschnitt, großzügiger Abstand */
@media (max-width:767px){
.b2c .b2c-steps,.b2c .b2c-benefits{grid-auto-columns:100%;gap:48px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.b2c .b2c-steps li,.b2c .b2c-benefits li,.b2c .b2c-benefits li:first-child{scroll-snap-align:start;scroll-snap-stop:always}
.b2c .b2c-benefits li,.b2c .b2c-benefits li:first-child{align-items:center;text-align:center;padding:32px 24px}
.b2c .b2c-benefits p{max-width:320px}
}

/* Demo-Gerichtsbilder (freigegeben): Teller rund und mit Abstand zeigen statt eng anzuschneiden */
.b2c-page #demo .card .img,.b2c-page #demo .chosen .img{background:#F7F2EB;padding:14px 0}
.b2c-page #demo .card img,.b2c-page #demo .chosen img{display:block;width:164px;height:164px;margin:0 auto;object-fit:cover;border-radius:50%;box-shadow:0 6px 18px rgba(31,41,55,.12)}
.b2c-page #demo .deck{height:276px}
.b2c-page #demo .deck.auto{height:auto}

/* Farbige Konzept-Mockups (1200×2400, Issue #24): Bild trägt eigenen Hintergrund, daher abgerundet */
.b2c-mock-wrap{display:block;margin:0 0 18px}
.b2c .b2c-mock{display:block;height:400px;width:auto;aspect-ratio:1/2;max-width:100%;margin:0;border-radius:22px;mix-blend-mode:normal;box-shadow:0 10px 28px rgba(31,41,55,.10)}
@media (max-width:1023px){.b2c .b2c-mock{height:360px}}
@media (max-width:767px){.b2c .b2c-mock{height:380px}.b2c .b2c-steps li .b2c-mock-wrap{margin-left:auto;margin-right:auto}}

/* ================= Issue #26: Feinschliff ================= */
/* Nur für Screenreader sichtbar */
.b2c-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hero: lesbare Zeilenlänge (~55–62 Zeichen), ruhige Abstände */
.hero.b2c .lead{max-width:31em;margin-bottom:40px}
.hero.b2c h1{margin-bottom:28px}
@media (min-width:900px){.hero.b2c .wrap{padding-bottom:72px}}

/* Benefits schließen direkt an den Hero an */
#vorteile.b2c{padding-top:56px;padding-bottom:88px}
@media (max-width:767px){#vorteile.b2c{padding-top:40px;padding-bottom:56px}}

/* Demo-Intro (außerhalb #sb-demo) in der Editorial-Typografie */
.b2c-page #demo > .wrap > .intro h2{font-family:var(--ed-head);font-weight:600;font-size:44px;line-height:1.12;letter-spacing:-.01em;color:var(--ed-text)}
.b2c-page #demo > .wrap > .intro .lead{font-family:var(--ed-sans);font-size:19px;line-height:1.65;color:var(--ed-muted);max-width:34em}
@media (max-width:1023px){.b2c-page #demo > .wrap > .intro h2{font-size:38px}}
@media (max-width:767px){.b2c-page #demo > .wrap > .intro h2{font-size:31px;line-height:1.15}.b2c-page #demo > .wrap > .intro .lead{font-size:16px}}

/* Fließtextspalten nicht zu breit */
.b2c .intro .lead{max-width:34em}

/* Sprach-Hinweis als Badge */
.hero.b2c .b2c-avail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.b2c-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--ed-tint-line);border-radius:999px;background:var(--ed-tint);color:var(--ed-green-deep);font-size:12px;font-weight:600;line-height:1.4}
.b2c-chip::before{content:"";width:14px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6B3F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E")}

/* Stimmen aus der Beta (nur sichtbar mit echten, freigegebenen Einträgen) */
#stimmen[hidden]{display:none}
.b2c .b2c-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0}
.b2c .b2c-quotes li{padding:8px 32px;border-left:1px solid var(--ed-line)}
.b2c .b2c-quotes li:first-child{border-left:0;padding-left:0}
.b2c .b2c-quotes blockquote{margin:0 0 14px;font-family:var(--ed-head);font-size:22px;line-height:1.4;color:var(--ed-text)}
.b2c .b2c-quote-by{font-size:14px;color:var(--ed-muted);margin:0}
@media (max-width:767px){.b2c .b2c-quotes li,.b2c .b2c-quotes li:first-child{border-left:0;padding:24px 0;border-top:1px solid var(--ed-line)}.b2c .b2c-quotes li:first-child{border-top:0;padding-top:0}}

/* ---------- Interaktiver App-Entwurf ---------- */
#app-entwurf.b2c{background:var(--ed-ivory);border-top:1px solid var(--ed-line)}
#app-entwurf.b2c > .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:80px;align-items:center}
.app-entwurf-text{display:flex;flex-direction:column;gap:16px;max-width:560px}
.app-entwurf-text .b2c-note{margin:0}
.app-entwurf-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.app-entwurf-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border:1px solid var(--ed-line);border-radius:999px;background:#fff;color:var(--ed-text);font:600 14px/1 var(--ed-sans);cursor:pointer}
.app-entwurf-nav button:hover{border-color:var(--ed-green)}
.app-entwurf-nr{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ed-tint);color:var(--ed-green-deep);font-size:13px}
.app-entwurf-nav button[aria-current="step"]{background:var(--ed-green-deep);border-color:var(--ed-green-deep);color:#fff}
.app-entwurf-nav button[aria-current="step"] .app-entwurf-nr{background:#fff;color:var(--ed-green-deep)}
.app-entwurf-nav button:focus-visible,.app-entwurf-reset:focus-visible{outline:2px solid var(--ed-green);outline-offset:3px}
.app-entwurf-reset{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--ed-green);font:600 15px/1 var(--ed-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.app-entwurf-phone{display:flex;flex-direction:column;align-items:center;min-width:0}
.app-entwurf-frame{position:relative;overflow:hidden;border-radius:40px;border:10px solid #1E1A22;box-sizing:content-box;background:#FFF8F0;box-shadow:0 20px 40px -12px rgba(31,41,55,.25)}
.app-entwurf-screen{position:absolute;top:0;left:0;width:390px;height:844px;transform-origin:0 0;overflow:hidden}
.app-entwurf-screen button,.app-entwurf-screen a{cursor:pointer}
.app-entwurf-screen button:focus-visible,.app-entwurf-screen a:focus-visible,.app-entwurf-screen input:focus-visible{outline:3px solid #F3C77A;outline-offset:2px}
@media (max-width:1023px){#app-entwurf.b2c > .wrap{column-gap:40px}}
@media (max-width:767px){
#app-entwurf.b2c > .wrap{grid-template-columns:minmax(0,1fr);row-gap:28px}
.app-entwurf-phone{order:2}
.app-entwurf-text{display:contents}
.app-entwurf-text > .eyebrow,.app-entwurf-text > h2,.app-entwurf-text > .lead,.app-entwurf-text > .b2c-note{order:1}
.app-entwurf-nav{order:3;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.app-entwurf-nav::-webkit-scrollbar{display:none}
.app-entwurf-nav button{flex:0 0 auto}
.app-entwurf-reset{order:4;align-self:center}
}
#app-entwurf.b2c > .wrap{grid-template-columns:minmax(0,1fr) 380px}
.app-entwurf-phone{width:100%}
@media (max-width:767px){#app-entwurf.b2c > .wrap{grid-template-columns:minmax(0,1fr)}}

/* Schritte ohne Bilder: auf dem Desktop drei Spalten mit feiner Linie, auf dem Handy untereinander */
.b2c .b2c-steps li{border-top:1px solid var(--ed-line);padding-top:24px}
@media (max-width:767px){
.b2c .b2c-steps{display:grid;grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-columns:auto;gap:0;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.b2c .b2c-steps li{align-items:flex-start;text-align:left;padding:24px 0;scroll-snap-align:none}
.b2c .b2c-steps li:first-child{border-top:0;padding-top:0}
}
.app-entwurf-screen .ae-glow{animation:ae-glow 1.6s ease-in-out infinite}
.app-entwurf-screen .ae-hand{animation:ae-hand 1.2s ease-in-out infinite}
@keyframes ae-glow{0%,100%{box-shadow:0 0 0 0 rgba(15,107,63,.35)}50%{box-shadow:0 0 0 6px rgba(15,107,63,.12)}}
@keyframes ae-hand{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.app-entwurf-screen .ae-glow,.app-entwurf-screen .ae-hand{animation:none}.app-entwurf-screen .ae-glow{box-shadow:0 0 0 4px rgba(15,107,63,.18)}}
.app-entwurf-screen h3{font-family:var(--ed-serif);font-weight:600;letter-spacing:-.01em}

#sb-agent[hidden]{display:none!important}
.app-entwurf-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:12px;padding:24px;border:1px solid var(--ed-line);border-radius:20px;background:#fff}
.app-entwurf-cta p{margin:0}
.b2c .app-entwurf-cta .app-entwurf-cta-h{font-family:var(--ed-head);font-size:24px;line-height:1.2;font-weight:600;color:var(--ed-text)}
.app-entwurf-cta-t{color:var(--ed-muted);font-size:16px;line-height:1.5}
.app-entwurf-cta .pill-btn{margin-top:6px}
.app-entwurf-cta .b2c-avail{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:767px){.app-entwurf-cta{order:5;margin-top:0;padding:20px}.app-entwurf-cta .pill-btn{width:100%}}

/* ---------- Hero „Küchenzettel“ ---------- */
.hero-zettel.b2c{background:var(--ed-ivory)}
.hero-zettel.b2c .wrap{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:24px;align-items:center;padding-top:40px;padding-bottom:56px}
.hero-zettel.b2c h1{font-size:clamp(42px,5.2vw,64px);line-height:1.03;margin:0 0 22px;color:var(--ed-green-deep)}
.hero-zettel.b2c .lead{max-width:30em;margin:0 0 32px;color:#4C4452}
.hero-zettel.b2c .actions{margin:0}
.hero-plant{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 0;padding:0;list-style:none;max-width:520px}
.hero-plant li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--ed-line);font-size:13px;font-weight:600;line-height:1.2;color:var(--ed-green-deep)}
.hero-plant li.hero-plant-label{background:none;border:0;padding:7px 2px 7px 0;color:var(--ed-muted);font-weight:500}
.hero-plant svg.vegan{color:#3F7A3A}
.hero-buehne{position:relative;container-type:inline-size;aspect-ratio:640/700;width:100%;max-width:640px;justify-self:end}
.hero-buehne::before{content:"";position:absolute;inset:0 0 0 8%;border-radius:40px;background:var(--ed-tint)}
.hero-phone{position:absolute;left:28%;top:7%;width:44%;aspect-ratio:300/649;border-radius:13cqw;padding:3cqw;background:#1E1A22;transform:rotate(3deg);box-shadow:0 40px 70px -30px rgba(40,25,45,.45);box-sizing:border-box;z-index:2}
.hero-video{display:block;width:100%;height:100%;border-radius:10cqw;object-fit:cover;background:#FDFBF8}
.hero-teller{position:absolute;border-radius:50%;object-fit:cover;border:1cqw solid #fff;box-shadow:0 22px 30px -18px rgba(40,25,30,.5);z-index:3}
.hero-teller.t1{width:31%;height:auto;aspect-ratio:1;right:-2%;top:4%}
.hero-teller.t2{width:25%;height:auto;aspect-ratio:1;left:7%;bottom:6%}
.hero-teller.t3{width:26%;height:auto;aspect-ratio:1;right:1%;bottom:9%}
.hero-zettel-note{position:absolute;margin:0;padding:2.8cqw 3.2cqw 3.4cqw;background:#FFF4C2;font-family:var(--ed-serif);font-style:italic;font-weight:600;font-size:3.1cqw;line-height:1.35;color:var(--ed-green-deep);box-shadow:0 14px 24px -14px rgba(0,0,0,.35);z-index:4}
.hero-zettel-note::before{content:"";position:absolute;top:-1.8cqw;left:50%;width:12cqw;height:3.6cqw;margin-left:-6cqw;background:rgba(255,255,255,.7);transform:rotate(-3deg)}
.hero-zettel-note.n1{left:-6%;top:2%;transform:rotate(-5deg)}
.hero-zettel-note.n2{right:2%;top:43%;background:#FFE1CF;transform:rotate(4deg)}
.hero-pfeil{position:absolute;left:13%;top:18%;width:16%;color:var(--ed-green-deep);z-index:4}
@media (max-width:899px){
.hero-zettel.b2c .wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
.hero-buehne{justify-self:center;max-width:520px}
.hero-zettel-note.n1{left:-2%;top:1%}
.hero-pfeil{display:none}
}
@media (max-width:767px){.hero-zettel.b2c .actions .pill-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.hero-phone{transform:none}}
@media (max-width:599px){
.hero-buehne{aspect-ratio:640/760}
.hero-phone{left:22%;top:5%;width:54%}
.hero-teller.t1{width:27%;right:-3%;top:2%}
.hero-teller.t2{width:23%;left:2%;bottom:4%}
.hero-teller.t3{width:24%;right:-1%;bottom:7%}
.hero-zettel-note.n1{left:-3%;top:60%;font-size:3.4cqw;transform:rotate(-6deg)}
.hero-zettel-note.n2,.hero-pfeil{display:none}
}

/* Überschriften in Verdana (Oktober 2026) */
.b2c h1,.b2c h2{font-weight:700;letter-spacing:-.02em;line-height:1.12}
.b2c h2{font-size:clamp(28px,3.2vw,40px)}
.b2c .b2c-benefits h3,.b2c .b2c-steps h3{font-size:20px;font-weight:700}
.hero-zettel.b2c h1{font-size:clamp(34px,4.3vw,54px);line-height:1.08}
.b2c .app-entwurf-cta .app-entwurf-cta-h{font-size:21px;font-weight:700}

/* ================= Design-System „klar & ruhig“ (Oktober 2026) =================
   Eine Schrift (Inter), Dunkelgrün als Markenfarbe, Schwarz für Überschriften,
   wechselnde Flächen (Weiß, Salbei, Sand, Dunkelgrün), Orange nur als kleiner Akzent. */
.b2c-page{--ed-ivory:#FFFFFF;--ed-green-deep:#0B3D2A;--ed-green:#0F6B3F;--ed-text:#111827;--ed-muted:#5F6670;--ed-line:#E5E7EB;--ed-accent:#E07A3F;--ed-tint:#EEF5F0;--ed-tint-line:#D5E5DA;--ed-sage:#F1F6F2;--ed-sand:#FAF5EC;
  --ed-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--ed-head:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;--ed-serif:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.b2c h1,.b2c h2{font-weight:700;letter-spacing:-.025em;color:var(--ed-text)}
.b2c h1 em,.b2c h2 em{font-style:normal;color:var(--ed-green)}
.hero-zettel.b2c h1{color:var(--ed-text)}
.b2c-header{background:#fff}
.b2c-header .brand,.b2c-header .brand span{font-style:normal;font-weight:700;letter-spacing:-.02em}
.b2c-header .brand{color:var(--ed-text)}.b2c-header .brand span{color:var(--ed-green)}
.b2c .eyebrow{color:var(--ed-green)}
.b2c .pill-btn.primary{background:var(--ed-green)}.b2c .pill-btn.primary:hover{background:var(--ed-green-deep)}
.b2c .pill-btn.secondary{border-color:var(--ed-text);color:var(--ed-text)}
/* Flächen-Rhythmus */
.hero-zettel.b2c{background:#fff}
#vorteile.b2c{background:var(--ed-sage);border-top:0}
#app-entwurf.b2c{background:#fff;border-top:0}
#alltag.b2c{background:var(--ed-sand)}
#fragen.b2c{background:#fff}
.android.b2c{background:var(--ed-green-deep)}
.android.b2c .pill-btn.primary{background:#fff;color:var(--ed-green-deep)}
/* Hero-Bühne */
.hero-buehne::before{background:linear-gradient(140deg,#E6F0E9 0%,#F6F1E7 100%)}
.hero-phone{background:#111827}
.hero-zettel-note{background:#fff;font-family:var(--ed-sans);font-style:normal;font-weight:600;font-size:2.7cqw;line-height:1.45;color:var(--ed-text);border:1px solid var(--ed-line);border-radius:2.4cqw;transform:none;box-shadow:0 18px 30px -22px rgba(17,24,39,.4)}
.hero-zettel-note::before{display:none}
.hero-zettel-note.n2{background:#FFF4E8;border-color:#F6D9BF}
.hero-pfeil{display:none}
.hero-plant li{color:var(--ed-text)}
@media (max-width:599px){.hero-zettel-note.n1{transform:none;font-size:3.2cqw}}
/* App-Entwurf */
.app-entwurf-screen h3{letter-spacing:-.02em}
.app-entwurf-frame{border-color:#111827}
.b2c .app-entwurf-cta{background:var(--ed-sage);border-color:var(--ed-tint-line)}
#fragen.b2c details,#fragen.b2c details:last-child{border-color:var(--ed-line)}