/* 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; }

/* Kein Doppeltipp-Zoom; Pinch faengt zusaetzlich JS ab (gesturestart) */
html { touch-action: manipulation; }

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.6rem; padding-bottom: 0.6rem; text-align: center; position: relative; }

/* Schlanke Kopfzeile der Unterseiten (Konto, Impressum, Wissen) */
.unterkopf {
    position: sticky; top: 0; z-index: 6; height: 3.6rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--creme); box-shadow: 0 2px 12px rgba(45, 50, 41, 0.1);
}
.unterkopf img { display: block; }
.unterkopf .menue-knopf,
.unterkopf .kopf-knospen { top: 50%; transform: translateY(-50%); }
.menue-sprachen .sprach-chip {
    color: var(--creme); text-decoration: none; border: 1.5px solid rgba(250, 246, 239, 0.5);
    border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.88rem;
}
.menue-sprachen .sprach-chip.aktiv { background: var(--creme); color: var(--gruen); }

/* Icon-Knoepfe (Kopieren, Download): schlichtes Quadrat im CD */
.ikon-knopf {
    flex: 0 0 auto; width: 2.9rem; height: 2.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--gruen); border-radius: 14px;
    color: var(--gruen); cursor: pointer; text-decoration: none; padding: 0;
}
.ikon-knopf svg { width: 1.35rem; height: 1.35rem; }

/* Hinweis-Banner oben unter der festen Leiste */
#hinweis-banner {
    position: fixed; left: 0.8rem; right: 0.8rem;
    top: calc(3.9rem + env(safe-area-inset-top)); z-index: 8;
    background: #f9eeee; border: 1.5px solid #e5c8c9; color: #8a4345;
    border-radius: var(--radius); padding: 0.85rem 1.1rem;
    font-size: 1rem; font-weight: 600; line-height: 1.45; box-shadow: var(--schatten);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#hinweis-banner.zeigt { opacity: 1; transform: none; }

/* Feste Kopf-Leiste mit gleichbleibender Hoehe: Knospen und Menue
   stehen immer dort, das kleine Logo und der Grundstreifen blenden
   sich mit dem Scrollweg ein (--p 0 bis 1). Der grosse Kopf darunter
   scrollt normal aus dem Bild, dadurch aendert sich keine Hoehe und
   der Inhalt wird nicht hochgezogen (Wolfgang, 31.08.2026). */
.kopf-leiste {
    --p: 0;
    position: fixed; top: 0; left: 0; right: 0; z-index: 6;
    height: 3.6rem; pointer-events: none;
}
.kopf-leiste::before {
    content: ''; position: absolute; inset: 0;
    background: var(--creme); box-shadow: 0 2px 12px rgba(45, 50, 41, 0.1);
    opacity: var(--p);
}
.leiste-emblem {
    position: absolute; left: 50%; top: 50%;
    width: 48px; height: 48px;
    transform: translate(-50%, calc(-50% + (1 - var(--p)) * 10px));
    opacity: var(--p); pointer-events: auto;
}
.kopf-leiste .menue-knopf {
    top: 50%; transform: translateY(-50%); pointer-events: auto;
}
.kopf-knospen {
    position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 0.25rem;
    font-weight: 700; font-size: 1rem; color: var(--akzent);
    text-decoration: none; padding: 0.4rem; pointer-events: auto;
}

/* ---------- Menü (vollflächig, Muster von usv-elixhausen.at) ---------- */
.menue-knopf {
    position: absolute; top: 1rem; right: 0.4rem; padding: 0.6rem;
    background: none; border: 0; cursor: pointer; display: grid; gap: 5px;
}
.menue-knopf span { display: block; width: 26px; height: 2px; background: var(--gruen); border-radius: 2px; }

/* Salbeigrund statt Creme: das Menü soll sich klar von der Werkstatt
   abheben, sonst wirkt es wie ein Teil der Seite. */
.menue-overlay {
    position: fixed; inset: 0; z-index: 60; background: var(--gruen); color: var(--creme);
    display: flex; flex-direction: column; overflow-y: auto;
    padding: 1rem 1.4rem 2rem; padding-top: max(1rem, env(safe-area-inset-top));
    /* Gleiches Muster wie bei den übrigen Overlays: allow-discrete hält
       display bis zum Ende, @starting-style liefert den Startzustand. */
    opacity: 1;
    transition: opacity 0.26s ease, display 0.26s allow-discrete;
}
.menue-overlay[hidden] { opacity: 0; }
@starting-style { .menue-overlay { opacity: 0; } }
/* Die Einträge kommen einen Hauch nach, das nimmt der Fläche die Härte. */
.menue-liste, .menue-fuss { transition: transform 0.26s ease, opacity 0.26s ease; transform: none; }
.menue-overlay[hidden] .menue-liste,
.menue-overlay[hidden] .menue-fuss { transform: translateY(12px); opacity: 0; }
@starting-style {
    .menue-overlay .menue-liste,
    .menue-overlay .menue-fuss { transform: translateY(12px); opacity: 0; }
}
/* Logo mittig, das X bleibt rechts */
.menue-kopf { position: relative; text-align: center; }
.menue-kopf .menue-schliessen { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.menue-schliessen {
    background: none; border: 0; font-size: 1.5rem; color: var(--creme);
    cursor: pointer; padding: 0.4rem 0.6rem; line-height: 1;
}
.menue-liste { display: flex; flex-direction: column; margin-top: 1.6rem; }
.menue-liste a {
    padding: 1rem 0; font-family: var(--serif, inherit); font-size: 1.35rem;
    color: var(--creme); text-decoration: none; border-bottom: 1px solid rgba(250, 246, 239, 0.2);
}
.menue-sprachen { display: flex; gap: 0.5rem; margin-top: 1.4rem; flex-wrap: wrap; }
.menue-sprachen button {
    background: none; border: 1.5px solid rgba(250, 246, 239, 0.35); color: var(--creme);
    border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.88rem; cursor: pointer;
}
.menue-sprachen button.aktiv { background: var(--creme); color: var(--gruen); border-color: var(--creme); }
.menue-fuss {
    margin-top: auto; padding-top: 2rem; font-size: 0.95rem;
    display: grid; gap: 0.35rem; color: rgba(250, 246, 239, 0.75);
}
.menue-fuss a { color: rgba(250, 246, 239, 0.9); }
.menue-wer { color: #fff; font-weight: 600; }
.menue-knospen a { color: #f2c3ac; font-weight: 600; text-decoration: none; }
.menue-fuss .knopf.primaer { background: var(--creme); color: var(--gruen); box-shadow: none; }
.logo-emblem { width: 112px; height: 112px; margin-bottom: 0.6rem; }
.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; }

/* Praesente Bereichs-Titel: bewusst NICHT im Logo-Look (keine
   Akzentlinie, linksbuendig wie die Schritt-Ueberschriften) */
.bereich-titel { font-size: 1.5rem; }
.bereich-text { color: var(--gedimmt); margin: 0.35rem 0 1.1rem; }
#schritt-werkstatt-titel { margin: 3rem 0 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 */
/* minmax(0,1fr) statt 1fr: sonst druecken breite Karteninhalte das
   Gitter rechts ueber den Seitenrand hinaus (ungleiche Raender) */
/* Bei sehr großer Systemschrift passen drei Karten nebeneinander nicht
   mehr; dann sollen es von selbst weniger werden statt überzulaufen. */
.blumen-gitter {
    display: grid; gap: 0.7rem;
    grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
}
@media (min-width: 560px) { .blumen-gitter { grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); } }
.blumen-karte { min-width: 0; overflow-wrap: anywhere; }

.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; }
.blumen-karte .preis { font-size: 0.7rem; color: var(--akzent); font-weight: 600; margin-top: 0.2rem; }
/* Die pastelligen Icons (Kamera, Lupe) waren am Handy kaum zu sehen:
   kraeftiger nachziehen (Wolfgang, 30.08.2026) */
