/* ============================================================
   home.css — LocalLoop Startseite (/), Neubau
   ------------------------------------------------------------
   Gleiches Token-/Layout-System wie contact.css & about.css.
   Full-bleed Sektionen, zentrierter Inhalt, dunkle Akzent-Bänder.
   Nav = nav.css/nav.js · Footer = footer.css (.llf) ·
   Animationen = ll-anim.js (Reveals, Count-up [data-count], Ink).
   ============================================================ */

:root {
  --ll-bg: rgb(232, 232, 232);
  --ll-dark: rgb(23, 23, 23);
  --ll-light: rgb(245, 245, 245);
  --ll-muted: rgba(23, 23, 23, 0.6);
  --ll-faint: rgba(23, 23, 23, 0.34);
  --ll-line: rgba(23, 23, 23, 0.14);
  --ll-line-d: rgba(245, 245, 245, 0.14);
  --ll-pad: clamp(20px, 5vw, 52px);
}
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* iOS/Safari darf Fliesstext NICHT automatisch vergroessern ("text
     autosizing"). Sonst wuchs auf manchen Handys der Kartentext im
     Loop-Dial ueber die Ziffer (01–04) und ueberlappte sie — beim
     Entwickler unsichtbar, beim Kunden sichtbar. 100% = keine Skalierung. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--ll-bg); color: var(--ll-dark);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-weight: 500; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- Sektions-Gerüst ---------------------------------------- */
.hp-sec { position: relative; padding: clamp(56px, 8vh, 116px) var(--ll-pad); border-top: 1px solid var(--ll-line); }
.hp-sec:first-of-type { border-top: 0; }
.hp-in { max-width: 1160px; margin: 0 auto; }
.hp-in--narrow { max-width: 780px; }
.hp-light { background: var(--ll-light); }

/* Eyebrow (kleine, laufende Sektions-Nummer + Label) */
.hp-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 24px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-muted);
}
.hp-eyebrow .n { color: var(--ll-faint); }
.hp-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--ll-line); }

/* Headlines / Text */
.hp-h2 {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: "Sora", "Geist", sans-serif; font-weight: 700;
  font-size: clamp(32px, 5.2vw, 66px); line-height: 0.98; letter-spacing: -0.05em; text-transform: uppercase;
}
.hp-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; letter-spacing: -0.01em; max-width: 60ch; }

/* Buttons */
.hp-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--ll-dark); color: #fff; cursor: pointer; text-decoration: none;
  font-family: "Sora", "Geist", sans-serif; font-size: 15px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.hp-btn svg { width: 18px; height: 18px; transition: transform .2s ease; }
.hp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); }
.hp-btn:hover svg { transform: translateX(4px); }
.hp-btn--ghost { background: transparent; color: var(--ll-dark); border: 1px solid var(--ll-line); }
.hp-btn--ghost:hover { background: var(--ll-dark); color: #fff; }
.hp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }

/* ============================================================
   HERO (dunkel, mit LocalLoop-Kreis-Deko + Rating-Badge)
   ============================================================ */
.hp-hero {
  position: relative; overflow: hidden; color: var(--ll-light); border-top: 0;
  min-height: min(92vh, 920px); display: flex; align-items: center;
  padding: clamp(150px, 22vh, 260px) var(--ll-pad) clamp(72px, 11vh, 130px);
  /* Fallback-Hintergrund (sichtbar, solange kein Video vorhanden) */
  background:
    radial-gradient(62% 62% at 78% 22%, rgba(245,245,245,0.10), transparent 62%),
    radial-gradient(55% 55% at 12% 92%, rgba(125,63,232,0.16), transparent 60%),
    #0f0f0f;
}
/* LocalLoop-Kreis (Fallback-Deko) */
.hp-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -8%; top: 46%; transform: translateY(-50%); width: min(760px, 70vw); aspect-ratio: 1;
  background: url("/assets/images/logo/icon-white.svg") center / contain no-repeat; opacity: 0.07;
}
/* Hintergrund-Video */
.hp-hero-video {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
/* Abdunkelung für Text-Lesbarkeit (liegt über Video + Fallback) */
.hp-hero-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,12,0.55), rgba(12,12,12,0.44) 45%, rgba(12,12,12,0.85));
}
.hp-hero .hp-in { position: relative; z-index: 3; width: 100%; }
.hp-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 clamp(26px, 3vw, 38px);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 18px rgba(0,0,0,0.65);
}
.hp-badge .ic { width: 15px; height: 15px; flex: 0 0 auto; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8)); }
.hp-h1 {
  margin: 0; max-width: 16ch;
  font-family: "Sora", "Geist", sans-serif; font-weight: 800;
  font-size: clamp(52px, 9.5vw, 112px); line-height: 0.9; letter-spacing: -0.05em; text-transform: uppercase; color: #fff;
}
.hp-hero .hp-lead { margin: clamp(24px, 3vw, 34px) 0 0; color: rgba(245,245,245,0.8); }

