/* ============================================================
   Familienzeit – Redesign „Sticker-Look" (Phase 1: globaler Look)
   ------------------------------------------------------------
   Wird NACH style.css geladen und setzt den neuen Stil: runde
   Display-Schrift (Baloo 2) + Nunito, cremefarbener Hintergrund
   mit Punktraster, dicke dunkle Ränder, harte Schlagschatten,
   Kopfzeile + untere Tab-Leiste. Klassennamen bleiben gleich,
   damit alle bestehenden Seiten/Funktionen weiterlaufen.
   Selbst gehostete Schriften (kein Google-CDN – Datenschutz).
   ============================================================ */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben & Token (Namen wie in style.css, neue Werte) ---------- */
:root {
  --bg: #fff6ea;
  --bg-soft: #fdeecd;
  --card: #ffffff;
  --ink: #2a2a3a;
  --muted: #6b6b78;
  --line: #ece0c9;            /* weiche warme Linie */
  --border: #2a2a3a;          /* NEU: dicker dunkler Rand */

  --primary: #2f9ae0;         /* Blau (Buttons, Links) */
  --primary-deep: #1477b8;
  --primary-soft: #eaf4fc;
  --accent: #ffc93c;          /* Sonnengelb (Haupt-CTA) */
  --accent-soft: #fff2cf;
  --coral: #e8654f;
  --coral-soft: #fbe4de;
  --sky: #3fb1ec;
  --sky-soft: #e3eefa;
  --pink: #f58fb0;
  --green: #7cc552;
  --purple: #a78be0;
  --teal: #4bc0b8;

  --radius: 22px;
  --radius-small: 13px;
  /* Harte, versetzte Schlagschatten (ohne Weichzeichnung) – „Sticker" */
  --shadow: 4px 5px 0 rgba(0,0,0,.14);
  --shadow-small: 2.5px 2.5px 0 rgba(0,0,0,.13);

  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Baloo 2', 'Segoe UI', system-ui, sans-serif;
}

