/* Rechtsseiten. Gleiche Farb- und Schriftwelt wie Entwurf 02, aber auf
   Lesbarkeit langer Texte gebaut: eine Spalte, ruhige Auszeichnung,
   Blockzitate deutlich abgesetzt, weil dort das Rechtlich Wesentliche steht. */

:root{
  --blau:#01234d;
  --kreide:#eef1f6;
  --tinte:#0a0e1a;
  --grau:#4e576b;
  --orange:#ff5a1f;
  --weiss:#ffffff;
  --linie:#d3dae5;

  --display:"Big Shoulders Display","Archivo Narrow","Arial Narrow",sans-serif;
  --lauf:"Familjen Grotesk",system-ui,sans-serif;
  --mono:"Chivo Mono",ui-monospace,monospace;

  --rand:min(6vw,68px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:78px;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--kreide);color:var(--tinte);
  font-family:var(--lauf);font-size:clamp(16px,1vw + 12.4px,18px);line-height:1.65;
}
a{color:var(--blau)}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;display:block}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
.logo{display:block;height:30px;width:auto}

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

/* Kopf */
.kopf{background:var(--blau);color:var(--weiss);position:sticky;top:0;z-index:70}
.kopf-in{display:flex;align-items:center;gap:1.4rem 2rem;min-height:62px;flex-wrap:wrap}
.kopf-nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap}
.kopf-nav a{
  font-family:var(--display);font-weight:700;font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em;text-decoration:none;color:rgba(255,255,255,.82);
}
.kopf-nav a:hover{color:var(--weiss)}

/* Textkörper */
.recht{
  background:var(--weiss);
  max-width:min(1240px,74ch);
  margin-block:clamp(1.6rem,4vw,3rem);
  padding-block:clamp(2rem,4vw,3.2rem);
  padding-inline:clamp(1.3rem,4vw,3rem);
  box-shadow:0 20px 44px -34px rgba(10,14,26,.5);
}
.recht h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:.95;letter-spacing:.005em;
  margin:0 0 1.6rem;
}
.recht h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,2.6vw,1.8rem);line-height:1.05;letter-spacing:.02em;
  color:var(--blau);
  margin:2.4rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--linie);
}
.recht h1 + h2,.recht .warnung + h2{border-top:0;padding-top:0;margin-top:1.8rem}
.recht h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.03em;margin:1.8rem 0 .5rem;
}
.recht h4{font-size:1.1rem;font-family:var(--lauf);font-weight:700;margin:1.5rem 0 .4rem}
.recht p{margin:0 0 1em}
.recht ul,.recht ol{margin:0 0 1.2em;padding-left:1.4rem}
.recht li{margin-bottom:.45em}
.recht li:last-child{margin-bottom:0}
.recht hr{border:0;border-top:1px solid var(--linie);margin:2.2rem 0 1.4rem}
.recht code{
  font-family:var(--mono);font-size:.86em;
  background:var(--kreide);padding:.1em .35em;border-radius:2px;
}
.recht strong{font-weight:600}

/* Blockzitate: hier steht, worauf es rechtlich ankommt */
.recht blockquote{
  margin:1.6rem 0;padding:1.2rem 1.3rem;
  background:var(--blau);color:var(--weiss);
}
.recht blockquote p{margin:0;font-size:1.02em}
.recht blockquote a{color:#9ecbff}

/* Tabellen */
.tabelle-rollen{overflow-x:auto;margin:0 0 1.4rem;-webkit-overflow-scrolling:touch}
.tabelle-rollen table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:32rem}
.tabelle-rollen th,.tabelle-rollen td{
  text-align:left;vertical-align:top;padding:.6rem .8rem;border-bottom:1px solid var(--linie);
}
.tabelle-rollen th{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grau);
  border-bottom:2px solid var(--tinte);
}
.tabelle-rollen tbody tr:hover{background:var(--kreide)}

/* Offene Angaben in eckigen Klammern */
mark.offen{
  background:#ffe8b0;color:#5c3d00;
  font-family:var(--mono);font-size:.88em;
  padding:.05em .3em;border-radius:2px;
}

/* Hinweis, solange offene Angaben im Text stehen */
.warnung{
  background:var(--orange);color:var(--tinte);
  padding:1.2rem 1.3rem 1.3rem;margin:0 0 2rem;
}
.warnung h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.3rem;letter-spacing:.02em;margin:0 0 .5rem;
  border-top:0;padding-top:0;color:var(--tinte);
}
.warnung p{margin:0 0 .6rem;font-size:.95rem}
.warnung p:last-child{margin-bottom:0}
.warnung code{background:rgba(10,14,26,.14);color:var(--tinte)}
.warnung-liste{line-height:2}

/* Fuß */
.fuss{background:var(--tinte);color:rgba(238,241,246,.72);padding-block:2.2rem 3rem}
.fuss-in{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center}
.fuss .logo{height:48px}
.fuss nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.fuss a{font-family:var(--mono);font-size:.8rem;text-decoration:none;color:rgba(238,241,246,.82)}
.fuss a:hover{color:var(--weiss);text-decoration:underline}