/* ============================================================
   App-Demo / „Die Idee" — zweispaltig: Text + Handy-Loop
   ============================================================ */
.hp-idea {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
.hp-idea-copy .hp-eyebrow, .hp-idea-copy .hp-h2, .hp-idea-copy .hp-lead { margin-top: 0; }
.hp-idea-media { position: relative; display: flex; justify-content: center; }
/* dezente Marken-Kreis-Deko hinter dem Handy (monochrom) */
.hp-idea-media::before {
  content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(115%, 440px); aspect-ratio: 1; border-radius: 50%;
  background: url(/assets/images/logo/icon-black.svg) center / contain no-repeat; opacity: 0.055;
}
.hp-phone {
  z-index: 1;
  position: relative; width: clamp(232px, 26vw, 286px); aspect-ratio: 9 / 19.5;
  background: #000; border: 8px solid #060606; border-radius: 42px; overflow: hidden;
  box-shadow: 0 34px 70px -24px rgba(0,0,0,0.65);
}
.hp-phone-island {
  position: absolute; z-index: 3; top: 11px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; background: #060606; border-radius: 999px;
}
.hp-phone-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.hp-phone-fallback {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(120% 75% at 50% 0%, #242424, #0b0b0b);
}
.hp-phone-fallback img { width: 40px; height: 40px; opacity: 0.85; }
.hp-phone-fallback span {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.03em;
  text-transform: uppercase; color: rgba(245,245,245,0.5);
}

/* ============================================================
   Statement (Wer wir sind) + Team-Signatur
   ============================================================ */
.hp-statement { font-family: "Sora","Geist",sans-serif; font-weight: 700; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.035em; text-transform: uppercase; max-width: 24ch; margin: 0; }
.hp-team { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--ll-line); }
.hp-team img { width: 44px; height: 44px; object-fit: contain; }
.hp-team b { display: block; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; }
.hp-team span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-muted); }
.hp-tags { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ============================================================
   Angebote (Section 02) — Card-Grid mit Lucide-Icons
   ============================================================ */
.hp-offers {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 20px);
}
.hp-offer {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 1.8vw, 26px); border: 1px solid var(--ll-line); border-radius: 20px; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-offer:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(0,0,0,0.4); border-color: rgba(23,23,23,0.28); }
.hp-offer-top { display: flex; align-items: center; justify-content: space-between; }
.hp-offer-ic {
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--ll-line);
  display: grid; place-items: center; color: var(--ll-dark);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hp-offer-ic svg { width: 24px; height: 24px; }
.hp-offer:hover .hp-offer-ic { background: var(--ll-dark); color: #fff; border-color: var(--ll-dark); }
.hp-offer-n { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.02em; color: var(--ll-faint); }
.hp-offer h3 {
  margin: 0; font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.12; letter-spacing: -0.03em; text-transform: uppercase;
}
.hp-offer p { margin: 0; flex: 1; color: var(--ll-muted); font-size: 15px; line-height: 1.5; }
.hp-offer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.hp-offer-tags span {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--ll-faint); border: 1px solid var(--ll-line); border-radius: 999px; padding: 4px 9px;
}
.hp-tags span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-faint); }

