/* global-essen.de — schlichte statische Seite, keine externen Quellen */

:root {
  --blau: #005b8f;
  --text: #1f2328;
  --text-leise: #5f6368;
  --linie: #e3e5e8;
  --flaeche: #ffffff;
  --video-grund: #0d1e2e;
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

a { color: var(--blau); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* Kopf mit Logo */
.kopf { padding: 20px 16px 8px; text-align: center; }
.kopf a { display: inline-block; }
.kopf img { display: block; width: 112px; height: auto; }

main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 8px 16px 24px;
}

h1 {
  color: var(--blau);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0.25rem 0 0.2rem;
}

/* Videoseite: Video passt ganz in den Bildschirm, auch am Handy */
.video-seite { text-align: center; }
.unterzeile { margin: 0 0 16px; color: var(--text-leise); }

.video-rahmen {
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  width: min(100%, calc((100vh - 230px) * 9 / 16));
  width: min(100%, calc((100svh - 230px) * 9 / 16));
  min-width: min(100%, 240px);
  aspect-ratio: 9 / 16;
  background: var(--video-grund);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 30, 46, 0.12), 0 8px 24px rgba(13, 30, 46, 0.12);
}

.video-rahmen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--video-grund);
}

/* Textseiten: Impressum, Datenschutz */
.text { max-width: 40rem; }
.text h1 { margin-bottom: 1.25rem; }
.text h2 { font-size: 1.05rem; margin: 1.75rem 0 0.4rem; }
.text p, .text ul { margin: 0 0 0.75rem; }
.text ul { padding-left: 1.25rem; }
.text .stand { margin-top: 2rem; color: var(--text-leise); font-size: 0.875rem; }

/* Fuß */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-leise);
}
.fuss nav a { margin: 0 0.5rem; }
.fuss p { margin: 0.5rem 0 0; }