/* Strausserie — warm, botanisch, wie ein schöner Blumenladen.
   Mobile-first; eine Spalte, großzügige Luft. */

:root {
    --creme: #faf6ef;
    --papier: #ffffff;
    --tinte: #2d3229;
    --gedimmt: #7c8274;
    --gruen: #4a6741;
    --gruen-dunkel: #38513100;
    --akzent: #b0575a;
    --linie: #e7e0d2;
    --radius: 14px;
    --schatten: 0 2px 14px rgba(45, 50, 41, 0.08);
}

* { box-sizing: border-box; margin: 0; }

body {
    background: var(--creme);
    color: var(--tinte);
    font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.huelle { max-width: 680px; margin: 0 auto; padding: 0 1.1rem; }
.schmal { max-width: 480px; }
.mitte { text-align: center; }

h1, h2, .logo { font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; }

.kopf { padding-top: 2.2rem; padding-bottom: 0.6rem; text-align: center; }
.logo { font-size: 2rem; letter-spacing: 0.04em; color: var(--gruen); }
.logo::after { content: ""; display: block; width: 56px; height: 2px; background: var(--akzent); margin: 0.45rem auto 0; }
.slogan { color: var(--gedimmt); font-size: 0.95rem; margin-top: 0.5rem; }

.schritt { margin: 2rem 0; }
.schritt h2 { font-size: 1.25rem; margin-bottom: 0.8rem; }
.schritt h2 small { font-weight: 400; color: var(--gedimmt); font-size: 0.8rem; margin-left: 0.4rem; }
.nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--gruen); color: #fff; font-size: 0.85rem; margin-right: 0.45rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Floristen-Tipp */
.hinweis {
    background: #f1ede1; border-left: 3px solid var(--gruen);
    padding: 0.65rem 0.9rem; border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem; color: #4c5244; margin-bottom: 1rem; min-height: 2.6rem;
    transition: background 0.4s;
}
.hinweis.frisch { background: #e4ecdd; }

/* Blumen-Gitter */
.blumen-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
@media (min-width: 560px) { .blumen-gitter { grid-template-columns: repeat(4, 1fr); } }

.blumen-karte {
    background: var(--papier); border: 2px solid var(--linie); border-radius: var(--radius);
    padding: 0.5rem 0.5rem 0.6rem; text-align: center; cursor: pointer;
    box-shadow: var(--schatten); transition: border-color 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.blumen-karte:active { transform: scale(0.97); }
.blumen-karte.aktiv { border-color: var(--gruen); }
.blumen-karte img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: calc(var(--radius) - 6px); background: #efe9db;
}
.blumen-karte .name { font-weight: 600; font-size: 0.85rem; margin-top: 0.4rem; }
.blumen-karte .bedeutung { font-size: 0.7rem; color: var(--gedimmt); line-height: 1.3; }

.stepper {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 0.45rem;
}
.stepper button {
    width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--gruen);
    background: #fff; color: var(--gruen); font-size: 1.1rem; cursor: pointer;
}
.stepper .anzahl { font-weight: 700; min-width: 1.2rem; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.chip {
    border: 1.5px solid var(--linie); background: var(--papier); color: var(--tinte);
    border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.88rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.45rem;
    box-shadow: var(--schatten); -webkit-tap-highlight-color: transparent;
}
.chip img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; }
.chip.aktiv { border-color: var(--gruen); background: #eef2e8; }

/* Eingaben */
textarea, input[type="text"] {
    width: 100%; border: 1.5px solid var(--linie); border-radius: var(--radius);
    padding: 0.75rem 0.9rem; font: inherit; background: var(--papier);
    margin-bottom: 0.7rem; resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--gruen); border-color: transparent; }

