/* ----------------------------------------------------------------
   IMPALA Tribe – Basis-Stylesheet
   Layout: fixe linke Sidebar auf Desktop, Off-Canvas auf Mobile.
---------------------------------------------------------------- */

:root {
    --color-bg:          #ffffff;
    --color-surface:     #f6f7f9;
    --color-sidebar:     #1a1f2b;
    --color-sidebar-ink: #e8ecf3;
    --color-sidebar-mut: #8a93a6;
    --color-text:        #1a1f2b;
    --color-muted:       #5a6474;
    --color-accent:      #d11032;
    --color-accent-2:    #a70d28;
    --color-border:      #e4e7ec;
    --color-danger:      #c0392b;
    --color-success:     #2e7d32;
    --radius:            10px;
    --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:         0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-lg:         0 10px 30px rgba(0, 0, 0, 0.15);
    --sidebar-width:     280px;
    --topbar-height:     56px;
    --max-width:         1040px;
    --mobile-break:      900px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

/* kein horizontales Scrollen auf Mobile durch Transform */
body { overflow-x: hidden; }
body.nav-open { overflow: hidden; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ----- Layout ------------------------------------------------- */
.layout { display: block; min-height: 100vh; }

.content {
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

/* ----- Mobile Top-Bar (nur < Break) --------------------------- */
.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--topbar-height);
    background: var(--color-sidebar);
    color: var(--color-sidebar-ink);
    align-items: center;
    padding: 0 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.mobile-brand {
    margin: 0 auto;
    padding-right: 40px; /* optisch mittig trotz Toggle-Button links */
    display: flex;
    align-items: center;
}
.mobile-brand img { max-height: 36px; width: auto; }

/* Hamburger */
.nav-toggle {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    border-radius: 6px;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.nav-toggle-bar {
    display: block;
    height: 2px;
    background: var(--color-sidebar-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Backdrop (nur Mobile) */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 45;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.nav-open .sidebar-backdrop {
    display: block;
    opacity: 1;
}

/* ----- Sidebar ------------------------------------------------ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--color-sidebar);
    color: var(--color-sidebar-ink);
    padding: 1.75rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
}

.sidebar-brand {
    display: block;
    padding: 0 0.5rem 1.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.sidebar-logo {
    max-width: 170px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.nav-section { padding: 1rem 0.75rem 0.25rem; }
.nav-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-sidebar-mut);
    font-weight: 600;
}

.nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    color: var(--color-sidebar-ink);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.nav-item.is-active {
    background: rgba(115, 253, 214, 0.12);
    border-left-color: #73fdd6;
}
.nav-item.is-active .nav-title { color: #73fdd6; }

.nav-item-soon {
    opacity: 0.42;
    cursor: not-allowed;
    user-select: none;
}
.nav-item-soon:hover { background: transparent; }
.nav-title    { font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.nav-subtitle { font-size: 0.8rem; line-height: 1.3; color: var(--color-sidebar-mut); }

/* Sidebar-User */
.sidebar-user {
    margin-top: auto;
    padding: 1rem 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}
.sidebar-user-name { font-weight: 600; color: var(--color-sidebar-ink); }
.sidebar-user-meta { color: var(--color-sidebar-mut); font-size: 0.8rem; margin-bottom: 0.5rem; word-break: break-all; }
.sidebar-user-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sidebar-user-actions a { color: var(--color-sidebar-mut); font-size: 0.85rem; }
.sidebar-user-actions a:hover { color: var(--color-accent); text-decoration: none; }

/* ----- Hero --------------------------------------------------- */
.hero {
    background: var(--color-surface);
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid var(--color-border);
}
.hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; }
.hero-tagline { font-size: 1.1rem; color: var(--color-muted); margin: 0 0 1rem; }

/* ----- Gig-Formate -------------------------------------------- */
.gig-formats { padding: 3rem 0; flex: 1 0 auto; }
.gig-formats h2 { margin: 0 0 0.5rem; font-size: 1.65rem; }
.section-intro { color: var(--color-muted); max-width: 680px; margin: 0 0 2rem; }

.gig-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gig-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gig-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gig-card h3    { margin: 0 0 0.25rem; font-size: 1.2rem; color: var(--color-accent); }
.gig-tagline    { margin: 0 0 0.75rem; font-weight: 600; color: var(--color-text); }
.gig-description{ margin: 0; color: var(--color-muted); font-size: 0.95rem; }

/* ----- Events ------------------------------------------------- */
.events-section {
    padding: 2.5rem 0 2rem;
    border-bottom: 1px solid var(--color-border);
}
.events-section-past {
    background: #dde1ea;
    border-top: 1px solid #c8cdd8;
    border-bottom: 1px solid #c8cdd8;
    padding: 2.5rem 0 2.5rem;
}
.events-section-past h2 { color: #3b4253; }
.events-section-past .section-count { color: #5d6578; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: 1.5rem; }
.section-count {
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.event-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.event-grid-past .event-card {
    opacity: 0.92;
    filter: grayscale(0.15);
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.event-grid-past .event-card:hover {
    opacity: 1;
    filter: grayscale(0);
}

.event-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.event-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #d4d8e0;
    text-decoration: none;
}
.event-card-cover {
    aspect-ratio: 16 / 9;
    background: var(--color-surface);
    overflow: hidden;
}
.event-card-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.event-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.event-card-format {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
}
.event-card-title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--color-text);
}
.event-card-date {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.event-card-meta {
    margin: 0.2rem 0 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.event-card-location {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.event-badge-online  { background: #e7f1fb; color: #1a5490; }
.event-badge-onsite  { background: #fff4e5; color: #a15c07; }
.event-badge-cancel  { background: #fdecea; color: var(--color-danger); }

/* ----- Event-/Session-Detail (Hero-Cover) --------------------- */
.event-detail { padding-bottom: 3rem; }
.event-cover,
.session-hero-cover {
    width: 100%;
    max-height: 420px;
    overflow: hidden;
    background: var(--color-surface);
}
.event-cover img,
.session-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 420px;
}
.event-detail > .container { padding-top: 2rem; }
.event-detail h1 { margin: 0 0 0.75rem; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
.event-breadcrumb {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.event-breadcrumb a { color: var(--color-accent); }
.event-cancel-notice {
    background: #fdecea;
    color: var(--color-danger);
    border: 1px solid #f5c6c2;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    display: inline-block;
    font-weight: 600;
    margin: 0 0 1rem;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.event-meta-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}
.event-meta-action {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-left: auto;
}
.event-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.event-meta dd { margin: 0; font-weight: 500; word-break: break-word; }

.event-description {
    font-size: 1.02rem;
    max-width: 760px;
    line-height: 1.7;
}

.event-registered-hint {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* ----- Modal --------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 25, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 1000;
}
.modal-backdrop.is-open { display: flex; }
body.modal-open { overflow: hidden; }
.modal {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.6rem;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.modal h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
.modal p  { margin: 0 0 1.2rem; line-height: 1.5; }
.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* gig-card als Link ohne Underline */
a.gig-card, a.gig-card:hover { text-decoration: none; color: inherit; }

/* ----- HOWsessions -------------------------------------------- */
.sessions-section { border-bottom: 0; }
.session-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.session-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.session-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #d4d8e0;
    text-decoration: none;
}
.session-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-surface);
    overflow: hidden;
}
.session-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: background 0.15s ease;
}
.session-card:hover .session-card-play { background: rgba(0, 0, 0, 0.4); }
.session-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.session-card-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
}
.session-card-title { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--color-text); }
.session-card-date  { margin: 0; color: var(--color-muted); font-size: 0.9rem; }

/* Detail */
.session-detail { padding: 0 0 3rem; }
.session-detail > .container { padding-top: 2rem; }
.session-detail h1 { margin: 0 0 0.5rem; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
.session-detail-meta {
    color: var(--color-muted);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}
.session-video, .session-cover {
    margin: 0 0 2rem;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.session-video video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 70vh;
    background: #000;
}
.session-cover img { display: block; width: 100%; height: auto; }

/* ----- KNOWletter-Archiv (Listen-Kacheln) --------------------- */
.knowletter-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.knowletter-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.3rem 1.1rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.knowletter-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #d4d8e0;
    text-decoration: none;
}
.knowletter-card-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.knowletter-card-title { margin: 0 0 0.4rem; font-size: 1.15rem; line-height: 1.3; }
.knowletter-card-date  { margin: 0 0 0.9rem; color: var(--color-muted); font-size: 0.9rem; }
.knowletter-card-cta   { color: var(--color-accent); font-weight: 600; font-size: 0.9rem; margin-top: auto; }

/* ----- KNOWletter-Detail (Blöcke) ----------------------------- */
.knowletter-blocks { padding: 2rem 0 3rem; }

.kn-block {
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
}
.kn-block:first-child { border-top: 0; padding-top: 0; }
.kn-block:last-child  { padding-bottom: 0; }

.kn-block-title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    line-height: 1.25;
}

.kn-block-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}
.kn-block.no-image .kn-block-body { grid-template-columns: 1fr; }

.kn-block-content .prose { margin: 0; }
.kn-block-cta { margin-top: 1.25rem; }

.kn-block-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    display: block;
}

@media (max-width: 720px) {
    .kn-block-body { grid-template-columns: 1fr; gap: 1.25rem; }
    .kn-block-image { order: -1; }   /* Bild wandert auf Mobile über den Text */
}

/* ----- Prose (Markdown) --------------------------------------- */
.prose { max-width: 760px; line-height: 1.75; font-size: 1.02rem; }
.prose > *:first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { line-height: 1.25; margin: 1.8rem 0 0.6rem; }
.prose h1 { font-size: 1.6rem; }
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.15rem; }
.prose p  { margin: 0.9rem 0; }
.prose ul, .prose ol { margin: 0.9rem 0; padding-left: 1.4rem; }
.prose li { margin: 0.25rem 0; }
.prose blockquote {
    margin: 1.2rem 0;
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--color-accent);
    background: var(--color-surface);
    color: var(--color-muted);
    border-radius: 0 8px 8px 0;
}
.prose code {
    background: var(--color-surface);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.92em;
}
.prose pre {
    background: #1a1f2b;
    color: #e8ecf3;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.55;
}
.prose pre code { background: transparent; color: inherit; padding: 0; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
    border: 1px solid var(--color-border);
}
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: 1.8rem 0; }

/* Empty state (Frontend) */
.empty-state {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-muted);
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}

