body {
    background-color: #FFFDF9;
    color: #1F2937;
    -webkit-tap-highlight-color: transparent;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.mk-gradient {
    background: linear-gradient(135deg, #D32F2F 0%, #E53935 60%, #F57F17 100%);
}

/* ===== DARK MODE OVERRIDES ===== */
html.dark body {
    background-color: #121212 !important;
    color: #F3F4F6 !important;
}
html.dark .bg-white {
    background-color: #1E1E1E !important;
    color: #F3F4F6 !important;
}
html.dark .bg-gray-100 {
    background-color: #262626 !important;
}
html.dark .bg-gray-50, html.dark .bg-gray-50\/70 {
    background-color: #141414 !important;
}
html.dark .bg-amber-50, html.dark .bg-amber-50\/80, html.dark .bg-amber-50\/70, html.dark .bg-amber-50\/60, html.dark .bg-amber-50\/40 {
    background-color: #241E15 !important;
    border-color: #3D3220 !important;
}
html.dark .bg-amber-50 *, html.dark .bg-amber-50\/80 *, html.dark .bg-amber-50\/70 *, html.dark .bg-amber-50\/60 * {
    color: #FDE68A !important;
}

/* Modals & Dialoge im Dark Mode */
html.dark .modal > div {
    background-color: #1A1A1A !important;
    border-color: #333333 !important;
    color: #F3F4F6 !important;
}
html.dark .modal h3 {
    color: #FBBF24 !important;
}
html.dark .modal button[aria-label="Close"] {
    background-color: #2E2E2E !important;
    color: #F3F4F6 !important;
}

/* Kategorie-Kacheln im Formular (.ev-cat) */
html.dark .ev-cat-body {
    background: #252525 !important;
    border-color: #383838 !important;
    color: #F3F4F6 !important;
}
html.dark .ev-cat-green { --soft: #064E3B; --c: #10B981; --bd: #059669; }
html.dark .ev-cat-blue { --soft: #075985; --c: #38BDF8; --bd: #0284C7; }
html.dark .ev-cat-yellow { --soft: #78350F; --c: #FBBF24; --bd: #D97706; }
html.dark .ev-cat-red { --soft: #881337; --c: #F87171; --bd: #DC2626; }
html.dark .ev-cat input:checked + .ev-cat-body {
    background: var(--soft) !important;
    border-color: var(--c) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 2px var(--bd) !important;
}

/* Publisher Radios (Приватно лице / Друштво) */
html.dark .bg-sky-50\/70 {
    background-color: #075985 !important;
    border-color: #0284C7 !important;
    color: #FFFFFF !important;
}
html.dark .bg-sky-50\/70 * {
    color: #FFFFFF !important;
}

/* Datum- & Zeit- & Text-Eingabefelder im Dark Mode */
html.dark input,
html.dark textarea,
html.dark select,
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"] {
    background-color: #222222 !important;
    color: #FFFFFF !important;
    border-color: #3D3D3D !important;
    color-scheme: dark !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9CA3AF !important;
}
html.dark input[type="file"]::file-selector-button {
    background-color: #383838 !important;
    color: #FBBF24 !important;
}

/* Abbrechen Button (Откажи) in Modals */
html.dark button[data-i18n="btn_cancel"] {
    color: #D1D5DB !important;
}
html.dark button[data-i18n="btn_cancel"]:hover {
    background-color: #2D2D2D !important;
}

/* Banner-Karten oben (Kalender, News, Board, Market, Directory) */
html.dark .bg-gradient-to-r,
html.dark .bg-gradient-to-br {
    background: linear-gradient(135deg, #1E1E1E 0%, #262626 100%) !important;
    border-color: #383838 !important;
}
html.dark .bg-gradient-to-r h2,
html.dark .bg-gradient-to-br h2,
html.dark .bg-gradient-to-br h3,
html.dark #calendar-month-title {
    color: #FBBF24 !important;
}
html.dark .bg-gradient-to-r h2 *,
html.dark .bg-gradient-to-br h2 *,
html.dark .bg-gradient-to-br h3 * {
    color: #FBBF24 !important;
}
html.dark .bg-gradient-to-r p,
html.dark .bg-gradient-to-br p {
    color: #D1D5DB !important;
}

/* Goldene/Gelbe Buttons & Badges (wie + Нов оглас & Пријави го вашиот настан) */
html.dark .bg-mkSun-400, html.dark .bg-mkSun-500 {
    background-color: #FBBF24 !important;
    color: #111827 !important;
}
html.dark .bg-mkSun-400 *, html.dark .bg-mkSun-500 * {
    color: #111827 !important;
}

/* Kalender-Raster & Tage */
html.dark #monthly-calendar-wrapper {
    background-color: #1A1A1A !important;
    border-color: #383838 !important;
}
html.dark #calendar-grid-days > div {
    border-color: #2D2D2D !important;
}
html.dark #calendar-grid-days .bg-white {
    background-color: #1E1E1E !important;
}
html.dark #calendar-grid-days .bg-amber-50\/40 {
    background-color: #171717 !important;
}
html.dark #calendar-grid-days .bg-slate-200 {
    background-color: #2D3748 !important;
}
html.dark #calendar-grid-days span.font-extrabold {
    color: #F3F4F6 !important;
}

