@import url("fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════════════
   BRANDT OSTERMANN RECHTSANWÄLTE — Richtungsvertrag

   THESIS       Die Seite ist eine Registratur. Man greift über Registerreiter
                zu, Inhalte sind gesetzt wie ein Schriftsatz: Randziffern,
                Marginalien, Aktenzeichen. Abgelehnt: Glasfassade im Gegenlicht,
                drei Personen mit verschränkten Armen, „Ihre starke Kanzlei".
   OWN-WORLD    Aktenpapier in neutralem Grauweiß, Tiefschwarz, dazu die vier
                Farben eines Ordnerregisters — Petrol, Ziegel, Senf, Forst —
                als Reiter und Vollflächen. Lochung am linken Rand,
                Marginalspalte, Randziffern. Libre Franklin für Marken und
                Zahlen, Spectral für jeden gelesenen Satz.
   STORY        Wer im Streitfall herkommt, findet in Sekunden sein Rechtsgebiet,
                sieht wer es bearbeitet, und ruft an.
   1. VIEWPORT  Links das Register über die volle Höhe, rechts das Deckblatt mit
                Rubrum, Kanzleiname und der Primäraktion.
   FORM         Aktendeckel mit Register, Schriftsatzsatz.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --akte:    #f4f3ef;
  --akte-2:  #e9e8e2;
  --akte-3:  #dbdad3;
  --tinte:   #14161a;
  --tinte-2: #3d434b;
  --tinte-3: #5b626b;
  --linie:   #c5c4bc;

  --reg-1: #0f5563;  /* Gesellschaftsrecht  */
  --reg-2: #8c3324;  /* Arbeitsrecht        */
  --reg-3: #a8791a;  /* Vergaberecht        */
  --reg-4: #2c5138;  /* Immobilienrecht     */
  --reg-5: #3b3a72;  /* Prozessführung      */

  --f-mark: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --f-satz: "Spectral", Georgia, "Times New Roman", serif;

  --reg-w: 178px;
  --pad: clamp(20px, 3.6vw, 62px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--akte-3);
  color: var(--tinte);
  font-family: var(--f-satz);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
::selection { background: var(--reg-3); color: #fff; }
a { color: var(--reg-1); }
:focus-visible { outline: 2px solid var(--reg-2); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinte); color: var(--akte);
  padding: .8rem 1.2rem; font: 500 .9rem/1 var(--f-mark);
}
.skip:focus { left: 0; }

/* ── Aktendeckel ──────────────────────────────────────────────────────── */

.akte {
  position: relative;
  max-width: 1400px; margin: 0 auto;
  min-height: 100vh;
  background: var(--akte);
  box-shadow: 0 2px 28px rgba(20, 22, 26, .13);
  display: grid;
  grid-template-columns: var(--reg-w) minmax(0, 1fr);
}

/* Lochung: die zwei Löcher des Aktenordners. Sie bleiben im Blickfeld, weil
   eine Abheftung nicht mit der Seite davonläuft. */
.lochung {
  position: fixed; z-index: 5;
  left: max(22px, calc(50vw - 700px + 22px));
  top: 0; height: 100vh; width: 15px;
  pointer-events: none;
}
.lochung i {
  position: absolute; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--akte-3);
  box-shadow: inset 0 2px 3px rgba(20, 22, 26, .45), 0 1px 0 rgba(255,255,255,.7);
}
.lochung i:nth-child(1) { top: 27%; }
.lochung i:nth-child(2) { top: 70%; }

/* ── Register ─────────────────────────────────────────────────────────── */

.register {
  position: relative;
  /* Als Grid-Element wächst die Spalte sonst auf die Breite der Reiterleiste
     und schiebt die Seite quer aus dem Bild. */
  min-width: 0;
  background: var(--akte-2);
  border-right: 1px solid var(--linie);
  padding: 0 0 30px;
}
.register-inner { position: sticky; top: 0; padding: 22px 0 0; }

