/* Gemeinsames Layout der Rechtstexte — Richtung „Hausbank" wie die
   Landingpage. Bewusst schlicht und gut lesbar: Diese Seiten müssen nicht
   verkaufen, sie müssen verständlich sein. */

@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }

:root {
  --void: #ffffff;
  --d1: #f2f4f2;
  --d2: #f6f8f6;
  --brd: #dce1dd;
  --txt: #111814;   /* 18.0:1 auf Weiss */
  --txt2: #3f4a44;  /*  9.2:1 */
  --txt3: #5e6862;  /*  5.8:1 */
  --mint: #1c3829;  /* Markengrün, 12.8:1 */
  --mint-bg: #eaf1ec;
  --mint-bd: #c7d6cb;
  --gold: #b8780e;
  --amber: #8f5500;
  --amber-bg: #fbf1df;
  --amber-bd: #ebd3a8;
  --schrift: 'Atkinson Hyperlegible', Verdana, 'Segoe UI', sans-serif;
}

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

body {
  font-family: var(--schrift);
  background: var(--void);
  color: var(--txt2);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #2b5140; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ─── Kopf: Band im Markengrün mit goldener Linie ──────── */
.r-nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 32px;
  background: var(--mint);
  border-bottom: 3px solid var(--gold);
}
.r-logo {
  font-family: var(--schrift); font-size: 17.3px; font-weight: 700;
  color: #eee9e0; text-decoration: none;
  display: flex; align-items: center; gap: 9px;
}
.r-logo:hover { color: #eee9e0; text-decoration: none; }
.r-logo-mark { width: 26px; height: 26px; display: block; flex-shrink: 0; }
/* Siehe Landingpage: Versalien, bündig zu den Kanten der Bildmarke. */
.logo-wort { display: inline-flex; flex-direction: column; gap: .1em; line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.logo-name { margin-top: -.15em; }
.logo-zusatz { font-size: .56em; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: -.009em; }
.r-nav-links { display: flex; gap: 20px; font-size: 15px; flex-wrap: wrap; }
.r-nav-links a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.r-nav-links a:hover { color: #ffffff; text-decoration: underline; }
.r-nav-links a.aktiv { color: #ffffff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ─── Inhalt ───────────────────────────────────────────── */
.r-wrap { max-width: 760px; margin: 0 auto; padding: 56px 32px 96px; }

.r-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mint); margin-bottom: 14px;
}
.r-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--gold); }

h1 {
  font-family: var(--schrift); font-weight: 700; font-size: 38px;
  line-height: 1.15; letter-spacing: -.4px; color: var(--txt);
  margin-bottom: 12px; text-wrap: balance;
}
.r-stand { font-size: 15px; color: var(--txt3); margin-bottom: 40px; }

h2 {
  font-family: var(--schrift); font-weight: 700; font-size: 23px;
  color: var(--txt); letter-spacing: -.2px;
  margin: 44px 0 14px; padding-top: 24px;
  border-top: 1px solid var(--brd);
}
h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-family: var(--schrift); font-weight: 700; font-size: 18px;
  color: var(--txt); margin: 26px 0 8px;
}

p { margin-bottom: 14px; }
strong { color: var(--txt); font-weight: 700; }

ul, ol { margin: 0 0 16px 22px; }
li { margin-bottom: 7px; }
li::marker { color: var(--txt3); }

/* ─── Tabelle ──────────────────────────────────────────── */
.r-tabelle {
  width: 100%; border-collapse: collapse;
  margin: 8px 0 20px; font-size: 15.5px;
}
.r-tabelle th, .r-tabelle td {
  border: 1px solid var(--brd); padding: 11px 13px;
  text-align: left; vertical-align: top;
}
.r-tabelle th {
  background: var(--d1); color: var(--txt); font-weight: 700;
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
}

/* ─── Hinweise ─────────────────────────────────────────── */
.r-box {
  border: 1px solid var(--mint-bd); background: var(--mint-bg);
  border-radius: 10px; padding: 16px 18px; margin: 20px 0;
  font-size: 16px; color: var(--txt2);
}
.r-box p:last-child { margin-bottom: 0; }

.r-warn {
  border: 1px solid var(--amber-bd); background: var(--amber-bg);
  border-radius: 10px; padding: 16px 18px; margin: 20px 0;
  font-size: 16px; color: var(--txt2);
}
.r-warn strong { color: var(--amber); }
.r-warn p:last-child { margin-bottom: 0; }

/* Angaben, die vor dem Go-live gesetzt werden müssen. Absichtlich
   aufdringlich — sie dürfen nicht versehentlich live gehen. */
.platzhalter {
  display: inline-block;
  background: #f0a500; color: #1a1200;
  font-weight: 700; font-size: 14px;
  letter-spacing: .03em;
  padding: 1px 7px; border-radius: 4px;
  font-family: var(--schrift);
}

/* ─── Fuss ─────────────────────────────────────────────── */
.r-foot {
  border-top: 1px solid var(--brd); background: var(--d1);
  padding: 28px 32px; text-align: center;
  font-size: 15px; color: var(--txt3);
}
.r-foot a { color: var(--txt2); margin: 0 9px; }

@media (max-width: 640px) {
  .r-nav { padding: 14px 20px; }
  .r-wrap { padding: 36px 20px 64px; }
  h1 { font-size: 30px; }
  .r-tabelle { font-size: 15px; }
  .r-tabelle th, .r-tabelle td { padding: 9px 10px; }
}

.footer-copy-recht { margin-top: 14px; font-size: 14px; color: var(--txt3); }