/* Kalender Chips & Event-Badges in Dark Mode */
html.dark .bg-amber-200\/90, html.dark .bg-amber-100, html.dark .bg-amber-400 {
    background-color: #D97706 !important;
    color: #FFFFFF !important;
    border-color: #F59E0B !important;
}
html.dark .bg-amber-200\/90 *, html.dark .bg-amber-100 *, html.dark .bg-amber-400 * {
    color: #FFFFFF !important;
}
html.dark .bg-emerald-200\/90, html.dark .bg-emerald-100, html.dark .bg-emerald-500 {
    background-color: #059669 !important;
    color: #FFFFFF !important;
    border-color: #10B981 !important;
}
html.dark .bg-emerald-200\/90 *, html.dark .bg-emerald-100 *, html.dark .bg-emerald-500 * {
    color: #FFFFFF !important;
}
html.dark .bg-sky-200\/90, html.dark .bg-sky-100, html.dark .bg-sky-500 {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
    border-color: #38BDF8 !important;
}
html.dark .bg-sky-200\/90 *, html.dark .bg-sky-100 *, html.dark .bg-sky-500 * {
    color: #FFFFFF !important;
}
html.dark .bg-rose-200\/90, html.dark .bg-rose-100, html.dark .bg-mkRed-600 {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #F87171 !important;
}
html.dark .bg-rose-200\/90 *, html.dark .bg-rose-100 * {
    color: #FFFFFF !important;
}

/* Schwebender Aktions-Button unten */
html.dark #btn-new-event {
    background-color: #FBBF24 !important;
    color: #111827 !important;
    box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4) !important;
}
html.dark #btn-new-event * {
    color: #111827 !important;
}

/* Kategorie-Buttons (board-tab, mk-chip, seg-btn) */
html.dark .board-tab {
    background-color: #222222 !important;
    color: #E5E7EB !important;
    border-color: #383838 !important;
}
html.dark .board-tab.is-active {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
    border-color: #EF4444 !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
}
html.dark #market-intent {
    background-color: #1A1A1A !important;
    border-color: #333333 !important;
}
html.dark .seg-btn {
    color: #9CA3AF !important;
}
html.dark .seg-btn.is-active {
    background-color: #2D2D2D !important;
    color: #FBBF24 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
html.dark .seg-btn.is-active .seg-count {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Vereins-Highlights & Registrierung */
html.dark #dir-highlights {
    background-color: #1E1E1E !important;
    border-color: #383838 !important;
}
html.dark #dir-highlights * {
    color: #F3F4F6 !important;
}
html.dark .bg-emerald-50, html.dark .bg-emerald-50\/70 {
    background-color: #064E3B !important;
    border-color: #047857 !important;
    color: #FFFFFF !important;
}
html.dark .bg-emerald-50 *, html.dark .bg-emerald-50\/70 * {
    color: #FFFFFF !important;
}
html.dark .bg-emerald-50 .bg-white, html.dark .bg-emerald-50\/70 .bg-white {
    background-color: #047857 !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
}
html.dark .cta-more ul li {
    background-color: #252525 !important;
    border-color: #383838 !important;
    color: #E5E7EB !important;
}
html.dark .cta-more summary {
    color: #F87171 !important;
}
html.dark #dir-cta-join {
    background-color: #242424 !important;
    color: #F87171 !important;
    border-color: #DC2626 !important;
}

/* Suche & Eingabefelder */
html.dark #dir-search, html.dark input[type="search"], html.dark input[type="text"], html.dark textarea, html.dark select {
    background-color: #222222 !important;
    color: #FFFFFF !important;
    border-color: #3B3B3B !important;
}
html.dark input::placeholder, html.dark textarea::placeholder {
    color: #9CA3AF !important;
}
html.dark .border-gray-200,
html.dark .border-gray-200\/80,
html.dark .border-gray-300 {
    border-color: #333333 !important;
}
html.dark .border-amber-200,
html.dark .border-amber-200\/70,
html.dark .border-amber-300 {
    border-color: #4A3A20 !important;
}
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700 {
    color: #F3F4F6 !important;
}
html.dark .text-gray-600,
html.dark .text-gray-500 {
    color: #9CA3AF !important;
}
html.dark .text-amber-950,
html.dark .text-amber-900 {
    color: #FDE68A !important;
}

