/* Grundgerüst „helfer“ (C, Stitch 13209416359722270398) im Stil von babyflaschenkompass.de — seit ADR 0018 der Stil
   ALLER Websites (Eigentümer 2026-10-18: „alle Websites im selben Stil wie babyflaschenkompass.de, nur die Farbe wird
   produktentsprechend angepasst“). Freundlicher Berater: weiche Ecken, große Klickflächen, helle getönte Flächen, Zahlen
   in Kreisen, flache Karten mit 1-px-Rand. Grund, Schrift, Graphit und Linien sind hier fest; das Theme der Website
   setzt nur die Produktfarbe (--accent, --cta, --soft, --illu-*). Schriften Inter und Lora lokal (SIL OFL 1.1, /fonts). */

@font-face { font-family: "Lora"; font-style: normal; font-display: swap; font-weight: 400 700;
    src: url("/fonts/lora-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/lora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); }

.gg-helfer {
    /* Babyflaschen-Grund: Warmweiß, Graphit, warme Linien — für alle Websites gleich */
    --ink: #28332d;
    --muted: #68736b;
    --bg: #f7f5f0;
    --surface: #ffffff;
    --line: #e6e0d4;
    --line-strong: #d3cbbb;
    --radius: 14px;
    --shadow: none;
    --sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    --round: "Lora", "Lora Fallback", "Iowan Old Style", Georgia, serif;
    --serif: var(--round);
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    --gg-radius: 16px;
    --gg-border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    --gg-field: color-mix(in srgb, var(--accent) 9%, var(--bg));
    --gg-field-ink: var(--ink);
    --gg-shade: 0 4px 18px color-mix(in srgb, var(--ink) 6%, transparent);
}
.gg-helfer h1, .gg-helfer h2, .gg-helfer h3, .gg-helfer .gg-title { font-family: var(--sans, system-ui, sans-serif); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.gg-helfer .gg-title { text-align: center; }
.gg-helfer .gg-intro { margin-inline: auto; text-align: center; }

/* Kopf */
.gg-helfer .site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.gg-helfer .brand { font-family: var(--sans, system-ui, sans-serif); font-weight: 800; color: var(--ink); }
.gg-helfer .brand::before { border-radius: 50%; transform: none; }
.gg-helfer .main-nav a { font-weight: 600; }

/* Hero: zentriert, Kacheln als weiche Karten */
.gg-helfer .gg-hero { text-align: center; }
.gg-helfer .gg-hero h1 { margin-inline: auto; }
.gg-helfer .gg-lead { margin-inline: auto; color: var(--ink); } /* --muted auf getönter Fläche: babyflaschenkompass 4,0 : 1 */
.gg-helfer .gg-kicker { color: var(--accent); }
.gg-helfer .gg-tiles { text-align: left; }
.gg-helfer .gg-hero-has-media { text-align: left; }
.gg-helfer .gg-hero-has-media h1, .gg-helfer .gg-hero-has-media .gg-lead { margin-inline: 0; }
.gg-helfer .gg-hero-figure img, .gg-helfer .gg-hero-figure .hero-video { border-radius: 20px; border: 0; }
.gg-helfer .gg-tile { box-shadow: var(--gg-shade); border-radius: var(--gg-radius); }
.gg-helfer .gg-tile-no { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-size: 1rem;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); }
.gg-helfer .gg-tile-arrow { color: var(--accent); }
.gg-helfer .gg-tile:hover, .gg-helfer .gg-tile:focus-visible { border-color: var(--accent); }

/* Abschnitte im Wechsel auf getönter Fläche */
.gg-helfer .gg-section { padding-top: 3.5rem; }
.gg-helfer .gg-steps { position: relative; }
.gg-helfer .gg-step { text-align: center; background: transparent; border: 0; }
.gg-helfer .gg-step-no { border-radius: 50%; background: var(--ink); color: var(--surface); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, var(--bg)); }

/* Karten */
.gg-helfer .gg-card { box-shadow: var(--gg-shade); }
.gg-helfer .gg-card-band { text-transform: none; letter-spacing: 0; font-size: .82rem; background: transparent; color: var(--muted); padding-bottom: 0; }
.gg-helfer .gg-card-band span:first-child { color: var(--accent); font-weight: 700; }
.gg-helfer .gg-card-band .gg-ad { border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; font-size: max(.68rem, 12px); }
.gg-helfer .gg-card-figure { margin: .75rem 1rem 0; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }

/* Kaufknopf: dunkel, weich gerundet */
.gg-helfer .cta, .gg-helfer .gg-button { border-radius: 12px; }

/* Listen und Artikel */
.gg-helfer .gg-link-card, .gg-helfer .gg-method-list li { box-shadow: var(--gg-shade); }
.gg-helfer .gg-link-card:hover { border-color: var(--accent); }
.gg-helfer .gg-method { margin-top: 3.5rem; padding: 2rem 1.5rem; background: var(--gg-field); border-radius: 20px; }
.gg-helfer .gg-method .gg-title { text-align: left; }
.gg-helfer .gg-situations { border-radius: 20px; }
.gg-helfer .gg-answer-table { box-shadow: var(--gg-shade); }
.gg-helfer .gg-answer-table thead th { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.gg-helfer .product { border-radius: var(--gg-radius); box-shadow: var(--gg-shade); }
.gg-helfer .table-wrap, .gg-helfer .toc { border-radius: 14px; }

/* ── Stil von babyflaschenkompass.de für alle Websites (ADR 0018) ── */
.gg-helfer .site-header { background: rgb(247 245 240 / .96); }
.gg-helfer .brand { color: var(--accent); letter-spacing: -.01em; }
.gg-helfer .brand::before { width: .7rem; height: .7rem; background: var(--accent); }
.gg-helfer .main-nav a { color: var(--muted); }
.gg-helfer .main-nav a:hover, .gg-helfer .main-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.gg-helfer .gg-hero-figure { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: .5rem; overflow: hidden; }
.gg-helfer .gg-hero-figure img, .gg-helfer .gg-hero-figure .hero-video { border-radius: 14px; }
.gg-helfer .gg-hero-figure figcaption { padding: .2rem .3rem 0; letter-spacing: .04em; }
.gg-helfer .cta { border-radius: 12px; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; padding: .8rem 1.4rem;
    background: var(--cta); color: #fff; box-shadow: none; }
.gg-helfer .cta:hover, .gg-helfer .cta:focus-visible { background: var(--cta-hover); filter: none; }
.gg-helfer .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gg-helfer .product-label { border-radius: 999px; border-color: var(--line-strong); color: var(--muted); background: var(--surface); }
.gg-helfer .product-badge { border-radius: 999px; background: var(--ink); color: #fff; padding: .15rem .65rem; }
.gg-helfer .product-suited strong { color: var(--ink); }
.gg-helfer .product-name { font-family: var(--round); font-weight: 700; }
/* Zitat und Finder-Ergebnis als ruhige Fläche mit 1-px-Kontur statt Seitenbalken (wie 3c6fced, Design-Hook side-tab) */
.gg-helfer .body blockquote { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); background: var(--soft); border-radius: 12px; }
.gg-helfer .table-wrap thead th { background: var(--soft); color: var(--ink); }
.gg-helfer .pros-cons { background: var(--bg); border-radius: 10px; }
.gg-helfer .finder, .gg-helfer .toc, .gg-helfer .table-wrap { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.gg-helfer .finder-frage select { border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; min-height: 3rem; }
.gg-helfer .finder-frage select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.gg-helfer .finder-ergebnis { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 12px; background: var(--soft); }
.gg-helfer .site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.gg-helfer .footer-brand { color: var(--ink); font-family: var(--round); }
.gg-helfer .consent-button { border-radius: 12px; border-color: var(--ink); color: var(--ink); }
.gg-helfer .consent-button:hover, .gg-helfer .consent-button:focus-visible { background: var(--ink); color: #fff; }
@media (max-width: 560px) { .gg-helfer .main-nav { flex-wrap: wrap; gap: .1rem .9rem; } }

/* Cookie-Hinweis als schwebende Karte (Eigentümer 2026-10-18: „einen schöneren Cookie-Bestätigungsbalken“). Nur die Gestalt:
   Text, Reihenfolge und gleichwertige Knöpfe bleiben wie in der Rechtsprüfung (DSK-OH Digitale Dienste; beide Knöpfe gleich). */
.gg-helfer .consent { bottom: 1rem; margin: 0 auto 1rem; width: min(64rem, calc(100% - 2rem)); background: var(--surface);
    border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 16%, transparent); }
.gg-helfer .consent-inner { max-width: none; padding: 1.1rem 1.4rem; gap: 1rem 2rem; }
.gg-helfer .consent h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; font-weight: 800; }
.gg-helfer .consent h2::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    font-size: .85rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent); }
.gg-helfer .consent p { font-size: .88rem; line-height: 1.55; }
.gg-helfer .consent-button { border-radius: 12px; min-height: 2.9rem; font-weight: 700; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); }
.gg-helfer .consent-button:hover, .gg-helfer .consent-button:focus-visible { background: var(--ink); color: #fff; }
.gg-helfer .consent-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
    .gg-helfer .consent { bottom: .5rem; width: calc(100% - 1rem); margin-bottom: .5rem; border-radius: 16px; }
    .gg-helfer .consent-inner { padding: .8rem .9rem; }
}

