/* tokens/fonts.css */
/* ==========================================================================
   Vita:Kids — Fonts
   Display:  Fredoka (round, playful — the landing headline voice)
   Fallback: Schibsted Grotesk (kept for dense/serious surfaces)
   Text/UI:  Hanken Grotesk (warm, highly legible)
   Loaded from Google Fonts. If you need fully offline binaries, download the
   families and replace this @import with local @font-face rules.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Schibsted+Grotesk:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap');

/* tokens/colors.css */
/* ==========================================================================
   Vita:Kids — Color tokens
   REFERENZSTAND: ui_kits/website/HomeRose.jsx ("Marketing website · Rosé/Weiss").
   Alle Werte sind aus dieser Startseite ausgelesen. Die Seite kennt genau
   DREI Farbwelten, die im Sektions-Rhythmus blau · weiss · rosé wechseln:

     WELT 1 · BLAU   Hero, Vielfalt, FAQ · Fläche #DDEAF7 · Akzent #1874C0
     WELT 2 · WEISS  Statement, Angebote, CTA-Sektion · Fläche #FFFFFF
     WELT 3 · ROSÉ   Keyfacts, Inklusion, CTA-Panel · Fläche #FFF0F0 · Akzent #F15078

   Jede Welt hat vier Rollen: -bg (Sektionsfläche) · -soft (Blobs, Karten,
   Rahmen) · (Voll-Akzent) · -deep (textsicher / Tiefton).
   Ink = der dunkle Stamm des Logos. Gold ist der einzige Sekundärakzent.
   Werte, die auf der Startseite nicht vorkommen, sind als
   "nicht belegt" markiert und unverändert übernommen.
   ========================================================================== */
