/* =========================================================
   Smart Village App Community – main.css (NEU, konsolidiert)
   Enthält:
   - CI (Blau/Orange), Ubuntu, viel Weiß/Fläche
   - Header/Nav + Burger nur Mobile
   - Hero mit Bild
   - Impact ("Gemeinsam erreicht") auf blauem Parallax (wie früher Open-Source-Block)
   - Open Source Block grau/schwarz am Ende vor Footer
   - CTA "Mehr erfahren" in jedem Container
   - Logo-Slider + Caption
   - Footer Links orange
   ========================================================= */

/* ---------- CI / Tokens ---------- */
:root{
  --color-primary: #0B2C59;     /* Blau (Dark) */
  --color-primary-2: #1E62B3;   /* Blau (Light) */
  --color-accent: #F6A623;      /* Orange */
  --color-text: #0F172A;
  --color-text-muted: rgba(15, 23, 42, .72);
  --color-bg: #ffffff;
  --color-bg-soft: #F3F4F6;     /* Grau hell */
  --radius-xl: 20px;
  --radius-lg: 14px;
  --shadow: 0 14px 40px rgba(11,44,89,.10);
  --shadow-strong: 0 18px 60px rgba(0,0,0,.28);
  --font-base: "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--color-text);
  background:var(--color-bg);
}
img{ max-width:100%; height:auto; }

a{ color:inherit; }
a:focus-visible{
  outline:3px solid rgba(246,166,35,.85);
  outline-offset:3px;
}

/* ---------- Layout ---------- */
.container{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Header ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.08);
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.85rem 0;
}
.logo-link{ display:inline-flex; align-items:center; }
.site-logo{ height:56px; width:auto; }

/* ---------- Navigation ---------- */
.main-navigation{ margin-left:auto; }
.main-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}
.main-navigation li{ margin:0; }
.main-navigation a{
  display:inline-flex;
  align-items:center;
  padding:.45rem .75rem;
  border-radius:999px;
  font-weight:500;
  text-decoration:none;
  color:var(--color-text);
}
.main-navigation a:hover,
.main-navigation a:focus-visible{
  background:rgba(30,98,179,.12);
  color:var(--color-primary);
}

/* Burger: Desktop aus, Mobile an */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:.45rem;
  border-radius:12px;
}

.nav-toggle:focus-visible{
  outline:3px solid rgba(246,166,35,.85);
  outline-offset:3px;
}

.nav-toggle-bar{
  width:24px;
  height:2px;
  background:var(--color-text);
  display:block;
  margin:5px 0;
  border-radius:999px;
}

/* Mobile */
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.72rem 1.45rem;
  font-weight:600;
  border:2px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn-primary{
  background:var(--color-accent);
  color:#1f2937;
  box-shadow:0 10px 30px rgba(246,166,35,.30);
}
.btn-primary:hover,
.btn-primary:focus-visible{ transform:translateY(-1px); }

.btn-outline{
  background:#fff;
  color:var(--color-primary);
  border-color:rgba(30,98,179,.45);
}
.btn-outline:hover,
.btn-outline:focus-visible{
  background:rgba(30,98,179,.10);
}

/* CTA-Button in Sections */
.section-cta-inline{ margin-top: 1.15rem; }

/* ---------- Sections ---------- */
.section{ padding:3.2rem 0; }
.section-light{ background:var(--color-bg-soft); }
.section h2{ font-size:1.75rem; margin:0 0 1.1rem; color:var(--color-primary); }

