/* ===================================================================
   unkodiert e.U. — Coming-Soon-Seite

   FARBE: nur Schwarz und Weiss. Das ist keine Sparmassnahme, sondern
   die Marke — die Wortmarke ist reines #080808 mit Alpha, sonst gibt
   es nichts. Kein Akzentton, kein Verlauf. Die Hierarchie traegt
   Groesse, Grau und Weissraum.

   Gerechnete Kontraste (Bauanleitung 5):
     Tinte auf Papier            17,17:1
     Tinte auf Weiss             18,88:1
     gedaempfter Text auf Papier  6,37:1
     gedaempfter Text auf Weiss   7,00:1
     Weiss auf Tinte (Knopf)     18,88:1
     Weiss auf Knopf im Ueberfahren 12,63:1
   Alle deutlich ueber 4,5:1.

   Schrift: Space Grotesk fuer Ueberschriften, Work Sans fuer Text.
   Begruendung nach Bauanleitung 6, Fall 1 — die Marke gibt sie vor:
   das Logo ist eine geometrische Kleinbuchstaben-Wortmarke, deren
   einziger Schmuck ein Doppelpunkt anstelle des i ist. Der Doppelpunkt
   ist ohne Farbe das einzige verbliebene Zeichen der Marke und steht
   deshalb in Tinte, waehrend die Beschriftung daneben grau bleibt.

   Die Seite hat keine Bewegung und kein Skript. Eine Seite, die sagt
   "wir bauen gerade", muss nichts vorfuehren.
   =================================================================== */

:root {
  --tinte: #111111;
  --tinte-hover: #333333;
  --papier: #f4f4f4;
  --weiss: #ffffff;
  --gedaempft: #595959;
  --linie: #e0e0e0;

  /* Radien als System: Knoepfe klein, Flaechen groesser. */
  --r-knopf: 8px;

  --spalte: max(20px, calc((100% - 1080px) / 2));
}

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.innen { padding-inline: var(--spalte); }

/* ===================== Kopf ===================== */

.kopf {
  border-bottom: 1px solid var(--linie);
  padding-block: 18px;
}
.kopf-innen {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.kopf-logo { width: 148px; }

.kopf-ort {
  margin-left: auto;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.kopf-ort i, .marke i {
  font-style: normal;
  color: var(--tinte);
  padding-inline: 3px;
}

/* ===================== Aufhaenger ===================== */

.held {
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 11vw, 128px);
  /* Kopf und Fuss abgezogen, damit der Block auf grossen Schirmen
     mittig steht statt oben zu kleben. */
  min-height: min(78vh, 720px);
}

.marke {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(34px, 6.4vw, 62px);
  max-width: 17ch;
}
h1 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.14em;
}

.lead {
  margin-top: 22px;
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--gedaempft);
  max-width: 56ch;
}

.tat {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  background: var(--tinte);
  color: var(--weiss);
  border-radius: var(--r-knopf);
  text-decoration: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: background 0.18s ease;
}
.knopf:hover { background: var(--tinte-hover); }

.leise {
  font-size: 16px;
  color: var(--gedaempft);
  text-underline-offset: 3px;
  text-decoration-color: var(--linie);
}
.leise:hover { color: var(--tinte); text-decoration-color: var(--tinte); }

.hinweis {
  margin-top: 30px;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 56ch;
}
.hinweis a { color: var(--tinte); text-underline-offset: 3px; }
.hinweis a:hover { color: var(--gedaempft); }

/* ===================== Impressum ===================== */

.recht {
  border-top: 1px solid var(--linie);
  background: var(--weiss);
  padding-block: clamp(48px, 7vw, 88px);
}

.recht-kopf { margin-bottom: 40px; }
.recht-kopf h2 { font-size: clamp(25px, 3.4vw, 34px); }
.recht-kopf p {
  margin-top: 10px;
  font-size: 15px;
  color: var(--gedaempft);
  max-width: 60ch;
}

.recht-raster { display: grid; gap: 36px; }

.block h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tinte);
  margin-bottom: 14px;
}
.block h3 + p + h3 { margin-top: 26px; }

.block p {
  font-size: 15px;
  color: var(--gedaempft);
}

/* Am Telefon stehen Bezeichnung und Wert untereinander. Zweispaltig
   bleiben rund 170px fuer den Wert, und daran zerbricht schon
   "Bezirkshauptmannschaft" — das Wort laeuft aus der Seite heraus. */
.block dl { margin: 0; }
.block dl > div {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-bottom: 1px solid var(--linie);
  font-size: 15px;
}
.block dt { color: var(--gedaempft); }
.block dd { margin: 0; overflow-wrap: anywhere; }
.block a { color: var(--tinte); text-underline-offset: 3px; }
.block a:hover { color: var(--gedaempft); }

/* ===================== Fuss ===================== */

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 26px;
}
.fuss-innen {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--gedaempft);
}

/* ===================== Ab 720px ===================== */

@media (min-width: 720px) {
  .recht-raster { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }

  .block dl > div {
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 10px 16px;
    padding-block: 9px;
  }

  .fuss-innen {
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    gap: 24px;
  }
}