/* ═══════════════════════════════════════════════════════════════
   BlobSlide Website (Landing + Support) — claymorphism / jelly
   Design-System. Style-Referenz: doc/landingpage/blob_slide_style_guide.md
   CSP-Hinweis: style-src 'self' — deshalb liegt ALLES CSS hier,
   keine style=""-Attribute, keine Inline-<style>-Blöcke.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Flächen & Text (Light) */
  --bg:        #F4F9FF;
  --ink:       #2A2350;
  --ink-soft:  #5C5684;
  --card:      rgba(255, 255, 255, 0.78);
  --card-line: rgba(255, 255, 255, 0.95);
  --shadow-ink: rgba(42, 35, 80, 0.16);

  /* Pastell-Umgebung (Style Guide §3A) */
  --mint-1: #A3EAD4;  --mint-2: #C7F3E6;
  --lav-1:  #D4C5F9;  --lav-2:  #E6DDFC;
  --pink-1: #F7D6D8;  --pink-2: #FCECEE;

  /* Glossy Akzente (Style Guide §3B) */
  --candy-1: #44A3F7;  --candy-2: #1B76D6;   /* Candy Blue   */
  --amber-1: #F9B233;  --amber-2: #D37B03;   /* Honey Gold   */
  --ruby-1:  #E5394A;  --ruby-2:  #A31624;   /* Strawberry   */
  --sky-1:   #8CD2FF;  --sky-2:   #469CD6;   /* Sky Blue     */
  --cobalt-1:#2A6CD1;  --cobalt-2:#104494;   /* Ocean/Cobalt */

  --hero-sky: linear-gradient(180deg,
      #A8C8FF 0%, #C2E2FF 34%, #C7F3E6 68%, #FCECEE 100%);
  --cta-bg: linear-gradient(160deg, #4A3AA8 0%, #3A2B8F 55%, #2C2070 100%);

  --radius-l: 36px;
  --radius-m: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14102E;
    --ink:       #F2F0FF;
    --ink-soft:  #B9B3D9;
    --card:      rgba(255, 255, 255, 0.07);
    --card-line: rgba(255, 255, 255, 0.14);
    --shadow-ink: rgba(0, 0, 0, 0.45);

    --hero-sky: linear-gradient(180deg,
        #1B1740 0%, #241C55 45%, #1C2A55 78%, #23163E 100%);
    --cta-bg: linear-gradient(160deg, #37296B 0%, #2A1E58 55%, #201545 100%);
  }
}

/* ── Reset / Basis ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  line-height: 1.12;
  margin: 0 0 0.4em;
  font-weight: 900;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; }

a { color: var(--cobalt-1); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Sprachumschaltung (Konvention wie assets/style.css) ────── */
[data-lang="en"] { display: none; }
html.lang-en [data-lang="en"] { display: revert; }
html.lang-en [data-lang="de"] { display: none; }
/* Bild-/Flex-Wrapper brauchen ihr eigenes revert-Ziel: */
html.lang-en span.img-swap[data-lang="en"] { display: block; }

/* Toggle erst mit JS zeigen (ohne JS gäbe es nichts zu schalten) */
.lang-switch { display: none; }
html.js .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--shadow-ink);
  transition: transform 0.15s ease;
}
html.js .lang-switch:hover  { transform: translateY(-1px); }
html.js .lang-switch:active { transform: scale(0.96); }

/* ── Kopfzeile ──────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 3px 8px var(--shadow-ink);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--hero-sky);
  padding: clamp(48px, 8vw, 96px) 20px clamp(56px, 8vw, 96px);
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 12px var(--shadow-ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2.5rem, 8.5vw, 4.4rem);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  .hero h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
}

.hero .lede {
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 auto 30px;
}

.hero-cta { margin-bottom: 14px; }

.store-note {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* Feature-Chips unterm CTA */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.chip-row li {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--card-line);
  box-shadow: 0 4px 10px var(--shadow-ink),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  font-weight: 800;
}

@media (prefers-color-scheme: dark) {
  .chip-row li { box-shadow: 0 4px 10px var(--shadow-ink); }
}

