/* Charakter kanzlei: Fraunces / Source Sans 3. Ruhig, viel Weißraum, Haarlinien in der Zweitfarbe (Gold),
   Personen-Abschnitt, Fachgebiete mit Definitionssätzen, keine Bilder außer Personen. */
:root{
  --schrift-ueberschrift:'Fraunces',Georgia,"Times New Roman",serif;
  --schrift-text:'Source Sans 3',system-ui,"Helvetica Neue",Arial,sans-serif;
  --gewicht-ueberschrift:500;
  --laufweite-ueberschrift:-.012em;
  --radius:2px;
  --linie-staerke:1px;
  --zeile:1.6;
  --mass:36rem;
  --breite:68rem;
  --groesse-3:clamp(2.25rem,1.5rem + 3vw,4rem);
  --raum-5:clamp(3.5rem,2.5rem + 5vw,7rem);
  --raum-6:clamp(5rem,4rem + 7vw,10rem);
}
h1,h2,h3,.wortmarke{font-variation-settings:"opsz" 144,"SOFT" 40}
h1{line-height:1.05;max-width:22ch}
.abschnitt > h2{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem)}
h3{font-variation-settings:"opsz" 48,"SOFT" 30}
.wortmarke{font-size:1.625rem;font-weight:500}
.wortmarke::after{content:"";display:block;width:2.5rem;height:1px;background:var(--zweit);margin-top:.5rem}
.vorzeile{color:var(--zweit-lesbar);font-weight:600;letter-spacing:.16em}
.antwort{font-family:var(--schrift-ueberschrift);font-variation-settings:"opsz" 24,"SOFT" 60;font-weight:400;font-size:clamp(1.25rem,1.1rem + .7vw,1.625rem);line-height:1.45}

.kopf{border-bottom:1px solid var(--zweit)}
.kopf-innen{padding-block:var(--raum-4)}
.kopf nav a{font-size:.9375rem;letter-spacing:.02em}
.kopf nav a[aria-current]{border-bottom-color:var(--zweit)}

.knopf{font-family:var(--schrift-text);font-weight:600;letter-spacing:.04em;padding:.8em 1.5em}
.knopf-still{border-color:var(--zweit)}
.knopf-still:hover{background:var(--zweit-flaeche);border-color:var(--zweit);color:var(--tinte)}

.zahlen{border-block:1px solid var(--zweit);padding-block:var(--raum-4)}
.zahlen b{color:var(--tinte);font-weight:400;font-variation-settings:"opsz" 96,"SOFT" 50;font-size:clamp(1.875rem,1.4rem + 1.6vw,2.75rem)}
.zahlen span{color:var(--zweit-lesbar);letter-spacing:.12em}

.abschnitt + .abschnitt{border-top:1px solid var(--linie)}

/* Fachgebiete: Definitionssatz kursiv, Beschreibung darunter */
.leistungen{border-top:1px solid var(--zweit)}
.leistungen li{border-bottom:1px solid var(--linie);padding-block:var(--raum-4);grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.leistungen h3{font-size:1.375rem;font-weight:500}
.leistungen h3 a:hover{text-decoration-color:var(--zweit)}
.leistungen-ausfuehrlich .definition{font-family:var(--schrift-ueberschrift);font-variation-settings:"opsz" 24,"SOFT" 60;font-style:italic;font-weight:400;font-size:1.1875rem}

.frage{border-top:1px solid var(--linie)}
.frage h3{font-size:1.25rem;font-weight:500}

/* Personen */
.personen{gap:var(--raum-5) var(--raum-5)}
.person .figur{max-width:14rem}
.person .figur img{filter:none}
.person h3{font-size:1.5rem}
.person .rolle{color:var(--zweit-lesbar);letter-spacing:.02em}
.nachweise li{position:relative;padding-left:1rem}
.nachweise li::before{content:"";position:absolute;left:0;top:.7em;width:.4rem;height:1px;background:var(--zweit)}

.orte li::after{color:var(--zweit)}
.zeiten caption{font-weight:500}
.zeiten th{color:var(--zweit-lesbar)}
.figur figcaption{font-style:italic}
.fuss{border-top:1px solid var(--zweit)}
.muster{border-left-color:var(--zweit)}