/*
 * Gemeinsames Design für Frontend UND Verwaltung (Spatzennest)
 * Basiert auf dem freigegebenen "Vorschlag 1 – Fröhlich & rund".
 * Alle Seiten (öffentlich + Verwaltung) nutzen dieselben Farben,
 * Schriften und Bausteine, damit kein Bruch im Erscheinungsbild entsteht.
 * Durchgängig responsive: Desktop, Tablet, Smartphone.
 */

:root{
  /* Farbpalette aus Vorschlag 1 */
  --farbe-orange:#e47317;
  --farbe-orange-hell:#f59a3e;
  --farbe-creme:#fff6ea;
  --farbe-text:#4a2e14;
  --farbe-gruen:#24997b;
  --farbe-blau:#0095c0;
  --farbe-schatten-orange:#b85a0f;
  --farbe-rand:#ecd9bd;
  --radius-gross:28px;
  --radius-mittel:18px;
  --radius-klein:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',sans-serif;
  color:var(--farbe-text);
  background:#fff;
  overflow-x:hidden; /* verhindert horizontales Scrollen bei Layout-Ausreißern */
  /* Footer bleibt immer am Seitenende, auch bei kurzen Seiten:
     body wird zur Flex-Spalte, Footer bekommt margin-top:auto (siehe unten) */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
h1,h2,h3,.ueberschrift{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ===== Kopfbereich (Logo + Navigation) – identisch auf allen Seiten ===== */
header.kopf{
  position:sticky; top:0; z-index:30;
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.05);
  border-top:8px solid var(--farbe-orange);
}
.kopf-leiste{
  max-width:1120px; margin:auto; display:flex; align-items:center;
  justify-content:space-between; padding:8px 20px; gap:10px;
}
.kopf-leiste img.logo{height:64px; display:block}

nav.hauptnav{display:flex; gap:6px; flex-wrap:wrap}
nav.hauptnav a{
  display:block; padding:10px 18px; border-radius:999px;
  font-family:'Fredoka',sans-serif; font-size:16px; font-weight:500;
  transition:.2s;
}
nav.hauptnav a:hover, nav.hauptnav a.aktiv{
  background:var(--farbe-orange); color:#fff;
}

/* Hamburger-Knopf: nur auf schmalen Bildschirmen sichtbar */
.menu-knopf{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; border-radius:var(--radius-klein);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-knopf:hover{background:var(--farbe-creme)}
.menu-knopf span{display:block; width:24px; height:3px; background:var(--farbe-text); border-radius:2px}

/* ===== Mega-Menü (Unsere Kita / Eltern) ===== */
.nav-dropdown{position:relative}
.nav-dropdown-inhalt{
  position:absolute; top:100%; left:0; margin-top:10px;
  background:#fff; border-radius:16px; box-shadow:0 14px 30px rgba(0,0,0,.14);
  padding:8px; min-width:230px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s;
}
.nav-dropdown:hover .nav-dropdown-inhalt{opacity:1; visibility:visible; transform:none}
.nav-dropdown-inhalt a{display:block; padding:10px 14px; border-radius:10px; font-size:15px; font-weight:500}
.nav-dropdown-inhalt a:hover{background:var(--farbe-creme)}

/* ===== Buttons – Pill-Form mit "3D"-Schatten-Kante ===== */
.btn-spatz{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:999px;
  background:var(--farbe-orange); color:#fff; font-family:'Fredoka',sans-serif;
  font-size:16px; font-weight:600; box-shadow:0 6px 0 var(--farbe-schatten-orange);
  transition:.15s; border:none; cursor:pointer; white-space:nowrap;
}
.btn-spatz:hover{transform:translateY(3px); box-shadow:0 3px 0 var(--farbe-schatten-orange)}
.btn-spatz.alt{background:#fff; color:var(--farbe-orange); box-shadow:0 6px 0 #f0c9a0; border:1.5px solid #f0e2cc}
.btn-spatz.gruen{background:var(--farbe-gruen); box-shadow:0 6px 0 #166b55}
.btn-spatz.klein{padding:8px 16px; font-size:13.5px; box-shadow:0 4px 0 var(--farbe-schatten-orange)}
.btn-spatz.klein.alt{box-shadow:0 4px 0 #f0c9a0}

/* ===== Formularfelder – im Spatzennest-Stil statt Standard-Bootstrap-Grau ===== */
.feld-spatz{
  width:100%; padding:11px 16px; border-radius:var(--radius-klein);
  border:2px solid var(--farbe-rand); background:var(--farbe-creme);
  font-family:'Nunito',sans-serif; font-size:15px; color:var(--farbe-text);
}
.feld-spatz:focus{outline:none; border-color:var(--farbe-orange)}
label.label-spatz{font-family:'Fredoka',sans-serif; font-size:14px; font-weight:500; margin-bottom:6px; display:block}

/* ===== Karten (Kacheln) ===== */
.karte-spatz{
  border-radius:var(--radius-mittel); background:#fff;
  border:1px solid #f0e2cc; box-shadow:0 4px 14px rgba(0,0,0,.04);
  padding:22px;
}

/* ===== Badges / Status-Pillen (z. B. veröffentlicht/Entwurf) ===== */
.pille{
  display:inline-block; font-size:12px; font-weight:700; padding:3px 11px;
  border-radius:999px; font-family:'Fredoka',sans-serif; white-space:nowrap;
}
.pille.live{background:var(--farbe-gruen); color:#fff}
.pille.entwurf{background:#cbb89a; color:#4a2e14}

/* ===== Fußbereich ===== */
/* margin-top:auto schiebt den Footer innerhalb der Flex-Spalte (body) immer
   ans Ende, egal wie kurz der Seiteninhalt ist. */
footer.fuss{background:var(--farbe-text); color:#fff; text-align:center; padding:26px 20px; font-size:14px; margin-top:auto}

/* ===== Wiederverwendbare Abschnitts-Container (öffentliche Seiten) ===== */
.abschnitt{max-width:1120px; margin:auto; padding:40px 20px 60px}
.abschnitt-schmal{max-width:760px; margin:auto; padding:40px 20px 60px}

/* ===== Hero-Bereich Startseite: responsive Zweispalten-Layout ===== */
.hero-bereich{background:var(--farbe-creme); position:relative; overflow:hidden}
.hero-grid{
  max-width:1120px; margin:auto; display:grid; grid-template-columns:1.1fr 1fr;
  gap:30px; align-items:center; padding:48px 20px 60px;
}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start}

/* ===== Tabellen in der Verwaltung: responsive mit sauberer Aktions-Spalte ===== */
.tabelle-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabelle-wrap table{width:100%; min-width:560px; border-collapse:collapse; margin:0}
.tabelle-wrap th{text-align:left; padding:14px 16px; font-family:'Fredoka'; font-size:13.5px; color:#7a5c3e; border-bottom:2px solid var(--farbe-rand)}
.tabelle-wrap td{padding:14px 16px; border-bottom:1px solid var(--farbe-rand); vertical-align:middle}
.tabelle-wrap tr:last-child td{border-bottom:none}

/* Aktions-Buttons (Bearbeiten/Löschen) sauber nebeneinander statt zerrissen */
.tabelle-aktionen{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.tabelle-aktionen form{display:inline-flex; margin:0}
.tabelle-aktionen .btn-spatz{padding:7px 14px; font-size:13px; box-shadow:0 3px 0 var(--farbe-schatten-orange)}
.tabelle-aktionen .btn-spatz.alt{box-shadow:0 3px 0 #f0c9a0}

/* ===== Verwaltungsbereich: Seitenleiste + Inhalt, gleiche Optik wie Frontend ===== */
.verwaltung-layout{display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 90px)}
.verwaltung-sidebar{
  background:var(--farbe-creme); border-right:1px solid var(--farbe-rand);
  padding:22px 14px; display:flex; flex-direction:column; gap:4px;
}
.verwaltung-sidebar a{
  padding:10px 14px; border-radius:var(--radius-klein);
  font-family:'Fredoka',sans-serif; font-size:15px; color:var(--farbe-text);
  white-space:nowrap;
}
.verwaltung-sidebar a:hover, .verwaltung-sidebar a.aktiv{
  background:var(--farbe-orange); color:#fff;
}
.verwaltung-inhalt{padding:28px; max-width:1100px; width:100%}

/* ===== Termin-Zeile (öffentliche Termine-Seite) ===== */
.termin-zeile{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--farbe-rand); flex-wrap:wrap;
}
.termin-zeile:last-child{border-bottom:none}
.termin-zeile .termin-datum{text-align:right; white-space:nowrap}

/* ===== Upload-Fortschrittsbalken (News, Team, Galerie) ===== */
.upload-fortschritt{width:100%; margin-top:6px}
.upload-fortschritt-leiste{width:100%; background:var(--farbe-rand); border-radius:999px; height:10px; overflow:hidden}
.upload-fortschritt-balken{height:10px; width:0%; background:var(--farbe-orange); border-radius:999px; transition:width .15s linear}
.upload-fortschritt-text{display:block; margin-top:4px; font-size:12.5px; color:#7a5c3e}

/* ===== Drag & Drop Sortierung (Team, Galerie-Bilder) ===== */
.sortierbar [draggable="true"]{cursor:grab}
.sortierbar [draggable="true"]:active{cursor:grabbing}
.sortierbar .wird-gezogen{opacity:.4}
.zieh-griff{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:#cbb89a; font-size:18px; cursor:grab; flex-shrink:0;
}

/* ===== Responsive Anpassungen ===== */

/* Tablet */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center; padding:36px 20px 40px}
  .hero-grid .foto-bereich{order:-1}
  .hero-cta{justify-content:center}
}

/* Schmale Bildschirme (Tablet quer / große Handys und kleiner) */
@media(max-width:820px){
  nav.hauptnav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; gap:0; padding:10px;
    box-shadow:0 14px 30px rgba(0,0,0,.12); border-radius:0 0 var(--radius-mittel) var(--radius-mittel);
  }
  nav.hauptnav.offen{display:flex}
  nav.hauptnav a{padding:13px 16px; border-radius:var(--radius-klein)}
  .menu-knopf{display:flex}
  .kopf-leiste{position:relative}
  .nav-dropdown-inhalt{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; margin:0 0 6px 14px; padding:0; min-width:0;
    border-left:2px solid var(--farbe-rand);
  }

  /* Verwaltung: Seitenleiste wird zur horizontal scrollbaren Reiterleiste */
  .verwaltung-layout{grid-template-columns:1fr; min-height:unset}
  .verwaltung-sidebar{
    flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-right:none; border-bottom:1px solid var(--farbe-rand);
    padding:12px 14px; gap:6px;
  }
  .verwaltung-sidebar a{flex:0 0 auto}
  .verwaltung-inhalt{padding:20px 16px}
}

/* Smartphone */
@media(max-width:600px){
  .kopf-leiste img.logo{height:50px}
  .abschnitt, .abschnitt-schmal{padding:28px 16px 40px}
  .hero-grid{padding-left:16px; padding-right:16px}
  .hero-grid h1{font-size:28px}
  .tabelle-aktionen{justify-content:flex-start; width:100%}
  .tabelle-aktionen .btn-spatz{flex:1 1 auto}
  .termin-zeile{padding:14px 16px; flex-direction:column; align-items:flex-start}
  .termin-zeile .termin-datum{text-align:left}
}