/* orbit.gmbh – drei Seiten, ein Stil.

   Die Seite ist bewusst leer (Marcs Vorgabe vom 17.09.2026): Sie trägt den
   Firmennamen, nennt die drei Produkte und hat Impressum und Datenschutz.
   Sie dient der Anmeldung bei Meta und dem E-Mail-Verkehr, nicht dem Vertrieb.
   Farben und Schrift wie auf agenturorbit.de (assets/site.css dort). */

:root {
  --grund:     #f3f5f6;
  --flaeche:   #fff;
  --rand:      #e3e8ea;
  --tinte:     #22282c;
  --gedaempft: #6b767c;
  --blass:     #a2abb0;
  --ak-tief:   #5c7482;
  --ak-hauch:  rgba(118,145,160,.12);
  --leucht:    #00a2ef;
  --leucht-tief: #0384c3;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--tinte);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

/* ---------- Startseite ---------- */

.start {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 64px 16px 32px;
}

.start-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.marke {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}

.start h1 {
  margin: 0;
  font-size: clamp(3rem, 12vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

/* Die Produkte: freistehende Zeilen, die Fläche erscheint erst unter dem Zeiger
   (Hausregel „Fläche statt Rahmen"). */
.produkte {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

.produkte a {
  display: block;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: background-color .18s ease;
}

.produkte a i {
  font-style: normal;
  color: var(--leucht-tief);
}

/* Schmal stehen die drei untereinander; zwei oben, eins unten sähe nach Zufall aus. */
@media (max-width: 480px) {
  .produkte { flex-direction: column; align-items: center; }
}

@media (hover: hover) {
  .produkte a:hover { background: var(--ak-hauch); }
}

/* ---------- Kopfleiste der Rechtsseiten ---------- */

.kopf {
  padding: 20px 16px;
}

.kopf-in {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kopf-marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.03em;
  text-decoration: none;
}

.kopf-marke img { width: 30px; height: 30px; }

.kopf-zurueck {
  font-size: .92rem;
  color: var(--gedaempft);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 10px;
}

@media (hover: hover) {
  .kopf-zurueck:hover { background: var(--ak-hauch); color: var(--tinte); }
}

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

.text {
  flex: 1;
  padding: 24px 16px 56px;
}

.text-in {
  max-width: 720px;
  margin: 0 auto;
}

.text h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.text h1 + p { color: var(--gedaempft); margin-top: 0; }

.text h2 {
  margin: 40px 0 10px;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.text h3 {
  margin: 24px 0 6px;
  font-size: 1rem;
}

.text p, .text ul { margin: 0 0 14px; }
.text ul { padding-left: 1.2em; }
.text li { margin-bottom: 4px; }

.text a { color: var(--leucht-tief); text-underline-offset: 2px; }

.block {
  background: var(--flaeche);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 14px;
}

.block b { display: block; }

.stand {
  margin-top: 40px !important;
  font-size: .88rem;
  color: var(--gedaempft);
}

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

.fuss {
  padding: 24px 16px 32px;
  font-size: .88rem;
  color: var(--gedaempft);
}

.fuss-in {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
}

.fuss a {
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
}

@media (hover: hover) {
  .fuss a:hover { background: var(--ak-hauch); color: var(--tinte); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}