/* Schwebendes Phone am Hero-Fuß */
.hero-phone {
  position: relative;
  z-index: 3;
  width: min(310px, 72vw);
  margin: 46px auto -1px;
}

.hero-phone::before {
  content: "";
  position: absolute;
  inset: -12% -22%;
  background: radial-gradient(closest-side,
      rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%);
  z-index: -1;
}

@media (prefers-color-scheme: dark) {
  .hero-phone::before {
    background: radial-gradient(closest-side,
        rgba(140, 210, 255, 0.28), rgba(140, 210, 255, 0) 72%);
  }
}

.hero-phone img {
  border-radius: clamp(28px, 7vw, 40px);
  box-shadow: 0 24px 60px rgba(20, 16, 46, 0.35),
              0 6px 16px rgba(20, 16, 46, 0.22);
  animation: floaty 6.5s ease-in-out infinite;
}

/* Deko-Ebene: Wolken & Blobs */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Wolken: eine gemeinsame SVG-Silhouette (Symbol #cloud-shape im
   HTML), vertikaler Verlauf über CSS-gestylte Gradient-Stops.
   Bewusst OHNE blur — die Kontur bleibt knackig, Tiefe kommt aus
   Verlauf + weichem drop-shadow. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cloud-grad-top { stop-color: #FFFFFF; }
.cloud-grad-bot { stop-color: #DDE9FC; }

@media (prefers-color-scheme: dark) {
  .cloud-grad-top { stop-color: rgba(255, 255, 255, 0.14); }
  .cloud-grad-bot { stop-color: rgba(255, 255, 255, 0.05); }
}

.cloud {
  position: absolute;
  aspect-ratio: 2 / 1;
  height: auto;
  filter: drop-shadow(0 14px 18px rgba(93, 125, 190, 0.18));
  animation: drift 26s ease-in-out infinite alternate;
}

@media (prefers-color-scheme: dark) {
  .cloud { filter: none; }
}

.cloud-1 { width: 180px; top: 9%;  left: -46px; }
.cloud-2 { width: 240px; top: 4%;  right: -64px; animation-delay: -9s; }
.cloud-3 { width: 280px; top: 46%; left: -90px; opacity: 0.7; animation-delay: -17s; }
.cloud-4 { width: 150px; top: 58%; right: -40px; opacity: 0.85; animation-delay: -5s; }

/* Kawaii-SVG-Blobs (inline im HTML, hier nur Layout/Motion) */
.deco-blob {
  position: absolute;
  animation: floaty 7s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(20, 16, 46, 0.18));
}
.blob-a { width: 88px;  top: 20%; left: 6%;  animation-delay: -1.2s; }
.blob-b { width: 66px;  top: 13%; right: 8%; animation-delay: -3.4s; animation-duration: 8s; }
.blob-c { width: 110px; bottom: 30%; left: 3%; animation-delay: -5s;  animation-duration: 9s; }
.blob-d { width: 74px;  bottom: 34%; right: 5%; animation-delay: -2.2s; }

@media (max-width: 640px) {
  .blob-a, .blob-c, .cloud-3 { display: none; }
  .blob-d { right: 2%; }
}

/* ── Abschnitts-Gerüst ──────────────────────────────────────── */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) clamp(18px, 4vw, 40px) 0;
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(36px, 6vw, 64px);
}

.section-head h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
.section-head p  { color: var(--ink-soft); font-size: 1.06rem; }

/* ── Features (Zick-Zack) ───────────────────────────────────── */
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vw, 64px);
  margin-bottom: clamp(56px, 8vw, 96px);
}

@media (min-width: 820px) {
  .feature { flex-direction: row; }
  .feature.flip { flex-direction: row-reverse; }
  .feature > * { flex: 1 1 0; }
}

.feature-media {
  width: min(320px, 78vw);
  flex: none;
  position: relative;
}

@media (min-width: 820px) {
  .feature-media { width: 340px; }
}

.feature-media img {
  border-radius: 34px;
  box-shadow: 0 18px 44px var(--shadow-ink);
  transform: rotate(-2.5deg);
  transition: transform 0.35s ease;
}
.feature.flip .feature-media img { transform: rotate(2.5deg); }
.feature-media:hover img { transform: rotate(0deg) scale(1.015); }