.chat-kopf .ikon, #scanner-status img, #scanner-status .ikon {
    filter: brightness(0.72) saturate(1.6) contrast(1.15);
    /* Am Handy waren die Icons kaum zu erkennen: deutlich groesser */
    width: 1.9rem; height: 1.9rem; vertical-align: -0.45rem;
}
/* Scanner-Knoepfe mittig statt linksbuendig */
.modal-fuss { text-align: center; }

/* Knospen-Waehrungszeichen: Tulpenbluete wie im Logo, laeuft in der
   Textfarbe mit wie ein Euro-Zeichen */
.knospe { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; }

/* Preis-Anhaenger in Chips (Gruen, Akzente, Baender, Verpackung) */
.chip-preis {
    font-size: 0.72rem; font-weight: 700; color: var(--akzent);
    background: #f7ede9; border-radius: 999px; padding: 0.1rem 0.42rem;
}

.stepper {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    margin-top: 0.45rem; flex-wrap: wrap; max-width: 100%;
}
.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; }
/* Kleine Zwischen-Ueberschrift, wenn ein Schritt zwei Gruppen enthaelt
   (Verpackung vs. Stil) */
.gruppen-titel {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #7c8274; margin: 0.9rem 0 0.45rem;
}
.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;
    max-width: 100%; text-align: left; overflow-wrap: anywhere;
}
.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"], input[type="email"] {
    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;
    font-size: max(1rem, 16px); /* unter 16px zoomt iOS beim Fokussieren hinein */
}
textarea:focus, input:focus { outline: 2px solid var(--gruen); border-color: transparent; }