:root {
  /* ======================================================================
     WELT 1 · BLAU  — führende Welt, Hero + Navigation + Formulare
     ====================================================================== */
  --world-blue-bg:    #DDEAF7;  /* Sektionsfläche Hero / Vielfalt / FAQ      */
  --world-blue-soft:  #C2DAF1;  /* Bühnen-Blob, Input-Rahmen, Chrome-Hover   */
  --world-blue:       #1874C0;  /* Voll-Akzent: CTA, Sterne, Badge, Häkchen  */
  --world-blue-deep:  #004FA1;  /* Tiefton: Laufband, Eyebrow, Text-Akzent   */

  /* ======================================================================
     WELT 2 · WEISS — ruhige Zwischen-Sektionen
     ====================================================================== */
  --world-white-bg:   #FFFFFF;  /* Sektionsfläche Statement / Angebote / CTA */
  --world-white-soft: #F7F4FC;  /* zweiter Papierton der Seite               */
  --world-white-card: #FFFFFF;  /* Karten auf weisser Fläche                 */
  --world-white-line: #E3DBF1;  /* Haarlinie auf Papier                      */

  /* ======================================================================
     WELT 3 · ROSÉ — Keyfacts, Inklusion, CTA-Panel
     ====================================================================== */
  --world-rose-bg:    #FFF0F0;  /* Sektionsfläche Keyfacts / Inklusion       */
  --world-rose-soft:  #FBC9D4;  /* Blob, Stat-Karte 2, CTA-Kreis unten       */
  --world-rose:       #F15078;  /* Voll-Akzent: Stat-Karte 3, CTA-Panel      */
  --world-rose-deep:  #C42D55;  /* Tiefton: Stat-Karte 4, Eyebrow, Sterne    */

  /* ---- Brand core ---------------------------------------------------- */
  --vk-blue:        #1874C0;  /* Logo-Wortmarke = führende Markenfarbe       */
  --vk-blue-deep:   #004FA1;  /* Tiefblau für Emphase / Focus-Ring           */
  --vk-sky:         #CAE6F5;  /* nicht belegt                                */
  --vk-cyan:        #6CE7F3;  /* nicht belegt                                */
  --vk-gold:        #F2CE3A;  /* Squiggle unter "stark", Sterne im Laufband  */
  --vk-gold-soft:   #FBEBA6;  /* nicht belegt (nur als Streu-Ton reserviert) */

  /* ---- Paper & UI chrome — auf der Referenz durchgehend Blau-Welt ---- */
  --vk-lavender-50:   #F1ECFA;  /* Papier / Laufband-Textfarbe               */
  --vk-lavender-100:  #DDEAF7;  /* Pill- & Navigations-Hover, Social-Buttons */
  --vk-lavender-200:  #C2DAF1;  /* Pill kräftig, Badge-Fläche                */
  --vk-lavender-300:  #C2DAF1;  /* Hover kräftig                             */
  --vk-lavender-400:  #F15078;  /* aktiver Navigationslink = Rosé            */
  --vk-paper-2:       #F7F4FC;  /* zweiter Papierton                         */

  /* ---- Neutrals & confetti — dunkler Stamm des Logos ----------------- */
  --vk-ink:        #473D39;  /* Headlines + Copy                             */
  --vk-ink-soft:   #726761;  /* Sekundärtext                                 */
  --vk-muted:      #8A7F78;  /* nicht belegt                                 */
  --vk-line:       #E3DBF1;  /* Haarlinien                                   */
  --vk-line-2:     #E5DDD4;  /* nicht belegt                                 */
  --vk-white:      #FFFFFF;
  --vk-near-black: #473D39;  /* dunkler Button = Stamm-Ink                    */

  /* Streu-Dekoration: exakt die drei Punktfarben der Seite */
  --vk-confetti-peach:  #C2DAF1;  /* blaue Punkte / Blobs                    */
  --vk-confetti-lilac:  #FBC9D4;  /* rosé Punkte / Blobs                     */
  --vk-confetti-gray:   #F2CE3A;  /* Gold-Punkt im Hero                      */

  /* Text auf hellen Pill-Flächen */
  --text-on-pill:   #004FA1;

  /* ---- Leaf hues (Logo-Blätter, nur Grafik/Chips) -------------------- */
  --vk-berry:       #B34981;  /* nicht belegt auf der Referenz               */
  --vk-pink:        #FEABEB;  /* nicht belegt                                */
  --vk-orange:      #E7541D;  /* nicht belegt (Coral ist ersetzt)            */
  --vk-purple:      #A180FE;  /* nicht belegt                                */
  --vk-lilac:       #D0C3F0;  /* nicht belegt                                */
  --vk-green:       #A3C14C;  /* nicht belegt                                */
  --vk-yellow:      #FEF063;  /* nicht belegt                                */
  --vk-peach:       #DB977B;  /* nicht belegt                                */

  /* ---- Weitere Farbwelten — auf der Referenz NICHT belegt ------------ */
  /* Nur als Reserve erhalten; die Startseite nutzt ausschliesslich
     Blau · Weiss · Rosé. */
  --world-coral-bg:   #FCE4D8; --world-coral:   #E7541D; --world-coral-deep:   #C23F10; --world-coral-soft:   #F7C4AB;
  --world-green-bg:   #EDF2DB; --world-green:   #7E9C34; --world-green-deep:   #63801F; --world-green-soft:   #DCE7BC;
  --world-senf-bg:    #FCF5CE; --world-senf:    #C39415; --world-senf-deep:    #9E770A; --world-senf-soft:    #F6E79C;
  --world-purple-bg:  #ECE7FB; --world-purple:  #7E5BE6; --world-purple-deep:  #5E3FC0; --world-purple-soft:  #D6CBF6;
  --world-pink-bg:    #FBE3F0; --world-pink:    #B34981; --world-pink-deep:    #8E3564; --world-pink-soft:    #F4C5DF;
  --world-cyan-bg:    #DEF4F7; --world-cyan:    #2597A6; --world-cyan-deep:    #177581; --world-cyan-soft:    #BCE8EE;

  /* ========================================================================
     SEMANTISCHE ALIASE — in Komponenten & Screens diese verwenden
     ======================================================================== */
  --surface-page:     var(--world-blue-bg);    /* Seite startet immer blau   */
  --surface-alt:      var(--world-white-bg);   /* weisse Zwischen-Sektion    */
  --surface-card:     var(--vk-white);
  --surface-header:   var(--vk-white);        /* Header + Footer weiss      */

  --text-heading:     var(--vk-ink);
  --text-body:        var(--vk-ink-soft);
  --text-muted:       var(--vk-muted);
  --text-on-accent:   var(--vk-white);
  --text-on-dark:     var(--vk-white);
  --text-brand:       var(--vk-blue);

  --accent:           var(--vk-blue);          /* CTA = Logo-Blau            */
  --accent-hover:     var(--vk-blue-deep);
  --accent-press:     var(--vk-blue-deep);     /* nicht eigenständig belegt  */

  --link:             var(--vk-blue-deep);        /* Navigationslink        */
  --link-active:      var(--world-rose);           /* aktiver Nav-Link = Rosé */
  --link-hover-bg:    var(--world-blue-bg);        /* Dropdown-Hover          */
  --social-bg:        var(--world-blue-bg);        /* Social-Buttons Footer   */

  --border:           var(--vk-line);
  --border-on-white:  var(--vk-line-2);        /* nicht belegt               */
  --focus-ring:       var(--vk-blue);

  --btn-dark:         var(--vk-near-black);    /* dunkler CTA im CTA-Panel   */
  --btn-dark-hover:   #332B27;                 /* nicht belegt               */

  /* Leistungs-Akzente — auf der Referenz: Angebotskarten in der Rosé-Welt */
  --cat-frueh:    var(--world-blue);
  --cat-einzel:   var(--world-rose);
  --cat-gruppe:   var(--world-rose-deep);
  --cat-eltern:   var(--world-rose);
  --cat-offen:    var(--world-rose);
}

