/* HomeInk — Website, Richtung „A · Tinte".
   Farben aus app/src/main/java/app/homeink/app/ui/theme/Color.kt (dunkle Lage).
   Schriften liegen unter assets/fonts/ — nichts wird von fremden Servern geladen. */

/* ---------- Schriften ---------------------------------------------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg: #0d1124;
  --bg-header: #0e1330;
  --bg-raised: #151a33;
  --bg-sunk: #0a0e26;
  --bg-device: #070a1c;
  --card: #1a2048;

  --line: #22294f;
  --line-strong: #2a3268;
  --line-bright: #39407a;

  --text: #f4f4f8;
  --text-dim: #c3c9ea;
  --text-mute: #9aa2ce;

  --accent: #aeb9f7;
  --on-accent: #131a42;

  --rainbow: linear-gradient(90deg, #e23b2e, #f2b21a, #3fa34d, #2e7fe0, #7b4fd1, #e23b2e);

  --page: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
  --band: clamp(56px, 7vw, 104px);

  --sans: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Grundlagen --------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 0 0 12px 0;
}

.skip:focus {
  left: 0;
}

.wrap {
  max-width: var(--page);
  margin-inline: auto;
}

.wrap--narrow {
  max-width: 720px;
}

.band {
  padding: var(--band) var(--gutter);
}

.band--raised {
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
}

.rule {
  height: 4px;
  width: 168px;
  border-radius: 3px;
  background: var(--rainbow);
}

.rule--short {
  width: 132px;
}

/* ---------- Kopf --------------------------------------------------------- */

.site-header {
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--line);
  background-color: var(--bg-header);
}

.site-header > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.site-nav {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 28px;
  font-size: 16px;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

/* Auf dem Telefon bricht der Kopf ohnehin um; links ausgerichtet liest sich die
   zweite Zeile als ein Block unter der Wortmarke statt rechts abgesetzt. */
@media (max-width: 719px) {
  .site-nav {
    justify-content: flex-start;
    gap: 12px 20px;
  }
}

.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
}

.lang a,
.lang span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.lang [aria-current='true'] {
  color: var(--text);
}

.lang .sep {
  color: var(--line-bright);
  min-height: 0;
  padding-inline: 0;
}

/* ---------- Knöpfe und Badge --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding-inline: 30px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}

.btn--ghost {
  border: 1px solid var(--line-bright);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Das offizielle Google-Play-Badge wird nicht verändert — nur skaliert.
   Die beiden Dateien bringen aber unterschiedlich viel transparenten Rand mit:
   bei der deutschen sind 76,8 % der Bildhöhe sichtbares Badge, bei der
   englischen nur 67,2 %. Gleiche Bildhöhe hieße deshalb ungleich große Badges.
   Darum wird aus der gewünschten *sichtbaren* Höhe zurückgerechnet — sie ist
   mit --badge-visible genauso hoch wie der Knopf daneben (.btn, 52 px).
   Gemessen mit sharp über den Alphakanal; nach einem Badge-Austausch neu
   bestimmen. Die Dateien selbst bleiben unangetastet. */
:root {
  /* sichtbares Badge, genauso hoch wie .btn daneben */
  --badge-visible: 52px;
  /* sichtbarer Anteil der Bildhöhe: 192 von 250 px */
  --badge-fill: 0.768;
  /* seitlicher Transparenzrand, auf die Anzeigegröße gerechnet */
  --badge-trim: 0px;
}

html[lang='en'] {
  /* 168 von 250 px, und 41 von 646 px seitlich -> 12,7 px bei dieser Höhe */
  --badge-fill: 0.672;
  --badge-trim: 12.7px;
}

.badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  /* Der Rand wird herausgerechnet, damit das sichtbare Badge bündig mit der
     Überschrift darüber beginnt und in beiden Sprachen gleich weit vom Knopf
     steht. Der Freiraum, den Googles Gestaltungsregeln verlangen (ein Viertel
     der Badge-Höhe, hier 13 px), bleibt über den Abstand in .actions gewahrt. */
  margin-inline: calc(-1 * var(--badge-trim));
}

.badge img {
  height: calc(var(--badge-visible) / var(--badge-fill));
  width: auto;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---------- Hero --------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--media-first > .split__media {
    order: -1;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--text-dim);
  max-width: 46ch;
}

.note {
  font-size: 14px;
  color: var(--text-mute);
}

.chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips li {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-dim);
}

.split__media {
  display: flex;
  justify-content: center;
}

.phone {
  width: 100%;
  max-width: 312px;
  padding: 10px;
  border-radius: 42px;
  background: var(--bg-device);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.55);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 33px;
}

.phone--sm {
  max-width: 288px;
  border-radius: 40px;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
}

.phone--sm img {
  border-radius: 31px;
}

/* ---------- Karten und Listen -------------------------------------------- */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}

.section-head h2,
.stack h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* `width: 100%` hier und bei .feature-list, weil beide auch in .stack stehen —
   dort macht `align-items: flex-start` die Breite sonst vom Inhalt abhängig. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
  width: 100%;
}

/* Dieselbe Rasterung, aber als Liste ausgezeichnet (Privatsphäre-Band). */
.cards--plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  padding: 30px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card--flat {
  background: var(--bg);
  padding: 22px;
  border-radius: 16px;
  gap: 7px;
}

.card__step {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.card h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
}

.card p,
.card span {
  color: var(--text-dim);
}

.card--flat strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.card--flat span {
  font-size: 15px;
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.feature-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 18px;
  border-left: 2px solid var(--line-strong);
}

.feature-list strong {
  font-size: 17px;
  font-weight: 600;
}

.feature-list span {
  color: var(--text-dim);
}

/* ---------- Pro ---------------------------------------------------------- */

.pro {
  padding: clamp(32px, 4vw, 56px);
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line-bright);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}

@media (min-width: 820px) {
  .pro {
    grid-template-columns: 1fr 1fr;
  }
}

.tag {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ticks li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.footnote {
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  font-size: 15px;
  color: var(--text-dim);
}

/* ---------- Schlussband -------------------------------------------------- */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.closing h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
}

/* ---------- Fuß ---------------------------------------------------------- */

.site-footer {
  padding: 44px var(--gutter);
  background: var(--bg-sunk);
}

.site-footer > .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}

.site-footer .copy {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-mute);
}

.site-footer img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.site-footer nav a {
  color: var(--text-dim);
}

.site-footer nav a:hover {
  color: var(--text);
}

/* ---------- Rechtstexte -------------------------------------------------- */

.legal {
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(56px, 6vw, 96px);
}

.legal .wrap {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.legal h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal h2 {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.legal h3 {
  font-size: 17px;
  margin-top: 10px;
}

.legal p,
.legal li {
  color: var(--text-dim);
}

.legal strong {
  color: var(--text);
}

.legal ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.legal address {
  font-style: normal;
  color: var(--text-dim);
}

.label {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.callout {
  padding: 26px 30px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line-bright);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.callout strong {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.callout p {
  color: var(--text-dim);
}

.legal__foot {
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-mute);
}

.scroll-top {
  cursor: pointer;
}