/* dessau.io — Design v3
   Warm, menschlich, besser als Squarespace.
   Lara Design-Leitfaden: Lara_Design_Leitfaden.md
   Keine Schatten. Keine externen Fonts. Nur Wärme. */

:root {
    /* Flächen */
    --dio-weiss: #ffffff;
    --dio-leinen: #FAFAF9;
    --dio-hover: #F7F6F5;
    --dio-creme: #F3F0EE;
    --dio-sand: #EEEAE7;
    --dio-stein: #E8E4E1;

    /* Text */
    --dio-erde: #2C2220;
    --dio-holz: #544840;
    --dio-rinde: #7A6E66;
    --dio-nebel: #9E9490;

    /* Akzente */
    --dio-korall: #D4856C;
    --dio-salbei: #5B9A5B;
    --dio-taupe: #C4B8B0;

    /* System */
    --dio-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dio-radius: 16px;
    --dio-radius-sm: 10px;
    --dio-max-w: 720px;
}

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

body {
    font-family: var(--dio-font);
    color: var(--dio-holz);
    background: var(--dio-weiss);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--dio-holz); text-decoration: none; }
a:hover { color: var(--dio-erde); }

/* ── Navigation ── */
.dio-nav { border-bottom: 1px solid var(--dio-creme); background: var(--dio-weiss); position: sticky; top: 0; z-index: 100; }
.dio-nav-inner { max-width: var(--dio-max-w); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.dio-logo { font-size: 18px; font-weight: 600; color: var(--dio-erde); letter-spacing: -0.02em; }
.dio-nav-links a { font-size: 13px; color: var(--dio-nebel); }
.dio-nav-links a:hover { color: var(--dio-erde); }

/* ── Hero (Vereinsseite) ── */
.dio-verein-header { padding: 56px 24px 40px; text-align: center; }
.dio-verein-header-inner { max-width: var(--dio-max-w); margin: 0 auto; }
.dio-verein-header h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.3; }
.dio-motto { font-size: 15px; color: var(--dio-rinde); font-style: italic; margin-bottom: 16px; }
.dio-verein-meta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.dio-kat-label { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 20px; }
.dio-ort-label { font-size: 13px; color: var(--dio-nebel); }

/* ── Hero (Startseite) ── */
.dio-hero { text-align: center; padding: 56px 24px 20px; }
.dio-hero h1 { font-size: 28px; font-weight: 600; color: var(--dio-erde); letter-spacing: -0.03em; }
.dio-tagline { font-size: 15px; color: var(--dio-rinde); margin-top: 4px; }
.dio-count { font-size: 13px; color: var(--dio-nebel); margin-top: 6px; }

/* ── Main Content ── */
.dio-main { min-height: 60vh; }
.dio-verein-body { max-width: var(--dio-max-w); margin: 0 auto; padding: 8px 24px 48px; }

/* ── Sektionen ── */
.dio-section { padding: 32px 0; }
.dio-section + .dio-section { border-top: 1px solid var(--dio-creme); }
.dio-section h2 { font-size: 16px; font-weight: 600; color: var(--dio-erde); margin-bottom: 16px; letter-spacing: -0.01em; }
.dio-section p { font-size: 15px; line-height: 1.7; color: var(--dio-holz); }

/* ── Highlight ── */
.dio-highlight { background: var(--dio-leinen); border-left: 3px solid; border-radius: 0 var(--dio-radius-sm) var(--dio-radius-sm) 0; padding: 14px 20px; margin-bottom: 8px; }
.dio-highlight p { font-size: 14px; color: var(--dio-erde); line-height: 1.6; }

