/* Gemeinsames Stylesheet für Visitenkarte, Impressum und Datenschutz, identisch
   in beiden Varianten. Die Farben stehen ausschließlich in der theme.css, die
   danach geladen wird: hell unter /sw, invertiert unter /sw2.
   Keine Webfonts von extern: bewusst der Monospace-Stack des Systems, damit die
   Seite ohne CDN-Aufruf auskommt (DSGVO) und trotzdem den Schreibmaschinen-
   Charakter der gedruckten Karte trifft.
   Kein prefers-color-scheme: welche Farbwelt gilt, entscheidet die Variante,
   nicht die Systemeinstellung des Besuchers. */
:root {
  /* Fallback, falls die theme.css einmal fehlt. Die echten Werte kommen von dort. */
  --bg:       #ffffff;
  --ink:      #14140f;
  --ink-soft: #8a8880;   /* nur für Fußzeile und Kleingedrucktes */
  color-scheme: light;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "DejaVu Sans Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;   /* auf dem Handy ohne die Browserleisten zu zaehlen */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  padding: 6vmin 5vw;
}

/* Keine abgesetzte Fläche: der Textblock steht direkt auf dem weißen Papier,
   mittig auf der Seite, aber in sich linksbündig wie auf der Karte.
   `margin: auto` zentriert ihn im Raum, der nach dem Footer übrig bleibt. */
.card {
  width: min(30rem, 100%);
  margin: auto;
  text-align: left;
  animation: rise .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* Der Name bleibt auf schmalen Displays zweizeilig lesbar, ohne zu brechen. */
  word-spacing: .1em;
}

.roles {
  list-style: none;
  margin: clamp(1.8rem, 5vw, 2.6rem) 0 0;
  padding: 0;
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
  line-height: 2;
}

/* Statt einer Trennlinie trennt nur der Abstand, wie auf der Karte. */
.contact {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: clamp(2.2rem, 6vw, 3.2rem);
  font-size: clamp(.9rem, 3.4vw, 1.05rem);
}
.contact a {
  align-self: flex-start;
  /* Telefon/Mail bleiben auf dem Handy als ganze Zeile antippbar. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
a:hover,
a:focus-visible { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

/* Fußzeile: echter Seitenfuß, unten am Rand statt direkt unter der Karte.
   Sie steht auf derselben linken Kante wie der Textblock, damit die Seite eine
   durchgehende Fluchtlinie behält. So leise wie möglich, ohne unsichtbar zu
   werden: der Grauton bleibt auf Weiß über der AA-Schwelle. */
.site-footer {
  width: min(30rem, 100%);
  margin: 0 auto;
  padding-top: clamp(4rem, 14vh, 9rem);
  display: flex;
  gap: 1.6rem;
  font-size: .8rem;
  color: var(--ink-soft);
}
/* Auf den Textseiten (Impressum, Datenschutz) folgt die Fußzeile der breiteren
   Spalte, sonst stünde sie unter dem Text eingerückt. */
.page-body .site-footer { width: min(38rem, 100%); }

/* ── Unterseiten (Impressum, Datenschutz) ────────────────────────────────── */
.page { width: min(38rem, 100%); }
.page h1 {
  font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  margin-bottom: 2.5rem;
}
.page h2 {
  font-size: .95rem;
  font-weight: 400;
  margin: 2.4rem 0 .6rem;
  color: var(--ink-soft);
}
.page p,
.page address {
  margin: 0 0 .9rem;
  font-size: .9rem;
  font-style: normal;
  line-height: 1.75;
}
.page ul { margin: 0 0 .9rem; padding-left: 1.2rem; font-size: .9rem; line-height: 1.75; }
.page li { margin-bottom: .3rem; }


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