/* Gemeinsame Gestaltung fuer Impressum und Datenschutzerklaerung.

   Kopf- und Fussbereich spiegeln die Hauptseite: helle Kopfleiste mit dem
   Wortmarken-Lockup, dunkler Fussbereich mit dem vollstaendigen Claim.

   Bewusst ohne Google Fonts: Die Seiten sollen keine Verbindung zu Dritten
   aufbauen, schon gar nicht die Datenschutzerklaerung selbst. Deshalb eine
   Systemschrift statt Archivo/Manrope — die Marke wirkt dadurch minimal
   anders als auf der Hauptseite, das ist der bewusste Preis. */
:root {
  --petrol-900: #0B161C;
  --petrol-800: #101D24;
  --petrol-700: #14262E;
  --petrol-500: #20404E;
  --petrol-300: #798C95;
  --coral-500: #EC6F53;
  --coral-600: #C35E48;
  --paper: #FBFBFC;
  --line: rgba(11, 22, 28, 0.10);
  --schrift: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--petrol-700);
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Wortmarken-Lockup ───────────────────────────────────────────────── */
.marke { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }

.wortmarke {
  display: block;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.wortmarke em { font-style: normal; color: var(--coral-500); }

.unterzeile {
  display: block;
  margin-top: 5px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.128em;
  line-height: 1.2;
  white-space: nowrap;
}

.strich { flex: none; width: 2px; min-height: 42px; background: var(--coral-500); border-radius: 2px; }

.claim {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  white-space: nowrap;
}
.claim span:last-child { color: var(--coral-500); }

/* ── Kopfbereich ─────────────────────────────────────────────────────── */
.kopf {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.kopf-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.kopf .wortmarke { color: var(--petrol-900); }
.kopf .unterzeile { color: var(--petrol-500); }
.kopf .claim { color: var(--petrol-700); }
.kopf .claim span:last-child { color: var(--coral-600); }

.zurueck {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border: 1px solid var(--petrol-500);
  border-radius: 6px;
  color: var(--petrol-800);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.zurueck:hover { background: var(--petrol-800); border-color: var(--petrol-800); color: #fff; }

/* Unter 1150px konkurriert der Claim mit der Schaltflaeche um die Breite —
   dieselbe Schwelle wie auf der Hauptseite. */
@media (max-width: 1150px) {
  .kopf .strich, .kopf .claim { display: none; }
}
@media (max-width: 620px) {
  .kopf .wortmarke { font-size: 1.25rem; }
  .kopf .unterzeile { font-size: 0.4375rem; letter-spacing: 0.1em; }
  .zurueck { padding: 9px 14px; font-size: 0.8125rem; }
}

/* ── Textkoerper ─────────────────────────────────────────────────────── */
main { max-width: 860px; margin: 0 auto; padding: 56px 24px 80px; }

h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--petrol-900);
  margin-bottom: 8px;
}
.untertitel {
  color: var(--petrol-300);
  font-size: 1.0625rem;
  margin-bottom: 44px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--petrol-900);
  margin: 48px 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--coral-500);
}
h3 { font-size: 1.125rem; color: var(--petrol-800); margin: 30px 0 8px; }

p { margin-bottom: 14px; }
p + h3 { margin-top: 30px; }
ul { margin: 0 0 16px 22px; }
li { margin-bottom: 6px; }

main a { color: var(--coral-600); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { color: var(--coral-500); }

.adresse {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.adresse strong { color: var(--petrol-900); }
.adresse p:last-child { margin-bottom: 0; }

/* ── Fussbereich ─────────────────────────────────────────────────────── */
.fuss { background: var(--petrol-900); color: #9BA8AF; font-size: 0.875rem; }
.fuss-innen {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px clamp(1.25rem, 4vw, 3rem);
}

.fuss .marke { gap: clamp(20px, 4vw, 44px); }
.fuss .wortmarke { color: #fff; font-size: clamp(1.75rem, 4.4vw, 2.375rem); }
.fuss .unterzeile { margin-top: 9px; font-size: clamp(0.5625rem, 1.15vw, 0.6875rem); letter-spacing: 0.14em; color: #9BB0BA; }
.fuss .strich { width: 3px; min-height: 62px; }
.fuss .claim { gap: 5px; font-size: clamp(0.8125rem, 1.5vw, 0.9375rem); letter-spacing: 0.09em; line-height: 1.25; color: #fff; }

.fuss-lockup {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fuss-zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: var(--coral-500); text-decoration: underline; }
.fuss-links { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 620px) {
  main { padding: 36px 20px 60px; }
  h2 { margin-top: 36px; }
  .fuss .marke { flex-wrap: wrap; gap: 18px; }
  .fuss .strich { width: 100%; height: 3px; min-height: 0; }
}