/* ── Suche + Filter ── */
.dio-search-section { max-width: var(--dio-max-w); margin: 0 auto; padding: 12px 24px 28px; }
.dio-search { width: 100%; padding: 12px 16px; font-size: 15px; font-family: var(--dio-font); border: 1px solid var(--dio-stein); border-radius: var(--dio-radius); background: var(--dio-leinen); color: var(--dio-erde); outline: none; transition: border-color 0.2s; }
.dio-search:focus { border-color: var(--dio-rinde); }
.dio-search::placeholder { color: var(--dio-nebel); }
.dio-filter { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dio-filter-btn { padding: 6px 14px; font-size: 13px; font-family: var(--dio-font); border: 1px solid var(--dio-stein); border-radius: 20px; background: var(--dio-weiss); color: var(--dio-nebel); cursor: pointer; transition: all 0.15s; }
.dio-filter-btn:hover { border-color: var(--dio-rinde); color: var(--dio-holz); }
.dio-filter-btn.active { background: var(--dio-erde); color: #fff; border-color: var(--dio-erde); }

/* ── Vereinskarten (Startseite) ── */
.dio-vereine-grid { max-width: var(--dio-max-w); margin: 0 auto; padding: 0 24px 48px; display: flex; flex-direction: column; gap: 2px; }
.dio-card { display: flex; justify-content: space-between; align-items: center; padding: 14px 12px; border-radius: 10px; transition: background 0.15s; }
.dio-card:hover { background: var(--dio-hover); }
.dio-card-name { font-size: 15px; font-weight: 500; color: var(--dio-erde); }
.dio-card-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dio-card-ort { font-size: 13px; color: var(--dio-nebel); }

/* ── Kontakt ── */
.dio-kontakt-box { background: var(--dio-leinen); border-radius: var(--dio-radius); padding: 24px 28px; }
.dio-kontakt { display: flex; flex-direction: column; gap: 10px; }
.dio-kontakt-row { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; }
.dio-kontakt-label { min-width: 90px; font-weight: 500; color: var(--dio-nebel); flex-shrink: 0; }
.dio-kontakt-row a { color: var(--dio-holz); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--dio-taupe); }
.dio-kontakt-row a:hover { text-decoration-color: var(--dio-holz); }

/* ── Trainingszeiten ── */
.dio-trainingszeiten { display: flex; flex-direction: column; gap: 0; }
.dio-tz-row { display: flex; gap: 16px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--dio-creme); align-items: baseline; }
.dio-tz-row:last-child { border-bottom: none; }
.dio-tz-tag { min-width: 32px; font-weight: 600; color: var(--dio-erde); font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.dio-tz-zeit { color: var(--dio-holz); font-weight: 500; }
.dio-tz-ort { color: var(--dio-nebel); font-size: 13px; }
.dio-tz-label { color: var(--dio-rinde); font-size: 13px; font-style: italic; }

/* ── Events ── */
.dio-events { display: flex; flex-direction: column; gap: 12px; }
.dio-event-row { display: flex; gap: 14px; align-items: flex-start; }
.dio-event-datum-box { min-width: 48px; text-align: center; background: var(--dio-leinen); border-radius: 8px; padding: 6px 8px; flex-shrink: 0; }
.dio-event-tag { font-size: 18px; font-weight: 600; color: var(--dio-erde); display: block; line-height: 1.2; }
.dio-event-monat { font-size: 11px; color: var(--dio-nebel); text-transform: uppercase; letter-spacing: 0.05em; }
.dio-event-info { padding-top: 2px; }
.dio-event-titel { font-size: 14px; font-weight: 500; color: var(--dio-erde); display: block; }
.dio-event-zeit { font-size: 13px; color: var(--dio-nebel); }

/* ── Abteilungen ── */
.dio-abteilungen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dio-abteilung-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--dio-stein); border-radius: var(--dio-radius); transition: background 0.15s; }
.dio-abteilung-card:hover { background: var(--dio-hover); }
.dio-abt-name { font-size: 15px; font-weight: 500; color: var(--dio-erde); }
.dio-abt-info { font-size: 13px; color: var(--dio-rinde); line-height: 1.5; }
.dio-abt-leitung { font-size: 12px; color: var(--dio-nebel); margin-top: 4px; }
.dio-abt-badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 10px; background: #EEF5EE; color: #468A46; margin-top: 4px; }

/* ── Vorstand ── */
.dio-vorstand-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.dio-vorstand-card { display: flex; align-items: center; gap: 12px; }
.dio-vorstand-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.dio-vorstand-name { font-size: 14px; font-weight: 500; color: var(--dio-erde); display: block; }
.dio-vorstand-rolle { font-size: 12px; color: var(--dio-nebel); display: block; }

