/* /Components/Account/Login.razor.rz.scp.css */
.auth[b-brkz3xq9yg] {
    display: grid;
    place-items: start center;
    min-height: calc(100dvh - 56px);
    padding: clamp(1.5rem, 6vh, 4rem) 16px 3rem;
    background:
        radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
        radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--badge) 16%, transparent), transparent 50%);
}

.card[b-brkz3xq9yg] {
    width: min(100%, 400px);
    padding: 1.75rem 1.5rem;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

h1[b-brkz3xq9yg] {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.lead[b-brkz3xq9yg] {
    margin: -.6rem 0 1.25rem;
    color: var(--ink-soft);
}

.form[b-brkz3xq9yg] {
    display: grid;
    gap: .9rem;
}

.wide[b-brkz3xq9yg] { width: 100%; }

.divider[b-brkz3xq9yg] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 1.1rem;
    color: var(--ink-soft);
    font-size: .85rem;
}

    .divider[b-brkz3xq9yg]::before, .divider[b-brkz3xq9yg]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
    }

.code-input[b-brkz3xq9yg] {
    letter-spacing: .4em;
    text-align: center;
    font-size: 1.4rem !important;
    font-variant-numeric: tabular-nums;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.topbar[b-bivnujfx5r] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 56px;
    padding: 0 var(--gutter);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}

.brand[b-bivnujfx5r] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

    .brand svg[b-bivnujfx5r] {
        width: 22px;
        height: 22px;
        fill: var(--accent);
    }

#blazor-error-ui[b-bivnujfx5r] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-bivnujfx5r] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.user[b-bivnujfx5r] {
    display: flex;
    align-items: center;
    gap: .9rem;
    font-size: .88rem;
    min-width: 0;
}

