/* ============================================================
   lebensmittelverschwendung.at – Haupt-Stylesheet
   Mobile-first, barrierefrei, keine externen Abhängigkeiten
   ============================================================ */

/* 1. Design Tokens
   ============================================================ */
:root {
  --c-primary:        #2e7d32;
  --c-primary-dk:     #1b5e20;
  --c-primary-lt:     #43a047;
  --c-primary-pale:   #e8f5e9;

  --c-cream:          #f9f5eb;
  --c-cream-dk:       #ede8d8;

  --c-amber:          #f59e0b;
  --c-amber-dk:       #d97706;
  --c-amber-pale:     #fef3c7;

  --c-orange:         #e65100;
  --c-orange-pale:    #fff3e0;

  --c-red:            #c62828;
  --c-red-pale:       #ffebee;

  --c-text:           #1a1a1a;
  --c-text-muted:     #555;
  --c-text-light:     #777;

  --c-white:          #fff;
  --c-gray-50:        #fafafa;
  --c-gray-100:       #f5f5f5;
  --c-gray-200:       #eee;
  --c-gray-300:       #e0e0e0;
  --c-gray-400:       #bdbdbd;
  --c-gray-600:       #757575;
  --c-gray-800:       #424242;

  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  --lh-tight:   1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.06);

  --trans-fast: 150ms ease;
  --trans-base: 250ms ease;
  --trans-slow: 400ms ease;
}

/* 2. Reset
   ============================================================ */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100% }
body { font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-base);color:var(--c-text);background:var(--c-white);overflow-x:hidden }
img,video { max-width:100%;height:auto;display:block }
ul,ol { list-style:none }
button { font-family:inherit;cursor:pointer;border:none;background:none }
input,textarea,select { font-family:inherit;font-size:inherit }
h1,h2,h3,h4,h5,h6 { line-height:var(--lh-tight);font-weight:var(--fw-bold);color:var(--c-text) }
p { line-height:var(--lh-relaxed) }

a {
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--trans-fast);
}
a:hover { color:var(--c-primary-dk) }
a:focus-visible { outline:3px solid var(--c-amber);outline-offset:3px;border-radius:var(--r-sm) }

/* 3. Layout helpers
   ============================================================ */
.container        { max-width:1200px;margin-inline:auto;padding-inline:var(--sp-4) }
.container--wide  { max-width:1400px;margin-inline:auto;padding-inline:var(--sp-4) }
.container--narrow{ max-width:800px;margin-inline:auto;padding-inline:var(--sp-4) }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

@media(min-width:600px){ .container,.container--wide,.container--narrow{ padding-inline:var(--sp-6) } }
@media(min-width:960px){ .container,.container--wide,.container--narrow{ padding-inline:var(--sp-8) } }

/* 4. Buttons
   ============================================================ */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);font-size:var(--text-base);font-weight:var(--fw-bold);
  line-height:1.4;border-radius:var(--r-full);text-decoration:none;
  border:2px solid transparent;
  transition:background-color var(--trans-base),color var(--trans-base),
    border-color var(--trans-base),transform var(--trans-fast),box-shadow var(--trans-base);
  cursor:pointer;white-space:nowrap;user-select:none;
}
.btn:focus-visible { outline:3px solid var(--c-amber);outline-offset:3px }
.btn:active { transform:translateY(1px) }

.btn--primary { background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary) }
.btn--primary:hover { background:var(--c-primary-dk);border-color:var(--c-primary-dk);color:var(--c-white);box-shadow:var(--shadow-md);transform:translateY(-1px) }

.btn--accent { background:var(--c-amber);color:var(--c-text);border-color:var(--c-amber) }
.btn--accent:hover { background:var(--c-amber-dk);border-color:var(--c-amber-dk);color:var(--c-text);box-shadow:var(--shadow-md);transform:translateY(-1px) }