/* Glow hinter jedem Screenshot in Akzentfarbe */
.feature-media::before {
  content: "";
  position: absolute;
  inset: 6% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(68,163,247,0.35)), transparent 72%);
  z-index: -1;
}

.f-amber { --glow: rgba(249, 178, 51, 0.4); }
.f-ruby  { --glow: rgba(229, 57, 74, 0.32); }
.f-sky   { --glow: rgba(140, 210, 255, 0.5); }

.feature-copy { max-width: 30em; text-align: center; }

@media (min-width: 820px) {
  .feature-copy { text-align: left; }
}

.feature-copy h3 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
.feature-copy p  { color: var(--ink-soft); }

/* Nummern-Badge im Bonbon-Look */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  margin-bottom: 16px;
  border-radius: 18px;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 18px var(--shadow-ink),
              inset 0 -3px 5px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.5);
}
.badge::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 2px;
  height: 46%;
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.16) 60%,
      rgba(255, 255, 255, 0) 100%);
}
.badge-amber { background: linear-gradient(180deg, var(--amber-1), var(--amber-2)); }
.badge-ruby  { background: linear-gradient(180deg, var(--ruby-1),  var(--ruby-2)); }
.badge-sky   { background: linear-gradient(180deg, var(--sky-1),   var(--sky-2)); }

/* ── Showcase (Designs) ─────────────────────────────────────── */
.showcase-bg {
  background:
    radial-gradient(1100px 520px at 12% 4%,  var(--lav-2) 0%, transparent 62%),
    radial-gradient(1000px 560px at 88% 30%, var(--mint-2) 0%, transparent 60%),
    radial-gradient(900px 500px at 40% 96%,  var(--pink-2) 0%, transparent 64%);
}

@media (prefers-color-scheme: dark) {
  .showcase-bg {
    background:
      radial-gradient(1100px 520px at 12% 4%,  rgba(212,197,249,0.10) 0%, transparent 62%),
      radial-gradient(1000px 560px at 88% 30%, rgba(163,234,212,0.08) 0%, transparent 60%),
      radial-gradient(900px 500px at 40% 96%,  rgba(247,214,216,0.08) 0%, transparent 64%);
  }
}

.showcase-grid {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 820px) {
  .showcase-grid { grid-template-columns: minmax(300px, 380px) 1fr; }
}

.showcase-phone {
  position: relative;
  justify-self: center;
  width: min(320px, 80vw);
  align-self: center;
}

.showcase-phone img {
  border-radius: 34px;
  box-shadow: 0 18px 44px rgba(10, 8, 30, 0.45);
}

.showcase-phone figcaption {
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 12px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.4vw, 22px);
  align-content: center;
}

@media (max-width: 420px) {
  .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

.theme-tile {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-m);
  padding: 12px 12px 14px;
  text-align: center;
  box-shadow: 0 10px 24px var(--shadow-ink),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-color-scheme: dark) {
  .theme-tile { box-shadow: 0 10px 24px var(--shadow-ink); }
}

.theme-tile:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 16px 34px var(--shadow-ink);
}

.theme-tile img {
  border-radius: 18px;
  margin-bottom: 10px;
}

.theme-tile span {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  /* Lange deutsche Wörter („Sonnenuntergang") dürfen die schmalen
     Kacheln nicht sprengen */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Welt-Panorama-Band */
.world-band {
  position: relative;
  margin-top: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 18px 44px var(--shadow-ink);
}

.world-band img {
  width: 100%;
  height: clamp(220px, 34vw, 340px);
  object-fit: cover;
  object-position: 50% 32%;
}

.world-band figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 44px 22px 18px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.8vw, 1.4rem);
  color: #fff;
  text-shadow: 0 2px 8px rgba(20, 16, 46, 0.55);
  background: linear-gradient(180deg, transparent, rgba(20, 16, 46, 0.42));
}

/* ── Finaler CTA ────────────────────────────────────────────── */
.cta-panel {
  position: relative;
  border-radius: var(--radius-l);
  background: var(--cta-bg);
  color: #fff;
  text-align: center;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 64px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(30, 22, 70, 0.45),
              inset 0 2px 0 rgba(255, 255, 255, 0.18);
}

