/* ─────────────────────────────────────────────────────────────────────
   Renten Countdown — gemeinsames Design-System

   Eine Datei für alle Marketing-Seiten (index.html, gruss.html). Vorher stand
   dasselbe System zweimal, einmal je Seite, und lief prompt auseinander: die
   Gruß-Seite trug im 08/2026 noch die Skala von vor dem Umbau der Startseite,
   sichtbar an Store-Knöpfen, Schriftgraden und Abschnittsabständen. Wer eine
   Kopie pflegt, pflegt irgendwann nur noch eine von beiden.

   Werte 1:1 aus theme.dart der App. Seiteneigenes (Gruß-Hero, Anhänger)
   bleibt inline in der jeweiligen Seite — hier steht nur, was beide teilen.

   Die Rechtstexte (impressum.html, datenschutz.html) hängen bewusst NICHT
   hier dran: sie tragen keine Kopf- und Fußzeile und keinen einzigen dieser
   Bausteine.
   ───────────────────────────────────────────────────────────────────── */

/* ── Design-Tokens: 1:1 aus theme.dart der App ─────────────────────── */
:root {
  --bg:            #FAF6EE;
  --bg-subtle:     #EDE5D5;
  --ink:           #352515;
  --ink-muted:     #574736;
  --accent:        #8B1A1A;
  --secondary:     #7A6A58;
  --border:        #B8A890;
  --disabled:      #D0C8B0;
  --button-decent: #F0EADF;
  --gold:          #9C7A2E;

  --radius: 3px;
  --rule: 1.5px;
  --pad-h: 22px;
  --measure: 1080px;

  /* Systemschrift statt Google Fonts: keine Drittanbieter-Requests,
     damit die Datenschutzerklärung ohne Font-CDN korrekt bleibt. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: schneidet dekorative Überhänge ab, ohne die
     sticky-Kopfzeile zu zerstören. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-h); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--accent); color: #fff; padding: 10px 16px; border-radius: var(--radius);
}
.skip:focus { left: 12px; top: 12px; }

/* ── Typo-Rollen: gleiche Semantik wie in der App ───────────────────── */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}
.oma-voice { font-style: italic; color: var(--ink); }

h1, h2, h3 { margin: 0; line-height: 1.07; letter-spacing: -0.3px; }
h1 { font-size: clamp(31px, 6vw, 58px); font-weight: 900; }
h2 { font-size: clamp(23px, 3.4vw, 36px); font-weight: 900; }
h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
p  { margin: 0; }

.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-muted); font-weight: 500; }

/* ── Kopfzeile ──────────────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 5;
  background: rgba(250, 246, 238, .92);
  backdrop-filter: blur(8px);
  border-bottom: var(--rule) solid var(--border);
}
.masthead .wrap { display: flex; align-items: center; gap: 20px; min-height: 62px; }
.wordmark {
  font-weight: 900; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark .dot { color: var(--accent); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--secondary); text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 10px 12px; border-radius: var(--radius);
}
.nav a:hover { color: var(--accent); }
/* Der einzige Knopf, der über die ganze Seite mitfährt — und damit der
   meistgetippte. min-height statt mehr Polsterung, damit die Kopfzeile
   nicht höher wird als die 62 px, die sie ohne ihn hätte. */