/* ── Spenden ── */
.dio-spenden { background: var(--dio-leinen); border-radius: var(--dio-radius); padding: 24px 28px; }
.dio-spenden-grund { font-size: 14px; line-height: 1.6; color: var(--dio-holz); margin-bottom: 16px; }
.dio-spenden-details { display: flex; flex-direction: column; gap: 10px; }
.dio-spenden-row { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.dio-spenden-label { min-width: 120px; font-weight: 500; color: var(--dio-nebel); flex-shrink: 0; font-size: 13px; }
.dio-spenden-wert { font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; color: var(--dio-erde); font-size: 14px; letter-spacing: 0.03em; }
.dio-kopieren-btn { padding: 4px 12px; font-size: 12px; font-family: var(--dio-font); background: var(--dio-weiss); border: 1px solid var(--dio-stein); border-radius: 6px; color: var(--dio-nebel); cursor: pointer; transition: all 0.15s; }
.dio-kopieren-btn:hover { border-color: var(--dio-rinde); color: var(--dio-holz); }
.dio-kopieren-btn.kopiert { background: var(--dio-salbei); color: #fff; border-color: var(--dio-salbei); }
.dio-spenden-hinweis { font-size: 13px; color: var(--dio-nebel); margin-top: 12px; font-style: italic; }
.dio-spenden-link { display: inline-block; font-size: 13px; color: var(--dio-holz); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--dio-taupe); margin-top: 8px; margin-right: 16px; }

/* ── Chat-Widget ── */
.dio-chat-widget { max-width: var(--dio-max-w); margin: 32px auto 0; padding: 0 24px 24px; }
.dio-chat-container { background: var(--dio-leinen); border: 1px solid var(--dio-stein); border-radius: var(--dio-radius); padding: 20px 24px; }
.dio-chat-messages { max-height: 320px; overflow-y: auto; margin-bottom: 12px; display: none; }
.dio-chat-messages.aktiv { display: flex; flex-direction: column; gap: 8px; }
.dio-chat-msg { font-size: 14px; line-height: 1.6; padding: 8px 14px; border-radius: var(--dio-radius-sm); max-width: 85%; }
.dio-chat-msg.nutzer { background: var(--dio-weiss); color: var(--dio-holz); align-self: flex-end; border: 1px solid var(--dio-creme); }
.dio-chat-msg.lara { background: var(--dio-weiss); color: var(--dio-erde); align-self: flex-start; }
.dio-chat-form { display: flex; gap: 8px; }
.dio-chat-input { flex: 1; padding: 11px 16px; font-size: 14px; font-family: var(--dio-font); border: 1px solid var(--dio-stein); border-radius: var(--dio-radius); background: var(--dio-weiss); color: var(--dio-erde); outline: none; transition: border-color 0.15s; min-height: 44px; }
.dio-chat-input:focus { border-color: var(--dio-rinde); }
.dio-chat-input::placeholder { color: var(--dio-nebel); }
.dio-chat-send { padding: 11px 20px; font-size: 14px; font-family: var(--dio-font); font-weight: 500; background: var(--dio-erde); color: #fff; border: none; border-radius: var(--dio-radius); cursor: pointer; min-height: 44px; transition: opacity 0.15s; }
.dio-chat-send:hover { opacity: 0.85; }
.dio-chat-send:disabled { opacity: 0.5; cursor: default; }

/* ── Netzwerk (Vereins-Pills) ── */
.dio-netzwerk { display: flex; flex-wrap: wrap; gap: 8px; }
.dio-netzwerk-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--dio-leinen); border: 1px solid var(--dio-stein); border-radius: 20px; font-size: 13px; color: var(--dio-holz); transition: background 0.15s; }
.dio-netzwerk-link:hover { background: var(--dio-hover); }
.dio-netzwerk-name { font-weight: 500; }

/* ── Blog ── */
.dio-blog-eintrag { padding: 16px 0; }
.dio-blog-eintrag + .dio-blog-eintrag { border-top: 1px solid var(--dio-creme); }
.dio-blog-datum { font-size: 12px; color: var(--dio-nebel); }
.dio-blog-eintrag h3 { font-size: 15px; font-weight: 500; color: var(--dio-erde); margin: 4px 0; }
.dio-blog-eintrag p { font-size: 14px; }

/* ── Downloads ── */
.dio-downloads { display: flex; flex-direction: column; gap: 4px; }
.dio-download-link { font-size: 14px; color: var(--dio-holz); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--dio-taupe); padding: 8px 0; display: inline-block; }
.dio-download-link:hover { text-decoration-color: var(--dio-holz); }

/* ── Galerie ── */
.dio-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dio-galerie-item img { width: 100%; border-radius: var(--dio-radius-sm); display: block; }
.dio-galerie-item figcaption { font-size: 12px; color: var(--dio-nebel); margin-top: 4px; }

/* ── Beiträge ── */
.dio-beitraege { display: flex; flex-direction: column; gap: 0; }
.dio-beitrag-row { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--dio-creme); }
.dio-beitrag-row:last-child { border-bottom: none; }
.dio-beitrag-kat { color: var(--dio-erde); font-weight: 500; }
.dio-beitrag-betrag { color: var(--dio-nebel); }