/* ============================================================
   „In Zahlen" (Section 08) — grosse typografische Stat-Band
   ============================================================ */
.hp-metrics {
  margin-top: clamp(36px, 4vw, 60px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ll-line);
}
.hp-metric {
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--ll-line);
}
.hp-metric:first-child { border-left: 0; padding-left: 0; }
.hp-metric-k {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ll-faint);
}
.hp-metric-v {
  margin-top: 16px; font-family: "Sora", sans-serif; font-weight: 800;
  font-size: clamp(52px, 7vw, 104px); line-height: 0.88; letter-spacing: -0.05em; color: var(--ll-dark);
}
.hp-metric p { margin: 18px 0 0; color: var(--ll-muted); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; max-width: 32ch; }

/* ============================================================
   „Warum alle LocalLoop lieben" (Section 03) — Nutzen-Cards
   ============================================================ */
.hp-reasons {
  margin-top: clamp(32px, 4vw, 52px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.5vw, 20px);
}
.hp-reason {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(22px, 2vw, 30px); background: #fff; border: 1px solid var(--ll-line); border-radius: 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-reason:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -24px rgba(0,0,0,0.4); border-color: rgba(23,23,23,0.28); }
.hp-reason-ic {
  width: 54px; height: 54px; border-radius: 50%; background: var(--ll-dark); color: #fff;
  display: grid; place-items: center; transition: transform .25s ease;
}
.hp-reason-ic svg { width: 24px; height: 24px; }
.hp-reason:hover .hp-reason-ic { transform: scale(1.06); }
.hp-reason h3 {
  margin: 0; font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.12; letter-spacing: -0.03em; text-transform: uppercase;
}
.hp-reason p { margin: 0; color: var(--ll-muted); font-size: 15px; line-height: 1.5; }

.hp-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.hp-stat { padding: clamp(30px,4vw,56px) clamp(18px,2.5vw,40px); border-left: 1px solid var(--ll-line-d); }
.hp-stat:first-child { border-left: 0; }
.hp-stat .v { font-family: "Geist",sans-serif; font-weight: 600; font-size: clamp(40px,5vw,64px); line-height: 1; letter-spacing: -0.05em; }
.hp-stat .k { margin-top: 12px; font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase; color: rgba(245,245,245,0.55); }

/* ============================================================
   App-Showcase
   ============================================================ */
.hp-app { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); gap: clamp(28px,5vw,64px); align-items: center; }
.hp-app-media { display: flex; justify-content: center; }
.hp-app-media img { width: auto; max-width: min(300px, 100%); height: auto; }
/* Hand-Mockup: echter App-Screenshot liegt auf dem weissen Screen des Fotos */
.hp-app-media .ll-handmock { position: relative; display: inline-block; width: min(300px, 100%); line-height: 0; }
.hp-app-media .ll-handmock img.hand { position: relative; z-index: 1; width: 100%; height: auto; }
.hp-app-media .ll-handmock img.shot {
  position: absolute; z-index: 2;
  left: 12.8%; top: 1%; width: 43.7%; height: 79.5%;
  object-fit: cover; object-position: center top;
  border-radius: 7% / 4%;
  transform: rotate(-1.6deg);
}

/* ============================================================
   Schritte (So einfach geht's) — Loop-Dial
   ------------------------------------------------------------
   Das LocalLoop-Logo ist die Nabe eines grossen Rads. Beim
   Reinscrollen sinkt das Rad (--drop) und dreht sich nach links
   (--rot, von JS gesetzt) durch die vier Schritte. Zahlen sitzen
   per --a auf dem Rand und bleiben durch Gegen-Rotation aufrecht.
   ============================================================ */
