/* ============================================================
SnowRabbit — app.css
Geteilte Shell-Komponenten. Erwartet tokens.css davor.
Einbinden:
============================================================ */
/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
color: var(--ink);
/* Desktop-Backdrop: Nachtpiste. Auf 430px unsichtbar. */
background: radial-gradient(1200px 800px at 50% -10%, #31205F, var(--night));
min-height: 100vh;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
}
h1 { font-size: 34px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
/* ---------- Screen-Frame (430px Mobile) ---------- */
/* ... */
.screen {
position: relative;
max-width: 430px;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
background: var(--powder);
box-shadow: var(--shadow-screen);
overflow-x: hidden;
}
.screen.has-tabbar { padding-bottom: 92px; } /* Platz für die Tabbar */
.screen--pad { padding-left: var(--s4); padding-right: var(--s4); }
.pad { padding-left: var(--s4); padding-right: var(--s4); } /* Innen-Wrapper, wenn .screen selbst randlos bleibt */
/* ---------- Topbar (optional, sticky) ---------- */
/* */
.topbar {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: var(--s2);
padding: 14px var(--s4);
background: rgba(250, 249, 247, .92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
font-family: var(--font-display);
font-size: 18px;
}
.topbar-side { margin-left: auto; font-family: var(--font-body); font-size: 13px; color: var(--ink-50); }
/* ---------- Tabbar (Bottom-Nav) ---------- */
/* */
.tabbar {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
z-index: 50;
width: 100%; max-width: 430px;
display: flex;
padding: 8px var(--s2) calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, .94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
box-shadow: 0 -8px 30px rgba(36, 21, 72, .08);
}
.tabbar a {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
color: var(--ink-50);
padding: 4px 0;
transition: color .15s;
}
.tabbar a.on { color: var(--purple); }
.tabbar a.on .tab-ico { background: var(--purple); }
/* Tab-Icons: Line-Icons als CSS-Mask, färben über background */
.tab-ico {
width: 24px; height: 24px;
background: var(--ink-50);
-webkit-mask: var(--_ico) center / contain no-repeat;
mask: var(--_ico) center / contain no-repeat;
}
.tab-ico--start { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5L12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9.8V20h13V9.8'/%3E%3Cpath d='M9.5 20v-5.5h5V20'/%3E%3C/svg%3E"); }
.tab-ico--feed { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='3' width='13' height='18' rx='3'/%3E%3Cpath d='M10.5 9.5l4.5 2.5-4.5 2.5z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.tab-ico--suchen { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8L21 21'/%3E%3C/svg%3E"); }
.tab-ico--buchungen { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='3'/%3E%3Cpath d='M3.5 10h17M8.5 3v4M15.5 3v4'/%3E%3C/svg%3E"); }
.tab-ico--profil { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.6-4 4.4-6 7.5-6s5.9 2 7.5 6'/%3E%3C/svg%3E"); }
.tab-ico--studio { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='2'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='2'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
.tab-ico--auszahlung { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='3'/%3E%3Ccircle cx='12' cy='12.5' r='2.6'/%3E%3Cpath d='M6 9.5v6M18 9.5v6'/%3E%3C/svg%3E"); }
/* ---------- Buttons (Pills) ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-weight: 800; font-size: 16px;
letter-spacing: .01em;
color: var(--white);
background: var(--purple);
border-radius: var(--r-pill);
padding: 14px 24px;
transition: background .15s, transform .1s;
cursor: pointer;
}
.btn:hover { background: var(--purple-dark); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-body); font-weight: 800; font-size: 16px;
color: var(--ink);
background: transparent;
border: 1.5px solid var(--lavender-2);
border-radius: var(--r-pill);
padding: 12.5px 24px;
transition: border-color .15s, background .15s;
cursor: pointer;
}
.btn-ghost:hover { border-color: var(--purple); color: var(--purple-dark); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--light { background: var(--white); color: var(--purple-dark); } /* auf Video/Night */
.btn--light:hover { background: var(--lavender); }
/* ---------- Chips (Hasen-Kategorien, Filter) ---------- */
/* …
*/
.chips {
display: flex; gap: var(--s2);
overflow-x: auto;
padding: var(--s1) var(--s4);
scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body); font-weight: 700; font-size: 13.5px;
color: var(--ink-70);
background: var(--white);
border: 1px solid var(--lavender-2);
border-radius: var(--r-pill);
padding: 7px 14px;
white-space: nowrap;
transition: all .15s;
cursor: pointer;
}
.chip:hover { border-color: var(--purple); color: var(--purple-dark); }
.chip--on {
background: var(--purple); border-color: var(--purple); color: var(--white);
}
.chip--on:hover { background: var(--purple-dark); color: var(--white); }
/* ---------- Badges (Verifizierung, Qualifikation) ---------- */
/* ✓ Patent GR verifiziert */
.badge {
display: inline-flex; align-items: center; gap: 4px;
font-weight: 800; font-size: 11px;
letter-spacing: .04em; text-transform: uppercase;
color: var(--purple-dark);
background: var(--lavender);
border-radius: var(--r-pill);
padding: 4px 10px;
white-space: nowrap;
}
.badge--solid { background: var(--purple); color: var(--white); } /* auf Fotos/Video */
.badge--ok { background: #E2F4EA; color: var(--ok); } /* geprüft/bestätigt */
/* ---------- Preis-Sticker (rotiert, Neon auf Weiss) ---------- */
/* ab 79.–/h */
.sticker {
display: inline-block;
font-family: var(--font-display);
font-size: 21px; line-height: 1;
color: var(--neon);
background: var(--white);
border-radius: 10px;
padding: 9px 13px 8px;
transform: rotate(-3.5deg);
box-shadow: var(--shadow-sticker);
white-space: nowrap;
}
.sticker small { font-size: .62em; color: var(--ink-50); font-family: var(--font-body); font-weight: 700; }
.sticker--neon { background: var(--neon); color: var(--white); }
.sticker--neon small { color: rgba(255, 255, 255, .75); }
.sticker--flat { transform: none; }
/* ---------- Card ---------- */
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
padding: var(--s4);
}
/* ---------- Avatar ---------- */
/* 
*/
.avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--white);
box-shadow: 0 2px 8px rgba(36, 21, 72, .18);
background: var(--grad-clip-2); /* Fallback ohne Bild */
}
.avatar--lg { width: 72px; height: 72px; border-width: 3px; }
.avatar--xl { width: 104px; height: 104px; border-width: 3px; }
/* ---------- Sterne ---------- */
/* ★★★★★ 4.9 (87) */
.stars { color: var(--star); letter-spacing: 1.5px; font-size: 14px; }
/* ---------- Clip (9:16 Video-Platzhalter) ---------- */
/* 
POV: Powder-Morgen48.2k */
.clip {
position: relative;
display: block;
aspect-ratio: 9 / 16;
border-radius: var(--r-md);
overflow: hidden;
background: var(--grad-clip-1);
}
.clip:nth-child(3n+2) { background: var(--grad-clip-2); }
.clip:nth-child(3n) { background: var(--grad-clip-3); }
.clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip::after { /* dunkler Verlauf unten für Lesbarkeit */
content: ""; position: absolute; inset: 0;
background: var(--grad-night);
}
.clip-title {
position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 2;
font-size: 12px; font-weight: 700; line-height: 1.25;
color: var(--white);
}
.clip-views {
position: absolute; top: 8px; right: 8px; z-index: 2;
font-size: 11px; font-weight: 800;
color: var(--white);
background: rgba(23, 20, 31, .45);
border-radius: var(--r-pill);
padding: 3px 8px;
backdrop-filter: blur(4px);
}
.clip-play {
position: absolute; top: 50%; left: 50%; z-index: 2;
width: 34px; height: 34px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 255, 255, .22);
backdrop-filter: blur(4px);
border: 1.5px solid rgba(255, 255, 255, .65);
}
.clip-play::after {
content: ""; position: absolute; top: 50%; left: 54%;
transform: translate(-50%, -50%);
border-left: 10px solid var(--white);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
/* ---------- Follow the Rabbit: Hase & Spur ---------- */
/* — Line-Icon, Farbe via background */
.rabbit-ico {
display: inline-block;
width: 34px; height: 22px;
background: var(--purple);
-webkit-mask: var(--rabbit-svg) center / contain no-repeat;
mask: var(--rabbit-svg) center / contain no-repeat;
vertical-align: middle;
}
.rabbit-ico--white { background: var(--white); }
.rabbit-ico--lg { width: 52px; height: 34px; }
:root {
--rabbit-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 24c2-9 13-14 24-13'/%3E%3Cpath d='M36 11c5 .5 8.5 3 9.5 7 .6 2.4-.8 4-3.5 4h-4'/%3E%3Cpath d='M35 11c-2-5-6-8-11-8'/%3E%3Cpath d='M40 12c0-5-3-9-7-10'/%3E%3Cpath d='M38 22c2 4 6 7 11 8'/%3E%3Cpath d='M14 24c-4 3-8 4-12 4'/%3E%3Ccircle cx='11' cy='21' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E");
}
/*
— die Spur im Powder (gestrichelte Linie) */
.trail {
border: none;
border-top: 2.5px dashed var(--lavender-2);
margin: var(--s4) 0;
}
.trail--purple { border-color: var(--purple); opacity: .45; }
/* ---------- Typo-Helfer ---------- */
.eyebrow {
font-size: 11.5px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase;
color: var(--purple);
}
.price { font-family: var(--font-display); color: var(--ink); } /* z.B. 79.– */
.sub { font-size: 13px; color: var(--ink-50); } /* Sekundär-/Meta-Text */
.row { display: flex; align-items: center; gap: var(--s3); } /* simple Flex-Zeile */