/* Knöpfe */
.knopf {
    display: inline-block; border: none; border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 600; text-decoration: none; text-align: center;
    padding: 0.7rem 1.4rem; -webkit-tap-highlight-color: transparent;
}
.knopf.primaer { background: var(--gruen); color: #fff; box-shadow: 0 3px 12px rgba(74, 103, 65, 0.35); }
.knopf.primaer:disabled { background: #b9beb2; box-shadow: none; cursor: default; }
.knopf.sekundaer { background: #fff; color: var(--gruen); border: 1.5px solid var(--gruen); }
.knopf.gross { padding: 0.95rem 2rem; font-size: 1.05rem; width: 100%; max-width: 360px; }

.klein { font-size: 0.8rem; }
.gedimmt { color: var(--gedimmt); }
.fuss { text-align: center; padding: 2.5rem 1rem 2rem; color: var(--gedimmt); font-size: 0.8rem; }
.fuss a { color: var(--gruen); }

/* Overlays (Binden + Fertig) */
.overlay {
    position: fixed; inset: 0; background: rgba(45, 50, 41, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    backdrop-filter: blur(3px); z-index: 10; overflow-y: auto;
}
/* display:flex wuerde das hidden-Attribut ueberstimmen (Overlays fingen
   unsichtbar Klicks ab, Stepper zeigten sich auf allen Karten) — global
   absichern (Playwright-Fund, 20.08.). */
[hidden] { display: none !important; }
.binde-karte {
    background: var(--creme); border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 2rem 1.6rem; text-align: center; max-width: 420px; width: 100%;
    margin: auto;
}
.binde-karte h2 { margin-bottom: 0.6rem; }
.binde-puls { font-size: 3rem; animation: pulsieren 1.6s ease-in-out infinite; }
@keyframes pulsieren {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.15) rotate(3deg); }
}

.bild-rahmen {
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
    margin: 1rem 0; background: #efe9db;
}
.bild-rahmen img { display: block; width: 100%; }

.link-zeile { display: flex; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.link-zeile input { flex: 1; margin: 0; font-size: 0.85rem; }
.binde-karte .knopf { margin-top: 0.5rem; }

/* ---------- Empfänger-Seite ---------- */
.reveal-seite { display: flex; min-height: 100dvh; align-items: center; }
.reveal-seite main { padding-top: 2rem; padding-bottom: 2rem; width: 100%; }

#geschenk .vorfreude { font-size: 4rem; animation: pulsieren 1.8s ease-in-out infinite; }
#geschenk h1 { font-size: 1.9rem; margin: 0.6rem 0 0.4rem; }
#geschenk .untertitel { color: var(--gedimmt); margin-bottom: 1.6rem; }
#geschenk .marke { margin-top: 2.2rem; color: var(--gedimmt); font-size: 0.75rem; letter-spacing: 0.08em; }

#strauss { opacity: 0; transform: scale(0.92); transition: opacity 0.9s ease, transform 0.9s ease; }
#strauss.aufgeblueht { opacity: 1; transform: scale(1); }

.nachricht {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    font-size: 1.15rem; line-height: 1.6; margin: 1.2rem 0 0.3rem; quotes: none;
}
.von { color: var(--gedimmt); margin-bottom: 1rem; }

.bedeutungen {
    text-align: left; background: var(--papier); border-radius: var(--radius);
    box-shadow: var(--schatten); padding: 0.8rem 1rem; margin: 1rem 0;
    font-size: 0.88rem;
}
.bedeutungen summary { cursor: pointer; font-weight: 600; color: var(--gruen); }
.bedeutungen ul { margin: 0.6rem 0 0 1.1rem; display: grid; gap: 0.3rem; }

.leer-hinweis { color: var(--gedimmt); margin: 1rem 0 1.4rem; }

/* ---------- Floristen-Empfehlungen ---------- */
.blumen-karte { position: relative; }
.blumen-karte.empfohlen { border-color: var(--akzent); }
.passt-badge {
    position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%);
    background: var(--akzent); color: #fff; font-size: 0.6rem; font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
    letter-spacing: 0.03em; z-index: 1; box-shadow: 0 1px 5px rgba(176, 87, 90, 0.4);
}
.chip.empfohlen { border-color: var(--akzent); background: #fdf1ef; }
.empfehlung {
    font-size: 0.85rem; color: #7c4a4c; background: #fdf1ef;
    border-left: 3px solid var(--akzent); border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.55rem 0.9rem; margin-top: 0.8rem;
}

/* ---------- Reveal-Teilchen (Anlass-Animation) ---------- */
.teilchen-ebene { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.teilchen { position: absolute; will-change: transform, opacity; opacity: 0; }
.teilchen.fallen { top: -8vh; animation-name: t-fallen; animation-timing-function: linear; animation-fill-mode: forwards; }
.teilchen.steigen { bottom: -8vh; animation-name: t-steigen; animation-timing-function: ease-out; animation-fill-mode: forwards; }
.teilchen.schweben { animation-name: t-schweben; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
@keyframes t-fallen {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    8% { opacity: 1; }
    100% { transform: translateY(118vh) rotate(340deg); opacity: 0.9; }
}
@keyframes t-steigen {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(-118vh) rotate(-25deg); opacity: 0; }
}
@keyframes t-schweben {
    0% { transform: translateY(1.2rem) scale(0.8); opacity: 0; }
    25% { opacity: 1; }
    70% { opacity: 0.9; }
    100% { transform: translateY(-3rem) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .teilchen { display: none; } }