/* ============================================================
   Gemeinsames Layout fuer die Rechtstextseiten.

   Uebernimmt die Farben, Radien und die Systemschrift aus der
   Startseite, damit Impressum und Co. nicht wie ein Fremdkoerper
   wirken. Wer dort etwas aendert, sollte es hier nachziehen.
   ============================================================ */

:root {
  --bg:          #0b0b0c;
  --surface:     #141417;
  --surface-2:   #1b1b1f;
  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);

  --text:        #f0eeea;
  --text-dim:    #a8a49d;

  --accent:      #d4652a;
  --accent-hi:   #e8783c;
  --accent-ink:  #0b0b0c;
  --accent-hell: #f3b189;   /* Akzent als Schrift auf Dunkel, ~9:1 */

  --r-pill:      999px;
  --r-flaeche:   14px;

  --max:         1240px;
  --ease:        cubic-bezier(.16, 1, .3, 1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          "Noto Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kopfzeile ---------------------------------------- */

.kopf {
  height: 68px; display: flex; align-items: center;
  background: rgba(11, 11, 12, .92);
  border-bottom: 1px solid var(--line);
}
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 19px;
}
.marke svg { flex: none; }

.zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  text-decoration: none; font-size: 15px; color: var(--text-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.zurueck:hover { border-color: var(--text-dim); color: var(--text); }

/* ---------- Dokument ----------------------------------------- */

main { flex: 1; padding-block: 56px 88px; }
.doc { max-width: 780px; }

.augenbraue {
  font-size: 13px; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-hell); margin: 0 0 12px;
}

.doc > h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.05; letter-spacing: -.035em; font-weight: 750;
}
.stand { font-size: 14px; color: var(--text-dim); margin: 0 0 40px; }

/* Entwurfshinweis. Faellt bewusst auf und muss vor dem Livegang
   samt zugehoerigem Abschnitt entfernt werden. */
.entwurf {
  background: var(--accent); color: var(--accent-ink);
  padding: 22px 26px; margin: 0 0 40px;
  border-radius: var(--r-flaeche);
}
.entwurf b { display: block; font-size: 16px; margin-bottom: 8px; }
.entwurf p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- Abschnitte --------------------------------------- */

section.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-flaeche);
  padding: 28px 30px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { section.block { padding: 22px 20px; } }

section.block > h2 {
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 21px; letter-spacing: -.02em; font-weight: 700;
}
section.block h3 {
  margin: 24px 0 10px;
  font-size: 16px; font-weight: 650;
}
section.block p,
section.block li { font-size: 15.5px; line-height: 1.7; color: var(--text-dim); }
section.block p { margin: 0 0 14px; }
section.block p:last-child { margin-bottom: 0; }
section.block ul { margin: 0 0 14px; padding-left: 22px; }
section.block li { margin-bottom: 8px; }
section.block b,
section.block strong { color: var(--text); font-weight: 650; }
section.block a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
section.block a:hover { color: var(--accent-hi); }

/* Auszufuellende Stellen. Sollen im Text sofort ins Auge springen,
   damit vor dem Livegang keine uebersehen wird. */
.todo {
  display: inline-block;
  background: rgba(212, 101, 42, .14);
  color: var(--accent-hell);
  border: 1px dashed var(--accent);
  padding: 1px 8px; border-radius: 6px;
  font-size: 14px; font-weight: 650;
}

/* Redaktionelle Anmerkung an dich, kein Bestandteil des Rechtstexts.
   Vor dem Livegang entfernen. */
.note {
  border-left: 3px solid var(--line-strong);
  padding: 2px 0 2px 16px; margin: 0 0 14px;
  font-size: 14.5px; line-height: 1.65; color: var(--text-dim);
}
.note b { color: var(--text); }

dl.meta { margin: 0; }
dl.meta dt {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 650; margin-top: 18px;
}
dl.meta dt:first-child { margin-top: 0; }
dl.meta dd { margin: 6px 0 0; font-size: 16px; color: var(--text); }

/* ---------- Fusszeile ---------------------------------------- */

.fuss { border-top: 1px solid var(--line); padding-block: 32px; font-size: 15px; }
.fuss-reihe {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between;
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14px; }
.fuss-links a { color: var(--text-dim); text-decoration: none; transition: color .2s var(--ease); }
.fuss-links a:hover { color: var(--text); }
.fuss-links a[aria-current] { color: var(--text); font-weight: 650; }