/* Stylesheet der öffentlichen Seiten (Startseite, Datenschutz, Impressum). Reines CSS, ohne JavaScript und ohne externe Schriften.
   Farben wie in der App (web/src/stil.css). */
:root {
  --raum: #070b12;
  --flaeche: #0d1624;
  --flaeche-hoch: #13213a;
  --rand: #1f3553;
  --akzent: #2ee6ff;
  --akzent-dunkel: #0c8fa3;
  --text: #d9e6f5;
  --text-leise: #8fa4bf;
  --schrift: 'Rajdhani', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Animierter Hintergrund (Canvas, gezeichnet von /weltraum.js): fest hinter dem Inhalt, faengt keine Klicks ab */
.bg-huelle { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-huelle canvas { display: block; width: 100%; height: 100%; }

html { scroll-behavior: smooth; }
/* Der Leuchtschein des Logos ragt ueber den Rand des Inhalts hinaus; ohne das gaebe es eine waagerechte Bildlaufleiste (wie in der App: overflow: clip) */
body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, #0f2a4a 0%, transparent 60%), var(--raum);
  font-family: var(--schrift);
  font-size: 1.1rem;
  line-height: 1.6;
}

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

.huelle { width: min(1040px, 100% - 32px); margin: 0 auto; }

/* Kopfzeile */
.kopf { display: flex; align-items: center; gap: 0.75rem 1.5rem; padding: 1.1rem 0; }
.kopf-knoepfe { display: flex; align-items: center; gap: 0.6rem; }
.kopf-knopf { min-height: 40px; padding: 0.35rem 1.2rem; white-space: nowrap; }
.marke { display: flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1.15rem; }
/* Logo mit Leuchtschein: genau wie in der App (.logo-huelle in web/src/stil.css). Zwei weiche, ovale Schleier in Hellblau wabern langsam
   (verformen, drehen, atmen) um das Medaillon, beide in der Bildmitte verankert. Nur Transparenz und Drehung werden animiert. */
.logo-huelle { position: relative; display: inline-block; flex: none; }
.logo-huelle::before, .logo-huelle::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.logo-huelle::before {
  inset: -10%;
  background: radial-gradient(closest-side, rgba(46, 230, 255, 0) 68%, rgba(46, 230, 255, 0.2) 86%, rgba(46, 230, 255, 0) 100%);
  animation: logo-waber 7s ease-in-out infinite;
}
.logo-huelle::after {
  inset: -17%;
  background: radial-gradient(closest-side, rgba(61, 139, 255, 0) 62%, rgba(110, 175, 255, 0.13) 84%, rgba(61, 139, 255, 0) 100%);
  animation: logo-waber-gegenlaeufig 11s ease-in-out infinite;
}
@keyframes logo-waber {
  0%, 100% { transform: rotate(0deg) scale(0.97, 1.02); opacity: 0.55; }
  33% { transform: rotate(50deg) scale(1.06, 0.95); opacity: 0.95; }
  66% { transform: rotate(-40deg) scale(1.01, 1.05); opacity: 0.7; }
}
@keyframes logo-waber-gegenlaeufig {
  0%, 100% { transform: rotate(0deg) scale(1.04, 0.97); opacity: 0.5; }
  40% { transform: rotate(-60deg) scale(0.96, 1.06); opacity: 0.9; }
  70% { transform: rotate(35deg) scale(1.07, 0.98); opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) { .logo-huelle::before, .logo-huelle::after { animation: none; } }
.logo { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.marke .logo-huelle { width: 44px; height: 44px; }
.logo-gross { width: 220px; height: 220px; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-text small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3em; color: var(--akzent); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; }
.nav a { color: var(--text-leise); text-decoration: none; font-weight: 600; letter-spacing: 0.06em; }
.nav a:hover { color: #fff; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0.5rem 1.5rem;
  color: var(--raum); background: var(--akzent); border: 1px solid var(--akzent);
  border-radius: 4px; font: inherit; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.knopf:hover { color: var(--raum); box-shadow: 0 0 18px rgba(46, 230, 255, 0.55); }
.knopf-zweit { color: var(--akzent); background: transparent; border-color: var(--akzent-dunkel); }
.knopf-zweit:hover { color: #fff; background: rgba(46, 230, 255, 0.08); box-shadow: none; }

/* Hauptteil */
.hero { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: 2.5rem 0 2rem; }
.hero h1 { margin: 0 0 0.6rem; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: 0.04em; }
.hero h1 small { display: block; margin-top: 0.4rem; font-size: 0.42em; font-weight: 600; letter-spacing: 0.32em; color: var(--akzent); }
.hero p { margin: 0 0 1.2rem; color: var(--text-leise); max-width: 40rem; font-size: 1.2rem; }
.hero .aktionen { display: flex; flex-wrap: nowrap; gap: 0.75rem; }
.aktionen-zeile { display: flex; flex-wrap: nowrap; justify-content: center; gap: 1rem; margin: 3rem 0 2.2rem; } /* mittig, deutlich vom Text abgesetzt */
.aktionen-zeile + p { text-align: center; color: var(--text-leise); font-size: 0.98rem; }
.mitte { text-align: center; margin: 2.2rem 0 0.6rem; }
.hero .logo-gross { max-width: 100%; }

section { padding: 2.8rem 0 1.2rem; }
section p { margin: 0 0 1.2rem; }
h2 { margin: 0 0 1.4rem; font-size: 1.7rem; letter-spacing: 0.05em; }
h3 { margin: 0 0 0.3rem; font-size: 1.15rem; letter-spacing: 0.04em; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }
.karte { padding: 1.1rem 1.2rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 4px; }
.karte p { margin: 0; color: var(--text-leise); font-size: 1.02rem; }

.hinweis { padding: 1rem 1.2rem; background: var(--flaeche-hoch); border-left: 3px solid var(--akzent); border-radius: 0 4px 4px 0; }
.hinweis p { margin: 0 0 0.5rem; }
.hinweis p:last-child { margin-bottom: 0; }

ul.liste { padding-left: 1.2rem; }
ul.liste li { margin-bottom: 0.35rem; }

/* Textseiten (Datenschutz, Impressum) */
.text { max-width: 46rem; padding-bottom: 2rem; }
.text h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 1.5rem 0 1rem; }
.text h2 { font-size: 1.35rem; margin-top: 1.8rem; }
.text p, .text li { color: var(--text); }
.text .stand { color: var(--text-leise); font-size: 0.95rem; }

/* Fußzeile */
.fuss { margin-top: auto; padding: 1.4rem 0 1.8rem; border-top: 1px solid var(--rand); color: var(--text-leise); font-size: 0.95rem; }
.fuss p { margin: 0 0 0.6rem; max-width: 52rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero .logo-gross { width: 160px; height: 160px; order: -1; justify-self: center; } /* mittig ueber dem Text */
}
@media (max-width: 720px) {
  .hero .logo-gross { width: 140px; height: 140px; }
  body { font-size: 1.05rem; }
}

/* Knopfreihen bleiben auch auf schmalen Bildschirmen nebeneinander: Die Knoepfe schrumpfen, notfalls bricht der Text im Knopf um. */
.aktionen .knopf, .aktionen-zeile .knopf { flex: 0 1 auto; min-width: 0; text-align: center; }
@media (max-width: 720px) {
  .aktionen, .aktionen-zeile { gap: 0.6rem; }
  .aktionen .knopf, .aktionen-zeile .knopf { padding: 0.45rem 0.7rem; font-size: 0.92rem; letter-spacing: 0.05em; line-height: 1.25; }
}

/* Kopfzeile auf jeder Breite gleich: oben in einer Zeile der Name links und die beiden Knoepfe rechts, darunter das Menue mittig in einer
   eigenen Zeile. (Alles in einer Zeile haette nicht in die Seitenbreite gepasst und das Menue zerrissen.) */
.kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marke knoepfe" "menue menue";
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 0.9rem 0 0.7rem;
  border-bottom: 1px solid var(--rand);
}
.marke { grid-area: marke; min-width: 0; }
.kopf-knoepfe { grid-area: knoepfe; }
.kopf .nav { grid-area: menue; justify-content: center; gap: 0.3rem 1.4rem; }
/* Schmaler Bildschirm (bis 700px): Name oben, darunter die beiden Knoepfe gleich breit nebeneinander, dann das Menue.
   (Name und beide Knoepfe zusammen brauchen in einer Zeile gut 650px.) */
@media (max-width: 700px) {
  .kopf { grid-template-columns: 1fr; grid-template-areas: "marke" "knoepfe" "menue"; gap: 0.7rem; }
  .kopf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .kopf-knopf { justify-content: center; }
}
/* Handy (bis 720px): Schrift etwas kleiner, damit alles in die Breite passt */
@media (max-width: 720px) {
  .marke { gap: 0.55rem; font-size: 0.95rem; letter-spacing: 0.06em; }
  .marke .logo-huelle { width: 40px; height: 40px; }
  .marke-text small { font-size: 0.64rem; letter-spacing: 0.26em; }
  .kopf-knopf { min-height: 40px; padding: 0.3rem 0.9rem; font-size: 0.88rem; letter-spacing: 0.06em; }
  .kopf .nav { gap: 0.3rem 0.9rem; }
  .nav a { font-size: 0.9rem; letter-spacing: 0.02em; }
}
/* Sehr schmale Handys (bis 400px): Menue etwas kleiner, damit alle drei Punkte in einer Zeile bleiben */
@media (max-width: 400px) {
  .kopf .nav { gap: 0.3rem 0.7rem; }
  .nav a { font-size: 0.83rem; letter-spacing: 0; }
}