/* ---------- Grundlagen ---------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--bg);
  /* zartes blaues Punktraster wie im Entwurf */
  background-image: radial-gradient(rgba(47,168,228,.13) 1.6px, transparent 1.6px);
  background-size: 19px 19px;
}
h1, h2, h3, .brand span, .card-title, .day-heading, .cal-title,
.page-head h1, .hero h1, .section-head h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 800; }
a { color: var(--primary); }
a:hover { color: var(--primary-deep); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 800;
  border: 2.5px solid var(--border);
  border-radius: 15px;
  box-shadow: var(--shadow-small);
  transition: transform .08s ease, box-shadow .12s ease, background .15s ease;
}
.btn:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,.13); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #ffd45f; color: var(--ink); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { background: var(--coral); color: #fff; }
.btn-danger:hover { background: #d4513b; color: #fff; }
.btn-danger-ghost { background: var(--card); color: var(--coral); border-color: var(--border); }
.btn-danger-ghost:hover { background: var(--coral-soft); }
.btn-small { border-radius: 12px; }
.btn-block { width: 100%; }
/* Sonnengelber „Haupt-CTA" (z. B. große Handlungsaufforderungen) */
.btn-sunny { background: var(--accent); color: var(--ink); }

/* ---------- Chips ---------- */
.chip {
  border: 2px solid var(--border);
  border-radius: 11px;
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--card);
}
.chip-cat { background: var(--sky-soft); color: #1c5c8f; }
.chip-age { background: var(--accent-soft); color: #8a6410; }
.chip-fit { background: var(--green); color: #fff; }
.chip-bezirk { background: var(--card); color: var(--muted); }
.chip-bday { background: var(--coral-soft); color: #b04330; }
/* Filter-Chips (Zeitraum) */
.chip-filter {
  background: var(--card); border: 2.5px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-small); font-family: var(--font-display);
}
.chip-filter:hover { background: var(--accent-soft); color: var(--ink); }
.chip-active, .chip-filter.chip-active {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.chip-reset { color: var(--coral); background: var(--card); box-shadow: none; }
.chip-reset:hover { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }

/* ---------- Karten (Event, Ort, Blog, Kachel) ---------- */
.card {
  border: 3px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-2px); box-shadow: 6px 8px 0 rgba(0,0,0,.15); }
.card-title a { color: var(--ink); }

/* Datums-Badge der Veranstaltungskarte: bunt, leicht gedreht (wie EventCard-Entwurf) */
.date-badge {
  flex-basis: 62px; margin: 12px 0 12px 12px; border-radius: 16px;
  border: 2.5px solid var(--border); box-shadow: var(--shadow-small);
  background: var(--accent); color: var(--ink);
  transform: rotate(-3deg); align-self: flex-start; padding: 8px 4px;
}
.db-wd { font-family: var(--font-display); opacity: .8; }
.db-day { font-family: var(--font-display); font-size: 1.75rem; }
.db-mon { font-family: var(--font-display); }
.event-card .card-body { padding-left: 14px; }

.place-image, .blog-cover { border-bottom: 3px solid var(--border); }
.tile {
  border: 2.5px solid var(--border); box-shadow: var(--shadow-small); border-radius: 18px;
}
.tile:hover { border-color: var(--border); transform: translateY(-2px) rotate(-1deg); }
.tile-count { border: 2px solid var(--border); background: var(--card); color: var(--ink); }

/* Info-/Flash-Boxen */
.flash { border: 2.5px solid var(--border); box-shadow: var(--shadow-small); border-radius: 14px; font-family: var(--font-display); }
.flash-ok { background: #eafaf0; color: #1e7e46; }
.flash-error { background: var(--coral-soft); color: #a23a28; }
.info-box { border: 2.5px solid var(--border); box-shadow: var(--shadow-small); background: var(--sky-soft); border-radius: 18px; }
.empty-state { border: 3px dashed var(--border); border-radius: var(--radius); background: var(--card); }

/* ---------- Kopfzeile ---------- */
.site-header {
  background: rgba(255,246,234,.92);
  border-bottom: 3px solid var(--border);
}
.brand span { font-family: var(--font-display); font-weight: 800; }
/* Wortmarke „KinDo" – zweifarbig (Kin blau, Do orange), groß als Titel */
.brand { gap: 0; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.5px; }
.brand-kin { color: var(--primary); }
.brand-do { color: #f5921f; }
@media (max-width: 480px) { .brand-word { font-size: 1.7rem; } }
.main-nav a {
  font-weight: 700; border: 2px solid transparent; border-radius: 12px;
}
.main-nav a:hover { background: var(--accent-soft); }
.main-nav a.active { background: var(--sky-soft); color: var(--primary-deep); border-color: var(--border); }
.main-nav a.kids-pill { background: var(--accent-soft); border: 2px dashed var(--accent); font-weight: 700; }
/* Hamburger als gelbes Sticker-Quadrat */
.nav-toggle {
  width: 44px; height: 44px; padding: 0; border-radius: 14px;
  background: var(--accent); border: 2.5px solid var(--border); box-shadow: var(--shadow-small);
  color: var(--ink); font-size: 1.35rem; line-height: 1;
}
.nav-toggle:active { transform: translate(1px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.13); }

/* Am Handy gibt es KEIN Hamburger-Menü mehr: alle Ziele stecken in der unteren
   Tab-Leiste; „Familie" und „Konto" laufen über die Konto-Seite. Kopfzeile zeigt
   daher nur die Wortmarke. */
@media (max-width: 720px) {
  .nav-toggle { display: none; }
  .main-nav { display: none; }
}

/* Titelleiste beim Runterscrollen ausblenden, beim Hochscrollen wieder zeigen
   (nur am Handy; die Klasse setzt das JavaScript). */
.site-header { transition: transform .25s ease; }
@media (max-width: 720px) {
  .site-header.header-hidden { transform: translateY(-100%); }
}

/* ---------- Untere Tab-Leiste (nur am Handy) ---------- */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    justify-content: space-around; align-items: center;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 3px solid var(--border);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--muted); padding: 4px 10px; border-radius: 12px;
    min-width: 56px;
  }
  .tabbar a .tab-ico { font-size: 20px; line-height: 1; }
  .tabbar a .tab-lbl { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; }
  .tabbar a.active { color: var(--ink); background: var(--accent-soft); }
  /* Platz schaffen, damit nichts hinter der Leiste verschwindet */
  body { padding-bottom: 74px; }
  /* Vorschlag-Bubble über die Tab-Leiste heben */
  .suggest-bubble { bottom: 84px; }
}

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); border-top: 3px solid var(--border); }

/* ---------- Cookie-Banner (dunkler Hintergrund) ---------- */
/* „Ablehnen" ist ein Ghost-Button – auf dem dunklen Banner mit weißem Text/Rand,
   sonst wäre er (weißer Redesign-Hintergrund + weißer Text) unsichtbar. */
.cookie-banner .btn-ghost {
  background: transparent; color: #fff; border-color: #fff;
  box-shadow: 2.5px 2.5px 0 rgba(0,0,0,.35);
}
.cookie-banner .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Vorschlag-Bubble ---------- */
.suggest-toggle {
  background: var(--accent); color: var(--ink); font-family: var(--font-display); font-weight: 800;
  border: 2.5px solid var(--border); box-shadow: var(--shadow-small);
}
.suggest-toggle:hover { background: #ffd45f; }
.suggest-panel { border: 2.5px solid var(--border); box-shadow: var(--shadow); border-radius: 22px; }
.suggest-field select, .suggest-field textarea, .suggest-field input {
  border: 2px solid var(--border); border-radius: 12px;
}

/* ---------- Startseite ---------- */
.home-hero-wrap { margin-top: 20px; }
.home-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--sky), var(--primary));
  border: 3px solid var(--border); border-radius: 30px; box-shadow: var(--shadow);
  padding: 28px 26px; display: flex; align-items: center; gap: 22px;
}
.home-hero-text { flex: 1; min-width: 0; position: relative; z-index: 2; }
.home-hero h1 { color: #fff; font-size: 2.1rem; margin: 0 0 8px; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.home-hero-sub { color: #eaf6ff; font-weight: 700; margin: 0 0 18px; max-width: 32em; }
.home-hero .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero .btn { border-color: var(--border); }
.home-hero-art {
  flex: 0 0 auto; line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.2));
  animation: fzFloaty 4.8s ease-in-out infinite;
}
.hero-mascot-emoji { font-size: 92px; }
.home-hero-art img.hero-mascot { width: 160px; display: block; }
@keyframes fzFloaty { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .home-hero-art { animation: none; } }
@media (max-width: 640px) {
  .home-hero { padding: 22px 18px; border-radius: 26px; }
  .home-hero h1 { font-size: 1.65rem; }
  .hero-mascot-emoji { font-size: 62px; }
  .home-hero-art img.hero-mascot { width: 104px; }
}