/* Untere Navigationsleiste */
html.dark nav.fixed.bottom-0 {
    background-color: #1A1A1A !important;
    border-color: #2B2B2B !important;
}
html.dark nav.fixed.bottom-0 .text-gray-500 {
    color: #9CA3AF !important;
}
html.dark nav.fixed.bottom-0 .text-mkRed-600.bg-red-50 {
    background-color: #321616 !important;
    color: #F87171 !important;
}
html.dark .card-shadow {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.4) !important;
}
html.dark #demo-bar {
    background-color: #221208 !important;
}
/* Verzeichnis: Reiter seitlich wischbar, ohne sichtbare Scrollleiste */
#dir-tabs { scrollbar-width: none; }
#dir-tabs::-webkit-scrollbar { display: none; }

/* Verzeichnis: aufklappbare Eintraege */
.dir-item > summary,
.cmp-item > summary,
.cta-more > summary { list-style: none; }
.dir-item > summary::-webkit-details-marker,
.cmp-item > summary::-webkit-details-marker,
.cta-more > summary::-webkit-details-marker { display: none; }
.dir-item[open] .dir-chevron,
.cmp-item[open] .cmp-chevron,
.cta-more[open] .cta-chevron { transform: rotate(180deg); }

.card-shadow {
    box-shadow: 0 4px 20px -2px rgba(211, 47, 47, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
}

/* ===== Edge-to-Edge (Android): Statusleiste, Kamera-Loch, Navigationsleiste =====
   Die App (MainActivity) setzt --sat/--sab/--sal/--sar (Pixel) und --cut-x/--cut-y/--cut-d (Kamera-Loch). */
:root { --sat: 0px; --sab: 0px; --sal: 0px; --sar: 0px; }
body { padding-top: var(--sat); padding-left: var(--sal); padding-right: var(--sar); }
.sat-scrim {
    position: fixed; top: 0; left: 0; right: 0; height: var(--sat);
    z-index: 60; pointer-events: none; overflow: hidden;
    background: transparent !important;
}
.demo-bar { top: var(--sat, 0px) !important; }
.cutout-sun, .hdr-sun, .hdr-bg-sun { display: none !important; }

/* Kompakter Edge-to-Edge Header */
.app-header {
    margin-top: calc(-1 * var(--sat, 0px));
    padding-top: var(--sat, 0px);
}

/* Kutlesh-Sonne exakt im Notch / Kamera-Loch des Pixel 10 Pro zentrieren & nach unten hin abflauen/abdimmen */
.hdr-top-sun {
    position: absolute;
    left: var(--cut-x, 50%);
    top: var(--cut-y, max(18px, calc(var(--sat, 28px) / 2)));
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 120px;
    height: 120px;
    pointer-events: none;
}
.hdr-top-sun img {
    width: 100%;
    height: 100%;
    /* Nach unten hin sanft abflauen / abdimmen für maximale Lesbarkeit des Titels */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 40%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 40%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 100%);
}
@media (max-width: 767px) {
    body { padding-bottom: calc(6rem + var(--sab)) !important; }
    nav.fixed.bottom-0 { padding-bottom: calc(.375rem + var(--sab)) !important; }
    #btn-new-event { bottom: calc(6rem + var(--sab)) !important; }
}

/* ===== Dialoge: nie oben abgeschnitten, bei langen Formularen scrollbar ===== */
.modal {
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
    padding-top: calc(var(--sat) + 1rem) !important;
    padding-bottom: calc(var(--sab) + 1rem) !important;
}
.modal > div { margin-top: auto !important; margin-bottom: auto !important; }

