/* ==========================================================================
KINDERLAND STERNSCHNUPPE · DESIGN-SYSTEM v1.0
--------------------------------------------------------------------------
Zwei Welten, eine Marke:
· Kinderland (Blau #003399) → data-world="kinderland"
· Familienwelt (Gelb/Amber #FCD200 / #E39400) → data-world="familienwelt"
Alle Komponenten lesen ihre Akzentfarbe aus den --world-* Tokens und
funktionieren dadurch automatisch in beiden Welten.
--------------------------------------------------------------------------
Inhalt:
1. Schriften & Design-Tokens
2. Welten-Theming
3. Basis
4. Typografie
5. Layout-Helfer
6. Buttons (Duolingo-Stil: harter Farbsockel, drückt sich ein)
7. Chips & Badges
8. Sticker (Emoji auf weißem Grund, leicht gedreht)
9. Karten
10. Raumliste & Faktenbox
11. Avatare & Team
12. Navigation
13. Aufklapp-Details
14. Bewegung & Barrierefreiheit
========================================================================== */
/* Schriften werden in den HTML-Seiten per +
geladen, NICHT hier per @import: ein @import zwingt den Browser, erst diese
Datei zu laden, dann das Font-CSS, dann die Fonts – drei Runden nacheinander. */
/* --------------------------------------------------------------------------
1. TOKENS
-------------------------------------------------------------------------- */
:root{
/* Markenfarben */
--brand-blue: #003399; /* Original-Blau der Website, 1:1 übernommen */
--brand-blue-deep: #00205E;
--brand-blue-mid: #1A4DC2;
--brand-yellow: #FCD200; /* Sonnengelb */
--brand-amber: #E39400;
--brand-amber-deep:#B87400;
/* Nebenakzente (sparsam: Sticker, Avatare, Raum-Punkte) */
--accent-mint: #1E9E7E;
--accent-pink: #C84F7C;
/* Flächen */
--paper: #F3F7FE; /* Seitenhintergrund – blaustichiges Papier */
--surface: #FFFFFF; /* Karten */
--cream: #FBF6E6; /* getönte Abschnitte */
/* Text */
--ink: #1B2A57;
--ink-soft: #4C5A85;
--ink-faint: #8892B4;
--border: rgba(27,42,87,.12);
/* Pastell-Washes (Icon-Hintergründe, zarte Flächen) */
--wash-blue: #E7EEFB;
--wash-yellow: #FCF3D6;
--wash-mint: #E4F4EF;
--wash-pink: #FBEAF0;
/* Radien – alles weich, nichts eckig */
--radius-s: 14px;
--radius-m: 20px;
--radius-l: 28px;
--radius-round: 999px;
/* Schatten */
--shadow: 0 16px 40px -20px rgba(27,42,87,.35);
--shadow-lift: 0 26px 54px -24px rgba(27,42,87,.5);
/* Schriften */
--font-hero: 'Lilita One', 'Baloo 2', ui-rounded, system-ui, sans-serif;
--font-display: 'Baloo 2', 'Comic Sans MS', ui-rounded, cursive;
--font-body: 'Nunito', system-ui, sans-serif;
/* Typo-Skala */
--text-xs: .74rem;
--text-s: .9rem;
--text-m: 1.02rem;
--text-l: 1.15rem;
--text-h3: 1.3rem;
--text-h2: clamp(1.8rem, 4vw, 2.6rem);
--text-h1: clamp(2.6rem, 6.5vw, 4.6rem);
/* Abstände */
--space-1: 6px; --space-2: 12px; --space-3: 20px;
--space-4: 32px; --space-5: 56px; --space-6: 88px;
/* Standard-Welt (bevor eine Welt gewählt ist): Blau */
--world: var(--brand-blue);
--world-deep: var(--brand-blue-deep);
--world-mid: var(--brand-blue-mid);
--world-wash: var(--wash-blue);
--world-contrast: #FFFFFF;
}
/* --------------------------------------------------------------------------
2. WELTEN-THEMING
Ein data-world-Attribut auf oder einem Abschnitt genügt –
Buttons, Chips, Karten, Links usw. färben sich automatisch um.
-------------------------------------------------------------------------- */
[data-world="kinderland"]{
--world: var(--brand-blue);
--world-deep: var(--brand-blue-deep);
--world-mid: var(--brand-blue-mid);
--world-wash: var(--wash-blue);
--world-contrast: #FFFFFF;
}
[data-world="familienwelt"]{
--world: var(--brand-amber);
--world-deep: var(--brand-amber-deep);
--world-mid: #F0A81C;
--world-wash: var(--wash-yellow);
--world-contrast: #FFFFFF;
}
/* --------------------------------------------------------------------------
3. BASIS
Bewusst EIN helles, buntes Theme – Kindergarten-Marke, kein Dark-Mode.
-------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:var(--text-m);
line-height:1.65;
}
img{ max-width:100%; display:block; }
p{ margin:0; }
a{ color:var(--world); }
:is(a,button,summary):focus-visible{
outline:3px solid var(--world);
outline-offset:3px;
border-radius:6px;
}
/* --------------------------------------------------------------------------
4. TYPOGRAFIE
-------------------------------------------------------------------------- */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:700;
line-height:1.12;
margin:0;
color:var(--ink);
text-wrap:balance;
}
.ks-h1{ font-family:var(--font-hero); font-weight:400; font-size:var(--text-h1); line-height:1.04; }
.ks-h2{ font-family:var(--font-hero); font-weight:400; font-size:var(--text-h2); }
.ks-h3{ font-size:var(--text-h3); }
.ks-lede{ color:var(--ink-soft); font-size:var(--text-l); max-width:58ch; }
.ks-motto{
font-family:var(--font-display); font-weight:600;
font-size:clamp(1.1rem, 2.6vw, 1.5rem);
}
.ks-note{ font-size:var(--text-xs); color:var(--ink-faint); font-style:italic; }
/* Eyebrow – kleine Überzeile als Pille */
.ks-eyebrow{
display:inline-block;
font-family:var(--font-display); font-weight:700;
text-transform:uppercase; letter-spacing:.08em; font-size:var(--text-xs);
color:var(--world-deep);
background:var(--world-wash);
padding:7px 15px;
border-radius:var(--radius-round);
}
/* --------------------------------------------------------------------------
5. LAYOUT-HELFER
-------------------------------------------------------------------------- */
.ks-wrap{ width:min(1140px, calc(100% - 40px)); margin-inline:auto; }
.ks-section{ padding:var(--space-5) 0; }
.ks-section-head{
max-width:62ch; margin:0 auto var(--space-4);
text-align:center;
display:grid; gap:var(--space-2); justify-items:center;
}
.ks-grid{ display:grid; gap:var(--space-3); }
.ks-g2{ grid-template-columns:repeat(2,1fr); }
.ks-g3{ grid-template-columns:repeat(3,1fr); }
.ks-g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .ks-g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .ks-g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .ks-g2,.ks-g3,.ks-g4{ grid-template-columns:1fr; } }
/* Getönter Abschnitt */
.ks-tint{
background:var(--cream);
border-radius:var(--radius-l);
padding:var(--space-4) var(--space-4) var(--space-5);
}
/* --------------------------------------------------------------------------
6. BUTTONS · Duolingo-Stil
Harter Farbsockel unten (box-shadow 0 5px 0), beim Klicken drückt sich
der Button in den Sockel. Keine Verläufe, satte Flächen.
-------------------------------------------------------------------------- */
.ks-btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--font-display); font-weight:800; font-size:1rem;
text-decoration:none; cursor:pointer; border:0;
padding:15px 26px;
border-radius:18px;
background:var(--world); color:var(--world-contrast);
box-shadow:0 5px 0 var(--world-deep);
transition:transform .15s, box-shadow .15s, filter .15s;
}
.ks-btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--world-deep); filter:brightness(1.05); }
.ks-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--world-deep); }
/* Varianten */
.ks-btn--yellow{ background:var(--brand-yellow); color:var(--brand-blue-deep); box-shadow:0 5px 0 var(--brand-amber); }
.ks-btn--yellow:hover{ box-shadow:0 7px 0 var(--brand-amber); }
.ks-btn--yellow:active{ box-shadow:0 1px 0 var(--brand-amber); }
.ks-btn--white{ background:var(--surface); color:var(--world); box-shadow:0 5px 0 rgba(27,42,87,.18); }
.ks-btn--white:hover{ box-shadow:0 7px 0 rgba(27,42,87,.18); }
.ks-btn--white:active{ box-shadow:0 1px 0 rgba(27,42,87,.18); }
.ks-btn--ghost{
background:transparent; color:var(--world);
box-shadow:inset 0 0 0 3px var(--world-wash);
}
.ks-btn--ghost:hover{ box-shadow:inset 0 0 0 3px var(--world); transform:none; }
.ks-btn--ghost:active{ transform:translateY(2px); }
.ks-btn--big{ font-size:1.15rem; padding:18px 32px; border-radius:22px; }
.ks-btn--small{ font-size:.88rem; padding:10px 18px; border-radius:14px; box-shadow:0 4px 0 var(--world-deep); }
/* Textlink mit Pfeil */
.ks-link{
display:inline-block;
font-family:var(--font-display); font-weight:800;
color:var(--world); text-decoration:none;
}
.ks-link:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:3px; }
/* --------------------------------------------------------------------------
7. CHIPS & BADGES
-------------------------------------------------------------------------- */
.ks-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.ks-chip{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-display); font-weight:600; font-size:var(--text-s);
background:var(--surface); color:var(--ink);
border:2px solid var(--border);
padding:9px 16px; border-radius:var(--radius-round);
}
.ks-chip--onblue{ background:rgba(255,255,255,.15); border-color:transparent; color:#fff; }
.ks-chip--wash{ background:var(--world-wash); border-color:transparent; color:var(--world-deep); }
/* Kick – Mini-Überschrift in Karten */
.ks-kick{
font-family:var(--font-display); font-weight:800;
text-transform:uppercase; letter-spacing:.1em; font-size:.68rem;
color:var(--world);
}
/* --------------------------------------------------------------------------
8. STICKER
Emoji auf weißem Grund mit dickem weißen Rand, leicht gedreht –
wie aufgeklebt. Gerade Sticker gibt es nicht. :)
-------------------------------------------------------------------------- */
.ks-sticker{
display:inline-grid; place-items:center;
width:64px; height:64px; font-size:1.9rem; line-height:1;
background:var(--world-wash);
border:4px solid var(--surface);
border-radius:22px;
box-shadow:var(--shadow);
rotate:-4deg;
transition:rotate .25s, transform .25s;
}
.ks-sticker:nth-child(even), .ks-sticker--flip{ rotate:4deg; }
.ks-sticker:hover{ rotate:0deg; transform:scale(1.12); }
.ks-sticker--s{ width:46px; height:46px; font-size:1.3rem; border-radius:16px; border-width:3px; }
.ks-sticker--l{ width:96px; height:96px; font-size:3rem; border-radius:30px; border-width:5px; }
.ks-sticker--round{ border-radius:50%; }
.ks-sticker--yellow{ background:var(--wash-yellow); }
.ks-sticker--mint{ background:var(--wash-mint); }
.ks-sticker--pink{ background:var(--wash-pink); }
.ks-sticker--blue{ background:var(--wash-blue); }
/* --------------------------------------------------------------------------
9. KARTEN
Weiße Fläche, weicher Schatten, farbige Unterkante in der Welt-Farbe.
-------------------------------------------------------------------------- */
.ks-card{
background:var(--surface);
border:1px solid var(--border);
border-bottom:5px solid var(--world-wash);
border-radius:var(--radius-l);
padding:26px;
box-shadow:var(--shadow);
transition:transform .22s, box-shadow .22s, border-color .22s;
}
.ks-card:hover{
transform:translateY(-5px) rotate(-.4deg);
box-shadow:var(--shadow-lift);
border-bottom-color:var(--world);
}
.ks-card h3{ font-size:var(--text-h3); margin-bottom:7px; }
.ks-card p{ color:var(--ink-soft); font-size:.98rem; }
.ks-card ul{ margin:10px 0 0; padding-left:20px; color:var(--ink-soft); }
.ks-card li{ margin:4px 0; }
.ks-card .ks-sticker{ margin-bottom:16px; }
/* Sticker-Hintergründe in Rastern abwechselnd einfärben */
.ks-grid > :nth-child(4n+1) .ks-sticker{ background:var(--wash-blue); }
.ks-grid > :nth-child(4n+2) .ks-sticker{ background:var(--wash-yellow); }
.ks-grid > :nth-child(4n+3) .ks-sticker{ background:var(--wash-mint); }
.ks-grid > :nth-child(4n+4) .ks-sticker{ background:var(--wash-pink); }
/* Entscheidungs-Karte (große klickbare Kachel, z.B. auf dem Hub) */
.ks-choice{
position:relative; display:block; text-decoration:none; color:inherit;
background:var(--surface);
border:3px solid var(--border);
border-radius:var(--radius-l);
padding:32px;
box-shadow:0 6px 0 var(--border), var(--shadow);
transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ks-choice:hover{
transform:translateY(-4px);
border-color:var(--world);
box-shadow:0 10px 0 var(--world-wash), var(--shadow-lift);
}
.ks-choice:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--world-wash); }
.ks-choice h3{ font-size:1.7rem; margin:6px 0 0; }
.ks-choice p{ color:var(--ink-soft); margin-top:10px; }
.ks-choice .ks-link{ margin-top:16px; }
/* --------------------------------------------------------------------------
10. RAUMLISTE & FAKTENBOX
-------------------------------------------------------------------------- */
.ks-room{
display:flex; gap:14px; align-items:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-m);
padding:15px 18px;
box-shadow:var(--shadow);
}
.ks-room h4{ font-size:1.06rem; }
.ks-room p{ color:var(--ink-soft); font-size:var(--text-s); margin-top:2px; }
.ks-dot{
flex:0 0 44px; width:44px; height:44px;
display:grid; place-items:center;
border-radius:14px; rotate:-3deg;
font-family:var(--font-display); font-weight:800; font-size:1.15rem;
color:#fff; background:var(--world);
}
.ks-dot--amber{ background:var(--brand-amber); }
.ks-dot--blue{ background:var(--brand-blue-mid); }
.ks-dot--mint{ background:var(--accent-mint); }
.ks-dot--pink{ background:var(--accent-pink); }
.ks-factbox{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-l);
padding:24px;
box-shadow:var(--shadow);
}
.ks-factbox h3{ font-size:1.22rem; margin-bottom:8px; }
.ks-factrow{
display:flex; justify-content:space-between; gap:14px;
padding:11px 0;
border-bottom:2px dashed var(--border);
color:var(--ink-soft); font-size:.96rem;
}
.ks-factbox .ks-factrow:last-of-type{ border-bottom:0; }
.ks-factrow strong{
font-family:var(--font-display); font-weight:700;
color:var(--ink); text-align:right;
font-variant-numeric:tabular-nums;
}
/* --------------------------------------------------------------------------
11. AVATARE & TEAM
-------------------------------------------------------------------------- */
.ks-member{
text-align:center;
background:var(--surface);
border:1px solid var(--border);
border-bottom:5px solid var(--world-wash);
border-radius:var(--radius-m);
padding:24px 14px;
box-shadow:var(--shadow);
transition:transform .2s;
}
.ks-member:hover{ transform:translateY(-4px) rotate(.5deg); }
.ks-member h4{ margin-top:12px; font-size:1.05rem; }
.ks-member p{ color:var(--ink-soft); font-size:var(--text-s); }
.ks-avatar{
display:inline-grid; place-items:center;
width:66px; height:66px; border-radius:50%;
font-family:var(--font-display); font-weight:800; font-size:1.5rem;
color:#fff; background:var(--world);
border:4px solid var(--surface);
box-shadow:var(--shadow);
rotate:-3deg;
}
.ks-avatar--amber{ background:var(--brand-amber); }
.ks-avatar--blue{ background:var(--brand-blue-mid); }
.ks-avatar--mint{ background:var(--accent-mint); }
.ks-avatar--pink{ background:var(--accent-pink); }
/* --------------------------------------------------------------------------
12. NAVIGATION
-------------------------------------------------------------------------- */
.ks-nav{
position:sticky; top:0; z-index:40;
/* Deckendes Weiß statt halbtransparent + backdrop-filter: ein Weichzeichner
hinter einer sticky Leiste zwingt den Browser, bei JEDEM Scroll-Frame den
Bereich dahinter neu zu rendern – das war spürbares Ruckeln. Auf der jetzt
vollflächig farbigen Seite ist Deckendweiß ohnehin die klarere Kante. */
background:#fff;
border-bottom:1px solid var(--border);
}
.ks-nav-inner{
height:78px;
display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ks-brand{
display:flex; align-items:center; gap:11px;
text-decoration:none; color:var(--ink); line-height:1;
}
.ks-brand b{ font-family:var(--font-hero); font-weight:400; font-size:1.2rem; color:var(--world-deep); }
.ks-brand small{
display:block; font-family:var(--font-display); font-weight:600;
font-size:.64rem; color:var(--ink-faint); margin-top:4px; letter-spacing:.03em;
}
.ks-menu{ display:flex; gap:4px; flex-wrap:wrap; }
.ks-menu a{
font-family:var(--font-display); font-weight:700; font-size:.9rem;
color:var(--ink-soft); text-decoration:none;
padding:9px 14px; border-radius:var(--radius-round);
transition:background .15s, color .15s;
}
.ks-menu a:hover{ background:var(--world-wash); color:var(--world-deep); }
/* --------------------------------------------------------------------------
13. AUFKLAPP-DETAILS (Geburtstagsboxen, Gartenservice …)
-------------------------------------------------------------------------- */
.ks-details{
margin-top:var(--space-3);
background:var(--surface);
border:3px solid var(--world-wash);
border-radius:var(--radius-l);
padding:28px;
box-shadow:var(--shadow);
}
.ks-details[hidden]{ display:none; }
.ks-details-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.ks-close{
flex:0 0 auto; width:42px; height:42px;
border:0; border-radius:50%; cursor:pointer;
background:var(--world); color:#fff;
font-size:1.5rem; line-height:1;
box-shadow:0 4px 0 var(--world-deep);
transition:transform .15s, box-shadow .15s;
}
.ks-close:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--world-deep); }
/* Preis in Boxen-Karten */
.ks-price{
display:inline-block;
font-family:var(--font-display); font-weight:800; font-size:1.3rem;
color:var(--world-deep);
background:var(--world-wash);
padding:6px 14px; border-radius:var(--radius-round);
}
/* --------------------------------------------------------------------------
13b. WELLEN-TRENNER, LOGO & FOTOS
-------------------------------------------------------------------------- */
/* Farbband-Welle: background = Farbe oben, color = Farbe des Bandes darunter */
.ks-waveband{ display:block; height:48px; line-height:0; }
.ks-waveband svg{ display:block; width:100%; height:100%; }
/* Wellenlinie zwischen Sektionen gleicher Hintergrundfarbe */
.ks-squiggle{
display:block; width:min(340px, 70%); height:26px;
margin:0 auto; color:var(--world-wash); overflow:visible;
}
/* Logo (transparentes PNG) – auf hellen Flächen in der blauen Pille zeigen */
.ks-logo{ height:40px; width:auto; display:block; }
.ks-logo-pill{
display:inline-flex; align-items:center;
background:var(--brand-blue);
border-radius:14px; padding:7px 14px; line-height:0;
}
/* Fotos im Sticker-Look */
.ks-photo{
border-radius:var(--radius-m);
border:5px solid var(--surface);
box-shadow:var(--shadow);
rotate:-1.5deg;
object-fit:cover;
}
.ks-member .ks-photo{ width:112px; height:112px; border-radius:50%; rotate:-3deg; }
.ks-member:nth-child(even) .ks-photo{ rotate:3deg; }
/* --------------------------------------------------------------------------
14. BEWEGUNG & BARRIEREFREIHEIT
-------------------------------------------------------------------------- */
@keyframes ks-float{
0%,100%{ transform:translateY(0) rotate(var(--float-rot, -4deg)); }
50% { transform:translateY(-12px) rotate(var(--float-rot, -4deg)); }
}
@keyframes ks-wiggle{
0%,100%{ rotate:-3deg; } 50%{ rotate:3deg; }
}
.ks-float{ animation:ks-float 5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
html{ scroll-behavior:auto; }
}