.user-name[b-bivnujfx5r] {
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-link[b-bivnujfx5r] {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

    .user-link:hover[b-bivnujfx5r] { color: var(--accent); }

@media (max-width: 420px) {
    .user-name[b-bivnujfx5r] { display: none; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-x7p04zvlfk],
.components-reconnect-repeated-attempt-visible[b-x7p04zvlfk],
.components-reconnect-failed-visible[b-x7p04zvlfk],
.components-pause-visible[b-x7p04zvlfk],
.components-resume-failed-visible[b-x7p04zvlfk],
.components-rejoining-animation[b-x7p04zvlfk] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-retrying[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-failed[b-x7p04zvlfk],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-x7p04zvlfk] {
    display: block;
}


#components-reconnect-modal[b-x7p04zvlfk] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-x7p04zvlfk 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-x7p04zvlfk 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-x7p04zvlfk 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-x7p04zvlfk]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-x7p04zvlfk 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-x7p04zvlfk {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-x7p04zvlfk {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-x7p04zvlfk {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-x7p04zvlfk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-x7p04zvlfk] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-x7p04zvlfk] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-x7p04zvlfk] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-x7p04zvlfk] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-x7p04zvlfk] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-x7p04zvlfk] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-x7p04zvlfk 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-x7p04zvlfk] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-x7p04zvlfk {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin.razor.rz.scp.css */
.admin-page[b-kzernp5633] {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem var(--gutter) 4rem;
}

h1[b-kzernp5633] {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: 1.25rem;
}

.panel[b-kzernp5633] {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

    .panel h2[b-kzernp5633] { font-size: 1.15rem; margin-bottom: .4rem; }

.hint[b-kzernp5633] { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .9rem; }
.hint.small[b-kzernp5633] { margin: .6rem 0 0; font-size: .8rem; }

.code[b-kzernp5633] {
    margin: .25rem 0 .9rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 9vw, 3rem);
    font-weight: 700;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.share[b-kzernp5633] {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border-radius: 10px;
    background: var(--bg);
    font-size: .85rem;
    color: var(--ink-soft);
}

    .share span[b-kzernp5633] { color: var(--ink); user-select: all; }

.users[b-kzernp5633] {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .users li[b-kzernp5633] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .2rem 1rem;
        padding: .75rem 0;
        border-top: 1px solid var(--line);
    }

        .users li:first-child[b-kzernp5633] { border-top: 0; }
        .users li.blocked[b-kzernp5633] { opacity: .6; }

.who[b-kzernp5633] { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.when[b-kzernp5633] { grid-column: 1; grid-row: 2; color: var(--ink-soft); font-size: .8rem; }
.actions[b-kzernp5633] { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .3rem; }

.role[b-kzernp5633] {
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 600;
}

    .role.admin[b-kzernp5633] { background: var(--accent-soft); color: var(--accent); }
    .role.blocked[b-kzernp5633] { background: #fdecea; color: #b42318; }

@media (max-width: 520px) {
    .users li[b-kzernp5633] { grid-template-columns: 1fr; }
    .actions[b-kzernp5633] { grid-column: 1; grid-row: auto; }
}

.panel h2 small[b-kzernp5633] {
    margin-left: .4rem;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 400;
}

.dot[b-kzernp5633] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
    flex: 0 0 auto;
}

    .dot.online[b-kzernp5633] {
        background: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
    }
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-x3d8304w88] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 4rem;
}

h1[b-x3d8304w88] {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 1.5rem;
}

.trips[b-x3d8304w88] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1.25rem;
}

.trip-card[b-x3d8304w88] {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: #fff;
    text-decoration: none;
    background: var(--surface);
}

    .trip-card img[b-x3d8304w88] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    }

    .trip-card:hover img[b-x3d8304w88] { transform: scale(1.04); }

.trip-card-text[b-x3d8304w88] {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3.5rem 1.25rem 1.1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

    .trip-card-text h2[b-x3d8304w88] { font-size: 1.9rem; line-height: 1.1; }
    .trip-card-text p[b-x3d8304w88] { margin: .2rem 0 0; }
    .trip-card-text .sub[b-x3d8304w88] { opacity: .95; }
    .trip-card-text .meta[b-x3d8304w88] { font-size: .85rem; opacity: .8; }

.trip-card.no-cover[b-x3d8304w88] {
    background: linear-gradient(135deg, var(--accent), #134e4a);
}

.trip-card.new[b-x3d8304w88] {
    display: flex;
    width: 100%;
    font: inherit;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    color: var(--ink-soft);
    background: transparent;
    border: 2px dashed var(--line);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

@media (max-width: 720px) {
    .trip-card.new[b-x3d8304w88] { aspect-ratio: auto; min-height: 120px; }
}

    .trip-card.new .plus[b-x3d8304w88] { font-size: 2.5rem; line-height: 1; font-weight: 300; }
    .trip-card.new:hover[b-x3d8304w88] { border-color: var(--accent); color: var(--accent); }

.loading[b-x3d8304w88] { color: var(--ink-soft); }

.active-badge[b-x3d8304w88] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}
/* /Components/Pages/TripPage.razor.rz.scp.css */
.missing[b-f0kaz4ln4x] {
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem var(--gutter);
}

/* ---------- Titelbild ---------- */

.hero[b-f0kaz4ln4x] {
    position: relative;
    height: clamp(260px, 44vh, 460px);
    overflow: hidden;
    color: #fff;
    background: #222;
}

    .hero img[b-f0kaz4ln4x] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 40%;
    }

.hero-text[b-f0kaz4ln4x] {
    position: absolute;
    inset: auto 0 0 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem var(--gutter) 1.6rem;
}

.hero[b-f0kaz4ln4x]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}

.hero-text[b-f0kaz4ln4x] { z-index: 1; }

    .hero-text h1[b-f0kaz4ln4x] {
        font-size: clamp(2.4rem, 6vw, 4rem);
        line-height: 1;
    }

    .hero-text p[b-f0kaz4ln4x] { margin: .35rem 0 0; }
    .hero-text .sub[b-f0kaz4ln4x] { font-size: 1.15rem; }
    .hero-text .meta[b-f0kaz4ln4x] { font-size: .9rem; opacity: .85; }

.back[b-f0kaz4ln4x] {
    display: inline-block;
    margin-bottom: .6rem;
    color: #fff;
    opacity: .85;
    text-decoration: none;
    font-size: .9rem;
}

    .back:hover[b-f0kaz4ln4x] { opacity: 1; text-decoration: underline; }

/* ---------- Werkzeugleiste ---------- */

.toolbar[b-f0kaz4ln4x] {
    position: sticky;
    top: 56px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.5rem;
    padding: .6rem var(--gutter);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}

.day-chips[b-f0kaz4ln4x] {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
    flex: 1 1 300px;
}

    .day-chips button[b-f0kaz4ln4x] {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: .3rem .75rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink);
        line-height: 1.15;
        cursor: pointer;
        transition: border-color .2s, background .2s;
    }

        .day-chips button:hover[b-f0kaz4ln4x] { border-color: var(--accent); background: var(--accent-soft); }
        .day-chips strong[b-f0kaz4ln4x] { font-size: .8rem; }
        .day-chips span[b-f0kaz4ln4x] { font-size: .7rem; color: var(--ink-soft); }

