/* Gemeinsames Stylesheet für Impressum und Datenschutzerklärung.
   Gleiche Tokens wie die Startseite, auf Lesbarkeit reduziert. */

:root {
  --paper:     #ffffff;
  --paper-2:   #f3f7fd;
  --paper-3:   #e7eefa;
  --line:      #d7e2f1;
  --line-soft: #eaf0f9;
  --ink:       #0a1832;
  --ink-2:     #3d5170;
  --ink-3:     #6b7f9c;
  --blue:      #1b5fff;
  --blue-deep: #0b3aa8;
  --blue-soft: #6fa8ff;
  --blue-wash: #e8f0ff;
  --sky:       #17b6d9;
  --sky-deep:  #0c7f99;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.72;
}

.wrap { width: min(760px, 100% - 40px); margin-inline: auto; }

.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__n {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.top a.back {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); text-decoration: none;
}
.top a.back:hover { color: var(--blue); }

main { padding-block: clamp(44px, 8vw, 84px) clamp(56px, 9vw, 100px); }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sky-deep); display: block; margin-bottom: 14px;
}

h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3rem); letter-spacing: -0.032em;
  line-height: 1.06; color: var(--ink); margin: 0 0 28px; text-wrap: balance;
}

h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.14rem, 2.3vw, 1.38rem); letter-spacing: -0.02em;
  color: var(--ink); margin: 46px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line);
}

h3 {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky-deep);
  margin: 26px 0 8px;
}

p, li { margin: 0 0 14px; }
ul { padding-left: 22px; margin: 0 0 18px; }
li::marker { color: var(--blue); }

strong { color: var(--ink); font-weight: 650; }

a { color: var(--blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--blue); }

:where(a, button, summary):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

address {
  font-style: normal;
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.9;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  padding: 20px 22px;
  margin: 0 0 20px;
}

.note {
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.8;
  color: var(--ink-2);
  border: 1px dashed var(--blue-soft);
  background: var(--blue-wash);
  padding: 16px 18px; margin: 26px 0;
}
.note b { color: var(--blue-deep); font-weight: 600; }

.foot {
  border-top: 1px solid var(--line); background: var(--paper-2);
  padding-block: 34px 44px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--ink-3);
}
.foot__in { display: flex; flex-wrap: wrap; gap: 16px 30px; justify-content: space-between; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--blue); }