.kanzlei {
  display: block; padding: 0 20px 24px 52px;
  text-decoration: none; color: var(--tinte);
}
.kanzlei b {
  display: block;
  font: 600 15px/1.22 var(--f-mark); letter-spacing: -.008em;
}
.kanzlei span {
  display: block; margin-top: 7px;
  font: 400 9.5px/1.5 var(--f-mark); letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinte-3);
}

.reiter { list-style: none; margin: 0; padding: 0; }
.reiter li { margin-bottom: 3px; }
.reiter a {
  position: relative; display: block;
  padding: 13px 16px 13px 52px;
  margin-right: -1px;
  background: var(--akte-3); color: var(--tinte);
  text-decoration: none;
  font: 500 12.5px/1.3 var(--f-mark); letter-spacing: .02em;
  /* Ein Registerreiter IST eine farbige Kante: Grammatik der Form, kein Akzent an einer Karte. */
  /* impeccable-disable-next-line side-tab */
  border-left: 6px solid var(--c, var(--tinte-3));
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .22s;
}
.reiter a small {
  display: block; margin-top: 4px;
  font: 400 9.5px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte-3);
}
.reiter a:hover { background: var(--akte); transform: translateX(4px); }
/* Der aktive Reiter zieht aus dem Register heraus – so öffnet sich eine Akte */
.reiter a[aria-current], .reiter a.on {
  background: var(--akte); transform: translateX(9px);
  box-shadow: -2px 0 0 var(--c, var(--tinte));
}

.register-foot {
  margin-top: 26px; padding: 20px 20px 0 52px;
  border-top: 1px solid var(--linie);
  font: 400 11.5px/1.7 var(--f-mark); color: var(--tinte-3);
}
.register-foot a { color: var(--tinte-2); text-decoration: none; border-bottom: 1px solid var(--linie); }
.register-foot a:hover { border-bottom-color: var(--tinte); }
.register-foot p { margin: 0 0 10px; max-width: none; }

@media (max-width: 900px) {
  :root { --reg-w: 0px; }
  .akte { grid-template-columns: 1fr; }
  .lochung { display: none; }
  .register { border-right: 0; border-bottom: 1px solid var(--linie); padding-bottom: 0; }
  .register-inner { position: static; padding: 16px 0 0; }
  .kanzlei { padding: 0 var(--pad) 16px; }
  .reiter {
    display: flex; overflow-x: auto; gap: 4px;
    padding: 0 var(--pad) 14px;
    scrollbar-width: thin;
  }
  .reiter li { margin: 0; flex: none; }
  .reiter a {
    padding: 10px 14px; margin: 0; white-space: nowrap;
    border-left: 0; border-top: 5px solid var(--c, var(--tinte-3));
  }
  .reiter a:hover, .reiter a[aria-current], .reiter a.on { transform: none; box-shadow: none; }
  .register-foot { display: none; }
}

/* ── Inhalt ───────────────────────────────────────────────────────────── */

.inhalt { padding: 0 0 0; min-width: 0; }

/* ── Deckblatt / Rubrum ───────────────────────────────────────────────── */

.deckblatt {
  padding: clamp(34px, 5.4vw, 82px) var(--pad) clamp(34px, 4.6vw, 66px);
  border-bottom: 3px double var(--tinte);
}

.az {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  margin: 0 0 clamp(24px, 3.4vw, 42px); max-width: none;
  font: 400 11px/1.6 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-3);
}
.az b { color: var(--tinte); font-weight: 600; }

h1 {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  font-family: var(--f-mark); font-weight: 600;
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  line-height: 1.02; letter-spacing: -.032em;
  text-wrap: balance;
}
h1 em { font-style: normal; display: block; color: var(--tinte-3); }

.deckblatt .satz {
  max-width: 64ch;
  font-size: clamp(1.08rem, 1.5vw, 1.26rem); line-height: 1.6;
}

.deckblatt .aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 40px); }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