/* ── Bewegung (Eigentümer 2026-10-18: „ein wenig Bewegung … leichte Animationen … gerne einen animierten Hero“) ──
   Nur CSS (CSP: kein JavaScript), nur transform und opacity (kein Springen des Layouts). Einblenden beim Laden einmal,
   beim Scrollen über animation-timeline (Chrome/Edge; andere Browser zeigen sofort alles). Startwert opacity .01 statt 0,
   damit die Überschrift als größtes Element sofort zählt (LCP). Bei „weniger Bewegung“ steht alles still (WCAG 2.3.3). */
/* Einblenden über translate/scale, Darüberfahren über transform — getrennte Eigenschaften, sonst hielte die fertige
   Animation ihren Endwert und das Anheben beim Darüberfahren bliebe wirkungslos. */
@keyframes gg-auftauchen { from { opacity: .01; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes gg-zoom { from { scale: 1.08; } to { scale: 1; } }

@media (prefers-reduced-motion: no-preference) {
    /* Hero: Text, Knopf und Kacheln nacheinander; Bild zoomt einmal langsam auf */
    .gg-helfer .gg-hero .gg-kicker, .gg-helfer .gg-hero h1, .gg-helfer .gg-hero .gg-lead, .gg-helfer .gg-hero-links,
    .gg-helfer .gg-hero-media, .gg-helfer .gg-hero .gg-tile { animation: gg-auftauchen .7s cubic-bezier(.2, .7, .2, 1) both; }
    .gg-helfer .gg-hero h1 { animation-delay: .05s; }
    .gg-helfer .gg-hero .gg-lead { animation-delay: .15s; }
    .gg-helfer .gg-hero-links { animation-delay: .25s; }
    .gg-helfer .gg-hero-media { animation-delay: .2s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(1) { animation-delay: .3s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(2) { animation-delay: .38s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(3) { animation-delay: .46s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(4) { animation-delay: .54s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(5) { animation-delay: .62s; }
    .gg-helfer .gg-hero .gg-tile:nth-child(6) { animation-delay: .7s; }
    .gg-helfer .gg-hero-figure:not(.hero-media) img { animation: gg-zoom 9s ease-out both; }
    .gg-helfer .consent { animation: gg-auftauchen .6s cubic-bezier(.2, .7, .2, 1) .9s both; }

    /* Darüberfahren: Karten heben sich, Zeichnungen und Pfeile bewegen sich mit */
    .gg-helfer .gg-tile, .gg-helfer .gg-card, .gg-helfer .gg-link-card, .gg-helfer .cta, .gg-helfer .gg-button {
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .2s ease; }
    .gg-helfer .gg-tile:hover, .gg-helfer .gg-card:hover, .gg-helfer .gg-link-card:hover {
        transform: translateY(-4px); box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 10%, transparent); }
    .gg-helfer .gg-card-figure svg, .gg-helfer .gg-link-image img, .gg-helfer .gg-tile-arrow, .gg-helfer .gg-link-more { transition: transform .35s ease; }
    .gg-helfer .gg-card:hover .gg-card-figure svg { transform: translateY(-4px) rotate(-2deg) scale(1.04); }
    .gg-helfer .gg-link-card:hover .gg-link-image img { transform: scale(1.04); }
    .gg-helfer .gg-link-card:hover .gg-link-more { transform: translateX(4px); }
    .gg-helfer .cta:hover, .gg-helfer .gg-button:hover { transform: translateY(-1px); }

    /* Beim Scrollen: Abschnitte und Karten blenden sanft ein */
    @supports (animation-timeline: view()) {
        .gg-helfer .gg-section .gg-title, .gg-helfer .gg-step, .gg-helfer .gg-card, .gg-helfer .gg-link-card, .gg-helfer .gg-method-list li,
        .gg-helfer .gg-answer, .gg-helfer .body .product, .gg-helfer .body .finder, .gg-helfer .body .table-wrap {
            animation: gg-auftauchen linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
    }
}