@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin.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}

:root {
  --schwarz: #0a0a0a;
  --creme: #f3c6c3;
  --weiss: #f4f1ec;
  --rosa: #f6c9cf;
  --kirsch: #c8102e;
  --dunkelrot: #1a0f10;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.dark-welt { background: var(--schwarz); color: var(--weiss); }
.sweet-welt { background: var(--creme); color: var(--dunkelrot); }

/* Filmkorn nur in DARK. Sweet bekommt dieselbe feste Ebene fast unsichtbar (Ralph 16.10.2026): dadurch faerbt iPhone-Safari
   den Rand ueber der Leiste nicht rosa ein, beim Scrollen sieht man dort wie auf Dark den Inhalt darunter. */
.korn::after, .sweet-welt::after {
  content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 50;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  opacity: .09; mix-blend-mode: overlay; animation: korn 1.2s steps(6) infinite;
}
.sweet-welt::after { opacity: .015; animation: none; }
@keyframes korn {
  0% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) }
  60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } 100% { transform: translate(0,0) }
}

.wrap { padding-left: clamp(16px, 5vw, 72px); padding-right: clamp(16px, 5vw, 72px); }

.nav {
  position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 18px; padding-bottom: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.dark-welt .nav { background: rgba(10,10,10,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sweet-welt .nav { background: rgba(243,198,195,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nav .marke img { width: 150px; }
.nav ul { display: flex; gap: clamp(14px, 3vw, 32px); list-style: none; align-items: center; }
.nav a { opacity: .75; transition: opacity .2s; }
.nav a:hover, .nav a.aktiv { opacity: 1; }
.nav .wechsel { opacity: 1; padding: 8px 12px; border: 1px solid currentColor; }
/* Ralph 15.10.: oben nur noch DARK und SWEET, die aktive Seite umrandet, die andere in ihrer Farbe */
.nav .welt { opacity: 1; padding: 8px 12px; border: 1px solid currentColor; }
@media (max-width: 600px) { .nav .marke img { width: 120px; } .nav ul { gap: 10px; } }

.kicker { font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; opacity: .6; }
.riesig { font-weight: 900; font-stretch: 62%; line-height: .82; text-transform: uppercase; letter-spacing: -.01em; }
h2.abschnitt { font-size: clamp(38px, 6vw, 88px); font-weight: 900; font-stretch: 62%; line-height: .9; text-transform: uppercase; }

.knopf {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid currentColor; transition: background .2s, color .2s, border-color .2s;
}
.dark-welt .knopf:hover { background: var(--weiss); color: var(--schwarz); }
.sweet-welt .knopf:hover { background: var(--kirsch); border-color: var(--kirsch); color: #fff; }
.knopf.voll { background: var(--kirsch); border-color: var(--kirsch); color: #fff; }
.knopf.voll:hover { background: var(--dunkelrot); border-color: var(--dunkelrot); }
.knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

.fuss {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 40px; padding-bottom: 40px; margin-top: 60px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border-top: 1px solid rgba(128,128,128,.25);
}
.fuss nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fuss a { opacity: .6; } .fuss a:hover { opacity: 1; }