.btn--outline { background:transparent;color:var(--c-primary);border-color:var(--c-primary) }
.btn--outline:hover { background:var(--c-primary);color:var(--c-white);transform:translateY(-1px) }

.btn--outline-white { background:transparent;color:var(--c-white);border-color:var(--c-white) }
.btn--outline-white:hover { background:var(--c-white);color:var(--c-primary) }

.btn--lg { padding:var(--sp-4) var(--sp-8);font-size:var(--text-md) }
.btn--sm { padding:var(--sp-2) var(--sp-4);font-size:var(--text-sm) }

/* 5. Skip link
   ============================================================ */
.skip-link {
  position:absolute;top:-100px;left:var(--sp-4);
  padding:var(--sp-3) var(--sp-5);background:var(--c-primary);color:var(--c-white);
  font-weight:var(--fw-bold);border-radius:0 0 var(--r-md) var(--r-md);z-index:9999;
  text-decoration:none;transition:top var(--trans-fast);
}
.skip-link:focus { top:0;outline:3px solid var(--c-amber);outline-offset:2px }

/* 6. Header & Navigation
   ============================================================ */
.site-header {
  position:sticky;top:0;z-index:200;
  background:var(--c-white);border-bottom:2px solid var(--c-gray-200);box-shadow:var(--shadow-sm);
}
.header-inner {
  display:flex;align-items:center;justify-content:space-between;
  height:64px;gap:var(--sp-4);
}
.site-logo {
  display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;
  color:var(--c-text);font-weight:var(--fw-bold);font-size:var(--text-lg);flex-shrink:0;
}
.site-logo:hover { color:var(--c-primary) }
.logo-icon {
  width:40px;height:40px;background:var(--c-primary);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-icon svg { width:24px;height:24px;fill:var(--c-white) }
.logo-text { display:flex;flex-direction:column }
.logo-text-main { color:var(--c-primary) }
.logo-text-sub { font-size:var(--text-xs);font-weight:var(--fw-normal);color:var(--c-text-muted);line-height:1;margin-top:2px }

.main-nav { display:none }
@media(min-width:960px){
  .main-nav { display:flex;align-items:center;gap:var(--sp-1) }
}
.main-nav a {
  display:flex;align-items:center;padding:var(--sp-2) var(--sp-3);
  font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--c-text);
  text-decoration:none;border-radius:var(--r-md);
  transition:background-color var(--trans-fast),color var(--trans-fast);white-space:nowrap;
}
.main-nav a:hover { background:var(--c-primary-pale);color:var(--c-primary) }
.main-nav a.active { background:var(--c-primary-pale);color:var(--c-primary);font-weight:var(--fw-bold) }

.header-cta { display:none;flex-shrink:0 }
@media(min-width:960px){ .header-cta { display:flex } }

.nav-toggle {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;border-radius:var(--r-md);background:none;
  border:2px solid var(--c-gray-300);padding:var(--sp-2);
  transition:background-color var(--trans-fast);
}
.nav-toggle:hover { background:var(--c-gray-100) }
.nav-toggle span { display:block;width:22px;height:2px;background:var(--c-text);border-radius:2px;transition:transform var(--trans-base),opacity var(--trans-fast) }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media(min-width:960px){ .nav-toggle { display:none } }

.mobile-menu {
  display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:var(--c-white);z-index:100;overflow-y:auto;
  padding:var(--sp-6) var(--sp-4);border-top:1px solid var(--c-gray-200);
}
.mobile-menu.is-open { display:block }
.mobile-menu nav { display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-8) }
.mobile-menu a {
  display:block;padding:var(--sp-4);font-size:var(--text-md);font-weight:var(--fw-medium);
  color:var(--c-text);text-decoration:none;border-radius:var(--r-md);
  border-left:4px solid transparent;transition:background-color var(--trans-fast),border-color var(--trans-fast);
}
.mobile-menu a:hover,.mobile-menu a.active {
  background:var(--c-primary-pale);border-left-color:var(--c-primary);color:var(--c-primary);
}
.mobile-menu-cta { padding-top:var(--sp-4);border-top:1px solid var(--c-gray-200) }

