/* Front page (front-page.php). Source: docs/design/referenz/01-homepage.html.
   Mobile first, desktop from 900px (the reference switches at 760px; AGENTS.md breakpoints win).
   Shared pieces (Start hier, grid cards, rails, dots, Lagebild band, ad note) live in components.css,
   the Rechner teaser and the newsletter in blocks/vorratsrechner.css and blocks/newsletter.css. */

.home-sec { padding-block: 40px; }
.home-sec.flush { padding-top: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.sec-head h2 { font-size: 24px; font-weight: 800; }

/* ---------- Hero ---------- */
.hero { background: var(--brand); padding-block: 28px 48px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "eyebrow eyebrow" "title fig" "lede lede" "ctas ctas"; column-gap: 12px; row-gap: 12px; align-items: end; }
.hero .eyebrow { grid-area: eyebrow; color: var(--brand-ink); }
.hero h1 { grid-area: title; font-size: 46px; font-weight: 800; letter-spacing: -.025em; }
.hero h1 em { font-style: normal; padding-bottom: .08em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C28 8.5 58 7 92 8.2c34 1.2 68-1.6 104-3.4' fill='none' stroke='white' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M14 15.5c30-3.4 66-4.2 104-3.6 26 .4 50-.6 72-2.6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") left 100% / 100% .32em no-repeat; }
.hero-figure { grid-area: fig; display: flex; justify-content: center; }
.hero-figure .mascot { width: 112px; height: auto; max-width: 100%; filter: drop-shadow(0 10px 14px rgba(138, 75, 0, .25)); position: relative; z-index: 3; }
.hero .lede { grid-area: lede; font-size: 16px; color: var(--ink); }
.hero-ctas { grid-area: ctas; display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.hero-ctas .btn { white-space: normal; text-align: center; }

/* ---------- Aufmacher ---------- */
.lead-grid { display: flex; flex-direction: column; gap: 20px; }
.lead-main { text-decoration: none; display: grid; justify-items: start; }
.lead-main .im { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--sunk); margin-bottom: 12px; }
.lead-main .im img { width: 100%; height: 100%; object-fit: cover; }
.lead-main h3 { font-size: 24px; font-weight: 800; margin-top: 6px; }
.lead-main .teaser { display: none; }
.lead-main .byline { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.lead-main:hover h3, .side-item:hover h3 { text-decoration: underline; text-decoration-color: var(--c, var(--brand)); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.side-list { display: flex; flex-direction: column; gap: 12px; }
.side-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; padding-top: 12px; border-top: 1px solid var(--line); }
.side-item .im { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--sunk); }
.side-item .im img { width: 100%; height: 100%; object-fit: cover; }
.side-item .im.ph { font-size: 9px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-3); }
.side-item h3 { font-size: 16px; font-weight: 700; margin-top: 2px; }
.home-hint { padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Themenwelten ---------- */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme { background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--surface)); border-radius: var(--r-lg); padding: 14px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; min-height: 116px; transition: border-color .15s; }
.theme:hover { border-color: var(--ink); }
.theme-ic { display: block; width: 28px; height: 28px; color: var(--c); }
.theme-ic svg { width: 100%; height: 100%; display: block; }
.theme h3 { font-size: 15px; font-weight: 700; }
.theme .count { font-size: 12px; color: var(--ink-2); margin-top: auto; }

/* ---------- Bestenliste ---------- */
.picks-head { margin-bottom: 16px; }
.picks-head h2 { font-size: 24px; font-weight: 800; margin-top: 4px; }
.best-note { font-size: 11px; color: var(--ink-3); margin-top: 8px; }
.best-note a { color: var(--ink); }
.picks { --w: 82%; }
.pick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.pick-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; }
.pick-tag.top { background: var(--badge-top); }
.pick-tag.pl { background: var(--badge-pl); color: var(--badge-pl-ink); }
.pick-tag.ag { background: var(--badge-ag); color: var(--badge-ag-ink); }
.pick-tag.up { background: var(--badge-up); color: var(--badge-up-ink); }
.pick-img { aspect-ratio: 4 / 3; background: var(--sunk); overflow: hidden; }
.pick-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-img.ph { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--sunk) 0 10px, transparent 10px 20px), var(--sunk); }
.pick-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pick h3 { font-size: 18px; font-weight: 700; }
.pick-body p { font-size: 13px; color: var(--ink-2); }
.pick .why { font-size: 12px; color: var(--pos); background: var(--pos-soft); padding: 6px 8px; border-radius: 6px; }
.pick .buy { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pick .price { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.pick .price small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); }

/* ---------- Feed ---------- */
.feed .more-only { display: none; }

/* ---------- Methodik ---------- */
.method { background: var(--sunk); }
.method h2 { font-size: 24px; font-weight: 800; margin-top: 4px; }
.sources-chips { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px calc(var(--gut) * -1) 18px; padding: 0 var(--gut); }
.sources-chips::-webkit-scrollbar { display: none; }
.sources-chips li { flex: none; font-size: 11px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); padding: 5px 10px; border-radius: 999px; }
.method-list { --w: 78%; }
.method-list > div { background: var(--surface); border-radius: var(--r); padding: 14px; border-top: 3px solid var(--brand); }
.method-list h3 { font-size: 15px; font-weight: 700; }
.method-list p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) { .theme { transition: none; } }

/* ---------- Desktop ---------- */
@container page (min-width: 900px) {
  .home-sec { padding-block: 64px; }
  .home-sec.flush { padding-top: 0; }
  .sec-head { margin-bottom: 28px; align-items: end; }
  .sec-head h2 { font-size: 34px; }

  .hero { padding-block: 56px 80px; }
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "eyebrow fig" "title fig" "lede fig" "ctas fig"; row-gap: 20px; align-items: start; }
  .hero h1 { font-size: clamp(56px, 7cqi, 88px); align-self: end; }
  .hero .lede { font-size: 20px; max-width: 34em; }
  .hero-ctas { display: flex; gap: 12px; justify-content: flex-start; }
  .hero-ctas .btn { white-space: nowrap; }
  .hero-figure { align-self: center; position: relative; }
  .hero-figure .mascot { width: min(340px, 100%); margin-bottom: -120px; }

  .lead-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; }
  .lead-main .im { aspect-ratio: 16 / 9; }
  .lead-main h3 { font-size: 38px; }
  .lead-main .teaser { display: block; color: var(--ink-2); margin-top: 12px; max-width: 38em; }
  .side-list { gap: 20px; }
  .side-item { grid-template-columns: 96px minmax(0, 1fr); padding-top: 20px; }
  .side-item h3 { font-size: 18px; }
  .home-hint { padding-top: 20px; }

  .themes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .theme { padding: 20px; min-height: 170px; gap: 12px; }
  .theme-ic { width: 36px; height: 36px; }
  .theme h3 { font-size: 18px; }

  .picks-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
  .picks-head h2 { font-size: 34px; }
  .best-note { max-width: 28em; font-size: 12px; margin-top: 0; }
  .picks { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .pick-body { padding: 20px; gap: 10px; }
  .pick h3 { font-size: 20px; }

  .feed .more-only { display: flex; }

  .method .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .method h2 { font-size: 36px; }
  .sources-chips { flex-wrap: wrap; overflow: visible; margin: 24px 0 0; padding: 0; }
  .method-list { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 24px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .method-list > div { background: transparent; padding: 12px 0 0; border-top: 2px solid var(--ink); border-radius: 0; }
}