.home-quickchips { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0 4px; }
.qchip {
  display: inline-block; text-decoration: none; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .92rem;
  padding: 8px 16px; border-radius: 14px; border: 2.5px solid var(--border); box-shadow: var(--shadow-small);
}
.qchip:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,.13); }
.qchip:hover { color: #fff; filter: brightness(1.05); }
.qchip-pink { background: var(--pink); }
.qchip-green { background: var(--green); }
.qchip-purple { background: var(--purple); }
.qchip-white { background: #fff; color: var(--ink); }
.qchip-white:hover { color: var(--ink); }

.family-cta {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--accent-soft); border: 3px dashed var(--accent); border-radius: 22px;
  padding: 16px 18px; margin: 22px 0; box-shadow: var(--shadow-small);
}
.family-cta:hover { color: var(--ink); background: #fff0c8; }
.family-cta-emoji { font-size: 30px; flex: none; }
.family-cta-text { flex: 1; font-size: .95rem; line-height: 1.4; }
.family-cta-text strong { font-family: var(--font-display); }
.family-cta-arrow { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: #c9860f; }

/* Startseiten-Abschnitte etwas kompakter zum Hero */
.home-hero-wrap + .section { margin-top: 30px; }

/* ---------- Filterleiste ---------- */
.filter-bar { border: 2.5px solid var(--border); box-shadow: var(--shadow-small); }
.filter-select select, .ms-summary {
  border: 2px solid var(--border); border-radius: 12px; font-weight: 700;
}
.ms-panel { border: 2.5px solid var(--border); box-shadow: var(--shadow); }
.day-heading { border-bottom: 2.5px solid var(--border); font-family: var(--font-display); }

/* ---------- Detailseiten ---------- */
.detail-card, .post { border: 3px solid var(--border); box-shadow: var(--shadow); }
.detail-card h1, .post h1 { font-family: var(--font-display); }
/* Meta-Infos als Info-Kacheln (2 Spalten) statt Liste */
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 4px; }
.detail-meta > div {
  display: block; background: var(--bg); border: 2.5px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-small); padding: 12px 14px;
}
.detail-meta dt {
  flex: none; font-family: var(--font-display); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0;
}
.detail-meta dd { margin: 4px 0 0; font-weight: 700; }
@media (max-width: 480px) { .detail-meta { grid-template-columns: 1fr; } }
.detail-image { border: 3px solid var(--border); border-radius: 18px; }
.map-embed { border: 3px solid var(--border); border-radius: 18px; }
.prose blockquote { border-radius: 0 14px 14px 0; }

/* ---------- Familie einstellen ---------- */
.family-form { border: 3px solid var(--border); box-shadow: var(--shadow); }
.family-age:not(:empty) {
  background: var(--accent-soft); color: #8a6410; border: 2px solid var(--border);
  border-radius: 11px; padding: 3px 11px; font-family: var(--font-display); min-width: 0;
}
.btn-icon { border: 2.5px solid var(--border); background: var(--card); }

/* ---------- Konto (Login/Registrieren/Profil) ---------- */
.auth-form {
  background: var(--card); border: 3px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 22px 24px; max-width: 460px;
}
.auth-form input, .family-row input {
  border: 2.5px solid var(--border); border-radius: 13px;
}
.auth-form input:focus, .family-row input:focus { outline: 2px solid var(--primary); }

/* Überschrift nur für Screenreader (Banner übernimmt die Optik) */
.sr-only-head {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Willkommens-Banner im Profil */
.profile-hero {
  display: flex; align-items: center; gap: 14px; margin: 8px 0 20px;
  background: linear-gradient(150deg, var(--purple), #8f6fd6);
  border: 3px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 20px;
}
.profile-hero-emoji {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.profile-hero-text { color: #fff; }
.profile-hero-text strong { font-family: var(--font-display); font-size: 1.3rem; display: block; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.profile-hero-text span { font-weight: 700; opacity: .95; font-size: .9rem; }

/* „Familie einstellen" auf der Anmeldeseite (für Gäste) */
.auth-family {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 460px; margin: 18px 0 4px;
  background: var(--accent-soft); border: 2.5px dashed var(--accent);
  border-radius: 18px; padding: 14px 16px;
}
.auth-family-text { flex: 1; min-width: 190px; font-size: .9rem; line-height: 1.4; }
.auth-family-text strong { font-family: var(--font-display); display: block; }
.auth-family-text span { color: var(--muted); }

/* Hinweis „E-Mail noch nicht bestätigt" */
.verify-notice {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 2.5px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-small);
  padding: 14px 16px; margin: 0 0 20px;
}
.verify-notice-icon { font-size: 24px; flex: none; }
.verify-notice-text { flex: 1; min-width: 200px; font-size: .93rem; line-height: 1.45; color: #6a4e0e; }
.verify-notice-text strong { font-family: var(--font-display); color: var(--ink); display: block; }
.verify-notice form { margin: 0; }

.profile-card { border: 3px solid var(--border); box-shadow: var(--shadow); }
.profile-card-head h2 { font-family: var(--font-display); font-size: 1.15rem; }
.saved-list li {
  border: 2.5px solid var(--border); box-shadow: var(--shadow-small);
  border-radius: 14px; padding: 12px 14px; background: var(--card);
}
.saved-list .saved-title { font-family: var(--font-display); }

/* ---------- Kalender ---------- */
.calendar { border: 3px solid var(--border); box-shadow: var(--shadow); }
.cal-head { border-bottom: 2.5px solid var(--border); background: var(--bg-soft); }
.cal-daynum { font-family: var(--font-display); }
.cal-today .cal-daynum { background: var(--primary); color: #fff; }

/* ---------- Blog ---------- */
.blog-cover { background: linear-gradient(150deg, var(--sky-soft), var(--accent-soft)); }
.blog-cover-fallback { font-size: 3.2rem; }
.post-cover { border: 3px solid var(--border); border-radius: 18px; }