.hp-dial { margin-top: clamp(28px, 3.5vw, 44px); }
.hp-dial-stage {
  position: relative; overflow: hidden;
  height: var(--sh);
  border-top: 1px solid var(--ll-line); border-bottom: 1px solid var(--ll-line);
  --sh: clamp(430px, 56vh, 560px);
  --wheel: clamp(520px, 70vw, 820px);
  /* --ty = vertikale Verschiebung der Nabe ab Stage-Mitte.
     Der obere Bogen (Radius 0.47*wheel) landet so bei ~0.6*sh. */
  --ty: 0px;       /* Idle: Nabe mittig */
  --scale: 0.52;   /* Idle: verkleinert, damit das ganze Logo sichtbar ist */
}
.hp-dial.is-live .hp-dial-stage {           /* Logo sinkt nach unten, nur oberer Bogen bleibt */
  --ty: calc(0.10 * var(--sh) + 0.47 * var(--wheel)); --scale: 1;
}
.hp-dial.is-out .hp-dial-stage {            /* Exit: Logo verschwindet nach unten */
  --ty: calc(0.52 * var(--sh) + 0.47 * var(--wheel)); --scale: 1;
}

/* --- Rad (Logo als Nabe) ----------------------------------- */
.hp-dial-wheel {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: var(--wheel); height: var(--wheel);
  transform: translate(-50%, -50%) translateY(var(--ty)) scale(var(--scale)) rotate(var(--rot, 0deg));
  transition: transform 1.05s cubic-bezier(.5,.05,.2,1), opacity .8s ease;
  will-change: transform;
}
.hp-dial.is-out .hp-dial-wheel { opacity: 0; }
.hp-dial-ring {
  /* Ring = zwei konzentrische Kreise (rotationssymmetrisch). Er wurde frueher
     bei jedem Schritt gegenrotiert, was visuell nichts aendert, aber auf
     schwacher GPU unnoetig Compositor-Last erzeugt. Daher jetzt statisch. */
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  color: var(--ll-dark);
}
/* Marken sitzen als 0-Punkt-Anker knapp ausserhalb des Aussenrings (Radius
   0.53) – so schneidet die Ringlinie nie durch die Ziffern. Transform-Transition
   laeuft synchron zur Nabe, damit Zahl/Label auch waehrend der Drehung aufrecht
   bleiben. Im Idle steht Nummer + kleiner Titel; im Live-Modus nur die Nummer. */
.hp-dial-mark {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform:
    rotate(var(--a)) translateY(calc(var(--wheel) * -0.53))
    rotate(calc(-1 * var(--a))) rotate(calc(-1 * var(--rot, 0deg)));
  transition: transform 1.05s cubic-bezier(.5,.05,.2,1), color .4s ease;
  color: var(--ll-faint);
}
.hp-dial-mark.is-active { color: var(--ll-dark); }
.hp-dial-mark-in {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px; white-space: nowrap;
}
.hp-dial-mark-in b {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1; letter-spacing: 0.01em;
}
.hp-dial-mark-in em {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-style: normal; font-weight: 500;
  font-size: clamp(10px, 1.05vw, 13px); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ll-muted); transition: opacity .35s ease;
}
.hp-dial.is-live .hp-dial-mark-in em { opacity: 0; } /* Live: nur die Zahl auf dem Ring */

/* --- Aktive Textkarte: erst im Live-Modus, schwingt mit dem Rad mit ------ */
.hp-dial-cards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hp-dial-card {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(30px, 8vh, 74px);
  transform-origin: 50% calc(50% + var(--ty, 0px)); /* Drehpunkt = Nabe des Rads */
  transform: rotate(14deg); opacity: 0;             /* Wartepose: rechts vom Zenit */
  transition: transform 1.05s cubic-bezier(.5,.05,.2,1), opacity .55s ease;
}
/* Idle: keine grosse Karte (nur die 4 kleinen Punkte ums Logo). */
.hp-dial.is-live .hp-dial-card.is-active  { transform: rotate(0deg); opacity: 1; }
.hp-dial.is-live .hp-dial-card.is-leaving { transform: rotate(-14deg); opacity: 0; } /* schwingt nach links weg */
.hp-dial-row {
  width: min(92%, 660px); display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
}
.hp-dial-ic {
  flex: 0 0 auto; width: clamp(64px, 7vw, 92px); height: clamp(64px, 7vw, 92px);
  border-radius: 50%; background: var(--ll-dark); color: #fff; display: grid; place-items: center;
}
.hp-dial-ic svg { width: 45%; height: 45%; }
.hp-dial-tx h3 {
  margin: 0; font-family: "Sora", sans-serif; font-weight: 700; font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.0; letter-spacing: -0.04em; text-transform: uppercase;
}
.hp-dial-tx p { margin: 12px 0 0; color: var(--ll-muted); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; max-width: 46ch; }