.cta-panel h2 {
  font-size: clamp(1.9rem, 5.5vw, 2.9rem);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cta-panel p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 30em;
  margin: 0 auto 28px;
}

.cta-panel .store-note { color: rgba(255, 255, 255, 0.66); margin-top: 14px; }

.cta-blobs {
  width: min(420px, 82%);
  margin: 0 auto 6px;
}

.cta-blobs img {
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  animation: floaty 7s ease-in-out infinite;
}

.cta-sparkle {
  position: absolute;
  width: 26px;
  color: #FFE9A8;
  animation: twinkle 3.2s ease-in-out infinite;
}
.sp-1 { top: 14%; left: 10%; }
.sp-2 { top: 22%; right: 12%; width: 18px; animation-delay: -1.1s; }
.sp-3 { bottom: 16%; left: 16%; width: 16px; animation-delay: -2.2s; }
.sp-4 { bottom: 24%; right: 8%; animation-delay: -0.6s; }

/* ── App-Store-Button (Bonbon-Blau, Style Guide §3B/§4) ─────── */
.btn-store {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 30px 16px 26px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--candy-1), var(--candy-2));
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(27, 118, 214, 0.42),
              inset 0 -4px 7px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Glas-Schimmer: liegt als schmaler Streifen an der Oberkante an
   und folgt der Pillenkontur — kein frei schwebender Blur-Balken.
   Läuft deutlich vor der Unterkante in Transparenz aus. */
.btn-store::before {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 3px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.14) 58%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Beschriftung ÜBER dem Glanz halten (der ::before ist positioniert
   und würde sonst über dem Inline-Text malen) */
.btn-store > svg,
.btn-store .btn-lines {
  position: relative;
  z-index: 1;
}

.btn-store:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 36px rgba(27, 118, 214, 0.5),
              inset 0 -4px 7px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.55);
}

.btn-store:active { transform: translateY(1px) scale(0.965); }

.btn-store svg { width: 30px; height: 30px; flex: none; }

.btn-store .btn-lines { text-align: left; line-height: 1.15; }
.btn-store .btn-small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.9; }
.btn-store .btn-big   { display: block; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.01em; }

/* ── Offizieller App-Store-Badge (Apple Marketing Guidelines) ──
   Das Artwork wird NICHT verändert: kein Glanz-Overlay, keine
   Schatten auf dem Badge, keine Umfärbung. Erlaubt bleibt ein
   dezenter Hover-Lift des gesamten Links. Der Margin stellt die
   geforderte Schutzzone (¼ der Badge-Höhe) sicher. */
.store-badge {
  display: inline-block;
  margin: 14px;                     /* clear space ≥ ¼ badge height */
  transition: transform 0.18s ease;
}

.store-badge img {
  display: block;
  height: 56px;                     /* Guideline-Minimum: 40px */
  width: auto;
}

.store-badge:hover  { transform: translateY(-2px); }
.store-badge:active { transform: translateY(0); }

.store-badge:focus-visible {
  outline: 3px solid var(--candy-1);
  outline-offset: 6px;
  border-radius: 12px;
}

.store-badge-s img { height: 48px; }

/* ── Fußzeile ───────────────────────────────────────────────── */
.site-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 40px) 48px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-bottom: 16px;
}

.site-foot a {
  color: var(--ink-soft);
  font-weight: 700;
  text-decoration: none;
}

.site-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ── Scroll-Reveal (nur mit JS aktiv) ───────────────────────── */
html.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1.15);
}
html.js .reveal.in-view { opacity: 1; transform: none; }
html.js .theme-grid .reveal:nth-child(2) { transition-delay: 0.07s; }
html.js .theme-grid .reveal:nth-child(3) { transition-delay: 0.14s; }
html.js .theme-grid .reveal:nth-child(4) { transition-delay: 0.21s; }
html.js .theme-grid .reveal:nth-child(5) { transition-delay: 0.28s; }
html.js .theme-grid .reveal:nth-child(6) { transition-delay: 0.35s; }

/* ═══════════════════════════════════════════════════════════════
   Support-Seite — gleiche Formensprache, ruhigerer Auftritt
   ═══════════════════════════════════════════════════════════════ */

