@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url(/app/assets/titillium-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url(/app/assets/titillium-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:900;font-display:swap;src:url(/app/assets/titillium-900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ============================================================
   competenz4u Learnplace — Finale Designversion (Flat-Vektor)
   Design-System nach Build-Spec §1 · Kontraste WCAG-verifiziert
============================================================ */
:root{
  /* BRAND */
  --maroon:#681826; --maroon-dark:#4a111b; --maroon-deep:#4B0E14; --maroon-light:#8a2336;
  --gold:#c99a3b; --gold-soft:#f3e7cc; --gold-bg:#faf4e6;
  --gold-ink:#8a6420; --gold-ink-deep:#6e4f14;
  --green:#2a8c4a; --green-ink:#237a3f; --green-bg:#e9f6ee;
  --cta:#46801f; --cta-hover:#3d7019; --cta-active:#356015; --cta-edge:#2c4f11; --cta-ink:#ffffff; /* tiefes Gras-Grün: weiße Schrift 4,8:1 ✓ */
  --error:#b3261e; --error-bg:#fdeceb;
  /* NEUTRALS */
  --ink:#2a2422; --ink-2:#6b635d; --ink-3:#9a928b;
  --bg:#faf8f5; --bg-2:#f4efe8; --card:#ffffff; --paper:#fdfbf7;
  --line:rgba(40,30,25,.10); --line-2:rgba(40,30,25,.16);
  /* ILLUSTRATION */
  --firefly:#ffd966;
  --tint-rose:#f6e9ec; --tint-sky:#e8f4f8;
  /* TYPO */
  --font:'Titillium Web',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-hero:clamp(2.1rem,4.2vw + 1rem,3.4rem); --fs-h2:clamp(1.55rem,2vw + .85rem,2.2rem);
  --fs-h3:1.25rem; --fs-body:1rem; --fs-small:.875rem; --fs-caption:.78rem; --fs-eyebrow:.8rem;
  /* LAYOUT */
  --sec-pad:clamp(56px,9vw,104px); --maxw:1180px; --maxw-narrow:760px;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow:0 1px 2px rgba(40,30,25,.04),0 8px 24px rgba(40,30,25,.06);
  --shadow-lg:0 4px 12px rgba(40,30,25,.08),0 20px 48px rgba(40,30,25,.10);
  --shadow-float:0 8px 20px rgba(40,30,25,.10),0 28px 64px rgba(40,30,25,.14);
  --t-fast:120ms; --t:200ms; --t-slow:320ms;
  --ease:cubic-bezier(.2,.7,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --z-header:60; --z-tabbar:65; --z-overlay:90; --z-toast:100;
  --focus:#8a6420; --focus-on-dark:#f3e7cc;
  --floki-face:url(/app/assets/floki-face.png);
}
@property --fga{syntax:'<angle>';initial-value:315deg;inherits:false}