/* ============================================================
   Dorf-Pinnwand – Theme Switcher Styles
   4 Farbthemes × 2 Layouts
   ============================================================ */


/* Ensure body background picks up theme variable */
html[data-dp-theme] body,
html[data-dp-theme] .dp-frontend {
  background-color: var(--dp-bg);
  color: var(--dp-text-body);
}
html[data-dp-theme="alpine"] body {
  background-color: #0F172A;
  color: #CBD5E1;
}

/* ── Theme: Rustikal (Standard, bereits in :root definiert) ─ */
html[data-dp-theme="rustikal"] {
  --dp-primary:        #8B5E3C;
  --dp-primary-dark:   #6B4428;
  --dp-primary-light:  #F2E8D9;
  --dp-accent:         #C8861A;
  --dp-accent-dark:    #A06A10;
  --dp-accent-light:   #FDF3E0;
  --dp-bg:             #F5EFE0;
  --dp-card-bg:        #FFFDF7;
  --dp-border:         #E0D5C0;
  --dp-border-warm:    #D4C4A0;
  --dp-text:           #3D2B1A;
  --dp-text-body:      #5C4030;
  --dp-muted:          #8A7060;
  --dp-shadow-sm:      0 2px 8px rgba(139,94,60,.10);
  --dp-shadow-md:      0 4px 20px rgba(139,94,60,.15);
  --dp-shadow-card:    0 2px 12px rgba(139,94,60,.12);
  --dp-font:           'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif;
  --dp-radius:         16px;
}

/* ── Theme: Modern Urban ────────────────────────────────────── */
html[data-dp-theme="urban"] {
  --dp-primary:        #1E293B;
  --dp-primary-dark:   #0F172A;
  --dp-primary-light:  #E2E8F0;
  --dp-accent:         #3B82F6;
  --dp-accent-dark:    #2563EB;
  --dp-accent-light:   #EFF6FF;
  --dp-bg:             #F1F5F9;
  --dp-card-bg:        #FFFFFF;
  --dp-border:         #CBD5E1;
  --dp-border-warm:    #94A3B8;
  --dp-text:           #0F172A;
  --dp-text-body:      #334155;
  --dp-muted:          #64748B;
  --dp-shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --dp-shadow-md:      0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --dp-shadow-card:    0 1px 6px rgba(0,0,0,.08);
  --dp-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dp-radius:         10px;
}
html[data-dp-theme="urban"] .dp-village-banner-text h1,
html[data-dp-theme="urban"] h1, html[data-dp-theme="urban"] h2,
html[data-dp-theme="urban"] h3, html[data-dp-theme="urban"] .dp-post-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}
html[data-dp-theme="urban"] .dp-village-banner-text {
  background: linear-gradient(to bottom, rgba(15,23,42,.1) 0%, rgba(15,23,42,.6) 100%);
}
html[data-dp-theme="urban"] .dp-village-banner-text h1,
html[data-dp-theme="urban"] .dp-village-banner-text p { color: #fff; text-shadow: none; }
html[data-dp-theme="urban"] .dp-kat-btn {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
}
html[data-dp-theme="urban"] .dp-kat-btn--active {
  background: var(--dp-accent);
  color: #fff;
  border-color: var(--dp-accent);
}
html[data-dp-theme="urban"] .dp-post-card { border-radius: 10px; border-width: 1px; }
html[data-dp-theme="urban"] .dp-post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(59,130,246,.18); }
html[data-dp-theme="urban"] .dp-btn-primary { background: var(--dp-accent); border-color: var(--dp-accent); border-radius: 8px; }
html[data-dp-theme="urban"] .dp-btn-primary:hover { background: var(--dp-accent-dark); }

