/* 8 GRAMM – Übergangsseite "Bald online"
   Farben und Schrift wie die Hauptseite: Schwarz #1c1a1b, Stahlblau #708192, Schrift Oswald. */

@font-face {
  font-family: "Oswald";
  src: url("../schriften/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --schwarz: #1c1a1b;
  --schwarz-2: #262425;
  --schwarz-3: #302e2f;
  --stahl: #708192;
  --stahl-hell: #94a5b6;
  --knopf: #5f7083;
  --hell: #f5f5f7;
  --grau-hell: #a1a1a6;
  --weiss: #ffffff;
  --radius: 28px;
  --marke: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--schrift); font-size: 17px; line-height: 1.5; letter-spacing: -0.01em;
  color: var(--hell); background: var(--schwarz); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: var(--stahl-hell); text-decoration: none; }
a:hover { color: var(--weiss); }
:focus-visible { outline: 3px solid var(--stahl); outline-offset: 3px; border-radius: 6px; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--weiss); color: var(--schwarz); padding: 10px 16px; border-radius: 10px; }
.sprung:focus { top: 12px; }
.innen { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- Kopf ---------- */
.kopf { padding: 64px 0 40px; text-align: center; }
.logo { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 30px; box-shadow: 0 0 0 1px var(--schwarz-3); }
.ueberzeile { font-family: var(--marke); text-transform: uppercase; letter-spacing: .18em; font-size: 15px; font-weight: 500; color: var(--stahl-hell); margin: 0 0 12px; }
h1 {
  font-family: var(--marke); text-transform: uppercase; font-weight: 600; letter-spacing: .01em;
  font-size: clamp(46px, 8vw, 92px); line-height: .98; margin: 0; color: var(--weiss);
}
h1 .stahl { color: var(--stahl); }
.einleitung { font-size: clamp(18px, 2vw, 21px); line-height: 1.45; color: var(--grau-hell); max-width: 34em; margin: 20px auto 0; }

/* ---------- Inhalt ---------- */
main { flex: 1; }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 24px 22px 80px; }
.foto img { width: 100%; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.foto figcaption { margin-top: 12px; font-size: 14px; color: var(--grau-hell); text-align: center; }
figure { margin: 0; }

.infos h2 { font-family: var(--marke); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 500; color: var(--stahl-hell); margin: 0 0 8px; }
.block { padding: 22px 0; border-top: 1px solid var(--schwarz-3); }
.block:first-child { border-top: 0; padding-top: 0; }
.block p, address { margin: 0; font-style: normal; font-size: 19px; line-height: 1.5; color: var(--hell); }
.block .gross { font-family: var(--marke); font-size: 28px; font-weight: 500; letter-spacing: .02em; color: var(--weiss); }
.block .gross:hover { color: var(--stahl-hell); }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 20px; margin: 0; font-size: 18px; }
.zeiten dt { color: var(--grau-hell); }
.zeiten dd { margin: 0; }
.hinweis { font-size: 14px !important; color: var(--grau-hell) !important; margin-top: 8px !important; }

.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 980px;
  font-family: var(--marke); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; font-weight: 500;
  background: var(--knopf); color: var(--weiss); transition: background .2s, transform .2s;
}
.knopf:hover { background: var(--stahl); color: var(--weiss); transform: translateY(-1px); }
.knopf.rand { background: transparent; box-shadow: inset 0 0 0 1px var(--schwarz-3); color: var(--hell); }
.knopf.rand:hover { box-shadow: inset 0 0 0 1px var(--stahl); background: transparent; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--schwarz-3); padding: 26px 0 34px; font-size: 14px; color: var(--grau-hell); }
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.fuss p { margin: 0; }
.fuss ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.fuss a { color: var(--grau-hell); }
.fuss a:hover { color: var(--weiss); }

/* ---------- Rechtliches ---------- */
.recht { padding: 30px 0 80px; }
.recht h1 { font-size: clamp(40px, 6vw, 64px); text-align: left; margin-bottom: 12px; }
.recht h2 { font-family: var(--marke); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: 22px; color: var(--weiss); margin: 40px 0 12px; }
.recht p, .recht li { color: #d2d2d7; max-width: 46em; }
.recht dl { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 10px 24px; margin: 0; }
.recht dt { color: var(--grau-hell); }
.recht dd { margin: 0; color: var(--hell); }
.zurueck { display: inline-block; margin: 30px 0 10px; font-family: var(--marke); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.zurueck::before { content: "‹ "; }

@media (max-width: 820px) {
  .kopf { padding: 44px 0 28px; }
  .logo { width: 104px; height: 104px; margin-bottom: 24px; }
  .raster { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
  .foto { max-width: 480px; margin: 0 auto; width: 100%; }
  .recht dl { grid-template-columns: 1fr; gap: 2px; }
  .recht dd { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.recht h1.abstand { margin-top: 72px; }
.zeiten dd { white-space: nowrap; }
@media (max-width: 420px) { .zeiten { font-size: 16px; gap: 2px 14px; } }