/* ============================================================
   LINDHOLM · Mesh Furniture Shop — Base
   Reset · Shell-Grid · Typografie · Core-Klassen-Abdeckung.
   Aus dem Prototypen abgeleitet: Papierfläche, Haarlinien,
   Cormorant-Garamond-Kursiv über Inter, keine Radien.
   Farben ausschließlich über Skin-Variablen.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
    font-family: var(--lhm-f-body, 'Inter', system-ui, sans-serif);
    font-weight: 400;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--color-accent); }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lhm-f-display, Georgia, serif);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--color-text);
}
h1 { font-size: clamp(34px, 4.6vw, 60px); }
h2 { font-size: clamp(28px, 3.2vw, 46px); letter-spacing: -1px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 {
    font-family: var(--lhm-f-body, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent);
}
h6 { font-size: 15px; }
em { font-style: italic; }

p  { margin-bottom: 14px; }
ul, ol { margin: 0 0 16px 20px; }
li { margin-bottom: 6px; }
blockquote {
    font-family: var(--lhm-f-display, serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    border-left: 1px solid var(--color-accent);
    padding-left: 22px;
    margin: 22px 0;
    color: var(--lhm-soft, var(--color-text-muted));
}
hr { border: none; border-top: 1px solid var(--color-border); margin: 34px 0; }
code, kbd, samp {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 0.88em;
    background: var(--lhm-paper-2, var(--color-surface));
    padding: 1px 5px;
}


/* ============================================================
   SHELL — Kopf · (Sidebars) · Bühne · Fuß
   Vier Grid-Varianten (Conditional-Sidebar-Pattern).
   ============================================================ */
.lhm-shell {
    display: grid;
    min-height: 100vh;
    grid-template-areas:
        "head   head  head"
        "side-l stage side-r"
        "foot   foot  foot";
    grid-template-columns: var(--lhm-side-w, 268px) minmax(0, 1fr) var(--lhm-side-w-r, 288px);
    grid-template-rows: auto 1fr auto;
}
.lhm-shell--sb-lr {
    grid-template-areas:
        "head   head  head"
        "side-l stage side-r"
        "foot   foot  foot";
    grid-template-columns: var(--lhm-side-w, 268px) minmax(0, 1fr) var(--lhm-side-w-r, 288px);
}
.lhm-shell--sb-l {
    grid-template-areas:
        "head   head"
        "side-l stage"
        "foot   foot";
    grid-template-columns: var(--lhm-side-w, 268px) minmax(0, 1fr);
}
.lhm-shell--sb-r {
    grid-template-areas:
        "head  head"
        "stage side-r"
        "foot  foot";
    grid-template-columns: minmax(0, 1fr) var(--lhm-side-w-r, 288px);
}
.lhm-shell--sb-none {
    grid-template-areas:
        "head"
        "stage"
        "foot";
    grid-template-columns: minmax(0, 1fr);
}

.lhm-head          { grid-area: head; }
.lhm-side--left    { grid-area: side-l; }
.lhm-side--right   { grid-area: side-r; }
.lhm-stage         { grid-area: stage; }
.lhm-foot          { grid-area: foot; }

@media (max-width: 1180px) {
    .lhm-shell,
    .lhm-shell--sb-lr,
    .lhm-shell--sb-l,
    .lhm-shell--sb-r {
        grid-template-columns: var(--lhm-side-w, 250px) minmax(0, 1fr);
        grid-template-areas:
            "head   head"
            "side-l stage"
            "side-r side-r"
            "foot   foot";
    }
}
@media (max-width: 880px) {
    .lhm-shell,
    .lhm-shell--sb-lr,
    .lhm-shell--sb-l,
    .lhm-shell--sb-r,
    .lhm-shell--sb-none {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "stage"
            "side-l"
            "side-r"
            "foot";
    }
}


/* ============================================================
   KOPFLEISTE — sticky, Haarlinie unten
   ============================================================ */
