/* ==========================================================================
   Domplatz 16 Rechtsanwälte — Stylesheet
   Eine einzige CSS-Datei, keine externen Schriften, keine Tracker.
   ========================================================================== */

:root {
  --tinte:        #1c2b3a;   /* Fließtext */
  --tinte-hell:   #5a6b7b;   /* Sekundärtext */
  --tief:         #005996;   /* Überschriften, dunkles Blau */
  --navy:         #0e2438;   /* Footer */
  --akzent:       #1ebbf0;   /* Markenblau */
  --akzent-dunkel:#128fc0;   /* Hover */
  --mint:         #39dfaa;   /* Verlaufspartner */
  --hauch:        #f1f9fd;   /* zarte Flächen */
  --hauch-2:      #e2f2fa;
  --rand:         #dfe8ee;
  --weiss:        #ffffff;

  --breite:       1160px;
  --schmal:       760px;
  --radius:       10px;
  --schatten:     0 2px 4px rgba(14,36,56,.05), 0 8px 24px rgba(14,36,56,.07);

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: var(--schrift);

  --titel-gewicht: 600;
  --titel-abstand: -.01em;
  --titel-transform: none;
  --radius-knopf: 100px;
  --kachel-rand: 1px solid var(--rand);
  --held-schleier: linear-gradient(180deg, rgba(14,36,56,.45) 0%, rgba(14,36,56,.78) 100%);
  --marke-schrift: var(--schrift);
  --marke-abstand: .02em;
  --mikro-transform: none;
  --mikro-abstand: 0;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--tief); text-decoration-color: rgba(30,187,240,.5); text-underline-offset: .18em; }
a:hover { color: var(--akzent-dunkel); }

h1, h2, h3, h4 {
  color: var(--tief);
  font-family: var(--schrift-titel);
  line-height: 1.22;
  margin: 0 0 .6em;
  font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-abstand);
}
h1, h2 { text-transform: var(--titel-transform); }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.3em;
  border-left: 3px solid var(--akzent);
  color: var(--tinte-hell);
  font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--rand); margin: 2.6em 0; }

/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.sprung {
  position: absolute; left: -9999px;
  background: var(--tief); color: #fff; padding: .8em 1.2em; z-index: 999;
}
.sprung:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Raster */

.bahn { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.5rem; }
.bahn--schmal { max-width: var(--schmal); }

.block { padding: 4.5rem 0; }
.block--hauch { background: var(--hauch); }
.block--eng { padding: 3rem 0; }

/* ------------------------------------------------------------------ Header */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--rand);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 76px;
}
.kopf__marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.kopf__marke img { width: 156px; }
.kopf__wort { font-family: var(--marke-schrift); font-weight: 700; color: var(--tief);
               letter-spacing: var(--marke-abstand); line-height: 1.1; }
.kopf__wort span { display: block; font-size: .68rem; font-weight: 500;
                   letter-spacing: .22em; color: var(--tinte-hell); }

.menue { display: flex; align-items: center; gap: .35rem; }
.menue a {
  padding: .5rem .85rem; border-radius: 6px; text-decoration: none;
  color: var(--tinte); font-weight: 500; font-size: 1rem; white-space: nowrap;
}
.menue a:hover { background: var(--hauch-2); color: var(--tief); }
.menue a[aria-current="page"] { color: var(--tief); background: var(--hauch-2); }

.kopf__rechts { display: flex; align-items: center; gap: .6rem; }

.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--tief); color: #fff !important; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: var(--radius-knopf);
  font-weight: 600; font-size: .97rem;
}
.kopf__tel:hover { background: var(--akzent-dunkel); }
.kopf__tel span { white-space: nowrap; }

/* Sprachumschalter */
.sprachknopf {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border: 1px solid var(--rand); border-radius: var(--radius-knopf);
  text-decoration: none; color: var(--tinte); font-weight: 600; font-size: .9rem;
  white-space: nowrap; background: var(--weiss);
}
.sprachknopf:hover { border-color: var(--akzent); color: var(--tief);
                     background: var(--hauch); }
