/* Sektion „Gutschein verschenken" (Entwurf 17.10.2026, Sitzung Homepage).

   Bewusst eine eigene Datei wie assets/css/specials.css: Die Sektion laesst
   sich damit zeigen, verschieben und wieder entfernen, ohne die grosse
   style.css anzufassen, an der mehrere Sitzungen arbeiten.

   Aufbau: links drei gefaecherte Gutschein-Karten, rechts Fakten und der
   Knopf. Unter 860 Pixeln rutschen die Karten nach oben und der Text darunter. */

.gutschein-subtitle {
    margin: 12px 0 0;
    max-width: 680px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}

.gutschein-grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    margin-top: 30px;
    padding: clamp(20px, 2.4vw, 34px);
    border: 4px solid var(--line);
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 8px 8px 0 var(--line);
}

/* --- Die drei Karten --------------------------------------------------- */

/* Die mittlere Karte steht vorn und gerade, die beiden aeusseren sind
   angeschnitten dahinter gekippt. Negative Raender lassen sie sich
   ueberlappen; ohne das stuenden drei Karten brav nebeneinander und jede
   waere zu klein, um das Motiv zu erkennen. */
.gutschein-faecher {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0 26px;
}

.gutschein-karte {
    display: block;
    width: clamp(120px, 15vw, 168px);
    height: auto;
    border: 3px solid var(--line);
    border-radius: 10px;
    background: #181818;
    box-shadow: 0 12px 26px rgba(17, 16, 15, .32);
}

.gutschein-karte-links  { transform: rotate(-9deg) translateY(10px); margin-right: -30px; z-index: 1; }
.gutschein-karte-mitte  { transform: rotate(1deg) scale(1.12);       z-index: 3; }
.gutschein-karte-rechts { transform: rotate(9deg) translateY(10px);  margin-left: -30px;  z-index: 1; }

/* --- Fakten, Knopf, Kleingedrucktes ------------------------------------ */

.gutschein-fakten {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.gutschein-fakten li {
    display: grid;
    gap: 2px;
    padding-left: 22px;
    position: relative;
}

/* Gelber Punkt statt Aufzaehlungszeichen – greift die Markenfarbe auf. */
.gutschein-fakten li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 11px;
    height: 11px;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--yellow);
}

.gutschein-fakten strong {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.2;
}

.gutschein-fakten span {
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.45;
    font-weight: 600;
}

.gutschein-motive {
    margin: 0 0 18px;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.45;
    font-weight: 700;
    opacity: .8;
}

/* NICHT nowrap und NICHT inline-block (17.10.2026 korrigiert): Beides zusammen
   hat „Gutschein verschenken" auf dem Handy aus dem Rahmen geschoben – der Text
   stand rechts ueber der gelben Flaeche. Der Knopf bleibt das inline-flex aus
   .hero-button, zentriert sich damit selbst und darf notfalls umbrechen. */
.gutschein-cta { white-space: normal; }

.gutschein-klein {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    opacity: .75;
}

/* --- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 860px) {
    .gutschein-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 16px;
    }
    .gutschein-karte { width: clamp(108px, 26vw, 150px); }
    /* Schmaleres Innenmass: Bei 375 px blieben mit den 34 px aus .hero-button nur
       rund 230 px fuer den Text – zu wenig fuer „Gutschein verschenken". */
    .gutschein-cta { width: 100%; padding-inline: 16px; }
}