.settings[b-f0kaz4ln4x] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.seg[b-f0kaz4ln4x] {
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--line);
}

    .seg button[b-f0kaz4ln4x] {
        padding: .3rem .8rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--ink-soft);
        font-size: .82rem;
        cursor: pointer;
    }

        .seg button.active[b-f0kaz4ln4x] {
            background: var(--surface);
            color: var(--ink);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        }

/* ---------- Tage ---------- */

.days[b-f0kaz4ln4x] {
    /* Am Handy niedrigere Leisten, damit das nächste Foto rechts hereinschaut */
    --strip-scale: 1;
    --strip-h: min(calc(var(--strip-base) * var(--strip-scale)), 52vh);
    max-width: 1200px;
    margin: 0 auto;
    padding: .5rem var(--gutter) 5rem;
}

@media (max-width: 640px) {
    .days[b-f0kaz4ln4x] { --strip-scale: .65; }

    .settings[b-f0kaz4ln4x] { flex-wrap: nowrap; gap: .4rem; }

    .seg button[b-f0kaz4ln4x] { padding: .25rem .6rem; font-size: .76rem; }
}

/* ---------- Bearbeiten ---------- */

.hero.no-cover[b-f0kaz4ln4x] {
    height: clamp(200px, 30vh, 300px);
    background: linear-gradient(135deg, var(--accent), #134e4a);
}


.add-day[b-f0kaz4ln4x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 2rem;
    padding: 1.1rem;
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}

    .add-day:hover[b-f0kaz4ln4x] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .add-day svg[b-f0kaz4ln4x] { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.hero-tools[b-f0kaz4ln4x] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: flex;
    gap: .4rem;
}

.hero-btn[b-f0kaz4ln4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 40px;
    height: 40px;
    padding: 0 .7rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    backdrop-filter: blur(6px);
    cursor: pointer;
}

    .hero-btn:hover[b-f0kaz4ln4x] { background: rgba(0, 0, 0, .58); }
    .hero-btn svg[b-f0kaz4ln4x] { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Titelbild-Auswahl ---------- */

.picker-hint[b-f0kaz4ln4x] {
    margin: 0;
    color: var(--ink-soft);
    font-size: .88rem;
}

.cover-picker[b-f0kaz4ln4x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: max-content; /* sonst schrumpfen die Zeilen im scrollbaren Bereich */
    gap: 6px;
    align-content: start;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding: 2px;
}

.picker-day[b-f0kaz4ln4x] {
    grid-column: 1 / -1;
    margin-top: .4rem;
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 600;
}

    .picker-day:first-child[b-f0kaz4ln4x] { margin-top: 0; }

.pick[b-f0kaz4ln4x] {
    position: relative;
    align-self: start;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--line);
    cursor: pointer;
}

    .pick img[b-f0kaz4ln4x] {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        transition: transform .3s ease;
    }

    .pick:hover img[b-f0kaz4ln4x] { transform: scale(1.06); }
    .pick.current[b-f0kaz4ln4x] { border-color: var(--accent); }

    .pick .check[b-f0kaz4ln4x] {
        position: absolute;
        right: 5px;
        bottom: 5px;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
    }

        .pick .check svg[b-f0kaz4ln4x] { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.hero-btn.disabled[b-f0kaz4ln4x] { opacity: .5; pointer-events: none; }

/* ---------- Hochladen für die ganze Reise ---------- */

.trip-upload[b-f0kaz4ln4x] {
    display: grid;
    gap: .4rem;
    max-width: 1200px;
    margin: 1rem auto 0;
    padding: .9rem var(--gutter);
    color: var(--ink-soft);
    font-size: .9rem;
}

    .trip-upload .bar[b-f0kaz4ln4x] {
        height: 6px;
        border-radius: 3px;
        background: var(--line);
        overflow: hidden;
    }

        .trip-upload .bar span[b-f0kaz4ln4x] {
            display: block;
            height: 100%;
            background: var(--accent);
            transition: width .3s ease;
        }

    .trip-upload.done[b-f0kaz4ln4x] {
        justify-items: start;
        border-left: 4px solid var(--accent);
        background: var(--accent-soft);
        color: var(--ink);
        margin-top: 1rem;
        border-radius: 0 var(--radius) var(--radius) 0;
        width: calc(100% - 2 * var(--gutter));
    }

    .trip-upload p[b-f0kaz4ln4x] { margin: 0; }
/* /Components/Shared/Dialog.razor.rz.scp.css */
.dialog-backdrop[b-qdgkkur2k1] {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(10, 12, 14, .45);
    backdrop-filter: blur(3px);
    animation: fade-b-qdgkkur2k1 .15s ease-out;
}

@keyframes fade-b-qdgkkur2k1 {
    from { opacity: 0; }
}

.dialog[b-qdgkkur2k1] {
    width: min(100%, 480px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    animation: pop-b-qdgkkur2k1 .18s ease-out;
}

@keyframes pop-b-qdgkkur2k1 {
    from { transform: translateY(8px) scale(.98); opacity: 0; }
}

header[b-qdgkkur2k1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem .4rem;
}

    header h2[b-qdgkkur2k1] { font-size: 1.25rem; }

.dialog-body[b-qdgkkur2k1] {
    display: grid;
    gap: .9rem;
    padding: .6rem 1.25rem 1rem;
}

footer[b-qdgkkur2k1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    padding: .25rem 1.25rem 1.25rem;
}
/* /Components/Trips/DayStrip.razor.rz.scp.css */
.day[b-sppt1h8dsv] {
    position: relative;
    padding: 2rem 0 1rem;
    /* Platz für Kopfzeile + Werkzeugleiste beim Springen zu einem Tag */
    scroll-margin-top: 120px;
}

    .day + .day[b-sppt1h8dsv] { border-top: 1px solid var(--line); }

.day-head[b-sppt1h8dsv] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.day-badge[b-sppt1h8dsv] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    line-height: 1;
    box-shadow: var(--shadow);
}

    .day-badge span[b-sppt1h8dsv] {
        font-size: .62rem;
        text-transform: uppercase;
        letter-spacing: .1em;
        opacity: .85;
        align-self: end;
    }

    .day-badge strong[b-sppt1h8dsv] {
        font-size: 1.35rem;
        font-family: var(--font-display);
        align-self: start;
    }

/* mit Tagesbild: Foto im Kreis, Tagesnummer darüber */
.day-badge.photo[b-sppt1h8dsv] {
    position: relative;
    width: 3.8rem;
    height: 3.8rem;
    background-size: cover;
    background-position: center;
    border: 3px solid var(--surface);
    overflow: hidden;
}

    .day-badge.photo[b-sppt1h8dsv]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .28);
    }

    .day-badge.photo strong[b-sppt1h8dsv] {
        position: relative;
        align-self: center;
        font-size: 1.5rem;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    }