/* Status-Pille (Konto und Empfaengerseite) */
.status-pille {
    display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px;
    padding: 0.1rem 0.55rem; background: #eef2e8; color: var(--gruen);
}
.status-pille.grau { background: #efece3; color: var(--gedimmt); }

/* ---------- Empfaenger-Antwort ---------- */
.antwort-box {
    background: var(--papier); border: 1.5px solid var(--linie);
    border-radius: var(--radius); padding: 0.9rem; margin-top: 1.1rem;
    text-align: left;
}
.emoji-zeile { display: flex; gap: 0.15rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.emoji-zeile button {
    border: none; background: none; font-size: 1.45rem; cursor: pointer;
    padding: 0.15rem 0.3rem; border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}
.emoji-zeile button:active { background: #eef2e8; }
.antwort-box textarea { margin-bottom: 0.5rem; }
.antwort-box .knopf { width: 100%; }

/* Gutschein-Code einloesen */
.code-zeile { display: flex; gap: 0.5rem; margin: 0.5rem 0 0.3rem; }
.code-zeile input { margin: 0; text-transform: uppercase; }
.code-zeile input::placeholder { text-transform: none; }
#binde-code-meldung:empty, #code-meldung:empty { display: none; }
.gut { color: var(--gruen); }
.schlecht { color: var(--akzent); }

/* Eigene CD-Icons statt Standard-Emojis (Wolfgangs Regel) */
.ikon {
    width: 1.5em; height: 1.5em; object-fit: contain;
    vertical-align: -0.35em; margin-right: 0.45em; display: inline-block;
}
img.inhalt-punkt { width: 2.2rem; height: 2.2rem; object-fit: contain; }
img.teilchen { height: auto; }

/* Google-Anmeldeknopf (nur sichtbar, wenn der Server OAuth meldet) */
.google-knopf {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    width: 100%; text-decoration: none; box-sizing: border-box;
}
.trenner-oder { text-align: center; margin: 0.8rem 0 0.6rem; }

/* 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;
    /* Bei großer Systemschrift soll die Beschriftung umbrechen statt aus
       dem Knopf zu laufen. */
    max-width: 100%; overflow-wrap: anywhere;
}
.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 {
    /* Hoehe folgt der SICHTBAREN Flaeche: auf iOS schiebt die Tastatur
       das Modal sonst unter den Bildschirmrand (--sichtbar kommt aus app.js). */
    /* top folgt dem Versatz des sichtbaren Fensters: schiebt die
       iOS-Tastatur die Seite hoch, wandert das Overlay mit. */
    position: fixed; left: 0; right: 0; top: var(--sichtbar-oben, 0px);
    height: var(--sichtbar, 100dvh);
    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;
    /* Gescrollt wird im Modal, nicht dahinter. */
    overscroll-behavior: contain;
    /* Weiches Ein-/Ausblenden trotz hidden-Attribut: allow-discrete
       haelt display bis zum Ende der Transition, @starting-style
       liefert den Startzustand beim Einblenden. Aeltere Browser
       oeffnen einfach sofort. */
    opacity: 1;
    transition: opacity 0.28s ease, display 0.28s allow-discrete;
}
.overlay[hidden] { opacity: 0; }
@starting-style { .overlay { opacity: 0; } }
.overlay > .binde-karte { transition: transform 0.28s ease; transform: none; }
.overlay[hidden] > .binde-karte { transform: translateY(18px) scale(0.98); }
@starting-style { .overlay > .binde-karte { transform: translateY(18px) scale(0.98); } }
/* 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; }

/* ---------- Schaufenster: fertige Sträuße zum Sofort-Kauf ---------- */
/* Die naechste Karte wird deutlich angeschnitten und rechts liegt ein
   Verlauf: beides sagt "hier geht es weiter" (Wolfgang, 30.08.2026). */
.schaufenster-rahmen { position: relative; }
.schaufenster-rahmen::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0.7rem;
    width: 3rem; pointer-events: none;
    background: linear-gradient(to right, rgba(250, 246, 239, 0), var(--creme) 85%);
    opacity: 1; transition: opacity 0.35s ease;
}
.schaufenster-rahmen.zu-ende::after { opacity: 0; }
.schaufenster {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(68%, 15rem);
    gap: 0.8rem; overflow-x: auto; padding: 0.3rem 0.2rem 0.7rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: rgba(74, 103, 65, 0.35) transparent;
}
.schaufenster::-webkit-scrollbar { height: 5px; }
.schaufenster::-webkit-scrollbar-thumb { background: rgba(74, 103, 65, 0.35); border-radius: 999px; }
.sf-karte {
    display: flex; flex-direction: column; gap: 0.35rem; text-align: left;
    background: var(--papier); border: 1.5px solid var(--linie); border-radius: var(--radius);
    padding: 0.55rem; font: inherit; cursor: pointer; scroll-snap-align: start;
}
.sf-karte img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: calc(var(--radius) - 6px); background: #efe9db;
}
/* Platzhalter in Kartengroesse, bis die Straeusse geladen sind */
.sf-platzhalter { pointer-events: none; }
.sf-schimmer {
    background: #ece5d6; border-radius: 8px;
    animation: schimmern 1.4s ease-in-out infinite;
}
.sf-bildfeld { aspect-ratio: 1; border-radius: calc(var(--radius) - 6px); }
.sf-zeile { height: 0.8rem; }
.sf-zeile.schmal { width: 55%; }
@keyframes schimmern {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.sf-anlass { font-size: 0.72rem; font-weight: 700; color: var(--gruen); text-transform: uppercase; letter-spacing: 0.04em; }
.sf-preis { font-weight: 700; color: var(--akzent); }
.sf-zutaten {
    font-size: 0.78rem; color: var(--gedimmt); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Kauf-Modal wie das Oeffnen eines Straußes: Bild vollflaechig und
   sticky, das Info-Blatt schiebt sich beim Scrollen darueber, nur ein
   X rechts oben (Wolfgang, 30.08.2026). */
#kauf-overlay { padding: 0; }
.kauf-karte {
    text-align: left; padding: 0; position: relative;
    width: 100%; max-width: none; height: var(--sichtbar, 100dvh);
    max-height: none; border-radius: 0; margin: 0; overflow: hidden;
}
#kauf-schliessen {
    position: absolute; z-index: 3;
    top: max(0.6rem, env(safe-area-inset-top)); right: 0.7rem;
    background: none; border: 0; box-shadow: none; cursor: pointer;
    font-size: 1.9rem; line-height: 1; padding: 0.3rem 0.5rem;
    color: #fff; text-shadow: 0 1px 6px rgba(45, 50, 41, 0.55);
}
/* Bild als feste Ebene hinter dem Scrollbereich: das iOS-Gummiband
   zeigt beim Runterziehen wieder Bild statt Seitenhintergrund */
.kauf-buehne {
    position: absolute; top: 0; left: 0; right: 0; z-index: 0; overflow: hidden;
    height: min(calc(var(--sichtbar, 100dvh) * 0.7), 122vw);
    background: #efe9db;
}
.kauf-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#kauf-inhalt {
    position: absolute; inset: 0; z-index: 1;
    overflow-y: auto; overscroll-behavior: none;
    scrollbar-width: none;
}
#kauf-inhalt::-webkit-scrollbar { display: none; }
/* Galerie statt Abstandshalter: seitlich wischen zwischen Hauptbild
   und Detailansichten, Punkte zeigen die Position */
/* sticky wie auf der Empfaenger-Seite: die Galerie bleibt stehen,
   das Blatt schiebt sich darueber */
