/* ==================================================================
   HappyPrices – 17-Cent-Aktion ("Tankrabatt")
   Wird nur geladen, wenn die Aktion aktiv ist oder du in der Vorschau
   bist (siehe start.php). Ergänzt happyprices.css, überschreibt nichts
   Bestehendes. Alle Klassen sind mit .aktion / .aktionsleiste / .preis-
   geprefixt, damit es keine Kollisionen gibt.
   ================================================================== */

:root{
    --akt-rot:#e2001a;
    --akt-rot-dunkel:#a60011;
    --akt-rot-tief:#7d000d;
    --akt-creme:#fff6f2;
    --akt-wa:#25d366;
    --akt-wa-dunkel:#1ebe5d;
}

/* ---- Shop-weite Aktionsleiste (schmal, ganz oben) ---------------- */
.aktionsleiste{
    background:var(--akt-rot-tief);
    color:#fff;
    font-size:.92rem;
}
.aktionsleiste--teaser{ background:var(--akt-rot-dunkel); }
.aktionsleiste-inhalt{
    display:flex;align-items:center;justify-content:center;gap:.4rem 1.1rem;
    flex-wrap:wrap;
    padding:.5rem 1rem;
    text-align:center;
}
.aktionsleiste-text strong{ font-weight:800; }
.aktionsleiste-wa{
    display:inline-flex;align-items:center;gap:.4rem;
    background:var(--akt-wa);color:#08341b;
    font-weight:700;text-decoration:none;
    padding:.28rem .7rem;border-radius:999px;line-height:1;
    white-space:nowrap;
}
.aktionsleiste-wa:hover{ background:var(--akt-wa-dunkel); }
.wa-ico{ display:block;flex:0 0 auto; }