.day-text[b-sppt1h8dsv] { min-width: 0; }

.day-date[b-sppt1h8dsv] {
    margin: 0;
    color: var(--badge);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.day-text h2[b-sppt1h8dsv] {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.2;
    margin-top: .1rem;
}

.day-meta[b-sppt1h8dsv] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: .3rem 0 0;
    color: var(--ink-soft);
    font-size: .88rem;
}

.place[b-sppt1h8dsv] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

    .place svg[b-sppt1h8dsv] { width: 14px; height: 14px; fill: currentColor; }

.day-note[b-sppt1h8dsv] {
    margin: .5rem 0 0;
    max-width: 65ch;
    color: var(--ink-soft);
    white-space: pre-line; /* Absätze aus der Eingabe erhalten */
}

/* ---------- horizontale Foto-Leiste ---------- */

.strip-wrap[b-sppt1h8dsv] {
    position: relative;
    /* Leiste läuft bis an den Rand des Inhaltsbereichs */
    margin: 0 calc(-1 * var(--gutter));
}

.strip[b-sppt1h8dsv] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    padding: 4px var(--gutter) 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    cursor: grab;
}

    .strip.dragging[b-sppt1h8dsv] {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

        .strip.dragging .shot[b-sppt1h8dsv] { pointer-events: none; }

/* Touch: jeder Wisch rastet genau ein Foto weiter bzw. zurück */
@media (pointer: coarse) {
    .strip[b-sppt1h8dsv] { scroll-snap-type: x mandatory; }
    .shot[b-sppt1h8dsv] { scroll-snap-stop: always; }
}

/* weiche Kanten, solange es in die Richtung noch etwas zu sehen gibt */
.strip-wrap[data-overflow]:not([data-start]) .strip[b-sppt1h8dsv] {
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter));
}