/* tokens/typography.css */
/* ==========================================================================
   Vita:Kids — Typography tokens
   Stark, confident grotesque headlines over warm, readable body text.
   The contrast of big bold black type + soft lavender + colorful logo art
   is the brand's signature.

   REFERENZSTAND: ui_kits/website/HomeRose.jsx ("Marketing website · Rosé/Weiss").
     --fs-display = hero h1 · --fs-h1 = statement head · --fs-h2 = section head
     h3 24px · h4 20px · lead 22px · body 17px · body-lg 19px · small 15px · eyebrow 13px
   ========================================================================== */
:root {
  --font-display: 'Fredoka', 'Schibsted Grotesk', system-ui, -apple-system, sans-serif; /* @kind font */
  --font-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;    /* @kind font */
  --font-ui:      'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* @kind font */ /* mobile Navigation */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */ /* nicht belegt (Referenz max. 600) */

  --fs-display:   clamp(3.4rem, 9vw, 8rem);      /* @kind font */ /* hero h1 */
  --fs-h1:        clamp(2.2rem, 5.5vw, 4.6rem);  /* @kind font */ /* statement */
  --fs-h2:        clamp(2rem, 4.5vw, 3.6rem);    /* @kind font */ /* section head */
  --fs-h3:        1.5rem;     /* @kind font */ /* Kartentitel              */
  --fs-h4:        1.25rem;    /* @kind font */ /* Werte-Titel, Accordion   */
  --fs-lead:      1.375rem;   /* @kind font */ /* Hero-Lead                */
  --fs-body:      1.0625rem;  /* @kind font */
  --fs-body-lg:   1.1875rem;  /* @kind font */ /* Eyebrow-Zeile, Fliesstext*/
  --fs-small:     0.9375rem;  /* @kind font */ /* Pill, Stat-Label         */
  --fs-eyebrow:   0.8125rem;  /* @kind font */ /* Uppercase-Eyebrow        */
  --fs-stat:      clamp(2.6rem, 5vw, 3.8rem); /* @kind font */ /* Zähler    */
  --fs-btn-lg:    1.15rem;    /* @kind font */ /* grosser Button / Laufband*/

  --lh-tight:   0.92;   /* @kind font */ /* hero display */
  --lh-playful: 1.02;   /* @kind font */ /* rotated section headlines */
  --lh-snug:    1.12;   /* @kind font */ /* nicht belegt */
  --lh-heading: 1.18;   /* @kind font */ /* nicht belegt */
  --lh-body:    1.6;    /* @kind font */ /* Fliesstext, Lead 1.5          */
  --lh-relaxed: 1.7;    /* @kind font */ /* Accordion-Panel               */

  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-eyebrow: 0.08em;  /* @kind font */
}