.kauf-halter { position: sticky; top: 0; z-index: 0; height: min(calc(var(--sichtbar, 100dvh) * 0.66), 114vw); }
.kauf-galerie {
    display: flex; height: 100%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.kauf-galerie::-webkit-scrollbar { display: none; }
.kauf-galerie img {
    flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
    scroll-snap-align: start; background: #efe9db;
}
.kauf-punkte {
    position: absolute; left: 0; right: 0; bottom: 2.2rem;
    display: flex; justify-content: center; gap: 0.45rem; pointer-events: none;
}
.kauf-punkte span {
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(45, 50, 41, 0.35);
    transition: background 0.25s ease;
}
.kauf-punkte span.aktiv { background: #fff; }
.kauf-blatt {
    position: relative; z-index: 1;
    background: var(--creme);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.6rem 1.4rem max(1.6rem, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(45, 50, 41, 0.12);
    min-height: calc(var(--sichtbar, 100dvh) * 0.4);
}
/* Griff-Strich wie bei Karten-Apps: hier kann man schieben und ziehen */
.kauf-griff {
    width: 2.6rem; height: 0.3rem; border-radius: 999px;
    background: rgba(74, 103, 65, 0.28); margin: 0 auto 0.9rem;
}
.kauf-blatt h2 { margin: 0 0 0.4rem; }
.kauf-anlass {
    font-size: 0.72rem; font-weight: 700; color: var(--gruen);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem;
}
/* Floras Gedanke zum Strauß, in ihrer Stimme */
.kauf-gedanke { font-style: italic; color: var(--gedimmt); margin-bottom: 0.5rem; }
.kauf-blatt .knopf { margin-top: 0.9rem; width: 100%; max-width: none; }
.kauf-blatt textarea, .kauf-blatt input { margin-top: 0.6rem; }
/* Die Worte-Felder sind eingeklappt, bis Erwerben oder ein Zug am
   Griff sie freigibt */
#kauf-felder {
    max-height: 0; overflow: hidden; opacity: 0; padding-bottom: 0.5rem;
    transition: max-height 0.35s ease, opacity 0.35s ease;
}
#kauf-felder.offen { max-height: 30rem; opacity: 1; }

/* ---------- 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; }

/* Kurz einblenden, das AUSPACKEN uebernimmt das Papier, nicht der Fade
   (doppeltes Fading machte den Moment milchig). */
#strauss { opacity: 0; transform: scale(0.96); transition: opacity 0.3s ease, transform 1s 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; }
/* Empfehlungen freundlich in Salbei mit gestrichelter Kante:
   das fruehere Terrakotta-Rot las sich wie "falsch/nicht verfuegbar" */
.blumen-karte.empfohlen { border-color: #c98f91; border-style: dashed; }
.passt-badge {
    position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%);
    background: #b0575a; 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.35);
}
.chip.empfohlen { border-color: #c98f91; border-style: dashed; background: #faf1f1; }
/* Grenze erreicht: uebrige Pills der Gruppe treten zurueck */
.chips.voll .chip:not(.aktiv) { opacity: 0.4; transition: opacity 0.25s; }
/* Kurz hervorgehoben nach Sprung aus dem Korb */
.markiert { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: var(--radius); transition: outline-color 0.4s; }

/* Farbfamilien: EINE Karte, kleine Farb-Punkte deuten die Auswahl an */
.farb-mini { display: flex; justify-content: center; gap: 0.3rem; margin-top: 0.4rem; }
.mini-punkt {
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    border: 1.5px solid rgba(45, 50, 41, 0.15);
}
.mini-punkt.gewaehlt { border-color: var(--gruen); box-shadow: 0 0 0 1.5px #fff inset; }
.familien-stand { font-size: 0.68rem; color: var(--gedimmt); margin-top: 0.3rem; min-height: 1.1em; }

/* Farbwahl-Feld: eine Zeile je Farbe mit eigenem Stepper */
.farbwahl-karte { text-align: left; }
.farbwahl-zeile {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--papier); border: 1.5px solid var(--linie); border-radius: var(--radius);
    padding: 0.45rem 0.6rem; margin-top: 0.5rem; box-shadow: var(--schatten);
}
.farbwahl-zeile.gewaehlt { border-color: var(--gruen); }
.farbwahl-zeile img { width: 3rem; height: 3rem; border-radius: 10px; object-fit: cover; background: #efe9db; flex: none; }
.farbwahl-zeile .fw-text { flex: 1; display: grid; }
.farbwahl-zeile .fw-text span { font-size: 0.75rem; color: var(--akzent); font-weight: 600; }
.farbwahl-zeile .stepper { margin-top: 0; flex: none; }
/* Strauss-Uebersicht: passt in den Screen, Liste scrollt, Fuss bleibt */
.strauss-karte {
    text-align: left; display: flex; flex-direction: column;
    max-height: calc(var(--sichtbar, 100dvh) - 2rem);
}
#strauss-inhalt {
    overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(74, 103, 65, 0.35) transparent;
}
#strauss-inhalt::-webkit-scrollbar { width: 5px; }
#strauss-inhalt::-webkit-scrollbar-thumb { background: rgba(74, 103, 65, 0.35); border-radius: 999px; }
.strauss-karte .modal-fuss { text-align: center; }
.strauss-rahmen { font-size: 0.85rem; color: var(--gedimmt); margin: 0.2rem 0 0.4rem; }
.farbwahl-zeile .entfernen { flex: none; }

/* Empfohlene Farbe: gleiche Sprache wie die passt-dazu-Karten */
.farbwahl-zeile.empfohlen { border-color: #c98f91; border-style: dashed; }
.fw-passt { font-size: 0.68rem; font-style: normal; font-weight: 700; color: #b0575a; }
.mini-punkt.empfohlen { border-color: #b0575a; border-style: dashed; }

/* Hinweis-Modal (Limits): klein, ueber allem, mit Flora als Absender */
.hinweis-overlay { z-index: 20; }
.hinweis-karte { max-width: 330px; text-align: center; }
.hinweis-karte h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.hinweis-karte p { font-size: 0.92rem; color: #4c5244; }
.hinweis-flora { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; margin-bottom: 0.6rem; }
.hinweis-karte p { margin-bottom: 1rem; }
/* Floras Empfehlung: Terrakotta laut CD („passt dazu"), damit sie sich
   klar von den gruenen Erklaer-Hinweisen unterscheidet */
.empfehlung {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.85rem; color: #8a4345; background: #f9eeee;
    border: 1px solid #e5c8c9; border-radius: var(--radius);
    padding: 0.6rem 0.9rem; margin-top: 0.8rem;
}
.empfehlung img { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.05rem; }
.empfehlung .empf-teil { display: block; }
.empfehlung .empf-teil b { color: #b0575a; font-weight: 700; }

/* Lade-Zustand nach der letzten Binde-Szene: Salbei-Ring kreist um die
   Bildmarke auf Creme (Wolfgangs Variante 3, 29.08.2026). Die Drehung
   kommt per rAF aus app.js, CSS-Keyframes auf transform stehen auf
   iOS still. */
.binde-laden {
    position: absolute; inset: 0; z-index: 2;
    display: grid; place-items: center; background: var(--creme);
}
.lade-kreis { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.lade-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--gruen) 0 25%, transparent 25% 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
/* Die generische Buehnen-Regel (absolute, opacity 0) gilt hier nicht */
.binde-buehne .lade-kreis img {
    position: static; inset: auto; opacity: 1;
    width: 84px; height: 84px; border-radius: 50%; object-fit: contain;
}

/* Floras Ueberraschungs-Modal: passt immer in den Screen, gescrollt
   wird nur die Zutatenliste, die Knoepfe bleiben unten sichtbar */
.ueberraschung-karte {
    display: flex; flex-direction: column;
    max-height: calc(var(--sichtbar, 100dvh) - 2rem);
}
#ueberraschung-inhalt {
    overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(74, 103, 65, 0.35) transparent;
}
#ueberraschung-inhalt::-webkit-scrollbar { width: 5px; }
#ueberraschung-inhalt::-webkit-scrollbar-thumb { background: rgba(74, 103, 65, 0.35); border-radius: 999px; }
.ueberraschung-fuss { flex: none; position: relative; }
/* Solange unten noch Inhalt wartet, deutet ein Schleier das Scrollen an */
.ueberraschung-fuss::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.8rem;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0), var(--creme) 85%);
    pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
}
.laesst-scrollen .ueberraschung-fuss::before { opacity: 1; }
.ueberraschung-fuss .knopf { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flora-kopf { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; text-align: left; }
.flora-kopf h2 { font-size: 1.35rem; margin-bottom: 0; }
/* Schliessen sitzt in der Kartenecke, damit der Titel die volle Breite hat */
.ueberraschung-karte { position: relative; }
.flora-kopf .klein-knopf { position: absolute; top: 0.8rem; right: 0.8rem; }
.flora-kopf img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; flex: none; }
.flora-gedanke {
    background: #f9eeee; border: 1px solid #e5c8c9; color: #8a4345;
    border-radius: var(--radius); padding: 0.65rem 0.9rem;
    font-size: 0.9rem; margin-bottom: 0.5rem;
}
#ueberraschung-inhalt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.6rem; }
#ueberraschung-inhalt .gruppen-titel { grid-column: 1 / -1; margin: 0.55rem 0 0.05rem; }
.ueb-zeile { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; text-align: left; }
.ueb-zeile img { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- 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; } }

/* ---------- Hilfe-Leiste, Filter, Preis ---------- */
/* Hilfe-Kacheln: bewusst anders als die Anlass-Chips (Icon oben,
   Karte statt Pille, drei nebeneinander) */
.hilfe-titel { font-size: 0.9rem; color: var(--graugruen, #7c8274); margin-bottom: 0.6rem; }
.hilfe-leiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
/* Weggabelung: Abkuerzungen oben, darunter der Uebergang zu den Schritten */
.oder-trenner {
    display: flex; align-items: center; gap: 0.8rem;
    margin-top: 1.4rem; color: #7c8274; font-size: 0.9rem;
}
.oder-trenner::before, .oder-trenner::after {
    content: ''; flex: 1; height: 1px; background: var(--linie, #e7e0d2);
}
.hilfe-kachel {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0.85rem 0.3rem 0.7rem; cursor: pointer;
    border: 1.5px solid #cfdac4; border-radius: 16px;
    background: #f1f5ea; color: var(--gruen);
    font: inherit; font-size: 0.84rem; font-weight: 600; line-height: 1.15;
    box-shadow: var(--schatten); -webkit-tap-highlight-color: transparent;
}
.hilfe-kachel img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.hilfe-kachel:active { transform: scale(0.97); }
#schritt-hilfe { margin: 1rem 0; }
.chip.filter { padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.farb-punkt { width: 0.85rem; height: 0.85rem; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.farb-punkt.rot { background: #a3232b; } .farb-punkt.rosa { background: #eeaebc; }
.farb-punkt.weiss { background: #f7f4ec; } .farb-punkt.gelb { background: #e8c33c; }
.farb-punkt.orange { background: #e07b39; } .farb-punkt.blau { background: #7d9cc4; }
.farb-punkt.lila { background: #9678b6; }
.blumen-karte.weggefiltert { display: none; }
.preis-zeile { font-size: 0.95rem; margin-bottom: 0.7rem; color: var(--tinte); }
.preis-zeile s { color: var(--gedimmt); }

/* ---------- Floristin-Chat ---------- */
.chat-karte { text-align: left; display: flex; flex-direction: column; max-height: calc(var(--sichtbar, 100dvh) - 2rem); }
.chat-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.chat-kopf h2 { margin: 0; font-size: 1.2rem; }
.klein-knopf { padding: 0.3rem 0.7rem; }
.chat-verlauf { overflow-y: auto; display: grid; gap: 0.5rem; padding: 0.2rem 0; min-height: 8rem; }
/* Schmale gruene Scrollbalken in allen Modal-Scrollbereichen (statt
   Browser-Weiss) */
.chat-verlauf, .scanner-inhalt {
    scrollbar-width: thin; scrollbar-color: rgba(74, 103, 65, 0.35) transparent;
}
.chat-verlauf::-webkit-scrollbar, .scanner-inhalt::-webkit-scrollbar { width: 5px; }
.chat-verlauf::-webkit-scrollbar-track, .scanner-inhalt::-webkit-scrollbar-track,
#ueberraschung-inhalt::-webkit-scrollbar-track, #strauss-inhalt::-webkit-scrollbar-track { background: transparent; }
.chat-verlauf::-webkit-scrollbar-thumb, .scanner-inhalt::-webkit-scrollbar-thumb {
    background: rgba(74, 103, 65, 0.35); border-radius: 999px;
}
/* Wie im Ueberraschungs-Modal: Schleier ueber dem unteren Fussbereich,
   solange darueber noch Inhalt wartet (Chat-Eingabe, Scanner-Knoepfe).
   Immer gerendert und nur per Deckkraft ein-/ausgeblendet, sonst poppt
   er beim ersten Scroll-Pixel hart auf (Wolfgang, 30.08.2026). */
.chat-eingabe, .modal-fuss { position: relative; }
.chat-eingabe::before,
.modal-fuss::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
    height: 2.4rem;
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0), var(--creme) 85%);
    pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
}
.laesst-scrollen .chat-eingabe::before,
.laesst-scrollen .modal-fuss::before { opacity: 1; }
.chat-blase { padding: 0.6rem 0.85rem; border-radius: var(--radius); font-size: 0.92rem; max-width: 88%; }
.chat-blase.florist { background: #eef2e8; justify-self: start; border-bottom-left-radius: 4px; }
.chat-blase.nutzer { background: var(--papier); box-shadow: var(--schatten); justify-self: end; border-bottom-right-radius: 4px; }
.chat-uebernehmen { justify-self: center; margin: 0.3rem 0; }
.chat-eingabe { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.chat-eingabe input { flex: 1; margin: 0; }

/* ---------- Auspack-Animation (Reveal) ---------- */
.bild-rahmen { position: relative; }
.papier {
    position: absolute; inset: -2%; width: 54%; z-index: 2;
    background: linear-gradient(105deg, var(--papier-ton, #c89b62) 0%, color-mix(in srgb, var(--papier-ton, #c89b62) 82%, #000) 55%, var(--papier-ton, #c89b62) 100%);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.18), 0 4px 18px rgba(45,50,41,0.3);
    transition: transform 1.1s cubic-bezier(0.5, 0, 0.3, 1), opacity 1.1s ease;
}
.papier.links { left: -2%; transform-origin: bottom left; clip-path: polygon(0 0, 100% 4%, 92% 100%, 0 100%); }
.papier.rechts { right: -2%; left: auto; transform-origin: bottom right; clip-path: polygon(0 4%, 100% 0, 100% 100%, 8% 100%); }
.aufgeblueht .papier.links { transform: translate(-130%, 12%) rotate(-32deg); opacity: 0; }
.aufgeblueht .papier.rechts { transform: translate(130%, 12%) rotate(32deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .papier { transition: opacity 0.4s; }
    .aufgeblueht .papier { opacity: 0; transform: none; }
}

/* Gewaehlt schlaegt empfohlen, sonst sah Ausgewaehltes weiter rot aus
   und wirkte wie nicht anklickbar (Wolfgang, 20.08.). */
.chip.aktiv, .chip.empfohlen.aktiv { border-color: var(--gruen); border-style: solid; background: #eef2e8; }
.blumen-karte.aktiv, .blumen-karte.empfohlen.aktiv { border-color: var(--gruen); border-style: solid; }
.blumen-karte.aktiv .passt-badge { display: none; }

/* ---------- Einheitliche Blumenkarten (Wolfgang, 20.08.) ---------- */
.stepper.unsichtbar { visibility: hidden; }
.blumen-karte .bedeutung { min-height: 2.6em; }

/* ---------- Vollbild-Reveal ---------- */
.reveal-seite { display: block; }
/* Geschenk-Ansicht samt Fußzeile soll auf einen Schirm passen: mit
   92dvh kam die Fußzeile obendrauf und man konnte ins Leere scrollen.
   --sichtbar folgt auf iOS den ein- und ausklappenden Leisten. */
#geschenk {
    min-height: calc(var(--sichtbar, 100dvh) - 7.5rem);
    display: flex; flex-direction: column; justify-content: center; padding: 1rem;
}
/* Kurze Empfängerseiten (kein Strauß, wird gebunden, verblüht) mittig
   statt oben angeschlagen. Die Vollbild-Regel oben nimmt der Seite
   allen Rand, deshalb hier mit gleicher Trefferstärke zurückholen. */
.reveal-seite main.kurz-seite {
    min-height: calc(var(--sichtbar, 100dvh) - 7.5rem);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    max-width: 680px; margin: 0 auto; padding: 0 1.4rem;
    gap: 0.9rem;
}
/* Als Flex-Kinder schrumpfen Absätze sonst auf Textbreite. */
.kurz-seite > p { width: 100%; }
.kurz-seite .knopf { width: auto; }

/* Solange das Geschenk zu ist, gibt es nichts zu scrollen. Auf sehr
   flachen Schirmen bleibt Scrollen erlaubt, sonst fiele die Fußzeile
   mit Impressum und Datenschutz weg. */
@media (min-height: 620px) {
    body.geschenk-zu { overflow: hidden; height: 100dvh; }
}
.reveal-seite main { padding: 0; max-width: none; }
.strauss-buehne { position: relative; width: 100%; height: min(72dvh, 110vw); overflow: hidden; background: #efe9db; }
.strauss-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#strauss-zu { z-index: 2; transition: opacity 1.4s ease, transform 1.4s ease; }
.aufgeblueht #strauss-zu { opacity: 0; transform: scale(1.08); }
#strauss-bild { transform: scale(1.05); transition: transform 1.6s ease; }
.aufgeblueht #strauss-bild { transform: scale(1); }
.strauss-buehne .papier { width: 54%; height: 104%; }
/* Der Strauss bleibt stehen, der Text darunter schiebt sich darueber:
   so bleibt das Bild sichtbar, waehrend man Nachricht und Antwort liest. */
#strauss { position: relative; }
.strauss-buehne { position: sticky; top: 0; z-index: 0; }
.strauss-inhalt {
    position: relative; z-index: 1; background: var(--creme);
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: -1.4rem; padding-top: 1.4rem; padding-bottom: 2rem;
    box-shadow: 0 -8px 24px rgba(45, 50, 41, 0.12);
    min-height: 40dvh;
}
/* Alle drei nebeneinander, auch auf schmalen Handys: knappere Polsterung.
   Umbrechen darf die Zeile trotzdem - bei großer Systemschrift liefe sie
   sonst aus dem Bild. Das Speichern-Icon steht frei, ohne Knopfform. */
.knopf-zeile { display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.knopf-zeile .knopf { padding: 0.62rem 0.85rem; font-size: 0.9rem; white-space: nowrap; }
.knopf-zeile .knopf .ikon { width: 1.05rem; height: 1.05rem; }
.knopf-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; padding: 0.3rem; color: var(--gruen); opacity: 0.7;
}
.knopf-ikon svg { width: 1.85rem; height: 1.85rem; }
.knopf-ikon:hover { opacity: 1; }

/* ---------- Korb: was steckt gerade im Strauß? ----------
   Liegt fest am unteren Rand, damit man beim Blättern durch den Katalog
   nicht vergisst, was schon gewählt ist. */
.korb {
    cursor: pointer;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px);
    border-top: 1.5px solid var(--linie);
    box-shadow: 0 -4px 18px rgba(45, 50, 41, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
    transition: opacity 0.22s ease, transform 0.22s ease, display 0.22s allow-discrete;
    opacity: 1; transform: none;
}
.korb[hidden] { opacity: 0; transform: translateY(100%); }
@starting-style { .korb { opacity: 0; transform: translateY(100%); } }
/* Hinweise stehen im Korb, nicht oben bei den Blumen: dort schaut
   niemand hin, während er unten am Guthaben scheitert. */
.korb-hinweis {
    display: none; background: #f7ebe9; color: #8f3f42;
    font-size: 0.85rem; padding-top: 0.5rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid #ecd8d6;
}
.korb.warnt .korb-hinweis { display: block; }
.korb-inhalt { display: flex; align-items: center; gap: 0.7rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.korb-chips {
    display: flex; gap: 0.4rem; overflow-x: auto; flex: 1 1 auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Weicher Rand statt harter Kante: zeigt, dass es weitergeht. */
    mask-image: linear-gradient(to right, #000 86%, transparent 100%);
}
.korb-chips::-webkit-scrollbar { display: none; }
.korb-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto;
    background: var(--creme); border: 1px solid var(--linie); border-radius: 999px;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem; font-size: 0.82rem; color: var(--tinte);
    cursor: pointer;
}
.korb-chip img { width: 1.55rem; height: 1.55rem; border-radius: 50%; object-fit: cover; background: #efe9db; }
.korb-chip b { font-weight: 600; }
.korb-chip.beiwerk { color: var(--gedimmt); }
.korb-summe { flex: 0 0 auto; text-align: right; font-size: 0.8rem; color: var(--gedimmt); line-height: 1.25; }
.korb-summe strong { display: block; font-size: 0.95rem; color: var(--gruen); }
/* Platz, damit der Korb Knopf und Fußzeile nicht verdeckt. */
body.hat-korb { padding-bottom: 5rem; }

/* ---------- Inhalt-Modal ---------- */
/* Die Karte passt immer auf den Schirm, gescrollt wird nur die Liste
   darin - sonst wandert das Modal selbst nach oben aus dem Bild. */
.inhalt-karte {
    text-align: left; display: flex; flex-direction: column;
    max-height: calc(var(--sichtbar, 100dvh) - 2rem);
}
.inhalt-liste { overscroll-behavior: contain; }
.inhalt-liste {
    overflow-y: auto; display: grid; gap: 0.55rem;
    /* Platz fuer den Scrollbalken, damit er nicht in den Zeilen liegt */
    padding-right: 0.55rem;
    scrollbar-width: thin; scrollbar-color: rgba(74, 103, 65, 0.35) transparent;
}
.inhalt-liste::-webkit-scrollbar { width: 5px; }
.inhalt-liste::-webkit-scrollbar-track { background: transparent; }
.inhalt-liste::-webkit-scrollbar-thumb { background: rgba(74, 103, 65, 0.35); border-radius: 999px; }

/* "Was steckt drin" als ganze Seite: ohne Rand, ohne Radius, das X
   gross und pur (Wolfgang, 30.08.2026) */
#inhalt-overlay { padding: 0; }
#inhalt-overlay .inhalt-karte {
    width: 100%; max-width: none; height: var(--sichtbar, 100dvh); max-height: none;
    border-radius: 0; margin: 0;
    padding-top: max(1.4rem, env(safe-area-inset-top));
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
}
#inhalt-schliessen {
    background: none; border: 0; box-shadow: none;
    font-size: 1.7rem; line-height: 1; padding: 0.3rem 0.5rem; color: var(--gruen);
}
#inhalt-overlay .inhalt-karte.laesst-scrollen::after { border-radius: 0; }
/* Schleier am Kartenrand, solange die Liste noch weiterscrollt */
.inhalt-karte { position: relative; }
.inhalt-karte::after {
    content: ''; position: absolute; left: 0.3rem; right: 0.3rem; bottom: 0;
    height: 3rem; border-radius: 0 0 var(--radius) var(--radius);
    background: linear-gradient(to bottom, rgba(250, 246, 239, 0), var(--creme) 80%);
    pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
}
.inhalt-karte.laesst-scrollen::after { opacity: 1; }
.inhalt-zeile { display: flex; align-items: center; gap: 0.8rem; background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten); padding: 0.5rem 0.7rem; }
.inhalt-zeile img { width: 3.2rem; height: 3.2rem; border-radius: 10px; object-fit: cover; background: #efe9db; }
.inhalt-punkt { width: 3.2rem; height: 3.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.inhalt-zeile div { display: grid; }
.inhalt-zeile span { font-size: 0.8rem; color: var(--gedimmt); }

/* ---------- Binde-Szene (Floristin bei der Arbeit) ---------- */
.binde-szene { padding: 0 0 1.4rem; overflow: hidden; }
.binde-buehne {
    position: relative; width: 100%; aspect-ratio: 2 / 2.6;
    max-height: 52dvh; background: #efe9db; margin-bottom: 1rem;
    border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
.binde-buehne img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.4s ease;
}
.binde-buehne img.sichtbar { opacity: 1; }
.binde-szene h2, .binde-szene p { padding: 0 1.4rem; }
/* Feste Höhe für Titel und Schrittzeile: die Texte sind mal zwei-, mal
   dreizeilig, sonst hüpft bei jedem Szenenwechsel das halbe Modal. */
#binde-titel {
    min-height: calc(3 * 1.3em); display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 1.15rem; line-height: 1.3;
}
#binde-status { min-height: 1.5em; }


/* ---------- Konto-Zeile ---------- */
.konto-zeile { font-size: 0.75rem; color: var(--gedimmt); margin-top: 0.4rem; }
.konto-zeile a { color: var(--gruen); }

/* ---------- Blumen-Scanner ----------
   Scan-Optik 1:1 vom Duefte24-Scanner uebernommen (scanner.blade.php):
   kleines zentriertes Foto, Scanline faehrt per top-Animation, Glas-
   Glanz zieht diagonal drueber, darunter Kreis-Spinner + Tipp-Punkte.
   Nur die Farben sind auf die Strausserie-Palette gemappt. */
.scanner-inhalt { overflow-y: auto; display: grid; gap: 0.55rem; }
.scan-buehne { text-align: center; }

/* Nach dem Scan: Foto bleibt klein neben der Beschreibung sichtbar,
   die Zutaten darunter haben Platz */
.scanner-inhalt.fertig { grid-template-columns: 104px 1fr; align-items: center; column-gap: 0.8rem; }
.scanner-inhalt.fertig .scan-buehne { grid-column: 1; }
.scanner-inhalt.fertig .scanwrap { width: 100%; box-shadow: var(--schatten); }
.scanner-inhalt.fertig #scanner-status { grid-column: 2; text-align: left; margin: 0; }
.scanner-inhalt.fertig #scanner-ergebnis { grid-column: 1 / -1; display: grid; gap: 0.55rem; }
.scanwrap {
    position: relative; width: min(220px, 60vw); margin: 0 auto;
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 24px 60px rgba(45, 50, 41, 0.28);
}
.scanwrap img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.scanline {
    display: none; position: absolute; left: 0; right: 0; height: 36%; top: -36%;
    background: linear-gradient(180deg, transparent,
        rgba(74, 103, 65, 0.25) 42%, rgba(244, 248, 238, 0.75) 50%,
        rgba(74, 103, 65, 0.25) 58%, transparent);
    animation: sweep 2.4s ease-in-out infinite;
}
@keyframes sweep { 0% { top: -36%; } 55% { top: 100%; } 100% { top: -36%; } }
.scan-buehne.scannt .scanline { display: block; }
.scan-buehne.scannt .scanwrap::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%,
        rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0.34) 50%,
        rgba(255, 255, 255, 0.16) 54%, transparent 70%);
    background-size: 220% 100%;
    animation: glass 3.4s linear infinite;
}
@keyframes glass { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.ring {
    display: none; width: 46px; height: 46px; margin: 14px auto 0; border-radius: 50%;
    background: conic-gradient(var(--gruen) 0 25%, rgba(74, 103, 65, 0.12) 25% 100%);
    -webkit-mask: radial-gradient(circle 16px, transparent 96%, #000 100%);
    mask: radial-gradient(circle 16px, transparent 96%, #000 100%);
    animation: spin 1.1s linear infinite;
}
.scan-buehne.scannt .ring { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.dots::after { content: ""; animation: dots 1.6s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
/* Flora tippt: drei huepfende Punkte, alle staendig sichtbar, damit die
   Blase ihre Hoehe haelt. Gehuepft wird ueber top (position relative),
   transform-Keyframes stehen auf iOS still (Scanline-Lehre). */
.denk-punkte { display: inline-flex; gap: 0.3rem; align-items: center; height: 1.25rem; padding: 0 0.15rem; }
.denk-punkte i {
    position: relative; top: 0.12rem;
    width: 0.5rem; height: 0.5rem; border-radius: 50%;
    background: var(--gruen); opacity: 0.8;
    animation: denk-huepf 1.1s ease-in-out infinite;
}
.denk-punkte i:nth-child(2) { animation-delay: 0.18s; }
.denk-punkte i:nth-child(3) { animation-delay: 0.36s; }
@keyframes denk-huepf {
    0%, 55%, 100% { top: 0.12rem; }
    25% { top: -0.3rem; }
}
#scanner-status { font-size: 0.92rem; color: var(--tinte); }
#scanner-uebernehmen { margin-top: 0.6rem; }

/* Flora-Chat-Karte auf der Startseite (03.09.2026) */
.flora-karte {
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--papier); border: 1px solid var(--linie);
    border-radius: var(--radius); box-shadow: var(--schatten);
    padding: 0.9rem 1rem; cursor: pointer;
}
.flora-karte img {
    width: 62px; height: 62px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--gruen); flex-shrink: 0;
}
.flora-karte-text { flex: 1; min-width: 0; }
.flora-karte-text h3 { font-size: 1.05rem; margin-bottom: 0.15rem; }
.flora-karte-text p { color: var(--gedimmt); font-size: 0.9rem; line-height: 1.4; }
.flora-knopf { flex-shrink: 0; padding: 0.5rem 0.9rem; font-size: 0.92rem; pointer-events: none; }
@media (max-width: 430px) {
    .flora-karte { flex-wrap: wrap; }
    .flora-knopf { flex-basis: 100%; text-align: center; pointer-events: none; }
}

/* Flora-Portraet neben ihren Chat-Blasen + Aktionsreihe im Strauss-Modal */
.chat-zeile { display: flex; gap: 0.5rem; align-items: flex-end; justify-self: start; max-width: 92%; }
.chat-zeile img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gruen); flex-shrink: 0; margin-bottom: 2px; }
.chat-zeile .chat-blase { max-width: 100%; }
.flora-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
@media (max-width: 400px) { .flora-aktionen { grid-template-columns: 1fr; } }

/* Flora-Kopf im Chat: Portraet, Name, Claim (03.09.2026); eigener
   Klassenname, .flora-kopf gehoert schon dem Ueberraschungs-Modal */
.chat-flora-kopf { justify-content: flex-start; gap: 0.7rem; }
.flora-portraet { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gruen); flex-shrink: 0; }
.flora-titel { flex: 1; min-width: 0; }
.flora-titel h2 { font-size: 1.15rem; line-height: 1.2; }
.flora-titel p { margin: 0; font-size: 0.8rem; color: var(--gedimmt); }

/* Kompakte Vorschlags-Knoepfe (max. zwei Zeilen) + Namens-Modal */
.flora-aktionen .knopf { font-size: 0.92rem; padding: 0.5rem 0.55rem; line-height: 1.25; }
.von-karte input {
    width: 100%; font: inherit; font-size: max(1rem, 16px); color: var(--tinte);
    border: 1.5px solid var(--linie); border-radius: var(--radius);
    padding: 0.65rem 0.8rem; background: var(--papier);
}
.von-karte input:focus { outline: 2px solid var(--gruen); border-color: var(--gruen); }