.tat {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: 0; cursor: pointer;
  background: var(--tinte); color: var(--akte);
  font: 500 12.5px/1 var(--f-mark); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s cubic-bezier(.16,1,.3,1);
}
.tat:hover { background: var(--reg-1); }
.tat--rand {
  background: transparent; color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--tinte);
}
.tat--rand:hover { background: var(--tinte); color: var(--akte); }
.tat--hell { background: var(--akte); color: var(--tinte); }
.tat--hell:hover { background: var(--akte-2); }

/* ── Schriftsatz: Marginalspalte plus Randziffern ─────────────────────── */

.abschnitt {
  padding: clamp(34px, 4.6vw, 74px) var(--pad);
  border-bottom: 1px solid var(--linie);
}
.abschnitt:last-child { border-bottom: 0; }

.paragraf {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0 clamp(18px, 2.6vw, 40px);
  align-items: start;
}
.paragraf + .paragraf { margin-top: clamp(30px, 3.6vw, 52px); }

.rand {
  position: sticky; top: 24px;
  font: 400 10.5px/1.6 var(--f-mark); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-3);
  text-align: right;
  padding-top: .55em;
  border-right: 1px solid var(--linie);
  padding-right: clamp(12px, 1.6vw, 22px);
}
.rand b { display: block; color: var(--tinte); font-weight: 600; font-size: 13px; letter-spacing: .06em; }
.rand .zi { display: block; margin-top: 8px; font-variant-numeric: tabular-nums; }

h2 {
  margin: 0 0 clamp(14px, 1.7vw, 22px);
  font-family: var(--f-mark); font-weight: 600;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem); line-height: 1.1; letter-spacing: -.026em;
  text-wrap: balance;
}
h3 {
  margin: 0 0 9px;
  font-family: var(--f-mark); font-weight: 600;
  font-size: 1.02rem; line-height: 1.35; letter-spacing: -.008em;
}
p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.gross { font-size: clamp(1.05rem, 1.4vw, 1.18rem); }

@media (max-width: 700px) {
  /* minmax(0, …) statt 1fr: sonst wächst die Spalte auf die Breite der
     breitesten Tabelle, statt sie scrollen zu lassen. */
  .paragraf { grid-template-columns: minmax(0, 1fr); }
  .rand {
    position: static; text-align: left; border-right: 0;
    border-bottom: 1px solid var(--linie);
    padding: 0 0 10px; margin-bottom: 18px;
    display: flex; gap: 18px; align-items: baseline;
  }
  .rand .zi { margin: 0; }
}

/* ── Gebiete: nummerierte Positionen, keine Kacheln ───────────────────── */

.gebiete { list-style: none; margin: clamp(20px, 2.6vw, 34px) 0 0; padding: 0; }
.gebiete li { border-top: 1px solid var(--linie); }
.gebiete li:last-child { border-bottom: 1px solid var(--linie); }
.gebiete a {
  display: grid; grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 30px); align-items: baseline;
  padding: 20px 0 22px;
  text-decoration: none; color: inherit;
  /* transform statt padding: kein Layout-Umbruch beim Überfahren */
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .22s;
}
.gebiete a:hover { background: var(--akte-2); transform: translateX(10px); }
.gebiete .nr {
  font: 500 12px/1.6 var(--f-mark); letter-spacing: .1em; color: var(--tinte-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gebiete .nr::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px;
  background: var(--c, var(--tinte-3));
}
.gebiete .tit { font-family: var(--f-mark); font-weight: 600; font-size: clamp(1.12rem, 1.7vw, 1.42rem); letter-spacing: -.018em; }
.gebiete .tit span { display: block; margin-top: 7px; font-family: var(--f-satz); font-weight: 400; font-size: .95rem; line-height: 1.5; color: var(--tinte-2); letter-spacing: 0; }
.gebiete .pers { font: 400 11.5px/1.6 var(--f-mark); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); text-align: right; white-space: nowrap; }

@media (max-width: 720px) {
  .gebiete a { grid-template-columns: 1fr; gap: 10px; }
  .gebiete .pers { text-align: left; }
}

/* ── Kanzleiliste ─────────────────────────────────────────────────────── */

