@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sec: clamp(104px, 12vw, 152px);
  --pine: #1f4a35;
  --pine-dark: #12301f;
  --pine-soft: #e7efe9;
  --berry: #a3212b;
  --berry-dark: #7a1219;
  --gold: #c99a2e;
  --gold-soft: #f6ecd2;
  --gold-light: #f2c879;
  --paper: #fbf7ee;
  --card: #ffffff;
  --ink: #23251f;
  --muted: #5f5e57;
  --line: #e7dfcc;
  --night: #172640;
  --night-deep: #0c1830;
  --snow: #f4f7fb;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(18, 48, 31, 0.06), 0 8px 24px rgba(18, 48, 31, 0.08);
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Young Serif", Georgia, serif;
  --street: #0e1a33;
  --gutter: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; min-height: calc(100% + env(safe-area-inset-top)); scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  font-optical-sizing: auto;
}
::selection { background: var(--gold-light); color: var(--night-deep); }
img, svg { max-width: 100%; }
a { color: var(--berry); text-underline-offset: 0.15em; }
a:hover { color: var(--berry-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-synthesis: none; }
.nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--night); font-weight: 800;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top)); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* ---------- Knöpfe ---------- */
.btn {
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent;
  background: var(--berry); color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 14px rgba(163, 33, 43, 0.3);
  transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: var(--berry-dark); color: #fff; transform: translateY(-1px); }
.btn-light { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.55); color: #fff; box-shadow: none; }
.btn-light:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--night); box-shadow: none; }
.btn-ghost:hover { background: #fff; border-color: var(--gold); color: var(--night); }
.btn-small { min-height: 42px; padding: 8px 16px; font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ---------- Kopf und Hero ---------- */
.top {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(12, 24, 48, 0.78) 0%, rgba(12, 24, 48, 0.6) 45%, rgba(12, 24, 48, 0) 70%),
    linear-gradient(180deg, rgba(12, 24, 48, 0.72) 0%, rgba(12, 24, 48, 0.45) 60%, rgba(12, 24, 48, 0.2) 90%),
    var(--night) url("/header.svg") center bottom / cover no-repeat;
  padding-top: env(safe-area-inset-top);
}
.top-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.brand span { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand:hover { color: #fff; }
.top-link { color: #fff; font-weight: 800; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(10, 20, 40, 0.35); font-size: 0.92rem; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-link { border-color: transparent; background: none; }
.top-cta { box-shadow: none; }
@media (max-width: 559px) {
  .top-cta { display: none; }
}
.top-link:hover { color: #fff; background: rgba(10, 20, 40, 0.6); }

.hero {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center;
  padding-top: 22px; padding-bottom: calc(var(--sec) / 2);
}
.hero h1 {
  margin: 0;
  font-family: "Young Serif", Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2.3rem, 7.4vw, 4.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(8, 16, 34, 0.6);
}
.hero h1 em { display: block; font-style: normal; color: var(--gold-light); }
.hero h1 .h1-sub { display: block; margin-top: 0.3em; font-size: 0.58em; letter-spacing: -0.01em; color: #fff; }
.lead { margin: 20px 0 0; max-width: 28em; font-size: clamp(1.08rem, 2.4vw, 1.25rem); line-height: 1.5; color: #e6edf8; text-shadow: 0 1px 8px rgba(8, 16, 34, 0.6); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-facts { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; margin: 26px 0 0; padding: 0; list-style: none; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: clamp(0.98rem, 2.6vw, 1.08rem); white-space: nowrap; }
.hero-facts li::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23f2c879' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 479px) { .hero-facts { gap: 8px 10px; } }
@media (max-width: 899px) { .hero-facts { justify-content: center; } }

.phone {
  margin: 0; position: relative;
  border-radius: 38px; padding: 9px;
  background: linear-gradient(160deg, #2a3a5c, #0a1226 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 30px 70px rgba(2, 6, 18, 0.6);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.hero-phone { width: min(66%, 300px); margin: 0 auto; transform: rotate(3deg); }
@media (max-width: 479px) { .hero .cta .btn { flex: 1 1 100%; } }
.hero-phone::after {
  content: ""; position: absolute; inset: -40px -60px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 194, 122, 0.35), transparent);
}

/* Schneefall im Kopfbereich */
.snow, .snow::after {
  position: absolute; inset: -240px 0 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 90px 80px, #fff 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 160px 20px, #fff 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 230px 100px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 290px 50px, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 60px 150px, #fff 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 200px 180px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 320px 200px, #fff 50%, transparent 52%),
    radial-gradient(2.5px 2.5px at 130px 120px, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 250px 30px, #fff 50%, transparent 52%),
    radial-gradient(3px 3px at 40px 210px, #fff 50%, transparent 52%),
    radial-gradient(2px 2px at 180px 70px, #fff 50%, transparent 52%);
  background-size: 260px 240px;
  opacity: 0.85;
  animation: snowfall 9s linear infinite;
}
.snow::after { content: ""; inset: 0; background-position: 70px 40px; opacity: 0.6; animation-duration: 14s; }
@keyframes snowfall { to { transform: translateY(240px); } }
@media (prefers-reduced-motion: reduce) { .snow, .snow::after { animation: none; } }

/* Schneewehe als Übergang zum hellen Teil */
.drift {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
  height: 70px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44 V26 C20 20 38 18 58 23 C80 29 96 16 122 18 C146 20 158 28 182 25 C206 22 214 14 240 16 C266 18 274 27 300 26 C324 25 334 17 358 19 C378 21 390 25 400 24 V44Z' fill='%23fbf7ee' opacity='.55'/%3E%3Cpath d='M0 44 V34 C20 28 38 26 58 31 C80 37 96 24 122 26 C146 28 158 36 182 33 C206 30 214 22 240 24 C266 26 274 35 300 34 C324 33 334 25 358 27 C378 29 390 33 400 32 V44Z' fill='%23fbf7ee'/%3E%3Cpath d='M0 34 C20 28 38 26 58 31 C80 37 96 24 122 26 C146 28 158 36 182 33 C206 30 214 22 240 24 C266 26 274 35 300 34 C324 33 334 25 358 27 C378 29 390 33 400 32' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.top:has(.hero) .drift { display: none; }
.top:has(.hero) {
  background:
    linear-gradient(180deg, rgba(14, 26, 51, 0) calc(100% - 200px), rgba(14, 26, 51, 0.8) calc(100% - 80px), var(--street) 100%),
    linear-gradient(90deg, rgba(12, 24, 48, 0.78) 0%, rgba(12, 24, 48, 0.6) 45%, rgba(12, 24, 48, 0) 70%),
    linear-gradient(180deg, rgba(12, 24, 48, 0.72) 0%, rgba(12, 24, 48, 0.45) 60%, rgba(12, 24, 48, 0.2) 90%),
    var(--street) url("/header.svg") center bottom / cover no-repeat;
}
@media (max-width: 899px) {
  .top { background-size: auto, auto, cover; }
  .top:has(.hero) { background-size: auto, auto, auto, cover; }
  .top::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(12, 24, 48, 0.45) calc(100% - 220px), rgba(12, 24, 48, 0)); pointer-events: none; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; padding-top: 40px; padding-bottom: calc(var(--sec) / 2 + 20px); }
  .hero-phone { width: min(100%, 320px); }
  .top-bar { padding-top: 20px; }
}

/* ---------- Nacht-Straßenplan ---------- */
main:has(> .night) {
  display: block;
  background:
    linear-gradient(180deg, var(--street), rgba(14, 26, 51, 0)) 0 0 / 100% 240px no-repeat,
    var(--street) url("/plattform/strassen.svg") 0 0 / 640px repeat;
}
.night { position: relative; isolation: isolate; padding: calc(var(--sec) / 2) 0; color: #dbe5f5; }
.night::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14, 26, 51, 0.8), rgba(14, 26, 51, 0.35) 70%, rgba(14, 26, 51, 0)),
    radial-gradient(circle at 10% 70%, rgba(255, 196, 110, 0.14), transparent 40%);
}
.night-2::before {
  background:
    radial-gradient(ellipse 70% 80% at 60% 50%, rgba(14, 26, 51, 0.78), rgba(14, 26, 51, 0.3) 75%, rgba(14, 26, 51, 0)),
    radial-gradient(circle at 20% 55%, rgba(255, 196, 110, 0.2), transparent 45%);
}
.night-3::before {
  background:
    radial-gradient(ellipse 65% 75% at 50% 45%, rgba(14, 26, 51, 0.82), rgba(14, 26, 51, 0.35) 75%, rgba(14, 26, 51, 0)),
    radial-gradient(circle at 88% 80%, rgba(255, 196, 110, 0.14), transparent 40%);
}
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--pine-dark);
}
.night h2 { color: #fff; max-width: 16em; }
.night .sub { margin: 12px 0 0; max-width: 34em; color: #b9c8e0; font-size: 1.06rem; }
h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; line-height: 1.3; color: var(--night); }

/* Girlande mit Kugeln */
.together { text-align: center; }
.together h2 { margin-inline: auto; text-wrap: balance; }
.together .sub { margin-inline: auto; }
.together-list { list-style: none; margin: 32px auto 0; padding: 0; display: grid; gap: 18px; width: fit-content; max-width: 100%; }
.together-list li { display: flex; align-items: center; gap: 14px; text-align: left; color: #fff; font-size: 1.1rem; }
.together-list svg { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 50%; color: var(--gold-light); background: rgba(242, 200, 121, 0.1); border: 1px solid rgba(242, 200, 121, 0.35); }
@media (min-width: 760px) { .together-list { grid-template-columns: repeat(3, auto); justify-content: center; gap: 36px; } }
.garland { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 28px; position: relative; }
.garland li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start; }
.garland .ball {
  grid-row: span 2;
  position: relative;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e0505a, #c41824 50%, #6e0b10);
  color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset -4px -6px 12px rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.6);
}
.garland .ball::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 11px; transform: translateX(-50%);
  border-radius: 3px 3px 2px 2px; background: linear-gradient(90deg, #a7832c, #f2d58a, #a7832c);
}
.garland .ball.is-gold { background: radial-gradient(circle at 34% 30%, #fff1b8, #e0ac2c 50%, #c08a1a); color: #3f2900; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45) ; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6); }
.garland h3 { color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; padding-top: 6px; }
.garland p { margin: 4px 0 0; color: #b9c8e0; }
@media (max-width: 759px) {
  .garland::before { content: ""; position: absolute; left: 31px; top: -44px; bottom: 30px; width: 2px; background: linear-gradient(#d6b36a00, #d6b36a 30px, #d6b36a); opacity: 0.7; }
}
@media (min-width: 760px) {
  .garland { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 36px; margin-top: 56px; padding-top: 30px; }
  .garland::before {
    content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 60' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q150 58 300 30 T600 30 T900 4' fill='none' stroke='%23d6b36a' stroke-width='2.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: 0.85;
  }
  .garland li { grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 12px; }
  .garland li:nth-child(odd) { padding-top: 40px; }
  .garland li:nth-child(2) { padding-top: 19px; }
  .garland .ball { grid-row: auto; align-self: start; width: 76px; height: 76px; font-size: 2rem; animation: sway 6s ease-in-out infinite; transform-origin: 50% -33px; }
  .garland .ball::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + 9px); width: 1.5px; height: 24px; transform: translateX(-50%); background: #d6b36a; }
  .garland li:nth-child(2) .ball { animation-delay: -2s; }
  .garland li:nth-child(3) .ball { animation-delay: -4s; }
  .garland p { max-width: 17em; }
}
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .garland .ball { animation: none !important; } }

/* Handys und Funktionen */
.showcase { display: grid; gap: 48px; align-items: center; }
.phones { position: relative; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 1 / 1.05; }
.phones .phone { position: absolute; width: 56%; }
.phone-back { left: 0; top: 0; transform: rotate(-5deg); opacity: 0.92; }
.phone-front { right: 0; bottom: 0; transform: rotate(4deg); }
.phones::before {
  content: ""; position: absolute; inset: 10% 0; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 200, 110, 0.28), transparent);
}
.perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.perks li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.perks svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  color: var(--gold-light); background: rgba(242, 200, 121, 0.1); border: 1px solid rgba(242, 200, 121, 0.35);
}
.perks span { color: #b9c8e0; }
.perks b { display: block; color: #fff; font-size: 1.1rem; font-weight: 700; }
@media (max-width: 859px) { .phones { display: none; } }
@media (min-width: 860px) { .showcase { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; } }

/* Beispiele als Türchen */
.doors { display: grid; gap: 18px; margin-top: 32px; }
.door {
  position: relative;
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 8px;
  padding: 26px 24px 24px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(36, 54, 92, 0.9), rgba(16, 28, 54, 0.95));
  box-shadow: 0 18px 40px rgba(2, 6, 18, 0.45);
}
.door::after {
  content: ""; position: absolute; inset: 8px; border-radius: 14px; pointer-events: none;
  border: 1.5px dashed rgba(242, 200, 121, 0.28);
}
.door-n {
  position: absolute; right: 22px; top: 12px;
  font-family: var(--font-display); font-weight: 400; font-size: 3.4rem; line-height: 1; color: rgba(242, 200, 121, 0.18);
}
.door h3 { position: relative; z-index: 1; padding-right: 2.6em; color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; }
.door p { margin: 0; color: #b9c8e0; }
.door-links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-self: end; }
@media (min-width: 700px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } .door h3 { font-size: 1.45rem; } }

/* FAQ auf Schnee */
.btn-paypal { background: #ffc439; color: #111; box-shadow: none; }
.btn-paypal:hover { background: #f2b52a; color: #111; }
.snowfield { position: relative; padding: calc(var(--sec) / 2 + 16px) 0 calc(var(--sec) / 2); background: var(--paper); }
.snowfield::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V14 C20 14 38 17 58 13 C80 9 96 18 122 16 C146 12 158 8 182 11 C206 15 214 19 240 17 C266 14 274 9 300 10 C324 12 334 18 358 15 C378 13 390 11 400 12 V0Z' fill='%230e1a33'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.snowfield h2 { max-width: 14em; }
.faq { display: grid; gap: 10px; max-width: 820px; margin-top: 30px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.faq details[open] { border-color: #e2cf9f; box-shadow: var(--shadow); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--night); font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 11px; height: 11px;
  border-right: 2.5px solid var(--berry); border-bottom: 2.5px solid var(--berry);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > p { margin: 0; padding: 0 20px 20px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .faq details { transition: none; } }

/* Abschluss */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--sec) / 2 + 24px) 0 calc(150px + env(safe-area-inset-bottom));
  color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(12, 24, 48, 0.1), rgba(12, 24, 48, 0.75)), var(--night) url("/header.svg") center bottom / cover no-repeat;
}
.final::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 60px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V14 C20 14 38 17 58 13 C80 9 96 18 122 16 C146 12 158 8 182 11 C206 15 214 19 240 17 C266 14 274 9 300 10 C324 12 334 18 358 15 C378 13 390 11 400 12 V0Z' fill='%23fbf7ee'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
.final .wrap { position: relative; z-index: 3; }
.final h2 { color: #fff; text-shadow: 0 2px 14px rgba(8, 16, 34, 0.6); }
.final p { margin: 12px auto 0; max-width: 32em; color: #e6edf8; text-shadow: 0 1px 8px rgba(8, 16, 34, 0.6); }
.final .cta { justify-content: center; }

/* Fuß */
.foot {
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--night-deep); color: #c9d7ee; font-size: 0.92rem;
}
.foot .wrap { display: grid; gap: 10px; }
.foot a { color: #fff; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot nav a { text-decoration: none; font-weight: 700; }
.foot nav a:hover { text-decoration: underline; }
.foot-small { margin: 0; color: #93a6c4; font-size: 0.85rem; }
.foot-made { margin: 0; color: #7d8fae; font-size: 0.78rem; }
.foot .foot-made a { color: inherit; font-weight: 400; }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: center; } .foot-small, .foot-made { grid-column: 1 / -1; } }

/* ---------- Rechtstexte ---------- */
.top-slim { padding-bottom: 46px; }
.top-slim .drift { height: 44px; }
.legal { max-width: 760px; padding-top: 28px; padding-bottom: 56px; }
.legal h1 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; color: var(--pine-dark);
}
.legal .updated { margin: 0 0 26px; color: var(--muted); font-size: 0.92rem; }
.legal h2 { font-size: 1.35rem; margin: 32px 0 8px; }
.legal h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.legal p, .legal li { margin: 0 0 10px; }
.legal ul { padding-left: 1.2em; margin: 0 0 12px; }
.legal address { font-style: normal; }
.legal .box { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 14px; }
.legal .toc { padding: 14px 18px; background: var(--gold-soft); border-radius: 14px; margin: 0 0 8px; }
.legal .toc ol { margin: 6px 0 0; padding-left: 1.3em; }
.legal .toc li { margin: 2px 0; }
@media (max-width: 440px) {
  .brand { gap: 8px; min-width: 0; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 1.02rem; }
  .top-link { padding: 6px 12px; font-size: 0.86rem; }
}

.page-kicker { margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.page-kicker a { color: var(--berry); text-decoration: none; }
.page-kicker a:hover { text-decoration: underline; }

@media (max-width: 359px) {
  .brand span { display: none; }
  .hero-facts { grid-template-columns: max-content; }
  .hero h1 { font-size: min(2rem, 10.5vw); }
}