/* Bewusst ohne externe Ressourcen (keine Google Fonts, kein CDN),
   damit keine Daten an Dritte übertragen werden (DSGVO). */

:root {
  --text: #f2f4f8;
  --muted: #c3cad6;
  --panel: rgba(12, 16, 24, 0.72);
  --border: rgba(255, 255, 255, 0.14);
  --fallback-1: #1c2433;
  --fallback-2: #2c3547;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--text);
  /* Hintergrundbild: verkleinerte Kopie von construction.jpg (1920 px breit).
     Fehlt sie, bleibt der Farbverlauf sichtbar. */
  background-color: var(--fallback-1);
  background-image:
    url("construction-1920.jpg"),
    linear-gradient(160deg, var(--fallback-1), var(--fallback-2));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: #fff; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* Startseite: Banner "Under Construction" – dezent, in der Favicon-Farbe */
.banner {
  position: fixed;
  /* Mitte des Banners auf der Grenze zum unteren Bilddrittel */
  top: 66.667vh;
  top: 66.667dvh;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0;
  padding: 1.2rem 1rem;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 0.9rem + 2vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #94172e;
  background: rgba(255, 255, 255, 0.82);
  border-top: 1px solid rgba(148, 23, 46, 0.55);
  border-bottom: 1px solid rgba(148, 23, 46, 0.55);
  /* Weinroter Lichtschein – ein dunkler Schatten wäre auf dem dunklen Boden kaum sichtbar.
     Etwas heller als #94172e, damit er auf dunklem Grund sichtbar leuchtet. */
  box-shadow:
    0 0 14px 0 rgba(196, 38, 68, 0.36),
    0 0 44px 2px rgba(148, 23, 46, 0.26);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Startseite: Name und E-Mail unten links */
.corner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: calc(100vw - 2rem);
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.corner .name {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
}
.corner .mail { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.corner .legal-links {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.corner .legal-links a { color: var(--muted); }
.corner .legal-links a + a { margin-left: 1rem; }

/* Rechtstexte (Impressum, Datenschutz) */
.legal-page {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
}
.legal {
  width: 100%;
  max-width: 760px;
  padding: clamp(1.5rem, 5vw, 2.75rem);
  background: rgba(12, 16, 24, 0.88);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.legal h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); line-height: 1.2; }
.legal h2 { margin: 2rem 0 0.5rem; font-size: 1.2rem; }
.legal h3 { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal ul { padding-left: 1.25rem; }
.back { display: inline-block; margin-bottom: 1.5rem; font-size: 0.95rem; }