/* 7. Breadcrumb
   ============================================================ */
.breadcrumb { padding:var(--sp-3) 0;border-bottom:1px solid var(--c-gray-200);background:var(--c-gray-50) }
.breadcrumb ol { display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--text-sm);color:var(--c-text-muted) }
.breadcrumb li { display:flex;align-items:center;gap:var(--sp-2) }
.breadcrumb li:not(:last-child)::after { content:'›';color:var(--c-gray-400) }
.breadcrumb a { color:var(--c-text-muted);text-decoration:none }
.breadcrumb a:hover { color:var(--c-primary);text-decoration:underline }
.breadcrumb [aria-current="page"] { color:var(--c-text);font-weight:var(--fw-medium) }

/* 8. Hero
   ============================================================ */
.hero {
  background:linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 55%, #388e3c 100%);
  color:var(--c-white);padding:var(--sp-16) 0 var(--sp-20);position:relative;overflow:hidden;
}
.hero::before {
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.05) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(245,158,11,.15) 0%,transparent 40%);
  pointer-events:none;
}
.hero-content { position:relative;z-index:1;max-width:720px }
.hero-badge {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:rgba(255,255,255,.15);backdrop-filter:blur(4px);color:var(--c-white);
  font-size:var(--text-sm);font-weight:var(--fw-medium);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.25);margin-bottom:var(--sp-6);
}
.hero h1 {
  color:var(--c-white);font-size:clamp(var(--text-2xl),5vw,var(--text-5xl));
  line-height:1.1;margin-bottom:var(--sp-6);letter-spacing:-0.02em;
}
.hero h1 em { font-style:normal;color:var(--c-amber) }
.hero p {
  font-size:clamp(var(--text-base),2vw,var(--text-lg));color:rgba(255,255,255,.9);
  margin-bottom:var(--sp-8);max-width:600px;line-height:var(--lh-relaxed);
}
.hero-actions { display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center }
.hero-stats {
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
  margin-top:var(--sp-12);padding-top:var(--sp-8);border-top:1px solid rgba(255,255,255,.2);
}
.hero-stat { text-align:center }
.hero-stat-number { display:block;font-size:var(--text-2xl);font-weight:var(--fw-bold);color:var(--c-amber);line-height:1;margin-bottom:var(--sp-1) }
.hero-stat-label { font-size:var(--text-xs);color:rgba(255,255,255,.75);line-height:1.3 }

@media(min-width:600px){ .hero { padding:var(--sp-20) 0 var(--sp-24) } }
@media(min-width:960px){ .hero { padding:var(--sp-24) 0 } }

.hero--with-image { position:relative }
.hero-image-bg {
  position:absolute;inset:0;
  background-image:url('https://www.lebensmittelverschwendung.at/Lebensmittelverschwendung-klein.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0;
}
.hero-overlay {
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(27,94,32,.92) 0%,rgba(46,125,50,.85) 55%,rgba(56,142,60,.80) 100%);
  z-index:1;
}
.hero--with-image .hero-content { position:relative;z-index:2 }

/* 9. Sections
   ============================================================ */
.section        { padding:var(--sp-16) 0 }
.section--cream { background:var(--c-cream) }
.section--green { background:var(--c-primary-pale) }
.section--gray  { background:var(--c-gray-50) }

@media(min-width:960px){ .section { padding:var(--sp-20) 0 } }