.strip-wrap[data-overflow]:not([data-end]) .strip[b-sppt1h8dsv] {
    mask-image: linear-gradient(to left, transparent 0, #000 var(--gutter));
}

.strip-wrap[data-overflow]:not([data-start]):not([data-end]) .strip[b-sppt1h8dsv] {
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}

.shot[b-sppt1h8dsv] {
    position: relative;
    flex: 0 0 auto;
    /* Alle Fotos haben dieselbe Höhe; die Breite ergibt sich aus aspect-ratio */
    height: var(--strip-h, 280px);
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--line);
    scroll-snap-align: start;
    cursor: zoom-in;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: height .3s ease;
}

    .shot img[b-sppt1h8dsv] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s cubic-bezier(.2, .7, .2, 1);
    }

    .shot figcaption[b-sppt1h8dsv] {
        position: absolute;
        white-space: pre-line;
        inset: auto 0 0 0;
        padding: 2rem .75rem .6rem;
        color: #fff;
        font-size: .82rem;
        line-height: 1.3;
        background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity .25s, transform .25s;
    }

@media (hover: hover) {
    .shot:hover img[b-sppt1h8dsv] { transform: scale(1.04); }
    .shot:hover figcaption[b-sppt1h8dsv] { opacity: 1; transform: none; }
}

/* Blätter-Pfeile nur mit Maus und nur, wenn es etwas zu blättern gibt */
.strip-nav[b-sppt1h8dsv] {
    position: absolute;
    top: calc(50% - 5px);
    z-index: 2;
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, transform .2s;
}

    .strip-nav svg[b-sppt1h8dsv] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .strip-nav:hover[b-sppt1h8dsv] { transform: scale(1.08); }
    .strip-nav.prev[b-sppt1h8dsv] { left: calc(var(--gutter) / 2); }
    .strip-nav.next[b-sppt1h8dsv] { right: calc(var(--gutter) / 2); }

@media (hover: hover) and (pointer: fine) {
    .strip-wrap[data-overflow] .strip-nav[b-sppt1h8dsv] { display: grid; }
    .strip-wrap:hover .strip-nav[b-sppt1h8dsv] { opacity: 1; }
    .strip-wrap[data-start] .strip-nav.prev[b-sppt1h8dsv],
    .strip-wrap[data-end] .strip-nav.next[b-sppt1h8dsv] { opacity: 0; pointer-events: none; }
}

/* ---------- Bearbeiten & Hochladen ---------- */

.day-text[b-sppt1h8dsv] { flex: 1; }

.day-actions[b-sppt1h8dsv] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

    .day-actions .disabled[b-sppt1h8dsv] { opacity: .5; pointer-events: none; }

