/* ============================================================
   KiKuBa – Haupt-Stylesheet
   Kindgerecht, bunt, modern, mobil optimiert
   ============================================================ */

/* ------------------------------------------------------------
   CSS Custom Properties (Farben & Abstände)
   ------------------------------------------------------------ */
:root {
    --blue:        #3B82F6;
    --blue-dark:   #2563EB;
    --blue-light:  #EFF6FF;
    --yellow:      #FBBF24;
    --yellow-dark: #D97706;
    --yellow-light:#FFFBEB;
    --green:       #10B981;
    --green-dark:  #059669;
    --green-light: #ECFDF5;
    --orange:      #F97316;
    --orange-dark: #EA580C;
    --orange-light:#FFF7ED;
    --pink:        #EC4899;
    --pink-light:  #FDF2F8;
    --purple:      #8B5CF6;
    --red:         #EF4444;
    --red-light:   #FEF2F2;

    --bg:          #FFF8F0;
    --card-bg:     #FFFFFF;
    --text:        #1F2937;
    --text-muted:  #6B7280;
    --border:      #E5E7EB;

    --shadow-sm:   0 1px 3px rgba(0,0,0,.10);
    --shadow:      0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:   0 8px 24px rgba(0,0,0,.12);

    --radius-sm:   8px;
    --radius:      16px;
    --radius-lg:   24px;

    --header-h:     64px;
    --age-bar-h:    46px;
    --header-total: calc(var(--header-h) + var(--age-bar-h));
}

/* ------------------------------------------------------------
   Reset & Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { list-style: none; }

h1,h2,h3,h4 {
    font-family: 'Fredoka One', 'Nunito', sans-serif;
    line-height: 1.2;
    color: var(--text);
}

/* ------------------------------------------------------------
   Container
   ------------------------------------------------------------ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ------------------------------------------------------------
   Header (zwei Zeilen)
   ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

/* Obere Zeile */
.header-top {
    border-bottom: 1px solid var(--border);
}
.header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
}

/* Eltern-Button in der Nav */
.btn-eltern-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: #7C3AED;
    color: #fff !important;
    border-radius: 50px;
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
    transition: background .2s, transform .15s;
    white-space: nowrap;
}
.btn-eltern-nav:hover {
    background: #6D28D9;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ===== ALTERSGRUPPEN-SWITCHER ===== */
.age-switcher {
    background: linear-gradient(90deg, #fffbeb 0%, #eff6ff 50%, #f0fdf4 100%);
    border-bottom: 3px solid var(--yellow);
}
.age-switcher-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--age-bar-h);
    overflow-x: auto;
    scrollbar-width: none;
}
.age-switcher-inner::-webkit-scrollbar { display: none; }
.age-switcher-label {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
    margin-right: 4px;
}

/* Basis Age-Button */
.age-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: .92rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    line-height: 1;
}
.age-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; }

