/* obs-mk-takt.css - Der Vierertakt und der Beleg davor (08.09.2026)
   Aus der Positionierung "openbi Studio - Vierertakt", Stand September 2026:
   WAS / WIE / ERGEBNIS / BESITZ ohne Erklaerung im Hero, die drei Fragen erst
   direkt vor den Preisen. Rueckbau: diese Datei aus der Seitenhuelle nehmen
   und die betroffenen Baender wieder auf die alten Klassen setzen. */

/* ---- Der Vierertakt ------------------------------------------------ */

.obs-takt {
  border-top: 1px solid var(--color-line, #e3e9ee);
  margin-top: 2rem;
}

.obs-takt-zeile {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-line, #e3e9ee);
}

.obs-takt-marke {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-still, #93a1ac);
  font-variant-numeric: tabular-nums;
}

.obs-takt-satz {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.32;
  font-weight: 600;
  color: var(--color-text, #16212b);
}

.obs-takt-zeile.ist-besitz .obs-takt-marke { color: var(--mk2-ton-tief, #0e5f8f); }
.obs-takt-zeile.ist-besitz .obs-takt-satz {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--mk2-ton-tief, #0e5f8f);
}

.obs-takt-fuss {
  margin: 1.35rem 0 0;
  max-width: 62ch;
  color: var(--color-text-muted, #677784);
}
.obs-takt-fuss b { color: var(--color-text, #16212b); }

/* ---- Etage 2: die Begruendung in derselben Reihenfolge -------------- */

.obs-etage2 { display: grid; gap: 1.4rem; margin-top: .5rem; }

.obs-etage2-punkt {
  border-left: 3px solid var(--mk2-ton-weich, #dcedf7);
  padding-left: 1.1rem;
  max-width: 74ch;
}
.obs-etage2-punkt h3 {
  margin: 0 0 .35rem;
  font-size: 1.06rem;
  line-height: 1.35;
}
.obs-etage2-punkt p { margin: 0; color: var(--color-text-muted, #677784); }

/* ---- Der Beleg vor den Preisen ------------------------------------- */

.obs-beleg { margin-top: 1.6rem; }

.obs-beleg-frage { margin: 2rem 0 .8rem; }
.obs-beleg-frage .obs-beleg-nr {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-still, #93a1ac);
  margin-bottom: .3rem;
}
.obs-beleg-frage h3 { margin: 0; font-size: 1.14rem; line-height: 1.35; }

.obs-beleg-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-line, #e3e9ee);
  border-radius: .5rem;
  overflow: hidden;
}

.obs-beleg-feld { padding: 1rem 1.1rem; background: var(--color-surface, #fff); }
.obs-beleg-feld + .obs-beleg-feld { border-left: 1px solid var(--color-line, #e3e9ee); }
.obs-beleg-feld.ist-hier { background: var(--color-neutral-200, #f4f7f9); }

.obs-beleg-kopf {
  margin: 0 0 .5rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-still, #93a1ac);
}
.obs-beleg-feld.ist-hier .obs-beleg-kopf { color: var(--mk2-ton-tief, #0e5f8f); }
.obs-beleg-feld p { margin: 0; }
.obs-beleg-feld p + p { margin-top: .5rem; }

/* ---- Das Zugestaendnis --------------------------------------------- */

.obs-zugestaendnis {
  border: 1px solid var(--mk2-ton-weich, #dcedf7);
  border-left: 3px solid var(--mk2-ton, #1f8fce);
  border-radius: .5rem;
  padding: 1.15rem 1.25rem;
  margin-top: 2.2rem;
  max-width: 78ch;
}
.obs-zugestaendnis .obs-beleg-kopf { color: var(--mk2-ton-tief, #0e5f8f); }
.obs-zugestaendnis p { margin: 0; }
.obs-zugestaendnis p + p { margin-top: .7rem; }

/* ---- Stand-Datum ---------------------------------------------------- */

.obs-stand {
  margin-top: 1.1rem;
  font-size: .8rem;
  color: var(--color-still, #93a1ac);
}

/* ---- Schmaler Schirm ------------------------------------------------ */

@media (max-width: 760px) {
  .obs-takt-zeile { grid-template-columns: 1fr; gap: .3rem; padding: .95rem 0; }
  .obs-takt-satz { font-size: 1.18rem; }
  .obs-takt-zeile.ist-besitz .obs-takt-satz { font-size: 1.5rem; }
  .obs-beleg-paar { grid-template-columns: 1fr; }
  .obs-beleg-feld + .obs-beleg-feld { border-left: 0; border-top: 1px solid var(--color-line, #e3e9ee); }
}

/* ---- Hero: Viererakt links, die vier Produkte rechts (15.09.2026) ---------
   Das Basis-CSS setzt den Hero als 7fr/5fr-Raster. Bis zum 08.09. standen rechts
   drei Kennzahlen; seit dem Viererakt war die Spalte leer und die Trennlinie
   stand im Nichts. Jetzt stehen dort die vier Produkte als Karten. */

.obs-hero:has(.obs-takt) .obs-hero-main { max-width: none; }

.obs-hero-seite {
  padding: 72px 44px 64px;
  background: var(--color-surface, #fff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.obs-hero-seite .obs-kicker { margin: 0 0 6px; }

.obs-hero-karte {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .9rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-line, #e3e9ee);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--color-neutral-200, #f4f7f9);
  transition: border-color .15s ease, transform .15s ease;
}
.obs-hero-karte:hover { border-color: var(--mk2-ton, #1f8fce); transform: translateX(2px); }
.obs-hero-karte-nr {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--mk2-ton, #1f8fce);
  padding-top: .2rem;
}
.obs-hero-karte b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: -.01em;
  margin-bottom: 3px;
  color: var(--color-text, #16212b);
}
.obs-hero-karte span { font-size: .95rem; line-height: 1.5; color: var(--color-text-muted, #677784); }

.obs-hero-mehr {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mk2-ton-tief, #0e5f8f);
  text-decoration: none;
}
.obs-hero-mehr:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .obs-hero:has(.obs-takt) { grid-template-columns: 1fr; }
  .obs-hero:has(.obs-takt) .obs-hero-main { border-right: 0; }
  .obs-hero-seite { padding: 28px 24px 36px; border-top: 1px solid var(--color-line, #e3e9ee); }
}
@media (prefers-reduced-motion: reduce) { .obs-hero-karte { transition: none; } .obs-hero-karte:hover { transform: none; } }