.add-tile[b-sppt1h8dsv] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .5rem;
    height: var(--strip-h, 280px);
    aspect-ratio: .5;
    border: 2px dashed var(--line);
    border-radius: 10px;
    color: var(--ink-soft);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .2s, color .2s, background .2s;
}

    .add-tile:hover[b-sppt1h8dsv] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

    .add-tile svg[b-sppt1h8dsv] {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .add-tile.empty[b-sppt1h8dsv] {
        aspect-ratio: auto;
        width: min(100%, calc(var(--strip-h, 280px) * 1.6));
        padding: 1rem;
        text-align: center;
        font-size: .9rem;
    }

.upload-progress[b-sppt1h8dsv] {
    display: grid;
    gap: .35rem;
    margin: 0 0 .8rem;
    color: var(--ink-soft);
    font-size: .85rem;
}

    .upload-progress .bar[b-sppt1h8dsv] {
        height: 6px;
        border-radius: 3px;
        background: var(--line);
        overflow: hidden;
    }

        .upload-progress .bar span[b-sppt1h8dsv] {
            display: block;
            height: 100%;
            background: var(--accent);
            transition: width .3s ease;
        }

.upload-errors[b-sppt1h8dsv] {
    display: grid;
    gap: .25rem;
    margin: 0 0 .8rem;
    justify-items: start;
}

@media (max-width: 640px) {
    .day-head[b-sppt1h8dsv] { flex-wrap: wrap; }
    .day-actions[b-sppt1h8dsv] { width: 100%; padding-left: 4.4rem; margin-top: -.25rem; }
}

.no-photos[b-sppt1h8dsv] {
    margin: 0;
    padding: .25rem 0 .5rem;
    color: var(--ink-soft);
    font-size: .9rem;
}

/* ---------- Reaktionen ---------- */

.day-reactions[b-sppt1h8dsv] {
    margin: -.2rem 0 .4rem;
}

.shot-reactions[b-sppt1h8dsv] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #1d2126;
    font-size: .75rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    pointer-events: none;
}
/* /Components/Trips/Lightbox.razor.rz.scp.css */
.lightbox[b-q6ury8igr5] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(8, 10, 12, .97);
    color: #fff;
    outline: none;
    animation: lb-in-b-q6ury8igr5 .2s ease-out;
}

@keyframes lb-in-b-q6ury8igr5 {
    from { opacity: 0; }
}

header[b-q6ury8igr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
}

.lb-title[b-q6ury8igr5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

    .lb-title strong[b-q6ury8igr5] { font-family: var(--font-display); font-size: 1.1rem; }
    .lb-title span[b-q6ury8igr5] { font-size: .8rem; opacity: .65; }

.lb-stage[b-q6ury8igr5] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 0;
    padding: 0 .5rem;
}

figure[b-q6ury8igr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 100%;
    min-height: 0;
    margin: 0;
    animation: lb-in-b-q6ury8igr5 .25s ease-out;
}

    figure img[b-q6ury8igr5] {
        max-width: 100%;
        max-height: calc(100% - 7.5rem);
        min-height: 0;
        object-fit: contain;
        border-radius: 6px;
        /* Vorschaubild als Platzhalter, bis das große Bild geladen ist */
        background-size: cover;
        background-position: center;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    }

    figure figcaption[b-q6ury8igr5] {
        font-size: .95rem;
        opacity: .85;
        text-align: center;
    }

.lb-btn[b-q6ury8igr5] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}

    .lb-btn:hover:not(:disabled)[b-q6ury8igr5] { background: rgba(255, 255, 255, .22); }
    .lb-btn:disabled[b-q6ury8igr5] { opacity: .2; cursor: default; }

    .lb-btn svg[b-q6ury8igr5] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* auf schmalen Geräten wird gewischt statt geklickt */
@media (max-width: 640px) {
    .lb-nav[b-q6ury8igr5] { display: none; }
    .lb-stage[b-q6ury8igr5] { grid-template-columns: 1fr; }
}

.lb-film[b-q6ury8igr5] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: .75rem 1rem 1rem;
    scrollbar-width: none;
    justify-content: safe center;
}

    .lb-film button[b-q6ury8igr5] {
        flex: 0 0 auto;
        height: 56px;
        padding: 0;
        border: 2px solid transparent;
        border-radius: 6px;
        overflow: hidden;
        background: none;
        opacity: .45;
        cursor: pointer;
        transition: opacity .2s, border-color .2s;
    }

        .lb-film button:hover[b-q6ury8igr5] { opacity: .8; }
        .lb-film button.active[b-q6ury8igr5] { opacity: 1; border-color: #fff; }

    .lb-film img[b-q6ury8igr5] {
        display: block;
        height: 100%;
        width: auto;
    }

/* ---------- Aktionen ---------- */

.lb-tools[b-q6ury8igr5] {
    display: flex;
    gap: .35rem;
}

a.lb-btn[b-q6ury8igr5] { text-decoration: none; }

.lb-btn.on[b-q6ury8igr5] { color: #fbbf24; }
.lb-btn.on svg[b-q6ury8igr5] { fill: currentColor; }

figure figcaption[b-q6ury8igr5] {
    display: grid;
    justify-items: center;
    gap: .2rem;
    width: min(100%, 560px);
}

    figure figcaption small[b-q6ury8igr5] { font-size: .78rem; opacity: .6; }

.caption[b-q6ury8igr5] {
    width: 100%;
    display: block;
    max-height: 30vh;
    resize: none;
    field-sizing: content; /* wächst mit dem Text (Chrome/Android; sonst bleibt es scrollbar) */
    padding: .35rem .6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit;
    line-height: 1.4;
    font-size: 1rem;
    text-align: center;
}

    .caption[b-q6ury8igr5]::placeholder { color: rgba(255, 255, 255, .45); }
    .caption:hover[b-q6ury8igr5] { border-color: rgba(255, 255, 255, .2); }
    .caption:focus[b-q6ury8igr5] { outline: none; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); }

@media (max-width: 640px) {
    header[b-q6ury8igr5] { padding: .6rem .6rem .6rem 1rem; }
    .lb-tools[b-q6ury8igr5] { gap: .15rem; }
    .lb-btn[b-q6ury8igr5] { width: 40px; height: 40px; }
}

    figure figcaption small a[b-q6ury8igr5] { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); }