.liste { width: 100%; border-collapse: collapse; margin-top: clamp(20px, 2.6vw, 32px); }
.liste caption {
  text-align: left; padding-bottom: 14px;
  font: 400 10.5px/1 var(--f-mark); letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-3);
}
.liste th, .liste td { padding: 16px 16px 16px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--linie); }
.liste thead th {
  padding-bottom: 9px; border-bottom: 2px solid var(--tinte);
  font: 500 9.5px/1.3 var(--f-mark); letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-3);
}
.liste tbody th { font-weight: 400; }
.liste .nam { font-family: var(--f-mark); font-weight: 600; font-size: 1.06rem; letter-spacing: -.014em; }
.liste .nam small { display: block; margin-top: 5px; font-weight: 400; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); }
.liste td { font-size: .95rem; }
.liste .jahr { font-family: var(--f-mark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.listewrap { overflow-x: auto; }
.listewrap .liste { min-width: 620px; }

/* ── Mandatsliste: anonymisierte Verfahren ────────────────────────────── */

.mandate { list-style: none; margin: clamp(20px, 2.6vw, 32px) 0 0; padding: 0; }
.mandate li {
  display: grid; grid-template-columns: 152px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  padding: 17px 0; border-bottom: 1px solid var(--linie);
}
.mandate li:first-child { border-top: 1px solid var(--linie); }
.mandate .sig {
  font: 400 11.5px/1.5 var(--f-mark); letter-spacing: .06em; color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
}
.mandate .sig b { display: block; color: var(--tinte); font-weight: 600; }
.mandate p { margin: 0; font-size: .98rem; }
@media (max-width: 640px) { .mandate li { grid-template-columns: 1fr; gap: 8px; } }

/* ── Gebührentafel ────────────────────────────────────────────────────── */

.gebuehren { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--tinte); margin-top: clamp(20px, 2.6vw, 32px); }
.gebuehren > div { padding: 22px 22px 26px; border-right: 1px solid var(--tinte); }
.gebuehren > div:last-child { border-right: 0; }
.gebuehren dt { font: 500 10.5px/1.4 var(--f-mark); letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-3); }
.gebuehren dd { margin: 13px 0 0; }
.gebuehren .wert {
  display: block; font-family: var(--f-mark); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.03em;
}
.gebuehren .txt { display: block; margin-top: 12px; font-size: .93rem; line-height: 1.5; color: var(--tinte-2); }

/* ── Farbfläche eines Registers ───────────────────────────────────────── */