.sprachknopf svg { flex: 0 0 auto; opacity: .65; }
.sprachknopf--mobil { display: none; }

/* Hinweis über unverbindlichen Übersetzungen */
.rechtshinweis {
  background: var(--hauch); border-left: 3px solid var(--akzent);
  padding: .9rem 1.1rem; border-radius: 0 8px 8px 0;
  font-size: .93rem; color: var(--tinte-hell); margin-bottom: 1.8rem;
}

.schalter {
  display: none; background: none; border: 0; padding: .5rem; cursor: pointer;
  color: var(--tief);
}

/* ------------------------------------------------------------------- Hero */

.held { position: relative; color: #fff; }
.held__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.held::after {
  content: ""; position: absolute; inset: 0;
  background: var(--held-schleier);
}
.held__innen { position: relative; z-index: 2; padding-block: 6.5rem 5rem; max-width: 40rem; }
.held h1 { color: #fff; margin-bottom: .5rem; }
.held__unter { font-size: 1.2rem; color: rgba(255,255,255,.92); margin-bottom: .35rem; }
.held__zusatz { font-size: .95rem; color: rgba(255,255,255,.95); margin-bottom: 2rem; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------------------------------------------------------------- Auftakt
   Startseite: Text links, das Foto im Hochformat daneben. Kein Bild hinter der
   Schrift — das Foto zeigt die ganze Treppe, so wie es aufgenommen wurde. */

.auftakt { padding-block: 3.5rem 4rem; }
.auftakt__gitter {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
/* Auf weißem Grund steht der Name für sich und wirkt schnell wuchtig.
   Daher kleiner und leichter als die Überschriften der übrigen Seiten. */
.auftakt__text h1 {
  margin-bottom: .5rem;
  font-size: clamp(2rem, 3.1vw, 2.7rem);
  font-weight: 500;
  line-height: 1.14;
  text-wrap: balance;
}
.auftakt__unter { font-size: 1.2rem; color: var(--tinte-hell); margin-bottom: .3rem; }
.auftakt__zusatz {
  font-size: .9rem; color: var(--tinte-hell); margin-bottom: 1.8rem;
  text-transform: var(--mikro-transform); letter-spacing: var(--mikro-abstand);
}
.auftakt__bild img {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
}

@media (max-width: 820px) {
  .auftakt { padding-block: 2.5rem 3rem; }
  .auftakt__gitter { grid-template-columns: 1fr; gap: 2rem; }
  .auftakt__bild { order: -1; }
}

/* ----------------------------------------------------------------- Buttons */

.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.7rem; border-radius: var(--radius-knopf); text-decoration: none;
  font-weight: 600; font-size: 1rem; border: 2px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.knopf--voll { background: var(--akzent); color: #fff !important; border-color: var(--akzent); }
.knopf--voll:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf--linie { border-color: rgba(255,255,255,.65); color: #fff !important; }
.knopf--linie:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.knopf--tief { background: var(--tief); color: #fff !important; border-color: var(--tief); }
.knopf--tief:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }

/* ------------------------------------------------------------------ Kacheln */

.gitter { display: grid; gap: 1.2rem; }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.kachel {
  display: block; background: var(--weiss); border: var(--kachel-rand);
  border-radius: var(--radius); padding: 1.6rem; text-decoration: none;
  color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kachel:hover {
  border-color: var(--akzent); box-shadow: var(--schatten); transform: translateY(-2px);
}
.kachel h3 { margin-bottom: .4rem; font-size: 1.12rem; }
.kachel p { margin: 0; color: var(--tinte-hell); font-size: .97rem; line-height: 1.6; }
.kachel__pfeil { display: inline-block; margin-top: .9rem; color: var(--akzent-dunkel);
                 font-weight: 600; font-size: .93rem; }

/* ---------------------------------------------------------------- Argumente */

.gruende { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.gruende li { display: flex; gap: .9rem; align-items: flex-start; }
.gruende strong { color: var(--tief); display: block; }
.gruende span { color: var(--tinte-hell); font-size: .97rem; }
.haken {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--hauch-2); color: var(--tief); display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; margin-top: .18rem;
}

/* -------------------------------------------------------------------- Team */

/* Ein Team, eine Darstellung - Anwälte und Sekretariat gleich gesetzt. */
.personen {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
}
.person {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.5rem;
  align-items: start;
  border: var(--kachel-rand); border-radius: var(--radius); padding: 1.4rem;
  background: var(--weiss);
}
.person img {
  width: 170px; height: 226px; object-fit: cover; object-position: center top;
  border-radius: calc(var(--radius) - 2px);
}
.person__text { min-width: 0; }
.person h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.person__rolle { color: var(--tinte-hell); font-size: .95rem; margin-bottom: .8rem; }
.person__kontakt { margin: 0; font-size: .95rem; line-height: 1.75; }
.person__kontakt a { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------- Blog */

.beitrag-karte {
  display: block; padding: 1.5rem 0; border-bottom: 1px solid var(--rand);
  text-decoration: none; color: inherit;
}
.beitrag-karte:first-child { padding-top: 0; }
.beitrag-karte:hover h3 { color: var(--akzent-dunkel); }
.beitrag-karte h3 { margin-bottom: .3rem; }
.beitrag-meta { font-size: .875rem; color: var(--tinte-hell); margin-bottom: .5rem;
                 text-transform: var(--mikro-transform); letter-spacing: var(--mikro-abstand); }
.beitrag-karte p { margin: 0; color: var(--tinte-hell); }

.marken { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.marke {
  padding: .4rem 1rem; border-radius: var(--radius-knopf); background: var(--hauch-2);
  color: var(--tief); font-size: .9rem; text-decoration: none; font-weight: 500;
}
.marke:hover, .marke--aktiv { background: var(--tief); color: #fff; }

.aufsatz { max-width: var(--schmal); }
.aufsatz img { border-radius: var(--radius); margin: 1.8rem 0; }
.aufsatz h2 { margin-top: 2em; }
.aufsatz figure { margin: 1.8rem 0; }
.aufsatz figcaption { font-size: .875rem; color: var(--tinte-hell); margin-top: .5rem; }

/* --------------------------------------------------------------- Formulare */

.feld { margin-bottom: 1.1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--rand);
  border-radius: 8px; font: inherit; color: inherit; background: var(--weiss);
}
.feld input:focus, .feld textarea:focus { border-color: var(--akzent); outline: none;
  box-shadow: 0 0 0 3px rgba(30,187,240,.18); }
.feld--wahl { display: flex; gap: .6rem; align-items: flex-start; }
.feld--wahl input { width: auto; margin-top: .35rem; }
.feld--wahl label { font-weight: 400; font-size: .92rem; color: var(--tinte-hell); }
.hinweis { font-size: .875rem; color: var(--tinte-hell); }
.held__unter { font-family: var(--schrift-titel); }

/* ------------------------------------------------------------------ Kontakt */

.kontaktzeile { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.kontaktzeile__wert { font-weight: 600; }
.kontaktzeile a { text-decoration: none; }
.kontaktzeile a:hover { text-decoration: underline; }

.kartenlink {
  display: block; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.4rem; text-decoration: none; color: inherit; background: var(--hauch);
}
.kartenlink:hover { border-color: var(--akzent); }

/* ------------------------------------------------------------------- Footer */

.fuss { background: var(--navy); color: rgba(255,255,255,.72); padding: 3.5rem 0 2rem;
        font-size: .97rem; }
.fuss h2, .fuss h3 { color: #fff; font-size: 1rem; letter-spacing: .06em;
                     text-transform: uppercase; margin-bottom: 1rem; }
.fuss a { color: rgba(255,255,255,.9); }
.fuss a:hover { color: var(--mint); }
.fuss__gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
                gap: 2.5rem; }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between;
  font-size: .9rem;
}
.fuss__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------------------------------------------------------------- Mobil */

/* Sechs Menüpunkte und die größere Wortmarke brauchen Platz. Die Kopfzeile klappt
   deshalb früh zum Menüknopf zusammen — sonst überläuft sie. */
@media (max-width: 1380px) {
  .schalter { display: block; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rand); padding: .5rem 1rem 1rem;
  }
  .menue--offen { display: flex; }
  .menue a { padding: .85rem .5rem; border-bottom: 1px solid var(--rand); border-radius: 0; }
  .kopf__rechts .sprachknopf { display: none; }
  /* Im aufgeklappten Menü ist die Sprachwahl eine Zeile wie jede andere.
     Als umrandeter Kasten stieß sie unten mit den Knöpfen im Kopfbild zusammen. */
  .sprachknopf--mobil {
    display: flex; justify-content: flex-start; gap: .5rem;
    margin: 0; padding: .85rem .5rem;
    border: 0; border-radius: 0; background: none;
    font-weight: 500; font-size: 1rem;
  }
}

@media (max-width: 900px) {
  .schalter { display: block; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--rand); padding: .5rem 1rem 1rem;
  }
  .menue--offen { display: flex; }
  .menue a { padding: .85rem .5rem; border-bottom: 1px solid var(--rand); border-radius: 0; }
  .kopf__tel span { display: none; }
  .kopf__tel { padding: .6rem .8rem; }
  .kopf__rechts .sprachknopf { display: none; }
  /* Im aufgeklappten Menü ist die Sprachwahl eine Zeile wie jede andere.
     Als umrandeter Kasten stieß sie unten mit den Knöpfen im Kopfbild zusammen. */
  .sprachknopf--mobil {
    display: flex; justify-content: flex-start; gap: .5rem;
    margin: 0; padding: .85rem .5rem;
    border: 0; border-radius: 0; background: none;
    font-weight: 500; font-size: 1rem;
  }
  .personen { grid-template-columns: 1fr; }
  .person { grid-template-columns: 130px minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; }
  .person img { width: 130px; height: 173px; }
  .person h2 { font-size: 1.12rem; }
  .person__kontakt { font-size: .9rem; }
  .held__innen { padding-block: 4.5rem 3.5rem; }
  .block { padding: 3.25rem 0; }
}

@media print {
  .kopf, .fuss, .held__knoepfe, .schalter { display: none; }
  body { font-size: 11pt; color: #000; }
}

/* ---------------------------------------------------- Designvorschau (lokal)
   Erscheint nur, solange in site.yaml design_umschalter: true steht.
   Vor dem Hochladen auf false setzen, dann verschwindet dieser Block. */

.designwahl {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 500;
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
  max-width: calc(100vw - 2rem);
  background: #111315; color: #fff;
  padding: .4rem .5rem; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.designwahl__kopf {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  opacity: .55; padding: 0 .5rem 0 .3rem;
}
.designwahl button {
  font: inherit; font-size: .82rem; font-weight: 600;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px; padding: .34rem .7rem; cursor: pointer;
}
.designwahl button:hover { background: rgba(255,255,255,.14); }
.designwahl button[aria-pressed="true"] { background: #fff; color: #111315;
                                          border-color: #fff; }
@media print { .designwahl { display: none; } }

/* ------------------------------------------------------------------- Logo */

.logofeld { display: block; color: var(--tief); }
/* Ohne diese Zeile gewinnt das display:block oben gegen das hidden-Attribut,
   und in der Vorschau stehen alle Logos gleichzeitig im Kopf. */
.logofeld[hidden] { display: none; }
.logofeld svg { width: 190px; height: auto; display: block; }
.logofeld[data-logo="siegel"] svg { width: 205px; }
.logofeld[data-logo^="wortmarke"] svg { width: 205px; }
.logofeld[data-logo="wortmarke-gestapelt"] svg { width: 190px; }
@media (max-width: 900px) {
  .logofeld svg { width: 152px; }
}

.designwahl { flex-direction: column; align-items: stretch; gap: .35rem; }
.designwahl__reihe { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.designwahl { max-width: 30rem; }


/* Kicker über einer Überschrift */
.kicker {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tinte-hell); margin-bottom: .5rem;
}

/* Rückruf-Formular auf der Startseite */
.rueckruf__form { max-width: 26rem; margin: 2rem auto 0; text-align: left; }
.rueckruf__form .knopf { width: 100%; justify-content: center; }

/* Zusatztext auf der Kontaktseite */
.kontakt__zusatz { margin-top: 2rem; }
.kontakt__zusatz h3 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--tinte-hell); margin-bottom: .4rem;
}
.kontakt__zusatz h3 + p { margin-bottom: 1.4rem; }

/* ======================================================= Rechtsgebietsseite */

.gebiet__kopf {
  background: var(--hauch);
  border-bottom: 1px solid var(--rand);
  padding: 2.6rem 0 3rem;
  margin-bottom: 3.5rem;
}
.gebiet__kopf h1 { max-width: 22ch; margin-bottom: .5rem; }
.gebiet__kopf .kicker { margin-bottom: 1rem; }
.gebiet__kopf .kicker a { color: var(--tinte-hell); text-decoration: none; }
.gebiet__kopf .kicker a:hover { color: var(--tief); }
.gebiet__lead {
  font-size: 1.18rem; line-height: 1.6; color: var(--tinte-hell);
  max-width: 56ch; margin: 0;
}

.gebiet {
  display: grid; gap: 3.5rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 260px;
  padding-bottom: 5rem;
}
.gebiet__text { max-width: 62ch; }

/* Fließtext ruhiger takten */
.aufsatz h2 {
  margin-top: 2.8em; margin-bottom: .7em;
  padding-top: 1.4rem; border-top: 1px solid var(--rand);
}
.aufsatz h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.aufsatz h3 {
  margin-top: 2.2em; margin-bottom: .7em;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinte-hell);
}
.aufsatz h3:first-child { margin-top: 0; }

/* Leistungslisten: dicht gesetzt, mit Markierung */
.aufsatz ul { list-style: none; padding-left: 0; margin: 0 0 1.6em; }
.aufsatz ul li {
  position: relative; padding-left: 1.5rem; margin-bottom: .55em;
  line-height: 1.6;
}
.aufsatz ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 1.6px; background: var(--akzent);
}

.gebiet__abschluss {
  margin-top: 3.5rem; padding: 1.8rem;
  background: var(--hauch); border-radius: var(--radius);
}
.gebiet__abschluss h2 {
  margin: 0 0 .5em; padding: 0; border: 0; font-size: 1.25rem;
}
.gebiet__abschluss p { margin-bottom: 1.3rem; }

/* Randspalte */
.gebiet__rand { position: sticky; top: 100px; display: grid; gap: 1rem; }
.randkasten {
  border: var(--kachel-rand); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; background: var(--weiss);
}
.randkasten__titel {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--tinte-hell); margin: 0 0 .8rem;
}
.randkasten__zeile { margin: 0 0 .35rem; font-size: .93rem; }
.randkasten__zeile a { overflow-wrap: anywhere; }
.randkasten__zeile--matt { color: var(--tinte-hell); margin-top: .8rem; }
.randkasten--liste ul { list-style: none; margin: 0; padding: 0; }
.randkasten--liste li { margin-bottom: .45rem; }
.randkasten--liste a { font-size: .93rem; text-decoration: none; }
.randkasten--liste a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .gebiet { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3.5rem; }
  .gebiet__rand { position: static; }
  .gebiet__kopf { padding: 2rem 0 2.2rem; margin-bottom: 2.5rem; }
}

/* -------------------------------------------------------- Beitragsbilder */

.beitrag__bild {
  width: 100%; border-radius: var(--radius); margin: 0 0 2rem;
}
.beitrag-karte--bild {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem;
  align-items: start;
}
.beitrag-karte--bild img {
  width: 150px; height: 110px; object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
}
@media (max-width: 600px) {
  .beitrag-karte--bild { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; }
  .beitrag-karte--bild img { width: 96px; height: 74px; }
}

/* Beiträge auf der Rechtsgebietsseite, Gebiete unter dem Beitrag */
.gebiet__beitraege { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rand); }
.gebiet__beitraege h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.25rem; }
.gebiet__beitraege .beitrag-karte { padding: 1.1rem 0; }
.gebiet__beitraege .beitrag-karte h3 { font-size: 1.05rem; }
.gebiet__beitraege .beitrag-karte:last-child { border-bottom: 0; }

.beitrag__gebiete { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rand); }
.beitrag__gebiete .kicker { margin-bottom: .7rem; }

