/* Uebergangsseite digitalarchivieren.de
   Farben und Schrift stammen aus dem alten Auftritt:
   Hausfarbe #014a96, Akzentgruen #449d44, Roboto.

   Roboto wird NICHT von Google geladen. Ein Abruf von fonts.googleapis.com
   uebertraegt die IP des Besuchers in die USA und braucht eine Einwilligung,
   die diese Seite bewusst nicht hat. Wer Roboto lokal besitzt, sieht Roboto,
   alle anderen eine sehr aehnliche Systemschrift. */

:root {
  --marke: #014a96;
  --marke-hell: #e8eff7;
  --akzent: #449d44;
  --text: #2b2b2b;
  --muted: #666666;
  --line: #dfe4ea;
  --flaeche: #f5f5f5;
  --grund: #ffffff;
  --warnung-text: #7a4200;
  --warnung-flaeche: #fff5e6;
  --warnung-rand: #e8a33d;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
}

.huelle { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 1.25rem; }

/* Kopfzeile: weisser Grund, darunter das Markenband in Hausfarbe */
header.kopf { background: var(--grund); border-bottom: 3px solid var(--marke); }
header.kopf .huelle {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem;
}

.marke { display: inline-flex; align-items: center; text-decoration: none; }
/* Das Logo ist ein GIF ohne Transparenz. Der weisse Kasten bleibt deshalb in
   beiden Farbschemata, sonst steht es im Dunkelmodus in einem hellen Block. */
.marke img {
  display: block; height: 62px; width: auto;
  background: #fff; padding: 4px; border-radius: 3px;
}

nav.menue { margin-left: auto; }
nav.menue ul {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin: 0; padding: 0; list-style: none;
  font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.03em;
}
nav.menue a { color: var(--muted); text-decoration: none; }
nav.menue a:hover, nav.menue a:focus-visible { color: var(--marke); text-decoration: underline; }
nav.menue a[aria-current="page"] { color: var(--marke); font-weight: 600; }

main { padding: 2.5rem 0 3.5rem; }

h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.125rem); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0 0 1rem; color: var(--marke);
}
h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; color: var(--marke); }
h3 { font-size: 1.0625rem; margin: 1.5rem 0 0.375rem; }
p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.375rem; }
li { margin-bottom: 0.375rem; }

a { color: var(--marke); }
a:hover { text-decoration-thickness: 2px; }

/* Der Hinweis bleibt bewusst in Warnfarbe und nicht in Markenblau.
   In der Hausfarbe wuerde die Stoerungsmeldung wie Deko wirken. */
.hinweis {
  border: 1px solid var(--warnung-rand);
  border-left: 5px solid var(--warnung-rand);
  background: var(--warnung-flaeche);
  color: var(--warnung-text);
  padding: 1rem 1.125rem; border-radius: 3px; margin: 0 0 2rem;
}
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: 0.5rem; }
.hinweis strong { color: inherit; }

.kontaktblock {
  border: 1px solid var(--line); border-left: 5px solid var(--akzent);
  background: var(--flaeche);
  border-radius: 3px; padding: 1.25rem; margin: 0 0 1.5rem;
}
.kontaktblock p { margin: 0; }
.kontaktblock p + p { margin-top: 0.875rem; }
.kontaktblock strong {
  display: block; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); font-weight: 600;
}
.kontaktblock a { font-size: 1.1875rem; font-weight: 600; text-decoration: none; }
.kontaktblock a:hover { text-decoration: underline; }

.rechtstext { font-size: 1rem; }
.rechtstext h2 { font-size: 1.0625rem; }

footer.fuss {
  border-top: 3px solid var(--marke); background: var(--flaeche);
  padding: 1.5rem 0; font-size: 0.9375rem; color: var(--muted);
}
footer.fuss ul { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
footer.fuss .zeile { margin: 0 0 0.75rem; }

.zentriert { text-align: center; padding: 3.5rem 0; }
.zentriert h1 { margin-bottom: 0.75rem; }

@media (prefers-color-scheme: dark) {
  :root {
    --marke: #7fb3e0;
    --marke-hell: #16283a;
    --akzent: #6cc46c;
    --text: #e7ecf1;
    --muted: #9aa8b5;
    --line: #2c3742;
    --flaeche: #161c22;
    --grund: #0f1419;
    --warnung-text: #f0c07a;
    --warnung-flaeche: #2a2115;
    --warnung-rand: #8a6520;
  }
  header.kopf { background: var(--flaeche); }
}