/* wichtelwerk – Firmenseite, Schwester von orbit.gmbh (assets/orbit.css dort).
   Grund ist reines Weiß, weil das Endlos-Video oben reinweiß gerechnet ist und
   ohne Kante in der Seite aufgehen muss. Akzent ist das Hausblau der Dashboards
   (#00a2ef, wie --leucht in agenturorbit/site.css und im Dashboard). */

:root {
  --grund:     #fff;
  --rand:      #e6e6ea;
  --tinte:     #22282c;
  --gedaempft: #6b767c;
  --ak:        #00a2ef;   /* das Hausblau des Dashboards („leucht“) */
  --ak-tief:   #0384c3;
  --ak-hauch:  rgba(0,162,239,.10);
  --messing:   #b08236;
  --messing-hauch: rgba(176,130,54,.12);
}

*, *::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(--ak-tief); outline-offset: 3px; border-radius: 6px; }

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

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

.start-in {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Das Logo ist das Video selbst. Der Schriftzug steckt im Bild, darum trägt
   die Überschrift den Namen nur für Suchmaschinen und Vorleser. */
.logo {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
}

.start h1 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Die Bereiche: freistehende Zeilen, Fläche erst unter dem Zeiger. */
.bereiche {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
}

.bereiche 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;
}

.bereiche a i { font-style: normal; color: var(--ak-tief); }
.bereiche .hotel i { color: var(--messing); }

@media (max-width: 620px) {
  .bereiche { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; }
}
@media (max-width: 480px) {
  .bereiche { display: flex; flex-direction: column; align-items: center; }
}

@media (hover: hover) {
  .bereiche a:hover { background: var(--ak-hauch); }
  .bereiche .hotel:hover { background: var(--messing-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: 44px; height: auto; }
.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(--ak-tief); text-underline-offset: 2px; }
.block { background: #f3f7f9; 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ß ---------- */

/* Der Fuß sitzt etwas über dem unteren Rand (Marc, 21.10.2026). */
.fuss { padding: 24px 16px 72px; 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; }
}