/* Startseite (DE) – Visual Design nach Implementation Task 2.
   Nur für Abschnitte mit .b2c; die Demo (#demo) behält ihr bisheriges Erscheinungsbild. */
@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: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')}

.b2c-page{
  --c-primary:#0F6B3F;--c-primary-hover:#0B5432;--c-green2:#A7D36B;--c-yellow:#FFD14D;--c-orange:#FF6B00;--c-error:#E63946;
  --c-bg:#FFF8F0;--c-surface:#FFFFFF;--c-text:#1F2937;--c-text2:#64748B;--c-border:#E5E7EB;
  --shadow-subtle:0 4px 16px rgba(31,41,55,.05);
  background:var(--c-bg);font-family:Inter,sans-serif
}
/* Demo unverändert: bisherige Schrift und Hintergrund festhalten */
.b2c-page #demo{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#F8F7F4}

/* ---------- Typografie (Desktop) ---------- */
.b2c{color:var(--c-text);font-size:17px;line-height:1.65}
.b2c h1{font-size:56px;font-weight:700;line-height:1.12;letter-spacing:0}
.b2c h2{font-size:36px;font-weight:700;line-height:1.2;letter-spacing:0}
.b2c h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:0}
.b2c p,.b2c .lead{font-size:17px;font-weight:400;line-height:1.65;color:var(--c-text2)}
.b2c .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--c-primary)}
.b2c .hint,.b2c .fine{font-size:13px;line-height:1.5}
.b2c h1,.b2c h2,.b2c h3{color:var(--c-text)}

/* ---------- Layout ---------- */
.b2c > .wrap{max-width:1180px;padding-left:32px;padding-right:32px;box-sizing:border-box}
.section.b2c{padding:96px 0}
.b2c .intro{margin-bottom:40px;gap:12px}