/* ---- Aktions-Hero ------------------------------------------------ */
.buehne.aktion-hero{
    position:relative;
    background:
        radial-gradient(150% 120% at 10% 6%, #000 0%, rgba(42,6,12,0) 75%),
        linear-gradient(120deg, #4a0d17 0%, #991020 55%, #7c1826 100%);
    color:#fff;
    min-height:0;
    overflow:hidden;
}
.aktion-hero__inhalt{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:2rem;
    padding-top:2rem;
    padding-bottom:2rem;
}

/* Lach-Emoji vor der Headline (transportiert die Ironie) */
.aktion-hero__lacher{
    font-size:1.05em;
    margin-right:.22em;
    vertical-align:-.06em;
}
.aktion-hero__text{ max-width:44rem; }

.aktion-hero__stoerer{
    display:inline-block;
    background:#fff;color:var(--akt-rot);
    font-weight:800;letter-spacing:.02em;
    padding:.28rem .8rem;border-radius:999px;
    font-size:.9rem;margin-bottom:.9rem;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
}
.aktion-hero__gross{
    font-size:clamp(1.9rem,4.4vw,3rem);
    line-height:1.06;font-weight:800;
    margin:0 0 .8rem;
    text-wrap:balance;
}
.aktion-hero__klein{
    font-size:clamp(1rem,1.4vw,1.12rem);
    line-height:1.5;margin:0 0 1.3rem;
    color:var(--akt-creme);
    max-width:52ch;
}

/* WhatsApp-CTA */
.aktion-hero__cta{
    display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;
    margin-bottom:1.1rem;
}
.aktion-hero__cta-text{ font-weight:700; }
.knopf.aktion-wa,
.knopf.gross.aktion-wa{
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--akt-wa);color:#08341b;
    border:none;font-weight:800;
}
.knopf.aktion-wa:hover{ background:var(--akt-wa-dunkel);color:#08341b; }

/* --- Teilen-Buttons: WhatsApp (direkt) + "Weitersagen" (System-Teilen/Kopieren) --- */
.aktion-share{ display:flex;align-items:center;gap:.7rem 1rem;flex-wrap:wrap; }
.aktion-share--hero{ flex-direction:column; align-items:flex-start; gap:.6rem; margin-bottom:1.1rem; }
.aktion-share__label{ font-weight: 700; font-size: 1.25rem; }
.aktion-share__knoepfe{ display:flex;gap:.6rem;flex-wrap:wrap; }
.teilen{
    display:inline-flex;align-items:center;gap:.5rem;
    border:none;cursor:pointer;text-decoration:none;
    font-family:inherit;font-weight:800;font-size:1rem;line-height:1;
    color:#fff;padding:.7rem 1.05rem;border-radius:999px;
}
.teilen svg{ display:block;flex:0 0 auto; }
.teilen--wa{ background:var(--akt-wa);color:#fff; }
.teilen--wa:hover{ background:var(--akt-wa-dunkel); }
/* "Weitersagen": neutraler Knopf, lesbar auf dem dunkelroten Hero UND der roten Leiste */
.teilen--mehr{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.55); }
.teilen--mehr:hover{ background:rgba(255,255,255,.28); }

/* Aktionsleiste: kompakt, nur Icons */
.aktion-share--leiste{ gap:.4rem; }
.aktion-share--leiste .teilen{ padding:.34rem .5rem;font-size:.85rem;color:#fff; }
.aktion-share--leiste .teilen__text{ display:none; }

/* Hover: Beschriftung/Icon bleiben weiß (nicht das rote a:hover des Shops) */
.teilen:hover{ color:#fff; }

/* Toast (Instagram-Fallback: "Link kopiert") */
.aktion-toast{
    position:fixed;left:50%;bottom:4.5rem;transform:translateX(-50%) translateY(10px);
    z-index:1100;max-width:90%;text-align:center;
    background:#111;color:#fff;padding:.7rem 1.1rem;border-radius:12px;
    font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.4);
    opacity:0;transition:opacity .25s ease, transform .25s ease;
}
.aktion-toast.sichtbar{ opacity:1;transform:translateX(-50%) translateY(0); }

/* Sekundäre Knöpfe im Aktions-Hero auf rotem Grund lesbar machen */
.aktion-hero__knoepfe .knopf{
    background:rgba(255,255,255,.16);
    color:#fff;border:1px solid rgba(255,255,255,.5);
}
.aktion-hero__knoepfe .knopf:hover{ background:rgba(255,255,255,.28); }
.aktion-hero__knoepfe .knopf.geist{
    background:transparent;
}

/* Der Blickfang: "amtliches Siegel" 17 Cent auf alles */
.aktion-hero__schild{
    flex:0 0 auto;
    width:clamp(9rem,20vw,13rem);
    aspect-ratio:1/1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    color:var(--akt-rot);
    background:#fff;
    border-radius:50%;
    box-shadow:0 18px 40px rgba(0,0,0,.3);
    position:relative;
    transform:rotate(-7deg);
    animation:akt-siegel-rein .6s ease-out both;
}
.aktion-hero__schild::before{
    content:"";position:absolute;inset:7%;
    border:2px dashed rgba(226,0,26,.45);
    border-radius:50%;
}
.aktion-hero__betrag{
    font-size:clamp(2.8rem,6vw,4.2rem);
    font-weight:800;line-height:.9;
}
.aktion-hero__cent{
    font-size:clamp(1.1rem,2.4vw,1.6rem);
    font-weight:800;line-height:1;margin-top:.1rem;
    text-transform:uppercase;letter-spacing:.06em;
}
.aktion-hero__auf{
    font-size:.72rem;font-weight:700;line-height:1.15;
    margin-top:.45rem;max-width:8.5rem;
    text-transform:uppercase;letter-spacing:.03em;color:var(--akt-rot-dunkel);
}
/* Teaser-Siegel: "Ab 01. Oktober" */
.aktion-hero__ab{
    font-size:clamp(1rem,2.4vw,1.5rem);font-weight:800;line-height:1;
    text-transform:uppercase;letter-spacing:.05em;
}
.aktion-hero__tag{
    font-size:clamp(2.4rem,5.4vw,3.6rem);font-weight:800;line-height:.95;
}
.aktion-hero__monat{
    font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:800;line-height:1;
    text-transform:uppercase;letter-spacing:.02em;color:var(--akt-rot-dunkel);
}
@keyframes akt-siegel-rein{
    from{ transform:rotate(-7deg) scale(.6); opacity:0; }
    to  { transform:rotate(-7deg) scale(1);  opacity:1; }
}
@media (prefers-reduced-motion: reduce){
    .aktion-hero__schild{ animation:none; }
}

/* ---- Preise: durchgestrichener Regulärpreis + Aktionspreis ------- */
.preisschild.preis-aktion{ color:#fff; font-weight:800; }   /* weißer Preis auf rotem Preisschild */
.preis-vorher{
    margin-left:.45rem;
    color:#8a8a8a;
    text-decoration:line-through;
    text-decoration-thickness:1.5px;
    font-size:.92em;
    font-weight:500;
}
.preis-vorher--gross{
    font-size:1.05rem;
    margin-left:.55rem;
}

/* ---- Vorschau-Hinweis (nur für dich) ---------------------------- */
.aktion-vorschau{
    position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);
    z-index:1000;
    display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:center;
    max-width:calc(100% - 1.5rem);
    background:#111;color:#fff;
    padding:.55rem .9rem;border-radius:999px;
    font-size:.86rem;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.aktion-vorschau strong{ color:#ffd24a; }
.aktion-vorschau a{
    color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap;
}
.aktion-vorschau__punkt{
    width:.6rem;height:.6rem;border-radius:50%;
    background:#ffd24a;flex:0 0 auto;
    box-shadow:0 0 0 0 rgba(255,210,74,.7);
    animation:akt-puls 1.8s ease-out infinite;
}
@keyframes akt-puls{
    0%  { box-shadow:0 0 0 0 rgba(255,210,74,.7); }
    70% { box-shadow:0 0 0 8px rgba(255,210,74,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,210,74,0); }
}
@media (prefers-reduced-motion: reduce){
    .aktion-vorschau__punkt{ animation:none; }
}

/* ---- Mobil ------------------------------------------------------ */
@media (max-width:720px){
    .aktion-hero__inhalt{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
        gap:1.4rem;
    }
    .aktion-hero__text{ order:2; }
    .aktion-hero__schild{ order:1; transform:rotate(-4deg); }
    .aktion-hero__cta,
    .aktion-hero__knoepfe{ justify-content:center; }
    .aktion-hero__klein{ margin-left:auto;margin-right:auto; }
}