.section-label {
  display:inline-block;font-size:var(--text-sm);font-weight:var(--fw-bold);
  color:var(--c-primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--sp-3);
}
.section-title {
  font-size:clamp(var(--text-xl),3vw,var(--text-3xl));color:var(--c-text);
  margin-bottom:var(--sp-4);letter-spacing:-0.01em;
}
.section-intro {
  font-size:var(--text-md);color:var(--c-text-muted);max-width:600px;
  margin-inline:auto;line-height:var(--lh-relaxed);
}
.section-header { margin-bottom:var(--sp-10);text-align:center }

/* 10. Cards & Grids
   ============================================================ */
.grid-2 { display:grid;grid-template-columns:1fr;gap:var(--sp-6) }
.grid-3 { display:grid;grid-template-columns:1fr;gap:var(--sp-6) }
.grid-4 { display:grid;grid-template-columns:1fr;gap:var(--sp-5) }

@media(min-width:600px){
  .grid-2 { grid-template-columns:repeat(2,1fr) }
  .grid-4 { grid-template-columns:repeat(2,1fr) }
}
@media(min-width:768px){ .grid-3 { grid-template-columns:repeat(2,1fr) } }
@media(min-width:960px){
  .grid-3 { grid-template-columns:repeat(3,1fr) }
  .grid-4 { grid-template-columns:repeat(4,1fr) }
}

.card {
  background:var(--c-white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  overflow:hidden;border:1px solid var(--c-gray-200);
  transition:box-shadow var(--trans-base),transform var(--trans-base);
}
.card:hover { box-shadow:var(--shadow-lg);transform:translateY(-3px) }
.card-body { padding:var(--sp-6) }
.card-icon {
  width:56px;height:56px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--sp-4);font-size:28px;flex-shrink:0;
}
.card-icon--green  { background:var(--c-primary-pale) }
.card-icon--amber  { background:var(--c-amber-pale) }
.card-icon--orange { background:var(--c-orange-pale) }
.card-icon--red    { background:var(--c-red-pale) }
.card h3 { font-size:var(--text-lg);margin-bottom:var(--sp-2) }
.card p  { font-size:var(--text-sm);color:var(--c-text-muted);line-height:var(--lh-relaxed) }

/* Tip card */
.tip-card {
  display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5);
  background:var(--c-white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  border:1px solid var(--c-gray-200);
  transition:box-shadow var(--trans-base),transform var(--trans-base);
}
.tip-card:hover { box-shadow:var(--shadow-md);transform:translateY(-2px) }
.tip-number {
  width:36px;height:36px;border-radius:var(--r-full);background:var(--c-primary);
  color:var(--c-white);font-weight:var(--fw-bold);font-size:var(--text-sm);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.tip-card h3 { font-size:var(--text-base);margin-bottom:var(--sp-1) }
.tip-card p  { font-size:var(--text-sm);color:var(--c-text-muted) }

/* Fact card */
.fact-card {
  text-align:center;padding:var(--sp-8) var(--sp-6);
  background:linear-gradient(135deg,var(--c-primary-pale),var(--c-cream));
  border-radius:var(--r-lg);border:1px solid var(--c-primary-lt);
}
.fact-number { font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--fw-bold);color:var(--c-primary);line-height:1;margin-bottom:var(--sp-2) }
.fact-label  { font-size:var(--text-sm);color:var(--c-text-muted);max-width:180px;margin-inline:auto }

/* Feature box */
.feature-box {
  background:var(--c-white);border-radius:var(--r-lg);border:1px solid var(--c-gray-200);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow var(--trans-base),transform var(--trans-base);
}
.feature-box:hover { box-shadow:var(--shadow-lg);transform:translateY(-4px) }
.feature-box img { width:100%;aspect-ratio:16/9;object-fit:cover }
.feature-box-body { padding:var(--sp-6);flex:1;display:flex;flex-direction:column }
.feature-box-label { font-size:var(--text-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--c-primary);margin-bottom:var(--sp-2) }
.feature-box h3 { font-size:var(--text-lg);margin-bottom:var(--sp-3) }
.feature-box p  { font-size:var(--text-sm);color:var(--c-text-muted);margin-bottom:var(--sp-5);flex:1;line-height:var(--lh-relaxed) }

