/* ==========================================================================
   ARC – Basis: Reset, Typo-Skala, Layout-Primitiven, Buttons.
   Die „Lippe" (solide Unterkante) ist das Marken-Detail aus der App und
   taucht hier bei Buttons und Karten wieder auf.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Die Kopfzeile schwebt fest über dem Inhalt. Ohne diesen Abstand landet
     jeder Ankersprung (#holen, der Sprung-Link auf #inhalt) genau darunter
     und die Überschrift ist verdeckt. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Nur für Screenreader ------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--color-ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 500;
  transition: translate var(--duration-fast) var(--ease-out-quart);
}
.skip-link:focus {
  translate: -50% 0;
}

/* --- Layout -------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.shell--narrow {
  max-width: 760px;
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: var(--space-section-tight);
}

/* --- Typo-Klassen -------------------------------------------------------- */
.t-hero {
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: var(--leading-hero);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.t-display {
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.t-title {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.t-lead {
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.t-body {
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.t-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-navy);
}

/* Markierte Wörter – wie das farbige Kästchen bei den Referenzseiten,
   aber in ARC-Blau und mit unserer Rundung. */
.mark {
  display: inline-block;
  padding: 0.04em 0.3em 0.12em;
  border-radius: 0.28em;
  background: var(--color-navy);
  color: #fff;
  rotate: -1.4deg;
}

.mark--amber {
  background: var(--tone-amber);
  color: #3a2200;
}

/* ==========================================================================
   Die ARC-Lippe – Press3D/CardPress aus der App, 1:1 übersetzt:
   KEIN Blur-Schatten. Tiefe kommt ausschließlich aus einer dickeren
   Unterkante (Border), die beim Drücken auf die normale Randdicke
   zusammensinkt (App.tsx Press3D: Fläche senkt sich exakt um lipHeight).
   ========================================================================== */

/* --- App-Store-Badge ------------------------------------------------------
   Nachbau des echten Apple-Badges: exakter Apple-Logo-Pfad (aus simple-icons,
   MIT-lizenziert), Systemschrift statt Pally (Apple verlangt ihre eigene
   Typo im Badge), korrekte Proportionen. Lippe im selben System wie der
   Rest der Seite. --- */
.badge-store {
  --lip-w: 6px;

  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.15rem;
  border-radius: 13px;
  border: 1.5px solid #000;
  border-bottom-width: calc(1.5px + var(--lip-w));
  background: #000;
  color: #fff;
  transition:
    translate var(--duration-fast) var(--ease-out-quart),
    border-bottom-width var(--duration-fast) var(--ease-out-quart),
    margin-bottom var(--duration-fast) var(--ease-out-quart);
}

.badge-store:hover {
  translate: 0 -2px;
}

.badge-store:active {
  border-bottom-width: 1.5px;
  margin-bottom: var(--lip-w);
}

/* Ankündigungs-Variante: sieht aus wie das Badge, ist aber kein Link (die App
   ist noch nicht im Store). Deshalb auch keine Hover-Reaktion – ein Element,
   das sich anfassen lässt, aber nichts tut, ist schlechter als eines, das
   sichtbar nur informiert. */
.badge-store--soon {
  cursor: default;
}

.badge-store--soon:hover {
  translate: none;
}

.badge-store__apple {
  width: 30px;
  height: 30px;
  flex: none;
  fill: currentColor;
}

.badge-store__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, sans-serif;
}

.badge-store__small {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.badge-store__big {
  margin-top: 0.15em;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Hinweis-Pille unter dem Badge, solange die App noch nicht live ist. */
.badge-note {
  margin-top: 0.85rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
}

/* ==========================================================================
   Karten (DESIGN.md §0 Regel 1): weißer/getönter Inhalt, dicke helle
   Umrandung, unten eine Lippe in DERSELBEN Farbe wie der Rand – KEIN
   Blur-Schatten. --tone-edge überschreiben, um eine getönte Karte zu bauen
   (Regel 3: getönte Karte = tone.soft-Fläche + tone.ink für Rand/Lippe).
   ========================================================================== */
.card {
  --tone-edge: var(--card-border);

  background: var(--color-card);
  border: var(--card-border-w) solid var(--tone-edge);
  border-bottom-width: calc(var(--card-border-w) + var(--card-lip-w));
  border-radius: var(--card-radius);
}

/* Drückbare Karte: sinkt beim Tippen auf die normale Randdicke (Press3D). */
.card--press {
  cursor: pointer;
  transition:
    translate var(--duration-fast) var(--ease-out-quart),
    border-bottom-width var(--duration-fast) var(--ease-out-quart),
    margin-bottom var(--duration-fast) var(--ease-out-quart);
}

.card--press:active {
  border-bottom-width: var(--card-border-w);
  margin-bottom: var(--card-lip-w);
}

/* --- Einblenden beim Scrollen ---------------------------------------------
   Der versteckte Ausgangszustand hängt an `html.js-reveal`, das scripts/main.js
   als Erstes setzt. Ohne JavaScript greift die Regel nie – dann steht der
   Text einfach da. Vorher stand hier `opacity: 0` hart im CSS: fiel der
   Observer aus, war die halbe Seite unsichtbar und niemand hätte gewusst,
   warum. --- */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    translate var(--duration-slow) var(--ease-out-expo);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
  .badge-store,
  .card--press {
    transition: none;
  }
}