/* 4–6 Jahre: Gelb/Orange */
.age-btn-46         { background: var(--yellow-light); color: var(--yellow-dark); border-color: var(--yellow); }
.age-btn-46:hover,
.age-btn-46.active  { background: var(--yellow); color: #fff; border-color: var(--yellow-dark); }

/* 7–10 Jahre: Blau */
.age-btn-710        { background: var(--blue-light); color: var(--blue-dark); border-color: var(--blue); }
.age-btn-710:hover,
.age-btn-710.active { background: var(--blue); color: #fff; border-color: var(--blue-dark); }

/* Ab 10 Jahre: Grün */
.age-btn-10plus        { background: var(--green-light); color: var(--green-dark); border-color: var(--green); }
.age-btn-10plus:hover,
.age-btn-10plus.active { background: var(--green); color: #fff; border-color: var(--green-dark); }

/* Alle: Grau */
.age-btn-alle        { background: #F3F4F6; color: var(--text-muted); border-color: var(--border); }
.age-btn-alle:hover,
.age-btn-alle.active { background: #6B7280; color: #fff; border-color: #6B7280; }

/* Aktiver Button: leicht größer */
.age-btn.active { transform: scale(1.04); }

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-icon {
    font-size: 2rem;
    line-height: 1;
}
.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.logo-text strong {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.5rem;
    color: var(--blue);
    letter-spacing: 1px;
}
.logo-text small {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Navigation */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.nav-link:hover {
    background: var(--blue-light);
    color: var(--blue-dark);
    text-decoration: none;
}
.nav-active {
    background: var(--blue-light) !important;
    color: var(--blue-dark) !important;
}
body[data-age="10+"] .nav-active {
    background: rgba(255,255,255,.12) !important;
    color: #60A5FA !important;
}

.nav-highlight {
    background: var(--yellow);
    color: #fff !important;
}
.nav-highlight:hover {
    background: var(--yellow-dark) !important;
    color: #fff !important;
}
.nav-user {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-logout {
    color: var(--red) !important;
    font-size: 0.82rem;
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--text);
    border-radius: 2px;
    transition: .3s;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* ============================================================
   AGE-GROUP DESIGN THEMES
   Jede Altersgruppe hat eine eigene Design-Welt.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   THEME: 4–6 JAHRE — "Farbkasten"
   Warm, riesig, verspielt, wie ein Kinderbuch
   ══════════════════════════════════════════════════════════════ */
body[data-age="4-6"] {
    --bg:          #FFF5DC;
    --card-bg:     #FFFFFF;
    --text:        #1F2937;
    --text-muted:  #6B7280;
    --border:      #FDE68A;
    --radius:      24px;
    --radius-lg:   32px;
    --radius-sm:   16px;
    --blue:        #2D80F0;
    --yellow:      #F59E0B;
    --green:       #16A34A;
    font-size:     1.08rem;
    /* Sanfte Tupfen im Hintergrund */
    background-image:
        radial-gradient(circle at 15% 85%, rgba(255,180,40,.18) 0%, transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(100,180,255,.18) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(100,220,120,.10) 0%, transparent 60%);
}

/* Header: weiß mit buntem Regenbogen-Rand */
body[data-age="4-6"] .site-header {
    background: #fff;
    box-shadow: 0 4px 0 #FBBF24;
}
body[data-age="4-6"] .header-top {
    border-bottom: 3px dashed #FDE68A;
}
body[data-age="4-6"] .logo-icon          { font-size: 2.4rem; }
body[data-age="4-6"] .logo-text strong   { color: #EF4444; font-size: 1.6rem; }
body[data-age="4-6"] .logo-text small    { font-size: .75rem; }
body[data-age="4-6"] .nav-link           { font-size: .92rem; font-weight: 800; border-radius: 14px; }
body[data-age="4-6"] .nav-highlight      { background: #EF4444; border-radius: 50px; }
body[data-age="4-6"] .nav-highlight:hover{ background: #DC2626 !important; }
body[data-age="4-6"] .btn-eltern-nav     { background: #7C3AED; font-size: .9rem; padding: 8px 18px; }

/* Altersgruppen-Leiste: Regenbogen */
body[data-age="4-6"] .age-switcher {
    background: linear-gradient(90deg, #FEF3C7 0%, #FCE7F3 25%, #DBEAFE 55%, #D1FAE5 80%, #FEF3C7 100%);
    border-bottom: 4px dashed #FBBF24;
}
body[data-age="4-6"] .age-switcher-label { color: #92400E; }

/* Hero: Regenbogen-Candy */
body[data-age="4-6"] .hero {
    background: linear-gradient(135deg, #FF6B9D 0%, #FFA347 22%, #FFD93D 44%, #6BCB77 66%, #4ECDC4 88%, #A78BFA 100%);
    border-radius: 32px;
    padding: 70px 40px;
}
body[data-age="4-6"] .hero h1  { font-size: clamp(2.2rem, 5vw, 3.8rem); }
body[data-age="4-6"] .hero-badge {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.6);
    font-size: 1rem;
}

/* Buttons: riesig und rund */
body[data-age="4-6"] .btn { border-radius: 60px; font-size: 1.05rem; }
body[data-age="4-6"] .btn-lg { padding: 18px 40px; font-size: 1.15rem; }
body[data-age="4-6"] .btn-sm { font-size: .95rem; padding: 10px 22px; }
body[data-age="4-6"] .btn-primary   { background: #3B82F6; }
body[data-age="4-6"] .btn-secondary { background: #F59E0B; }

/* Karten: bunte dicke Rahmen, abwechselnd */
body[data-age="4-6"] .card { border-width: 3px; border-radius: 24px; }
body[data-age="4-6"] .card:nth-child(3n+1) { border-color: #FCA5A5; }
body[data-age="4-6"] .card:nth-child(3n+2) { border-color: #93C5FD; }
body[data-age="4-6"] .card:nth-child(3n)   { border-color: #86EFAC; }
body[data-age="4-6"] .card-title { font-size: 1.2rem; }

/* Feature-Karten: farbige Hintergründe */
body[data-age="4-6"] .feature-card { border-radius: 24px; border-width: 3px; }
body[data-age="4-6"] .feature-card:nth-child(1) { background: #FEF3C7; border-color: #FCD34D; border-top: 6px solid #F59E0B; }
body[data-age="4-6"] .feature-card:nth-child(2) { background: #DBEAFE; border-color: #93C5FD; border-top: 6px solid #3B82F6; }
body[data-age="4-6"] .feature-card:nth-child(3) { background: #D1FAE5; border-color: #6EE7B7; border-top: 6px solid #10B981; }
body[data-age="4-6"] .feature-icon { font-size: 3.5rem; }

/* Abschnittüberschriften: groß & bunt */
body[data-age="4-6"] .section-header h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
body[data-age="4-6"] .page-header { border-bottom: 4px dashed var(--yellow); }
body[data-age="4-6"] .page-header h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }

/* Badges: größer */
body[data-age="4-6"] .badge { font-size: .88rem; padding: 5px 13px; }

/* Sicherheitsbanner */
body[data-age="4-6"] .safety-banner {
    background: linear-gradient(135deg, #D1FAE5, #FEF3C7);
    border: 3px solid #FCD34D;
    border-radius: 24px;
}

/* Info-Boxen */
body[data-age="4-6"] .info-box { border-width: 3px; border-radius: 20px; }

/* Galerie Filter-Chips */
body[data-age="4-6"] .category-chip { border-radius: 50px; font-size: .9rem; border-width: 2px; }

/* ══════════════════════════════════════════════════════════════
   THEME: 7–10 JAHRE — Standard "Abenteuer"
   Kein Override nötig – das Default-Design passt perfekt.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   THEME: 10+ JAHRE — "Fresh Studio"
   Hell, frisch, lebendig — Indigo & Teal-Akzente
   ══════════════════════════════════════════════════════════════ */
body[data-age="10+"] {
    --bg:          #F0F4FF;
    --card-bg:     #FFFFFF;
    --text:        #1E1B4B;
    --text-muted:  #6B7280;
    --border:      #C7D2FE;
    --blue:        #4F46E5;
    --blue-dark:   #4338CA;
    --blue-light:  #EEF2FF;
    --green:       #059669;
    --green-light: #ECFDF5;
    --green-dark:  #047857;
    --radius:      10px;
    --radius-lg:   16px;
    --radius-sm:   6px;
}

/* Header: weiß mit Indigo-Akzent */
body[data-age="10+"] .site-header {
    background: #fff;
    box-shadow: 0 3px 0 #4F46E5;
}
body[data-age="10+"] .header-top    { border-bottom: 1px solid #E0E7FF; }
body[data-age="10+"] .logo-text strong { color: #4F46E5; }
body[data-age="10+"] .logo-text small  { color: #818CF8; }
body[data-age="10+"] .nav-link:hover   { background: #EEF2FF; color: #4338CA; }
body[data-age="10+"] .nav-active       { background: #EEF2FF !important; color: #4338CA !important; }
body[data-age="10+"] .nav-highlight    { background: #4F46E5; }
body[data-age="10+"] .nav-highlight:hover { background: #4338CA !important; }
body[data-age="10+"] .btn-eltern-nav   { background: #7C3AED; }
body[data-age="10+"] .btn-eltern-nav:hover { background: #6D28D9; }

/* Altersgruppen-Leiste: helles Lavendel */
body[data-age="10+"] .age-switcher {
    background: linear-gradient(90deg, #EEF2FF 0%, #F5F3FF 50%, #E0F2FE 100%);
    border-bottom: 3px solid #818CF8;
}
body[data-age="10+"] .age-switcher-label { color: #6366F1; font-weight: 800; }

/* Hero: Indigo → Violet → Teal (in base .hero-pro bereits definiert) */

/* Kategorie-Leiste */
body[data-age="10+"] .cat-chip-pro  { border-color: #C7D2FE; color: #6366F1; background: #fff; }
body[data-age="10+"] .cat-chip-pro:hover { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }
body[data-age="10+"] .cat-chip-active { background: #4F46E5; border-color: #4F46E5; color: #fff; }
body[data-age="10+"] .cat-row-label { color: #818CF8; }

/* Abschnitts-Header */
body[data-age="10+"] .pro-section-header { border-bottom-color: #C7D2FE; }
body[data-age="10+"] .pro-section-header h2 { color: #1E1B4B; }
body[data-age="10+"] .pro-see-all { color: #4F46E5; }

/* Karten: weiß mit Indigo-Hover */
body[data-age="10+"] .card          { border-color: #E0E7FF; }
body[data-age="10+"] .card:hover    { border-color: #4F46E5; box-shadow: 0 4px 20px rgba(79,70,229,.12); }
body[data-age="10+"] .card-footer   { background: #F5F3FF; border-top-color: #E0E7FF; }

/* Feature-Karten */
body[data-age="10+"] .feature-card:nth-child(1) { border-top-color: #4F46E5; background: #EEF2FF; border-color: #C7D2FE; }
body[data-age="10+"] .feature-card:nth-child(2) { border-top-color: #7C3AED; background: #F5F3FF; border-color: #DDD6FE; }
body[data-age="10+"] .feature-card:nth-child(3) { border-top-color: #0EA5E9; background: #F0F9FF; border-color: #BAE6FD; }

/* Abschnittsüberschriften */
body[data-age="10+"] .section-header h2 { color: #4F46E5; }
body[data-age="10+"] .page-header       { border-bottom-color: #4F46E5; }
body[data-age="10+"] .page-header h1    { color: #4F46E5; }

/* Badges */
body[data-age="10+"] .badge-blue   { background: #EEF2FF; color: #4338CA; }
body[data-age="10+"] .badge-yellow { background: #FFFBEB; color: #D97706; }
body[data-age="10+"] .badge-green  { background: #ECFDF5; color: #047857; }

/* "Wie funktioniert's" */
body[data-age="10+"] .how-pro      { border-color: #C7D2FE; background: #C7D2FE; }
body[data-age="10+"] .how-pro-item { background: #fff; }
body[data-age="10+"] .how-pro-num  { color: #4F46E5; opacity: .4; }
body[data-age="10+"] .how-pro-item strong { color: #1E1B4B; }
body[data-age="10+"] .how-pro-item p     { color: #6B7280; }

/* Sicherheitsbanner */
body[data-age="10+"] .safety-banner {
    background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
    border-color: #818CF8;
}

/* Galerie */
body[data-age="10+"] .gallery-filters  { background: #fff; border-color: #C7D2FE; }
body[data-age="10+"] .category-chip    { border-color: #C7D2FE; color: #6366F1; }
body[data-age="10+"] .category-chip:hover,
body[data-age="10+"] .category-chip.active { background: #4F46E5; border-color: #4F46E5; color: #fff; }

/* Pagination */
body[data-age="10+"] .pagination li.active a { background: #4F46E5; border-color: #4F46E5; }
body[data-age="10+"] .pagination li a:hover  { border-color: #4F46E5; color: #4F46E5; background: #EEF2FF; }

/* Detail-Seite */
body[data-age="10+"] .detail-section h3        { color: #4F46E5; border-bottom-color: #C7D2FE; }
body[data-age="10+"] .materials-list li         { border-left-color: #4F46E5; background: #EEF2FF; }
body[data-age="10+"] .instructions-list li      { background: #EEF2FF; }
body[data-age="10+"] .instructions-list li::before { background: #4F46E5; }


/* ------------------------------------------------------------
   Main Content
   ------------------------------------------------------------ */
.site-main {
    flex: 1;
    padding: 32px 0 48px;
}

/* ------------------------------------------------------------
   Hero / Banner
   ------------------------------------------------------------ */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 60px 40px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '🎨🖌️✂️📄🍃♻️🖼️🌈';
    position: absolute;
    top: -10px; left: 0; right: 0;
    font-size: 3rem;
    opacity: .08;
    letter-spacing: 20px;
    pointer-events: none;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.hero p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    opacity: .95;
    max-width: 640px;
    margin: 0 auto 28px;
}
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
}
.hero-badge {
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    font-size: .9rem;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s, box-shadow .15s, background .2s;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
}
.btn:active { transform: translateY(0); }

.btn-primary   { background: var(--blue);   color: #fff; border-color: var(--blue-dark); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; }

.btn-secondary { background: var(--yellow); color: #fff; border-color: var(--yellow-dark); }
.btn-secondary:hover { background: var(--yellow-dark); color: #fff; }

.btn-success   { background: var(--green);  color: #fff; border-color: var(--green-dark); }
.btn-success:hover { background: var(--green-dark); color: #fff; }

.btn-danger    { background: var(--red);    color: #fff; border-color: #dc2626; }
.btn-danger:hover  { background: #dc2626; color: #fff; }

.btn-outline   { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue-light); }

.btn-lg { padding: 16px 36px; font-size: 1.1rem; }
.btn-sm { padding: 7px 16px; font-size: .85rem; }

.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------
   Cards
   ------------------------------------------------------------ */
.card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 2px solid var(--border);
    transition: transform .2s, box-shadow .2s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background: var(--bg);
}
.card-body { padding: 16px; }
.card-title {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.card-description {
    font-size: .875rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   Grid
   ------------------------------------------------------------ */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* ------------------------------------------------------------
   Badges / Tags
   ------------------------------------------------------------ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge-blue    { background: var(--blue-light);   color: var(--blue-dark); }
.badge-yellow  { background: var(--yellow-light); color: var(--yellow-dark); }
.badge-green   { background: var(--green-light);  color: var(--green-dark); }
.badge-orange  { background: var(--orange-light); color: var(--orange-dark); }
.badge-pink    { background: var(--pink-light);   color: var(--pink); }
.badge-approved{ background: var(--green-light);  color: var(--green-dark); }
.badge-pending { background: var(--yellow-light); color: var(--yellow-dark); }
.badge-rejected{ background: var(--red-light);    color: var(--red); }

/* ------------------------------------------------------------
   Formulare
   ------------------------------------------------------------ */
.form-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 40px;
    max-width: 520px;
    margin: 0 auto;
    border: 2px solid var(--border);
}
.form-title {
    font-size: 1.75rem;
    color: var(--blue);
    margin-bottom: 8px;
    text-align: center;
}
.form-subtitle {
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 28px;
    font-size: .95rem;
}
.form-group {
    margin-bottom: 20px;
}
.form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: .95rem;
    color: var(--text);
}
.form-label .required { color: var(--red); margin-left: 2px; }
.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-control::placeholder { color: #bbb; }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%236b7280'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.form-hint {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.form-error-msg {
    font-size: .85rem;
    color: var(--red);
    margin-top: 4px;
    font-weight: 600;
}

/* Checkbox */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--blue);
    cursor: pointer;
    margin-top: 2px;
}
.form-check-label { font-size: .9rem; color: var(--text); }

/* File Upload */
.file-upload-area {
    border: 3px dashed var(--blue);
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    background: var(--blue-light);
    cursor: pointer;
    transition: background .2s, border-color .2s;
    position: relative;
}
.file-upload-area:hover { background: #dbeafe; border-color: var(--blue-dark); }
.file-upload-area input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-upload-icon { font-size: 3rem; margin-bottom: 8px; }
.file-upload-text { font-weight: 700; color: var(--blue); }
.file-upload-hint { font-size: .82rem; color: var(--text-muted); margin-top: 4px; }
#imagePreview {
    margin-top: 16px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    display: none;
}

/* ------------------------------------------------------------
   Flash Messages
   ------------------------------------------------------------ */
.flash {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    margin-bottom: 24px;
    font-weight: 700;
    border-left: 5px solid transparent;
}
.flash-success { background: var(--green-light);  border-color: var(--green);  color: var(--green-dark); }
.flash-error   { background: var(--red-light);    border-color: var(--red);    color: #b91c1c; }
.flash-info    { background: var(--blue-light);   border-color: var(--blue);   color: var(--blue-dark); }
.flash-warning { background: var(--yellow-light); border-color: var(--yellow); color: var(--yellow-dark); }

/* ------------------------------------------------------------
   Section Headings
   ------------------------------------------------------------ */
.section-header {
    text-align: center;
    margin-bottom: 36px;
}
.section-header h2 {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--blue);
    margin-bottom: 8px;
}
.section-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

/* Page header */
.page-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--yellow);
}
.page-header h1 { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--blue); }

/* ------------------------------------------------------------
   Info Boxes
   ------------------------------------------------------------ */
.info-box {
    padding: 20px 24px;
    border-radius: var(--radius);
    border: 2px solid;
    margin: 20px 0;
}
.info-box-blue   { background: var(--blue-light);   border-color: var(--blue);   color: var(--blue-dark); }
.info-box-yellow { background: var(--yellow-light); border-color: var(--yellow); color: var(--yellow-dark); }
.info-box-green  { background: var(--green-light);  border-color: var(--green);  color: var(--green-dark); }
.info-box-orange { background: var(--orange-light); border-color: var(--orange); color: var(--orange-dark); }

/* ------------------------------------------------------------
   Feature Cards (Startseite)
   ------------------------------------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0;
}
.feature-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: center;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon { font-size: 3rem; margin-bottom: 14px; }
.feature-card h3 { font-size: 1.15rem; color: var(--blue); margin-bottom: 8px; }
.feature-card p  { font-size: .9rem; color: var(--text-muted); }

/* Colored borders for feature cards */
.feature-card:nth-child(1) { border-top: 5px solid var(--blue); }
.feature-card:nth-child(2) { border-top: 5px solid var(--yellow); }
.feature-card:nth-child(3) { border-top: 5px solid var(--green); }

/* ------------------------------------------------------------
   Gallery Filters
   ------------------------------------------------------------ */
.gallery-filters {
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.filter-label { font-weight: 700; font-size: .88rem; color: var(--text-muted); }

/* Category Chips */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.category-chip {
    padding: 7px 16px;
    border-radius: 50px;
    border: 2px solid var(--border);
    background: var(--card-bg);
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    transition: all .2s;
}
.category-chip:hover, .category-chip.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    text-decoration: none;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state-icon { font-size: 4rem; margin-bottom: 16px; }
.empty-state h3   { font-size: 1.25rem; margin-bottom: 8px; color: var(--text); }

/* ------------------------------------------------------------
   Detail Page
   ------------------------------------------------------------ */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.detail-image {
    border-radius: var(--radius);
    width: 100%;
    box-shadow: var(--shadow);
    border: 3px solid var(--border);
}
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.detail-section { margin: 28px 0; }
.detail-section h3 {
    font-size: 1.1rem;
    color: var(--blue);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--blue-light);
}
.materials-list, .instructions-list {
    padding-left: 0;
}
.materials-list li, .instructions-list li {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--blue);
    font-size: .95rem;
}
.instructions-list { counter-reset: steps; }
.instructions-list li {
    counter-increment: steps;
    border-left-color: var(--green);
    padding-left: 44px;
    position: relative;
}
.instructions-list li::before {
    content: counter(steps);
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 24px;
    background: var(--green);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 800;
}

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.pagination { text-align: center; margin: 32px 0; }
.pagination ul { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.pagination li a, .pagination li.active a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    font-weight: 700;
    font-size: .9rem;
    color: var(--text);
    background: var(--card-bg);
    text-decoration: none;
    transition: all .15s;
}
.pagination li a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.pagination li.active a { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ------------------------------------------------------------
   Pending notice (after upload)
   ------------------------------------------------------------ */
.pending-notice {
    text-align: center;
    padding: 60px 20px;
}
.pending-notice .big-icon { font-size: 5rem; margin-bottom: 16px; }
.pending-notice h2 { font-size: 1.75rem; color: var(--blue); margin-bottom: 12px; }
.pending-notice p  { color: var(--text-muted); max-width: 480px; margin: 0 auto 24px; }

/* ------------------------------------------------------------
   Safety Banner
   ------------------------------------------------------------ */
.safety-banner {
    background: linear-gradient(135deg, var(--green-light), var(--blue-light));
    border: 2px solid var(--green);
    border-radius: var(--radius);
    padding: 24px 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 32px 0;
}
.safety-banner-icon { font-size: 2.5rem; flex-shrink: 0; }
.safety-banner h3 { font-size: 1.05rem; color: var(--green-dark); margin-bottom: 4px; }
.safety-banner p  { font-size: .9rem; color: var(--text-muted); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
    background: #1F2937;
    color: #D1D5DB;
    padding: 48px 0 24px;
    margin-top: auto;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}
.footer-heading {
    font-size: 1rem;
    color: #F9FAFB;
    margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
    color: #9CA3AF;
    font-size: .9rem;
    transition: color .2s;
    text-decoration: none;
}
.footer-links a:hover { color: var(--yellow); text-decoration: none; }
.footer-col p { font-size: .88rem; color: #9CA3AF; line-height: 1.6; }
.footer-safety {
    font-size: .82rem !important;
    background: rgba(255,255,255,.06);
    border-radius: var(--radius-sm);
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
}
.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 20px;
    text-align: center;
}
.footer-bottom p { font-size: .85rem; color: #6B7280; margin-bottom: 4px; }
.footer-bottom a { color: #9CA3AF; }
.footer-bottom a:hover { color: var(--yellow); }
.footer-note { color: #4B5563 !important; font-size: .8rem !important; }

/* ------------------------------------------------------------
   Admin Styles
   ------------------------------------------------------------ */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}
.admin-sidebar {
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 2px solid var(--border);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-total) + 16px);
}
.admin-sidebar-header {
    background: var(--blue);
    color: #fff;
    padding: 16px 20px;
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.1rem;
}
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .15s;
}
.admin-nav a:hover { background: var(--blue-light); color: var(--blue); }
.admin-nav a.active { background: var(--blue-light); color: var(--blue-dark); border-left: 4px solid var(--blue); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.stat-number { font-size: 2rem; font-family: 'Fredoka One', sans-serif; }
.stat-label  { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.stat-pending  .stat-number { color: var(--yellow-dark); }
.stat-approved .stat-number { color: var(--green-dark); }
.stat-rejected .stat-number { color: var(--red); }
.stat-users    .stat-number { color: var(--blue); }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.admin-table th {
    background: #F3F4F6;
    padding: 12px 16px;
    text-align: left;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .9rem;
    vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg); }

.admin-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
}

/* Admin Login */
.admin-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

/* ------------------------------------------------------------
   Legal Pages
   ------------------------------------------------------------ */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--border);
}
.legal-content h2 { font-size: 1.25rem; color: var(--blue); margin: 28px 0 10px; }
.legal-content h3 { font-size: 1.05rem; color: var(--text); margin: 20px 0 8px; }
.legal-content p  { margin-bottom: 14px; font-size: .95rem; line-height: 1.7; }
.legal-content ul { padding-left: 24px; margin-bottom: 14px; }
.legal-content li { margin-bottom: 6px; font-size: .95rem; list-style: disc; }
.legal-placeholder {
    border: 3px dashed var(--yellow);
    background: var(--yellow-light);
    border-radius: var(--radius);
    padding: 20px;
    margin: 16px 0;
    font-weight: 700;
    color: var(--yellow-dark);
}

/* Rules for kids */
.rules-list { padding: 0; }
.rules-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    list-style: none;
    font-size: .95rem;
}
.rule-icon { font-size: 1.5rem; flex-shrink: 0; }
.rule-text strong { display: block; margin-bottom: 3px; }

/* ------------------------------------------------------------
   Utility classes
   ------------------------------------------------------------ */
.text-center  { text-align: center; }
.text-muted   { color: var(--text-muted); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.divider { border: none; border-top: 2px solid var(--border); margin: 24px 0; }

/* ============================================================
   ALTERSGRUPPEN-SPEZIFISCHE LAYOUT-KLASSEN
   ============================================================ */

/* ── Nav: Icon/Label-Steuerung ─────────────────────────────── */
body[data-age="4-6"] .nav-label     { display: none; }
body[data-age="4-6"] .nav-icon      { font-size: 1.6rem; line-height: 1; }
body[data-age="4-6"] .nav-link      { padding: 8px 10px; border-radius: 16px; }
body[data-age="4-6"] .age-label     { display: none; }
body[data-age="4-6"] .age-btn       { font-size: 1.4rem; padding: 6px 10px; }
body[data-age="4-6"] .age-icon      { font-size: 1.4rem; }

/* Abmelden-Button bei 4-6: deutlich roter Pill-Button mit Tür-Icon */
body[data-age="4-6"] .nav-logout {
    background: #EF4444 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 8px 12px !important;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
}
body[data-age="4-6"] .nav-logout:hover {
    background: #DC2626 !important;
    text-decoration: none;
    transform: scale(1.08);
}

/* Für 10+: nav-active korrekt (light override) */
body[data-age="10+"] .nav-active {
    background: #EEF2FF !important;
    color: #4338CA !important;
}

/* ── 4–6 Layout: Farbkasten ────────────────────────────────── */

/* Hero */
.hero-46 {
    text-align: center;
    padding: 60px 20px 50px;
    background: linear-gradient(135deg, #FF6B9D 0%, #FFA347 25%, #FFD93D 50%, #6BCB77 75%, #4ECDC4 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 48px;
    color: #fff;
}
.hero-46-emojis {
    font-size: 3.5rem;
    letter-spacing: 12px;
    margin-bottom: 16px;
    display: block;
}
.hero-46 h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    color: #fff;
    text-shadow: 0 4px 0 rgba(0,0,0,.15);
    margin-bottom: 28px;
    font-family: 'Fredoka One', sans-serif;
}
.hero-46-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Riesige Buttons für 4-6 */
.btn-46-big {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    border-radius: 60px;
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: none;
    border: 3px solid transparent;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}
.btn-46-big:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.2); text-decoration: none; }
.btn-46-yellow { background: #F59E0B; color: #fff; border-color: #D97706; }
.btn-46-green  { background: #22C55E; color: #fff; border-color: #16A34A; }
.btn-46-blue   { background: #3B82F6; color: #fff; border-color: #2563EB; }
.btn-46-red    { background: #EF4444; color: #fff; border-color: #DC2626; }

/* Abschnitt */
.section-46 { margin: 48px 0; }
.heading-46 {
    font-family: 'Fredoka One', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--blue);
    text-align: center;
    margin-bottom: 28px;
}

/* Kategorien: riesige Icon-Kacheln */
.cat-grid-46 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.cat-tile-46 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 12px;
    background: #fff;
    border: 3px solid var(--border);
    border-radius: 24px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}
.cat-tile-46:hover { transform: scale(1.06); box-shadow: var(--shadow-lg); text-decoration: none; }
.cat-tile-icon { font-size: 3rem; }
.cat-tile-name {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1rem;
    color: var(--text);
    text-align: center;
}

/* Karten-Grid 4-6: 2 Spalten, groß */
.grid-46 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.card-46 {
    background: #fff;
    border-radius: 24px;
    border: 3px solid var(--border);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.card-46:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-46:nth-child(3n+1) { border-color: #FCA5A5; }
.card-46:nth-child(3n+2) { border-color: #93C5FD; }
.card-46:nth-child(3n)   { border-color: #86EFAC; }
.card-46-link { display: block; text-decoration: none; color: inherit; }
.card-46-link:hover { text-decoration: none; }
.card-46 .card-img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
.card-46-body {
    padding: 16px;
    text-align: center;
}
.card-46-icon { font-size: 2.2rem; margin-bottom: 8px; }
.card-46-title {
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.3rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Leerer Zustand 4-6 */
.empty-46 {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

/* Sicherheitsbanner 4-6 */
.sicher-banner-46 {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #D1FAE5, #FEF3C7);
    border: 3px solid #FCD34D;
    border-radius: 24px;
    padding: 28px 32px;
    margin: 48px 0;
    font-family: 'Fredoka One', sans-serif;
    font-size: 1.1rem;
    color: var(--text);
}
.sicher-banner-46 p { font-family: 'Nunito', sans-serif; font-size: 1rem; margin-top: 6px; font-weight: 700; }

/* ── 10+ Layout: Creator Studio ────────────────────────────── */

/* Hero */
.hero-pro {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 45%, #0EA5E9 100%);
    box-shadow: 0 12px 40px rgba(79,70,229,.25);
    border: none;
    border-radius: var(--radius-lg);
    padding: 70px 40px;
    color: #fff;
    text-align: center;
    margin-bottom: 32px;
}
.hero-pro-tag {
    display: inline-block;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    padding: 5px 16px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.hero-pro h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.hero-pro p {
    font-size: 1.05rem;
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin: 0 auto 24px;
    line-height: 1.7;
}
.hero-pro-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.hero-pro-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    font-size: .88rem;
    font-weight: 600;
}
.hero-pro-stat span { font-size: 1.2rem; }

/* Kategorie-Zeile */
.cat-row-pro {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.cat-row-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-right: 4px;
}
.cat-chip-pro {
    padding: 5px 14px;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    transition: all .15s;
}
.cat-chip-pro:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.cat-chip-active    { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Abschnitts-Header */
.pro-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.pro-section-header h2 { font-size: 1.1rem; color: var(--text); margin: 0; }
.pro-see-all { font-size: .85rem; color: var(--blue); font-weight: 700; }

/* Karten-Grid 10+: 4 Spalten, kompakt */
.grid-pro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.card-pro .card-img-wide { aspect-ratio: 16 / 9; }
.card-pro .card-body     { padding: 12px; }
.card-pro .card-title    { font-size: .95rem; margin-bottom: 4px; }
.card-pro .card-description { font-size: .82rem; -webkit-line-clamp: 2; }
.card-pro .card-footer   { padding: 8px 12px; font-size: .76rem; }

/* "Wie funktioniert's" 10+ */
.how-pro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 40px 0;
}
.how-pro-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 24px;
    background: var(--card-bg);
}
.how-pro-num {
    font-family: 'Fredoka One', sans-serif;
    font-size: 2rem;
    color: var(--blue);
    opacity: .3;
    flex-shrink: 0;
    line-height: 1;
}
.how-pro-item strong { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--text); }
.how-pro-item p      { font-size: .85rem; color: var(--text-muted); margin: 0; }

/* Card-Bild-Varianten */
.card-img-wide   { aspect-ratio: 16 / 9; }

/* ── Responsive: 4-6 & 10+ Grid anpassen ───────────────────── */
@media (max-width: 960px) {
    .grid-pro { grid-template-columns: repeat(2, 1fr); }
    .how-pro  { grid-template-columns: 1fr; }
    .cat-grid-46 { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
@media (max-width: 640px) {
    .grid-46  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grid-pro { grid-template-columns: repeat(2, 1fr); }
    .hero-46  { padding: 40px 16px 36px; }
    .hero-46 h1 { font-size: 2.8rem; }
    .hero-46-emojis { font-size: 2.4rem; letter-spacing: 6px; }
    .btn-46-big { padding: 14px 26px; font-size: 1.1rem; }
    .hero-pro { padding: 40px 20px; }
    .cat-tile-46 { padding: 16px 8px; }
    .cat-tile-icon { font-size: 2.2rem; }
    .sicher-banner-46 { flex-direction: column; text-align: center; padding: 20px; }
}

/* ------------------------------------------------------------
   Responsive (Tablet)
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .grid-4      { grid-template-columns: repeat(2, 1fr); }
    .grid-3      { grid-template-columns: repeat(2, 1fr); }
    .feature-grid{ grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .detail-layout { grid-template-columns: 1fr; }
    .admin-layout  { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; }
}

/* ------------------------------------------------------------
   Responsive: Hamburger-Menü (≤ 900 px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .nav-toggle { display: flex; }

    .main-nav {
        display: none;
        position: absolute;
        top: var(--header-total);
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 3px solid var(--yellow);
        padding: 12px 20px;
        box-shadow: var(--shadow-lg);
        z-index: 200;
    }
    .main-nav.open { display: block; }
    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .main-nav .nav-link { border-radius: var(--radius-sm); }
    .nav-user { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------
   Responsive: Mobile (≤ 640 px)
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    :root { --header-h: 56px; --age-bar-h: 42px; }

    .age-btn { font-size: .78rem; padding: 5px 10px; }
    .age-switcher-label { display: none; }
    .btn-eltern-nav { font-size: .8rem; padding: 6px 11px; }

    .hero { padding: 36px 20px; }
    .form-card { padding: 24px 20px; }

    .grid-3, .grid-2  { grid-template-columns: 1fr; }
    .feature-grid     { grid-template-columns: 1fr; }
    .footer-grid      { grid-template-columns: 1fr; gap: 20px; }
    .admin-stats      { grid-template-columns: repeat(2, 1fr); }
    .admin-table      { display: block; overflow-x: auto; }
    .gallery-filters  { flex-direction: column; }
    .legal-content    { padding: 24px 16px; }
    .safety-banner    { flex-direction: column; }

    .btn-lg { padding: 14px 24px; font-size: 1rem; }
}

@media (max-width: 400px) {
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .logo-text small { display: none; }
}