/* ============================================================================
   Fabsi! – Override-Layer für Content Studio (FABSI_THEME=1)
   Bilderbuch-Look der Kinderserie: Papierton als Grund, Marineblau und Gelb aus der
   Wortmarke als Markenfarben, Himmelblau und Erdtöne aus der Farbwelt des Figurenblatts.
   Wird NACH app.css geladen und ist bewusst UNGELAYERT, damit es Tailwinds
   @layer-Regeln (theme/input.css) überschreibt. Nur aktiv, wenn FABSI_THEME an ist.

   Markenwerte (aus Logo und Figurenblatt gemessen):
     Marineblau  #022F61   Wortmarke, Buttons, Überschriften
     Gelb        #FEBF05   Krone und Unterstrich, Akzente
     Ringblau    #2286CB   Logo-Ring, Links, Fokus
     Himmelblau  #8BB4D7   weiche Flächen
     Papier      #FCF8F1   Grund
     Anthrazit   #56544F   Fließtext
     Karamell    #AE865F   Fabsis Haare, warme Linien
   ============================================================================ */

/* Fredoka (Überschriften, rund wie die Wortmarke) und Nunito (Fließtext) selbst gehostet,
   CSP: font-src 'self'; kein Google-CDN. Beide SIL Open Font License. */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-500.d0feaff862a7.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-600.f56ba4069e24.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-700.f67eddbc391c.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-400.54ef89211626.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/nunito-400.54ef89211626.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-600.b770df7528a1.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-700.28a2cf182b19.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-800.a28521c77f4a.woff2") format("woff2"); }

:root {
  /* Marken-Skala: 500 = Ringblau, 700 = Marineblau der Wortmarke, Rest abgeleitet */
  --color-brand-50:  #f1f7fc;
  --color-brand-100: #dfedf8;
  --color-brand-200: #bcd7ee;
  --color-brand-300: #8bb4d7; /* Himmelblau */
  --color-brand-400: #4f93cf;
  --color-brand-500: #2286cb; /* Ringblau */
  --color-brand-600: #0d4f8f;
  --color-brand-700: #022f61; /* Marineblau */
  --color-brand-800: #01264f;
  --color-brand-900: #011c3b;
  --color-brand-950: #001126;

  /* Akzent-Skala: Gelb der Krone */
  --color-accent-300: #ffe08a;
  --color-accent-400: #ffd03d;
  --color-accent-500: #febf05;
  --color-accent-600: #d99e00;

  --font-sans: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fredoka", "Nunito", "Helvetica Neue", Arial, sans-serif;

  /* Warme, weiche Schatten wie Papier auf Papier */
  --shadow-soft: 0 1px 2px rgb(86 70 50 / 0.06), 0 6px 20px -10px rgb(86 70 50 / 0.16);
  --shadow-card: 0 1px 3px rgb(86 70 50 / 0.07), 0 10px 30px -14px rgb(86 70 50 / 0.18);
  --shadow-pop:  0 18px 50px -16px rgb(86 70 50 / 0.26);
  --shadow-btn:  0 6px 16px -8px rgb(2 47 97 / 0.40);
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
body { font-family: var(--font-sans); color: #56544f; }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); color: #022f61; letter-spacing: 0; }
::selection { background: #ffe08a; color: #022f61; }

/* Papiergrund mit ganz feiner Körnung (inline SVG, kein externer Aufruf) */
.app-bg {
  background-color: #fcf8f1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.25 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fcf8f1 0%, #f7efe2 100%);
}
aside.bg-white\/70, header.bg-white\/70, .bg-white\/70 { background-color: rgb(252 248 241 / 0.82); }
.border-stone-200\/70, .border-stone-200\/60 { border-color: #eadfcd; }

/* ── Verläufe flach in Marineblau, wie die Wortmarke ───────────────────── */
.brand-gradient { background-image: none; background-color: #022f61; }
.brand-text-gradient {
  background-image: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #022f61;
}

.btn-primary {
  background-image: none; background-color: #022f61; color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgb(2 47 97 / 0.45);
}
.btn-primary:hover {
  filter: none; background-color: #0d4f8f;
  box-shadow: 0 8px 20px -8px rgb(2 47 97 / 0.55);
}

.nav-item { border-radius: 14px; }
.nav-item:hover { background-color: #f1f7fc; color: #022f61; }
.nav-item.active {
  background-image: none; background-color: #022f61; color: #fff;
  box-shadow: inset 0 -3px 0 #febf05, 0 8px 18px -10px rgb(2 47 97 / 0.45);
}

.btn-soft { background: #f1f7fc; color: #022f61; }
.btn-soft:hover { background: #dfedf8; }

.input:focus {
  border-color: #2286cb;
  box-shadow: 0 0 0 4px rgb(34 134 203 / 0.16);
}
select.input, .select-sm {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2356544f' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.switch:has(input:checked) { background: #2286cb; }
.checkbox { accent-color: #2286cb; }
.pw-rules li::before { background: #febf05; }

a { text-decoration-color: rgb(34 134 203 / 0.4); }

/* Die Wortmarke bringt ihren weißen Pinselgrund selbst mit, kein farbiger Halo dahinter */
.logo-halo::before { display: none; }