/* reumann media: Platzhalter. Keine externen Schriften oder Dienste (DSGVO). */

:root {
  --bg: #f5f3ee;
  --fg: #141418;
  --muted: #5c5c66;
  --line: rgb(20 20 24 / 0.12);
  --accent: #d9481f;
  --accent-light: #ee8a5e;
  --accent-soft: rgb(217 72 31 / 0.14);
  --glow-1: rgb(228 87 46 / 0.28);
  --glow-2: rgb(242 165 65 / 0.26);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e11;
    --fg: #f2f0ea;
    --muted: #a1a1aa;
    --line: rgb(242 240 234 / 0.14);
    --accent: #ff6a3d;
    --accent-light: #ffa07f;
    --accent-soft: rgb(255 106 61 / 0.18);
    --glow-1: rgb(255 106 61 / 0.20);
    --glow-2: rgb(242 165 65 / 0.12);
    color-scheme: dark;
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

/* Weicher, langsam wandernder Farbverlauf im Hintergrund */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  background:
    radial-gradient(40vmax 40vmax at 78% 24%, var(--glow-1), transparent 60%),
    radial-gradient(36vmax 36vmax at 14% 86%, var(--glow-2), transparent 60%);
  animation: drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  to { transform: translate3d(-4vmax, 3vmax, 0) rotate(6deg); }
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Wortmarke */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--accent);
}
.brand span { font-weight: 400; color: var(--muted); margin-left: -0.3em; }

/* Startseite */
main { align-self: center; max-width: 48rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.75rem;
  padding: 0.35em 0.95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(from var(--bg) r g b / 0.6);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  100% { box-shadow: 0 0 0 0.7em transparent; }
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
h1 em { font-style: normal; color: var(--accent); }

.lead {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted);
}

/* Fortschrittsbalken im Baustellen-Look */
.progress {
  margin-top: 2.75rem;
  max-width: 26rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  overflow: hidden;
}
.progress span {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg,
    var(--accent) 0 10px, var(--accent-light) 10px 20px);
  background-size: 28.2843px 100%;
  animation: stripes 1.2s linear infinite;
}

@keyframes stripes {
  to { background-position: 28.2843px 0; }
}

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Rechtstexte (Impressum) */
.legal { align-self: start; max-width: 40rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; }
.legal h2 { margin: 2rem 0 0.5rem; font-size: 1.05rem; }
.legal p { margin: 0; }
.legal .back { margin-top: 3rem; }
.ph { background: var(--accent-soft); border-radius: 3px; padding: 0 0.2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}