/* ----- BRAINgain (Community-Posts) ---------------------------- */
.braingain-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.braingain-textarea {
    width: 100%;
    min-height: 10rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    background: #fff;
    color: var(--color-text);
    box-sizing: border-box;
}
.braingain-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}
.braingain-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}
.braingain-error {
    background: #fbe9e7;
    color: #b3261e;
    border: 1px solid #f5c2c0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
}
.section-head-spaced { margin-top: 2.5rem; }
.braingain-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.braingain-post {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}
.braingain-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.braingain-post-author { font-weight: 600; color: var(--color-text); }
.braingain-post-company::before { content: "·"; margin-right: 0.6rem; }
.braingain-post-date { margin-left: auto; }
.braingain-post-body { font-size: 1rem; }
.braingain-post-body > :first-child { margin-top: 0; }
.braingain-post-body > :last-child { margin-bottom: 0; }

/* ----- Footer ------------------------------------------------- */
.content-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1.25rem 0;
    margin-top: auto;
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* ============================================================= */
/* Auth-Seiten (Login, Admin-Setup)                               */
/* ============================================================= */
.auth-body {
    background: var(--color-surface);
    min-height: 100vh;
    margin: 0;
}
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.auth-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2.25rem 2rem 2rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
}
.auth-logo { display: block; max-width: 150px; margin: 0 auto 1.25rem; }
.auth-card h1 { margin: 0 0 0.5rem; font-size: 1.5rem; text-align: center; }
.auth-intro { color: var(--color-muted); text-align: center; margin: 0 0 1.5rem; }

.auth-error, .auth-success {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.auth-error   { background: #fdecea; color: var(--color-danger); border: 1px solid #f5c6c2; }
.auth-success { background: #e8f5e9; color: var(--color-success); border: 1px solid #b8e0bb; }

/* ============================================================= */
/* Formular-Elemente                                              */
/* ============================================================= */
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
.form-row  { display: flex; gap: 0.75rem; }
.form-row .form-field { flex: 1 1 0; }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label { font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(209, 16, 50, 0.15);
}

.btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    padding: 0.7rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.05s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary  { background: var(--color-accent); color: #fff; }
.btn-primary:hover  { background: var(--color-accent-2); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: 0.5rem; }

/* ============================================================= */
/* Responsive: Off-Canvas-Sidebar                                 */
/* ============================================================= */
@media (max-width: 900px) {
    .mobile-topbar { display: flex; }
    .content { margin-left: 0; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        will-change: transform;
    }
    body.nav-open .sidebar { transform: translateX(0); }

    .hero { padding: 2.5rem 0 1.75rem; }
    .gig-formats { padding: 2rem 0; }

    .form-row { flex-direction: column; gap: 0.9rem; }
}