/* --- Fallback: statische Liste (reduzierte Bewegung) ------- */
.hp-dial--static .hp-dial-stage { height: auto; overflow: visible; border: 0; padding: clamp(24px,3vw,36px) 0; }
.hp-dial--static .hp-dial-wheel { display: none; }
.hp-dial--static .hp-dial-cards { position: static; display: grid; gap: clamp(20px,3vw,34px); }
.hp-dial--static .hp-dial-card {
  position: static; inset: auto; display: block; padding: 0 0 clamp(20px,3vw,34px);
  transform: none; opacity: 1; transition: none; border-bottom: 1px solid var(--ll-line);
}
.hp-dial--static .hp-dial-card:last-child { border-bottom: 0; padding-bottom: 0; }
.hp-dial--static .hp-dial-row { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .hp-dial-wheel, .hp-dial-ring, .hp-dial-card, .hp-dial-mark { transition: none; }
}
@media (max-width: 640px) {
  .hp-dial-row { flex-direction: column; align-items: flex-start; text-align: left; }
  /* Handy: den Kartentext hoeher setzen (kleineres padding-top), damit klar
     Abstand zur aktiven Ziffer entsteht. Die Ziffer sitzt tiefer am Rad —
     durch den hoeheren Text waechst der Abstand und die Ziffer kann nicht
     mehr in den Text ragen (Ursache der Ueberlappung bei manchen Handys). */
  .hp-dial-card { padding-top: clamp(14px, 3vh, 30px); }
}

/* ============================================================
   Community / Case-Study (Platzhalter)
   ============================================================ */
.hp-case { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: clamp(28px,4vw,56px); }
.hp-case-media { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; background: rgba(23,23,23,0.06); }
.hp-case-media img { width: 100%; height: 100%; object-fit: cover; }
.hp-case-media svg { width: 48px; height: 48px; }
.hp-case .meta { display: grid; gap: 14px; align-content: center; }
.hp-case .meta .row { display: grid; gap: 3px; }
.hp-case .meta .lbl { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-faint); }
.hp-quote-t { font-family: "Sora",sans-serif; font-weight: 700; font-size: clamp(19px,2.2vw,26px); line-height: 1.25; letter-spacing: -0.02em; text-transform: uppercase; }
.hp-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(32px,4vw,48px); }
.hp-story { display: block; border: 1px solid var(--ll-line); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hp-story:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,0.08); border-color: rgba(23,23,23,0.3); }
.hp-story-media { aspect-ratio: 16 / 10; overflow: hidden; background: rgba(23,23,23,0.06); }
.hp-story-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform .4s ease, filter .3s ease; }
.hp-story:hover .hp-story-media img { transform: scale(1.05); filter: grayscale(0); }
.hp-story-body { padding: clamp(16px,2vw,22px); }
.hp-story .yr { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--ll-faint); }
.hp-story .name { margin: 8px 0 0; font-family: "Sora",sans-serif; font-weight: 700; font-size: clamp(18px,1.8vw,22px); letter-spacing: -0.02em; text-transform: uppercase; }
.hp-story .go { margin-top: 14px; display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 12px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ll-muted); }

/* Testimonial-Avatar (Porträt) */
.hp-avatar { width: 46px !important; height: 46px !important; border-radius: 50%; object-fit: cover; filter: grayscale(1); }

/* ============================================================
   Pricing-Tiers
   ============================================================ */