.nav .nav-cta {
  color: #fff; background: var(--accent);
  border: var(--rule) solid var(--accent);
  display: inline-flex; align-items: center; min-height: 54px;
  transition: opacity .22s ease;
}
.nav .nav-cta:hover { color: #fff; opacity: .9; }
/* Solange die echten Store-Knöpfe im Hero sichtbar sind, ist der Knopf in
   der Kopfzeile nur eine dritte, schwächere Kopie derselben Aufforderung —
   er sagt nicht mal, in welchen Store er führt. Also ruht er dort und
   kommt erst, wenn die Knöpfe weggescrollt sind; ab da ist er der einzige
   Weg in den Store, der immer erreichbar bleibt. Der Platz bleibt
   reserviert (visibility statt display), damit beim Auftauchen nichts
   springt. Das Attribut setzt nur JavaScript: ohne JS steht der Knopf
   durchgehend da — nie schlechter als vorher. */
.masthead[data-cta="ruht"] .nav-cta { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .nav .hide-sm { display: none; } }
@media (max-width: 400px) {
  .masthead .wrap { gap: 12px; }
  .wordmark { font-size: 13px; letter-spacing: 1px; }
  .nav .nav-cta { padding: 10px 14px; }
}

/* ── Hero ───────────────────────────────────────────────────────────
   Auf dem Handy führt die Oma als randloses Plakat: der Anschnitt ist dort
   gewollt, ein Ausschnitt wirkt wie ein Poster. Auf dem Desktop geht das
   nicht auf — die Illustration ist 725 × 597, in ein bildschirmbreites Band
   gepresst bliebe von ihr nur der Kopf. Ab 861 px steht sie deshalb neben
   der Schlagzeile und in ihren eigenen Proportionen. */
.hero { padding-block: 0 22px; }
.hero-grid { display: grid; gap: 20px; }
.hero-text { padding-top: 26px; }
.hero h1 { margin: 10px 0 12px; max-width: 16ch; }
.hero h1 .flip { color: var(--accent); }
.hero .lede { max-width: 46ch; }

.hero-art { position: relative; margin: 0 calc(var(--pad-h) * -1); background: var(--bg-subtle); }
/* Volles Motiv im natürlichen Seitenverhältnis — kein harter Streifen-Anschnitt,
   sonst bleibt auf schmalen Viewports nur Omas Kopf stehen. Der vh-Deckel hält das
   fast quadratische Bild auf breiten Phones/Tablets kompakt; wird gedeckelt, sitzt
   der Anschnitt mittig (Buggy bleibt im Bild), nicht kopflastig. */
.hero-art img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 725 / 597; max-height: 58vh;
  object-fit: cover; object-position: center;
}
.hero-art .bubble {
  position: absolute; left: var(--pad-h); bottom: -16px;
  background: var(--bg); border: var(--rule) solid var(--ink);
  border-radius: var(--radius); padding: 9px 14px;
  font-style: italic; font-size: 14px;
  box-shadow: 3px 3px 0 rgba(53, 37, 21, .14);
}
@media (min-width: 861px) {
  .hero { padding-block: 44px 40px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero-text { padding-top: 0; order: 1; }
  .hero-art { order: 2; margin: 0; background: none; }
  /* Volle Illustration statt Anschnitt: Höhe ergibt sich aus dem Bild.
     Kein vh-Deckel hier — sonst würde object-fit: fill das Bild stauchen. */
  .hero-art img {
    height: auto; max-height: none; object-fit: fill;
    border: var(--rule) solid var(--border); border-radius: var(--radius);
  }
  .hero-art .bubble { left: 16px; bottom: 14px; font-size: 15px; }
  .hero h1 { font-size: clamp(38px, 3.9vw, 50px); }
}

/* Gleich breite Knöpfe: nebeneinander teilen sie die Zeile, beim Umbruch
   werden beide voll breit — nie versetzt. Der Umbruch ist nötig: mit
   `flex: 1 1 0` kann ein Knopf nicht unter seine Inhaltsbreite schrumpfen,
   und „Google Play“ samt Glyphe braucht mehr, als ein 320-px-Gerät auf
   zwei Spalten hergibt (gemessen: 323 px Satzbreite gegen 320 px Fenster). */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; max-width: 470px; }
.store-btn {
  flex: 1 1 150px;
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 56px; /* kMinTapTarget mit Luft */
  padding: 8px 14px;
  border: var(--rule) solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink); color: var(--bg);
  text-decoration: none;
}
/* Store-Glyphen inline als SVG (kein Fremd-Request → Datenschutz bleibt),
   currentColor spiegelt die Knopf-Textfarbe. */
