/* ============================================================
SakuraHara-Werk — Stylesheet
Ästhetik: Japanese Editorial / Washi-Paper
Typographie: Shippori Mincho (Display) + Noto Sans JP (Body)
============================================================ */
/* Lokale Schriften (selbst gehostet, kein Google-Server-Kontakt) — siehe assets/fonts/ANLEITUNG.md */
@import url('../fonts/fonts.css');
:root {
/* Palette: Washi-Papier & Tusche, mit Sakura- und Hanko-Akzenten */
--color-paper: #F6F1E8; /* Washi-Creme */
--color-paper-deep: #EDE5D3; /* tieferer Cremeton */
--color-ink: #1A1A1A; /* Sumi-Tusche */
--color-ink-soft: #3D3D3D;
--color-ink-muted: #8A8377;
--color-sakura: #E8A5B4; /* Sakura-Rosa */
--color-sakura-deep: #D4829A;
--color-hanko: #B44A4A; /* Siegel-Rot */
--color-hanko-dark: #8E3333;
--color-gold: #C9A95C; /* dezentes Gold */
--color-line: #D9D1BE;
/* Typography */
--font-display: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
--font-body: 'Noto Sans JP', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Rhythm */
--unit: 8px;
--radius: 2px;
--max-width: 1200px;
/* Motion */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
}
/* -----------------------------------------------------
Reset + Basis
----------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* dezente Washi-Textur aus SVG-noise */
background-image:
radial-gradient(ellipse at top left, rgba(232,165,180,.08), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(180,74,74,.05), transparent 50%),
url("data:image/svg+xml;utf8,");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; background: none; border: none; }
::selection { background: var(--color-sakura); color: var(--color-ink); }
/* -----------------------------------------------------
Typografie-Helfer
----------------------------------------------------- */
.display {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.05;
}
.kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-ink-muted);
display: inline-flex;
align-items: center;
gap: 10px;
}
.kicker::before {
content: '';
width: 28px;
height: 1px;
background: var(--color-hanko);
}
.jp {
font-family: var(--font-display);
font-weight: 400;
}
/* -----------------------------------------------------
Layout-Container
----------------------------------------------------- */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 48px);
}
section { position: relative; padding: clamp(80px, 12vh, 140px) 0; }
section + section { border-top: 1px solid var(--color-line); }
/* Vertikale Kanji-Akzente (Dekoration) */
.vertical-accent {
position: absolute;
top: 50%;
right: clamp(12px, 2vw, 32px);
transform: translateY(-50%);
writing-mode: vertical-rl;
font-family: var(--font-display);
font-size: clamp(80px, 14vw, 220px);
color: var(--color-sakura);
opacity: .08;
pointer-events: none;
letter-spacing: .3em;
user-select: none;
font-weight: 300;
z-index: 0;
}
/* -----------------------------------------------------
Navigation
----------------------------------------------------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
background: rgba(246, 241, 232, .78);
border-bottom: 1px solid transparent;
transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled {
border-bottom-color: var(--color-line);
background: rgba(246, 241, 232, .92);
}
.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 18px clamp(20px, 5vw, 48px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.nav-logo {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
}
.nav-logo .kanji {
font-size: 22px;
color: var(--color-hanko);
letter-spacing: .05em;
}
.nav-logo .latin {
font-size: 14px;
letter-spacing: .1em;
}
.nav-menu {
display: flex;
gap: clamp(12px, 2.4vw, 28px);
list-style: none;
align-items: center;
}
/* Container