.lhm-head {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    min-height: var(--lhm-topbar-h, 72px);
    padding: 18px var(--lhm-gutter, 48px);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
/* Sicht-Reihenfolge per CSS `order` — der Admin muss sich nicht
   um die Placement-Sortierung in der Area kümmern. */
.lhm-head > *                { order: 50; }
.lhm-head > .lhm-brand       { order: 1; }
.lhm-head .lhm-rail-nav      { order: 2; margin-left: 50px; }
.lhm-head .lhm-utility       { order: 90; margin-left: auto; }

@media (max-width: 880px) {
    .lhm-head { padding: 14px 22px; gap: 14px; }
    .lhm-head .lhm-rail-nav { margin-left: 0; width: 100%; order: 95; }
}

.lhm-notice-bar {
    position: relative;
    z-index: 60;
    padding: 9px 22px;
    background: var(--color-accent);
    color: var(--lhm-on-accent, #fff);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-align: center;
}


/* ============================================================
   SIDEBARS
   ============================================================ */
.lhm-side {
    padding: 40px 26px;
    background: var(--lhm-paper-2, var(--color-surface));
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-self: start;
    position: sticky;
    top: var(--lhm-topbar-h, 72px);
    max-height: calc(100vh - var(--lhm-topbar-h, 72px));
    overflow-y: auto;
}
.lhm-side--right { border-right: none; border-left: 1px solid var(--color-border); }

@media (max-width: 880px) {
    .lhm-side {
        position: static;
        max-height: none;
        border-right: none;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 30px 22px;
    }
}

.lhm-side h3,
.lhm-side h4,
.lhm-side-block__title {
    font-family: var(--lhm-f-body, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lhm-muted, var(--color-text-muted));
    margin-bottom: 14px;
}
.lhm-side > *:first-child { margin-top: 0; }


/* ============================================================
   BÜHNE — Sektionen bringen ihr eigenes Innen-Raster mit
   ============================================================ */
.lhm-stage { min-width: 0; padding: 0; }

.lhm-wrap-w {
    max-width: var(--lhm-maxw, 1320px);
    margin: 0 auto;
    padding: 0 var(--lhm-gutter, 48px);
}
@media (max-width: 880px) { .lhm-wrap-w { padding: 0 22px; } }

/* Fallback-Rahmen für alles, was kein theme-eigenes Sektions-Element
   mitbringt (CMS-Rohinhalt, fremde Widgets, pre_main/after_main). */
.lhm-stage > *:not(.lhm-hero):not(.lhm-section):not(.lhm-band):not(.lhm-page):not([data-aco-main]),
[data-aco-main] > *:not(.lhm-hero):not(.lhm-section):not(.lhm-band):not(.lhm-page) {
    max-width: var(--lhm-maxw, 1320px);
    margin-left: auto;
    margin-right: auto;
    padding: 40px var(--lhm-gutter, 48px);
}
@media (max-width: 880px) {
    .lhm-stage > *:not(.lhm-hero):not(.lhm-section):not(.lhm-band):not(.lhm-page):not([data-aco-main]),
    [data-aco-main] > *:not(.lhm-hero):not(.lhm-section):not(.lhm-band):not(.lhm-page) {
        padding: 30px 22px;
    }
}


/* ============================================================
   FUSS
   ============================================================ */
.lhm-foot {
    background: var(--lhm-dark, #1f1c18);
    color: var(--lhm-dark-muted, #a89878);
    padding: 60px var(--lhm-gutter, 48px) 30px;
    margin-top: 60px;
}
.lhm-foot__grid {
    max-width: var(--lhm-maxw, 1320px);
    margin: 0 auto 34px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 40px;
    align-items: start;
}
.lhm-foot__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-end;
}
.lhm-foot__copy {
    max-width: var(--lhm-maxw, 1320px);
    margin: 0 auto;
    border-top: 1px solid var(--lhm-dark-line, #3a3428);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--lhm-dark-dim, #7a6a4a);
}
.lhm-foot a { color: var(--lhm-dark-muted, #a89878); }
.lhm-foot a:hover { color: var(--lhm-dark-text, #e8e1d1); }
@media (max-width: 880px) {
    .lhm-foot { padding: 44px 22px 26px; }
    .lhm-foot__grid { grid-template-columns: 1fr; }
    .lhm-foot__nav { justify-content: flex-start; gap: 30px; }
}


/* ============================================================
   CORE-KLASSEN — CMS-Content und Core-Komponenten.
   Klassennamen unverändert, Formensprache ist Lindholm:
   Papierflächen, Haarlinien, keine Radien, keine Schatten.
   ============================================================ */
.content   { flex: 1; padding: 0; position: relative; min-width: 0; }
.container { max-width: var(--lhm-maxw, 1320px); margin: 0 auto; padding: 0 var(--lhm-gutter, 48px); }
@media (max-width: 880px) { .container { padding: 0 22px; } }

.card {
    background: var(--lhm-paper-2, var(--color-surface));
    border: 1px solid var(--color-border);
    padding: 26px 28px;
    margin-bottom: 20px;
    backdrop-filter: var(--card-backdrop-filter, none);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.card:hover { background: var(--lhm-paper-3, var(--color-surface-alt)); }
.card h3 { font-style: italic; margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}
.grid-tight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
@media (max-width: 680px) { .grid, .grid-tight { grid-template-columns: 1fr; } }

.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--lhm-f-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--lhm-on-accent, var(--color-bg)); }
.btn-primary   { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.btn-secondary { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: var(--color-bg); }
.btn-ghost     { background: transparent; border-color: var(--color-text); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-text); color: var(--color-bg); }
.btn-accent    { background: var(--color-accent); border-color: var(--color-accent); color: var(--lhm-on-accent, #fff); }
.btn-sm { padding: 9px 18px; font-size: 11px; letter-spacing: 1.5px; }
.btn-lg { padding: 17px 40px; font-size: 13px; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--lhm-paper-3, var(--color-surface-alt));
    color: var(--lhm-muted, var(--color-text-muted));
}
.badge-success { border-color: var(--color-success); color: var(--color-success); background: transparent; }
.badge-warn    { border-color: var(--color-warning); color: var(--color-warning); background: transparent; }
.badge-danger  { border-color: var(--color-danger);  color: var(--color-danger);  background: transparent; }
.badge-accent  { border-color: var(--color-accent);  color: var(--lhm-on-accent, #fff); background: var(--color-accent); }

/* Event-Karten */
.event-card {
    background: var(--lhm-paper-2, var(--color-surface));
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: background 0.2s ease;
}
.event-card:hover { background: var(--lhm-paper-3, var(--color-surface-alt)); }
.event-card-media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--lhm-feat-from, #3a2818), var(--lhm-feat-to, #1f1c18));
}
.event-card-body  { padding: 18px 20px 20px; }
.event-card-date {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lhm-muted, var(--color-text-muted));
    margin-bottom: 8px;
}
.event-card-title {
    font-family: var(--lhm-f-display, serif);
    font-style: italic;
    font-size: 21px;
    margin-bottom: 6px;
}
.event-card-meta { font-size: 12px; color: var(--lhm-soft, var(--color-text-muted)); margin-bottom: 10px; }
.event-card-desc { font-size: 14px; color: var(--lhm-soft, var(--color-text-muted)); }
.event-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 12px;
    border-top: 1px solid var(--lhm-hairline, var(--color-border));
    font-size: 12px;
    color: var(--lhm-soft, var(--color-text-muted));
}
.event-card-attendees strong { color: var(--color-accent); }

/* Mitglieder-Karten */
.member-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: var(--lhm-paper-2, var(--color-surface));
    border: 1px solid var(--color-border);
}
.member-card:hover { background: var(--lhm-paper-3, var(--color-surface-alt)); }
.member-avatar {
    width: 46px; height: 46px;
    background: var(--lhm-shot-bg, #fff);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    font-family: var(--lhm-f-display, serif);
    font-style: italic;
    font-size: 19px;
    color: var(--color-accent);
}
.member-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member-name {
    font-family: var(--lhm-f-display, serif);
    font-style: italic;
    font-size: 19px;
}
.member-fursona,
.member-presence { font-size: 12px; color: var(--lhm-soft, var(--color-text-muted)); }
.member-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
}
.member-status-dot.offline { background: var(--color-text-muted); }
.member-status-dot.away    { background: var(--color-warning); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 14px; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--color-border); }
th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lhm-muted, var(--color-text-muted));
}
tbody tr:hover { background: var(--lhm-paper-2, var(--color-surface)); }

/* Formulare */
input, select, textarea {
    font-family: var(--lhm-f-body, sans-serif);
    font-size: 14px;
    color: var(--color-text);
    background: var(--lhm-shot-bg, var(--color-bg));
    border: 1px solid var(--color-border);
    padding: 10px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-accent); }
label { font-size: 13px; color: var(--lhm-soft, var(--color-text-muted)); }


/* ============================================================
   ANIMATION · SCROLLBAR · UTILITIES
   ============================================================ */
@keyframes lhmFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.fade-in   { animation: lhmFadeIn 0.5s ease both; }
.fade-in-1 { animation-delay: 0.08s; }
.fade-in-2 { animation-delay: 0.16s; }
.fade-in-3 { animation-delay: 0.24s; }
.fade-in-4 { animation-delay: 0.32s; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--lhm-paper-2, var(--color-surface)); }
::-webkit-scrollbar-thumb { background: var(--lhm-paper-3, var(--color-surface-alt)); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 50px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 30px; } .mb-4 { margin-bottom: 40px; } .mb-5 { margin-bottom: 50px; }
.p-1 { padding: 10px; } .p-2 { padding: 20px; } .p-3 { padding: 30px; } .p-4 { padding: 40px; } .p-5 { padding: 50px; }