/* 11. Page header
   ============================================================ */
.page-header {
  background:linear-gradient(135deg,var(--c-primary-dk),var(--c-primary));
  color:var(--c-white);padding:var(--sp-12) 0;
}
.page-header h1 { color:var(--c-white);font-size:clamp(var(--text-xl),4vw,var(--text-3xl));margin-bottom:var(--sp-3) }
.page-header p  { font-size:var(--text-md);color:rgba(255,255,255,.85);max-width:640px }

/* 12. FAQ / Accordion
   ============================================================ */
.faq-list { display:flex;flex-direction:column;gap:var(--sp-3);max-width:800px;margin-inline:auto }
.faq-item { border:1px solid var(--c-gray-200);border-radius:var(--r-lg);overflow:hidden;background:var(--c-white) }
.faq-question {
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);font-size:var(--text-base);font-weight:var(--fw-bold);
  color:var(--c-text);cursor:pointer;text-align:left;width:100%;background:none;border:none;
  transition:background-color var(--trans-fast);
}
.faq-question:hover { background:var(--c-gray-50) }
.faq-question[aria-expanded="true"] { color:var(--c-primary);background:var(--c-primary-pale) }
.faq-icon {
  width:24px;height:24px;border-radius:var(--r-full);border:2px solid var(--c-gray-300);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;
  transition:transform var(--trans-base),background-color var(--trans-fast),border-color var(--trans-fast),color var(--trans-fast);
  color:var(--c-text-muted);
}
.faq-question[aria-expanded="true"] .faq-icon { transform:rotate(180deg);background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white) }
.faq-answer { display:none;padding:0 var(--sp-6) var(--sp-5);font-size:var(--text-base);color:var(--c-text-muted);line-height:var(--lh-relaxed) }
.faq-answer.is-open { display:block;animation:fadeIn .25s ease }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* 13. Quiz
   ============================================================ */
.quiz-wrapper { max-width:720px;margin-inline:auto }
.quiz-progress { margin-bottom:var(--sp-8) }
.quiz-progress-bar-wrap { height:8px;background:var(--c-gray-200);border-radius:var(--r-full);overflow:hidden;margin-bottom:var(--sp-2) }
.quiz-progress-bar { height:100%;background:linear-gradient(90deg,var(--c-primary),var(--c-primary-lt));border-radius:var(--r-full);transition:width var(--trans-slow) }
.quiz-progress-text { font-size:var(--text-sm);color:var(--c-text-muted);text-align:right }

.quiz-step { display:none }
.quiz-step.is-active { display:block;animation:fadeInUp .35s ease }

.quiz-question { font-size:clamp(var(--text-lg),3vw,var(--text-2xl));font-weight:var(--fw-bold);margin-bottom:var(--sp-8);line-height:1.3 }
.quiz-options { display:flex;flex-direction:column;gap:var(--sp-3) }
.quiz-option {
  display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-5);
  border:2px solid var(--c-gray-300);border-radius:var(--r-lg);cursor:pointer;
  background:var(--c-white);text-align:left;font-size:var(--text-base);color:var(--c-text);
  line-height:var(--lh-relaxed);width:100%;
  transition:border-color var(--trans-fast),background-color var(--trans-fast),transform var(--trans-fast);
}
.quiz-option:hover { border-color:var(--c-primary-lt);background:var(--c-primary-pale);transform:translateX(4px) }
.quiz-option.is-selected { border-color:var(--c-primary);background:var(--c-primary-pale) }
.quiz-option-letter {
  width:32px;height:32px;border-radius:var(--r-full);border:2px solid var(--c-gray-300);
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);
  font-size:var(--text-sm);flex-shrink:0;
  transition:background-color var(--trans-fast),border-color var(--trans-fast),color var(--trans-fast);
}
.quiz-option.is-selected .quiz-option-letter { background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white) }