/* tokens/spacing.css */
/* ==========================================================================
   Vita:Kids — Spacing, radii, shadows, motion
   REFERENZSTAND: ui_kits/website/HomeRose.jsx.
   Radien, Schatten und Sektionsrhythmus sind aus dieser Seite ausgelesen.
   ========================================================================== */
:root {
  /* ---- Spacing scale (4px base) ------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  2.5rem;    /* 40px */
  --space-8:  3rem;      /* 48px */
  --space-9:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-12: 7rem;      /* 112px — section rhythm */

  --container:    1180px;  /* @kind spacing */
  --container-rd: 760px;   /* @kind spacing */
  --page-gutter:  clamp(1.25rem, 4vw, 3.5rem); /* @kind spacing */
  --section-y:    clamp(3.5rem, 7vw, 6rem);    /* @kind spacing */
  --grid-gap:     clamp(1rem, 2.5vw, 1.75rem); /* @kind spacing */

  /* ---- Radii — soft + friendly (landing: cards 26–28, hero panels 36) --- */
  --radius-sm:   8px;     /* nicht belegt */
  --radius-md:   14px;    /* nicht belegt (Referenz: nur Inputs im Kit) */
  --radius-lg:   26px;    /* Keyfact-Karten (Rosé-Welt)               */
  --radius-card: 28px;    /* Angebotskarten                          */
  --radius-xl:   36px;    /* CTA-Panel                               */
  --radius-pill: 999px;   /* Buttons, Badges, Pills, Laufband-Chips   */

  /* ---- Shadows — diffuse, warm-tinted, never harsh ------------------ */
  --shadow-xs: 0 1px 2px rgba(58, 42, 34, 0.05);   /* nicht belegt */
  --shadow-sm: 0 2px 8px rgba(58, 42, 34, 0.07);   /* nicht belegt */
  --shadow-md: 0 8px 24px -14px rgba(58, 42, 34, 0.5);   /* Hero-Pill, Badge */
  --shadow-lg: 0 24px 60px -34px rgba(58, 42, 34, 0.45); /* nicht belegt */
  --shadow-card: 0 12px 34px -22px rgba(58, 42, 34, 0.5); /* Angebotskarten */
  /* farbige CTA-Schatten — je Welt der Akzentton der Sektion */
  --shadow-accent:      0 14px 30px -14px rgba(24, 116, 192, 0.7); /* Blau  */
  --shadow-accent-rose: 0 14px 30px -14px rgba(241, 80, 120, 0.7); /* Rosé  */
  --shadow-badge:       0 14px 30px -14px rgba(44, 106, 170, 0.6); /* runder Hero-Badge */

  /* ---- Motion — calm, soft easing; no bounce ------------------------ */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
}

/* tokens/base.css */
/* ==========================================================================
   Vita:Kids — Base element defaults
   Sensible, on-brand defaults so any page that links styles.css inherits the
   right type, colors, and rhythm without extra setup.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-active); }

strong, b { font-weight: var(--fw-bold); color: var(--text-heading); }

::selection { background: var(--vk-lilac); color: var(--vk-ink); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Eyebrow / kicker label */
.vk-eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-heading);
}

