/* Dancyra design tokens, ported from design/assets/tokens.css.
   Sora/Inter are self-hosted in fonts.css (no Google Fonts CDN). */
:root {
    --bg: #0d0a12;
    --bg-elev: #14101b;
    --surface: #1b1624;
    --surface-2: #241e2f;
    --surface-3: #2e273b;
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .14);
    --text: #f5f2fa;
    --text-2: #b6afc4;
    --text-3: #80798f;
    --accent: #ff4f7b;
    --accent-2: #ff8a5c;
    --accent-grad: linear-gradient(135deg, #ff4f7b 0%, #ff8a5c 100%);
    --accent-soft: rgba(255, 79, 123, .14);
    --r-md: 14px;
    --r-lg: 20px;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --font-head: 'Twemoji Country Flags', 'Sora', system-ui, sans-serif;
    --font-body: 'Twemoji Country Flags', 'Inter', system-ui, -apple-system, sans-serif;
}

/* An element with the hidden attribute stays hidden, whatever display a layout rule gives it (user 03.11.2026:
   the address search showed next to a saved venue, so a picked address was dropped on saving). */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Keeps the layout from jumping sideways between short and long pages. */
html { scrollbar-gutter: stable; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: inherit; }
/* Form fields keep the system font otherwise - and with it the missing flags on Windows in country lists. */
select { font-family: inherit; }
h1, h2 { font-family: var(--font-head); letter-spacing: -.01em; margin: 0; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* "Sign in as": the super admin acts in someone's name - never out of sight (switch_user). */
.impersonation-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding: 8px 16px; background: #ffb547; color: #1b1300; font-size: 14px; font-weight: 700; text-align: center; }
.impersonation-bar a { color: #1b1300; text-decoration: underline; }
.impersonation-bar + .site-header { top: 37px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(13, 10, 18, .85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }

.logo { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 8px; font-size: 22px; text-decoration: none; }
.logo-mark { width: 1.35em; height: 1.35em; border-radius: 30%; display: block; object-fit: cover; }

/* Language switch: the current language as a pill, the languages by name in a list below it. */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover, .lang-switch[open] > summary { color: var(--text); border-color: var(--line-strong); }
.lang-switch-chevron { transition: transform .15s ease; }
.lang-switch[open] .lang-switch-chevron { transform: rotate(180deg); }
.lang-switch-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 180px; padding: 6px; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
/* 27 languages are taller than a laptop screen and the header is sticky: the list scrolls itself (website test 14.11.2026). */
.lang-switch-list a { padding: 9px 12px; border-radius: 9px; color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.lang-switch-list a:hover { background: var(--surface-2); color: var(--text); }
.lang-switch-list a[aria-current="true"] { color: var(--text); background: var(--surface-2); }
.lang-switch-list a[aria-current="true"]::after { content: '\2713'; float: right; margin-left: 12px; color: var(--accent, currentColor); }

main { flex: 1; }
.hero { position: relative; overflow: hidden; padding: 64px 0 72px; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 30%, rgba(255, 79, 123, .2), transparent 45%), radial-gradient(circle at 60% 95%, rgba(155, 123, 255, .16), transparent 40%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -.03em; max-width: 640px; }
.hero h1 em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--text-2); font-size: 18px; max-width: 520px; margin: 18px 0 0; }
.badge { display: inline-block; margin-top: 28px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-weight: 600; }

.site-footer { border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; margin-top: 32px; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 28px; padding-top: 44px; padding-bottom: 40px; }
.footer-cols h2 { font: 600 13px var(--font-body); color: var(--text); margin: 0 0 12px; letter-spacing: 0; }
.footer-cols nav a { display: block; margin-bottom: 8px; text-decoration: none; color: var(--text-2); }
.footer-cols nav a:hover { color: var(--text); }
.footer-brand .logo { font-size: 20px; color: var(--text); }
.footer-brand p { margin: 12px 0 0; }
.footer-version { color: var(--text-3); font-size: 12px; }
.admin-footer { padding-top: 18px; padding-bottom: 18px; color: var(--text-3); font-size: 12px; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-user { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--line); }
.header-user:hover { color: var(--text); border-color: var(--line-strong); }
.avatar.avatar-sm { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; }
.profile-section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.profile-section:first-of-type { border-top: 0; margin-top: 20px; padding-top: 0; }
.profile-section h2 { font-size: 17px; margin-bottom: 10px; }
/* Room for the sticky header when the frame scrolls itself into view. */
/* Parts of a settings section (draft A2): "Konto" holds address, password and Apple/Google, "App" language and roles. */
.settings-part { margin-top: 22px; }
.settings-part h3 { font-size: 15px; margin: 0 0 8px; }
.settings-leave { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.settings-leave .danger-link { color: var(--danger, #ff5a5f); }
/* The line under the profile that leads to the account in the settings. */
.profile-moved { margin-top: 24px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2, rgba(255, 255, 255, .04)); font-size: 14px; }
.profile-section turbo-frame { display: block; scroll-margin: 140px 0 24px; }

/* The settings (user 31.10.2026, draft E1): the list on the left, one part on the right, each its own page. On the
   phone the list alone is the overview and a part has the way back instead - as in the app. */
.settings-page { display: grid; grid-template-columns: 230px minmax(0, 680px); gap: 32px; justify-content: center; align-items: start; padding-top: 40px; padding-bottom: 64px; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 92px; }
.settings-nav h1 { font-size: 24px; margin: 0 0 14px 12px; }
.settings-nav hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.settings-nav-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; }
.settings-nav-item:hover { background: var(--surface); color: var(--text); }
.settings-nav-item.is-on { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.settings-nav-name { font-size: 14px; font-weight: 600; }
/* Signing out is a button in a form (user 31.10.2026); the form takes no room, the button looks like its neighbours. */
.logout-form { display: contents; }
button.settings-logout { width: 100%; border: 0; background: none; font: 600 14px var(--font-body); text-align: left; cursor: pointer; }
.settings-nav-item small { color: var(--text-3); font-size: 12px; }
.settings-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-content h2 { font-size: 22px; }
.settings-content > .muted { margin: 0; }
.settings-content .role-list { margin: 0; }
.settings-back { display: none; color: var(--text-2); font-size: 14px; text-decoration: none; }
.settings-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.settings-card > .auth-lead, .settings-card > .muted { margin: 0; }
.settings-card .linked-accounts { margin: 0; }
/* In a fact row of the account everything below the label stays in the value's column (found 31.10.2026: the opened
   "Adresse ändern" form fell into the narrow label column and its button ran over the edge). */
.settings-card .profile-fact > :nth-child(n+3) { grid-column: 2; }
.settings-card .email-change .form { max-width: 420px; margin-top: 12px; }
.settings-card .email-change .btn { align-self: flex-start; }
@media (max-width: 520px) { .settings-card .profile-fact > :nth-child(n+3) { grid-column: 1; } }
@media (max-width: 760px) {
    .settings-page { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 20px; }
    .settings-page.is-overview .settings-content, .settings-page:not(.is-overview) .settings-nav { display: none; }
    .settings-nav { position: static; }
    .settings-nav h1 { margin-left: 0; }
    .settings-nav-item, .settings-nav-item.is-on { flex-direction: row; align-items: center; gap: 12px; padding: 14px 2px; border-radius: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; color: var(--text); }
    .settings-nav-item small { margin-left: auto; text-align: right; }
    .settings-nav-item::after { content: '›'; margin-left: auto; color: var(--text-3); font-size: 18px; line-height: 1; }
    .settings-nav-item:has(small)::after { margin-left: 0; }
    .settings-nav hr { display: none; }
    .settings-back { display: inline-block; }
    .settings-card { padding: 16px; }
}

/* The profile in two columns (user 31.10.2026, draft P2): who you are - what others see - on the left, what only you
   see on the right, as wide as the settings; on the phone one under the other. */
.profile-page { max-width: 960px; padding-top: 40px; padding-bottom: 64px; }
.profile-page > h1 { font-size: 26px; margin-bottom: 18px; }
.profile-columns { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-card { padding: 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.profile-card h2 { font-size: 17px; margin-bottom: 4px; }
.profile-page .profile-facts { gap: 0; }
.profile-page .profile-facts > p { margin: 0; }
.profile-page #public-page { color: var(--accent); font-weight: 600; text-decoration: none; }
.profile-page .profile-head { flex-direction: column; text-align: center; gap: 12px; }
.profile-page .profile-head-text { align-items: center; }
.profile-page .profile-head-name { font-size: 20px; }
.profile-page .profile-head-name-row { justify-content: center; }
.profile-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.profile-fact-grid .profile-fact { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.profile-fact-grid .profile-fact > .muted { font-size: 12.5px; }
.profile-fact-grid .profile-fact-hint { grid-column: 1; }
/* Spaced from the facts above (user 02.11.2026); ".profile-facts > p" would take its margin away. */
.profile-page .profile-facts > p.profile-moved { margin: 16px 0 0; }
@media (max-width: 760px) {
    .profile-page { padding-top: 20px; }
    .profile-columns, .profile-fact-grid { grid-template-columns: minmax(0, 1fr); }
    .profile-card { padding: 18px; }
}

/* "Profil vervollständigen" (phase 58, draft W1): the bar line, the thank-you, the steps dialog - as in the app. */
.profile-complete { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent-2) 55%, transparent); background: color-mix(in srgb, var(--accent-2) 8%, transparent); color: var(--text); text-decoration: none; }
.profile-complete strong { flex: 1; }
.profile-complete-bar { flex: none; width: 72px; height: 6px; border-radius: 3px; background: var(--line-strong); overflow: hidden; }
.profile-complete-bar span { display: block; height: 100%; background: var(--accent-2); }
.profile-complete-go { color: var(--accent-2); font-weight: 700; text-align: right; }
.profile-done { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(61, 214, 140, .45); background: rgba(61, 214, 140, .1); }
.profile-done strong { color: #3dd68c; }
.profile-done-icon { font-size: 24px; }
.profile-styles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; text-decoration: none; }
.profile-steps { text-align: left; }
.profile-steps-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.profile-steps-top a { color: var(--text-2); text-decoration: none; font-weight: 600; }
.profile-steps-close { margin-left: 14px; font-size: 22px; line-height: 1; }
.profile-steps-bar { display: flex; gap: 6px; margin-bottom: 16px; }
.profile-steps-bar span { flex: 1; height: 4px; border-radius: 2px; background: var(--line-strong); }
.profile-steps-bar .on { background: var(--accent-2); }
.profile-steps > p.muted { margin: 0 0 18px; }
.profile-steps-picture { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-steps-styles { max-height: 48vh; overflow-y: auto; }
.step-family { margin: 12px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.step-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Leader/Follower sit right in the form, whose divs are columns. */
.profile-steps .form > div.step-chips, .profile-steps .form > div.step-city-chosen { flex-direction: row; gap: 8px; }
.step-chips label { position: relative; }
.step-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.step-chips input + span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; font-weight: 600; color: var(--text-2); }
.step-chips input:checked + span { background: var(--accent-grad); color: #fff; border-color: transparent; }
.step-chips input:focus-visible + span { outline: 2px solid var(--accent); }
.step-city-chosen { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.profile-steps .btn-primary { width: 100%; margin-top: 24px; }
/* The radius search's place field, here one under the other in a column form: the list pushes the button down. */
.profile-steps .centre-field { flex: none; }
.profile-steps .centre-field .suggestions { position: static; box-shadow: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font: 600 14px var(--font-body); text-decoration: none; cursor: pointer; color: var(--text); background: var(--surface-2); white-space: nowrap; transition: filter .12s ease, background .12s ease, border-color .12s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 20px rgba(255, 79, 123, .3); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface); }
.btn-outline[aria-pressed="true"] { border-color: rgba(255, 79, 123, .5); color: #ff8fab; }
.btn-ghost { background: transparent; color: var(--text-2); }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost:hover { color: var(--text); }
/* "Eintrag verwerfen" (draft V1): red, quiet, under the main button. */
.quick-withdraw { display: flex; justify-content: center; margin-top: 6px; }
.quick-withdraw-button { color: var(--danger, #ff5a5f); }
.quick-withdraw-button:hover { color: var(--danger, #ff5a5f); text-decoration: underline; }
/* A small "?" beside an organizer button that says what the click does (user 25.10.2026). */
.with-info { display: inline-flex; align-items: center; gap: 6px; }
.info-tip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--text-3); font: 700 11px/1 var(--font-body); cursor: help; }
.info-tip:hover, .info-tip:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }

.auth { padding: 64px 24px; display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 32px; }
.auth-card h1 { font-size: 26px; }
@media (max-width: 640px) { .auth { padding: 24px 16px 40px; } .auth-card { padding: 22px 18px; } }
.auth-lead { color: var(--text-2); margin: 8px 0 24px; }
.auth-switch { color: var(--text-2); margin-top: 20px; font-size: 14px; }
.auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form > div:not(.editor-grid), .field { display: flex; flex-direction: column; gap: 6px; }
.form label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.form input { height: 46px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 15px var(--font-body); }
/* A field the cursor is in gets a light frame, as in the app (user 29.10.2026): the accent pink looked like the error
   red. Red stays for a field the server refused (aria-invalid, set by Symfony's form theme). Everywhere on the site
   and in the admin, not only in .form. */
:is(input, select, textarea):not(:where([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])):focus { outline: 2px solid var(--text); outline-offset: 0; border-color: transparent; }
html :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger, #ff5a5f); }
html :is(input, select, textarea)[aria-invalid="true"]:focus { outline-color: var(--danger, #ff5a5f); }
/* The eye beside a password field (user 28.10.2026): inside the field on the right, the text keeps clear of it. */
.password-reveal { position: relative; display: block; }
.password-reveal > input { width: 100%; padding-right: 46px; }
.password-reveal-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-3); cursor: pointer; }
/* The checklist under a new password (user 28.10.2026): a cross until the rule holds, then a green tick. */
.password-rules { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-3); }
.password-rules li { display: flex; align-items: center; gap: 8px; }
.password-rules li[data-rule]::before { content: '\2715'; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); font-size: 10px; flex-shrink: 0; }
.password-rules li.is-ok { color: var(--text-2); }
.password-rules li.is-ok::before { content: '\2713'; background: #1f8a5b; color: #fff; font-size: 12px; font-weight: 700; }
.password-rules-strong { color: #3ddc97; font-weight: 600; }
/* Typing started or refused: the open rules are red (user 11.11.2026, draft 1A). */
.password-rules.is-alarm li[data-rule]:not(.is-ok) { color: var(--danger, #ff5a5f); }
.password-rules.is-alarm li[data-rule]:not(.is-ok)::before { background: rgba(255, 90, 95, 0.16); color: var(--danger, #ff5a5f); }
.password-rules li[hidden] { display: none; }
.password-reveal-toggle:hover, .password-reveal-toggle:focus-visible { color: var(--text); outline: none; background: rgba(255, 255, 255, .06); }
.password-reveal-toggle .password-reveal-eye-off, .password-reveal-toggle[aria-pressed="true"] .password-reveal-eye { display: none; }
.password-reveal-toggle[aria-pressed="true"] .password-reveal-eye-off { display: block; }
.adm-inline-form .password-reveal { display: inline-block; vertical-align: middle; }
.form .btn { height: 48px; margin-top: 4px; }
.form .help-text, .form [id$="_help"] { font-size: 12px; color: var(--text-3); }
.form ul { list-style: none; margin: 0; padding: 0; color: #ff8a8e; font-size: 13px; }
.alert { background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .35); color: #ffb3b5; border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }

.btn-danger { background: #ff5a5f; color: #fff; }
.btn-danger-outline { background: transparent; border-color: rgba(255, 90, 95, .55); color: #ff8a8e; }
.btn-danger-outline:hover { background: rgba(255, 90, 95, .12); }
/* div.form-actions: must outweigh ".form > div:not(.editor-grid)", which stacks fields in a column. */
.form > div.form-actions { display: flex; flex-direction: row; gap: 10px; margin-top: 4px; }
.form-actions .btn { flex: 1; margin-top: 0; }

/* Confirmation dialog (assets/lib/confirm_dialog.js). */
.confirm-dialog { width: min(420px, calc(100vw - 32px)); padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(5, 3, 8, .65); backdrop-filter: blur(4px); }
.confirm-dialog[open] { animation: dialog-in .14s ease-out; }
.confirm-dialog h2 { font-size: 20px; margin: 0 0 8px; }
.confirm-dialog p { color: var(--text-2); margin: 0; }
.confirm-dialog-actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; margin-top: 22px; }
/* A long label ("Link zum Zurücksetzen senden") wraps, and when both no longer fit side by side, the confirm button
   goes above "Abbrechen" at full width instead of pushing it out of the dialog (user, 24.10.2026). */
.confirm-dialog-actions .btn { flex: 1 1 auto; max-width: 100%; white-space: normal; text-align: center; justify-content: center; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* Every dropdown gets its own arrow with the same inset on the right as the text on the left.
   The padding is !important because the form and filter rules set padding as a shorthand. */
select:not([multiple]) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b6afc4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; padding-right: 38px !important; }
.searchbar-field select { padding-right: 18px !important; background-position: right 0 center; }
.plain-list { color: var(--text-2); margin: 0 0 20px; padding-left: 20px; }
.plain-list li { margin: 4px 0; }
.flash { margin-top: 20px; padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; }
.flash-success { background: rgba(61, 214, 140, .12); border: 1px solid rgba(61, 214, 140, .35); color: #9ef0c4; }
.flash-error { background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .35); color: #ffb3b5; }
.flash-warning { background: rgba(255, 196, 61, .12); border: 1px solid rgba(255, 196, 61, .35); color: #ffe09e; }
.site-footer a { color: var(--text-3); }
.form .field-check { flex-direction: row; align-items: center; gap: 10px; }
.form .field-check input[type=checkbox] { flex-shrink: 0; }
.form .field-check label { color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; }
/* "Wer sieht ..." (draft V2, user 10.11.2026): one row per choice, the circle left, a hint under the title; saved on
   tap. As labels, not divs: ".form > div" stacks a div's children and outranked the field-check rows. */
.choice-card { gap: 6px; }
.choice-card h3 { margin-bottom: 6px; }
.choice-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; }
.choice-row input[type=radio] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.choice-row strong { font-weight: 600; font-size: 14px; color: var(--text); }
.choice-row small { display: block; color: var(--text-3); font-size: 12.5px; }
.choice-saved { margin: 4px 0 0; color: var(--success, #3dd68c); font-size: 13px; }
.choice-card .form-actions { justify-content: flex-end; }
.field-link { align-self: flex-end; font-size: 13px; color: var(--text-2); text-decoration: none; }
.field-link:hover { color: var(--text); }

.admin { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 48px; }
.admin-badge { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.admin-nav { display: flex; flex-direction: column; gap: 4px; }
.admin-nav-title { font: 700 12px var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 8px; }
.admin-nav a { padding: 8px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.admin-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.admin-main h1 { font-size: 26px; margin-bottom: 20px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { color: var(--text-2); font-size: 13px; }
.kpi-value { font: 800 30px var(--font-head); }
@media (max-width: 760px) { .admin { grid-template-columns: 1fr; } }

.dash { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 48px; }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav a { padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.dash-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.dash-nav-soon { padding: 9px 12px; color: var(--text-3); font-size: 14px; display: flex; justify-content: space-between; }
.dash-nav-soon em { font-style: normal; font-size: 11px; background: var(--surface); border-radius: 999px; padding: 2px 8px; }
.dash-org { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.dash-org small { display: block; color: var(--text-3); font-size: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-grad); display: grid; place-items: center; font-weight: 800; color: #fff; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.dash-head h1 { font-size: 26px; }
.section-title { font-size: 18px; margin: 28px 0 12px; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.table th { color: var(--text-3); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.table tr:last-child td { border-bottom: 0; }
.table .actions { text-align: right; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.title-cell { min-width: 180px; }
.table-scroll { overflow-x: auto; border-radius: 16px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-3); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.badge-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.status-published { background: rgba(61, 214, 140, .14); color: #9ef0c4; }
.status-cancelled, .status-blocked { background: rgba(255, 90, 95, .14); color: #ffb3b5; }
.choice-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.choice-list a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); text-decoration: none; }
.choice-list small { color: var(--text-3); }
.dash-main { min-width: 0; }
@media (max-width: 860px) {
    .dash { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
    /* The sidebar turns into a scrollable row of tabs. */
    .dash-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
    .dash-nav .dash-org { flex: none; margin: 0 8px 0 0; }
    .dash-nav .dash-org span:last-child { display: none; }
    .dash-nav a { white-space: nowrap; }
    .dash-nav-soon { display: none; }
}
@media (max-width: 640px) {
    .dash-head { flex-wrap: wrap; }
    .dash-head h1 { font-size: 22px; }
    .dash-head > .btn { flex: 1 0 100%; }
    .kpis { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .kpi { padding: 14px; }
    .kpi-value { font-size: 26px; }
    /* Tables of events read as a stack of cards. */
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
    .table-cards thead { display: none; }
    .table-cards { background: none; border: 0; border-radius: 0; overflow: visible; }
    .table-cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
    .table-cards tr + tr { margin-top: 10px; }
    .table-cards td { padding: 2px 0; border: 0; }
    .table-cards td.nowrap { color: var(--accent); font-weight: 700; font-size: 13px; }
    .table-cards .title-cell { min-width: 0; }
    .table-cards td.actions { padding-top: 10px; text-align: left; }
    .table-cards .row-actions { justify-content: flex-start; }
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card h2 { font-size: 18px; margin-bottom: 8px; }
.lead { margin-bottom: 18px; }
.inline { display: inline; }
.crumbs { font-size: 13px; margin-bottom: 4px; }
.crumbs a { color: var(--text-2); }
.start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.choice-button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.choice-button small, .choice-list small { color: var(--text-3); }
.choice-button { flex-direction: column; align-items: flex-start; gap: 2px; }
.choice-button:hover, .choice-list a:hover { border-color: var(--line-strong); }
.rename input { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: inherit; }

.editor-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.editor-sections { display: flex; flex-direction: column; gap: 16px; }
.editor-section { display: flex; flex-direction: column; gap: 14px; }
.editor-section h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.step { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-size: 13px; }
.editor-side .sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.editor-side hr { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 6px 0; }
.btn-block { width: 100%; }
.row-grid { display: grid; gap: 10px; }
.date-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.program-grid > :nth-child(2) { grid-column: span 2; }
.program-grid > :nth-child(6) { grid-column: span 2; }
/* Label; amount, valid until, price after; note. */
.price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-grid > :nth-child(1), .price-grid > :nth-child(5) { grid-column: 1 / -1; }
.row-item { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
/* A row hidden by the day tabs (program_editor_controller) must stay hidden against the form's display rules (user 25.10.2026). */
.form .row-item[hidden] { display: none; }
.row-item .row-grid { flex: 1; }
.form select, .form textarea { padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background-color: var(--bg-elev); color: var(--text); font: 15px var(--font-body); }
.form select { height: 46px; }
/* A row: .form stacks its children, and the select's 220px basis then became its height (user 24.10.2026). */
.timezone-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.timezone-form select { flex: 1 1 220px; min-width: 0; height: 46px; }
.chips-field [id$="_type"], .chips-field [id$="_types"], .chips-field [id$="_styles"] { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Mehrere möglich." under the event types (phase 72), not stuck to the chips. */
.chips-field .help-text { display: block; margin-top: 6px; }
.chips-field input[type="radio"], .chips-field input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.chips-field input + label { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; font-weight: 600; color: var(--text-2); }
.chips-field input:checked + label { background: var(--accent-grad); color: #fff; border-color: transparent; }
.chips-field input:focus-visible + label { outline: 2px solid var(--accent); }
/* Dance styles in their own window, draft F (user 05.11.2026): one field in the form, a window that turns its pages;
   from the bottom on a phone, in the middle on a wide screen (style_picker_controller.js). */
.style-picker > div { display: grid; }
.style-picker-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 15px var(--font-body); text-align: left; cursor: pointer; }
.style-picker-field:hover { border-color: var(--line-strong); }
.style-picker-chosen { display: contents; }
.style-picker-placeholder { color: var(--text-3); }
.style-picker-chev { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 18px; line-height: 1; }
.style-picker-dialog { width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100dvh - 48px)); padding: 14px 16px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.style-picker-dialog::backdrop { background: rgba(5, 3, 8, .65); backdrop-filter: blur(4px); }
.style-picker-dialog[open] { animation: dialog-in .14s ease-out; }
.style-picker-page { display: flex; flex-direction: column; max-height: calc(min(640px, 100dvh - 48px) - 30px); }
.style-picker-page[hidden] { display: none; }
.style-picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 16px; }
.style-picker-back, .style-picker-close { border: 0; background: none; color: var(--text-3); font: 400 16px var(--font-body); cursor: pointer; padding: 4px 6px; }
.style-picker-back { color: var(--accent); font-size: 24px; line-height: 1; padding: 0 8px 2px 0; }
.style-picker-close { margin-left: auto; }
.style-picker-list { overflow-y: auto; }
.style-picker-row { display: flex; align-items: center; border-top: 1px solid var(--line); }
.style-picker-row:first-child { border-top: 0; }
.style-picker-row input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.style-picker .style-picker-pick { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 4px; cursor: pointer; color: var(--text); font-size: 15px; font-weight: 500; }
.style-picker-row input:focus-visible + .style-picker-pick { outline: 2px solid var(--accent); border-radius: 8px; }
.style-picker-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.style-picker-box.on { background: var(--accent-grad); border-color: transparent; }
.style-picker-box.on::after { content: '\2713'; }
.style-picker-name small { display: block; color: var(--text-3); font-size: 12px; font-weight: 500; }
.style-picker-name small:empty { display: none; }
.style-picker-more { flex: none; min-width: 92px; text-align: right; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text-3); font: 500 13px var(--font-body); padding: 8px 4px 8px 14px; cursor: pointer; white-space: nowrap; }
.style-picker-more b { color: var(--accent); font-size: 18px; margin-left: 4px; }
.style-picker-done { margin-top: 14px; width: 100%; }
@media (max-width: 640px) {
    .style-picker-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
}
.suggestions { list-style: none; margin: 4px 0 0; padding: 0; border-radius: 12px; overflow: hidden; }
.suggestions button { width: 100%; text-align: left; padding: 10px 14px; background: var(--surface-2); border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.suggestions button:hover { background: var(--bg-elev); }
.picked:not(:empty)::before { content: "\2713  "; color: #3dd68c; }
.form input[type="checkbox"] { width: 18px; height: 18px; }
@media (max-width: 1080px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } .date-grid { grid-template-columns: 1fr 1fr; } }
.editor-sections, .editor-section, .editor-side { min-width: 0; }
/* The event editor as one overview of parts (phase 48, drafts O2-O4/WR3; before: steps, draft K1): the parts in
   place of the organizer menu, each with what it holds and a mark on the right (tick, "!", "+"), one part open. */
.editor-nav { gap: 6px; }
/* The parts stay in view while a long part scrolls (below the sticky site header). */
.dash-editor .editor-nav { position: sticky; top: 88px; align-self: start; }
.editor-nav-back { color: var(--text-3) !important; font-size: 13px !important; padding: 4px 12px !important; }
.editor-nav-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.editor-nav-head strong { font-size: 15px; line-height: 1.3; }
.editor-from-post { margin: -2px 12px 6px; color: #cdb8ff; }
.editor-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-nav a.editor-step-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; }
.dash-nav a.editor-step-link[aria-current="step"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.editor-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.editor-step-name { font-weight: 600; font-size: 14px; }
.editor-step-hint { color: var(--text-3); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-step-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-3); }
.editor-step-link.is-done .editor-step-mark { color: var(--success, #3dd68c); }
.editor-step-link.is-warn .editor-step-mark { color: #ffcf7a; }
.editor-step-link.is-warn .editor-step-hint { color: #ffcf7a; }
.editor-step-link.is-invalid .editor-step-mark { background: rgba(255, 90, 95, .2); color: var(--danger, #ff5a5f); }
.editor-step-link.is-invalid .editor-step-hint { color: var(--danger, #ff5a5f); }
/* Publishing in reach from every part (draft WR3). */
.editor-nav-actions { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 0; margin-top: 8px; border-top: 1px solid var(--line); }
.editor-nav-actions .btn { width: 100%; }
.editor-nav-actions .btn:disabled, .editor-savebar .btn:disabled { opacity: .45; cursor: not-allowed; }
.editor-nav-actions p { margin: 0; }
.editor-missing { color: #ff8a5c; font-size: 13px; font-weight: 600; text-align: center; }
.editor-saved { padding: 8px 12px 0; margin: 0; }
.form > div.editor-step { gap: 16px; }
.form > div.editor-step[hidden] { display: none; }
.editor-step-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; }
.editor-finish .btn { align-self: flex-start; }
/* The template checkbox: box first, label beside it. */
.form .editor-section.editor-finish > div:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.form .editor-section.editor-finish > div:has(> input[type="checkbox"]) > input { order: -1; }
.dash-editor.is-stepped .form > div.editor-savebar { display: none; }
/* The programme items from the organizer's post still without a time (phase 48, draft WR4). */
.program-pending { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 176, 32, .07); border: 1px solid rgba(255, 176, 32, .35); }
.program-pending-title { color: #ffcf7a; font-size: 14px; }
.program-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.program-pending-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.program-pending-name { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.program-pending-name small { flex-basis: 100%; color: var(--text-2); font-size: 13px; }
.program-pending .muted { margin: 0; }
.from-post { color: #cdb8ff; font-size: 12px; }
@media (max-width: 860px) {
    /* On a phone the parts are a scrollable row, like the organizer menu; saving and publishing sit at the bottom. */
    .dash-editor .editor-nav { position: static; align-items: center; }
    .editor-nav-head, .editor-saved, .editor-nav-actions, .editor-from-post { display: none; }
    .editor-step-list { flex-direction: row; gap: 6px; }
    .dash-nav a.editor-step-link { white-space: nowrap; padding: 7px 10px; }
    .editor-step-hint { display: none; }
    .dash-editor.is-stepped .form > div.editor-savebar { display: flex; }
}

/* "Hast du schon einen Post oder Flyer?" (phase 48, draft WR0): the post left, the flyer field right. */
.post-start { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.post-start-lead { margin: -4px 0 4px; max-width: 62ch; }
.post-start-form { gap: 16px; }
.post-start-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.post-start-text, .post-start-pictures { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post-start-text textarea { flex: 1; min-height: 300px; line-height: 1.55; resize: vertical; }
.drop-zone.drop-zone-flyer { flex: 1; justify-content: center; gap: 8px; min-height: 300px; border-color: rgba(255, 79, 123, .5); background: rgba(255, 79, 123, .06); border-radius: 16px; }
.drop-zone-flyer-art { width: 96px; height: 120px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: linear-gradient(160deg, #4a1f45 0%, #2a1840 55%, #14101b 100%); margin-bottom: 4px; }
.drop-zone-flyer.has-files .drop-zone-flyer-art { display: none; }
.drop-zone-paste { color: var(--text-3); }
.post-start-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-start-empty { font-weight: 600; }
.post-start-note { margin: 0; max-width: 62ch; }
@media (max-width: 700px) {
    .post-start-grid { grid-template-columns: minmax(0, 1fr); }
    .post-start-text textarea { min-height: 200px; }
    .drop-zone.drop-zone-flyer { min-height: 200px; }
}
/* While the post is read (draft WR1) and when something is missing (draft WR2). */
.post-read-grid, .post-missing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.post-read-post { padding: 18px; display: flex; flex-direction: column; gap: 12px; opacity: .8; }
.post-read-label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.post-read-pictures { display: flex; gap: 6px; flex-wrap: wrap; }
.post-read-thumb { width: 44px; height: 54px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #4a1f45 0%, #2a1840 55%, #14101b 100%); }
.post-read-text { margin: 0; white-space: pre-line; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.post-read-state { display: flex; flex-direction: column; gap: 16px; }
.post-read-state h1 { margin: 0; font-size: 22px; }
.post-read-state p { margin: 0; }
.post-read-head { display: flex; align-items: center; gap: 12px; }
.post-read-spark { font-size: 34px; }
.post-read-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.post-read-bar span { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b48cff, var(--accent)); animation: post-read-run 1.6s ease-in-out infinite; }
@keyframes post-read-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .post-read-bar span { animation: none; width: 100%; opacity: .5; } }
.post-read-what { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.post-read-what ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.post-read-cancel { color: var(--text-2); font-size: 14px; }
.post-read-moves { display: flex; gap: 10px; flex-wrap: wrap; }
.post-missing { display: flex; flex-direction: column; gap: 10px; }
.post-missing h1 { margin: 0; font-size: 26px; }
.post-missing-lead { margin: 0 0 8px; max-width: 62ch; }
.post-missing-found { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.post-missing-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.post-missing-rows li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.post-missing-rows li:first-child { border-top: 0; }
.post-missing-key { width: 110px; flex: none; color: var(--text-2); font-size: 14px; }
.post-missing-value { flex: 1; min-width: 0; font-weight: 600; }
.post-missing-value small { color: #ffcf7a; font-weight: 500; }
.post-missing-mark { font-weight: 700; color: var(--success, #3dd68c); }
.post-missing-rows li.is-missing .post-missing-value, .post-missing-rows li.is-missing .post-missing-mark { color: #ff8a8a; }
.post-missing-form { padding: 20px; border-color: rgba(255, 138, 138, .4); }
.post-missing-form .form .btn-primary { align-self: flex-start; }
@media (max-width: 860px) { .post-read-grid, .post-missing-grid { grid-template-columns: minmax(0, 1fr); } }
.posts-waiting { padding: 16px 18px; margin-bottom: 18px; border-color: rgba(180, 140, 255, .4); }
.posts-waiting h2 { margin: 0 0 8px; font-size: 16px; }

.page-head { padding-top: 36px; padding-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: clamp(26px, 4vw, 38px); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tag { --st: var(--text-3); display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--st); background: color-mix(in srgb, var(--st) 16%, transparent); }
.tag-cancelled { --st: #ff5a5f; }
.tag-ok { --st: #3ddc97; }
.tag-warn { --st: #ffb547; }
.tag-admin { --st: #ff8fab; }
.tag-organizer { --st: #9d8cff; text-decoration: none; }
.tag-organizer:hover { text-decoration: underline; }
.table .tags { flex-direction: column; align-items: flex-start; }
.table .tag { white-space: nowrap; }
.st-salsa { --st: #ff5a5f; } .st-bachata { --st: #ff9f43; } .st-kizomba { --st: #a66bff; } .st-zouk { --st: #2ec4b6; }
.st-semba { --st: #c77dff; } .st-urban_kiz { --st: #8f5bff; } .st-tarraxinha { --st: #d36cff; } .st-tarraxo { --st: #b46bd6; }
.st-ghetto_zouk { --st: #5fd3c6; } .st-kizomba_fusion { --st: #9d8cff; } .st-kompa { --st: #f2994a; }
.st-tango { --st: #e8c547; } .st-wcs { --st: #4ea8ff; } .st-swing { --st: #ff7eb6; } .st-forro { --st: #7bd88f; }
.st-salsa_on1 { --st: #ff6b6b; } .st-salsa_on2 { --st: #ff7a8a; } .st-salsa_cubana { --st: #ff4d4d; } .st-rueda { --st: #ff8a7a; } .st-salsa_calena { --st: #ff5f87; }
.st-bachata_sensual { --st: #ffb066; } .st-bachata_dominicana { --st: #ffa94d; } .st-bachata_moderna { --st: #ff9466; }
.st-zouk_love { --st: #48b8d0; } .st-lindy_hop { --st: #ff8ec3; } .st-balboa { --st: #ff9fd0; } .st-boogie_woogie { --st: #f77fb0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.chip-off { opacity: .6; }
.user-profiles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.user-profiles .muted { width: 100%; }
.chip[aria-current="true"] { background: var(--accent-grad); color: #fff; border-color: transparent; }

.results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 48px; }
.results-map { position: sticky; top: 84px; }
.results-map .map { height: calc(100vh - 140px); min-height: 360px; }
.event-list { display: flex; flex-direction: column; gap: 10px; }
.event-card { display: flex; gap: 16px; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color .12s ease, background .12s ease; }
.event-card:hover, .event-card.is-map-hot { border-color: var(--line-strong); background: #201a2b; }
.event-card.is-cancelled { opacity: .8; }
/* Cancelled: a diagonal stamp from bottom left to top right over the picture, greyed (user 24.10.2026). */
.event-card-media, .event-media { position: relative; display: block; flex: none; }
.event-hero:not(.is-wide) .event-media { width: fit-content; max-width: 100%; }
.event-card.is-cancelled .event-card-cover, .event-media.is-cancelled img, .event-media.is-cancelled .poster { filter: grayscale(1) brightness(.6); }
.cancel-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); padding: 3px 10px; border: 2px solid #ff5a5f; border-radius: 6px; background: rgba(13, 10, 18, .7); color: #ff5a5f; font: 800 13px/1.2 var(--font-head); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.event-media .cancel-stamp { padding: 8px 22px; border-width: 3px; font-size: clamp(20px, 4vw, 34px); }
.event-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 2px 0; }
.event-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* How long until it starts, green like in the app (user 24.10.2026). */
.countdown { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(61, 220, 151, .14); color: #3ddc97; font-size: 12px; font-weight: 700; white-space: nowrap; }
.event-card-when { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-2); }
.event-card-title { font: 700 17px/1.25 var(--font-head); }
.event-card-meta { color: var(--text-2); font-size: 14px; }
.event-card .tags { margin-top: 4px; }

.map { height: 280px; border-radius: var(--r-lg); overflow: hidden; background: #141019; }
.map .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.map-pin { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform-origin: 50% 100%; background: var(--accent-grad); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.maplibregl-ctrl-attrib { font-size: 11px; }
/* "Route" on a place's map, bottom left (user 10.11.2026, draft C); the source note keeps the bottom right. */
.map-holder { position: relative; }
.map-route { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; border-radius: 999px; background: #fff; color: #1b1624; font: 700 14px var(--font-body); text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.map-route svg { color: var(--accent); }
.map-route:hover { background: #f3eef5; }

/* "Keine Adresse? Punkt auf der Karte setzen" (user 04.11.2026, draft B): a link under the address search opens the
   map big in a dialog; on a phone it fills the screen. */
.map-pin-open { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 4px 0; background: none; border: 0; color: var(--accent); font: 500 14px var(--font-body); cursor: pointer; text-align: left; }
.map-pin-open:hover { text-decoration: underline; }
.map-pin-dialog { width: min(720px, calc(100vw - 32px)); padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.map-pin-dialog[open] { display: grid; gap: 10px; animation: dialog-in .14s ease-out; }
.map-pin-dialog::backdrop { background: rgba(5, 3, 8, .65); backdrop-filter: blur(4px); }
/* "Nachricht bearbeiten" (draft E3, user 10.11.2026), as the app's dialog. */
.chat-edit-dialog { width: min(480px, calc(100vw - 32px)); padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.chat-edit-dialog[open] { animation: dialog-in .14s ease-out; }
.chat-edit-dialog::backdrop { background: rgba(5, 3, 8, .65); backdrop-filter: blur(4px); }
.chat-edit-dialog h3 { margin: 0 0 10px; font-size: 16px; }
.chat-edit-dialog textarea { width: 100%; resize: vertical; }
.chat-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.map-pin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.map-pin-head h2 { font-size: 18px; margin: 0; }
.map-pin-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 600 18px/1 var(--font-body); cursor: pointer; }
.map-pin-search { position: relative; }
.map-pin-search .suggestions { position: absolute; left: 0; right: 0; z-index: 3; box-shadow: var(--shadow); }
.map-pin-map.map { height: min(440px, 60vh); border-radius: 14px; cursor: crosshair; }
.map-pin-map .maplibregl-canvas-container.maplibregl-interactive { cursor: crosshair; }
.map-pin-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-pin-foot p { margin: 0; flex: 1 1 240px; }
.map-pin-buttons { display: flex; gap: 8px; margin-left: auto; }
.map-pin-buttons .btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
@media (max-width: 600px) {
    .map-pin-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; padding: 12px; }
    .map-pin-dialog[open] { grid-template-rows: auto auto 1fr auto; }
    .map-pin-map.map { height: auto; min-height: 0; }
    .map-pin-buttons { width: 100%; }
    .map-pin-buttons .btn { flex: 1; }
}
.map-pin-group { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--accent-grad); border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); color: #fff; font: 800 15px/1 var(--font-body); cursor: pointer; }
.map-pin-group:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* The event under the mouse in the list beside the map (user 30.10.2026): its pin grows and glows - the pin inside the
   marker MapLibre places (.map-marker), so it grows where it stands; a single pin grows up from its point. */
.maplibregl-marker.map-marker:has(.is-hot) { z-index: 5; }
.map-pin.is-hot, .map-pin-group.is-hot { scale: 1.45; box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .6); transition: scale .15s ease; }
.map-group-popup .maplibregl-popup-content { padding: 6px; border-radius: var(--r-md, 12px); background: var(--surface); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.map-group-popup .maplibregl-popup-tip { display: none; }
.map-group-popup .maplibregl-popup-close-button { color: var(--text-2); font-size: 18px; width: 28px; height: 28px; }
/* Own tooltip over pins and group pins (mouse only, user 24.10.2026). */
.map-tip { position: absolute; z-index: 3; max-width: 260px; padding: 8px 10px; border-radius: 10px; background: rgba(20, 16, 25, .96); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.map-tip-row { display: grid; gap: 1px; }
.map-tip-row + .map-tip-row { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.map-tip-row strong { font: 700 14px/1.25 var(--font-head); color: var(--text); }
.map-tip-row span { font-size: 12px; color: var(--text-2); }
.map-group-list { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 640px) { .map-group-list { max-height: 300px; } }
.map-group-list li + li { border-top: 1px solid var(--line); }
.map-group-list a, .map-group-list span { display: grid; gap: 2px; padding: 8px 30px 8px 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.map-group-list a:hover, .map-group-list a:focus-visible { background: var(--surface-2); }
.map-group-list strong { font: 700 15px/1.25 var(--font-head); }
.map-group-list a > span, .map-group-list span > span { display: block; padding: 0; color: var(--text-2); font-size: 13px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters select { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--text); font: 14px var(--font-body); }
.filter-panel { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row select { flex: 1 1 130px; min-width: 0; }
.filter-row > .btn { height: 42px; }
.filter-row > .btn-primary { flex: 0 0 auto; padding: 0 26px; }

.event-page { padding-top: 32px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 24px; }
.event-hero { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center; }
.event-hero.is-wide { grid-template-columns: 1fr; gap: 22px; }
.event-banner { position: relative; overflow: hidden; border-radius: 22px; background: var(--surface); display: flex; justify-content: center; }
.event-banner-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) brightness(.55); transform: scale(1.15); }
.event-banner-img { position: relative; display: block; max-width: 100%; max-height: 480px; width: auto; height: auto; }
.event-hero h1 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.05; margin: 8px 0; }
.event-when { font: 700 18px var(--font-head); margin: 0; }
.event-where { color: var(--text-2); margin: 8px 0; }
.event-where a { color: inherit; text-decoration: none; }
.event-where a:hover, .event-where a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.by a { color: var(--accent); font-weight: 600; text-decoration: none; }
.poster { aspect-ratio: 4 / 5; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; background: linear-gradient(160deg, #ff5a5f, #6b1d3a 70%); }
.poster-bachata { background: linear-gradient(160deg, #ff9f43, #6b2d1d 70%); }
.poster-kizomba { background: linear-gradient(160deg, #a66bff, #2b1650 70%); }
.poster-zouk { background: linear-gradient(160deg, #2ec4b6, #10393a 70%); }
.poster-tango { background: linear-gradient(160deg, #e8c547, #4a3510 70%); }
.poster-wcs, .poster-swing { background: linear-gradient(160deg, #4ea8ff, #13284d 70%); }
.poster-type { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; opacity: .85; }
.poster-title { font: 800 30px var(--font-head); line-height: 1.05; }
.event-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.event-main { display: flex; flex-direction: column; gap: 16px; }
.event-side { display: flex; flex-direction: column; gap: 16px; }
/* "Ich bin vor Ort" (phase 34, draft I1): a card above "Ich bin dabei" while the event runs. */
.on-site-card { display: flex; flex-direction: column; gap: 10px; border-color: rgba(255, 79, 123, .35); }
.on-site-card p { margin: 0; }
.on-site-when { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.on-site-dot { width: 8px; height: 8px; border-radius: 50%; background: #3dd68c; flex-shrink: 0; }
.on-site-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.on-site-card .btn.is-working { opacity: .6; cursor: progress; }
.on-site-card.is-done { flex-direction: row; align-items: center; gap: 12px; border-color: rgba(61, 214, 140, .35); }
.on-site-tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(61, 214, 140, .18); color: #3dd68c; font-weight: 700; flex-shrink: 0; }
.on-site-dialog .on-site-note { margin-top: 10px; font-size: 13px; color: var(--text-3); }

/* Event program as a line of stops per day: done slots carry a check in their
   kind's colour, the running one glows and the line fills up as time passes.
   --sx/--sy shift the line and marks when the running slot's padded glow
   moves its box; --progress (0..1) comes from the server and program_progress_controller. */
.program-legend { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.program-legend li { display: flex; align-items: center; gap: 6px; }
.program-legend li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.k-party { --k: #ff4f7b; } .k-workshop { --k: #4ea8ff; } .k-social { --k: #3ddc97; } .k-show { --k: #ffb547; }
.program-day { padding: 16px 0; }
.program-day + .program-day { border-top: 1px solid var(--line-strong); }
.program-day.has-tile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
.program-tile { margin: 0; width: 56px; box-sizing: border-box; padding: 8px 0 9px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; align-self: start; text-transform: uppercase; }
.program-tile-weekday { font: 700 11px var(--font-body); letter-spacing: .06em; color: #ff8fab; }
.program-tile-day { font: 700 24px/1.1 var(--font-head); color: var(--text); }
.program-tile-month { font: 400 11px var(--font-body); color: var(--text-2); }
.program-day.is-done .program-tile { opacity: .5; }
.program-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.program-item.is-joined { margin-bottom: -4px; padding-bottom: 14px; }
.program-item { --sx: 0px; --sy: 0px; position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 26px; min-width: 0; }
.program-track { position: absolute; left: calc(var(--sx) + 6.5px); width: 3px; top: var(--sy); bottom: calc(var(--sy) + 9px); border-radius: 3px; background: var(--line); }
/* Ends where the next one starts: the line runs on into the next dot. */
.program-item.is-joined .program-track { bottom: calc(var(--sy) - 14px); }
.program-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 3px; background: var(--k); }
.program-item.is-past .program-fill { height: 100%; background: color-mix(in srgb, var(--k) 55%, transparent); }
/* The running slot's line grows from below its glowing dot, so the growth stays visible. */
.program-item.is-live .program-fill { height: calc(22px + (100% - 22px) * var(--progress)); }
.program-mark { position: absolute; left: calc(var(--sx) + 3px); top: calc(var(--sy) + 4px); width: 10px; height: 10px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 3px var(--surface); display: flex; align-items: center; justify-content: center; }
.program-mark svg { width: 10px; height: 10px; fill: none; stroke: var(--surface); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; display: none; }
.program-item.is-past .program-mark { left: calc(var(--sx)); top: 1px; width: 16px; height: 16px; background: color-mix(in srgb, var(--k) 80%, var(--surface)); }
.program-item.is-past .program-mark svg { display: block; }
.program-item.is-live { --sx: 10px; --sy: 8px; margin: -8px -10px; padding: 8px 10px 8px 36px; border-radius: 14px; background: color-mix(in srgb, var(--k) 12%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--k) 22%, transparent); }
.program-item.is-live .program-mark { left: calc(var(--sx) + 1px); top: calc(var(--sy) + 2px); width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px color-mix(in srgb, var(--k) 30%, transparent), 0 0 18px 6px color-mix(in srgb, var(--k) 45%, transparent); }
.program-time { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Draft L1: below the line, a hollow end mark with the end time. */
.program-end { display: flex; align-items: center; min-height: 18px; margin-top: 24px; }
.program-end-mark { position: absolute; left: calc(var(--sx) + 3px); bottom: calc(var(--sy) + 4px); width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--text-3); background: var(--surface); }
.program-end-time { font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.program-item.is-past .program-end-mark { border-color: color-mix(in srgb, var(--k) 55%, var(--surface)); }
.program-item.is-past .program-end-time { color: var(--text-3); }
.program-item.is-live .program-end-mark { background: color-mix(in srgb, var(--k) 12%, var(--surface)); }
.program-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A workshop's level (phase 77, draft N1): the word in its own colour, green to red. */
.program-level-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--lv); background: color-mix(in srgb, var(--lv) 16%, transparent); white-space: nowrap; }
.lv-open { --lv: #3ecf8e; } .lv-beginner { --lv: #7fd36b; } .lv-intermediate { --lv: #4ea8ff; } .lv-inter_advanced { --lv: #ffb547; } .lv-advanced { --lv: #ff5a5f; }
.program-item.is-past .program-level-pill { color: var(--text-3); background: var(--surface-2); }
.program-kind { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.program-item.is-past .program-time, .program-item.is-past strong { color: var(--text-3); }
.program-item.is-past strong { font-weight: 600; }
.program-item.is-past .program-kind { display: none; }
.program-left { display: none; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--k) 65%, var(--text)); }
.program-item.is-live .program-left { display: block; }
/* Days on top of the programme (user 25.10.2026, draft P1): one day at a time, today's first. */
.program-day-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0 4px; padding: 2px 0 6px; scrollbar-width: none; }
.program-day-tab { flex: 1 0 58px; max-width: 84px; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.program-day-tab-weekday { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #ff8fab; text-transform: uppercase; }
.program-day-tab strong { font: 700 18px/1.15 var(--font-display, var(--font-body)); }
.program-day-tab-month { font-size: 11px; color: var(--text-2); }
.program-day-tab[aria-selected="true"] { border-color: transparent; background: var(--accent-grad); }
.program-day-tab[aria-selected="true"] span { color: #fff; }
.program-day-panel[hidden], .program-room-panels .program-room[hidden] { display: none; }
.program-room-tab.is-only { cursor: default; }
.program-rooms { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0 2px; padding: 2px 0 6px; scrollbar-width: none; }
.program-room-tab { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer; }
.program-room-tab[aria-selected="true"] { border-color: transparent; background: var(--accent-grad); color: #fff; }
.program-room-tab.is-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.description { color: var(--text-2); }
.prices { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prices li { display: flex; justify-content: space-between; gap: 10px; }
.prices small { display: block; }
.prices .price-next { color: var(--accent-2, #ff8a5c); }
.change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.change-list li { display: flex; flex-direction: column; gap: 2px; }
.change-list small { font-size: 12px; }
/* "Neuigkeiten" on the event (phase 49, drafts N1/N3): posts, checked notices (dashed) and changes, newest first. */
.news-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.news-timeline li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.news-timeline li p { margin: 0; line-height: 1.5; white-space: pre-line; }
.news-timeline .news-head { color: var(--text-3); font-size: 12px; }
.news-timeline .news-head strong { color: var(--text); }
.news-timeline .news-notice { background: transparent; border: 1px dashed var(--line-strong); }
.news-write { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.news-write label { font-weight: 600; font-size: 14px; }
.news-write textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.news-write .with-info { align-self: flex-start; }
.news-timeline .news-remove, .news-timeline .news-pin { align-self: flex-end; }
.news-write-extra, .news-write-check { font-size: 13px; color: var(--text-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.news-timeline .news-post.is-pinned { border: 1px solid rgba(255, 79, 123, .35); }
.news-pinned { align-self: flex-start; }
.news-image { display: block; max-width: 100%; border-radius: 10px; margin-top: 4px; }
.news-comments { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.news-comments-count { font-size: 12px; font-weight: 600; color: var(--text-3); }
.news-comments ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.news-timeline .news-comments li { padding: 6px 8px; border-radius: 10px; background: transparent; gap: 2px; }
.news-timeline .news-comments li.by-organizer { background: rgba(255, 79, 123, .06); }
.news-comment-actions { display: flex; gap: 12px; font-size: 12px; }
.news-comment-actions a, .news-comment-actions .link-button { color: var(--text-3); }
.news-comment-form { display: flex; flex-direction: column; gap: 6px; }
.news-comment-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.news-comment-form .btn { align-self: flex-start; }
.news-older { margin-top: 10px; }
.news-ask { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.news-ask h2, .news-ask p { margin: 0; }
.news-ask form { display: flex; flex-direction: column; gap: 10px; }
.news-ask-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; }
.news-ask-changes li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.news-ask-changes li:first-child { border-top: 0; }
.news-ask-text { flex: 1; min-width: 200px; font-size: 14px; }
.news-ask-label { font-weight: 600; font-size: 14px; }
.news-ask textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.news-ask-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.role-row.role-row-sub { margin-left: 24px; }
.news-suggestion { display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(180, 140, 255, .35); background: rgba(180, 140, 255, .08); }
.news-suggestion h2 { margin: 0; font-size: 17px; color: #cdb8ff; }
.news-suggestion p { margin: 0; }
.news-suggestion-post { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); white-space: pre-line; font-size: 14px; line-height: 1.5; max-height: 220px; overflow: auto; }
.news-suggestion-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.news-older summary { cursor: pointer; color: var(--accent-2); font-weight: 600; font-size: 14px; text-align: center; padding: 6px 0; }
.news-older[open] summary { margin-bottom: 10px; }
.news-timeline .news-change { background: transparent; border-left: 3px solid #ffcf7a; border-radius: 0 12px 12px 0; }
.further { margin: 0; padding-left: 18px; }
.further a { color: var(--text); }
.org-card { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
.org-head { display: flex; gap: 16px; align-items: center; }
.org-title { flex: 1; min-width: 0; }
.org-title h1 { font-size: clamp(24px, 3.6vw, 34px); }
.org-title p { margin: 4px 0 0; }
.org-title a { color: var(--text-2); }
.org-description { color: var(--text-2); margin: 0; max-width: 760px; }
.org-card .links { margin: 0; }
.small-text { font-size: 13px; margin: 0; }
.org-card .org-tools { border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 560px) { .org-head { flex-wrap: wrap; } .org-head .follow-frame { flex-basis: 100%; } .org-head .follow .btn { width: 100%; } }
.avatar-lg { width: 64px; height: 64px; border-radius: 18px; font-size: 26px; }
/* A person's picture is round (the circle it was cropped for); organizers keep the rounded square. */
.avatar.avatar-person { border-radius: 50%; }
img.avatar { object-fit: cover; padding: 0; }
.avatar-xl { width: 96px; height: 96px; font-size: 38px; }
.profile-picture { display: flex; align-items: center; gap: 18px; }
.profile-picture-wrap { position: relative; flex: none; }
.profile-picture-edit { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--bg); background: var(--surface-2); color: var(--text); cursor: pointer; }
.profile-picture-edit:hover { background: var(--accent); color: #fff; }
/* Remove: a small cross top right (user 24.10.2026), instead of a line of its own. */
.profile-picture-remove-form { position: absolute; right: -4px; top: -4px; margin: 0; }
.profile-picture-remove { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg); background: var(--surface-2); color: var(--text-2); cursor: pointer; padding: 0; }
.profile-picture-remove:hover { background: var(--danger, #e5484d); color: #fff; }
/* The profile head as in the app: picture, name, public address, e-mail - then the facts one under the other. */
.profile-head { display: flex; align-items: center; gap: 18px; }
.profile-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profile-head-name { font-size: 18px; }
.profile-head-text .tag { margin-left: 4px; }
.profile-facts { display: flex; flex-direction: column; gap: 14px; }
.profile-fact { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 4px 12px; align-items: center; }
.profile-fact > .muted { font-size: 14px; font-weight: 600; }
.profile-fact .timezone-form { margin: 0; flex-wrap: nowrap; }
.profile-fact .timezone-form select { flex: 1 1 auto; height: 40px; }
.profile-fact-hint { grid-column: 2; margin: 0; }
@media (max-width: 520px) { .profile-fact { grid-template-columns: 1fr; } .profile-fact-hint { grid-column: 1; } }
/* The settings' switches (user 24.10.2026): one button sending the opposite state, as in the app. */
.switch-form { margin: 0; flex: none; }
.switch { position: relative; width: 46px; height: 28px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); cursor: pointer; padding: 0; transition: background .15s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background .15s; }
.switch.is-on { background: var(--accent); border-color: var(--accent); }
.switch.is-on span { transform: translateX(18px); background: #fff; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.language-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.header-settings { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); }
.header-count { position: absolute; top: -4px; right: -4px; }
.header-settings:hover, .header-settings[aria-current="page"] { color: var(--text); border-color: var(--line-strong); }
.crop-dialog { width: min(520px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.crop-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.crop-dialog h2 { margin: 0 0 4px; font-size: 20px; }
.crop-area { height: min(60vh, 380px); margin: 12px 0; background: #0d0a12; border-radius: 12px; overflow: hidden; }
.crop-area img { display: block; max-width: 100%; }
/* The crop box as a circle, like the picture will look. */
.crop-dialog .cropper-view-box, .crop-dialog .cropper-face { border-radius: 50%; }
.crop-dialog .cropper-view-box { outline: 2px solid #fff; outline-offset: -2px; }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding-bottom: 48px; }
.city-tile { padding: 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, #2a1f38, var(--surface) 70%); border: 1px solid var(--line); text-decoration: none; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s ease; }
.city-tile:hover { border-color: var(--line-strong); }
.city-tile strong { font: 700 17px var(--font-head); }
.city-tile small { color: var(--text-3); }
@media (max-width: 900px) {
    /* minmax(0, ...): a wide row inside (seven long weekday tabs in Latvian) scrolls instead of widening the page. */
    .results, .event-columns, .event-hero { grid-template-columns: minmax(0, 1fr); }
    .results-map { position: static; order: -1; }
    .event-side { order: -1; }
    /* The event page on a phone (user, 23.10.2026): one column in the agreed order - the ticket and
       "I'm going" first, then check-in, pre-party, program, after-party, other, line-up, prices,
       description, travel & stay, venue; the side column's other parts after them. */
    /* stretch: .event-columns lines its grid cells up at the top (align-items: start), which in this flex column
       made a folded section only as wide as its heading (user 03.11.2026). Every block runs edge to edge. */
    .event-order { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
    .event-order > .event-main, .event-order > .event-side { display: contents; }
    .event-order > * > * { order: 30; }
    .event-order .on-site-card { order: -1; }
    .event-order .event-actions { order: 0; }
    .event-order [data-section="check_in"] { order: 1; }
    .event-order [data-section="side_pre"] { order: 2; }
    .event-order [data-section="program"] { order: 3; }
    .event-order [data-section="side_after"] { order: 4; }
    .event-order [data-section="side_other"] { order: 5; }
    .event-order [data-section="lineup"] { order: 6; }
    .event-order [data-section="dress_code"] { order: 7; }
    .event-order [data-section="prices"] { order: 8; }
    .event-order [data-section="description"] { order: 9; }
    .event-order [data-section="stay"] { order: 10; }
    .event-order [data-section="venue"] { order: 11; }
    .event-order .report-link { order: 40; }
    .results-map .map { height: 320px; }
    .event-hero .poster, .event-hero .event-cover { max-width: 300px; }
}

/* The role button next to the logo (draft R2): the current view, a tap switches. */
.role-switch { position: relative; margin-left: 14px; }
/* "Was suchst du?" above the search filters (user, 24.10.2026). */
.what-switch { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.what-legend { float: left; margin-right: 6px; font-weight: 700; color: var(--text-2); font-size: 14px; }
.what-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.what-option span { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-2); font-weight: 600; font-size: 14px; cursor: pointer; }
.what-option input:checked + span { border-color: rgba(255, 79, 123, .6); background: var(--accent-soft); color: var(--text); }
.what-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.online-head { font-size: 18px; margin: 18px 0 8px; }
.business-card-sign { display: grid; place-items: center; font-size: 40px; background: var(--surface-2); }
/* A school's or shop's page and forms. */
.business-page { padding-top: 24px; padding-bottom: 40px; }
.business-head { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 24px; align-items: end; margin-bottom: 18px; }
.business-head:not(:has(.business-cover)) { grid-template-columns: 1fr; }
.business-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.business-title h1 { margin: 8px 0 4px; }
.business-contact-line { display: flex; flex-wrap: wrap; gap: 14px; }
.course-tabs { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 6px; padding-bottom: 2px; }
.course-tabs::-webkit-scrollbar { display: none; }
.course-plan.is-ready .course-tabs { display: flex; }
.course-tab { flex: 1 1 0; min-width: 40px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 1px; padding: 4px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 700 13px var(--font-body); cursor: pointer; }
.course-tab[aria-selected="true"] { border-color: transparent; background: var(--accent-grad); color: #fff; }
.course-day { font: 700 13px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 16px 0 8px; }
.course-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.course { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.course-time { color: var(--accent); }
.business-status { display: flex; gap: 12px; align-items: center; }
.business-form .editor-section { margin-bottom: 16px; }
.business-contact { grid-template-columns: 1fr 1fr; }
.course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.course-grid > .course-title { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .business-head { grid-template-columns: 1fr; }
    .business-contact, .course-grid { grid-template-columns: 1fr 1fr; }
}
.role-switch-button { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 79, 123, .14); border: 1px solid rgba(255, 79, 123, .45); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.role-switch-button::-webkit-details-marker { display: none; }
.role-switch-chevron { transition: transform .15s ease; }
.role-switch[open] .role-switch-chevron { transform: rotate(180deg); }
.role-switch-panel { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 6px; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
.role-switch-title { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.role-switch-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 600 14px var(--font-body); text-align: left; cursor: pointer; }
.role-switch-item:hover, .role-switch-item[aria-current="true"] { background: var(--surface-2); color: var(--text); }
.role-switch-check { margin-left: auto; color: var(--accent); }
.role-switch-manage { margin: 4px 0 2px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; text-decoration: none; }
.role-switch-manage:hover { color: var(--text); }
/* Profile "Meine Rollen" (K2) and the choice at sign-up (K1). */
.role-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.role-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); }
.role-row.is-on { border-color: rgba(255, 79, 123, .45); background: var(--accent-soft); }
.role-row-icon, .role-card-icon { font-size: 22px; }
/* One width for every sign, the dancer's pair stacked (user 09.11.2026): the texts beside start in one line. */
.role-row-icon, .role-card-icon { flex: none; width: 34px; text-align: center; }
.role-pair { display: inline-flex; flex-direction: column; align-items: center; font-size: 16px; line-height: 1.1; }
.role-row .btn:disabled { opacity: .4; cursor: not-allowed; }
.role-row-text, .role-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-choice { border: 0; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.role-choice legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.role-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; }
.role-card:has(input:checked) { border-color: rgba(255, 79, 123, .6); background: var(--accent-soft); }
.role-card input[type="checkbox"] { order: 3; width: 20px; height: 20px; accent-color: var(--accent); }
.main-nav { flex: 1; margin-left: 12px; display: flex; gap: 22px; }
.main-nav a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 15px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.city-grid.compact { padding-bottom: 0; }

/* Home: search pill, poster collage, sections, organizer band. */
.searchbar { display: flex; align-items: center; gap: 4px; margin-top: 32px; max-width: 560px; padding: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.searchbar-field { flex: 1; min-width: 0; padding: 4px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; cursor: pointer; }
.searchbar-field:last-of-type { border-right: 0; }
.searchbar-field small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.searchbar-field select { appearance: none; -webkit-appearance: none; border: 0; padding: 2px 0; background-color: transparent; color: var(--text); font: 600 15px var(--font-body); cursor: pointer; width: 100%; }
.searchbar-field select:focus-visible { outline: 2px solid var(--text); border-radius: 6px; }
.searchbar .btn { height: 48px; padding: 0 26px; }
.collage { position: relative; height: 440px; }
.collage-item { position: absolute; width: 230px; height: 300px; border-radius: 24px; object-fit: cover; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.collage-item.poster { aspect-ratio: auto; padding: 18px; }
.collage-item .poster-title { font-size: 24px; text-transform: uppercase; }
.collage-0 { left: 0; top: 50px; transform: rotate(-7deg); }
.collage-1 { left: 32%; top: 0; transform: rotate(4deg); z-index: 1; }
.collage-2 { left: 18%; top: 140px; transform: rotate(-2deg); z-index: 2; }
.home-section { padding-top: 28px; padding-bottom: 28px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font-size: clamp(22px, 3vw, 28px); }
.section-head a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.organizer-band { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; padding: 40px; border-radius: 28px; background: radial-gradient(circle at 90% 10%, rgba(255, 79, 123, .16), transparent 45%), linear-gradient(135deg, #1f1529, #15101d); border: 1px solid var(--line); }
.organizer-band h2 { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 10px; }
.features { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.features li { display: flex; flex-direction: column; padding-left: 18px; border-left: 2px solid rgba(255, 79, 123, .45); }
.features span { color: var(--text-2); font-size: 14px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .collage { display: none; } .hero { padding: 40px 0 32px; } }
/* The search in the header (test point 54, draft A): a field with a window of hits; narrower, a magnifier to "Entdecken". */
.site-search { position: relative; flex: none; width: 240px; }
.site-search input { width: 100%; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 14px; font: inherit; font-size: 14px; }
.site-search input:focus { outline: none; border-color: var(--accent); }
.site-search-drop { position: absolute; top: calc(100% + 6px); right: 0; width: min(440px, 92vw); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); padding: 6px; z-index: 60; }
.site-hits-head { margin: 10px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.site-hit { display: block; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; line-height: 1.35; }
.site-hit:hover, .site-hit:focus-visible { background: var(--surface-2); }
.site-hits-all { margin-top: 4px; color: var(--accent); font-weight: 600; }
.site-hits-none { margin: 8px; }
.site-search-icon { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); place-items: center; color: var(--text); flex: none; }
/* The header row in steps (user 14.11.2026, choice A; signed in it ran out of the window from 641 to 1310 px, e.g. on
   1280 laptops): below 1640 the name beside the picture and "Abmelden" go (it is in the settings), below 1180 the search
   becomes the magnifier and the role keeps its sign, below 900 the phone menu. Measured in de, ru, fr, hu, lb. */
.header-user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1640px) { .header-user-name, .header-extra { display: none; } .header-user { padding: 3px; } }
@media (max-width: 1180px) { .site-search { display: none; } .site-search-icon { display: grid; } .role-switch-name { display: none; } .site-header .wrap { gap: 16px; } }
.main-nav a { white-space: nowrap; }
/* On "Entdecken": the word in its own field, and what else it found above the list. */
.find-field { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 14px; font: inherit; font-size: 15px; margin-bottom: 10px; }
.find-field:focus { outline: none; border-color: var(--accent); }
.find-hits { margin-top: 14px; }
/* The phone menu: hidden on wider screens, where the header shows everything in one row. */
.nav-menu { display: none; }
@media (max-width: 900px) {
    /* One slim row: logo, account (or sign-in) and the menu button; the rest folds into the menu. */
    .site-header .wrap { height: 58px; gap: 10px; }
    .site-header .logo { margin-right: auto; font-size: 20px; }
    .main-nav, .header-actions > .lang-switch, .header-extra { display: none; }
    /* Next to the logo, the rest pushed right as without it. */
    .site-header .logo:has(+ .role-switch) { margin-right: 0; }
    .role-switch { margin-left: 0; margin-right: auto; }
    .role-switch-name { display: none; }
    .nav-menu { display: block; }
    .nav-menu-button { list-style: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; }
    .nav-menu-button::-webkit-details-marker { display: none; }
    /* Something unread inside (an answer from support): a dot on the button, the number in the menu. */
    .nav-menu-button { position: relative; }
    .nav-menu-button.has-news::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
    .nav-menu-button span, .nav-menu-button span::before, .nav-menu-button span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .15s ease, background .15s ease; }
    .nav-menu-button span::before, .nav-menu-button span::after { content: ''; position: absolute; left: 0; }
    .nav-menu-button span::before { top: -6px; }
    .nav-menu-button span::after { top: 6px; }
    .nav-menu[open] .nav-menu-button span { background: transparent; }
    .nav-menu[open] .nav-menu-button span::before { transform: translateY(6px) rotate(45deg); }
    .nav-menu[open] .nav-menu-button span::after { transform: translateY(-6px) rotate(-45deg); }
    .nav-menu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .45); display: flex; flex-direction: column; }
    .nav-menu-panel > a { padding: 13px 4px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); }
    .nav-menu-panel > a[aria-current="page"] { color: var(--text); }
    .nav-menu-foot .lang-switch-list { left: 0; right: auto; max-height: 55vh; }
    .nav-menu-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; }
    .header-user-name { display: none; }
    .header-user { padding: 3px; }
}
@media (max-width: 640px) {
    .organizer-band { flex-direction: column; align-items: flex-start; padding: 26px; }
    .searchbar { flex-wrap: wrap; border-radius: 24px; }
    .searchbar-field { flex-basis: 40%; }
    .searchbar .btn { flex-basis: 100%; }
    .event-card-cover { width: 84px; height: 84px; }
}

/* Signed in, the row holds logo, role, bell, avatar, settings and menu: on a 390px iPhone the menu button stuck
   out by 3px and the page moved sideways (browser test, 26.10.2026). Tighter gaps keep it on screen down to 360px. */
@media (max-width: 420px) {
    .site-header .wrap, .header-actions { gap: 6px; }
}
/* Since the search button joined the row, signed in it stuck out again up to 445px (360-430 phones, test 14.11.2026):
   the logo keeps its mark and drops the word there. */
@media (max-width: 460px) {
    .site-header .logo:has(+ .role-switch) { font-size: 0; gap: 0; }
    .site-header .logo:has(+ .role-switch) .logo-mark { width: 32px; height: 32px; }
}
/* Narrower still (360px Androids): the settings stay in the menu, where they are listed anyway. */
@media (max-width: 380px) {
    .header-settings { display: none; }
}

/* Form rows inside the editor: label above field, fields full width. */
.form .editor-section > div:not(.row-grid):not([data-collection-target]), .form .row-grid > div, .form .new-venue > div, .form .sticky > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea { width: 100%; }
.form div:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 10px; }
/* Single checkboxes: box first, label next to it, help text underneath. */
.form div:not([id$="_styles"]):has(> input[type="checkbox"]) { flex-wrap: wrap; column-gap: 10px; row-gap: 4px; }
/* After the column rule above, which would show it again: the emptied list of items without a time (phase 48). */
.form .editor-section > div.program-pending[hidden] { display: none; }
.form div:not([id$="_styles"]) > input[type="checkbox"] { order: -1; margin: 0; accent-color: var(--accent); cursor: pointer; }
.form div:not([id$="_styles"]):has(> input[type="checkbox"]) > label { color: var(--text); cursor: pointer; }
.form div:not([id$="_styles"]):has(> input[type="checkbox"]) > .help-text { flex-basis: 100%; padding-left: 28px; }
/* The terms of use (user 27.10.2026): a label over several lines wraps in its own column, the box at its first line. */
.form div.terms-check:not([id$="_styles"]):has(> input[type="checkbox"]) { display: flex; flex-wrap: nowrap; align-items: flex-start; }
.form div.terms-check > input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.form div.terms-check > label { min-width: 0; }
.form input[type="file"] { height: auto; padding: 7px; color: var(--text-2); font-size: 14px; cursor: pointer; }
.form input[type="file"]::file-selector-button { margin-right: 12px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
.form input[type="file"]::file-selector-button:hover { background: var(--surface-3); }
.form .chips-field > div > label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.form input[type="date"], .form input[type="time"] { color-scheme: dark; }

.kpi-link { text-decoration: none; border-color: rgba(255, 79, 123, .4); }
.admin-filters { margin-bottom: 16px; }
.admin-filters input[type="search"] { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 14px var(--font-body); min-width: 280px; }

.engage { display: flex; flex-direction: column; gap: 8px; }
/* The list symbol at each card's top right, with its menu (user 24.10.2026). */
.event-card-shell { position: relative; display: flex; }
.event-card-shell > .event-card { flex: 1; min-width: 0; }
.event-card-shell .event-card-top { padding-right: 34px; }
.list-pick-frame { position: absolute; top: 8px; right: 8px; z-index: 2; }
/* The open menu above the next cards' symbols (they come later in the page and would cover it). */
.list-pick-frame:has(details[open]) { z-index: 30; }
.list-pick { position: relative; }
.list-pick > summary { list-style: none; }
.list-pick > summary::-webkit-details-marker { display: none; }
.list-pick-button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--text-2); background: rgba(20, 16, 25, .55); transition: background .12s ease; }
.list-pick-button:hover, .list-pick[open] .list-pick-button { background: var(--surface-2); }
.list-icon.is-none { color: var(--text-2); }
.list-icon.is-saved { color: #ff4f7b; }
.list-icon.is-interested { color: #ffb547; }
.list-icon.is-going { color: #3ddc97; }
.list-pick-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 6px; border-radius: 12px; background: #241e2f; border: 1px solid var(--line-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); }
.list-pick-menu form { display: grid; }
.list-pick-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 14px/1.2 var(--font-body); text-align: left; cursor: pointer; }
.list-pick-option:hover, .list-pick-option:focus-visible { background: var(--surface-2); }
.list-pick-option.is-chosen { background: rgba(61, 220, 151, .12); }
.list-pick-option.is-chosen::after { content: '✓'; margin-left: auto; color: #3ddc97; }
.list-pick-remove { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--text-2); }
.list-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; color: var(--text-2); font-size: 14px; }
.list-legend span { display: inline-flex; align-items: center; gap: 6px; }
.engage .is-chosen { border-color: #3ddc97; color: #3ddc97; }
@media (max-width: 640px) { .engage { display: grid; grid-template-columns: 1fr 1fr 1fr; } .engage .btn { padding-left: 6px; padding-right: 6px; } .results-map .map { height: 240px; } }
/* Narrow phones and long words ("Du bist dabei ✓", Finnish, Hungarian): the three columns may get narrower than
   their text, which breaks into two lines inside the button (360px stuck out 16px, browser tests 26.10.2026). */
@media (max-width: 640px) { .engage { grid-template-columns: repeat(3, minmax(0, 1fr)); } .engage .btn { height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; white-space: normal; line-height: 1.2; text-align: center; overflow-wrap: break-word; } }
@media (max-width: 400px) { .engage { gap: 6px; } .engage .btn { padding-left: 4px; padding-right: 4px; font-size: 13px; } }
.engage-frame, .follow-frame { display: block; }
.event-actions { display: flex; flex-direction: column; gap: 8px; }
.event-actions .attendees { margin: 4px 0 0; text-align: center; }
.attendees { font-size: 13px; margin: 0 0 12px; }
.follow { margin: 0; }
.saved-section { padding-bottom: 12px; }
/* "Meine Events" as one timeline (user 14.11.2026, draft A): chips for one list, the year and each month across. */
.mine-chips { margin: 0 0 8px; }
.chip-count { opacity: .75; font-variant-numeric: tabular-nums; }
.mine-item { display: contents; }
.mine-timeline > .year-divider, .mine-timeline > .month-divider { grid-column: 1 / -1; }
.mine-timeline > .year-divider { margin: 6px 0 0; }
/* Draft M2: the month on the left, a fine line fading out - a quiet sibling of the year. */
.month-divider { display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.month-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--text-3) 55%, transparent), transparent); }
.empty-state { grid-column: 1 / -1; margin: 0; padding: 22px; border-radius: var(--r-lg); border: 1px dashed var(--line-strong); color: var(--text-2); }
.empty-state a { color: var(--accent); font-weight: 600; text-decoration: none; margin-left: 6px; }

.report-link { text-align: center; font-size: 13px; margin: 0; }
.report-link a, .org-tools a { color: var(--text-3); }
.org-tools { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.link-button { background: none; border: 0; padding: 0; color: var(--text-3); font: inherit; text-decoration: underline; cursor: pointer; }
.report-form [id$="_reason"] { display: flex; flex-direction: column; gap: 8px; }
/* Symfony renders radio + label as siblings: the label becomes the clickable row, with its own circle. */
.report-form [id$="_reason"] { position: relative; }
.report-form [id$="_reason"] input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.report-form [id$="_reason"] label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; }
.report-form [id$="_reason"] label::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); box-sizing: border-box; }
.report-form [id$="_reason"] input:checked + label { border-color: rgba(255, 79, 123, .6); background: var(--accent-soft); }
.report-form [id$="_reason"] input:checked + label::before { border: 5px solid var(--accent); }
.report-form [id$="_reason"] input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.form input[type="radio"] { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }


.lineup-grid { grid-template-columns: minmax(140px, 1fr) 3fr; }
.checkin-grid { grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr; }
.hotel-grid { grid-template-columns: 2fr 1fr; }
.venue-card { margin-bottom: 14px; }
.venue-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.venue-card-address { margin: 4px 0 10px; }
.side-body { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* Phone: two per line (kind | title, date | from, to | extra); wider: kind | title, date | from | to, extra. */
.side-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.side-grid > * { grid-column: span 3; }
@media (min-width: 640px) {
    .side-grid > :nth-child(1), .side-grid > :nth-child(3), .side-grid > :nth-child(4), .side-grid > :nth-child(5) { grid-column: span 2; }
    .side-grid > .side-title { grid-column: span 4; }
}
.hotel-grid > :nth-child(3) { grid-column: 1 / -1; }
.form .row-grid > div.checkin-day.is-single { display: none; }
.checkin-grid:has(> .checkin-day.is-single) { grid-template-columns: 1fr 1fr; }
.lineup-role { font: 700 13px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 14px 0 8px; }
.lineup { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lineup li { border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.lineup a { display: block; padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.lineup a:hover { background: var(--surface-3); }
.tag-role { --st: var(--accent-2); }
.artist-roles { margin-top: 8px; }
.past-events .event-card { opacity: .8; }

.event-cover { width: 100%; border-radius: 22px; object-fit: cover; aspect-ratio: 4 / 5; }
.event-card-cover { width: 112px; height: 112px; flex: none; border-radius: 14px; object-fit: cover; }
.event-card-cover.poster { aspect-ratio: auto; padding: 10px; }
.event-card-cover .poster-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.cover-field { display: flex; flex-direction: column; gap: 8px; }
.cover-preview { max-width: 320px; border-radius: 14px; }
.drop-zone-row { display: flex; flex-direction: column; gap: 6px; }
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; border: 2px dashed var(--line-strong); border-radius: var(--r-md); background: var(--bg-elev); color: var(--text-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone:hover, .drop-zone:focus-visible, .drop-zone.is-over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.drop-zone-hint { font-weight: 600; color: var(--text); }
.drop-zone-sub { font-size: 12.5px; }
.drop-zone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-zone-previews { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.drop-zone.has-files .drop-zone-previews { margin-top: 8px; }
.drop-zone-preview { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 140px; }
.drop-zone-preview img { max-width: 140px; max-height: 100px; border-radius: 8px; object-fit: cover; }
.drop-zone-preview figcaption { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.drop-zone-message { margin: 4px 0 0; color: #ffb3b5; font-size: 12.5px; }
.dress-images { grid-column: span 3; display: flex; flex-direction: column; gap: 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.thumb { position: relative; margin: 0; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.thumb-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #ff5a5f; color: #fff; cursor: pointer; line-height: 1; }
.dress-code { display: block; color: var(--accent-2, #ff8a5c); font-size: 13px; margin-top: 2px; }
.program-grid > :nth-child(8) { grid-column: span 3; }

.links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); text-decoration: none; font-size: 13px; font-weight: 600; }
.link-icon { flex: 0 0 auto; }
/* The brands' own colours on the icons, as people know them. */
.link-facebook .link-icon { color: #1877f2; } .link-instagram .link-icon { color: #e4405f; } .link-tiktok .link-icon { color: #ff0050; }
.link-youtube .link-icon { color: #ff0000; } .link-whatsapp .link-icon { color: #25d366; } .link-telegram .link-icon { color: #26a5e4; }
.link-facebook { color: #8fb2ff; } .link-instagram { color: #ff8ac4; } .link-youtube { color: #ff7a7a; } .link-tiktok { color: #7af0e8; }

.currency-field { max-width: 360px; padding: 12px 14px; border-radius: 14px; background: var(--bg-elev); border: 1px solid rgba(255, 79, 123, .35); }
.amount-field { display: flex; flex-direction: column; gap: 6px; }
.with-suffix { position: relative; }
.with-suffix input { padding-right: 56px; }
.with-suffix .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 13px; color: var(--accent); pointer-events: none; }

.descriptions { display: flex; flex-direction: column; gap: 8px; }
.group-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.small { font-size: 12px; }
.description-grid { grid-template-columns: minmax(160px, 1fr) 3fr; }
.description-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.small-chips .chip { padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
button.chip { border: 1px solid var(--line); }
@media (max-width: 700px) { .description-grid { grid-template-columns: 1fr; } }

/* Imprint and privacy policy: readable line length, plain lists. */
.legal { max-width: 820px; padding-top: 32px; padding-bottom: 48px; }
.legal h1 { font-size: 32px; margin-bottom: 8px; }
.legal h2 { font-size: 19px; margin: 28px 0 10px; }
.legal p, .legal li, .legal address { color: var(--text-2); font-style: normal; line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--accent); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.legal-table th { color: var(--text); }
.legal-table td { color: var(--text-2); }
@media (max-width: 600px) { .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; } .legal-table thead { display: none; } .legal-table td:first-child { color: var(--text); padding-bottom: 0; border: 0; } }

/* Radius search: the centre field with its suggestion list. */
.centre-field { position: relative; flex: 3 1 260px; min-width: 200px; }
.centre-field input { width: 100%; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: 14px var(--font-body); }
.centre-field .suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.event-card-distance { color: var(--accent); font-weight: 600; }
.suggestions:empty { margin: 0; }

/* Profile: blocked organizers with "unblock" */
.blocked-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocked-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); }
.blocked-list a { color: var(--text); text-decoration: none; font-weight: 600; min-width: 0; }
.blocked-list form { flex: none; }

/* Support: new request beside the own tickets, then each ticket as a conversation. */
.support-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; padding-bottom: 48px; }
.support-form [id$="_type"] { display: flex; flex-wrap: wrap; gap: 8px; }
.support-form .chips-field input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ticket-list a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); text-decoration: none; }
.ticket-list a:hover { border-color: var(--line-strong); }
.ticket-list-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.support-thread { display: flex; flex-direction: column; gap: 12px; max-width: 820px; padding-bottom: 48px; }
.ticket-message { padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); max-width: 88%; }
.ticket-message header { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.ticket-message p { margin: 0; color: var(--text-2); }
.ticket-message.is-mine { align-self: flex-end; background: var(--surface-2); }
.ticket-message.is-support { align-self: flex-start; border-color: rgba(255, 79, 123, .35); }
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } .ticket-message { max-width: 100%; } }

/* The event editor on a phone; last in the file so it outweighs the desktop column spans above. */
@media (max-width: 640px) {
    .editor-section.card { padding: 18px 16px; }
    /* A row's fields take the full width; its remove button moves below them. */
    .row-item { flex-wrap: wrap; align-items: stretch; padding: 14px 0; }
    .row-item .row-grid { flex: 1 1 100%; }
    .row-item > .btn { margin-left: auto; }
    .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .program-grid > :nth-child(n), .dress-images { grid-column: 1 / -1; }
    .program-grid > :nth-child(4), .program-grid > :nth-child(5) { grid-column: auto; }
    .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-grid > :nth-child(4) { grid-column: 1 / -1; }
}

/* The event editor's save bar: only once the side card has moved below all sections. */
.form > div.editor-savebar { display: none; }
@media (max-width: 1080px) {
    .form > div.editor-savebar { display: flex; flex-direction: row; gap: 10px; position: sticky; bottom: 0; z-index: 20; margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(13, 10, 18, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
    .editor-savebar { flex-wrap: wrap; }
    .editor-savebar .editor-missing { flex-basis: 100%; margin: 0; }
    .editor-savebar .btn { flex: 1 1 0; }
    /* The calendar's bar of kinds stays above the save bar (more specific: its own rule comes later). */
    .program-calendar .pc-bar { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* News: the bell in the header and the news page. */
.news-bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-2); }
.news-bell:hover, .news-bell[aria-current="page"] { color: var(--text); border-color: var(--line-strong); }
.news-bell turbo-frame { position: absolute; top: -4px; right: -4px; }
.news-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-grad); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.news-page { padding-top: 32px; padding-bottom: 48px; max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.news-item a { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.news-item a:hover { border-color: var(--line-strong); }
.news-item.is-unread a { border-color: rgba(255, 79, 123, .45); }
.news-cover { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; padding: 0; }
.news-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.news-text { color: var(--text-2); font-size: 14px; }
.news-text.is-reminder { color: var(--accent-2, #ff8a5c); font-weight: 600; }
.news-empty { color: var(--text-2); }
.news-settings { margin-top: 24px; }

/* Sign in with Apple / Google (login, sign-up, profile) */
.social-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; color: var(--text-3); font-size: 13px; }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-buttons { display: flex; flex-direction: column; gap: 10px; }
.social-btn { height: 46px; border-radius: var(--r-md); background: #fff; color: #1f1f1f; font-size: 15px; font-weight: 500; }
.social-btn:hover { filter: brightness(.94); }
.social-btn-apple .social-icon { color: #000; }
.social-complete-email { margin: -14px 0 20px; }
.linked-accounts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.linked-account { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); }
.linked-account .social-icon { flex: none; width: 22px; height: 22px; }
.linked-account-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.linked-account-name .muted { font-size: 13px; }
.linked-account form { flex: none; }

/* Tooltip (assets/lib/tooltip.js): data-tooltip="..." on any element, shown at once on hover. */
.tooltip { position: fixed; z-index: 9999; max-width: min(320px, calc(100vw - 8px)); padding: 6px 12px; border-radius: 8px; background: #241e2f; color: #f5f2fa; border: 1px solid rgba(255, 79, 123, .55); box-shadow: 0 0 12px rgba(255, 79, 123, .2), 0 4px 14px rgba(0, 0, 0, .6); font: 500 12px/1.4 var(--font-body, system-ui, sans-serif); white-space: pre-line; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; }
.tooltip.is-visible { opacity: 1; transform: translateY(0); }
.tooltip::after { content: ""; position: absolute; top: 100%; left: var(--tooltip-arrow, 50%); margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(255, 79, 123, .55); }
.tooltip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: rgba(255, 79, 123, .55); }
.program-auto-note { margin: 0 0 6px; font-size: 12px; color: var(--text-3); }
.program-rooms ~ .program-room > .program-legend { margin-top: 10px; }

/* Program editor one day at a time (program_editor_controller, draft P1) */
.form .editor-section.program-editor > div.program-days-bar { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; margin: 4px 0 6px; padding: 2px 0 6px; scrollbar-width: thin; }
.program-day-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.program-day-chip span { font-size: 11px; font-weight: 600; color: #ff8fab; white-space: nowrap; }
.program-day-chip strong { font: 700 14px var(--font-display, var(--font-body)); white-space: nowrap; }
.program-day-chip[aria-selected="true"] { border-color: transparent; background: var(--accent-grad); }
.program-day-chip[aria-selected="true"] span { color: #fff; }
.program-day-heading { margin: 4px 0 0; font-weight: 700; font-size: 16px; }
.program-editor .row-item { border-left: 3px solid var(--k); padding-left: 10px; }
.program-editor.is-enhanced .program-day-field { display: none; }
/* One list per day in time order, every item a line that opens on a tap (user 26.10.2026). */
.program-list-wrap { margin-top: 10px; }
.program-room-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.program-room-tabs[hidden], .program-editor .program-legend[hidden], .program-empty[hidden] { display: none; }
.program-editor .program-legend { margin: 2px 0 2px; }
.program-empty { margin: 8px 0 0; }
.program-add-wrap { align-self: flex-start; margin-top: 6px; }
.program-editor .row-item.program-row { display: block; padding: 0 0 0 10px; }
.form .program-editor .row-item.program-row[hidden] { display: none; }
.program-editor .pc-dialog .row-item.program-row { padding: 0; border: 0; }
.program-summary { display: none; }
.program-editor.is-enhanced .program-summary { display: flex; align-items: center; gap: 6px; min-height: 48px; }
.program-editor.is-enhanced .program-row:not(.is-open) .program-details { display: none; }
.program-editor.is-enhanced .program-row.is-open .program-details { padding: 4px 0 14px; }
.program-details { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.program-details .program-row-delete { align-self: flex-end; }
.program-summary-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border: 0; background: transparent; color: var(--text); font: 600 14px var(--font-body); text-align: left; cursor: pointer; }
.program-summary-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A phone: the title on a line of its own, up to two lines, under time and kind (user 26.10.2026). */
@media (max-width: 640px) {
    .program-summary-text { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
    .program-summary-sep { display: none; }
    .program-summary-meta { color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .program-summary-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
}
.program-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.program-chevron { flex: 0 0 auto; color: var(--text-2); transition: transform .15s; }
.program-row.is-open .program-chevron { transform: rotate(180deg); }
.program-order { display: flex; gap: 4px; }
.program-order-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 700 15px/1 var(--font-body); cursor: pointer; }
.program-order-btn:hover:not(:disabled), .program-order-btn:focus-visible { border-color: var(--accent, #ff4f7b); outline: none; }
.program-order-btn:disabled { opacity: .3; cursor: default; }
.program-row.is-moved { animation: program-moved 1.4s ease-out; }
@keyframes program-moved { from { background: color-mix(in srgb, var(--k) 28%, transparent); } to { background: transparent; } }
.pc-dialog .program-summary { display: none !important; }
/* What the server refused, visible on the closed line, the day chip and the room tab (user 26.10.2026). */
.program-editor.is-enhanced .program-summary { flex-wrap: wrap; }
.program-invalid-mark { display: none; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 90, 95, .2); color: var(--danger, #ff5a5f); font: 700 12px/20px var(--font-body); text-align: center; }
.program-row.is-invalid .program-invalid-mark { display: inline-block; }
.program-editor .row-item.program-row.is-invalid { border-left-color: var(--danger, #ff5a5f); background: rgba(255, 90, 95, .06); }
.program-summary-error { flex-basis: 100%; margin: -6px 0 10px; padding-left: 4px; color: var(--danger, #ff5a5f); font-size: 13px; line-height: 1.4; }
.program-row:not(.is-invalid) .program-summary-error, .program-row.is-open .program-summary-error { display: none; }
.program-day-chip.is-invalid, .program-room-tab.is-invalid { border-color: var(--danger, #ff5a5f); }
.program-day-chip.is-invalid span { color: var(--danger, #ff5a5f); }
.program-day-chip.is-invalid[aria-selected="true"] span, .program-room-tab.is-invalid[aria-selected="true"] { color: #fff; }
.program-room-tab.is-invalid::after { content: '!'; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--danger, #ff5a5f); color: #fff; font: 700 11px/16px var(--font-body); text-align: center; }
.program-day-chip.is-invalid { position: relative; }
.program-day-chip.is-invalid::after { content: '!'; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger, #ff5a5f); color: #fff; font: 700 11px/16px var(--font-body); text-align: center; }
.pc-block.is-invalid { outline: 2px solid var(--danger, #ff5a5f); outline-offset: -2px; }
.editor-refused { margin: 0 0 16px; }
.pc-dialog .program-details { display: flex !important; padding: 0; }
.program-teachers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.program-teacher { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 600 12px var(--font-body); cursor: pointer; }
.program-teacher[aria-pressed="true"] { border-color: transparent; background: #4ea8ff; color: #0d0a12; }
.form .editor-section.program-editor > div.program-days-bar[hidden], .program-day-heading[hidden], .program-teachers[hidden] { display: none; }

/* Program as a calendar day (program_calendar_controller, draft P2) */
.form .editor-section.program-editor > div.program-views { display: inline-flex; flex-direction: row; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.program-views button { padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer; }
.program-views button[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
/* Must outweigh ".form .editor-section > div", which shows every block of the section (user 25.10.2026: the list stayed under the calendar). */
.form .editor-section.program-editor.is-calendar > div.program-list-wrap { display: none; }
/* The rooms already in the program, to pick with one tap instead of the browser's own list (user 25.10.2026). */
.program-room-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.program-room-chips[hidden] { display: none; }
.program-room-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font: 600 12px var(--font-body); cursor: pointer; }
.program-room-chip[aria-pressed="true"] { border-color: transparent; background: var(--accent-grad); color: #fff; }
/* A dress code belongs to parties only (user 25.10.2026). */
.program-row:not(.is-party) .program-dress { display: none; }
.program-row:not(.is-workshop) .program-level { display: none; }
.form .row-grid > div.program-people[hidden] { display: none; }
.form .editor-section.program-editor > div.program-calendar[hidden] { display: none; }
.pc-grid { --pc-hour: 60px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); }
.pc-head, .pc-body { display: grid; grid-template-columns: 52px repeat(var(--pc-cols, 1), minmax(140px, 1fr)) minmax(96px, .55fr); min-width: min-content; }
.pc-head { position: sticky; top: 0; z-index: 3; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.pc-head[hidden] { display: none; }
.pc-room { margin: 6px 4px; padding: 6px 8px; line-height: normal; box-sizing: border-box; border: 1px dashed transparent; border-radius: 8px; background: none; color: var(--text); font: 700 13px var(--font-body); text-align: left; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-room:hover { border-color: var(--line-strong); }
.pc-room-edit { margin-left: 6px; opacity: .55; font-weight: 400; }
.pc-room.is-unnamed { color: var(--text-3); cursor: default; }
/* Exactly the name button's size, so the calendar does not jump while renaming (user 25.10.2026); outweighs ".form input". */
.form .pc-room-input:not([type="checkbox"]) { margin: 6px 4px; width: calc(100% - 8px); min-width: 0; height: auto; padding: 6px 8px; border-radius: 8px; border: 1px dashed var(--accent); background: var(--surface-2); color: var(--text); font: 700 13px var(--font-body); line-height: normal; box-sizing: border-box; outline: none; }
.pc-body { position: relative; }
.pc-hours { position: relative; border-right: 1px solid var(--line); }
.pc-hours span { position: absolute; left: 0; right: 8px; margin-top: 4px; text-align: right; font-size: 11px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pc-col { position: relative; border-right: 1px solid var(--line); background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--pc-hour)); }
.pc-parallel { border: 1px dashed var(--line-strong); border-radius: 10px; margin: 4px; background: none; }
.pc-parallel span { position: sticky; top: 52px; display: block; padding: 10px 8px; font-size: 12px; color: var(--text-3); text-align: center; }
.pc-block { position: absolute; left: 4px; right: 4px; padding: 6px 8px 10px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--k) 22%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); border-left: 3px solid var(--k); cursor: grab; touch-action: none; user-select: none; font-size: 12px; line-height: 1.3; }
.pc-block strong { display: block; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-block > span:not(.pc-resize) { display: block; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-block.is-dragging { z-index: 5; cursor: grabbing; opacity: .9; box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
.pc-block.is-collision { border-color: #ff4f7b; background: repeating-linear-gradient(135deg, rgba(255, 79, 123, .22) 0 8px, rgba(255, 79, 123, .1) 8px 16px); }
.pc-block.pc-shadow { opacity: .35; border-style: dashed; border-left-style: solid; pointer-events: none; box-shadow: none; }
.pc-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; }
.pc-resize::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: color-mix(in srgb, var(--k) 70%, #fff); opacity: .7; }
.pc-help { margin: 8px 0 0; }
.pc-bar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 10px 0; background: var(--surface); }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 16%, var(--surface-2)); color: var(--text); font: 600 13px var(--font-body); cursor: grab; touch-action: none; user-select: none; }
.pc-chip span { color: var(--k); }
.pc-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 12px 26px rgba(0, 0, 0, .5); cursor: grabbing; }
.pc-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elev); color: var(--text); }
.pc-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.pc-dialog .row-item { border: 0; padding: 0; margin: 0 0 14px; }
.pc-dialog .program-day-field { display: none; }

/* Event page: sections fold at their heading (collapsible_sections_controller) */
.section-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.section-chevron { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); transition: transform .15s ease; }
section.is-folded .section-chevron { transform: rotate(-45deg); }
section.is-folded > :not(h2):not(.description-head), section.is-folded > .description-head > :not(h2):not(.section-chevron) { display: none; }
section.is-folded > h2, section.is-folded > .description-head { margin-bottom: 0; }
/* Description: title, language chips, chevron - the chevron in its own column at the right edge, so folding (which
   hides the chips) does not move it; the chips wrap within their column (user 04.11.2026). */
.description-head:has(> .section-chevron) { display: grid; grid-template-columns: minmax(max-content, 1fr) auto auto; align-items: center; column-gap: 12px; }
.description-head > h2 { flex: 1; min-width: 0; grid-column: 1; }
.description-head > nav { grid-column: 2; justify-content: flex-end; }
.description-head > .section-chevron { grid-column: 3; margin-left: 0; cursor: pointer; }
/* Narrow cards (phones): the chips get their own row under the title; the chevron stays top right. */
section[data-section="description"] { container-type: inline-size; }
@container (max-width: 460px) {
    .description-head > nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin-top: 6px; }
    .description-head > .section-chevron { grid-row: 1; }
}
.side-event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.side-event { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.side-event-title { font-size: 15px; }
.side-event-when { font-weight: 600; color: var(--text-2); }
.side-event-place, .side-event-price { font-size: 14px; }
.side-event-route { font-size: 13.5px; font-weight: 600; }
.check-in-days { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.check-in-days dt { color: var(--text-2); }
.check-in-days dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 600; }
.stay-hotels { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stay-hotel { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text); text-decoration: none; }
/* A hotel (phase 82): name (to its booking page), "Festivalhotel", how far, address, the ways into Google Maps. */
.stay-hotel { flex-direction: column; justify-content: flex-start; gap: 2px; }
.stay-hotel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stay-hotel-name { font-weight: 700; color: var(--text); }
a.stay-hotel-name { text-decoration: none; }
a.stay-hotel-name::after { content: " \2197"; color: var(--accent); }
a.stay-hotel-name:hover { text-decoration: underline; }
.stay-hotel-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 14px; }
.stay-hotel-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.stay-hotel-links a:hover { text-decoration: underline; }
.stay-line { margin: 6px 0 0; color: var(--text-2); }
/* The flight line (phase 57, draft F1): like a hotel row, the price on the right in the accent. */
.stay-flight { margin: 0 0 8px; align-items: center; }
.stay-flight > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.stay-flight-price { color: var(--accent); font-weight: 700; white-space: nowrap; }
.stay-flight-guide { margin: -4px 0 10px; }
.stay-line strong { color: var(--text); }

/* Program kinds of an organizer (draft B1) */
.program-types-head { margin: 22px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.program-types { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.program-type { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.program-type > strong { flex: 1; }
.program-type-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--k); flex: none; }
.program-type-lock { font-size: 12px; }
.program-type-form { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.program-type-form input[type="text"] { flex: 1 1 140px; min-width: 0; height: 38px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 14px var(--font-body); }
.program-type-delete { color: #ff8a8e; }
.program-type-new { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.program-type-new h2 { margin: 0; font-size: 16px; }
.color-choice { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.color-swatch { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--c); cursor: pointer; }
.color-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.color-swatch:has(input:checked) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px #fff; }
.color-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Support pictures (user 24.10.2026): thumbs under a message, large in a lightbox. */
.ticket-pictures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ticket-picture { display: block; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ticket-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .86); }
dialog.lightbox img { display: block; max-width: 94vw; max-height: 90vh; border-radius: 10px; }
.lightbox-close { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

.drop-zone-preview { position: relative; }
.drop-zone-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .8); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }

/* Name with its pencil (user 25.10.2026), as in the app. */
.profile-head-name-row { display: flex; align-items: center; gap: 6px; }
.profile-name-edit { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; padding: 0; }
.profile-name-edit:hover { color: var(--text); border-color: var(--line-strong); }
.name-dialog { width: min(440px, 92vw); }
.name-dialog .form > .crop-actions { flex-direction: row; justify-content: flex-end; gap: 8px; }
.name-dialog .form > .crop-actions .btn { width: auto; }

/* The own choice list (user 25.10.2026): about ten entries show, the rest scrolls; a search on top. */
.pick-list { position: relative; width: 100%; }
.pick-list-button { width: 100%; height: 40px; padding: 0 36px 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='none' stroke='%23999' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--text); font: 15px var(--font-body); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.pick-list-search { width: 100%; height: 38px; margin-bottom: 6px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text); font: 14px var(--font-body); }
.pick-list-options { position: relative; list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.pick-list-options li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 20px; }
.pick-list-options li:hover, .pick-list-options li.is-active { background: var(--surface-2); }
.pick-list-options li[aria-selected="true"] { color: var(--accent); font-weight: 600; }
/* A list that ticks several (phase 72, draft S2): a box before each entry. */
.pick-list-options li.is-tick { display: flex; align-items: center; gap: 10px; }
.pick-list-options li.is-tick::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-strong); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.pick-list-options li.is-tick[aria-selected="true"] { color: var(--text); }
.pick-list-options li.is-tick[aria-selected="true"]::before { content: '\2713'; content: '\2713' / ''; background: var(--accent-grad); border-color: transparent; }
.pick-list-button.is-invalid { border-color: var(--danger, #ff5a5f); }
.pick-list-button:disabled { opacity: .5; cursor: not-allowed; }
.filter-row .pick-list { flex: 1 1 130px; width: auto; min-width: 0; }
.filter-row .pick-list-button { height: 42px; }
.searchbar-field .pick-list-button { height: auto; padding: 2px 20px 2px 0; border: 0; background-color: transparent; background-position: right 0 center; font: 600 15px var(--font-body); }
.pick-list-options li.pick-list-group { padding: 12px 10px 4px; color: var(--text-3); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: default; }
.pick-list-options li.pick-list-group:hover { background: none; }
.pick-list-options li.in-group { padding-left: 24px; }
.pick-list-options li.is-group-all { font-weight: 600; }
.pick-list-options[data-empty]:not([data-empty=""])::after { content: attr(data-empty); display: block; padding: 8px 10px; color: var(--text-3); font-size: 14px; }

/* Entered by the community, not checked yet (user 25.10.2026). */
.tag-unverified { background: rgba(255, 196, 0, .14); border-color: rgba(255, 196, 0, .5); color: #ffcf4d; }
.community-form-wrap { max-width: 640px; }
/* "Du willst Events veranstalten?" (user 27.10.2026). */
.organize-start { display: flex; flex-direction: column; gap: 12px; }
.organize-start p { margin: 0; }
.organize-start-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.community-same { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid rgba(255, 196, 0, .5); background: rgba(255, 196, 0, .08); }
.community-same h2 { margin: 0 0 4px; font-size: 18px; }
.community-same-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.community-same-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* Both answers as wide as the card, "Nein" clearly outlined on the yellow (user 03.11.2026, app and web alike). */
.community-same-list li .btn { flex: 1 0 100%; justify-content: center; text-align: center; }
.community-same > .btn { width: 100%; justify-content: center; text-align: center; border-color: var(--text-2); border-width: 1.5px; color: var(--text); }

/* Community entries: each reporter's few words (user 25.10.2026). */
.community-note + .community-note { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.community-note .description { margin: 4px 0 0; }
/* "Felder ausfüllen | Text und Bilder" (user 25.10.2026, draft D2). */
.community-tabs { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; margin: 14px 0 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); max-width: 100%; }
.community-tabs a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 20px; border-radius: 999px; color: var(--text-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.community-tabs a:hover { color: var(--text); }
.community-tabs a[aria-current="page"] { background: var(--accent-grad); color: #fff; }
.quick-read-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(61, 214, 140, .1); color: #9ef0c4; font-size: 14px; line-height: 1.45; max-width: 760px; }
.read-row-label { display: flex; align-items: center; gap: 8px; }
.read-tag { padding: 2px 8px; border-radius: 999px; background: rgba(77, 163, 255, .16); color: #9cc9ff; font-size: 11px; font-weight: 600; }
.quick-more { border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 10px 14px; }
.quick-more > summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.quick-more[open] > summary { margin-bottom: 12px; }
.quick-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 20px; }
.quick-wait-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent, #ff4f7b); animation: quick-spin 1s linear infinite; }
@keyframes quick-spin { to { transform: rotate(360deg); } }
.quick-form textarea { min-height: 260px; line-height: 1.5; }
.quick-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 176, 32, .1); color: #ffcf7a; font-size: 14px; line-height: 1.45; }
/* "Dein Eintrag" (user 25.10.2026): what a reporter fixes themselves. */
.community-mine { border-color: rgba(255, 79, 123, .35); }
.community-mine > p { margin: 4px 0 12px; }
.community-mine-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.community-mine-styles form { margin: 0; }
.tag-removable { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.tag-x { width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: inherit; font-size: 11px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tag-x:hover { background: rgba(255, 90, 95, .55); color: #fff; }
.community-mine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.community-mine-actions form { margin: 0; }

/* The program item in its dialog (user 25.10.2026): delete on the left as a clear danger button, "Fertig" on the right. */
.pc-dialog-actions { display: flex; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.pc-dialog-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 600 20px/1 var(--font-body); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.pc-dialog-close:hover, .pc-dialog-close:focus-visible { border-color: var(--danger, #ff5a5f); color: var(--danger, #ff5a5f); outline: none; }
.pc-dialog-body { padding-top: 22px; }
.pc-dialog .program-row-delete { position: absolute; left: 18px; bottom: 18px; }

/* Saved venues, compact (user 25.10.2026): text with a pencil, the field only while editing. */
.venue-row { padding: 12px 16px; margin-bottom: 8px; display: grid; gap: 4px; }
.venue-view { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.venue-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The fields only while editing: the display above must not undo [hidden] (user 25.10.2026 saw them all the time). */
.venue-view[hidden], .venue-edit[hidden] { display: none; }
.icon-save { color: var(--success, #3dd68c); font-weight: 700; }
.venue-edit input[type="text"], .venue-edit input[type="search"] { flex: 1 1 220px; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--text); font: inherit; }
.venue-edit-address { display: grid; gap: 8px; }
.venue-edit-address [data-place-search-target="newVenue"] { display: grid; gap: 6px; }
.venue-edit-buttons { display: flex; gap: 8px; }
.icon-btn { border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 8px; font-size: 15px; line-height: 1; opacity: .75; }
.icon-btn:hover { opacity: 1; background: var(--surface); }

/* Times in narrow columns (user 25.10.2026: "20:0" instead of "20:30"): less padding, digits of equal width,
   so "23:15" fits next to the clock button. */
.form input[type="time"] { padding-left: 10px; padding-right: 6px; font-variant-numeric: tabular-nums; min-width: 6.4rem; }
/* Wide screens only: last in the file, it outweighed the phone's two columns, and three columns of 6.6rem stuck
   out of a 360px phone (browser test, 26.10.2026). */
@media (min-width: 641px) {
    .program-grid { grid-template-columns: repeat(3, minmax(6.6rem, 1fr)); }
}

/* Dancyra's own error pages (user 26.10.2026, draft F3): the well-known big number in the accent, one line, two ways on. */
.error-page { max-width: 420px; margin: 0 auto; padding: 56px 16px 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.error-code { margin: 0; font: 800 clamp(96px, 30vw, 140px)/1 var(--font-head); letter-spacing: -.04em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page h1 { margin: 0; font: 700 26px/1.25 var(--font-head); text-wrap: balance; }
.error-lead { margin: 0; max-width: 320px; color: var(--text-2); }
.error-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }

/* The birth date as day, month and year in our own pick lists (user 26.10.2026), side by side, the year widest. */
.birth-date-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.3fr); gap: 8px; }
.birth-date-parts .pick-list, .birth-date-parts .pick-list-button { width: 100%; min-width: 0; }

/* "Warten auf dein OK" (draft O1, user 27.10.2026): the sender's read posts above the quick-entry form. */
.quick-waiting { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; border-color: rgba(255, 201, 77, .45); }
.quick-waiting p { margin: 0; }
.quick-waiting-head { display: flex; align-items: center; gap: 8px; }
.quick-waiting-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ffc94d; color: #1b1624; font-weight: 800; font-size: 12px; }
.quick-waiting-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.quick-waiting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quick-waiting-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-waiting-go, .quick-waiting-more { font-weight: 700; font-size: 13px; color: #ff8fab; white-space: nowrap; }
.quick-waiting-more { padding-top: 8px; border-top: 1px solid var(--line); text-decoration: none; }

/* A community event's standing (user 27.10.2026, drafts T2/T4): unconfirmed, confirmed (green), doubt (yellow). */
.standing { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 18px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); }
.standing.is-confirmed { border-color: rgba(61, 214, 140, .4); }
.standing.is-doubt { border-color: rgba(255, 138, 107, .45); }
.standing p { margin: 0; }
.standing-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.standing-vote { display: flex; flex-direction: column; gap: 8px; }
.standing-choice, .standing-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.standing-choice[hidden], .standing-reasons[hidden] { display: none; }
/* The question on a line of its own, the answers below it, as in the app (07.11.2026). */
.standing-choice > span.small { flex-basis: 100%; }
/* "Nein" opens its reasons in the box (user 07.11.2026, draft G1); a tap on one sends it. */
.standing-reasons-ask { flex-basis: 100%; font-weight: 600; color: var(--text-2); }
.standing-reasons-list { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.standing-reasons-list .chip { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); padding: 6px 12px; }
.standing-reasons-list .chip:hover { border-color: rgba(255, 138, 107, .55); color: #ff8a6b; }
.standing-vote .standing-yes { background: rgba(61, 214, 140, .16); color: #3dd68c; border: 0; }
.standing-vote .is-chosen { outline: 2px solid currentColor; outline-offset: 1px; }
/* The answer given stays marked but cannot be sent again; the line below it offers to take it back (user 03.11.2026). */
.standing-vote .is-chosen:disabled { cursor: default; }
.standing-vote .standing-mine { flex-basis: 100%; margin: 2px 0 0; }
.standing-mine .link-button { margin-left: 6px; }
.tag-standing { font-weight: 700; }
.tag-standing.is-unconfirmed { background: var(--surface-2); color: var(--text-2); }
.tag-standing.is-confirmed { background: rgba(61, 214, 140, .14); color: #3dd68c; }
.tag-standing.is-doubt { background: rgba(255, 138, 107, .16); color: #ff8a6b; }
/* "Mit Vorsicht genießen" (user 27.10.2026, drafts U1/U4): amber while unconfirmed, orange-red for a doubt. */
.standing-notice { --notice: #ffb547; display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-lg); background: rgba(255, 181, 71, .09); border: 1.5px solid rgba(255, 181, 71, .5); }
.standing-notice.is-doubt { --notice: #ff8a6b; background: rgba(255, 138, 107, .10); border-color: rgba(255, 138, 107, .5); }
.standing-notice-icon { flex-shrink: 0; color: var(--notice); }
.standing-notice div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.standing-notice strong { color: var(--notice); font-size: 16px; }
.standing-notice span { color: var(--text); font-size: 14px; }

/* A reporter asked whether their event in doubt still takes place (user 27.10.2026). */
.community-mine-ask { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(255, 201, 77, .45); background: rgba(255, 201, 77, .06); }
.community-mine-ask p { margin: 0; }
.community-mine-ask .standing-yes { align-self: flex-start; background: rgba(61, 214, 140, .16); color: #3dd68c; border: 0; }

/* The Pinnwand (phase 50, drafts W1/P3-P6). */
.pinboard { display: flex; flex-direction: column; gap: 12px; }
.pinboard-head { display: flex; align-items: center; gap: 12px; }
.pinboard-head h2 { flex: 1; margin: 0; }
.pinboard > p { margin: 0; }
.pin-counters { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-counters .chip { text-decoration: none; }
.pin-counters .chip.is-on { background: rgba(255, 79, 123, .16); border-color: rgba(255, 79, 123, .5); }
.pin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pin-entry, .pin-detail { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.pin-entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pin-icon { font-size: 20px; }
.pin-title { flex: 1; min-width: 0; font-size: 15px; margin: 0; }
h1.pin-title { font-size: 22px; }
.pin-sharing { color: #cdb8ff; }
.pin-note { margin: 0; white-space: pre-line; }
.pin-entry-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.pin-who { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; margin: 0; }
.pin-name-change { padding: 10px 12px; border-radius: 12px; background: rgba(255, 176, 32, .1); color: #ffcf7a; line-height: 1.45; }
.pin-warning { padding: 10px 12px; border-radius: 12px; background: rgba(255, 90, 95, .1); color: #ff9b9e; margin: 0; }
.pin-page { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.pin-page h1 { margin: 0; }
.pin-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pin-kind { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-decoration: none; color: var(--text); font-size: 13px; }
.pin-kind span { font-size: 22px; }
.pin-kind.is-on { border-color: rgba(255, 79, 123, .6); background: rgba(255, 79, 123, .08); }
@media (max-width: 560px) { .pin-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pin-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.pin-form input:not([type="radio"]), .pin-form textarea { width: 100%; box-sizing: border-box; }
.pin-label { font-weight: 600; font-size: 14px; }
.pin-sublabel { color: var(--text-2); }
.pin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-chip { cursor: pointer; }
.pin-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pin-chip:has(input:checked) { background: rgba(255, 79, 123, .16); border-color: rgba(255, 79, 123, .6); }
.pin-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-days { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.pin-day { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: var(--surface-2); color: var(--text-3); font-size: 11px; cursor: pointer; }
.pin-day input { position: absolute; opacity: 0; pointer-events: none; }
.pin-day.is-festival { outline: 1px solid rgba(255, 138, 92, .6); }
.pin-day:has(input:checked) { background: rgba(255, 79, 123, .25); color: #fff; }
.pin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pin-pair label { display: flex; flex-direction: column; gap: 6px; }
.pin-gender { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid rgba(180, 140, 255, .35); background: rgba(180, 140, 255, .06); }
.pin-requests, .pin-manage, .pin-ask, .pin-mine-request { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.pin-requests h2, .pin-manage h2, .pin-ask h2, .pin-mine-request h2 { margin: 0; font-size: 17px; }
.pin-request { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.pin-request p, .pin-mine-request p { margin: 0; }
.pin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-actions form, .pin-manage form { margin: 0; }
.pin-accepted { color: var(--ok, #3ddc97); }
.pin-contact { color: var(--text); }
.pin-end { display: flex; flex-direction: column; gap: 8px; }
.pin-mine-entry { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-decoration: none; color: var(--text); }

/* A big festival's numbers and programme at a glance in the editor (phase 48, draft WR6). */
.festival-overview { display: grid; gap: 14px; margin-bottom: 16px; }
.festival-overview h2 { margin: 0; }
.festival-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.festival-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2, rgba(255, 255, 255, .04)); }
.festival-stat strong { font-size: 22px; }
.festival-program { display: grid; gap: 10px; }
.festival-program-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.festival-legend { color: var(--k); }
.festival-grid { display: grid; grid-template-columns: 80px repeat(var(--rooms), minmax(0, 1fr)); gap: 8px 10px; align-items: center; overflow-x: auto; }
.festival-room { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.festival-day { font-weight: 600; }
.festival-bar { position: relative; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .06); }
.festival-bar i { position: absolute; top: 0; bottom: 0; border-radius: 7px; background: var(--k); }
.festival-warn { margin: 0; color: #ffcf7a; }

/* Schools and shops still there? (phase 53, drafts VO-1 to VO-3). */
.place-check { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.place-check p, .place-check h2 { margin: 0; }
.place-check h2 { font-size: 1.15rem; }
.place-check-done { color: #3ddc97; font-weight: 600; }
.place-check-confirmed { color: var(--text); }
.place-check-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.place-check .alert { margin: 0; }
.alert-warning { background: rgba(255, 201, 77, .08); border-color: rgba(255, 201, 77, .35); color: var(--text); }
.alert-warning strong { color: #ffc94d; }

/* The filters in use as chips (draft FR-1, user 30.10.2026). */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 138, 92, .5); background: rgba(255, 138, 92, .1); color: var(--text); font-size: 13px; text-decoration: none; }
.filter-chip:hover { border-color: var(--accent-2); }
.filter-chip-x { color: var(--accent-2); font-size: 16px; line-height: 1; }
.filter-chips-reset { margin-left: 4px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); text-decoration: none; }
.filter-chips-reset:hover { text-decoration: underline; }
/* One chip per kind of filter with its sign (user 14.11.2026, draft F2): ♫ styles, 🎟 types, 📅 when, 📍 place. */
.filter-chip-sign { font-size: 13px; line-height: 1; }
.filter-chip-label { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Meine Suchen" (draft S1): a row to scroll sideways above the filters. */
.saved-searches { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.saved-searches::-webkit-scrollbar { display: none; }
.saved-searches-label { flex: none; font-size: 13px; color: var(--text-2); }
.saved-search { flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.saved-search a { padding: 6px 4px 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.saved-search form { display: contents; }
.saved-search-x { border: 0; background: none; color: var(--text-3); font-size: 16px; padding: 4px 10px 4px 4px; cursor: pointer; }
.saved-search.is-on { background: var(--accent-grad); border-color: transparent; }
.saved-search.is-on a, .saved-search.is-on .saved-search-x { color: #fff; }
.saved-search-add { flex: none; position: relative; }
.saved-search-add > summary { list-style: none; cursor: pointer; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.saved-search-add > summary::-webkit-details-marker { display: none; }
.saved-search-form { display: flex; gap: 8px; margin-top: 8px; }
.saved-search-form input[type="text"] { min-width: 0; width: 220px; }
/* Folded on a phone (draft K2): one line that says what is filtered; the rest slides away. */
.filter-fold-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.filter-fold-body > div { min-height: 0; overflow: hidden; }
.filter-fold.is-folded .filter-fold-body { grid-template-rows: 0fr; opacity: 0; }
.filter-fold.no-motion .filter-fold-body { transition: none; }
.filter-fold-line { display: flex; width: 100%; align-items: center; gap: 8px; border: 1px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--text); padding: 9px 12px; font: inherit; font-size: 14px; text-align: left; cursor: pointer; margin-bottom: 4px; }
.filter-fold-line[hidden] { display: none; }
.filter-fold-line span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-fold-line b { color: var(--accent); white-space: nowrap; font-size: 13px; }
@media (min-width: 641px) { .filter-fold-line { display: none !important; } .filter-fold-body { grid-template-rows: 1fr !important; opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .filter-fold-body { transition: none; } }

/* Confirming the phone number (phase 54, drafts PH-2/PH-3): country beside the number, the ways as cards, a big code. */
.phone-number { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 8px; }
.phone-channels { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.phone-channels legend { margin-bottom: 6px; font-weight: 600; }
.phone-channel input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.phone-channel { flex-direction: row; align-items: center; gap: 12px; }
.phone-channel:has(input:checked) { border-color: var(--accent); }
.phone-way-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.phone-way-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.phone-way-recommended { color: var(--ok, #3ddc97); font-size: 12px; font-weight: 600; white-space: nowrap; }
/* The ways follow the country (draft T1, user 02.11.2026); hidden ones must stay hidden despite display rules. */
.phone-channel[hidden], .phone-channels[hidden], .phone-only-way[hidden] { display: none; }
.phone-way-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; }
.phone-way-sms { background: var(--surface-3); color: var(--text-2); }
.phone-only-way { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 12px; border-radius: 14px; background: rgba(42, 171, 238, .1); border: 1px solid rgba(42, 171, 238, .35); font-size: 14px; }
.phone-only-way-line { display: flex; align-items: center; gap: 10px; }
.phone-only-way-line[hidden] { display: none; }
.phone-only-way svg { flex: none; }
.phone-sms-mark { font-size: 15px; }
.phone-code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.phone-code-paste { display: block; margin: 6px 0 0 auto; }
/* The other one's friend request above the chat (user 08.11.2026, draft A). */
.chat-friend-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line-strong, rgba(255,255,255,.14)); border-radius: 14px; background: var(--surface-2, #241e2f); }
.chat-friend-bar .chat-friend-text { flex: 1; min-width: 0; font-size: .9rem; }
.chat-friend-bar form { margin: 0; }
.phone-code-paste[hidden], .phone-code-none[hidden] { display: none; }
.phone-code-none { display: block; color: var(--danger, #ff5a5f); margin-top: 4px; }
.phone-code-more { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 420px) {
    .phone-number { grid-template-columns: 1fr; }
}

/* "Telefon bestätigt" (phase 54, draft PH-5): small and green, says what was checked. */
.phone-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(61, 214, 140, .12); color: #9ef0c4; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.pin-phone-gate h2 { margin-top: 0; }
.phone-hint { margin-left: 8px; color: var(--text-2); font-size: 13px; white-space: nowrap; }

/* The round "+" to enter a missing event (draft P1, user 02.11.2026): small, bottom right, a tip the first time. */
.add-fab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: flex-end; gap: 10px; }
.add-fab { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 300; line-height: 1; text-decoration: none; box-shadow: 0 6px 18px rgba(255, 79, 123, .35); }
.add-fab:hover { filter: brightness(1.08); }
.add-fab-hint { position: relative; max-width: 220px; background: #fff; color: #1a1420; border-radius: 14px; padding: 10px 12px 6px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.add-fab-hint[hidden] { display: none; }
/* "Seite übersetzen" at the top of an event page (phase 82) and its first-time hint above it, arrow down to it. */
.page-translate { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.page-translate .translate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.page-translate-hint { position: relative; max-width: 300px; background: #fff; color: #1a1420; border-radius: 14px; padding: 10px 12px 6px; font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.page-translate-hint[hidden] { display: none; }
.page-translate-hint::after { content: ""; position: absolute; left: 24px; bottom: -7px; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; }
.add-fab-hint::after { content: ""; position: absolute; right: -7px; bottom: 16px; border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
.add-fab-ok { align-self: flex-end; margin-top: 4px; border: 0; background: none; color: var(--accent); font: 700 13px var(--font-body, inherit); cursor: pointer; padding: 4px 0; }
@media (max-width: 640px) { .add-fab-wrap { right: 14px; bottom: 14px; } }

/* The next page of the search list while scrolling (draft L1, user 02.11.2026). */
.search-chunk { display: contents; }
.load-more { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0; }
.load-more-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: load-more-spin .8s linear infinite; }
@keyframes load-more-spin { to { transform: rotate(360deg); } }

/* The organizer explanation and the tip on "Neues Event" (draft V1, user 02.11.2026). */
.organizer-guide { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px 20px; margin: 0 0 20px; }
.organizer-guide[hidden], .organizer-tip[hidden] { display: none; }
.organizer-guide h2 { margin: 0 0 4px; font-size: 20px; }
.organizer-guide-steps { margin: 12px 0; padding: 0; list-style: none; counter-reset: guide; display: flex; flex-direction: column; gap: 10px; }
.organizer-guide-steps li { counter-increment: guide; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; }
.organizer-guide-steps li::before { content: counter(guide); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.organizer-guide-steps span { color: var(--text-2); font-size: 14px; }
.organizer-guide-ai { background: rgba(255, 138, 92, .1); border: 1px solid rgba(255, 138, 92, .35); border-radius: 12px; padding: 10px 12px; color: var(--text-2); font-size: 14px; }
.organizer-guide-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.organizer-tip { display: flex; flex-direction: column; gap: 6px; background: rgba(255, 79, 123, .1); border: 1px solid rgba(255, 79, 123, .35); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; color: var(--text-2); font-size: 14px; }
.organizer-tip .link-button { align-self: flex-end; font-weight: 700; color: var(--accent); }

/* "Original auf Spanisch · Auf Deutsch übersetzen" (phase 63, draft A). */
.translate-line .link-button { color: var(--accent); font-weight: 600; text-decoration: none; }
.translate-line .link-button.translate-failed { color: #ff8a6b; font-weight: 400; cursor: default; }

/* The bell "Bei neuen Pässen melden" beside "Preise" (phase 65, draft A). */
.prices-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prices-head > span { flex: 1; }
/* Folding: the title takes the free room, then the bell as its own button, then the chevron at the right edge. On a
   narrow card the bell moves under the title; the chevron stays top right (user 04.11.2026). */
.prices-head > .section-toggle { flex: 1; width: auto; min-width: 0; }
.prices-head:has(> .section-chevron) { display: grid; grid-template-columns: minmax(max-content, 1fr) auto auto; column-gap: 12px; }
.prices-head > .section-chevron { grid-column: 3; margin-left: 0; cursor: pointer; }
#prices { container-type: inline-size; }
@container (max-width: 340px) {
    .prices-head > .pass-watch-form { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
    .prices-head > .section-chevron { grid-column: 3; grid-row: 1; }
}
.pass-watch-form { margin: 0; }
.pass-bell { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; font: 600 13px/1.2 var(--font-body); color: var(--text); background: var(--surface); cursor: pointer; white-space: nowrap; }
.pass-bell:hover { border-color: rgba(255, 79, 123, .5); }
.pass-bell.on { background: var(--accent-soft); border-color: rgba(255, 79, 123, .5); color: #ffd0dc; }
.pass-watch-done { margin: -4px 0 10px; font-size: 13px; }

/* Store badges (phase 66): the official pictures at one height. Google's PNG carries a transparent margin of 29 of
   its 250 pixels above and below, so it is drawn taller and pulled back by that margin. */
.store-badges { --badge-h: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.store-badges.big { --badge-h: 54px; justify-content: center; }
.store-badge { display: inline-flex; line-height: 0; border-radius: 9px; }
.store-badge img { display: block; height: var(--badge-h); width: auto; }
.store-badge-android img { height: calc(var(--badge-h) * 250 / 192); margin: calc(var(--badge-h) * -29 / 192) 0; }
.footer-app .store-badges { flex-direction: column; align-items: flex-start; gap: 8px; }
/* The phone menu's "App laden" line: the store name small on the right, greyed while Google Play is not public. */
.nav-menu-panel > .nav-menu-app { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 4px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); }
.nav-menu-app small { color: var(--text-3); font-weight: 500; font-size: 13px; }
/* "Dancyra als App" on the start page; the QR code only on a computer. */
.app-band { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 32px 40px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.app-band h2 { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 6px; }
.app-band .muted { margin: 0; }
.app-band-list { list-style: none; margin: 12px 0 20px; padding: 0; color: var(--text-2); }
.app-band-list li { margin: 6px 0; padding-left: 24px; position: relative; }
.app-band-list li::before { content: '\2713'; position: absolute; left: 0; color: #3ecf8e; font-weight: 700; }
.app-qr { margin: 0; padding: 12px; border-radius: 16px; background: #fff; color: #15101d; text-align: center; font-size: 12.5px; font-weight: 600; }
.app-qr svg { display: block; width: 168px; height: 168px; margin: 0 auto 6px; }
@media (max-width: 760px) { .app-band { grid-template-columns: 1fr; padding: 24px; } .app-band-qr { display: none; } }
/* The page after a QR scan (draft B). */
.app-page { padding: 32px 0 48px; }
.app-page-phone { max-width: 420px; margin: 0 auto; text-align: center; }
.app-page h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
.app-page h1 em { font-style: normal; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app-page-lead { color: var(--text-2); margin: 10px 0 18px; }
.app-shots { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; }
.app-shots img { width: 30%; max-width: 116px; height: auto; border-radius: 14px; border: 1px solid var(--line-strong); }
.app-shots img:nth-child(2) { transform: translateY(-8px); }
.app-benefits { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; color: var(--text-2); font-size: 14.5px; }
.app-benefits li { display: flex; align-items: flex-start; gap: 10px; margin: 9px 0; }
.app-benefits li span { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--accent-soft); font-size: 14px; }
.app-page-alt { margin: 14px 0 4px; color: var(--text-3); font-size: 13.5px; }
.app-page-alt a { color: var(--text-2); }
.app-page-browser { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 600; text-decoration: none; }
.app-page-desk { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; max-width: 960px; margin: 24px auto; }
.app-page-desk .store-badges.big { justify-content: flex-start; }
@media (max-width: 760px) { .app-page-desk { grid-template-columns: 1fr; } }

/* Two addresses for one place (user 03.11.2026, draft A): above the address field, both lines, the person decides. */
.address-check { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .1); font-size: 14px; }
.address-check strong { display: block; color: #ffb547; margin-bottom: 4px; }
.address-check ul { margin: 4px 0 0; padding-left: 18px; color: var(--text); }
.address-check li { margin: 2px 0; }

/* "Neuigkeiten" shorter (user 04.11.2026, draft A): comments folded, more in steps of ten, a day's changes in one line. */
.news-comments > summary.news-comments-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; cursor: pointer; list-style: none; }
.news-comments > summary::-webkit-details-marker { display: none; }
.news-comments[open] > summary.news-comments-toggle { color: var(--text); border-color: rgba(255, 79, 123, .5); }
.news-more { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; }
.news-more:hover { color: var(--text); border-color: var(--text-3); }
.news-bundle summary { cursor: pointer; list-style: none; }
.news-bundle summary::-webkit-details-marker { display: none; }
.news-bundle summary::after { content: ' ▸'; }
.news-bundle details[open] summary::after { content: ' ▾'; }
.news-bundle ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }

/* Freunde (phase 73, draft 3): the page, the one button, the code, the tiles and the line at an event. */
.friends-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding-top: 24px; padding-bottom: 48px; align-items: start; }
@media (max-width: 820px) { .friends-page { grid-template-columns: 1fr; } }
.friends-search { display: flex; gap: 8px; margin: 12px 0 4px; }
.friends-search input { flex: 1; min-width: 0; }
.friends-results { margin-top: 10px; }
.friend-list { list-style: none; margin: 0; padding: 0; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.friend-row-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.friend-row-who span { display: flex; flex-direction: column; min-width: 0; }
/* The initial of a person without a photo is a span too: keep it centred (user 14.11.2026: it sat at the top). */
.friend-row-who span.avatar { display: grid; place-items: center; }
.friend-row-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar.avatar-md { width: 44px; height: 44px; flex: none; font-size: 17px; }
.avatar.avatar-xs { width: 22px; height: 22px; flex: none; font-size: 10px; border: 2px solid var(--surface); }
.friend-button { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.friend-button .btn.is-static { cursor: default; }
.friend-button .friend-yes { color: var(--ok, #3ecf8e); border-color: var(--ok, #3ecf8e); }
.user-going-list { list-style: none; margin: 0; padding: 0; }
.user-going-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.user-going-list a { text-decoration: none; color: var(--text); }
.friends-code { position: sticky; top: 16px; text-align: center; }
.friends-code h2 { font-size: 17px; margin: 0 0 8px; }
.friend-qr { background: #fff; border-radius: 16px; padding: 10px; width: min(220px, 100%); margin: 0 auto 8px; }
.friend-qr svg { display: block; width: 100%; height: auto; }
.friend-landing { max-width: 460px; padding-top: 32px; padding-bottom: 48px; }
.friend-landing .card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; }
.friend-landing h1 { font-size: 22px; margin: 6px 0 0; }
.attendees-friends { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2, transparent); color: var(--text-2); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.attendees-friends:hover { border-color: var(--line-strong); }
.attendees-friends .chev { margin-left: auto; color: var(--text-3); }
.friend-faces { display: inline-flex; flex: none; }
.friend-faces .avatar + .avatar { margin-left: -7px; }
.friends-dialog { position: relative; }
.friends-dialog h2 { padding-right: 40px; }
.friends-dialog-close { position: absolute; top: 12px; right: 12px; margin: 0; }
.friends-dialog .section-title { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); margin: 16px 0 8px; }
.friend-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.friend-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.04)); text-decoration: none; color: var(--text-2); font-size: 12px; min-width: 0; }
.friend-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-cover-stack { position: relative; flex: none; }
.news-friend-face { position: absolute; right: -6px; bottom: -6px; }
.news-friend .avatar.news-cover { border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.news-requests { margin-bottom: 8px; }

/* The pinboard form after "Eintragen" with something missing (phase 74): the field red, a line under it. */
.pin-chips.is-missing .pin-chip, .pin-days.is-missing .pin-day { border-color: var(--danger, #ff5a5f); }
.pin-form input.is-missing { border-color: var(--danger, #ff5a5f); }
.pin-missing { color: var(--danger, #ff5a5f); font-size: 13px; margin: 2px 0 6px; }

/* The nights of a sleeping place (phase 74, draft N1): one field, a small calendar below. */
.nights-field { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nights-field.is-missing { border-color: var(--danger, #ff5a5f); }
.nights-field-text { flex: 1; display: flex; flex-direction: column; }
.nights-field-text small { color: var(--text-3); font-size: 12px; }
.nights-sheet { margin-top: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface-2, var(--surface)); max-width: 420px; }
.nights-sheet[hidden] { display: none; }
.nights-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.nights-head span { font-size: 11px; color: var(--text-3); padding: 2px 0; }
.nights-day { height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.nights-day:hover { border-color: var(--line-strong); }
.nights-day.is-festival { border-color: rgba(255, 79, 123, .55); }
.nights-day.is-between { background: rgba(255, 79, 123, .22); }
.nights-day.is-end { background: var(--accent); color: #fff; font-weight: 700; }
/* "Zeitraum wählen" (draft Z1, user 10.11.2026): one month, first day then last; hangs on the body, fixed. */
.when-field { display: contents; }
.range-cal { position: fixed; z-index: 60; padding: 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow); animation: dialog-in .14s ease-out; }
.range-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 15px; text-transform: capitalize; }
.range-cal-arrow { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.range-cal-arrow:disabled { opacity: .3; cursor: default; }
.range-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; text-align: center; touch-action: none; user-select: none; }
.range-cal-weekday { font-size: 11px; color: var(--text-3); padding: 2px 0 4px; }
.range-cal-day { height: 36px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; border-radius: 10px; }
.range-cal-day:hover:not(:disabled) { outline: 1px solid var(--line-strong); }
.range-cal-day:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.range-cal-day.is-between { background: rgba(255, 79, 123, .18); border-radius: 0; }
.range-cal-day.is-start, .range-cal-day.is-end, .range-cal-day.is-both { background: var(--accent); color: #fff; font-weight: 700; }
.range-cal-day.is-start { border-radius: 10px 0 0 10px; }
.range-cal-day.is-end { border-radius: 0 10px 10px 0; }
.range-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.range-cal-foot .btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* The friend button and "Folgen" half and half under the name (draft A, user 07.11.2026; before: K1, 2:1). */
.org-head { flex-wrap: wrap; }
.user-actions { flex-basis: 100%; margin-left: 0; display: flex; gap: 8px; align-items: stretch; }
.user-actions > .friend-button { flex: 1 1 0; min-width: 0; }
.user-actions > .follow-frame { flex: 1 1 0; min-width: 0; }
.user-actions > .friend-button > .friend-form, .user-actions > .friend-button > .btn { flex: 1; }
.user-actions .btn { width: 100%; min-height: 44px; }
.user-actions > .friend-button:has(.friend-asked) { flex-basis: 100%; }
/* "Nachricht" on a line of its own below the two (phase 76: beside them it ran out of the card on a phone). */
.user-actions { flex-wrap: wrap; }
.user-actions > [data-testid="user-message"] { flex: 1 1 100%; order: 3; width: auto; }
/* A label cut off in its half ("Подписан(а)", "Freundschaftsanfrage senden"): both the whole width (half_buttons). */
.user-actions.is-stacked > .friend-button, .user-actions.is-stacked > .follow-frame { flex-basis: 100%; }
.user-actions .friend-button > .friend-form, .user-actions .follow-frame form { min-width: 0; }
.user-actions .friend-button > .friend-form .btn, .user-actions .follow-frame form > .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wide screens (user 09.11.2026, draft A): the buttons only as wide as their words, side by side - not stretched over a
   1000 px card. On a phone it stays half and half. */
@media (min-width: 700px) {
    .user-actions > .friend-button, .user-actions > .follow-frame, .user-actions > [data-testid="user-message"],
    .user-actions > .friend-button:has(.friend-asked), .user-actions.is-stacked > .friend-button, .user-actions.is-stacked > .follow-frame { flex: 0 0 auto; order: 0; }
    .user-actions .btn { width: auto; padding-left: 18px; padding-right: 18px; }
    .user-actions .state-menu { width: auto; }
}
/* "✓ Freunde ▾", "✓ Du folgst ▾": what holds, a tap opens what undoes it (draft A). */
.state-menu { position: relative; width: 100%; }
.user-actions > .friend-button > .state-menu { flex: 1; }
.state-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.state-menu > summary::-webkit-details-marker { display: none; }
.state-menu .state-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.state-menu .state-caret { font-size: 11px; opacity: .7; margin-left: 2px; }
.state-menu[open] > summary .state-caret { transform: rotate(180deg); }
.state-menu-panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.state-menu-panel .friend-form, .state-menu-panel .follow { margin: 0; }
.state-menu-panel .btn { width: 100%; white-space: nowrap; }
/* The right-hand button's menu opens towards the left, so it stays on the screen. */
.user-actions:not(.is-stacked) > .follow-frame .state-menu-panel { left: auto; right: 0; }
.user-actions:has(.friend-asked) { flex-wrap: wrap; }
.friend-asked { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface-2, var(--surface)); }
.friend-asked-buttons { display: flex; gap: 8px; margin-top: 4px; }
.friend-asked-buttons .friend-form { flex: 1; }
.user-actions .friend-button { flex-wrap: wrap; align-content: flex-start; }

.event-grid > .load-more { grid-column: 1 / -1; }

/* One price of a community event and "+" that asks which field (user 06.11.2026). */
.price-field-row { display: flex; gap: 8px; }
.price-field-row input:first-child { flex: 1; min-width: 0; }
.price-field-row .price-currency { width: 84px; text-transform: uppercase; }
/* `.form input:not(...)` makes every input 100% wide and won, so the amount shrank to a sliver (user 12.11.2026). */
.form .price-field-row input.price-currency { flex: none; width: 84px; }
.field-adder-row[hidden] { display: none; }
.field-adder-menu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.field-adder-menu .chip[hidden] { display: none; }

/* Phase 75 "Nachrichten": tabs "Freunde | Nachrichten", the list beside the open conversation, bubbles, the input. */
.seg-tabs { display: flex; gap: 4px; background: var(--surface-2); border-radius: 999px; padding: 3px; margin: 8px 0 16px; max-width: 480px; }
.seg-tabs a { flex: 1; text-align: center; padding: 7px 10px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-3); text-decoration: none; }
.seg-tabs a.is-on { background: var(--surface); color: var(--text); }
.seg-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; }
.messages-page { padding-top: 24px; padding-bottom: 40px; }
.messages-panes { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.messages-list { padding: 8px 14px; max-height: 72vh; overflow-y: auto; }
.conversation-row.is-unread strong { color: var(--text); }
.conversation-row.is-unread small { color: var(--text-2); font-weight: 600; }
.conversation-row.is-open { background: var(--surface-2); border-radius: 12px; padding-left: 6px; padding-right: 6px; }
.conversation-when { align-self: flex-start; margin-top: 4px; white-space: nowrap; }
.messages-chat { display: flex; flex-direction: column; min-height: 420px; max-height: 78vh; padding: 0; overflow: hidden; }
.chat-pick { margin: auto; padding: 24px; text-align: center; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-head .friend-row-who { gap: 8px; }
.chat-back { display: none; font-size: 22px; color: var(--text-2); text-decoration: none; padding: 0 4px; }
.chat-menu { position: relative; }
.chat-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.chat-menu summary::-webkit-details-marker { display: none; }
.chat-menu-items { position: absolute; right: 0; top: 38px; z-index: 20; min-width: 260px; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px; padding: 6px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.chat-menu-items > a, .chat-menu-items .link-button { display: block; text-align: left; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; width: 100%; }
.chat-menu-items > :first-child { border-top: 0; }
.chat-menu-items small { display: block; font-size: 12px; }
.danger-text, .chat-menu-items .danger-text { color: var(--danger, #ff5a5f); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 10px 14px; }
.chat-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-day { align-self: center; font-size: 11px; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; margin: 6px 0; }
.chat-msg { display: flex; flex-direction: column; gap: 3px; max-width: 78%; }
.chat-msg.is-in { align-self: flex-start; align-items: flex-start; }
.chat-msg.is-out { align-self: flex-end; align-items: flex-end; }
.chat-bubble { margin: 0; padding: 8px 12px; border-radius: 16px; background: var(--surface-2); line-height: 1.4; overflow-wrap: anywhere; }
.chat-msg.is-out .chat-bubble { background: color-mix(in srgb, var(--accent) 78%, #3a1020); color: #fff; border-bottom-right-radius: 5px; }
.chat-msg.is-in .chat-bubble { border-bottom-left-radius: 5px; }
.chat-msg .chat-bubble.chat-gone { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-3); font-style: italic; }
.chat-photo img { display: block; max-width: 240px; max-height: 240px; border-radius: 14px; }
.chat-event { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; min-width: 200px; }
.chat-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.chat-seen { color: #3ecf8e; }
.chat-item { display: flex; flex-direction: column; align-items: inherit; gap: 3px; }
.chat-item > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: inherit; gap: 3px; }
.chat-item > summary::-webkit-details-marker { display: none; }
.chat-msg.is-out .chat-item, .chat-msg.is-out .chat-item > summary { align-items: flex-end; }
.chat-msg.is-in .chat-item, .chat-msg.is-in .chat-item > summary { align-items: flex-start; }
.chat-msg-menu { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-elev); font-size: 13px; }
.chat-msg-menu a { color: var(--text-2); }
.chat-msg-menu form { margin: 0; }
.chat-edit > summary { list-style: none; cursor: pointer; }
.chat-edit > summary::-webkit-details-marker { display: none; }
.chat-edit-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: min(320px, 70vw); }
.chat-edit-form textarea { font: inherit; border-radius: 12px; padding: 8px 10px; }
.chat-bottom { border-top: 1px solid var(--line); padding: 10px 14px; }
.chat-ask { display: flex; flex-direction: column; gap: 4px; }
.chat-ask-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.chat-ask-actions form { margin: 0; }
.chat-ask.is-hidden, .chat-compose.is-hidden { display: none; }
.chat-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { flex: 1; min-height: 40px; max-height: 160px; resize: vertical; border-radius: 20px; padding: 9px 14px; font: inherit; }
.chat-send { border-radius: 50%; width: 40px; height: 40px; padding: 0; flex: none; }
.chat-plus { position: relative; flex: none; }
.chat-plus summary { list-style: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; color: var(--text-2); }
.chat-plus summary::-webkit-details-marker { display: none; }
.chat-plus-menu { position: absolute; bottom: 44px; left: 0; z-index: 60; width: min(340px, 80vw); max-height: 60vh; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.chat-plus-photo { display: block; padding: 6px 0 10px; cursor: pointer; text-decoration: none; color: var(--text); }
.chat-events { border-top: 1px solid var(--line); padding-top: 8px; }
.chat-events-search { width: 100%; margin: 6px 0; }
.chat-events-list { list-style: none; margin: 0; padding: 0; }
.chat-events-list li[hidden] { display: none; }
.chat-events-list .link-button { display: flex; flex-direction: column; text-align: left; text-decoration: none; color: var(--text); padding: 7px 0; border-top: 1px solid var(--line); width: 100%; }
.sec-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--text-3); margin: 10px 0 2px; text-transform: uppercase; }
.chat-counter { margin: 4px 0 0; text-align: right; }
.chat-note { text-align: center; padding: 6px 0; }
.chat-compose .hint-box { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid #ffb547; background: var(--surface); border-radius: 8px; }
.share-friend { display: inline-block; margin-top: 8px; }
.share-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.share-event { margin-top: 8px; color: var(--text-3); text-decoration: none; }
.share-event:hover { color: var(--text); }
.messages-share { padding-top: 24px; padding-bottom: 40px; }
@media (max-width: 760px) {
    .messages-panes { grid-template-columns: 1fr; }
    .messages-page.has-chat .messages-list { display: none; }
    .messages-page:not(.has-chat) .messages-chat { display: none; }
    .chat-back { display: block; }
    .messages-chat { max-height: none; min-height: 70vh; }
}

/* Phase 76: "Fotos" on the profile (strip, draft F1), managing them, "Leute, die du vielleicht kennst" (cards, V1). */
.user-photos { margin-top: 14px; }
.user-photos .section-title a { font-weight: 500; margin-left: 8px; }
.photo-strip { list-style: none; margin: 6px 0 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; }
.photo-strip img { display: block; width: 96px; height: 120px; object-fit: cover; border-radius: 12px; }
.lightbox-report { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); color: #ff8a8a; font-size: 14px; }
.photo-grid { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-slot { position: relative; display: flex; flex-direction: column; gap: 6px; }
.photo-slot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.photo-actions { display: flex; gap: 12px; font-size: 13px; }
.photo-hidden { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 8px; }
.photo-add { align-items: stretch; }
.photo-plus { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--text-2); cursor: pointer; }
.suggestion-cards { list-style: none; margin: 6px 0 14px; padding: 0 0 4px; display: flex; gap: 10px; overflow-x: auto; }
.suggestion-card { position: relative; flex: none; width: 168px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.suggestion-who { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.suggestion-card small { min-height: 32px; }
.suggestion-dismiss { position: absolute; top: 6px; right: 6px; margin: 0; }
.suggestion-dismiss .icon-button { width: 26px; height: 26px; font-size: 12px; }

/* "Videos teilen" (phase 78, drafts V3 + phone). */
.videos-page { max-width: 760px; }
.video-lock { border: 1px solid rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .07); border-radius: 16px; padding: 14px; margin: 12px 0 18px; }
.video-lock p { margin: 4px 0 10px; color: var(--text-2); }
.video-send { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 20px; }
.video-send h2 { margin: 0; font-size: 1.1rem; }
.video-quota { display: flex; flex-direction: column; gap: 4px; }
.video-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.video-bar i { display: block; height: 100%; width: 0; background: var(--accent-grad, var(--accent)); transition: width .3s; }
.video-friends { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.video-friends legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.video-friend { display: inline-flex; align-items: center; gap: 6px; }
.video-link-choice { display: flex; align-items: center; gap: 8px; }
.video-progress { display: flex; flex-direction: column; gap: 4px; }
.video-progress[hidden], .video-done[hidden], .video-share[hidden] { display: none; }
.video-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.video-share input, .video-link-field { flex: 1 1 220px; min-width: 0; font-size: .85rem; }
.video-wa { background: rgba(37, 211, 102, .15); color: #25d366; }
.video-tg { background: rgba(42, 171, 238, .15); color: #2aabee; }
.video-row { align-items: flex-start; }
.video-thumb { flex: none; width: 56px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #3b2a55, #1f2f4a); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); }
.video-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.video-what small { overflow-wrap: anywhere; }
.video-link-page { max-width: 560px; margin-top: 24px; }
.video-link-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.video-player { width: 100%; height: 200px; border-radius: 12px; background: linear-gradient(135deg, #3b2a55, #1f2f4a); display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255, 255, 255, .75); }
.video-player.is-gone { height: 110px; font-size: 30px; }
.video-link-card h1 { font-size: 1.3rem; margin: 6px 0 0; }
/* Draft A (08.11.2026): a slim app strip above, the browser's and the app's time side by side. */
.video-app-strip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong, rgba(255, 255, 255, .14)); border-radius: 14px; background: var(--surface, #1b1624); padding: 8px 10px; margin-bottom: 12px; color: inherit; text-decoration: none; }
.video-app-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #ff4f7b, #ff8a5c); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: none; }
.video-app-text { flex: 1; font-size: .8rem; line-height: 1.3; text-align: left; }
.video-times { display: flex; gap: 8px; width: 100%; }
.video-time { flex: 1; border: 1px solid var(--line, rgba(255, 255, 255, .08)); border-radius: 12px; padding: 7px 9px; text-align: left; }
.video-time b { display: block; font-size: 1rem; }
.video-time.is-app { border-color: rgba(255, 79, 123, .5); background: rgba(255, 79, 123, .08); }
.video-app-card { width: 100%; text-align: left; border: 1px solid var(--line, rgba(255, 255, 255, .08)); border-radius: 14px; padding: 10px 12px; margin-top: 4px; font-size: .9rem; }
.video-app-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2, #b6afc4); }
@media (max-width: 480px) { .video-link-page .video-player { height: 140px; } .video-link-page { margin-top: 12px; } }
/* Phase 80 (draft A, 09.11.2026): the link's page while the video still uploads - a ring with percent, time left,
   speed and size, asked again every few seconds; yellow when the sender's phone pauses. */
.video-upload-live { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.video-ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; margin: 6px 0; display: grid; place-items: center; background: conic-gradient(#3dd68c calc(var(--p) * 1%), var(--surface-3, #2e273b) 0); transition: background .6s; }
.video-ring.is-paused { background: conic-gradient(#f5b748 calc(var(--p) * 1%), var(--surface-3, #2e273b) 0); }
.video-ring > div { width: 124px; height: 124px; border-radius: 50%; background: var(--surface, #1b1624); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.video-ring b { font-size: 1.7rem; line-height: 1.1; }
.video-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.video-facts > div { background: var(--surface-2, #241e2f); border-radius: 10px; padding: 7px 6px; display: flex; flex-direction: column; align-items: center; }
.video-facts b { font-size: .95rem; }
.video-stalled { color: #f8d99b; font-size: .85rem; margin: 0; }
.btn.btn-disabled { background: var(--surface-3, #2e273b); color: var(--text-3, #80798f); cursor: default; box-shadow: none; }

/* Phase 80 (draft A, 09.11.2026): the link from the start - a small QR code beside "Link kopieren", big in a dialog. */
.video-live-share { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.video-live-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.video-live-text p { margin: 0; }
.video-qr-thumb { flex: none; width: 84px; height: 84px; padding: 4px; border: 0; border-radius: 10px; background: #fff; cursor: zoom-in; }
.video-qr-thumb img { display: block; width: 100%; height: 100%; }
.video-qr-dialog { border: 1px solid var(--line-strong, rgba(255, 255, 255, .14)); border-radius: 20px; background: var(--surface, #1b1624); color: inherit; padding: 22px; max-width: min(92vw, 380px); text-align: center; }
.video-qr-dialog::backdrop { background: rgba(8, 6, 11, .85); }
.video-qr-dialog h2 { margin: 0 0 4px; font-size: 1.15rem; }
.video-qr-big { display: block; width: min(72vw, 300px); margin: 12px auto; padding: 10px; border-radius: 16px; background: #fff; }
.video-qr-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--text-2, #b6afc4); font-size: 20px; cursor: pointer; }
.video-qr-dialog .video-bar { margin: 8px 0 4px; }
.chat-about { align-self: center; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 12px; padding: 6px 12px; margin: 6px 0; text-align: center; }

/* Phase 81 (draft A, 09.11.2026): a still with the length in the lists, the browser's player on the link's page. */
.video-thumb.has-still { position: relative; width: 56px; height: 56px; background-size: cover; background-position: center; }
.video-thumb-play { font-size: 15px; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.video-thumb-length { position: absolute; right: 3px; bottom: 3px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10px; font-weight: 600; padding: 0 4px; border-radius: 5px; }
.video-inline { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; object-fit: contain; }
.video-still-preview { float: left; width: 44px; height: 44px; object-fit: cover; border-radius: 8px; margin: 0 10px 4px 0; }
.video-row .icon-button { margin-left: -4px; }
/* Read as a festival (phase 77, draft V3): a card instead of the form, a quiet way out below. */
.quick-festival { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 20px; }
.quick-festival-icon { font-size: 40px; line-height: 1; }
.quick-festival-what { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.04)); width: 100%; max-width: 420px; }
.quick-festival-out { margin-top: 4px; }
.quick-held-note { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 196, 0, .12); color: var(--text-1, inherit); }
/* Where the year changes in a list of events (user 09.11.2026, draft A): a fine line, the new year big in the middle. */
.year-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.year-divider::before, .year-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--text-3)); }
.year-divider::after { background: linear-gradient(90deg, var(--text-3), transparent); }
.year-divider b { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* The organizer's logo (draft L2, user 14.11.2026): its card on the profile page, small in front of "Veranstaltet von". */
.org-logo-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.org-logo-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.org-logo-text p { margin: 0; }
.org-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.by .by-logo { display: inline-block; vertical-align: middle; margin-right: 4px; border: 0; }