.quiz-nav { display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-8);gap:var(--sp-4) }

/* Quiz Result */
.quiz-result { display:none;text-align:center;animation:fadeInUp .4s ease }
.quiz-result.is-active { display:block }

.result-emoji { display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:var(--r-full);font-size:52px;margin-bottom:var(--sp-6);box-shadow:var(--shadow-lg) }
.result-emoji--semmel       { background:var(--c-amber-pale) }
.result-emoji--apfel        { background:var(--c-primary-pale) }
.result-emoji--punschkrapferl{ background:var(--c-red-pale) }
.result-emoji--lauch        { background:var(--c-primary-pale) }

.result-title    { font-size:clamp(var(--text-xl),4vw,var(--text-3xl));color:var(--c-primary);margin-bottom:var(--sp-2) }
.result-subtitle { font-size:var(--text-md);color:var(--c-text-muted);margin-bottom:var(--sp-6) }
.result-desc {
  font-size:var(--text-base);color:var(--c-text);max-width:560px;margin-inline:auto;
  margin-bottom:var(--sp-8);line-height:var(--lh-relaxed);text-align:left;
  background:var(--c-cream);padding:var(--sp-6);border-radius:var(--r-lg);border-left:4px solid var(--c-primary);
}
.result-tips { text-align:left;max-width:560px;margin-inline:auto;margin-bottom:var(--sp-8) }
.result-tips h3 { font-size:var(--text-lg);margin-bottom:var(--sp-4);color:var(--c-primary) }
.result-tips ul { display:flex;flex-direction:column;gap:var(--sp-3) }
.result-tips li {
  display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4);
  background:var(--c-white);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  font-size:var(--text-sm);line-height:var(--lh-relaxed);
}
.result-tips li::before { content:'✓';color:var(--c-primary);font-weight:var(--fw-bold);flex-shrink:0;margin-top:1px }
.result-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-bottom:var(--sp-6) }

.result-share { margin-top:var(--sp-6);padding:var(--sp-5);background:var(--c-gray-50);border-radius:var(--r-lg);border:1px solid var(--c-gray-200) }
.result-share p { font-size:var(--text-sm);color:var(--c-text-muted);margin-bottom:var(--sp-3) }
.share-text-box {
  width:100%;padding:var(--sp-3);border:1px solid var(--c-gray-300);border-radius:var(--r-md);
  font-size:var(--text-sm);background:var(--c-white);color:var(--c-text);resize:none;
  line-height:var(--lh-relaxed);margin-bottom:var(--sp-3);
}

/* 14. Prose (legal/info pages)
   ============================================================ */
.prose { max-width:740px;margin-inline:auto }
.prose h2 { font-size:clamp(var(--text-lg),3vw,var(--text-2xl));color:var(--c-primary);margin-top:var(--sp-10);margin-bottom:var(--sp-4);padding-top:var(--sp-4);border-top:2px solid var(--c-gray-200) }
.prose h2:first-child { margin-top:0;padding-top:0;border-top:none }
.prose h3 { font-size:var(--text-lg);margin-top:var(--sp-6);margin-bottom:var(--sp-3) }
.prose p  { margin-bottom:var(--sp-4);line-height:var(--lh-relaxed) }
.prose ul,.prose ol { margin-bottom:var(--sp-4);padding-left:var(--sp-6) }
.prose ul { list-style:disc }
.prose ol { list-style:decimal }
.prose li { margin-bottom:var(--sp-2);line-height:var(--lh-relaxed) }
.prose a  { color:var(--c-primary);font-weight:var(--fw-medium) }
.prose strong { font-weight:var(--fw-bold) }

/* 15. Table
   ============================================================ */
