/* Tribut — Shared theme (glass/aurora visual system) */

/* ===== Animated gradient angle via @property ===== */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --mouse-x {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
}
@property --mouse-y {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: false;
}

body {
    background-color: var(--bg-deep);
}

/* ===== Glass Card ===== */
.glass-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

/* Mouse-tracking light on glass */
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        400px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0.06),
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.glass-card:hover::before {
    opacity: 1;
}

/* Glass edge highlight (top refraction line) */
.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
    z-index: 2;
}

/* ===== Accent Button ===== */
.btn-accent {
    background: var(--accent);
    box-shadow: 0 8px 32px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.btn-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: skewX(-20deg);
    z-index: 1;
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}
.btn-accent:hover {
    filter: brightness(1.15);
    box-shadow: 0 12px 48px var(--accent-intense), inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.btn-accent:active {
    transform: scale(0.97) translateY(0);
    filter: brightness(1);
}

@keyframes shimmer {
    0%, 100% { left: -100%; }
    50% { left: 140%; }
}

/* ===== Accent Utilities ===== */
.accent-text { color: var(--accent); }
.accent-border { border-color: var(--accent); }
.accent-bg-subtle { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.accent-ring { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ===== Input Fields ===== */
.input-field {
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.input-field:focus {
    border-color: color-mix(in srgb, var(--accent) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 8%, transparent);
    background-color: rgba(30, 30, 56, 0.9);
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(12px, -18px) scale(1.08); }
    66% { transform: translate(-10px, 10px) scale(0.94); }
}

@keyframes slowPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

.aurora-orb {
    animation: float 14s ease-in-out infinite, slowPulse 7s ease-in-out infinite;
}

/* ===== Rotating Gradient Ring (profile photo) ===== */
@keyframes rotateGradient {
    from { --angle: 0deg; }
    to { --angle: 360deg; }
}

.gradient-ring {
    background: conic-gradient(
        from var(--angle),
        #ec4899, #8b5cf6, #6366f1, #ec4899
    );
    animation: rotateGradient 4s linear infinite;
}

/* ===== Stagger Reveals ===== */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.reveal {
    opacity: 0;
    animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-d1 { animation-delay: 0.1s; }
.reveal-d2 { animation-delay: 0.2s; }
.reveal-d3 { animation-delay: 0.35s; }
.reveal-d4 { animation-delay: 0.5s; }
.reveal-d5 { animation-delay: 0.65s; }

/* ===== 3D Tilt on Hover (preset buttons) ===== */
.tilt-hover {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    transform-style: preserve-3d;
    perspective: 800px;
}
.tilt-hover:hover {
    transform: translateY(-2px) rotateX(4deg) rotateY(-2deg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.tilt-hover:active {
    transform: translateY(0) scale(0.96);
}

/* ===== Select Arrow ===== */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ===== Noise Overlay ===== */
.noise::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: overlay;
}

/* ===== Glass Button (±) ===== */
.glass-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}
.glass-btn:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px rgba(0,0,0,0.3);
}
.glass-btn:active {
    transform: scale(0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.2);
}

/* ===== Glass Preset Pill ===== */
.glass-pill {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-pill:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.25);
}

/* ===== Liquid Glass Input ===== */
.glass-input {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: all 0.3s ease;
}
.glass-input:focus {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
        0 0 30px color-mix(in srgb, var(--accent) 6%, transparent);
}
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ===== Reduced Motion ===== */

/* ===== Legal Prose ===== */
.legal-prose h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}
.legal-prose h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}
.legal-prose p,
.legal-prose li {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}
.legal-prose ul,
.legal-prose ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.legal-prose ol { list-style: decimal; }
.legal-prose a {
    color: var(--accent);
    text-decoration: underline;
}
.legal-prose a:hover { color: #fff; }
.legal-prose strong { color: rgba(255, 255, 255, 0.85); }

/* ===== Wuensche-Reiter (Phase 19, Redesign quick-261030-co8) ===== */
/* Wunschkarten auf der Tipp-Seite (D-05/D-06): jede Karte ist der EINE
   Button (role="button"), der Knopf „Wunsch erfuellen" (.wish-cta, ein
   <span>) ist ihr sichtbares Label; .wish-card-selected (Akzent-Rahmen +
   Glow, wie .preset-active) tauscht seine Beschriftung auf „Ausgewaehlt".
   Erfuellte Karten sind gedimmt, entsaettigt und nicht antippbar. Die
   Selektoren .wish-card / .wish-card-selected / .wish-picker-slot sind
   Vertrag mit app.js und den Tests. Ton: dunkles Glas, ein Akzent, die
   Mono-Zahlen als einziges Zweitregister — nichts schreit, der Knopf
   leuchtet erst beim Hover auf. */
.wish-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.wish-item {
    min-width: 0;
}
/* Gestaffelte Einblendung bei jedem Oeffnen des Reiters: das Panel wechselt
   von display:none auf sichtbar, die Animation startet damit neu. Die
   Keyframes fadeSlideUp stehen in layout.php. */
[data-amount-panel="wishes"]:not(.hidden) .wish-item {
    animation: fadeSlideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wish-item:nth-child(2) { animation-delay: 0.05s; }
.wish-item:nth-child(3) { animation-delay: 0.1s; }
.wish-item:nth-child(4) { animation-delay: 0.15s; }
.wish-item:nth-child(5) { animation-delay: 0.2s; }
.wish-item:nth-child(6) { animation-delay: 0.25s; }
.wish-item:nth-child(7) { animation-delay: 0.3s; }
.wish-item:nth-child(n+8) { animation-delay: 0.35s; }
.wish-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.02) 55%,
        rgba(255, 255, 255, 0.035) 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wish-card[role="button"] {
    cursor: pointer;
}
.wish-card[role="button"]:hover,
.wish-card[role="button"]:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
}
.wish-card[role="button"]:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wish-card[role="button"]:focus-visible,
.wish-card[role="group"]:focus-visible {
    /* die gewaehlte Karte wird role="group" und behaelt tabindex (C-05) */
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* C-04: 80 Zeichen ohne Leerzeichen (Titel) bzw. 300 (Beschreibung) duerfen
   bei 390 px nicht aus der Karte laufen — .glass-card schneidet (overflow:
   hidden), die Karte selbst nicht. */
.wish-title,
.wish-description {
    overflow-wrap: anywhere;
}
.wish-title {
    letter-spacing: -0.01em;
}
.wish-description {
    line-height: 1.5;
}
.wish-card-selected,
.wish-card-selected:hover {
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-glow), inset 0 0 12px color-mix(in srgb, var(--accent) 5%, transparent);
    transform: none;
}
.wish-card-fulfilled {
    opacity: 0.55;
    filter: saturate(0.45);
}
.wish-image {
    display: block;
    width: 100%;
    height: 11rem;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Dekorative Kachel fuer Wuensche ohne Bild — nur am Desktop (liegende
   Karte), mobil bleibt die Karte ohne Bild schlank (D-06, kein <img>). */
.wish-tile {
    display: none;
}
.wish-progress {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.wish-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
    box-shadow: 0 0 10px var(--accent-glow);
    transform-origin: left center;
    animation: wishFill 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
@keyframes wishFill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
.wish-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.wish-progress-row {
    flex: 1 1 auto;
    min-width: 0;
}
.wish-progress-pct {
    color: color-mix(in srgb, var(--accent) 85%, #fff);
    font-weight: 600;
    flex-shrink: 0;
}
.wish-cta {
    flex: 1 1 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0 1.15rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: color-mix(in srgb, var(--accent) 85%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.wish-card[role="button"]:hover .wish-cta,
.wish-card[role="button"]:focus-visible .wish-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 8px 22px var(--accent-glow);
}
.wish-cta-on {
    display: none;
}
.wish-card-selected .wish-cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 18px var(--accent-glow);
}
.wish-card-selected .wish-cta-idle {
    display: none;
}
.wish-card-selected .wish-cta-on {
    display: inline;
}
/* D-11: Hinweis-Kasten mit Akzent-Rahmen, kein Kleingedrucktes. */
.wish-notice {
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 16px;
    padding: 14px 16px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
}
.wish-badge-fulfilled,
.wish-badge-repeat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}
.wish-badge-fulfilled {
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== Betrags-Knoepfe im Wunsch-Picker (quick-261112-b7q) ===== */
/* app.js fuellt #wish-quick-amounts beim Waehlen der Karte (Knoepfe
   wish-quick-btn glass-pill, nie preset-btn); die Markierung des gewaehlten
   Betrags kommt von .preset-active aus layout.php. Jeder Knopf nimmt ein
   Drittel der Breite abzueglich der Luecken — hoechstens drei je Zeile, bei
   jeder Breite, nichts laeuft waagerecht ueber. .hidden steht ausdruecklich
   hier, unabhaengig von der Reihenfolge der Tailwind-Regeln. */
.wish-quick-amounts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.wish-quick-amounts.hidden {
    display: none;
}
.wish-quick-btn {
    flex: 0 1 calc((100% - 1rem) / 3);
    min-width: 0;
    padding: 0.625rem 0.5rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: #d1d5db;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.wish-quick-btn:hover {
    color: #fff;
}
.wish-quick-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== Wuensche-Reiter Desktop (quick-261030-co8) ===== */
/* Die Tipp-Seite laeuft in einer 28-rem-Spalte (#tip-app max-w-md). Ab 64 rem
   Viewport bricht NUR die Betragskarte aus der Spalte aus, und nur solange
   app.js die Klasse amount-card-wishes setzt (Reiter „Wuensche",
   activateAmountTab) — Profil, Bestenliste, Schritt 2/3 und Footer behalten
   die schmale Spalte. Zwei Spalten mit liegenden Karten (Bild bzw. Kachel
   quadratisch links, Text rechts, Knopf rechts in der Fusszeile): Karten mit
   und ohne Bild bleiben so gleich hoch — ein Hochkant-Grid zerfranste.
   align-items: start laesst die gewaehlte Karte mit dem Picker nur ihre
   eigene Zelle strecken. Der breite Haupt-Weiter-Knopf unter dem Grid waere
   redundant (der Picker traegt #wish-btn-continue) und wird im Wide-Modus
   ausgeblendet; mobil bleibt er, wie er ist. In der Einzelwunsch-Ansicht
   (quick-261111-v08, html.wish-single-view) greift der Block nicht — jeder
   Selektor traegt html:not(.wish-single-view), die Karte bleibt im
   Mobil-Aufbau. */
@media (min-width: 64rem) {
    html:not(.wish-single-view) .amount-card-wishes {
        width: min(66rem, 100vw - 3rem);
        margin-left: calc(50% - min(66rem, 100vw - 3rem) / 2);
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: start;
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-card {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 1.25rem;
        padding: 1.25rem;
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-image,
    html:not(.wish-single-view) .amount-card-wishes .wish-tile {
        flex: 0 0 9rem;
        width: 9rem;
        height: 9rem;
        margin-bottom: 0;
        border-radius: 14px;
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
            radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
            rgba(255, 255, 255, 0.035);
        color: color-mix(in srgb, var(--accent) 80%, #fff);
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-tile svg {
        width: 2.75rem;
        height: 2.75rem;
        filter: drop-shadow(0 0 12px var(--accent-glow));
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-body {
        flex: 1 1 0;
        min-width: 0;
        /* kuerzer als die Kachel (erfuellte Karte ohne Knopf): mittig neben
           ihr, nie mit Luecke zwischen Balken und Zahlenzeile */
        align-self: center;
    }
    html:not(.wish-single-view) .amount-card-wishes .wish-picker-slot {
        flex-basis: 100%;
    }
    html:not(.wish-single-view) .amount-card-wishes #btn-continue-step1 {
        display: none;
    }
}

/* ===== Einzelwunsch-Ansicht (quick-261111-v08) ===== */
/* Betreiber 2026-11-11: kommt der Fan ueber /{Slug}#wunsch-<id> auf eine
   auswaehlbare Karte, setzt app.js (openWishesFromHash) wish-single-view auf
   <html> und wish-card-single auf diese Karte. Reiter, Bestenliste und alle
   anderen Karten verschwinden per display: none — damit auch aus Tastatur-
   und Vorlese-Reihenfolge. .wish-list wird ein Block, damit die leeren
   .wish-item-Huellen keine Raster-Abstaende stehen lassen. */
html.wish-single-view #amount-tabs,
html.wish-single-view #ranking-section,
html.wish-single-view .wish-card:not(.wish-card-single) {
    display: none;
}
html.wish-single-view .wish-list {
    display: block;
}
/* Nur eine Karte, ihr Picker traegt den Zwilling #wish-btn-continue — der
   Haupt-Knopf direkt darunter waere derselbe Knopf ein zweites Mal (wie im
   Wide-Aufbau oben). */
html.wish-single-view .amount-card-wishes #btn-continue-step1 {
    display: none;
}
/* Das Bild der einen Karte steht ganz da (Betreiber 2026-11-12: ein
   quadratisches Bild wurde auf das 11rem-Band der Liste beschnitten).
   Natuerliche Hoehe; sehr hohe Bilder sind gedeckelt und eingepasst. */
html.wish-single-view .wish-card-single .wish-image {
    height: auto;
    max-height: 34rem;
    object-fit: contain;
}

/* ===== Bewegung reduzieren =====
   Steht bewusst am ENDE der Datei (quick-261031-uw4, Audit P4): die Wunsch-
   Regeln weiter oben (.wish-card { transition }, .wish-progress-fill
   { animation }) gewannen sonst per Reihenfolge, und die Panel-Regel
   [data-amount-panel="wishes"]:not(.hidden) .wish-item gewinnt per
   Spezifitaet — deshalb zusaetzlich !important. Neue Animationen gehoeren
   OBERHALB dieses Blocks und bekommen hier ihre Abschaltung. */
@media (prefers-reduced-motion: reduce) {
    .aurora-orb,
    .reveal,
    .btn-accent::before,
    .gradient-ring,
    .glass-pill {
        animation: none !important;
    }
    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .tilt-hover,
    .glass-pill,
    .btn-accent,
    .wish-card,
    .wish-cta {
        transition: none !important;
    }
    .wish-card[role="button"]:hover {
        transform: none !important;
    }
    .wish-item,
    .wish-progress-fill {
        animation: none !important;
    }
}