/* --- Basis-Reset (ersetzt Tailwind Preflight, damit die Optik identisch bleibt) --- */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
ol, ul, menu { list-style: none; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; background: transparent; }

:root {
  --bg: #050505;
  --surface: rgba(23, 23, 25, 0.72);
  --line: rgba(255, 255, 255, 0.11);
  --text: #f7f7f8;
  --muted: #aaaab1;
  --pink: #ff2d79;
  --pink-soft: #b51956;
  --cyan: #52d8ff;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 45, 121, 0.10), transparent 29rem),
    radial-gradient(circle at 5% 58%, rgba(82, 216, 255, 0.055), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}
main { width: 100%; max-width: 100%; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1180px, calc(100% - 40px)); min-width: 0; margin-inline: auto; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(110px); pointer-events: none; }
.ambient-one { width: 330px; height: 330px; right: -90px; top: 18%; background: rgba(255, 45, 121, .12); }
.ambient-two { width: 300px; height: 300px; left: -150px; top: 65%; background: rgba(43, 186, 255, .08); }

.site-header {
  position: relative;
  z-index: 20;
  margin-top: 18px;
  min-height: 68px;
  padding: 10px 12px 10px 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(30, 30, 32, .78), rgba(13, 13, 14, .62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 19px; font-weight: 780; letter-spacing: -.04em; }
.brand img { border-radius: 14px; }
.desktop-nav { display: flex; gap: 7px; padding: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(255,255,255,.035); }
.desktop-nav a { color: #c9c9cd; padding: 9px 17px; border-radius: 999px; font-size: 13px; font-weight: 650; transition: .25s ease; }
.desktop-nav a:hover { color: white; background: rgba(255,255,255,.08); }
.site-header > .app-store-badge { justify-self: end; }

/* Offizielles Apple App Store Badge. Die SVG-Datei wird unveraendert
   eingebunden; hier wird ausschliesslich die Anzeigehoehe gesetzt.
   Der Freiraum ringsum entspricht mindestens einem Viertel der Badge-Hoehe. */
.app-store-badge {
  display: inline-block;
  margin: 10px;
  transition: transform .25s ease;
}
.app-store-badge img { height: 54px; width: auto; }
.app-store-badge:hover { transform: translateY(-2px); }
.app-store-badge--compact { margin: 0; }
.app-store-badge--compact img { height: 40px; }

.hero { min-height: 760px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 36px; padding-top: 58px; padding-bottom: 72px; }
.hero-copy { position: relative; z-index: 5; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #c9c9cd; background: rgba(255,255,255,.045); font-size: 12px; font-weight: 650; backdrop-filter: blur(18px); }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: #39df73; box-shadow: 0 0 0 5px rgba(57,223,115,.10), 0 0 14px rgba(57,223,115,.65); animation: activity-pulse 2s ease-out infinite; }
.hero h1 { margin: 25px 0 22px; max-width: 540px; font-size: clamp(4.3rem, 7vw, 7rem); line-height: .82; letter-spacing: -.085em; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--pink); text-shadow: 0 0 55px rgba(255,45,121,.28); }
.hero-copy > p { max-width: 520px; margin: 0; color: #b6b6bd; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; letter-spacing: -.025em; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.text-link { color: #dddde0; font-size: 14px; font-weight: 720; }
.text-link span { display: inline-grid; place-items: center; width: 27px; height: 27px; margin-left: 6px; border: 1px solid var(--line); border-radius: 50%; transition: .25s; }
.text-link:hover span { transform: rotate(-45deg); color: var(--pink); }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 30px; color: #7f7f87; font-size: 11px; font-weight: 650; }

.hero-visual { position: relative; min-width: 0; min-height: 640px; overflow: hidden; perspective: 1400px; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.orbit-one { width: 530px; height: 530px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.orbit-two { width: 390px; height: 390px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-color: rgba(255,45,121,.12); }
.phone-shot { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 38px; background: #030607; box-shadow: 0 40px 100px rgba(0,0,0,.62), inset 0 0 0 5px #0e0e0f; }
.phone-shot::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset 0 0 0 6px rgba(0,0,0,.88), inset 0 0 0 7px rgba(255,255,255,.09); pointer-events: none; }
.phone-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #030607; }
.phone-speaker { display: none; }
.phone-main { z-index: 3; width: 292px; aspect-ratio: 941 / 1672; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(.7deg); }
.phone-main img { object-position: center; }
.phone-left { z-index: 2; width: 225px; aspect-ratio: 941 / 1672; left: 3%; top: 51%; transform: translateY(-50%) rotate(-9deg); filter: brightness(.78); }
.phone-right { z-index: 1; width: 220px; aspect-ratio: 941 / 1672; right: 1%; top: 50%; transform: translateY(-50%) rotate(9deg); filter: brightness(.66); }
.floating-card { position: absolute; z-index: 8; padding: 11px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(27,27,29,.76); color: #f7f7f8; font-size: 12px; font-weight: 730; box-shadow: 0 18px 40px rgba(0,0,0,.35); backdrop-filter: blur(20px); }
.floating-card i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #ff3b47; box-shadow: 0 0 12px #ff3b47; }
.floating-live { top: 18%; right: 2%; transform: rotate(3deg); animation: float-live 4.4s ease-in-out infinite; }
.floating-event { left: 1%; bottom: 18%; transform: rotate(-4deg); animation: float-event 5.2s ease-in-out infinite; }

.signal-strip { overflow: hidden; border-block: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); }
.signal-strip div { width: max-content; display: flex; align-items: center; gap: 25px; padding: 18px 0; animation: ticker 24s linear infinite; }
.signal-strip span { color: #777780; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.signal-strip b { color: var(--pink); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-30%); } }

.eyebrow, .feature-index { color: #777780; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.section-intro { padding: 120px 0 72px; text-align: center; }
.section-intro h2, .final-cta h2 { margin: 15px auto 22px; font-size: clamp(3.3rem, 7vw, 6.5rem); line-height: .93; letter-spacing: -.075em; }
.section-intro h2 span, .final-cta h2 span { color: var(--pink); }
.section-intro > p:last-child { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.6; }

.feature-panel {
  min-height: 700px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 36px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 42px;
  background:
    radial-gradient(circle at 25% 48%, rgba(54, 180, 213, .13), transparent 22rem),
    linear-gradient(145deg, rgba(17,24,26,.93), rgba(8,8,9,.98) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 100px rgba(0,0,0,.24);
}
.feature-phone-wrap { position: relative; height: 700px; display: grid; place-items: center; }
.product-phone { position: relative; z-index: 3; width: 285px; aspect-ratio: 941 / 1672; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 38px; background: #030607; box-shadow: 0 42px 90px rgba(0,0,0,.55), inset 0 0 0 6px #111; }
.product-phone::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 6px #0b0b0c, inset 0 0 0 7px rgba(255,255,255,.08); pointer-events: none; }
.product-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #030607; }
.map-radar { position: absolute; z-index: 1; width: 500px; height: 500px; border: 1px solid rgba(82,216,255,.10); border-radius: 50%; animation: radar-breathe 4s ease-in-out infinite; }
.map-radar::before, .map-radar::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(82,216,255,.11); border-radius: 50%; }
.map-radar::after { inset: 36%; }
.map-radar i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 17px var(--cyan); }
.map-radar i:nth-child(1) { left: 7%; top: 47%; animation: radar-dot 2.4s ease-in-out infinite; }
.map-radar i:nth-child(2) { right: 17%; top: 18%; background: var(--pink); box-shadow: 0 0 17px var(--pink); animation: radar-dot 2.4s .6s ease-in-out infinite; }
.map-radar i:nth-child(3) { right: 4%; bottom: 24%; animation: radar-dot 2.4s 1.2s ease-in-out infinite; }
.map-chip { position: absolute; z-index: 6; padding: 10px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(12,15,16,.72); font-size: 10px; font-weight: 800; letter-spacing: .08em; backdrop-filter: blur(16px); }
.chip-story { left: 7%; top: 25%; color: #ff4b91; }
.chip-event { right: 8%; top: 37%; color: #ff9c32; }
.chip-friends { left: 8%; bottom: 25%; color: var(--cyan); }
.feature-copy { padding: 60px 70px 60px 30px; }
.feature-copy h3, .event-copy h3, .community-copy h3, .safety-panel h3 { margin: 14px 0 20px; font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: .98; letter-spacing: -.06em; }
.feature-copy > p, .event-copy > p, .community-copy > p, .safety-panel p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-list { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.feature-list li { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.07); }
.feature-list li > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); color: var(--cyan); }
.feature-list b { font-size: 14px; }
.feature-list small { margin-top: 4px; color: #777780; font-size: 12px; }

.event-section {
  min-height: 720px;
  margin-top: 24px;
  padding: 70px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: 50px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 42px;
  background:
    radial-gradient(circle at 78% 50%, rgba(255,45,121,.18), transparent 22rem),
    linear-gradient(145deg, #10090d, #070708 58%);
}
.event-copy { position: relative; z-index: 5; }
.event-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.event-tags span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: #d3d3d7; font-size: 12px; }
.event-visual { position: relative; min-height: 590px; }
.event-phone { position: absolute; width: 275px; right: 12%; top: 50%; transform: translateY(-50%) rotate(4deg); }
.event-card { position: absolute; z-index: 8; left: -2%; bottom: 4%; width: 230px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: rgba(17,17,18,.86); box-shadow: 0 30px 70px rgba(0,0,0,.5); backdrop-filter: blur(22px); transform: rotate(-3deg); }
.event-card-cover { position: relative; width: 100%; height: auto; aspect-ratio: 941 / 1672; overflow: hidden; background: #030607; }
.event-card-cover::after { content: none; }
.event-card-cover img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.event-card-cover span { position: absolute; z-index: 2; left: 15px; bottom: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(255,45,121,.88); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.event-card-body { position: relative; padding: 16px; }
.event-card-body small { color: #9999a1; font-size: 9px; font-weight: 760; letter-spacing: .08em; }
.event-card-body h4 { margin: 7px 0 16px; font-size: 21px; letter-spacing: -.04em; }
.avatar-stack { display: flex; align-items: center; }
.avatar-stack i, .avatar-stack b { width: 31px; height: 31px; margin-left: -7px; border: 2px solid #151516; border-radius: 50%; background: linear-gradient(145deg,#d7a68f,#4e2e28); }
.avatar-stack i:first-child { margin-left: 0; background: linear-gradient(145deg,#dbb294,#372120); }
.avatar-stack i:nth-child(2) { background: linear-gradient(145deg,#799eb9,#172537); }
.avatar-stack i:nth-child(3) { background: linear-gradient(145deg,#be92a4,#301725); }
.avatar-stack b { display: grid; place-items: center; background: #27272a; color: #fff; font-size: 9px; }

.community-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.community-card { position: relative; min-height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 42px; background: linear-gradient(145deg, rgba(20,20,22,.94), rgba(7,7,8,.98)); }
.community-chat { background: radial-gradient(circle at 68% 78%, rgba(255,45,121,.14), transparent 20rem), linear-gradient(145deg,#151015,#080808); }
.community-feed { background: radial-gradient(circle at 68% 78%, rgba(82,216,255,.10), transparent 20rem), linear-gradient(145deg,#101416,#080808); }
.community-copy { position: relative; z-index: 7; padding: 48px 50px 0; }
.community-copy h3 { max-width: 480px; font-size: clamp(2.3rem, 3.6vw, 3.7rem); }
.community-copy p { max-width: 460px; font-size: 15px; }
.community-card .product-phone { position: absolute; z-index: 3; width: 275px; left: 50%; top: 350px; transform: translateX(-50%) rotate(-2deg); }
.community-feed .product-phone { transform: translateX(-50%) rotate(2deg); aspect-ratio: 941 / 1672; }

@keyframes activity-pulse {
  0% { box-shadow: 0 0 0 0 rgba(57,223,115,.42), 0 0 14px rgba(57,223,115,.7); }
  70% { box-shadow: 0 0 0 9px rgba(57,223,115,0), 0 0 18px rgba(57,223,115,.5); }
  100% { box-shadow: 0 0 0 0 rgba(57,223,115,0), 0 0 14px rgba(57,223,115,.7); }
}
@keyframes float-live {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes float-event {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(9px) rotate(-2deg); }
}
@keyframes radar-breathe {
  0%, 100% { opacity: .75; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.025); }
}
@keyframes radar-dot {
  0%, 100% { opacity: .55; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.35); }
}

.safety-panel { margin-top: 24px; padding: 38px 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; border: 1px solid rgba(255,255,255,.09); border-radius: 32px; background: linear-gradient(115deg, rgba(22,22,24,.88), rgba(10,10,11,.96)); }
.safety-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,45,121,.25); border-radius: 23px; background: rgba(255,45,121,.09); color: var(--pink); font-size: 31px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.safety-panel h3 { margin: 8px 0 7px; font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
.safety-panel p { max-width: 760px; margin: 0; font-size: 14px; }
.safety-status { white-space: nowrap; padding: 11px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: #aaaab1; font-size: 11px; font-weight: 700; }
.safety-status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 13px var(--pink); }

.final-cta { padding: 140px 0 130px; text-align: center; }
.cta-logo { display: block; margin: 0 auto 24px; border-radius: 24px; box-shadow: 0 18px 55px rgba(255,45,121,.13); }
.final-cta h2 { margin-bottom: 18px; }
.cta-copy { margin: 0 0 28px; color: var(--muted); font-size: 17px; }
.final-cta .app-store-badge { margin-inline: auto; }

.site-footer { border-top: 1px solid rgba(255,255,255,.08); background: #030303; }
.footer-main { min-height: 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; color: #777780; font-size: 12px; }
.footer-main > a:last-child { justify-self: end; transition: color .2s; }
.footer-main > a:last-child:hover { color: white; }
.footer-brand { color: white; }
.legal { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; gap: 8px; padding: 0 0 28px; }
.legal > a { padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; color: #8f8f96; font-size: 11px; transition: .2s; }
.legal > a:hover { color: white; background: rgba(255,255,255,.05); }
.copyright { padding: 18px 0 25px; border-top: 1px solid rgba(255,255,255,.05); color: #4f4f55; text-align: center; font-size: 10px; letter-spacing: .08em; }

.legal-page { min-height: 100vh; padding: 20px 0 50px; background: radial-gradient(circle at 78% 14%, rgba(255,45,121,.09), transparent 27rem), #050505; }
.legal-header { min-height: 68px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.09); border-radius: 25px; background: rgba(21,21,23,.72); backdrop-filter: blur(24px); }
.legal-back { padding: 10px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #b5b5bb; font-size: 12px; font-weight: 700; }
.legal-document { max-width: 800px; padding-top: 105px; padding-bottom: 80px; }
.legal-document > h1 { margin: 15px 0 18px; font-size: clamp(3.8rem, 9vw, 7rem); line-height: .88; letter-spacing: -.08em; }
.legal-intro { max-width: 680px; margin: 0; color: #a4a4ac; font-size: 18px; line-height: 1.6; }
.legal-sections { display: grid; gap: 14px; margin-top: 55px; }
.legal-sections section, .legal-sections > .legal-version { padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: rgba(255,255,255,.025); }
.legal-sections h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -.035em; }
.legal-sections p, .legal-sections li { color: #a4a4ac; font-size: 14px; line-height: 1.72; }
.legal-sections a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.legal-sections ol { margin: 0; padding-left: 21px; }
.legal-warning { margin-top: 20px; padding: 15px; border: 1px solid rgba(255,174,0,.2); border-radius: 14px; background: rgba(255,174,0,.06); color: #d2aa5b; font-size: 13px; line-height: 1.6; }
.legal-version { color: #707079 !important; font-size: 11px !important; letter-spacing: .08em; }
.legal-page-footer { padding-top: 25px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); color: #6f6f77; font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr; padding-top: 86px; text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero h1 { margin-inline: auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-visual { margin-top: 20px; }
  .feature-panel { grid-template-columns: 1fr; }
  .feature-phone-wrap { order: 2; height: 650px; }
  .feature-copy { padding: 65px 70px 0; text-align: center; }
  .feature-list { max-width: 560px; margin-inline: auto; text-align: left; }
  .event-section { grid-template-columns: 1fr; padding: 65px 70px 30px; text-align: center; }
  .event-copy > p { max-width: 620px; margin-inline: auto; }
  .event-tags { justify-content: center; }
  .event-visual { min-height: 610px; }
  .event-phone { right: 23%; }
  .event-card { left: 16%; }
  .community-grid { grid-template-columns: 1fr; }
  .community-card { min-height: 650px; text-align: center; }
  .community-copy p, .community-copy h3 { margin-inline: auto; }
  .safety-panel { grid-template-columns: auto 1fr; }
  .safety-status { grid-column: 2; justify-self: start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-main > p { display: none; }
  .legal { grid-template-columns: repeat(3, auto); }
}

@media (max-width: 620px) {
  .shell { width: min(100% - 24px, 1180px); }
  .site-header { min-height: 59px; margin-top: 10px; border-radius: 22px; }
  .brand img { width: 38px; height: 38px; }
  .site-header .app-store-badge img { height: 34px; }
  .hero { min-height: auto; padding-top: 74px; padding-bottom: 34px; }
  .hero h1 { font-size: clamp(4rem, 21vw, 5.6rem); }
  .hero-copy > p { font-size: 1rem; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .trust-row { gap: 10px 16px; }
  .hero-visual { min-height: 535px; width: 100%; margin-left: 0; }
  .phone-main { width: 238px; }
  .phone-left { width: 171px; left: -6%; }
  .phone-right { width: 168px; right: -6%; }
  .orbit-one { width: 390px; height: 390px; }
  .orbit-two { width: 285px; height: 285px; }
  .floating-live { top: 11%; right: 0; }
  .floating-event { left: -1%; bottom: 12%; }
  .section-intro { padding: 90px 6px 52px; }
  .section-intro h2, .final-cta h2 { font-size: clamp(3.1rem, 16vw, 4.7rem); }
  .section-intro > p:last-child { font-size: 15px; }
  .feature-panel, .event-section, .community-card { border-radius: 30px; }
  .feature-copy { padding: 46px 23px 0; }
  .feature-copy h3, .event-copy h3, .community-copy h3 { font-size: 2.65rem; }
  .feature-copy > p, .event-copy > p { font-size: 15px; }
  .feature-phone-wrap { height: 580px; }
  .product-phone { width: 238px; border-radius: 36px; }
  .map-radar { width: 360px; height: 360px; }
  .map-chip { font-size: 8px; }
  .chip-story { left: 2%; }
  .chip-event { right: 1%; }
  .chip-friends { left: 1%; }
  .event-section { padding: 52px 22px 22px; }
  .event-visual { min-height: 560px; }
  .event-phone { width: 235px; right: 5%; }
  .event-card { width: 190px; left: 0; bottom: 2%; }
  .event-card-cover { height: auto; }
  .community-card { min-height: 600px; }
  .community-copy { padding: 42px 24px 0; }
  .community-card .product-phone { width: 235px; top: 335px; }
  .safety-panel { padding: 28px 22px; grid-template-columns: 1fr; text-align: center; }
  .safety-icon { margin-inline: auto; }
  .safety-panel h3 { font-size: 2.15rem; }
  .safety-status { grid-column: auto; justify-self: center; }
  .final-cta { padding: 105px 0 95px; }
  .footer-main { min-height: 130px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-main > a:last-child { justify-self: center; }
  .legal { grid-template-columns: 1fr 1fr; }
  .legal > a { text-align: center; }
  .legal-document { padding-top: 72px; }
  .legal-document > h1 { font-size: clamp(3.5rem, 18vw, 5.2rem); }
  .legal-intro { font-size: 15px; }
  .legal-sections section { padding: 22px; }
  .legal-page-footer { flex-direction: column; align-items: center; gap: 10px; }
}

/* Korrektur: nummerierte Listen in den Rechtstexten wieder mit Zahlen anzeigen */
.legal-sections ol { list-style: decimal; }

/* =========================================================================
   Neue Sektionen: Stories, Privatsphäre, WoDu+, FAQ
   Nutzt dieselben Tokens wie der Rest der Seite (--pink, --cyan, --muted).
   ========================================================================= */

/* --- 05 · Stories ------------------------------------------------------- */
.live-panel {
  margin-top: 24px;
  min-height: 560px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 20px;
  padding: 70px 60px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 42px;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,45,121,.13), transparent 22rem),
    linear-gradient(145deg, rgba(20,18,20,.95), rgba(7,7,8,.98) 62%);
}
.live-copy h3 { margin: 14px 0 20px; font-size: clamp(2.5rem, 4vw, 4.2rem); line-height: .98; letter-spacing: -.06em; }
.live-copy > p { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.live-list { display: grid; gap: 10px; margin: 32px 0 0; }
.live-list li { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 13px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.07); }
.live-list li > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); color: var(--pink); }
.live-list b { font-size: 15px; letter-spacing: -.02em; }
.live-list small { color: #83838c; font-size: 13px; }

.live-stage { display: grid; justify-items: center; gap: 30px; }
.story-row { display: flex; align-items: center; gap: 16px; }
.story-ring { position: relative; width: 74px; height: 74px; border-radius: 50%; background: #0d0d0e; box-shadow: 0 0 0 2px #0d0d0e, 0 0 0 4px var(--pink); }
.story-ring--a { background: linear-gradient(150deg,#7d5340,#2a1a17); box-shadow: 0 0 0 2px #0d0d0e, 0 0 0 4px var(--cyan); }
.story-ring--b { background: linear-gradient(150deg,#3f5f74,#161f2b); box-shadow: 0 0 0 2px #0d0d0e, 0 0 0 4px var(--pink); }
.story-ring--c { width: 62px; height: 62px; background: linear-gradient(150deg,#6c4457,#22141c); box-shadow: 0 0 0 2px #0d0d0e, 0 0 0 4px rgba(255,255,255,.16); }
.story-ring--new { display: grid; place-items: center; background: transparent; box-shadow: none; border: 2px dashed rgba(255,255,255,.22); }
.story-ring--new i { font-style: normal; font-size: 26px; color: #9a9aa2; }
.rec-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(255,45,121,.35); border-radius: 999px; background: rgba(255,45,121,.10); color: #ffd7e5; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.rec-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); animation: rec-pulse 1.8s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.live-timer { width: min(320px, 100%); text-align: center; }
.live-timer-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.live-timer-bar i { display: block; width: 62%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--cyan)); }
.live-timer small { display: block; margin-top: 12px; color: #83838c; font-size: 12px; letter-spacing: .04em; }

/* --- 06 · Privatsphäre --------------------------------------------------- */
.privacy-section { padding: 120px 0 40px; }
.privacy-head { max-width: 720px; }
.privacy-head h3 { margin: 15px 0 18px; font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; letter-spacing: -.07em; }
.privacy-head h3 span { color: var(--cyan); }
.privacy-head > p { color: var(--muted); font-size: 17px; line-height: 1.6; }

.ghost-demo { position: relative; margin-top: 42px; padding: 34px; display: grid; gap: 26px; justify-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 34px; background: linear-gradient(145deg, rgba(18,20,22,.94), rgba(7,7,8,.98)); }
.ghost-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ghost-stage { width: 100%; display: grid; justify-items: center; gap: 20px; }
.ghost-map { position: relative; width: min(430px, 100%); height: 210px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: linear-gradient(160deg, #0f1a1c, #08090a); }
.ghost-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; }
.ghost-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transition: opacity .45s ease, transform .45s ease; }
.ghost-dot--1 { left: 22%; top: 30%; }
.ghost-dot--2 { right: 24%; top: 24%; }
.ghost-dot--3 { right: 30%; bottom: 24%; }
.ghost-you { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 8px rgba(255,45,121,.16), 0 0 26px rgba(255,45,121,.55); transition: opacity .45s ease, box-shadow .45s ease, background .45s ease; }
.ghost-state { max-width: 430px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ghost-state--off { display: none; color: #8fd8ef; }

.ghost-switch { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; user-select: none; }
.ghost-track { position: relative; width: 62px; height: 34px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.06); transition: background .3s ease, border-color .3s ease; }
.ghost-track i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #f2f2f4; transition: transform .3s cubic-bezier(.4,.2,.2,1), background .3s ease; }
.ghost-label { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: #d4d4d9; }

.ghost-toggle:checked ~ .ghost-stage .ghost-dot { opacity: .16; transform: scale(.75); }
.ghost-toggle:checked ~ .ghost-stage .ghost-you { background: rgba(255,255,255,.12); box-shadow: 0 0 0 8px rgba(255,255,255,.04); }
.ghost-toggle:checked ~ .ghost-stage .ghost-state--on { display: none; }
.ghost-toggle:checked ~ .ghost-stage .ghost-state--off { display: block; }
.ghost-toggle:checked ~ .ghost-switch .ghost-track { background: rgba(82,216,255,.22); border-color: rgba(82,216,255,.45); }
.ghost-toggle:checked ~ .ghost-switch .ghost-track i { transform: translateX(28px); background: var(--cyan); }
.ghost-toggle:focus-visible ~ .ghost-switch .ghost-track { outline: 2px solid var(--cyan); outline-offset: 4px; }

.privacy-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.privacy-card { padding: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; background: rgba(255,255,255,.025); }
.privacy-card h4 { margin-bottom: 10px; font-size: 19px; letter-spacing: -.035em; }
.privacy-card p { color: #9a9aa2; font-size: 14px; line-height: 1.7; }

/* --- 07 · WoDu+ ---------------------------------------------------------- */
.plus-section { margin-top: 24px; display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 22px; padding: 70px 60px; border: 1px solid rgba(255,255,255,.09); border-radius: 42px; background: radial-gradient(circle at 18% 24%, rgba(255,45,121,.12), transparent 24rem), linear-gradient(145deg, rgba(20,20,22,.94), rgba(7,7,8,.98)); }
.plus-copy h3 { margin: 14px 0 20px; font-size: clamp(2.5rem, 4vw, 4.2rem); line-height: .98; letter-spacing: -.06em; }
.plus-copy > p { max-width: 460px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.plus-referral { margin-top: 30px; padding: 20px 22px; border: 1px solid rgba(255,45,121,.22); border-radius: 20px; background: rgba(255,45,121,.07); }
.plus-referral b { display: block; font-size: 15px; letter-spacing: -.02em; }
.plus-referral span { display: block; margin-top: 6px; color: #b98ea1; font-size: 13px; }

.plus-card { padding: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 32px; background: rgba(255,255,255,.035); backdrop-filter: blur(18px); }
.plus-list { display: grid; gap: 16px; }
.plus-list li { display: grid; gap: 3px; padding-left: 22px; position: relative; }
.plus-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.plus-list b { font-size: 14px; letter-spacing: -.02em; }
.plus-list span { color: #83838c; font-size: 13px; line-height: 1.55; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-section { padding: 120px 0 20px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.faq-head h3 { margin-top: 15px; font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.06em; }
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.025); transition: border-color .25s ease; }
.faq-item[open] { border-color: rgba(255,255,255,.16); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; font-size: 17px; font-weight: 700; letter-spacing: -.03em; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { position: relative; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; transition: transform .3s ease, border-color .3s ease; }
.faq-item summary span::before, .faq-item summary span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: #d4d4d9; transform: translate(-50%,-50%); }
.faq-item summary span::after { transform: translate(-50%,-50%) rotate(90deg); transition: opacity .3s ease; }
.faq-item[open] summary span { transform: rotate(180deg); border-color: var(--pink); }
.faq-item[open] summary span::after { opacity: 0; }
.faq-item summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: -4px; border-radius: 22px; }
.faq-item p { padding: 0 26px 24px; max-width: 620px; color: #9a9aa2; font-size: 14px; line-height: 1.75; }
.faq-item p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 900px) {
  .live-panel { grid-template-columns: 1fr; padding: 60px 44px; text-align: center; }
  .live-copy > p { margin-inline: auto; }
  .live-list { max-width: 520px; margin-inline: auto; text-align: left; }
  .live-stage { order: 2; margin-top: 46px; }
  .plus-section { grid-template-columns: 1fr; padding: 60px 44px; }
  .plus-copy > p { max-width: none; }
  .faq-section { grid-template-columns: 1fr; gap: 34px; padding-top: 90px; }
}

@media (max-width: 620px) {
  .live-panel, .plus-section { padding: 46px 22px; border-radius: 30px; }
  .live-copy h3, .plus-copy h3 { font-size: 2.5rem; }
  .live-copy > p, .plus-copy > p { font-size: 15px; }
  .story-row { gap: 11px; }
  .story-ring { width: 58px; height: 58px; }
  .story-ring--c { width: 50px; height: 50px; }
  .privacy-section { padding-top: 90px; }
  .privacy-head h3 { font-size: 2.6rem; }
  .ghost-demo { padding: 24px 18px; border-radius: 28px; }
  .ghost-map { height: 175px; }
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-card { padding: 22px; }
  .plus-card { padding: 24px; }
  .faq-item summary { padding: 19px 20px; font-size: 15px; }
  .faq-item p { padding: 0 20px 20px; }
}

/* =========================================================================
   Unterseiten: Blog, Botschafter, Karriere
   ========================================================================= */

.sub-page { padding-bottom: 0; }
.sub-page .site-header { grid-template-columns: 1fr auto 1fr; }

.page-hero { padding: 96px 0 64px; max-width: 860px; }
.page-hero h1 { margin: 16px 0 22px; font-size: clamp(3.2rem, 7vw, 6rem); line-height: .9; letter-spacing: -.075em; }
.page-hero h1 span { color: var(--pink); }
.page-hero > p { max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.page-cta { display: inline-flex; align-items: center; margin-top: 30px; padding: 16px 26px; border-radius: 999px; background: #fff; color: #090909; font-size: 15px; font-weight: 750; letter-spacing: -.02em; transition: transform .25s ease, box-shadow .25s ease; }
.page-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,0,0,.5); }
.page-cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.page-cta-note { display: block; margin-top: 14px; color: #77777f; font-size: 12px; }

.back-link { display: inline-block; margin-bottom: 26px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #b5b5bb; font-size: 12px; font-weight: 700; transition: .2s; }
.back-link:hover { color: #fff; background: rgba(255,255,255,.05); }

/* --- Blog-Übersicht ------------------------------------------------------ */
.post-list { padding-bottom: 90px; display: grid; gap: 14px; }
.post-card { display: block; padding: 34px 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: rgba(255,255,255,.025); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.post-card:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); transform: translateY(-2px); }
.post-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.post-card h2 { margin: 14px 0 12px; max-width: 720px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.08; letter-spacing: -.045em; }
.post-card > p { max-width: 640px; color: #9a9aa2; font-size: 15px; line-height: 1.65; }
.post-kicker { color: var(--pink); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.post-meta { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: #6f6f77; font-size: 12px; letter-spacing: .03em; }

/* --- Einzelner Beitrag --------------------------------------------------- */
.post { max-width: 760px; padding: 70px 0 90px; }
.post h1 { margin: 14px 0 20px; font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: .96; letter-spacing: -.06em; }
.post-teaser { color: #b6b6bd; font-size: 19px; line-height: 1.55; letter-spacing: -.02em; }
.post .post-meta { padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.post-body { margin-top: 34px; }
.post-body p { margin-bottom: 20px; color: #a9a9b1; font-size: 16px; line-height: 1.78; }
.post-body h2 { margin: 44px 0 16px; font-size: 24px; letter-spacing: -.04em; color: #f2f2f4; }
.post-body ul { margin: 0 0 22px; padding-left: 20px; list-style: disc; }
.post-body li { margin-bottom: 9px; color: #a9a9b1; font-size: 16px; line-height: 1.7; }
.post-body a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.post-more { margin-top: 60px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.08); }
.post-more-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.post-more-card { display: block; padding: 22px 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.025); transition: .25s; }
.post-more-card:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); }
.post-more-card b { display: block; margin-top: 10px; font-size: 16px; line-height: 1.3; letter-spacing: -.03em; }

/* --- Botschafter: Karten-Sektionen --------------------------------------- */
.duo-section { padding: 56px 0; }
.duo-head { max-width: 640px; margin-bottom: 30px; }
.duo-head h2 { margin: 14px 0 14px; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.06em; }
.duo-head > p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.duo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.duo-grid--four { grid-template-columns: repeat(4, 1fr); }
.duo-card { padding: 30px 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: linear-gradient(150deg, rgba(20,20,22,.9), rgba(9,9,10,.96)); }
.duo-index { display: inline-block; margin-bottom: 14px; color: var(--pink); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.duo-card h3 { margin-bottom: 10px; font-size: 20px; letter-spacing: -.04em; }
.duo-card p { color: #9a9aa2; font-size: 14px; line-height: 1.7; }

.page-outro { padding: 80px 0 110px; text-align: center; }
.page-outro h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.06em; }
.page-outro > p { margin: 16px auto 0; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* --- Karriere ------------------------------------------------------------ */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.value-card { padding: 30px 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: rgba(255,255,255,.025); }
.value-card h3 { margin-bottom: 10px; font-size: 19px; letter-spacing: -.04em; }
.value-card p { color: #9a9aa2; font-size: 14px; line-height: 1.7; }

.jobs { padding: 80px 0 0; }
.jobs-head { max-width: 620px; margin-bottom: 28px; }
.jobs-head h2 { margin-top: 14px; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.06em; }
.jobs-list { display: grid; gap: 12px; }
.job { padding: 32px 34px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: rgba(255,255,255,.025); transition: border-color .25s ease; }
.job:hover { border-color: rgba(255,255,255,.16); }
.job-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.job-head h3 { font-size: 22px; letter-spacing: -.045em; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.job-tags span { padding: 7px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #9a9aa2; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.job-text { margin-top: 14px; max-width: 640px; color: #a9a9b1; font-size: 15px; line-height: 1.65; }
.job-points { margin: 18px 0 0; padding-left: 19px; list-style: disc; }
.job-points li { margin-bottom: 7px; color: #86868f; font-size: 14px; line-height: 1.6; }
.job-apply { display: inline-block; margin-top: 22px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #ededf0; font-size: 13px; font-weight: 700; transition: .22s; }
.job-apply:hover { background: #fff; color: #090909; border-color: #fff; }
.job-apply:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* --- Footer-Navigation --------------------------------------------------- */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 4px 0 16px; }
.footer-nav a { padding: 9px 14px; border-radius: 999px; color: #cfcfd5; font-size: 12px; font-weight: 700; transition: .2s; }
.footer-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 0 28px; }

@media (max-width: 900px) {
  .duo-grid, .duo-grid--four, .values { grid-template-columns: 1fr 1fr; }
  .post-more-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-hero { padding: 64px 0 46px; }
  .page-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .page-hero > p { font-size: 16px; }
  .duo-grid, .duo-grid--four, .values { grid-template-columns: 1fr; }
  .post-card { padding: 26px 22px; }
  .post { padding: 46px 0 70px; }
  .post-body p, .post-body li { font-size: 15px; }
  .job { padding: 26px 22px; }
  .jobs { padding-top: 60px; }
  .page-outro { padding: 60px 0 80px; }
}

/* Kicker im Beitragskopf gehört auf eine eigene Zeile, nicht neben den Zurück-Link */
.post > .post-kicker { display: block; }

/* Liste der Open-Source-Bibliotheken */
.license-list { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.license-list li { padding: 14px 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.02); }
.license-list b { font-size: 15px; letter-spacing: -.02em; }
.license-list small { display: block; margin-top: 5px; color: #83838c; font-size: 12.5px; line-height: 1.6; }
.license-list a { color: #cfcfd5; text-decoration: underline; text-underline-offset: 3px; }