.hp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,24px); margin-top: clamp(32px,4vw,48px); align-items: stretch; }
.hp-tier {
  display: flex; flex-direction: column; border: 1px solid var(--ll-line); border-radius: 20px;
  padding: clamp(24px,2.6vw,34px); background: #fff;
  transition: transform .28s cubic-bezier(.22,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.hp-tier:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -26px rgba(0,0,0,0.32); border-color: rgba(23,23,23,0.28); }
.hp-tier--dark {
  color: var(--ll-light); border-color: var(--ll-dark);
  background: radial-gradient(96% 60% at 50% -6%, #262626, transparent 60%), var(--ll-dark);
  box-shadow: 0 26px 60px rgba(0,0,0,0.26); margin-block: -14px;
}
.hp-tier--dark:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -28px rgba(0,0,0,0.5); border-color: var(--ll-dark); }
/* Preis-Wechsel-Animation (Monat <-> Jahr) */
@keyframes hp-price-pop { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.hp-tier .price.is-swap, .hp-tier .per.is-swap, .hp-tier .save-line.is-swap { animation: hp-price-pop .38s cubic-bezier(.22,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .hp-tier .price.is-swap, .hp-tier .per.is-swap, .hp-tier .save-line.is-swap { animation: none; }}
.hp-tier .tag { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-muted); }
.hp-tier--dark .tag { color: rgba(245,245,245,0.6); }
.hp-tier .nm { margin: 6px 0 2px; font-family: "Sora",sans-serif; font-weight: 700; font-size: clamp(22px,2.4vw,28px); letter-spacing: -0.03em; text-transform: uppercase; }
.hp-tier .for { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ll-faint); min-height: 2.6em; }
.hp-tier--dark .for { color: rgba(245,245,245,0.5); }
.hp-tier .price { margin: 18px 0 4px; font-family: "Geist",sans-serif; font-weight: 600; font-size: clamp(36px,4vw,52px); letter-spacing: -0.05em; line-height: 1; }
.hp-tier .price .cur, .hp-tier .price .dec { font-size: 0.52em; font-weight: 600; letter-spacing: -0.02em; opacity: 0.9; }
.hp-tier .price .amt { font-variant-numeric: tabular-nums; }
.hp-tier .per { font-family: "IBM Plex Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ll-muted); }
.hp-tier--dark .per { color: rgba(245,245,245,0.55); }
.hp-tier .save-line { margin: 10px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--ll-muted); }
.hp-tier--dark .save-line { color: rgba(245,245,245,0.6); }
.hp-tier .badge { align-self: flex-start; margin-bottom: 8px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ll-dark); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.hp-tier ul { list-style: none; margin: 20px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--ll-line); display: grid; gap: 11px; flex: 1; }
.hp-tier--dark ul { border-top-color: var(--ll-line-d); }
.hp-tier li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.4; }
.hp-tier li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.5; }
.hp-tier .hp-btn { width: 100%; justify-content: center; }
/* Button in der dunklen Card: weisse Outline -> fuellt weiss bei Hover */
.hp-tier--dark .hp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.32); }
.hp-tier--dark .hp-btn--ghost:hover { background: #fff; color: var(--ll-dark); border-color: #fff; }
.hp-pricing-note {
  margin: clamp(22px,3vw,32px) 0 0; text-align: center;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.7;
  letter-spacing: -0.01em; color: var(--ll-faint);
}

/* ============================================================
   Quote (dunkel) + Timeline — wie About
   ============================================================ */
.hp-quote { position: relative; overflow: hidden; color: var(--ll-light);
  background: radial-gradient(46% 62% at 84% 88%, rgba(125,63,232,0.17), transparent 62%), var(--ll-dark); }
.hp-quote .hp-in { position: relative; z-index: 1; }
.hp-quote::after { content:""; position:absolute; z-index:0; pointer-events:none; right:-8%; bottom:-24%; width:min(560px,56vw); aspect-ratio:1; background:url("/assets/images/logo/icon-white.svg") center/contain no-repeat; opacity:0.07; }
.hp-quote .mark { display: block; font-family: "Sora",sans-serif; font-size: clamp(56px,7vw,96px); line-height: 1; padding-top: .12em; color: rgba(245,245,245,0.85); }
.hp-quote blockquote { margin: 0; max-width: 24ch; font-family: "Sora",sans-serif; font-weight: 700; font-size: clamp(26px,3.8vw,48px); line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ll-light); }
.hp-quote .hp-lead { margin-top: clamp(20px,2.4vw,28px); }
.hp-quote .by { margin-top: clamp(22px,3vw,32px); font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: rgba(245,245,245,0.55); }