/* components.css */
/* ==========================================================================
   Vita:Kids — Component styles
   REFERENZSTAND: ui_kits/website/HomeRose.jsx.
   Visual definitions for the reusable primitives. The React components in
   /components render these class names; behaviour lives in JSX, looks live here
   so hover / focus / active states work natively.
   ========================================================================== */

/* ---- Button --------------------------------------------------------- */
.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: 1;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 0.85em 1.6em;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.vk-btn:active { transform: translateY(1px) scale(0.99); }
.vk-btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

.vk-btn--primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.vk-btn--primary:hover { background: var(--accent-hover); color: var(--text-on-accent); transform: translateY(-2px); }

.vk-btn--dark { background: var(--btn-dark); color: var(--text-on-dark); }
.vk-btn--dark:hover { background: var(--btn-dark-hover); color: var(--text-on-dark); }

.vk-btn--ghost { background: transparent; color: var(--text-heading); box-shadow: inset 0 0 0 2px var(--vk-ink); }
.vk-btn--ghost:hover { background: rgba(255,255,255,0.55); color: var(--text-heading); }

.vk-btn--blue { background: var(--vk-blue); color: #fff; }
.vk-btn--blue:hover { background: var(--vk-blue-deep); color: #fff; }

.vk-btn--sm { font-size: var(--fs-small); padding: 0.6em 1.1em; }
.vk-btn--lg { font-size: var(--fs-btn-lg); padding: 0.9em 2em; }
/* Rosé-Sektionen: Akzent + Schatten der Welt setzen */
.vk-world-rose { --accent: var(--world-rose); --accent-hover: var(--world-rose-deep); --shadow-accent: var(--shadow-accent-rose); }

/* ---- Badge / Tag ---------------------------------------------------- */
.vk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-heading);
  background: var(--vk-lavender-200);
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
}
.vk-badge--soft { background: var(--vk-lavender-100); }
.vk-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vk-ink);
  background: var(--vk-white);
  box-shadow: inset 0 0 0 1.5px var(--border);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
}
/* leaf-tinted tag dot */
.vk-tag__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); }

/* ---- Card ----------------------------------------------------------- */
.vk-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  border: none;
}
.vk-card--flat { box-shadow: none; border: 1px solid var(--border); }
.vk-card--pad-lg { padding: var(--space-7); }

/* ---- Input ---------------------------------------------------------- */
.vk-field { display: flex; flex-direction: column; gap: 0.45em; }
.vk-field__label { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-small); color: var(--text-heading); }
.vk-input {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  color: var(--vk-ink);
  background: var(--vk-white);
  border: 2px solid var(--world-blue-soft);
  border-radius: var(--radius-md);
  padding: 0.7em 0.9em;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.vk-input::placeholder { color: var(--text-muted); }
.vk-input:focus { outline: none; border-color: var(--vk-blue); box-shadow: 0 0 0 3px rgba(24,116,192,0.16); }
.vk-input--lg { padding: 1.05em 1.2em; font-size: var(--fs-body-lg); }

/* ---- Service / category card --------------------------------------- */
.vk-service {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.vk-service:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.vk-service__chip {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--vk-lavender-100);
  color: var(--cat, var(--vk-purple));
}
.vk-service__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); color: var(--text-heading); margin: 0; }
.vk-service__body { font-size: var(--fs-body); color: var(--text-body); margin: 0; }
.vk-service__link { margin-top: auto; font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--cat, var(--accent)); display: inline-flex; align-items: center; gap: 0.5em; }
.vk-service__link:hover { color: var(--accent-hover); }
/* color accent bar pinned to the category hue */
.vk-service::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cat, var(--accent)); opacity: 0.9; }

