/* Unterseiten: Impressum, Datenschutz, Barrierefreiheit */
:root {
  --bg: #ffffff;
  --ink: #161616;
  --muted: #6b6a66;
  --line: #d9d7d1;
  --todo: #fff1b8;
  --select: #e3dfd5; /* Textmarkierung: warmes Grau statt Browser-Blau */
  --sans: "Geist", system-ui, sans-serif;
  --wrap: 77.5rem;
  --gutter: clamp(1rem, 5vw, 4rem);
  /* Gleicher Container wie auf der Startseite: max. 77.5rem, zentriert, mindestens Gutter */
  --inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}
/* Ab 1440px wächst die Seite proportional mit, wie auf der Startseite */
html { font-size: clamp(100%, 0.536vw + 51.8%, 137.5%); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: inherit; }

::selection { background: var(--select); }

/* Fokus: eckiger Strich mit Abstand, wie die Linien im Logo – nur bei Tastaturbedienung */
:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: 0.25rem; }

/* Scrollbar: Haarlinie als Schiene, feiner Strich als Griff, eckige Enden wie im Logo */
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--bg); }
::-webkit-scrollbar-track { background: linear-gradient(90deg, transparent 4px, var(--line) 4px 5px, transparent 5px); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, transparent 4px, var(--ink) 4px 6px, transparent 6px); }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: linear-gradient(90deg, transparent 3px, var(--ink) 3px 7px, transparent 7px); }
::-webkit-scrollbar-corner { background: var(--bg); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
}

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem) var(--inline) 0; }
.home { display: inline-flex; align-items: baseline; /* Schrift-Grundlinie auf Unterkante Logo */ gap: 0.875rem; text-decoration: none; font-weight: 500; }
.home svg { width: 2.5rem; height: auto; }
.home:hover span { text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }

/* Sprachschalter: aktive Sprache unterstrichen, die andere grau */
.lang { display: flex; gap: 0.25rem; margin-right: -0.5rem; font-size: 0.875rem; font-weight: 500; letter-spacing: .02em; }
.lang a { padding: 0.5rem; color: var(--muted); text-decoration: none; transition: color .2s; }
.lang a:hover, .lang a[aria-current] { color: var(--ink); }
.lang a[aria-current] { text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }

main { flex: 1; padding: clamp(2.5rem, 6vw, 5rem) var(--inline) clamp(3.5rem, 8vw, 7rem); }
.text { max-width: 68ch; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; margin: 2.5rem 0 0.625rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
p, ul, dl { margin-bottom: 0.875rem; color: #3a3936; }
ul { padding-left: 1.2em; }
li { margin-bottom: 0.25rem; }
main a { text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }
dl { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 0.375rem 1.5rem; }
dt { color: var(--muted); }
.stand { margin-top: 3rem; font-size: 0.875rem; color: var(--muted); }

/* Noch vom Kunden zu liefern */
.todo { background: var(--todo); padding: 0 0.25rem; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted);
}
footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
footer a { text-decoration: none; }
footer a:hover, footer a[aria-current] { color: var(--ink); }

@media (max-width: 600px) {
  dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  dd { margin-bottom: 0.625rem; }
}