.store-icon { width: 25px; height: 25px; flex: none; }
.store-text { display: flex; flex-direction: column; }
.store-btn .kicker {
  font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; opacity: .75;
}
.store-btn .name { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.store-btn:hover { background: var(--accent); border-color: var(--accent); }
.price-note { margin-top: 12px; font-size: 13px; color: var(--secondary); }

/* ── Omas Rechnung: der Countdown selbst ────────────────────────────
   Die Zahl wird aus dem heutigen Datum gerechnet, nicht gesetzt, und die
   Einheit wechselt durch — genau das tut die App, und man versteht es,
   ohne dass ein Satz es erklären muss. Die zwei Zitate rahmen sie: oben
   die Bedingung, unten der Ton. Ohne JavaScript bleibt das Beispiel im
   Markup stehen; es rechnet dann nicht mit, sagt aber dasselbe. */
.rechnung { padding-block: 26px 32px; }
.rechnung .eyebrow { text-align: center; }
.zettel {
  margin: 14px auto 0; max-width: 560px;
  padding: 22px 20px; text-align: center;
  background: var(--button-decent);
  border: var(--rule) solid var(--border); border-radius: var(--radius);
}
.zettel p { margin: 0; }
.zettel .sagen { font-size: 15px; color: var(--ink); text-wrap: balance; }
.zettel .sagen b { font-weight: 800; font-style: normal; }
.zettel .zahl {
  margin-top: 12px;
  font-size: clamp(50px, 15.5vw, 76px); font-weight: 900; color: var(--accent);
  line-height: .92; letter-spacing: -2px; font-variant-numeric: tabular-nums;
}
.zettel .einheit {
  margin-top: 7px;
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase;
  font-weight: 800; color: var(--ink);
}
.zettel .zahl, .zettel .einheit { transition: opacity .26s ease; }
.zettel .laeuft { margin-top: 9px; font-size: 12px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.zettel .dazu {
  margin-top: 16px; padding-top: 14px;
  border-top: var(--rule) solid var(--border);
  font-size: 15px; color: var(--ink); text-wrap: balance;
}
.rechnung .hinweis { margin: 12px auto 0; max-width: 560px; font-size: 13px; color: var(--secondary); text-align: center; }
.rechnung .hinweis b { color: var(--ink); }

/* ── Abschnitts-Rhythmus ────────────────────────────────────────────── */
.section { padding: 40px 0; }
.section-subtle {
  background: var(--bg-subtle);
  border-top: var(--rule) solid var(--border);
  border-bottom: var(--rule) solid var(--border);
}
.section-head { max-width: 640px; }
.section-head .eyebrow { margin-bottom: 8px; }
.section-head p { margin-top: 12px; }
@media (min-width: 861px) { .section { padding: 64px 0; } }

/* Text links, Beleg rechts. Auf dem Handy stehen beide untereinander —
   dort ist die Reihenfolge die Aussage. Ab 861 px stünde der Beleg sonst
   unter einer halbleeren Textzeile und ließe die rechte Hälfte des
   Bildschirms leer; nebeneinander füllt der Abschnitt seine Breite. */
.split { display: grid; gap: 22px; }
@media (min-width: 861px) {
  .split { grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
  .split > .section-head { margin: 0; }
}

/* ── Spruch-Karussell ───────────────────────────────────────────────
   Auf dem Handy eine Wisch-Leiste: das erste, was man tut, ist lachen,
   nicht lesen. Ab Tablet-Breite wird daraus ein Raster — dort wischt
   niemand, und vier Sprüche nebeneinander lesen sich schneller. */
.rail {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px var(--pad-h) 12px;
  margin: 16px calc(var(--pad-h) * -1) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.spruch {
  scroll-snap-align: center;
  flex: 0 0 268px; min-height: 150px;
  background: var(--bg); border: var(--rule) solid var(--border); border-radius: var(--radius);
  padding: 20px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.spruch q { font-style: italic; font-size: 19px; line-height: 1.35; quotes: "„" "“"; }
.spruch .who {
  margin-top: 14px; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--secondary); font-weight: 700;
}
.rail-hint { margin-top: 2px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--secondary); font-weight: 700; }
@media (min-width: 861px) {
  .rail {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    overflow: visible; margin: 20px 0 0; padding: 0;
  }
  .spruch { flex: none; }
  .rail-hint { display: none; }
}

/* Der Verweis steht direkt bei den Sprüchen, weil die Oma dort ihre Stimme
   hat — nicht nur als Glyphe im Fuß. Was auf dem Kanal wann erscheint,
   sagt die Seite bewusst nicht: eine Frequenz-Zusage wäre ein Versprechen,
   das der Kanal einhalten müsste. */
.oma-follow {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; /* kMinTapTarget */
  margin-top: 12px;
  font-weight: 700; text-decoration: none; font-size: 15px;
}
.oma-follow:hover { text-decoration: underline; }
.oma-follow svg { width: 20px; height: 20px; flex: none; }

/* ── Der Tagesspruch als Mitteilungs-Nachbau ────────────────────────
   Eine Attrappe, kein Screenshot: sie zeigt in einem Blick, was man
   täglich bekommt, und trägt den echten Begrüßungssatz aus der App. */
.banner {
  margin: 18px 0 0; max-width: 520px;
  background: var(--button-decent);
  border: var(--rule) solid var(--border); border-radius: 14px;
  padding: 13px 14px;
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
  box-shadow: 0 6px 18px rgba(53, 37, 21, .10);
}
.banner .ic { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; border: var(--rule) solid var(--border); }
.banner .t {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--secondary); font-weight: 700;
}
.banner .m { margin-top: 3px; font-style: italic; font-size: 15px; line-height: 1.35; }
.push-note { margin-top: 14px; max-width: 52ch; font-size: 15px; color: var(--ink-muted); }

/* ── Die zwei Tonlagen ──────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; max-width: 640px; }
@media (min-width: 861px) { .duo { margin-top: 0; max-width: none; gap: 22px; } }
.duo figure { margin: 0; }
.duo .shot { border: var(--rule) solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); }
.duo figcaption { margin-top: 9px; }
.duo .tag { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.duo strong { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }
.duo p { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }
/* Der Kipppunkt: der Ton der App wechselt hier — die Seite auch. */
.crossing { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; max-width: 560px; }
.crossing::before, .crossing::after { content: ""; flex: 1; height: var(--rule); background: var(--border); }
.crossing span {
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}

/* ── Was sie sonst noch treibt ──────────────────────────────────────── */
.tut ul { list-style: none; margin: 18px 0 0; padding: 0; }
.tut li {
  display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center;
  border-top: var(--rule) solid var(--border); padding: 15px 0;
}
.tut li:last-child { border-bottom: var(--rule) solid var(--border); }
.tut .thumb {
  width: 58px; height: 58px; border: var(--rule) solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-subtle); display: grid; place-items: center;
}
/* Zahlen bleiben Zahlen — sie tragen hier Bedeutung (30 Einheiten, ein
   Zählerstand). Sonst steht überall ein Inline-SVG: ein Unicode-Symbol
   zeichnen die Systemschriften mal als Haarlinie, mal als farbiges
   Emoji-Kästchen, und ein Foto zwischen gezeichneten Zeichen bricht die
   Reihe erst recht auf. */
.tut .glyph { font-size: 24px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.tut .glyph svg { width: 25px; height: 25px; display: block; }
.tut p { font-size: 14px; color: var(--ink-muted); margin-top: 3px; }
@media (min-width: 861px) {
  .tut ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
  /* Im Raster trägt jede Zeile ihre eigene Ober- und Unterlinie, sonst
     hinge die letzte Zeile der linken Spalte ohne Abschluss in der Luft. */
  .tut li:nth-last-child(-n+2) { border-bottom: var(--rule) solid var(--border); }
}

/* ── Verschenken / Erzähl davon ─────────────────────────────────────── */
/* ── Oma-Loops ──────────────────────────────────────────────────────
   Die Videos sind mit kBackground (#FAF6EE) encodiert, tragen ihren
   Hintergrund also mit. Deshalb stehen sie ausschließlich auf Abschnitten
   in Papierfarbe — auf `--bg-subtle` stand sonst ein hellerer Kasten um
   die Oma, den niemand gezeichnet hat. Die Maske blendet zusätzlich die
   Kanten aus, damit auch bei minimalem Farbversatz keine Rechteckkante
   stehen bleibt. Werte und Vorgehen wie in gruss.html. */
.oma-loop {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}

.gift-grid { display: grid; gap: 20px; align-items: center; }
.gift-art { margin: 0; max-width: 220px; }
.gift-art video { width: 100%; height: auto; }
.gift-body p { margin-top: 12px; color: var(--ink-muted); }
.gift-body .oma-line { margin-top: 14px; font-size: 16px; }
@media (min-width: 861px) {
  .gift-grid { grid-template-columns: 260px 1fr; gap: 44px; }
  .gift-art { max-width: 260px; }
}
/* Auf dem Handy stand die Oma als 220-px-Kachel über der Überschrift: links
   angeschlagen, rechts ein Drittel leere Spalte, und über ihr kein Wort,
   das sie hielte — sie hing lose im Abschnitt. Hier schiebt sie sich
   zwischen den Fließtext und ihren eigenen Satz: mittig, größer, und die
   Zeile darunter ist das, was sie ins Megafon ruft. Damit steht sie in
   Text, nicht in Leerraum — ohne Rahmen, den es auf dieser Seite für
   Illustrationen nicht gibt.
   `display: contents` löst die Text-Spalte auf, damit ihr Satz als eigenes
   Rasterkind unter das Bild rutschen kann — sonst müsste er aus dem
   Markup wandern und stünde auf dem Desktop woanders als heute. Dafür
   muss `gap` auf 0: die Abstände zwischen den Textzeilen sind ihre
   eigenen Margins, ein Raster-Gap käme oben drauf und risse Eyebrow und
   Schlagzeile auseinander.
   Alles nur unterhalb des Umbruchs — ab 861 px steht sie unverändert
   links neben dem Text, dort geht die Rechnung auf. */
@media (max-width: 860px) {
  .gift-grid { gap: 0; }
  .gift-body { display: contents; }
  .gift-body .eyebrow { order: 1; }
  .gift-body h2 { order: 2; }
  .gift-body p { order: 3; }
  .gift-art { order: 4; max-width: 244px; margin: 6px auto 0; }
  .gift-body .oma-line { order: 5; margin-top: 0; text-align: center; }
}

/* ── Fragen ─────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin-top: 18px; }
.faq details { border-top: var(--rule) solid var(--border); padding: 4px 0; }
.faq details:last-of-type { border-bottom: var(--rule) solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 30px 16px 0; position: relative;
  font-size: 16px; font-weight: 800;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--accent);
}
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 0 18px; color: var(--ink-muted); max-width: 62ch; }
.faq .answer p + p { margin-top: 10px; }

/* ── Schluss-Aufruf ─────────────────────────────────────────────────── */
.closer { text-align: center; }
/* Unten trägt der Loop mehr leeren Rand als an den Seiten (unter den
   Schuhen), deshalb blendet die untere Maske früher aus als die seitliche
   — und der ausgeblendete Streifen wirkt schon als Abstand zur Headline.
   Werte aus gruss.html, dort am selben Video ausgemessen. */
.closer .kaffee {
  display: block; width: 158px; height: auto; margin: 0 auto 12px;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 8%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 8%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 78%, transparent 100%);
          mask-composite: intersect;
}
.closer .stores { justify-content: center; margin-left: auto; margin-right: auto; }
.closer .price-note { text-align: center; }

/* ── Fuß ────────────────────────────────────────────────────────────── */
.foot {
  border-top: var(--rule) solid var(--border);
  padding: 34px 0;
  font-size: 13px; color: var(--secondary);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 26px; align-items: center; }
.foot a { color: var(--secondary); text-decoration: none; }
.foot a:hover { color: var(--accent); text-decoration: underline; }
.foot .foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.foot .foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* Social: Glyph inline wie bei .store-icon — kein Fremd-Request, kein
   Instagram-Widget, damit die Datenschutzerklärung ohne Drittanbieter
   korrekt bleibt. currentColor spiegelt die Fuß-Textfarbe. */
.foot .social { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.foot .social a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 54px; /* kMinTapTarget */
  padding: 0 15px;
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.foot .social a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.foot .social svg { width: 18px; height: 18px; flex: none; }
/* Gemessen: der Feindruck braucht 418 px, die Knöpfe 293 px, dazwischen 26 px
   — nebeneinander passt das erst ab rund 781 px Viewport. Darunter würden die
   Knöpfe allein in die zweite Zeile rutschen und rechts in der Ecke hängen.
   Also stapeln, Knöpfe zuoberst, alles linksbündig wie der Rest der Seite. */
@media (max-width: 860px) {
  .foot .wrap { flex-direction: column; align-items: flex-start; gap: 22px; }
  .foot .social { margin-left: 0; order: -1; }
}
@media (max-width: 620px) {
  .foot .wrap { align-items: stretch; }
  .foot .social { align-self: stretch; }
  .foot .social a { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}