.caption-text[b-q6ury8igr5] {
    margin: 0;
    font-size: 1rem;
    text-align: center;
    white-space: pre-line;
}
/* /Components/Trips/ReactionBar.razor.rz.scp.css */
.reactions[b-ng6u4f0vgh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    --chip-bg: var(--surface);
    --chip-border: var(--line);
    --chip-ink: var(--ink);
    --chip-soft: var(--ink-soft);
    --chip-mine: var(--accent-soft);
    --chip-mine-border: var(--accent);
}

    .reactions.dark[b-ng6u4f0vgh] {
        justify-content: center;
        --chip-bg: rgba(255, 255, 255, .08);
        --chip-border: rgba(255, 255, 255, .18);
        --chip-ink: #fff;
        --chip-soft: rgba(255, 255, 255, .65);
        --chip-mine: rgba(63, 184, 169, .28);
        --chip-mine-border: #3fb8a9;
    }

.chip[b-ng6u4f0vgh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: 32px;
    padding: 0 .65rem;
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--chip-ink);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: transform .12s, border-color .15s, background .15s;
}

    .chip:hover[b-ng6u4f0vgh] { border-color: var(--chip-mine-border); }
    .chip:active[b-ng6u4f0vgh] { transform: scale(.94); }
    .chip.mine[b-ng6u4f0vgh] { background: var(--chip-mine); border-color: var(--chip-mine-border); }
    .chip .emoji[b-ng6u4f0vgh] { font-size: 1.05rem; line-height: 1; }
    .chip .count[b-ng6u4f0vgh] { font-weight: 600; font-variant-numeric: tabular-nums; }

    .chip.add[b-ng6u4f0vgh] { color: var(--chip-soft); }

        .chip.add svg[b-ng6u4f0vgh] {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.picker[b-ng6u4f0vgh] {
    display: inline-flex;
    gap: .15rem;
    padding: .2rem;
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    background: var(--chip-bg);
    box-shadow: var(--shadow);
    animation: pop-b-ng6u4f0vgh .15s ease-out;
}

@keyframes pop-b-ng6u4f0vgh {
    from { transform: scale(.9); opacity: 0; }
}

.pick[b-ng6u4f0vgh] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s, background .15s;
}

    .pick:hover[b-ng6u4f0vgh] { transform: scale(1.2); }
    .pick.mine[b-ng6u4f0vgh] { background: var(--chip-mine); }

.who-toggle[b-ng6u4f0vgh] {
    padding: .2rem .3rem;
    border: 0;
    background: none;
    color: var(--chip-soft);
    font: inherit;
    font-size: .8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.names[b-ng6u4f0vgh] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    width: 100%;
    margin: .2rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--chip-soft);
    font-size: .85rem;
}

.reactions.dark .names[b-ng6u4f0vgh] { justify-content: center; }

    .names li[b-ng6u4f0vgh] { display: inline-flex; align-items: center; gap: .25rem; }

.remove[b-ng6u4f0vgh] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--chip-soft);
    font-size: .75rem;
    cursor: pointer;
}

    .remove:hover[b-ng6u4f0vgh] { background: #fdecea; color: #b42318; }