.hp-timeline { margin-top: clamp(28px,3vw,40px); }
.hp-tl { display: grid; grid-template-columns: 120px minmax(0,1fr); column-gap: clamp(20px,4vw,56px); padding: clamp(20px,2.6vw,30px) 0; border-top: 1px solid var(--ll-line); }
.hp-tl:last-child { border-bottom: 1px solid var(--ll-line); }
.hp-tl .yr { font-family: "Geist",sans-serif; font-weight: 600; font-size: clamp(24px,2.6vw,30px); letter-spacing: -0.05em; }
.hp-tl .d { margin: 0; align-self: center; font-family: "IBM Plex Mono", monospace; font-size: clamp(13px,1.4vw,16px); letter-spacing: -0.01em; text-transform: uppercase; }

/* ============================================================
   Newsletter + FAQ (wie About)
   ============================================================ */
.hp-nl-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: clamp(24px,3vw,32px); }
.hp-in-field { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--ll-dark); background: var(--ll-light); border: 1px solid transparent; border-radius: 10px; padding: 14px 18px; outline: none; min-width: 260px; flex: 1 1 260px; max-width: 360px; transition: border-color .18s ease; }
.hp-in-field::placeholder { color: var(--ll-faint); }
.hp-in-field:focus { border-color: var(--ll-dark); }