/* ------------------------------------------------ Schwerpunkte und A bis Z */

.schwerpunkt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.schwerpunkt__bild { display: grid; gap: 1rem; }
.schwerpunkt__bild img { border-radius: var(--radius); width: 100%; display: block; }
/* Bild am Ende einer Textseite */
.seitenbild {
  display: block; width: 100%; height: auto; margin-top: 2.8rem;
  border-radius: var(--radius);
}
.schwerpunkt__text h2 { margin-bottom: .5em; }

.punkte { list-style: none; margin: 1.4em 0 0; padding: 0; }
.punkte li {
  position: relative; padding-left: 1.7em; margin-bottom: .9em;
  color: var(--tinte); line-height: 1.6;
}
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5em; height: .5em; border-right: 2px solid var(--akzent);
  border-top: 2px solid var(--akzent); transform: rotate(45deg);
}

.azfeld { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.azfeld__kopf p { color: var(--tinte-hell); }
.azliste {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2.5rem;
}
.azliste li {
  break-inside: avoid; margin-bottom: .75em;
  font-size: .92rem; letter-spacing: var(--mikro-abstand);
  text-transform: var(--mikro-transform); color: var(--tinte);
}

@media (max-width: 860px) {
  .schwerpunkt, .azfeld { grid-template-columns: 1fr; gap: 2rem; }
  .schwerpunkt__bild { order: 2; }
  .azliste { columns: 1; }
}

/* ------------------------------------------- Schwerpunkte auf der Team-Seite */

/* Teamfoto vergrößert sich, solange der Mauszeiger darauf liegt.
   Der Platz im Raster bleibt gleich, das Bild wächst darüber hinaus.
   Nur für Geräte mit echtem Mauszeiger, damit am Handy nichts hängen bleibt. */
@media (hover: hover) and (pointer: fine) {
  .person { position: relative; }
  .person img {
    position: relative; z-index: 1;
    transition: transform .18s ease, box-shadow .18s ease;
    transform-origin: left top;
  }
  .person:hover { z-index: 3; }
  .person img:hover {
    transform: scale(1.95);
    z-index: 4;
    outline: 3px solid var(--weiss);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .person img { transition: none; }
}

.person__gebiete {
  grid-column: 1 / -1;
  margin-top: 0; padding-top: 1rem; border-top: 1px solid var(--rand);
}
.person__gebiete .kicker { margin-bottom: .35rem; }
.person__gebiete p:last-child {
  margin: 0; font-size: .92rem; line-height: 1.65; color: var(--tinte-hell);
}

/* Foto des Hauses auf der Kontaktseite */
.kontakt__haus {
  display: block; width: 100%; height: auto; margin-top: 2rem;
  border-radius: var(--radius);
}


/* Hinweisbalken während der Umstellung (site.yaml: umstellungshinweis) */
.umstellung {
  background: #fff4d6;
  color: #3d3200;
  border-bottom: 1px solid #ecd48a;
  font-size: .92rem;
  line-height: 1.45;
}
.umstellung__innen { padding-top: .7rem; padding-bottom: .7rem; }
.umstellung strong { font-weight: 600; margin-right: .25em; }
.umstellung a {
  color: inherit; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-underline-offset: .15em;
}