.table-wrap { overflow-x:auto;margin:var(--sp-6) 0;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--c-gray-200) }
table { width:100%;border-collapse:collapse;font-size:var(--text-sm) }
th { background:var(--c-primary);color:var(--c-white);padding:var(--sp-3) var(--sp-4);text-align:left;font-weight:var(--fw-bold) }
td { padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--c-gray-200);color:var(--c-text);vertical-align:top }
tr:last-child td { border-bottom:none }
tr:nth-child(even) { background:var(--c-gray-50) }

/* 16. Info boxes
   ============================================================ */
.info-box { display:flex;gap:var(--sp-4);padding:var(--sp-5);border-radius:var(--r-lg);font-size:var(--text-sm);line-height:var(--lh-relaxed);margin:var(--sp-6) 0 }
.info-box--green  { background:var(--c-primary-pale);border:1px solid var(--c-primary-lt);color:var(--c-primary-dk) }
.info-box--amber  { background:var(--c-amber-pale);border:1px solid var(--c-amber);color:var(--c-amber-dk) }
.info-box--orange { background:var(--c-orange-pale);border:1px solid var(--c-orange);color:var(--c-orange) }
.info-box-icon { font-size:24px;flex-shrink:0;line-height:1 }

/* 17. CTA Banner
   ============================================================ */
.cta-banner { background:linear-gradient(135deg,var(--c-amber-dk),var(--c-amber));border-radius:var(--r-xl);padding:var(--sp-10) var(--sp-8);text-align:center;margin:var(--sp-16) 0 }
.cta-banner h2 { font-size:clamp(var(--text-xl),3vw,var(--text-2xl));color:var(--c-text);margin-bottom:var(--sp-3) }
.cta-banner p  { color:var(--c-gray-800);margin-bottom:var(--sp-6);font-size:var(--text-md) }

/* 18. Recipe cards
   ============================================================ */
.recipe-card { background:var(--c-white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--c-gray-200);display:flex;flex-direction:column;transition:box-shadow var(--trans-base),transform var(--trans-base) }
.recipe-card:hover { box-shadow:var(--shadow-lg);transform:translateY(-3px) }
.recipe-card img { width:100%;aspect-ratio:4/3;object-fit:cover }
.recipe-card-body { padding:var(--sp-5);flex:1;display:flex;flex-direction:column }
.recipe-meta { display:flex;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap }
.recipe-tag { font-size:var(--text-xs);font-weight:var(--fw-medium);padding:2px var(--sp-2);border-radius:var(--r-full);background:var(--c-primary-pale);color:var(--c-primary) }
.recipe-card h3 { font-size:var(--text-md);margin-bottom:var(--sp-2) }
.recipe-card p  { font-size:var(--text-sm);color:var(--c-text-muted);flex:1;margin-bottom:var(--sp-4) }
.recipe-footer { display:flex;gap:var(--sp-4);font-size:var(--text-xs);color:var(--c-text-muted);border-top:1px solid var(--c-gray-200);padding-top:var(--sp-3);margin-top:auto }

/* 19. Form
   ============================================================ */
.form-group { margin-bottom:var(--sp-5) }
.form-label { display:block;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--c-text);margin-bottom:var(--sp-2) }
.form-input,.form-textarea,.form-select {
  width:100%;padding:var(--sp-3) var(--sp-4);border:2px solid var(--c-gray-300);border-radius:var(--r-md);
  font-size:var(--text-base);color:var(--c-text);background:var(--c-white);
  transition:border-color var(--trans-fast),box-shadow var(--trans-fast);line-height:var(--lh-base);
}
.form-input:focus,.form-textarea:focus,.form-select:focus { outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(46,125,50,.15) }
.form-textarea { resize:vertical;min-height:140px }
.form-hint  { font-size:var(--text-xs);color:var(--c-text-light);margin-top:var(--sp-1) }
.form-error { font-size:var(--text-xs);color:var(--c-red);margin-top:var(--sp-1);display:none }
.form-group.has-error .form-input,.form-group.has-error .form-textarea { border-color:var(--c-red) }
.form-group.has-error .form-error { display:block }
.form-success { display:none;padding:var(--sp-5);background:var(--c-primary-pale);border:1px solid var(--c-primary-lt);border-radius:var(--r-lg);color:var(--c-primary-dk);text-align:center;margin-top:var(--sp-4) }