/* ===== Anzeigen & Markt: dynamische, Barrierefreie Kategorie-Reiter ===== */
.board-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden;
    padding: 6px 4px; border-radius: 14px; border: 1px solid #D1D5DB; background: #fff; color: #374151;
    font-weight: 700; font-size: 11px; text-align: center; transition: all .15s;
    min-height: 54px; height: auto;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
}
.board-tab > span {
    min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center;
}
@media (min-width: 640px) { .board-tab { flex-direction: row; gap: 8px; font-size: 14px; padding: 10px 8px; } }
.board-tab.is-active { background: #D32F2F; border-color: #B71C1C; color: #fff; box-shadow: 0 2px 6px rgba(211, 47, 47, .3); }
/* Markt: Reiter in einer Zeile, seitlich wischbar */
.mk-chip {
    flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; border-radius: 999px;
    border: 1px solid #D1D5DB; background: #fff; color: #374151; font-weight: 700; font-size: 13px; transition: all .15s;
}
.mk-chip.is-active { background: #D32F2F; border-color: #B71C1C; color: #fff; box-shadow: 0 2px 6px rgba(211, 47, 47, .3); }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.cat-grid > .board-tab { min-width: 0; }
.cat-grid.cat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#dir-tabs.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { #dir-tabs.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Kategorie-Auswahl im Termin-Formular: Kacheln wie bei den Anzeigen */
.ev-cat { display: block; cursor: pointer; }
.ev-cat-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 62px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid #D1D5DB; background: #fff;
    color: #374151; font-weight: 700; font-size: 11px; text-align: center; transition: all .15s;
}
.ev-cat-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.ev-cat-green { --c: #10B981; --soft: #ECFDF5; --bd: #34D399; }
.ev-cat-blue { --c: #0EA5E9; --soft: #F0F9FF; --bd: #38BDF8; }
.ev-cat-yellow { --c: #FBBF24; --soft: #FFFBEB; --bd: #FBBF24; }
.ev-cat-purple { --c: #8B5CF6; --soft: #F3E8FF; --bd: #C084FC; }
.ev-cat-red { --c: #E11D48; --soft: #FFF1F2; --bd: #FB7185; }
.ev-cat input:checked + .ev-cat-body { background: var(--soft); border-color: var(--c); box-shadow: 0 0 0 2px var(--bd); color: #111827; }
.ev-cat input:focus-visible + .ev-cat-body { outline: 2px solid #D32F2F; outline-offset: 2px; }
#ev-cat-news { grid-column: 1 / -1; }
#ev-cat-news .ev-cat-body { flex-direction: row; min-height: 0; padding: 8px; }
.ev-cat.hidden { display: none !important; }

/* Vereine: Anzahl in der Kategorie-Kachel */
.dir-count { font-size: 10px; font-weight: 800; line-height: 1; padding: 2px 7px; border-radius: 999px; background: #F3F4F6; color: #4B5563; }
.board-tab.is-active .dir-count { background: rgba(255,255,255,.28); color: #fff; }
.board-tab.is-empty { opacity: .55; }

/* Umschalter (z. B. Markt: Alle / Zu verkaufen / Gesucht) */
.seg-btn { white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0; max-width: 100%; overflow: hidden; padding: 8px 2px; border-radius: 12px; font-size: 12px; font-weight: 800; color: #4B5563; background: transparent; transition: all .15s; line-height: 1.15; }
#market-intent { min-width: 0; }
#market-intent > .seg-btn { min-width: 0; overflow: hidden; }

.cal-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; min-width: 0; }
.cal-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.1; }
.cal-pill > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.cal-dow-row { display: grid; grid-template-columns: repeat(5, minmax(0, 0.75fr)) minmax(0, 2.5fr) minmax(0, 2.5fr); min-width: 0; }
.cal-dow { min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.1; padding: 0 1px; font-size: 12px; text-align: center; }
.cal-dow-end { font-size: 11px; }
nav.fixed.bottom-0 > button { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 20%; overflow: hidden; }
nav.fixed.bottom-0 > button span { display: block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; line-height: 1.05; }
.seg-btn .seg-count { display: inline-block; margin-left: 3px; padding: 1px 6px; border-radius: 999px; font-size: 10px; background: #E5E7EB; color: #4B5563; }
.seg-btn.is-active { background: #fff; color: #B71C1C; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.seg-btn.is-active .seg-count { background: #D32F2F; color: #fff; }

/* ---- Kompakter Header: Logo | Titel | Buttons, darunter Slogan ---- */
.hdr-grid { display: grid; grid-template-columns: auto minmax(0,1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center; }
.hdr-logo { grid-column: 1; grid-row: 1; }
.hdr-title { grid-column: 2; grid-row: 1; }
.hdr-actions { grid-column: 3; grid-row: 1; }
.hdr-tag { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 640px) {
  .hdr-grid { row-gap: 2px; column-gap: 12px; }
  .hdr-logo { grid-row: 1 / span 2; }
  .hdr-title { align-self: end; }
  .hdr-tag { grid-column: 2; grid-row: 2; align-self: start; }
  .hdr-actions { grid-row: 1 / span 2; }
}

/* Adress-Vorschläge unter dem Eingabefeld */
.addr-field { position: relative; }
.addr-suggest {
    position: absolute; left: 0; right: 0; z-index: 30;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 220px; overflow: auto;
}
.addr-suggest.hidden { display: none; }
.addr-suggest button {
    display: block; width: 100%; text-align: left; background: #fff; border: 0;
    border-bottom: 1px solid #F3F4F6; padding: 8px 12px; cursor: pointer;
}
.addr-suggest button span { display: block; font-size: 13px; font-weight: 700; color: #111827; }
.addr-suggest button small { display: block; font-size: 11px; font-weight: 600; color: #6B7280; }
.addr-suggest button.is-active, .addr-suggest button:hover { background: #FEF3C7; }
.addr-hint { margin: 4px 2px 0; font-size: 11px; line-height: 1.3; color: #6B7280; font-weight: 600; }