/* ---- Media frame (organic photo/illustration shapes) --------------- */
.vk-frame { display: block; overflow: hidden; background: var(--vk-lavender-100); }
.vk-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-frame > .vk-frame__fill { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vk-frame--blob   { border-radius: 62% 38% 47% 53% / 55% 48% 52% 45%; }
.vk-frame--diamond{ border-radius: var(--radius-xl); transform: rotate(45deg); }
.vk-frame--diamond > img, .vk-frame--diamond > .vk-frame__fill { transform: rotate(-45deg) scale(1.42); }
.vk-frame--rounded{ border-radius: var(--radius-xl); }
.vk-frame--circle { border-radius: 50%; }

/* placeholder fill used when an illustration hasn't been supplied yet */
.vk-frame__fill {
  display: flex; align-items: center; justify-content: center;
  color: var(--vk-lavender-400); font-family: var(--font-text); font-weight: var(--fw-semibold);
  background:
    radial-gradient(circle at 30% 30%, var(--vk-lavender-100), var(--vk-lavender-200));
}

/* ---- Accordion (FAQ) ----------------------------------------------- */
.vk-accordion { width: 100%; }
.vk-accordion__item { border-bottom: 1px solid var(--border); }
.vk-accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 1.15rem 0; font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h4); color: var(--text-heading);
}
.vk-accordion__icon { flex: 0 0 auto; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); }
.vk-accordion__icon[data-open="true"] { transform: rotate(180deg); color: var(--accent-hover); }
.vk-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.vk-accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.vk-accordion__inner { overflow: hidden; }
.vk-accordion__panel[data-open="true"] .vk-accordion__inner { padding-bottom: 1.15rem; }
.vk-accordion__inner { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); }

/* ---- Responsive layout utilities (mobile-first) --------------------
   Inline-Styles können keine Media Queries — deshalb liegen GENAU die
   Layout-Eigenschaften hier: Spalten, Richtung, Sichtbarkeit.
   Breakpoints: Basis ≤599 (Handy) · sm 600 · md 900 · lg 1200.
   Farbe, Typo, Radien bleiben inline in den Sektions-Blöcken. */
.vk-wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.vk-grid-2, .vk-grid-3, .vk-grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
.vk-grid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
/* Grid-Items dürfen ihren Inhalt unterschreiten — sonst diktiert die
   Min-Content-Breite (Illustrations-Cluster) den ganzen Track. */
.vk-split > *, .vk-grid-2 > *, .vk-grid-3 > *, .vk-grid-4 > *, .vk-grid-stats > *, .vk-toc > * { min-width: 0; }
/* Illustrations-Cluster mobil: Bilder teilen die Breite statt sie zu erzwingen */
.vk-split__art, .vk-stage { max-width: 100%; }
.vk-split__art img, .vk-stage img { max-width: 40%; object-fit: contain; object-position: bottom; }
@media (min-width: 900px) { .vk-split__art img, .vk-stage img { max-width: 100%; } }
.vk-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.vk-split > .vk-split__art { order: -1; }
.vk-split--flip > .vk-split__art { order: -1; }
.vk-split--text-first > .vk-split__art { order: 0; }
.vk-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.vk-row--center { justify-content: center; }
.vk-row--cta > .vk-btn { width: 100%; }
.vk-stack { display: flex; flex-direction: column; gap: 1rem; }
.vk-hide-mobile { display: none; }
/* Dekor-Stern, der mobil links neben der Headline stört → oben rechts */
@media (max-width: 899px) { .vk-star-mr { left: auto !important; right: 6% !important; top: 4% !important; } }
.vk-only-mobile { display: block; }
.vk-stage { min-height: clamp(200px, 48vw, 300px); }
.vk-art-h { height: clamp(150px, 42vw, 300px); container-type: size; }
/* Öffnungszeiten: unter 600px Tag über Zeit */
@media (max-width: 599px) { .vk-hours-row { flex-direction: column; align-items: flex-start; } }
/* Hero-Eyebrow: unter 600px keine Kapsel — Punkt oben, Text als kleine Versalien, darf umbrechen */
@media (max-width: 599px) {
  .vk-hero-eyebrow { background: transparent !important; box-shadow: none !important; padding: 0 !important; align-items: flex-start !important; font-size: 0.78rem !important; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.45; }
  .vk-hero-eyebrow > span:first-child { margin-top: 0.42em; flex: none; }
}
@media (min-width: 600px) {
  .vk-grid-2, .vk-grid-3, .vk-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .vk-row--cta > .vk-btn { width: auto; }
}
@media (min-width: 900px) {
  .vk-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .vk-grid-4, .vk-grid-stats { grid-template-columns: repeat(4, 1fr); }
  .vk-split { grid-template-columns: var(--split-cols, 1fr 1fr); }
  .vk-split > .vk-split__art { order: 0; }
  .vk-split--flip > .vk-split__art { order: 2; }
  .vk-hide-mobile { display: var(--vk-d, block); }
  .vk-only-mobile { display: none; }
}
@media (hover: none) { .vk-lift:hover, .vk-service:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vk-float, .vk-float-s, .vk-mq-track, .vk-pin, .vk-reveal { animation: none !important; transition: none !important; }
}

