:root {
  --weiss: #ffffff;
  --grau: #7a7a7a;
  --grau-dunkel: #4a4a4a;
  --grau-hell: #b5b5b5;
  --linie: #e6e6e6;
}

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

html {
  background: var(--weiss);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--grau-dunkel);
  background: var(--weiss);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

::selection { background: var(--grau); color: var(--weiss); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--grau); }
a:focus-visible, a:focus-visible * {
  outline: 2px solid var(--grau);
  outline-offset: 4px;
  border-radius: 2px;
}

main { flex: 1; }

/* Signature: Wappen + Schriftzug */
.hero {
  padding: clamp(3.5rem, 12vh, 7rem) 1.5rem clamp(2rem, 6vh, 4rem);
}

.hero img {
  display: block;
  margin: 0 auto;
  height: auto;
  width: clamp(150px, 38vw, 230px);
}

.wortmarke {
  display: block;
  margin: clamp(1.75rem, 5vh, 2.75rem) auto 0;
  color: var(--grau);
  font-weight: 400;
  font-size: clamp(1.05rem, 1rem + 1.9vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-indent: 0.32em; /* gleicht das Tracking hinter dem letzten Buchstaben aus */
}

.wortmarke .von {
  font-size: 0.62em;
  letter-spacing: 0.32em;
  vertical-align: 0.08em;
  margin: 0 0.1em;
}

/* Inhalt */
.inhalt {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1.5rem clamp(3rem, 8vh, 5rem);
}

.inhalt p { margin: 0 0 2.5rem; }

.platzhalter { color: var(--grau-hell); }

.kontakt {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.kontakt span {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.15rem;
}

.kontakt a { color: var(--grau-dunkel); }
.kontakt a:hover { color: var(--grau); }

h1.seitentitel {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Footer */
footer {
  padding: 2rem 1.5rem 2.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--grau-hell);
}

footer a { color: var(--grau); }
footer a:hover { color: var(--grau-dunkel); }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1); }
}

.nowrap { white-space: nowrap; }

@media (max-width: 480px) {
  .wortmarke .von {
    display: block;
    margin: 0.25em 0;
  }
  footer .trenner { display: none; }
  footer a { display: block; margin-top: 0.35rem; }
}