/* ── Ehrenamt ── */
.dio-ehrenamt-row { padding: 12px 0; }
.dio-ehrenamt-row + .dio-ehrenamt-row { border-top: 1px solid var(--dio-creme); }
.dio-ehrenamt-row strong { font-size: 14px; color: var(--dio-erde); }
.dio-ehrenamt-row p { font-size: 14px; margin-top: 4px; }

/* ── Timeline ── */
.dio-timeline { display: flex; flex-direction: column; gap: 0; }
.dio-timeline-eintrag { display: flex; gap: 16px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--dio-creme); }
.dio-timeline-eintrag:last-child { border-bottom: none; }
.dio-timeline-jahr { min-width: 48px; font-weight: 600; color: var(--dio-erde); flex-shrink: 0; }

/* ── Blog-Artikel ── */
.dio-blog-artikel p { font-size: 15px; line-height: 1.75; color: var(--dio-holz); margin-bottom: 16px; }
.dio-blog-artikel p:last-child { margin-bottom: 0; }
.dio-blog-footer { text-align: center; padding: 32px 0 16px; }

/* ── Mannschaften (Abteilungs-Unterseite) ── */
.dio-mannschaften { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.dio-mannschaft-card { padding: 14px 16px; background: var(--dio-leinen); border-radius: var(--dio-radius-sm); }
.dio-mannschaft-name { font-size: 14px; font-weight: 500; color: var(--dio-erde); display: block; }
.dio-mannschaft-alter { font-size: 13px; color: var(--dio-nebel); display: block; margin-top: 2px; }
.dio-mannschaft-detail { font-size: 12px; color: var(--dio-nebel); display: block; }
.dio-zurueck-link { font-size: 13px; display: inline-block; margin-bottom: 8px; color: inherit; }
.dio-zurueck-link:hover { text-decoration: underline; }

/* ── Lara-Label ── */
.dio-lara-label { text-align: center; padding: 16px 24px; }
.dio-lara-label a { color: var(--dio-nebel); font-size: 13px; }
.dio-lara-label a:hover { color: var(--dio-holz); }

/* ── Wetter / Saison / Puls ── */
.dio-wetter-widget { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dio-nebel); padding: 8px 0; }
.dio-wetter-temp { font-size: 18px; font-weight: 600; color: var(--dio-erde); }
.dio-saisonstatus { font-size: 13px; color: var(--dio-nebel); padding: 4px 0; }

/* ── Lara-Box (Startseite) ── */
.dio-lara-box { text-align: center; padding: 36px 24px; margin-top: 16px; background: var(--dio-leinen); border-radius: var(--dio-radius); border: 1px solid var(--dio-stein); max-width: var(--dio-max-w); margin-left: auto; margin-right: auto; }
.dio-lara-box p { font-size: 15px; color: var(--dio-holz); margin-bottom: 16px; }
.dio-lara-btn { display: inline-block; padding: 10px 24px; font-size: 14px; font-weight: 500; font-family: var(--dio-font); background: var(--dio-erde); color: #fff; border-radius: 20px; border: none; cursor: pointer; transition: opacity 0.15s; }
.dio-lara-btn:hover { opacity: 0.85; color: #fff; }

/* ── Footer ── */
.dio-footer { border-top: 1px solid var(--dio-creme); padding: 20px 24px; font-size: 13px; color: var(--dio-nebel); }
.dio-footer-inner { max-width: var(--dio-max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.dio-footer a { color: var(--dio-taupe); }
.dio-footer a:hover { color: var(--dio-holz); }
.dio-footer-links { display: flex; gap: 16px; }

/* ── Responsive (Mobile-First) ── */
@media (max-width: 640px) {
    .dio-hero h1 { font-size: 24px; }
    .dio-verein-header h1 { font-size: 22px; }
    .dio-verein-header { padding: 40px 20px 32px; }
    .dio-verein-body { padding: 8px 20px 40px; }
    .dio-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 8px; }
    .dio-footer-inner { flex-direction: column; gap: 8px; text-align: center; }
    .dio-kontakt-row { flex-direction: column; gap: 2px; }
    .dio-kontakt-label { min-width: auto; }
    .dio-kontakt-box { padding: 20px; }
    .dio-spenden { padding: 20px; }
    .dio-spenden-row { flex-direction: column; gap: 6px; }
    .dio-spenden-label { min-width: auto; }
    .dio-abteilungen-grid { grid-template-columns: 1fr; }
    .dio-mannschaften { grid-template-columns: 1fr; }
    .dio-vorstand-grid { flex-direction: column; }
    .dio-chat-container { padding: 16px; }
    .dio-chat-form { flex-direction: column; }
    .dio-chat-send { width: 100%; }
    .dio-event-datum-box { min-width: 44px; }
}