.feld {
  padding: clamp(34px, 4.6vw, 74px) var(--pad);
  background: var(--c, var(--reg-1)); color: #fff;
  border-bottom: 1px solid var(--linie);
}
.feld--hell { color: var(--tinte); }
.feld h2 { color: inherit; }
.feld a { color: inherit; }
.feld .satz { max-width: 56ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.feld .az { color: rgba(255,255,255,.78); }
.feld--hell .az { color: rgba(20,22,26,.7); }
.feld .az b { color: inherit; }

/* ── Zitat ────────────────────────────────────────────────────────────── */

.beleg { margin: 0; max-width: 46ch; }
.beleg blockquote {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.34;
}
.beleg blockquote::before { content: "„"; }
.beleg blockquote::after { content: """; }
.beleg figcaption { font: 400 11px/1.7 var(--f-mark); letter-spacing: .16em; text-transform: uppercase; opacity: .82; }

/* ── Formular ─────────────────────────────────────────────────────────── */

.formular { max-width: 660px; margin-top: clamp(22px, 2.6vw, 34px); }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 560px) { .reihe { grid-template-columns: 1fr; } }

.feldgruppe { margin-bottom: 20px; }
.feldgruppe label {
  display: block; margin-bottom: 7px;
  font: 500 10.5px/1 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte-2);
}
.feldgruppe input, .feldgruppe textarea, .feldgruppe select {
  width: 100%; padding: 12px 13px;
  background: var(--akte); color: var(--tinte);
  border: 1px solid var(--tinte-3); border-radius: 0;
  font: 400 1rem/1.5 var(--f-satz);
  transition: border-color .18s, box-shadow .18s;
}
.feldgruppe input:focus, .feldgruppe textarea:focus, .feldgruppe select:focus {
  outline: 0; border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte);
}
.feldgruppe textarea { resize: vertical; min-height: 108px; }
.feldgruppe .hinweis { margin: 7px 0 0; font: 400 12px/1.5 var(--f-mark); color: var(--tinte-3); }
.feldgruppe .fehler { display: none; margin: 7px 0 0; font: 500 12px/1.4 var(--f-mark); color: var(--reg-2); }
.feldgruppe.falsch .fehler { display: block; }
.feldgruppe.falsch input, .feldgruppe.falsch textarea { border-color: var(--reg-2); }

.pruef { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; }
.pruef input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--reg-1); }
.pruef label { font: 400 .9rem/1.5 var(--f-satz); color: var(--tinte-2); text-transform: none; letter-spacing: 0; margin: 0; }

/* ── Vermerk ──────────────────────────────────────────────────────────
   Ein Hinweis in der Akte ist ein gestempelter Kopf über dem Text, keine
   farbige Kante am Kasten. */

.vermerk {
  max-width: 72ch; margin-bottom: 38px;
  border: 1px solid var(--tinte);
  background: var(--akte-2);
}
.vermerk .kopf {
  display: block; padding: 7px 15px;
  background: var(--tinte); color: var(--akte);
  font: 600 10px/1.5 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
}
.vermerk p { margin: 0; padding: 15px 18px; font-size: .95rem; max-width: none; }

.quittung {
  display: none; margin-bottom: 22px;
  border: 1px solid var(--reg-4); background: var(--akte-2);
}
.quittung .kopf {
  display: block; padding: 7px 15px;
  background: var(--reg-4); color: #fff;
  font: 600 10px/1.5 var(--f-mark); letter-spacing: .2em; text-transform: uppercase;
}
.quittung p { margin: 0; padding: 15px 18px; font-size: .96rem; max-width: none; }
.quittung.an { display: block; }

/* ── Fuß ──────────────────────────────────────────────────────────────── */

.fuss {
  padding: clamp(32px, 4vw, 58px) var(--pad) 24px;
  background: var(--tinte); color: var(--akte);
}
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
.fuss h4 { margin: 0 0 14px; font: 500 9.5px/1 var(--f-mark); letter-spacing: .22em; text-transform: uppercase; color: #9aa1ab; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 9px; }
.fuss a { color: var(--akte); text-decoration: none; border-bottom: 1px solid transparent; font-size: .96rem; }
.fuss a:hover { border-bottom-color: var(--akte); }
.fuss p { font-size: .96rem; color: #c3c8ce; }
.fuss .zeile {
  margin-top: clamp(28px, 3.2vw, 46px); padding-top: 20px;
  border-top: 1px solid rgba(244,243,239,.2);
  display: flex; flex-wrap: wrap; gap: 8px 26px; max-width: none;
  font: 400 10.5px/1.7 var(--f-mark); letter-spacing: .16em; text-transform: uppercase;
  color: #9aa1ab;
}
.fuss .zeile .kz { background: var(--akte); color: var(--tinte); padding: 3px 9px; font-weight: 600; }

/* ── Fließtextseiten ──────────────────────────────────────────────────── */

.text h2 { margin-top: 1.9em; }
.text h2:first-child { margin-top: 0; }
.text h3 { margin-top: 1.7em; }
.text ul, .text ol { max-width: 68ch; padding-left: 1.25em; margin: 0 0 1.05em; }
.text li { margin-bottom: .42em; }
.text dt { font-family: var(--f-mark); font-weight: 600; margin-top: 1.2em; }
.text dd { margin: .25em 0 0; color: var(--tinte-2); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* ── Deutsche Komposita ───────────────────────────────────────────────
   „Berufshaftpflichtversicherung" ist in einer schmalen Spalte breiter als
   der Kasten. Mit lang="de" trennt der Browser korrekt statt zu überlaufen. */
h1, h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
p, li, dd, dt, th, td, summary, figcaption { overflow-wrap: break-word; }