/* ── Theme: Alpine Dark ─────────────────────────────────────── */
html[data-dp-theme="alpine"] {
  --dp-primary:        #E2E8F0;
  --dp-primary-dark:   #F8FAFC;
  --dp-primary-light:  #1E293B;
  --dp-accent:         #34D399;
  --dp-accent-dark:    #10B981;
  --dp-accent-light:   #064E3B;
  --dp-bg:             #0F172A;
  --dp-card-bg:        #1E293B;
  --dp-border:         #334155;
  --dp-border-warm:    #475569;
  --dp-text:           #F1F5F9;
  --dp-text-body:      #CBD5E1;
  --dp-muted:          #64748B;
  --dp-shadow-sm:      0 2px 8px rgba(0,0,0,.4);
  --dp-shadow-md:      0 4px 20px rgba(0,0,0,.5);
  --dp-shadow-card:    0 2px 12px rgba(0,0,0,.4);
  --dp-font:           'Courier New', Courier, monospace;
  --dp-radius:         8px;
  --dp-success:        #34D399;
  --dp-error:          #F87171;
}
html[data-dp-theme="alpine"] .dp-frontend { color: var(--dp-text-body); }
html[data-dp-theme="alpine"] .dp-village-banner-text { background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(15,23,42,.85)); }
html[data-dp-theme="alpine"] .dp-village-banner-text h1,
html[data-dp-theme="alpine"] .dp-village-banner-text p { color: #fff; text-shadow: 0 0 20px rgba(52,211,153,.4); }
html[data-dp-theme="alpine"] .dp-village-banner-text h1 { color: #34D399; }
html[data-dp-theme="alpine"] h1, html[data-dp-theme="alpine"] h2, html[data-dp-theme="alpine"] h3,
html[data-dp-theme="alpine"] .dp-post-title { color: var(--dp-text); font-family: var(--dp-font-body); }
html[data-dp-theme="alpine"] .dp-post-card { background: #1E293B; border-color: #334155; }
html[data-dp-theme="alpine"] .dp-post-card:hover { box-shadow: 0 0 0 1px #34D399, 0 8px 24px rgba(52,211,153,.15); transform: translateY(-2px); }
html[data-dp-theme="alpine"] .dp-post-kat { background: #064E3B; color: #34D399; border-color: #065F46; }
html[data-dp-theme="alpine"] .dp-post-excerpt, html[data-dp-theme="alpine"] .dp-post-meta { color: #94A3B8; }
html[data-dp-theme="alpine"] .dp-kat-btn { background: #1E293B; border-color: #334155; color: #CBD5E1; }
html[data-dp-theme="alpine"] .dp-kat-btn--active { background: #064E3B; color: #34D399; border-color: #065F46; }
html[data-dp-theme="alpine"] .dp-pinnwand-header { background: #1E293B; border-color: #334155; }
html[data-dp-theme="alpine"] .dp-btn-primary { background: #059669; border-color: #059669; }
html[data-dp-theme="alpine"] .dp-btn-primary:hover { background: #047857; }
html[data-dp-theme="alpine"] .dp-btn-outline { border-color: #334155; color: #CBD5E1; }
html[data-dp-theme="alpine"] .dp-modal-content { background: #1E293B; border-color: #334155; }
html[data-dp-theme="alpine"] .dp-input { background: #0F172A; border-color: #334155; color: #F1F5F9; }
html[data-dp-theme="alpine"] .dp-input::placeholder { color: #475569; }
html[data-dp-theme="alpine"] .dp-kategorien-nav { background: #1E293B; border-color: #334155; }
html[data-dp-theme="alpine"] .dp-expiry-badge { background: #1E3A5F; color: #93C5FD; }
html[data-dp-theme="alpine"] .dp-load-more { background: #1E293B; border-color: #334155; color: #CBD5E1; }
html[data-dp-theme="alpine"] a { color: #34D399; }

/* ── Theme: Fresh Spring ────────────────────────────────────── */
html[data-dp-theme="spring"] {
  --dp-primary:        #166534;
  --dp-primary-dark:   #14532D;
  --dp-primary-light:  #DCFCE7;
  --dp-accent:         #F59E0B;
  --dp-accent-dark:    #D97706;
  --dp-accent-light:   #FEF3C7;
  --dp-bg:             #F0FDF4;
  --dp-card-bg:        #FFFFFF;
  --dp-border:         #BBF7D0;
  --dp-border-warm:    #86EFAC;
  --dp-text:           #14532D;
  --dp-text-body:      #166534;
  --dp-muted:          #4ADE80;
  --dp-shadow-sm:      0 2px 8px rgba(22,101,52,.08);
  --dp-shadow-md:      0 4px 20px rgba(22,101,52,.12);
  --dp-shadow-card:    0 2px 10px rgba(22,101,52,.10);
  --dp-font:           'Georgia', serif;
  --dp-radius:         20px;
}
html[data-dp-theme="spring"] .dp-village-banner-text { background: linear-gradient(to bottom, rgba(240,253,244,.1), rgba(240,253,244,.6)); }
html[data-dp-theme="spring"] .dp-kat-btn--active { background: var(--dp-primary); color: #fff; border-color: var(--dp-primary); }
html[data-dp-theme="spring"] .dp-post-card { border-radius: 20px; }
html[data-dp-theme="spring"] .dp-post-card:hover { box-shadow: 0 8px 30px rgba(22,101,52,.15); transform: translateY(-3px) scale(1.01); }
html[data-dp-theme="spring"] .dp-post-kat { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
html[data-dp-theme="spring"] .dp-btn-primary { background: #16A34A; border-color: #16A34A; border-radius: 50px; }
html[data-dp-theme="spring"] .dp-btn-primary:hover { background: #15803D; }
html[data-dp-theme="spring"] .dp-btn-outline { border-radius: 50px; }
html[data-dp-theme="spring"] .dp-pinnwand-header { border-radius: 20px; }
html[data-dp-theme="spring"] .dp-kategorien-nav { border-radius: 20px; }
html[data-dp-theme="spring"] a { color: var(--dp-primary); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT VARIATIONS
   ══════════════════════════════════════════════════════════════ */

/* ── Layout: Liste ──────────────────────────────────────────── */
html[data-dp-layout="list"] .dp-posts-grid {
  grid-template-columns: 1fr !important;
  gap: .6rem !important;
}
html[data-dp-layout="list"] .dp-post-card {
  flex-direction: row !important;
  align-items: stretch;
  min-height: 0;
}
html[data-dp-layout="list"] .dp-post-thumb {
  width: 130px !important;
  height: 100% !important;
  min-height: 100px;
  flex-shrink: 0;
  border-radius: 0;
}
html[data-dp-layout="list"] .dp-post-thumb-placeholder {
  width: 130px !important;
  height: auto !important;
  min-height: 100px;
  flex-shrink: 0;
  border-radius: 0;
  font-size: 1.8rem !important;
}
html[data-dp-layout="list"] .dp-post-body {
  padding: .6rem .85rem .4rem !important;
  flex: 1;
  min-width: 0;
}
html[data-dp-layout="list"] .dp-post-title {
  font-size: 1rem !important;
  margin-bottom: .2rem !important;
}
html[data-dp-layout="list"] .dp-post-excerpt {
  font-size: .82rem;
  -webkit-line-clamp: 2 !important;
}
html[data-dp-layout="list"] .dp-post-footer {
  padding: .4rem .85rem .55rem !important;
}
html[data-dp-layout="list"] .dp-img-count { display: none; }

/* ── Theme Switcher Widget ──────────────────────────────────── */
.dp-theme-switcher {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--dp-card-bg);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-sm, 10px);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.dp-theme-switcher-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--dp-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.dp-theme-switcher-group {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
}
.dp-theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.dp-theme-btn:hover { transform: scale(1.18); }
.dp-theme-btn.active { border-color: var(--dp-text) !important; box-shadow: 0 0 0 2px var(--dp-card-bg), 0 0 0 4px var(--dp-text); }
.dp-theme-btn[data-theme="rustikal"] { background: linear-gradient(135deg, #8B5E3C 50%, #C8861A 50%); }
.dp-theme-btn[data-theme="urban"]    { background: linear-gradient(135deg, #1E293B 50%, #3B82F6 50%); }
.dp-theme-btn[data-theme="alpine"]   { background: linear-gradient(135deg, #0F172A 50%, #34D399 50%); }
.dp-theme-btn[data-theme="spring"]   { background: linear-gradient(135deg, #166534 50%, #F59E0B 50%); }

.dp-layout-divider {
  width: 1px; height: 20px;
  background: var(--dp-border);
  margin: 0 .1rem;
}
.dp-layout-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--dp-border);
  background: transparent;
  color: var(--dp-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
  font-size: .9rem;
}
.dp-layout-btn:hover, .dp-layout-btn.active {
  background: var(--dp-accent-light);
  color: var(--dp-accent);
  border-color: var(--dp-accent);
}
html[data-dp-theme="alpine"] .dp-layout-btn:hover,
html[data-dp-theme="alpine"] .dp-layout-btn.active {
  background: #064E3B;
  color: #34D399;
  border-color: #065F46;
}

/* Responsive: Switcher kompakt auf mobil */
@media (max-width: 600px) {
  .dp-theme-switcher { gap: .5rem; padding: .5rem .75rem; }
  .dp-theme-btn { width: 24px; height: 24px; }
}


/* ══════════════════════════════════════════════════════════════
   SITE-WIDE THEME OVERRIDES (Header, Footer, Body)
   Überschreibt die CSS-Variablen des WordPress-Themes
   ══════════════════════════════════════════════════════════════ */

/* ── Urban: Blau/Dunkelblau ─────────────────────────────────── */
html[data-dp-theme="urban"] {
  --dp-brown:          #1E293B;
  --dp-brown-dark:     #0F172A;
  --dp-brown-light:    #334155;
  --dp-ochre:          #3B82F6;
  --dp-ochre-dark:     #2563EB;
  --dp-ochre-light:    #DBEAFE;
  --dp-cream:          #F1F5F9;
  --dp-cream-dark:     #E2E8F0;
  --dp-white:          #FFFFFF;
  --dp-border:         #CBD5E1;
  --dp-text:           #0F172A;
  --dp-text-body:      #334155;
  --dp-muted:          #64748B;
  --dp-font-display:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[data-dp-theme="urban"] body { background-color: #F1F5F9; }
html[data-dp-theme="urban"] h1,
html[data-dp-theme="urban"] h2,
html[data-dp-theme="urban"] h3 { color: #1E293B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html[data-dp-theme="urban"] a { color: #3B82F6; }

/* ── Alpine Dark ─────────────────────────────────────────────── */
html[data-dp-theme="alpine"] {
  --dp-brown:          #94A3B8;
  --dp-brown-dark:     #1E293B;
  --dp-brown-light:    #334155;
  --dp-ochre:          #34D399;
  --dp-ochre-dark:     #10B981;
  --dp-ochre-light:    #064E3B;
  --dp-cream:          #1E293B;
  --dp-cream-dark:     #0F172A;
  --dp-white:          #1E293B;
  --dp-border:         #334155;
  --dp-text:           #F1F5F9;
  --dp-text-body:      #CBD5E1;
  --dp-muted:          #64748B;
  --dp-font-display:   'Courier New', monospace;
}
html[data-dp-theme="alpine"] body { background-color: #0F172A; color: #CBD5E1; }
html[data-dp-theme="alpine"] h1,
html[data-dp-theme="alpine"] h2,
html[data-dp-theme="alpine"] h3 { color: #34D399; font-family: 'Courier New', monospace; }
html[data-dp-theme="alpine"] a { color: #34D399; }
html[data-dp-theme="alpine"] #dp-site-header { background: #1E293B; border-bottom: 1px solid #334155; }
html[data-dp-theme="alpine"] .dp-site-name { color: #34D399 !important; }
html[data-dp-theme="alpine"] .dp-nav-list li a { color: #CBD5E1; }
html[data-dp-theme="alpine"] .dp-nav-list li a:hover { color: #34D399; }

/* ── Fresh Spring ────────────────────────────────────────────── */
html[data-dp-theme="spring"] {
  --dp-brown:          #166534;
  --dp-brown-dark:     #14532D;
  --dp-brown-light:    #DCFCE7;
  --dp-ochre:          #F59E0B;
  --dp-ochre-dark:     #D97706;
  --dp-ochre-light:    #FEF3C7;
  --dp-cream:          #F0FDF4;
  --dp-cream-dark:     #DCFCE7;
  --dp-white:          #FFFFFF;
  --dp-border:         #BBF7D0;
  --dp-text:           #14532D;
  --dp-text-body:      #166534;
  --dp-muted:          #16A34A;
  --dp-font-display:   'Georgia', serif;
}
html[data-dp-theme="spring"] body { background-color: #F0FDF4; }
html[data-dp-theme="spring"] h1,
html[data-dp-theme="spring"] h2,
html[data-dp-theme="spring"] h3 { color: #166534; }
html[data-dp-theme="spring"] a { color: #16A34A; }
html[data-dp-theme="spring"] #dp-site-footer { background: #14532D; }
html[data-dp-theme="spring"] .dp-footer-illustration {
  background: linear-gradient(to bottom, #F0FDF4 0%, #DCFCE7 40%, #166534 100%);
}
html[data-dp-theme="spring"] .dp-footer-illustration::after { background: #14532D; }

/* Header-Anpassungen für alle Themes */
html[data-dp-theme="urban"] #dp-site-header { background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.08); }
html[data-dp-theme="urban"] .dp-site-name { color: #1E293B !important; }
html[data-dp-theme="urban"] .dp-nav-list li a { color: #334155; }
html[data-dp-theme="urban"] .dp-nav-list li a:hover { color: #3B82F6; }
html[data-dp-theme="urban"] .dp-btn { border-radius: 8px; }
html[data-dp-theme="urban"] #dp-site-footer { background: #0F172A; }
html[data-dp-theme="urban"] .dp-footer-illustration {
  background: linear-gradient(to bottom, #F1F5F9 0%, #CBD5E1 40%, #1E293B 100%);
}
html[data-dp-theme="urban"] .dp-footer-illustration::after { background: #0F172A; }

html[data-dp-theme="spring"] .dp-site-name { color: #166534 !important; }
html[data-dp-theme="spring"] .dp-nav-list li a { color: #166534; }
html[data-dp-theme="spring"] .dp-nav-list li a:hover { color: #15803D; }
html[data-dp-theme="spring"] .dp-btn-primary-header,
html[data-dp-theme="spring"] .dp-btn { border-radius: 50px; }