.page-hero {
  position: relative;
  /* Kürzeres Band als auf der Startseite: ein ruhiger
     Zwei-Stopp-Verlauf statt des vollen Himmels */
  background: linear-gradient(180deg, #A8C8FF 0%, #C7F3E6 100%);
  padding: clamp(52px, 8vw, 84px) 20px clamp(56px, 8vw, 88px);
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

@media (prefers-color-scheme: dark) {
  .page-hero {
    background: linear-gradient(180deg, #1B1740 0%, #1C2A55 100%);
  }
}

.page-hero .hero-inner { max-width: 560px; }

.page-hero h1 {
  font-size: clamp(2rem, 6.5vw, 3.1rem);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  .page-hero h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
}

.page-hero .lede {
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0 auto;
}

/* Nur wenig Deko: kleine Wolken in den Ecken, ein Blob rechts */
.page-hero .cloud { opacity: 0.75; }
.page-hero .cloud-1 { width: 150px; top: 12%; left: -50px; }
.page-hero .cloud-2 { width: 190px; top: auto; bottom: 8%; right: -60px; }
.page-hero .blob-b  { top: auto; bottom: 14%; right: 7%; width: 60px; }

@media (max-width: 720px) {
  .page-hero .blob-b { display: none; }
  .page-hero .cloud-2 { right: -120px; }
}

/* Karten-Spalte */
.support-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 64px) clamp(18px, 4vw, 40px) 0;
  display: grid;
  gap: clamp(20px, 3.5vw, 30px);
}

.support-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-l);
  padding: clamp(24px, 5vw, 40px);
  box-shadow: 0 12px 30px var(--shadow-ink),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
  .support-card { box-shadow: 0 12px 30px var(--shadow-ink); }
}

.support-card h2 {
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  margin: 0 0 0.45em;
}

.support-card p { color: var(--ink-soft); }

.card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.card-head h2 { margin: 0; }

/* Runde Icon-Plakette im Bonbon-Look */
.icon-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 8px 18px var(--shadow-ink),
              inset 0 -3px 5px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.5);
}
.icon-badge::before {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 2px;
  height: 46%;
  border-radius: 16px 16px 11px 11px;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.16) 60%,
      rgba(255, 255, 255, 0) 100%);
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge.badge-amber  { background: linear-gradient(180deg, var(--amber-1),  var(--amber-2)); }
.icon-badge.badge-candy  { background: linear-gradient(180deg, var(--candy-1),  var(--candy-2)); }
.icon-badge.badge-cobalt { background: linear-gradient(180deg, var(--cobalt-1), var(--cobalt-2)); }

/* E-Mail-Button: Honey-Gold-Variante des Bonbon-Buttons */
.btn-store.btn-amber {
  background: linear-gradient(180deg, var(--amber-1), var(--amber-2));
  box-shadow: 0 12px 28px rgba(211, 123, 3, 0.4),
              inset 0 -4px 7px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.55);
}
.btn-store.btn-amber:hover {
  box-shadow: 0 18px 36px rgba(211, 123, 3, 0.48),
              inset 0 -4px 7px rgba(0, 0, 0, 0.2),
              inset 0 2px 3px rgba(255, 255, 255, 0.55);
}
/* Lange Mail-Adresse darf auf schmalen Screens umbrechen */
.btn-store.btn-amber .btn-big {
  font-size: clamp(0.98rem, 4vw, 1.25rem);
  overflow-wrap: anywhere;
}

.card-cta { margin: 18px 0 0; }

/* Checkliste „Hilfreich für die Fehlersuche" */
.tips-label {
  margin: 20px 0 0;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
}

.tips {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}

.tips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.97rem;
}

.tips svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: #3BBFA0;
}

/* App-laden-Karte: Icon + Text nebeneinander */
.getapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.getapp img {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow: 0 6px 16px var(--shadow-ink);
}

.getapp .getapp-copy { flex: 1 1 220px; }
.getapp p { margin: 0; }

/* ── Animationen ────────────────────────────────────────────── */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 46px -10px; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(18deg); }
}

/* ── Reduzierte Bewegung: alles ruhigstellen ────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}