/* ---------- Hero ---------- */
.hero{ padding:4.6rem 0 4.0rem; }
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1.0fr);
  gap:2.4rem;
  align-items:center;
}
.kicker{ font-weight:800; color:var(--color-primary); margin:0 0 .6rem; }
.hero h1{
  font-size:clamp(2.1rem,3.2vw,2.85rem);
  line-height:1.12;
  margin:0 0 1rem;
  color:var(--color-primary);
}
.hero-subtitle{
  font-size:1.05rem;
  margin:0 0 1.6rem;
  max-width:44rem;
  color:var(--color-text-muted);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.trust-badges{
  list-style:none;
  padding:0;
  margin:1.35rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:.28rem .75rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(11,44,89,.12);
  color:var(--color-primary);
  font-weight:600;
  font-size:.9rem;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}

/* Hero Bild */
.hero-image{
  width:100%;
  max-width:520px;
  height:auto;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  border:1px solid rgba(11,44,89,.10);
  display:block;
}

/* ---------- Grid / Cards ---------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
  margin-top:1.5rem;
}
.card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  border:1px solid rgba(15,23,42,.06);
}
.card h3{ margin:0 0 .65rem; color:var(--color-primary); }
.card p{ margin:0; color:var(--color-text-muted); }

/* Card Icons – Parent korrekt setzen, damit Badge sichtbar bleibt */
.card-icon{
  position: relative;   /* wichtig für absolute Positionierung des Badges */
  overflow: visible;    /* verhindert Abschneiden des Badges bei top:-14px */
}

/* Falls irgendwo .card overflow hidden gesetzt wurde, heben wir das für Icon-Cards auf */
.card.card-icon{
  overflow: visible;
}

/* Card Icons – voll gefüllte Bubbles */
.card-icon-badge{
  position:absolute;
  top:-14px;
  left:1.5rem;
  width:40px;
  height:40px;
  border-radius:999px;

  background: var(--color-primary-2); /* sattes Blau */
  color: #fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 2;
}


/* ---------- Timeline ---------- */
.timeline{
  list-style:none;
  margin:1.6rem 0 0;
  padding:0;
  border-left:2px solid rgba(11,44,89,.18);
}
.timeline-item{
  position:relative;
  padding:0 0 1.8rem 1.4rem;
}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-7px;
  top:.45rem;
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--color-accent);
}
.timeline-item h3{ margin:0 0 .35rem; color:var(--color-primary); }
.timeline-item p{ margin:0; color:var(--color-text-muted); }