/* ---------- Buttons ---------- */
.b2c .pill-btn{height:52px;min-height:52px;padding:0 24px;border-radius:12px;font-size:16px;font-weight:600;box-shadow:none;box-sizing:border-box}
.b2c .pill-btn.primary{background:var(--c-primary);color:#fff;border:0}
.b2c .pill-btn.primary:hover{background:var(--c-primary-hover);color:#fff}
.b2c .pill-btn.secondary{background:transparent;border:1px solid var(--c-primary);color:var(--c-primary);min-height:52px}
.b2c a:focus-visible,.b2c summary:focus-visible,.b2c .pill-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}

/* ---------- Hero ---------- */
.hero.b2c{background:var(--c-bg)}
.hero.b2c .wrap{display:grid;grid-template-columns:52fr 48fr;gap:48px;align-items:center;min-height:560px;padding-top:56px;padding-bottom:56px}
.hero.b2c .hero-copy{display:flex;flex-direction:column;gap:0;min-width:0}
.hero.b2c .eyebrow{margin-bottom:16px}
.hero.b2c h1{max-width:650px;margin-bottom:24px}
.hero.b2c h1 em{font-style:normal;color:var(--c-primary)}
.hero.b2c .lead{max-width:540px;margin:0 0 32px}
.hero.b2c .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.hero.b2c .hint{align-self:flex-start;color:var(--c-text2);background:var(--c-surface);border:1px solid var(--c-border);box-shadow:none}
.hero.b2c .hint::before{background:var(--c-orange)}
.hero.b2c .hero-art{display:flex;justify-content:center;min-width:0}
.hero.b2c .hero-art img{width:100%;max-width:400px;height:auto;aspect-ratio:508/705;object-fit:contain;border-radius:20px;border:1px solid var(--c-border);box-shadow:var(--shadow-subtle)}

/* ---------- Vorteile ---------- */
#vorteile.b2c{background:var(--c-surface)}
.b2c .b2c-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.b2c .b2c-benefits li{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:20px;border:1px solid var(--c-border);background:var(--c-surface);box-shadow:none}
.b2c-ico-wrap{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#EAF4E7}
.b2c-ico-wrap .b2c-ico{width:24px;height:24px;margin:0;stroke:var(--c-primary);stroke-width:2}

/* ---------- So funktioniert's ---------- */
#so-funktionierts.b2c{background:var(--c-bg)}
.b2c .b2c-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.b2c .b2c-steps li{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;border:1px solid var(--c-border);background:var(--c-surface);box-shadow:none}
.b2c .b2c-num{font-size:14px;font-weight:700;line-height:1.5;letter-spacing:0;color:var(--c-orange)}
.b2c-shot{display:block;width:100%;max-width:280px;height:auto;margin-top:8px;border-radius:18px;border:1px solid var(--c-border)}

/* ---------- Alltag ---------- */
#alltag.b2c{background:var(--c-surface)}
#alltag.b2c > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start}
#alltag.b2c .intro{margin-bottom:0}
.b2c .b2c-features{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.b2c .b2c-features li{padding:24px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface)}
.b2c .b2c-features h3{font-size:22px}

/* ---------- FAQ ---------- */
#fragen.b2c{background:var(--c-bg)}
#fragen.b2c > .wrap.faq{max-width:800px}
#fragen.b2c h2{text-align:center;margin-bottom:40px}
#fragen.b2c details{margin:0 0 16px;padding:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px}
#fragen.b2c details:last-child{margin-bottom:0}
#fragen.b2c summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;min-height:0;font-size:16px;font-weight:600;line-height:1.4;color:var(--c-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:22px;font-weight:400;line-height:1;color:var(--c-primary)}
#fragen.b2c details[open] summary::after{content:"\2212"}
#fragen.b2c details p{margin:0;padding:0 20px 20px;font-size:15px;line-height:1.6;color:var(--c-text2)}
#fragen.b2c details p a{color:var(--c-primary);min-height:0}

/* ---------- Abschluss ---------- */
.android.b2c{background:var(--c-primary);color:#fff;padding:80px 0}
.android.b2c > .wrap{max-width:calc(680px + 64px);text-align:center}
.android.b2c h2{color:#fff}
.android.b2c p{color:#fff}
.android.b2c .fine{color:rgba(255,255,255,.8);font-size:13px}
.android.b2c .pill-btn.primary{background:#fff;color:var(--c-primary)}
.android.b2c .pill-btn.primary:hover{background:#F1F5F2;color:var(--c-primary-hover)}
.android.b2c .pill-btn:focus-visible{outline-color:#fff}

/* ---------- Tablet 768–1023 ---------- */
@media (max-width:1023px){
.b2c > .wrap{padding-left:24px;padding-right:24px}
.section.b2c{padding:72px 0}
.android.b2c{padding:72px 0}
.hero.b2c .wrap{grid-template-columns:1fr 1fr;gap:32px;min-height:0}
#alltag.b2c > .wrap{grid-template-columns:1fr;row-gap:40px}
}

/* ---------- Mobil < 768 ---------- */
@media (max-width:767px){
.b2c > .wrap{padding-left:20px;padding-right:20px}
.section.b2c{padding:56px 0}
.android.b2c{padding:56px 0}
.b2c{font-size:16px;line-height:1.6}
.b2c h1{font-size:36px;line-height:1.15}
.b2c h2{font-size:28px;line-height:1.2}
.b2c h3,.b2c .b2c-features h3{font-size:20px;line-height:1.3}
.b2c p,.b2c .lead{font-size:16px;line-height:1.6}
.b2c .hint,.b2c .fine,.android.b2c .fine{font-size:12px}
.b2c .intro,#fragen.b2c h2{margin-bottom:28px}
.hero.b2c .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:40px}
.hero.b2c .actions{flex-direction:column;align-items:stretch}
.hero.b2c .actions .pill-btn{width:100%}
.hero.b2c .hint{align-self:stretch}
.b2c .b2c-benefits{grid-template-columns:1fr;gap:16px}
.b2c .b2c-steps{grid-template-columns:1fr;gap:40px}
.b2c .b2c-features{grid-template-columns:1fr}
#alltag.b2c > .wrap{row-gap:28px}
.android.b2c .pill-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.b2c *{transition:none!important;animation:none!important}}

/* Spalten dürfen schrumpfen; lange deutsche Wörter werden getrennt statt überzulaufen */
.b2c .b2c-benefits,.b2c .b2c-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.b2c .b2c-features{grid-template-columns:repeat(2,minmax(0,1fr))}
.b2c h3{overflow-wrap:break-word;hyphens:auto}
@media (max-width:767px){.b2c .b2c-benefits,.b2c .b2c-steps,.b2c .b2c-features{grid-template-columns:minmax(0,1fr)}}
/* Langer Buttontext auf schmalen Screens: mindestens 52px, darf bei Umbruch wachsen statt zu quetschen */
@media (max-width:767px){.b2c .pill-btn{height:auto;padding-top:12px;padding-bottom:12px;text-align:center}}