/*
 * Bildimpulse-Landingpage (page-bildimpulse.php)
 *
 * 1:1 uebernommen aus dem Claude-Design-Entwurf. Die Selektoren des Entwurfs
 * sind unter .bi-lp gescopet, damit sie nichts ausserhalb der Seite treffen.
 * Alles Uebrige steht als inline-style direkt im Markup (page-bildimpulse.php)
 * und darf nicht veraendert werden - sonst weicht die Seite vom Entwurf ab.
 *
 * Diese Datei wird NICHT aus SCSS gebaut. Nicht in style.scss einbinden.
 */

  .bi-lp, .bi-lp * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #fffaf2; }
  .bi-lp img { display: block; max-width: 100%; }
  .bi-lp a { color: #1e689f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .bi-lp a:hover { color: #133b4d; }
  .bi-lp summary::-webkit-details-marker { display: none; }
  .bi-lp summary::marker { content: ""; }
  .bi-lp :focus-visible { outline: 3px solid #1e689f; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  .bi-lp [data-quad] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 720px) { .bi-lp [data-quad] { grid-template-columns: minmax(0, 1fr); } }
  .bi-lp [data-usp] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1150px) { .bi-lp [data-usp] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 768px) { .bi-lp [data-usp] { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
  .bi-lp [data-hurdles] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-lp [data-hurdles] > div { padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.75rem, 3vw, 2.75rem); }
  .bi-lp [data-hurdles] > div:nth-child(odd) { padding-left: 0; }
  .bi-lp [data-hurdles] > div:nth-child(even) { padding-right: 0; }
  .bi-lp [data-hurdles] > div:nth-child(1), .bi-lp [data-hurdles] > div:nth-child(3) { border-right: 1px solid rgba(19, 59, 77, .12); }
  .bi-lp [data-hurdles] > div:nth-child(1), .bi-lp [data-hurdles] > div:nth-child(2) { border-bottom: 1px solid rgba(19, 59, 77, .12); padding-top: 0; }
  @media (max-width: 760px) {
    .bi-lp [data-hurdles] { grid-template-columns: minmax(0, 1fr); }
    .bi-lp [data-hurdles] > div { padding: 1.5rem 0; border-right: none; }
    .bi-lp [data-hurdles] > div:nth-child(1) { padding-top: 0; }
    .bi-lp [data-hurdles] > div:nth-child(2), .bi-lp [data-hurdles] > div:nth-child(3) { border-bottom: 1px solid rgba(19, 59, 77, .12); }
  }
  .bi-lp [data-hero-float] {
    margin: 0; position: absolute; top: 56%; right: var(--bi-gutter);
    width: min(46vw, 650px); transform: translateY(calc(-44% - 50px));
  }
  .bi-lp [data-hero-float] figcaption { bottom: -1.25rem; left: -1.25rem; top: auto; }
  @media (min-width: 1100px) {
    .bi-lp [data-hero-text] { max-width: calc(100% - min(46vw, 650px) - 3rem); }
    .bi-lp [data-hero-text] h1 { font-size: clamp(2.4rem, calc(5vw - 10px), calc(4.4rem - 10px)); }
  }
  @media (max-width: 1099px) {
    .bi-lp [data-hero-text] { max-width: min(100%, 54rem); }
    .bi-lp [data-hero-float] { position: relative; width: min(100%, 650px); margin: clamp(2.5rem, 6vw, 4rem) 0 0 auto; right: auto; top: auto; transform: none; }
  }
  .bi-lp [data-plus] { transition: transform .22s ease, border-color .22s ease; }
  .bi-lp details[open] [data-plus] { transform: rotate(45deg); border-color: rgba(30, 104, 159, .5); }
  .bi-lp [data-amazon] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem clamp(1.25rem, 2vw, 1.75rem); align-items: center; }
  @media (max-width: 860px) { .bi-lp [data-amazon] { grid-template-columns: minmax(0, 1fr); } }
  .bi-lp [data-features] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  @media (max-width: 780px) { .bi-lp [data-features] { grid-template-columns: minmax(0, 1fr); } }
  .bi-lp [data-gal] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; border-radius: 14px; }
  .bi-lp [data-gal]::-webkit-scrollbar { display: none; }
  .bi-lp [data-gal] > img { flex: 0 0 100%; scroll-snap-align: start; }
  .bi-lp [data-track] { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
  .bi-lp [data-track]::-webkit-scrollbar { display: none; }
  .bi-lp [data-card] { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; }
  @media (max-width: 1000px) { .bi-lp [data-card] { flex-basis: calc((100% - 1.5rem) / 2); } }
  @media (max-width: 700px) { .bi-lp [data-card] { flex-basis: 100%; } }
  .bi-lp [data-dot][data-hidden="true"] { display: none; }
  .bi-lp [data-dot] { width: 12px; height: 12px; border-radius: 999px; background: rgba(19, 59, 77, .24); transition: width .22s ease, background .22s ease; }
  .bi-lp [data-dot][aria-current="true"] { width: 34px; background: #1e689f; }
  .bi-lp [data-lead] { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  @media (max-width: 820px) { .bi-lp [data-lead] { grid-template-columns: minmax(0, 1fr); } }
  .bi-lp [data-maker] { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
  @media (max-width: 700px) { .bi-lp [data-maker] { grid-template-columns: minmax(0, 1fr); } }
  .bi-lp [data-callout] { display: flex; align-items: center; }
  .bi-lp [data-callout][data-dir="down"] { flex-direction: column; }
  .bi-lp [data-callout][data-dir="left"] { flex-direction: row-reverse; }
  .bi-lp [data-callout-list] { display: none; }
  @media (max-width: 1000px) {
    .bi-lp [data-callout] { display: none; }
    .bi-lp [data-callout-list] { display: flex; flex-wrap: wrap; }
  }
  @media (max-width: 700px) {
    .bi-lp [data-hero-float] figcaption { bottom: -.75rem; left: 0; }
    .bi-lp footer { justify-content: flex-start; }
    .bi-lp [data-track] { gap: 1rem; }
  }
  @media (max-width: 420px) {
    .bi-lp [data-dot] { width: 10px; height: 10px; }
    .bi-lp [data-dot][aria-current="true"] { width: 26px; }
  }


/* --- Containerbreite des Themes (nicht Teil des Entwurfs) ---------------- */
/* Der Entwurf lief mit einem rein viewport-basierten Aussenabstand
   (clamp(1.5rem, 6vw, 7rem)) und wurde auf grossen Bildschirmen dadurch
   beliebig breit. Hier uebernimmt die Seite stattdessen die Container-Werte
   des Themes: maximal 1600px Rahmen, davon 70/50/40/20/16px Seitenabstand,
   also hoechstens 1460px Inhaltsbreite, zentriert.
   --bi-gutter ersetzt im Markup jedes Vorkommen des alten Abstands. */
.bi-lp {
    --bi-pad: 70px;
    --bi-content: 1460px;
    --bi-gutter: max(var(--bi-pad), calc((100% - var(--bi-content)) / 2));
}
@media (max-width: 1290px) { .bi-lp { --bi-pad: 50px; } }
@media (max-width: 1190px) { .bi-lp { --bi-pad: 40px; } }
@media (max-width: 768px)  { .bi-lp { --bi-pad: 20px; } }
@media (max-width: 430px)  { .bi-lp { --bi-pad: 16px; } }

/* --- Schutzschicht: Theme-Styles duerfen das Design nicht ueberschreiben --- */
.bi-lp {
    font-synthesis: none;
}
.bi-lp h1, .bi-lp h2, .bi-lp h3, .bi-lp h4, .bi-lp h5, .bi-lp h6,
.bi-lp p, .bi-lp ul, .bi-lp ol, .bi-lp li, .bi-lp figure, .bi-lp figcaption,
.bi-lp blockquote, .bi-lp details, .bi-lp summary, .bi-lp article, .bi-lp span {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
    text-align: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
}
.bi-lp ul, .bi-lp ol { list-style: none; }
.bi-lp li::before, .bi-lp li::after { content: none !important; }
.bi-lp b, .bi-lp strong { font-weight: 700; text-decoration: none; }
.bi-lp button {
    margin: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.bi-lp img { height: auto; }

/* --- Hover-Zustaende aus dem Entwurf (dort als style-hover notiert) --- */
.bi-lp .bi-h-green:hover  { background: #86b000 !important; }
.bi-lp .bi-h-blue:hover   { background: #1e689f !important; }
.bi-lp .bi-h-navy:hover   { background: #133b4d !important; color: #ffffff !important; }
.bi-lp .bi-h-navy2:hover  { background: #133b4d !important; }
.bi-lp .bi-h-link:hover   { color: #133b4d !important; border-bottom-color: #133b4d !important; }

/* --- Anpassung an den festen Theme-Header (nicht Teil des Entwurfs) --- */
/* Der Site-Header liegt fest oben; ohne groesseren Sprungabstand landen die
   Anker #funktioniert und #kaufen darunter. */
.bi-lp [id] { scroll-margin-top: 230px; }
@media (max-width: 1180px) {
    .bi-lp [id] { scroll-margin-top: 175px; }
}

/* Der Entwurf hielt den Platz fuer den schwebenden Bestell-Button ueber sein
   eigenes Footer-Padding frei. Dieser Footer entfaellt hier zugunsten des
   Theme-Footers, also uebernimmt das Padding die Seite selbst. Ueberschreibt
   zugleich das kleinere padding-bottom von .site-main. */
.bi-lp.site-main { padding-bottom: clamp(6rem, 12vw, 7.5rem); }


/* ── Bildmarken statt Textliste (Tablet und Mobil) ────────────────────────── */
/* Auf dem Desktop bleiben die Sprechblasen des Entwurfs. Ab 1000px werden sie
   ausgeblendet, stattdessen liegen nur noch die gruenen Punkte auf dem Bild.
   Ein Tipp darauf blendet den Text als kleine Sprechblase daneben ein. */
.bi-lp [data-hotspots] { display: none; }

@media (max-width: 1000px) {
    .bi-lp [data-hotspots] { display: block; position: absolute; inset: 0; border-radius: 18px; }
    .bi-lp [data-bi-hot] {
        position: absolute;
        width: 22px;
        height: 22px;
        margin: -11px 0 0 -11px;
        padding: 0;
        border-radius: 50%;
        background: #96c400;
        box-shadow: 0 0 0 5px rgba(255, 250, 242, .45), 0 2px 10px rgba(10, 24, 36, .4);
        cursor: pointer;
        transition: transform .18s ease, background .18s ease;
    }
    /* groessere Tippflaeche, ohne den Punkt optisch zu vergroessern */
    .bi-lp [data-bi-hot]::after { content: ""; position: absolute; inset: -13px; border-radius: 50%; }
    .bi-lp [data-bi-hot][aria-expanded="true"] {
        background: #fffaf2;
        box-shadow: 0 0 0 5px rgba(150, 196, 0, .8), 0 2px 10px rgba(10, 24, 36, .4);
        transform: scale(1.15);
    }
    .bi-lp [data-bi-toast] {
        position: absolute;
        z-index: 3;
        max-width: min(20rem, 80%);
        background: #fffaf2;
        color: #133b4d;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.35;
        padding: .5rem .9rem;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(10, 24, 36, .35);
        pointer-events: none;
    }
}

/* ── Feinschliff Mobil ────────────────────────────────────────────────────── */

/* Zitat der Geschaeftsfuehrung: auf dem Desktop nur so breit wie sein Inhalt,
   damit die weisse Flaeche nicht ueber die ganze Containerbreite laeuft. */
.bi-lp [data-maker] { width: fit-content; max-width: 100%; }

@media (max-width: 700px) {
    .bi-lp [data-maker] { width: auto; gap: 1.25rem; justify-items: start; }
    .bi-lp [data-maker] > img { max-width: 150px !important; }
    .bi-lp [data-maker] blockquote { max-width: none; }
}

/* Leitzitat von Daniel Wasner: auf kleinen Schirmen weniger Innenabstand und
   eine Stufe kleiner, sonst stehen nur wenige Woerter pro Zeile. */
@media (max-width: 700px) {
    .bi-lp [data-lead] { padding: clamp(1.5rem, 6vw, 2.25rem) !important; }
    .bi-lp [data-lead] blockquote { font-size: clamp(1.2rem, 5.4vw, 1.6rem) !important; }
    .bi-lp [data-lead] figcaption { gap: 1rem !important; }
}

/* Sehr kleine Smartphones: Hero-Ueberschrift und Badge eine Stufe kleiner. */
@media (max-width: 480px) {
    .bi-lp [data-hero-text] h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem) !important; }
}

/* Der schwebende Bestell-Button und der Warenkorb-Button des Themes sassen auf
   dem Handy nebeneinander auf derselben Hoehe und beruehrten sich fast. Auf
   schmalen Geraeten steht der Bestell-Button jetzt eine Etage darueber. */


/* Der Kicker ueber der Ueberschrift ist auf dem Handy zu lang und wuerde die
   gruene Pille auf drei Zeilen aufblaehen. Dort steht deshalb die Kurzfassung. */
.bi-lp [data-eyebrow="kurz"] { display: none; }
@media (max-width: 700px) {
    .bi-lp [data-eyebrow="lang"] { display: none; }
    .bi-lp [data-eyebrow="kurz"] { display: inline; }
}

/* WooCommerce haengt nach dem AJAX-Kauf einen zweiten Link „Warenkorb ansehen“
   hinter den Button. Den brauchen wir hier nicht, weil sich der Warenkorb-
   Drawer des Themes ohnehin von selbst oeffnet (assets/js/cart.js). */
.bi-lp a.added_to_cart { display: none !important; }

/* ── Nachtrag Feinschliff ─────────────────────────────────────────────────── */

/* Kennzahlen auf dem Handy untereinander und linksbuendig, nicht zentriert.
   Ein Slider waere hier falsch: er versteckt drei von vier Fakten hinter einer
   Geste, und das ausgerechnet ganz oben auf der Seite. */
@media (max-width: 768px) {
    .bi-lp [data-usp] { gap: .9rem; }
    .bi-lp [data-usp] li { justify-content: flex-start !important; }
}

/* Der Einzug des Ausgangspunkt-Blocks ist nur auf grossen Schirmen eine
   gestalterische Geste. Auf dem Handy frisst er Zeilenbreite. */
@media (max-width: 700px) {
    .bi-lp section[data-screen-label="01 Unaware"] > div { margin-left: var(--bi-gutter) !important; }
}

/* Huerden auf dem Handy: ausschliesslich waagerechte Trennlinien, keine
   Reste der senkrechten aus dem Zwei-Spalten-Raster. */
@media (max-width: 760px) {
    /* :nth-child(n) nur, um dieselbe Spezifitaet wie die Grundregeln oben zu
       erreichen. Ohne das gewinnen dort die senkrechten Linien des
       Zwei-Spalten-Rasters und bleiben auf dem Handy stehen. */
    .bi-lp [data-hurdles] > div:nth-child(n) {
        border: 0;
        border-bottom: 1px solid rgba(19, 59, 77, .12);
        padding: 1.6rem 0;
    }
    .bi-lp [data-hurdles] > div:nth-child(1) { padding-top: 0; }
    .bi-lp [data-hurdles] > div:nth-child(4) { border-bottom: 0; padding-bottom: 0; }
}

/* Zitate als Zitate erkennbar machen: ein dezentes gruenes Anfuehrungszeichen
   oben links ueber dem Text. Der Platz dafuer wird reserviert (padding-top),
   damit die Marke nie aus ihrer Flaeche herausragt. Nur bei den freistehenden
   Zitatbloecken; die Slider-Karten tragen bereits ihr Altersgruppen-Label. */
.bi-lp figure > blockquote,
.bi-lp [data-maker] blockquote {
    position: relative;
    padding-top: 3rem;
}
.bi-lp figure > blockquote::before,
.bi-lp [data-maker] blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2396c400'%3E%3Cpath d='M9.6 4.8C6.4 6.6 4.6 9.5 4.6 13v6.2h6.7V13H8c0-2.1 1-3.8 2.8-5L9.6 4.8zm9.3 0c-3.2 1.8-5 4.7-5 8.2v6.2h6.7V13h-3.3c0-2.1 1-3.8 2.8-5l-1.2-3.2z'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
}
@media (max-width: 700px) {
    .bi-lp figure > blockquote,
    .bi-lp [data-maker] blockquote { padding-top: 2.5rem; }
    .bi-lp figure > blockquote::before,
    .bi-lp [data-maker] blockquote::before { width: 28px; height: 28px; }
}

/* Zitat der Geschaeftsfuehrung auf dem Handy mittig, Bild wie Text. */
@media (max-width: 700px) {
    .bi-lp [data-maker] {
        justify-items: center;
        text-align: center;
    }
    .bi-lp [data-maker] blockquote::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Stimmen-Karten auf dem Handy mittig, samt Altersgruppen-Label. */
@media (max-width: 700px) {
    .bi-lp [data-card] {
        align-items: center;
        text-align: center;
    }
    .bi-lp [data-card] > span { align-self: center !important; }
}

/* Die Pfeile am Stimmen-Slider sind entfallen; die Punktleiste steht jetzt
   ueber ein einfaches Flex-Layout mittig (siehe Markup). */

/* ── Nachtrag Mobil-Feinschliff ───────────────────────────────────────────── */

@media (max-width: 700px) {
    /* Etwas dichter zwischen Ueberschriften und Text. */
    .bi-lp h2 { margin-bottom: 1.25rem !important; }
    .bi-lp h3 { margin-bottom: .45rem !important; }
    /* Beide Hero-Buttons untereinander und mittig, der Hauptbutton ueber die
       volle Breite. */
    .bi-lp [data-hero-text] > div {
        flex-direction: column;
        align-items: center;
    }
    .bi-lp [data-hero-text] a[href="#kaufen"] {
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    .bi-lp [data-hero-text] a[href="#funktioniert"] {
        padding: 10px 25px !important;
        margin: -10px auto 0;
    }

    /* Ausgangspunkt einen Tick groesser als der uebrige Fliesstext. */
    .bi-lp section[data-screen-label="01 Unaware"] h2 ~ p { font-size: 18px !important; }
}

@media (max-width: 480px) {
    .bi-lp [data-hero-float] figcaption {
        width: 130px !important;
        font-size: 14px !important;
        bottom: -40px !important;
    }
}

/* Kaufbuttons in den Produktteasern auf dem Handy wie im Hero: Hauptbutton
   ueber die volle Breite, der Textlink zentriert darunter. */
@media (max-width: 700px) {
    .bi-lp [data-buy-actions] {
        flex-direction: column;
        align-items: center;
    }
    .bi-lp [data-buy-actions] > a:first-child {
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    .bi-lp [data-buy-actions] > a:last-child {
        padding: 10px 25px;
        margin: -10px auto 0;
    }
    .bi-lp [data-amazon] > a {
        width: 100%;
        text-align: center;
        justify-self: stretch;
    }
}