.hp-faq { margin-top: clamp(28px,3vw,40px); }
.hp-faq details { border-top: 1px solid var(--ll-line); }
.hp-faq details:last-child { border-bottom: 1px solid var(--ll-line); }
.hp-faq summary { list-style: none; cursor: pointer; padding: clamp(20px,2.4vw,28px) 0; display: flex; align-items: center; gap: 18px; font-size: clamp(17px,1.8vw,19px); font-weight: 500; letter-spacing: -0.01em; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary .n { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--ll-faint); flex: 0 0 auto; }
.hp-faq summary .plus { margin-left: auto; position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.hp-faq summary .plus::before, .hp-faq summary .plus::after { content: ""; position: absolute; background: var(--ll-dark); transition: transform .2s ease; }
.hp-faq summary .plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.hp-faq summary .plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.hp-faq details[open] summary .plus::after { transform: scaleY(0); }
.hp-faq .a { padding: 0 0 clamp(22px,2.6vw,28px) 34px; margin: 0; max-width: 68ch; color: var(--ll-muted); line-height: 1.6; }

/* ---- App-Store-Badges ---------------------------------------- */
.hp-store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(28px, 3vw, 40px); }
.hp-store {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 11px 18px; border-radius: 14px;
  background: #fff; color: var(--ll-dark); text-decoration: none; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hp-store svg { width: 22px; height: 22px; flex: 0 0 auto; }
.hp-store span { display: flex; flex-direction: column; line-height: 1.08; font-family: "Sora", "Geist", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.hp-store small { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.hp-store:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.22); }
.hp-store--light { background: var(--ll-dark); color: #fff; }
.hp-textlink {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  font-family: "Sora", "Geist", sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; color: #fff; opacity: 0.85;
  transition: opacity .2s ease;
}
.hp-textlink svg { width: 17px; height: 17px; flex: 0 0 auto; transition: transform .2s ease; }
.hp-textlink:hover { opacity: 1; }
.hp-textlink:hover svg { transform: translateX(3px); }

/* ---- Pricing Monat/Jährlich-Switch --------------------------- */
.hp-billing-wrap { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }
.hp-billing { position: relative; display: inline-flex; padding: 5px; border: 1px solid var(--ll-line); border-radius: 999px; background: #fff; }
.hp-bill-thumb {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ll-dark);
  pointer-events: none; transition: transform .32s cubic-bezier(.5,.05,.2,1), width .32s cubic-bezier(.5,.05,.2,1);
}
.hp-bill-opt {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; padding: 10px 20px; border-radius: 999px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--ll-muted); display: inline-flex; align-items: center; gap: 8px; transition: color .25s ease; white-space: nowrap;
}
.hp-bill-opt.is-active { color: #fff; }
.hp-bill-opt .save { font-size: 10px; color: var(--ll-faint); transition: color .25s ease; }
.hp-bill-opt.is-active .save { color: rgba(255,255,255,0.7); }
@media (prefers-reduced-motion: reduce) { .hp-bill-thumb { transition: none; }}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .hp-tier--dark { margin-block: 0; }
  .hp-stats { grid-template-columns: 1fr; }
  .hp-stat { border-left: 0; border-top: 1px solid var(--ll-line-d); }
  .hp-stat:first-child { border-top: 0; }
  .hp-app { grid-template-columns: 1fr; }
  .hp-case { grid-template-columns: 1fr; }
  .hp-stories { grid-template-columns: 1fr; }
  .hp-pricing-grid { grid-template-columns: 1fr; }
  .hp-idea { grid-template-columns: 1fr; gap: clamp(32px, 8vw, 48px); }
  .hp-idea-media { order: -1; }
  .hp-tags { grid-column: 2; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
  .hp-offers { grid-template-columns: repeat(2, 1fr); }
  .hp-reasons { grid-template-columns: repeat(2, 1fr); }
  .hp-metrics { grid-template-columns: 1fr; border-top: 0; }
  .hp-metric { border-left: 0; border-top: 1px solid var(--ll-line); padding-left: 0; }
  .hp-metric:first-child { border-top: 0; }
  .hp-tl { grid-template-columns: 80px minmax(0,1fr); }
}
@media (max-width: 560px) {
  .hp-offers { grid-template-columns: 1fr; }
  .hp-reasons { grid-template-columns: 1fr; }
  /* Preis-Toggle: 3 Optionen passen auch auf schmale Handys (kein Overflow) */
  .hp-billing { max-width: 100%; }
  .hp-bill-opt { padding: 9px 12px; font-size: 11px; gap: 5px; }
  .hp-bill-opt .save { font-size: 9px; }}

/* ---- Instagram-Feed (Sektion 06) ---------------------------- */
.hp-ig-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hp-ig-id { display: flex; align-items: center; gap: 16px; }
.hp-ig-badge {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(45deg,#f6a623,#e0563f 45%,#b3245f 70%,#7d3fe8);
}
.hp-ig-badge svg { width: 26px; height: 26px; }
.hp-ig-handle { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; color: var(--ll-muted); text-decoration: none; }
.hp-ig-handle:hover { color: var(--ll-dark); }
.hp-ig-note { margin: 18px 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: -0.01em; color: var(--ll-faint); }
.hp-ig-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 14px); }
.hp-ig-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--g1, #888), var(--g2, #444));
  display: flex; align-items: center; justify-content: center;
  transition: transform .28s cubic-bezier(.22,.7,.2,1), box-shadow .28s ease;
}
.hp-ig-tile::after { content: ""; position: absolute; inset: 0; background: rgba(23,23,23,0); transition: background .25s ease; }
.hp-ig-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(0,0,0,0.5); }
.hp-ig-tile:hover::after { background: rgba(23,23,23,0.18); }
.hp-ig-glyph { position: relative; z-index: 1; color: rgba(255,255,255,0.9); }
.hp-ig-glyph svg { width: 34px; height: 34px; }
@media (max-width: 560px) {
  .hp-ig-grid { grid-template-columns: repeat(2, 1fr); }
}