/* 20. Footer
   ============================================================ */
.site-footer { background:var(--c-gray-800);color:rgba(255,255,255,.8);padding-top:var(--sp-16) }
.footer-grid { display:grid;grid-template-columns:1fr;gap:var(--sp-10);margin-bottom:var(--sp-12) }
@media(min-width:600px){ .footer-grid { grid-template-columns:repeat(2,1fr) } }
@media(min-width:960px){ .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr } }

.footer-brand p { font-size:var(--text-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.65);margin-top:var(--sp-4);margin-bottom:var(--sp-6) }
.footer-brand .site-logo { color:var(--c-white) }
.footer-brand .logo-text-main { color:var(--c-primary-lt) }
.footer-brand .logo-text-sub  { color:rgba(255,255,255,.5) }
.footer-brand .logo-icon { background:var(--c-primary-lt) }

.footer-col h4 { font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--c-white);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp-4) }
.footer-col ul { display:flex;flex-direction:column;gap:var(--sp-2) }
.footer-col a  { font-size:var(--text-sm);color:rgba(255,255,255,.65);text-decoration:none;transition:color var(--trans-fast) }
.footer-col a:hover { color:var(--c-white) }

.footer-bottom { border-top:1px solid rgba(255,255,255,.1);padding:var(--sp-5) 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sp-3) }
.footer-bottom p { font-size:var(--text-xs);color:rgba(255,255,255,.45) }
.footer-bottom-links { display:flex;gap:var(--sp-4) }
.footer-bottom-links a { font-size:var(--text-xs);color:rgba(255,255,255,.45);text-decoration:none;transition:color var(--trans-fast) }
.footer-bottom-links a:hover { color:var(--c-white) }

/* 21. 404
   ============================================================ */
.page-404 { min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-16) var(--sp-4) }
.page-404-number { font-size:clamp(6rem,20vw,12rem);font-weight:var(--fw-bold);color:var(--c-primary);line-height:1;opacity:.15;display:block;margin-bottom:var(--sp-4) }
.page-404 h1 { font-size:clamp(var(--text-xl),4vw,var(--text-3xl));margin-bottom:var(--sp-4) }
.page-404 p  { color:var(--c-text-muted);font-size:var(--text-md);margin-bottom:var(--sp-8) }
.page-404-links { display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) }

/* 22. Storage page
   ============================================================ */
.storage-cat { margin-bottom:var(--sp-10) }
.storage-cat h2 { display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-xl);color:var(--c-primary);padding-bottom:var(--sp-4);border-bottom:2px solid var(--c-primary-pale);margin-bottom:var(--sp-6) }

/* 23. Donate banner
   ============================================================ */
.donate-banner { background:linear-gradient(135deg,var(--c-primary-pale),var(--c-cream));border:2px solid var(--c-primary-lt);border-radius:var(--r-xl);padding:var(--sp-8);text-align:center }
.donate-banner h2 { font-size:var(--text-xl);color:var(--c-primary);margin-bottom:var(--sp-3) }
.donate-banner p  { color:var(--c-text-muted);margin-bottom:var(--sp-6) }

/* 24. Print
   ============================================================ */
@media print {
  .site-header,.site-footer,.nav-toggle,.mobile-menu,.breadcrumb,.cta-banner,.quiz-wrapper { display:none!important }
  body { font-size:12pt;color:#000 }
  h1,h2,h3 { color:#000 }
  a::after { content:' (' attr(href) ')';font-size:.8em }
}

/* 25. Reduced motion
   ============================================================ */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important }
}