/* ---- Navigation (Burger unter md) ----------------------------------- */
.vk-nav__links { display: none; }
.vk-nav__cta { display: none; }
.vk-nav .vk-logo { height: 56px !important; }

/* Toggle: zwei Linien → symmetrisches X */
.vk-nav__burger { position: relative; display: inline-flex; width: 44px; height: 44px; border: none; background: transparent; color: var(--vk-blue-deep); cursor: pointer; flex: 0 0 auto; padding: 0; z-index: 60; -webkit-tap-highlight-color: transparent; }
.vk-nav__bar { position: absolute; left: 12px; width: 20px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1); }
.vk-nav__bar:nth-child(1) { top: 17px; }
.vk-nav__bar:nth-child(2) { top: 26px; }
.vk-nav__burger.is-open .vk-nav__bar:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.vk-nav__burger.is-open .vk-nav__bar:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* Overlay: weiss, Vollbild unter dem Header */
.vk-mnav-lock { overflow: hidden; }
.vk-nav.is-mob-open { z-index: 100 !important; }
.vk-mnav { position: fixed; top: 82px; left: 0; right: 0; bottom: 0; background: var(--surface-header); z-index: 50; visibility: hidden; opacity: 0; transition: opacity .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; overflow: hidden; }
.vk-mnav.is-open { visibility: visible; opacity: 1; transition: opacity .32s cubic-bezier(.4,0,.2,1); }
.vk-mnav__track { position: relative; height: 100%; }
.vk-mnav { --mnav-x: 48px; --mnav-ink: #1D1D1F; --mnav-muted: #6E6E73; --mnav-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* SF-Pro-Ästhetik, frei lizenziert */ }
.vk-mnav__list { list-style: none; margin: 0; padding: 0 var(--mnav-x); }
.vk-mnav__l1 { padding-top: 26px; }
.vk-mnav__l1, .vk-mnav__l2 { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: transform .42s cubic-bezier(.32,.72,0,1), opacity .3s cubic-bezier(.4,0,.2,1); padding-bottom: 3rem; }
.vk-mnav__l1 { transform: translateX(0); opacity: 1; }
.vk-mnav__l2 { transform: translateX(100%); opacity: 0; pointer-events: none; }
.vk-mnav.is-sub .vk-mnav__l1 { transform: translateX(-28%); opacity: 0; pointer-events: none; }
.vk-mnav.is-sub .vk-mnav__l2 { transform: translateX(0); opacity: 1; pointer-events: auto; }
.vk-mnav__l2 .vk-mnav__list { padding-top: 0; }

/* Menüpunkte: Blau, dünne hellgraue Trennlinie */
.vk-mnav__item { border-bottom: 1px solid #F2F2F4; }
.vk-mnav__item:last-child, .vk-mnav__item--cta { border-bottom: none; }
.vk-mnav__link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 8px 0; margin: 0; border: none; background: none; text-align: left; cursor: pointer; font-family: var(--mnav-font); font-weight: 600; font-size: 28px; letter-spacing: .007em; line-height: 1.14; color: var(--mnav-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.vk-mnav__link:hover, .vk-mnav__link:active { color: var(--mnav-muted); }
.vk-mnav__link.is-active { color: var(--mnav-ink); }
.vk-mnav__link--head { font-size: 28px; color: var(--mnav-ink); }
.vk-mnav__chev { display: none; }
.vk-mnav__item--sec { border-bottom: none; padding-top: 22px; }
.vk-mnav__seclist { list-style: none; margin: 0; padding: 0; }
.vk-mnav__link--sec { font-size: 17px; font-weight: 500; min-height: 44px; padding: 6px 0; color: var(--mnav-ink); }
.vk-mnav__item--cta { padding-top: 28px; }
.vk-mnav__item--cta .vk-btn { width: 100%; }
.vk-mnav__back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 12px 8px; padding: 0; border: none; background: none; cursor: pointer; color: var(--mnav-ink); -webkit-tap-highlight-color: transparent; }
.vk-mnav__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vk-mnav__back svg { opacity: .8; }
.vk-mnav__l2 .vk-mnav__list { padding-top: 6px; }

/* Kaskade: Fade + minimales TranslateY, 0.04s pro Element */
@keyframes vkMnavIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.vk-mnav.is-open .vk-mnav__l1 .vk-mnav__item, .vk-mnav.is-sub .vk-mnav__l2 .vk-mnav__item, .vk-mnav.is-sub .vk-mnav__back { opacity: 0; animation: vkMnavIn .42s cubic-bezier(.32,.72,0,1) forwards; animation-delay: calc(.08s + var(--i, 0) * .04s); }
.vk-nav__burger { color: var(--mnav-ink, #1D1D1F); }
@media (prefers-reduced-motion: reduce) {
  .vk-nav__bar, .vk-mnav, .vk-mnav__l1, .vk-mnav__l2 { transition: none !important; }
  .vk-mnav .vk-mnav__item, .vk-mnav .vk-mnav__back { animation: none !important; opacity: 1 !important; }
}
@media (min-width: 900px) {
  .vk-nav__links { display: flex; }
  .vk-nav__burger, .vk-mnav { display: none; }
  .vk-nav__cta { display: inline-flex; }
  .vk-nav .vk-logo { height: 90px !important; }
}

.vk-toc { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.vk-toc > nav { position: static !important; }
@media (min-width: 900px) { .vk-toc { grid-template-columns: 260px 1fr; } .vk-toc > nav { position: sticky !important; } }

/* ---- Footer ----------------------------------------------------------- */
.vk-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 600px) { .vk-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .vk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.4fr; } }

/* ---- "Bunte Welten" utilities --------------------------------------- */
/* Paper-grain texture for light colour bands */
.vk-grain {
  background-image: radial-gradient(rgba(58, 42, 34, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
/* Playful headline: apply to a heading, wrap each word in a <span> —
   spans get alternating slight rotations; add .vk-playful__c for a colour word */
.vk-playful { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-playful); }
.vk-playful > span { display: inline-block; }
.vk-playful > span:nth-child(3n+1) { transform: rotate(-2deg); }
.vk-playful > span:nth-child(3n+2) { transform: rotate(1.5deg); }
.vk-playful > span:nth-child(3n)   { transform: rotate(-1deg); }
/* 4-point sparkle star — size via font-size, colour via color */
.vk-star { display: inline-block; width: 1em; height: 1em; background: currentColor;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); }