/* ---------- Section CTA (Mitmachen) ---------- */
.section-cta{
  background:var(--color-primary);
  color:#fff;
  margin-bottom:0;
}
.cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.section-cta h2{ color:#fff; }
.section-cta p{ color:rgba(255,255,255,.88); margin:0; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.section-cta .btn-outline{
  border-color:rgba(255,255,255,.6);
  color:#fff;
  background:transparent;
}
.section-cta .btn-outline:hover,
.section-cta .btn-outline:focus-visible{
  background:rgba(255,255,255,.14);
}

/* =========================================================
   Parallax System (einmal definiert)
   ========================================================= */
.parallax-section{
  background-size:cover;
  background-position:center;
  position:relative;
}
.parallax-overlay{ padding:3.2rem 0; width:100%; }

/* Der blaue Hintergrund, den früher "Open Source, kommunal gedacht" hatte */
.bg-parallax-blue{
  color:#fff;
  background-attachment:fixed;
  background-image:
    linear-gradient(to bottom right, rgba(11,44,89,.92), rgba(11,44,89,.78)),
    radial-gradient(900px 420px at 80% 20%, rgba(30,98,179,.55), transparent 62%);
}
.bg-parallax-blue h2{ color:#fff; }
.bg-parallax-blue p{ color:rgba(255,255,255,.88); }

/* Impact auf Parallax (weiß) */
.impact-inner{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.75fr);
  gap:2.5rem;
  align-items:center;
}
.impact-text h2{ font-size:1.9rem; margin:0 0 1rem; }
.impact-lead{ font-size:1.05rem; margin:0; max-width:38rem; }

.impact-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.impact-metric{
  border-radius:18px;
  padding:1.6rem 1.4rem;
  text-align:center;
}
.bg-parallax-blue .impact-metric{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(4px);
}
.impact-number{
  display:block;
  font-size:2.15rem;
  font-weight:800;
  margin-bottom:.35rem;
  letter-spacing:.01em;
}
.bg-parallax-blue .impact-number{ color:#fff; }
.bg-parallax-blue .impact-label{
  color:rgba(255,255,255,.88);
  font-size:.95rem;
  line-height:1.4;
}

/* ---------- Open Source Block grau/schwarz ---------- */
.bg-soft-grey{
  background:var(--color-bg-soft);
  color:var(--color-text);
}
.bg-soft-grey h2{ color:var(--color-primary); }
.bg-soft-grey p{ color:var(--color-text-muted); max-width:52rem; }

/* =========================================================
   Logo Slider (Kommunen)
   ========================================================= */
.logo-slider{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:.75rem;
  align-items:stretch;
  margin-top:1.25rem;
}
.logo-slider-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.5rem;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(11,44,89,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  min-height:120px;
}
.logo-slide{
  flex:0 0 auto;
  scroll-snap-align:start;
  min-width:180px;
  padding:.75rem 1rem;
  border-radius:12px;
  background:rgba(30,98,179,.08);
  display:grid;
  justify-items:center;
}
.logo-img{
  height:56px;
  width:160px;
  object-fit:contain;
  display:block;
}
.logo-caption{
  display:block;
  margin-top:.5rem;
  font-size:.85rem;
  line-height:1.3;
  text-align:center;
  color:var(--color-text-muted);
  max-width:160px;
}
.logo-slider-btn{
  height:100%;
  width:48px;
  border-radius:14px;
  border:2px solid rgba(11,44,89,.15);
  background:#fff;
  color:var(--color-primary);
  font-size:1.6rem;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  user-select:none;
}
.logo-slider-btn:hover,
.logo-slider-btn:focus-visible{
  border-color:rgba(30,98,179,.55);
  background:rgba(30,98,179,.12);
}

/* ---------- Placeholder ---------- */
.logo-strip-placeholder{
  margin-top:1.1rem;
  padding:1.1rem 1.3rem;
  border-radius:14px;
  background:#eff6ff;
  color:var(--color-primary);
  border:1px dashed rgba(11,44,89,.2);
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:0;
  background:var(--color-primary);
  color:#fff;
  padding:2.2rem 0;
}
.site-footer a{
  color:var(--color-accent);
  font-weight:600;
  text-decoration:none;
}
.site-footer a:hover,
.site-footer a:focus-visible{
  color:#ffd28a;
  text-decoration:underline;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid-3{ grid-template-columns:1fr; }
  .hero-inner{ grid-template-columns:1fr; }

  /* Burger nur Mobile */
  .nav-toggle{ display:inline-flex; }
  .main-navigation{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    background:#fff;
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  .main-navigation ul{
    flex-direction:column;
    align-items:flex-start;
    padding:.9rem 1.5rem 1.2rem;
  }
  .main-navigation.is-open{ display:block; }

  /* Parallax auf Mobile aus */
  .bg-parallax-blue{ background-attachment:scroll; }

  /* Impact responsive */
  .impact-inner{ grid-template-columns:1fr; }
  .impact-metrics{ grid-template-columns:1fr; }
  .impact-metric{ text-align:left; }

  /* Slider mobile */
  .logo-slider{ grid-template-columns:1fr; }
  .logo-slider-btn{ display:none; }
  .logo-slide{ min-width:70%; }
}
/* Impact-Karten: weißer Hintergrund + dunkler Text auf blauem Parallax */
.bg-parallax-blue .impact-metric{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
  backdrop-filter: none !important;
}

.bg-parallax-blue .impact-number{
  color: var(--color-primary) !important; /* dunkelblau */
}

.bg-parallax-blue .impact-label{
  color: var(--color-text-muted) !important; /* dunkel/grau */
}
.page-toc{
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--color-bg-soft);
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
}

.page-toc h2{
  margin-top: 0;
  font-size: 1.25rem;
  color: var(--color-primary);
}

.page-toc ol{
  margin: .75rem 0 0;
  padding-left: 1.2rem;
}

.page-toc li{
  margin: .35rem 0;
}

.page-toc a{
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.page-toc a:hover,
.page-toc a:focus-visible{
  color: var(--color-accent);
  text-decoration: underline;
}
/* =========================================
   Back to Top Button (global)
   ========================================= */

.back-to-top{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 999;

  width: 48px;
  height: 48px;
  border-radius: 999px;

  background: var(--color-accent);
  color: #1f2937;

  border: none;
  cursor: pointer;

  font-size: 1.4rem;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible{
  transform: translateY(0);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile etwas höher (nicht über Footer) */
@media (max-width: 768px){
  .back-to-top{
    right: 1rem;
    bottom: 1rem;
  }
}
.opencode-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.5rem 0 2rem;
}

.opencode-logos{
  display:flex;
  gap:2.5rem;
  align-items:center;
  margin-top:2rem;
}

.opencode-logos img{
  max-height:64px;
  width:auto;
}
/* =========================================
   Blog / Aktuelles (Template)
   ========================================= */

.blog-controls{ margin: 1.5rem 0 2rem; }

.blog-search{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.blog-search-input{
  flex: 1 1 320px;
  min-width: 220px;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
}
.blog-search-input:focus-visible{
  outline: 3px solid rgba(246,166,35,.75);
  outline-offset: 2px;
}

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.blog-card{
  background:#fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.blog-card-thumb img{
  width:100%;
  height: 200px;
  object-fit: cover;
  display:block;
}

.blog-card-body{
  padding: 1.25rem 1.25rem 1.35rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  flex:1;
}

.blog-meta{
  margin:0;
  font-size:.9rem;
  color: var(--color-text-muted);
}

.blog-card-title{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.25;
}
.blog-card-title a{
  color: var(--color-primary);
  text-decoration:none;
}
.blog-card-title a:hover,
.blog-card-title a:focus-visible{
  text-decoration:underline;
  color: var(--color-primary-2);
}

.blog-excerpt{
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.blog-card-actions{ margin-top:auto; }

.blog-pagination{ margin-top: 2rem; }
.blog-pagination ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.blog-pagination a,
.blog-pagination span{
  display:inline-flex;
  padding:.45rem .75rem;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.12);
}
.blog-pagination .current{
  background: rgba(30,98,179,.12);
  border-color: rgba(30,98,179,.35);
  color: var(--color-primary);
  font-weight:700;
}

@media (max-width:960px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-card-thumb img{ height: 220px; }
}
/* =========================================
   Fix: Map must never overlay sticky header
   (Leaflet / interactive maps)
   ========================================= */

/* Header always on top */
.site-header{
  position: sticky;
  top: 0;
  z-index: 99999; /* höher als Leaflet */
}

/* Map section creates its own stacking context below header */
.community-map,
.community-map *{
  z-index: auto;
}

.community-map{
  position: relative;
  z-index: 1;
}

/* If you use Leaflet: force its panes/controls below header */
.leaflet-container{
  z-index: 1 !important;
}
.leaflet-pane,
.leaflet-top,
.leaflet-bottom{
  z-index: 2 !important;
}

/* Leaflet popups/tooltips should still be above the map, but below header */
.leaflet-popup{
  z-index: 10 !important;
}
/* =========================================
   Inhaltsverzeichnis (TOC) – [sv_toc]
   ========================================= */

.sv-toc{
  margin: 1.5rem 0 2.25rem;
}

.sv-toc-inner{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 1.25rem 1.25rem 1.1rem;
}

.sv-toc-title{
  margin: 0 0 .75rem;
  font-weight: 800;
  color: var(--color-primary);
}

.sv-toc-list{
  margin: 0;
  padding-left: 1.1rem;
}

.sv-toc-item{
  margin: .35rem 0;
}

.sv-toc a{
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px dashed rgba(246,166,35,.6);
}

.sv-toc a:hover,
.sv-toc a:focus-visible{
  color: var(--color-primary);
  border-bottom-style: solid;
}

/* Sticky header offset for anchor jumps */
:target{
  scroll-margin-top: 92px; /* ggf. an Headerhöhe anpassen */
}
.kommune-metrics{
/* Kennzahlen immer untereinander – alle Viewports */
.kommune-metrics{
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .5rem;
}


.kommune-metric{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .15rem 0;
}

.kommune-metric span{
  color: rgba(15,23,42,.65);
  white-space: nowrap;
}

.kommune-metric span::after{
  content: ": ";
}

.kommune-metric strong{
  font-weight: 600;
  color: rgba(15,23,42,.95);
}


@media (max-width: 640px){
  .kommune-metrics{ grid-template-columns: 1fr; }
}