/*
 * modern.css - zeitgemaesse Darstellung fuer das Child-Theme "yoko-child".
 *
 * Wird NACH style.css geladen (siehe functions.php) und ueberschreibt es gezielt. style.css und das Eltern-Theme
 * "yoko" bleiben unveraendert. Zurueckdrehen: die Zeile mit "fw-modern" in functions.php entfernen.
 *
 * Inhalt: lokale Schriften (kein Google), fluessige Breite, Seitenleiste per Raster am rechten Rand,
 * lesbarere Schrift, Menue und Bilder fuer Tablet und Handy.
 */

/* ---------- Schriften (lokal ausgeliefert, kein Abruf bei Google) ---------- */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Die alten Regeln in style.css nennen 'Droid Sans' und 'Droid Serif' an vielen Stellen einzeln. Damit nicht jede
   davon ueberschrieben werden muss, zeigen diese Namen auf die lokalen Noto-Schriften (Nachfolger von Droid). */
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/noto-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Grundlagen ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Noto Sans', 'Droid Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #3a3a3a;
  background-color: #e9edf0;
}
#page,
#page * {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: #006f8c;
}
a:hover,
a:focus-visible {
  color: #005b73;
}
a:focus-visible {
  outline: 3px solid #00809f;
  outline-offset: 2px;
}

/* ---------- Seitenrahmen: fluessig statt fest ---------- */
#page {
  width: min(100% - 32px, 1360px);
  max-width: none;
  margin: 16px auto;
  padding: 0 clamp(16px, 3vw, 44px) 28px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 18px rgba(0, 40, 60, .10);
}

/* ---------- Kopfbereich ---------- */
#branding {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 24px;
  padding-top: 18px;
}
#branding #site-title {
  grid-column: 1;
  grid-row: 1;
  float: none;
  padding: 0;
  margin: 0;
}
#branding #site-title h1,
#branding #site-title p.site-name {
  float: none;
  display: block;
  margin: 0;
  text-align: left;
  font-size: 2.2rem;
  line-height: 1.1;
}
#branding #site-title h2,
#branding #site-title p#site-description {
  float: none;
  clear: both;
  margin: .25em 0 0;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 1rem;
  color: #5b6770;
}
#branding #mainnav {
  grid-column: 2;
  grid-row: 1;
  float: none;
  width: auto;
  max-width: none;       /* das alte CSS begrenzt auf 70 %: das zwang das Menue in zwei Zeilen */
  margin: 0;
  justify-self: end;
}
#branding #mainnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 2px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#branding #mainnav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#branding #mainnav ul li a {
  display: block;
  padding: .6em .75em;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #006f8c;
  text-decoration: none;
}
#branding #mainnav ul li a:hover,
#branding #mainnav ul li a:focus-visible {
  background: #e8f4f8;
  color: #005b73;
}
#branding #mainnav .current-menu-item > a,
#branding #mainnav .current_page_item > a {
  background: #e8f4f8;
}
#branding a.headerimage-link {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  margin-top: 12px;
  border-radius: 4px;
  line-height: 0;
}
#branding a.headerimage-link:focus-visible {
  outline-offset: 3px;
}
header#branding img.headerimage,
#branding img.headerimage {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 4px;
}
#branding #subnav {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* ---------- Hauptbereich: Inhalt links, Seitenleiste buendig rechts ---------- */
#wrap {
  display: block;
  margin-top: 14px;
  padding: clamp(24px, 3vw, 44px) 0 0;
  overflow: visible;
  border-top: 1px solid #dde3e7;
  border-bottom: 0;
}
#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 340px);
  grid-template-areas: "content side";
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  width: 100%;
  float: none;
  overflow: visible;
}
#content {
  grid-area: content;
  width: auto;
  float: none;
  min-width: 0;
  max-width: 62rem;
}
#secondary {
  grid-area: side;
  width: auto;
  height: auto;          /* vorher fest 2848 px: der graue Balken war viel zu lang */
  margin: 0;
  float: none;
  padding: 22px 24px 26px;
  background: #f1f4f6;
  border-radius: 6px;
  border-top: 0;
}
/* Die leeren Spalten des alten Layouts entfallen */
#tertiary {
  display: none;
}

#content h1,
#content h2 {
  line-height: 1.25;
}
#content h2.entry-title,
#content .entry-header h2 {
  font-size: 1.1rem;
}
#content p,
#content .post p {
  margin: 0;
  padding: 0 0 1em;
}

/* ---------- Seitenleiste ---------- */
#secondary aside.widget {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid #d9e0e5;
}
#secondary aside.widget:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
#secondary .widget-title,
#secondary h3.widget-title {
  margin: 0;
  padding: 0 0 .7em;
  font-size: .8rem;
  letter-spacing: .09em;
  color: #5b6770;
}
#secondary aside.widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#secondary aside.widget ul li {
  margin: 0;
  padding: 0;
}
#secondary aside.widget ul li a {
  display: inline-block;
  padding: .3em 0;
  font-size: .95rem;
}
/* "SOS"-Abzeichen: bleibt am Eintrag, ragt nicht mehr in den Fliesstext */
#secondary .cat-item.cat-item-18 a,
#secondary .cat-item.cat-item-25 a {
  margin-left: 0;
  padding-left: 46px;
  background-position: 0 center;
  background-size: auto 26px;
}
#secondary .menu-count {
  font-size: .85em;
  color: #56626b;
}

/* ---------- Beitragsliste auf der Startseite ---------- */
#content .alignleft,
#content img.alignleft {
  margin: .2em 18px 8px 0;
}
#content img.wp-post-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}
#content .widget-title,
#content h3.widget-title {
  margin: 1.6em 0 .6em;
  padding: 1em 0 0;
  border-top: 1px solid #e3e8ec;
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  color: #3a3a3a;
}

/* ---------- Fuss ---------- */
#colophon {
  float: none;
  width: auto;
  padding: 22px 0 0;
  font-size: .85rem;
  color: #5b6770;
}

/* ---------- Schmalere Desktops/Tablets quer: Menue in eigener Zeile unter dem Logo ---------- */
@media screen and (max-width: 1100px) {
  #branding {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  #branding #site-title,
  #branding #mainnav,
  #branding a.headerimage-link,
  #branding #subnav {
    grid-column: 1;
  }
  #branding #site-title { grid-row: 1; }
  #branding #mainnav {
    grid-row: 2;
    justify-self: start;
    margin-left: -.75em;   /* Text des ersten Eintrags fluchtet mit dem Logo */
  }
  #branding #mainnav ul {
    justify-content: flex-start;
  }
  #branding a.headerimage-link { grid-row: 3; margin-top: 8px; }
  #branding #subnav { grid-row: 4; }
}

/* ---------- Tablet: Seitenleiste unter dem Inhalt, aber schmaler Inhalt bleibt lesbar ---------- */
@media screen and (max-width: 1000px) {
  #main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "side";
    row-gap: 32px;
  }
  #content {
    max-width: none;
  }
  #secondary {
    width: 100%;
    margin: 0;
  }
  /* Auf Tablets zwei Bloecke nebeneinander statt eines langen schmalen Balkens */
  #secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  #secondary aside.widget,
  #secondary aside.widget:last-child {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

/* ---------- Handy ---------- */
@media screen and (max-width: 680px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }
  #page {
    width: 100%;
    margin: 0;
    padding: 0 16px 24px;
    border-radius: 0;
    box-shadow: none;
  }
  #branding {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding-top: 14px;
  }
  #branding #site-title,
  #branding #mainnav,
  #branding a.headerimage-link,
  #branding #subnav {
    grid-column: 1;
  }
  #branding #site-title {
    grid-row: 1;
    text-align: center;
  }
  #branding #site-title h1,
  #branding #site-title p.site-name {
    text-align: center;
    font-size: 1.9rem;
  }
  /* Menue unter dem Logo, grosse Tippflaechen, zwei Spalten */
  #branding #mainnav {
    grid-row: 2;
    justify-self: stretch;
  }
  #branding #mainnav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #branding #mainnav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7em .5em;
    min-height: 48px;
    text-align: center;
    background: #f1f4f6;
    font-size: .72rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  #branding a.headerimage-link {
    grid-row: 3;
    margin-top: 8px;
  }
  #branding #subnav {
    grid-row: 4;
  }
  #wrap {
    padding-top: 22px;
  }
  #content h1 {
    font-size: 1.55rem;
  }
  #secondary {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    padding: 20px 18px 22px;
  }
  #secondary aside.widget ul li a {
    padding: .5em 0;
  }
  #content img.wp-post-image {
    width: 96px;
    height: 96px;
  }
  /* In Beitraegen steht oft <table width="55%"> und ein linksbuendiges Foto: auf dem Handy volle Breite,
     Foto in eigener Zeile */
  #content table {
    width: 100% !important;
  }
  #content img.alignleft:not(.wp-post-image),
  #content .wp-caption.alignleft {
    float: none;
    display: block;
    margin: 0 auto 16px;
  }
}

/* ---------- Bewegung reduzieren ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---------- Angaben zur Person (aus den Beitragsfeldern, siehe inc/personendaten.php) ---------- */
table.fw-person {
  width: 100%;
  max-width: 34rem;
  border-spacing: 0;
  border: 1px solid #d9e0e5;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-size: .95rem;
}
/* Ueberschrift = erste Kopfzeile der Tabelle, liegt dadurch im Rahmen */
#content table.fw-person thead tr th {
  padding: .55rem .9rem;
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #5b6770;
  background: #f1f4f6;
  border: 0;
  width: auto;
}

/* Spezifitaet wie im alten CSS (#content table tr td), sonst setzt es Seitenraender an die Zellen */
#content table.fw-person {
  margin: 0 0 1.4rem;
  border-collapse: separate;
}
#content table.fw-person tr th,
#content table.fw-person tr td {
  padding: .5rem .9rem;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-top: 1px solid #e6ebee;
}
#content table.fw-person tbody tr:first-child th,
#content table.fw-person tbody tr:first-child td {
  border-top: 1px solid #e6ebee;
}
#content table.fw-person tr th {
  width: 38%;
  font-weight: 600;
  color: #5b6770;
}
#content table.fw-person tr td {
  color: #2f2f2f;
}
/* Kurzzeile in den Uebersichten */
.fw-kurz {
  margin: 0 0 .35rem;
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #5b6770;
}
@media screen and (max-width: 680px) {
  table.fw-person {
    max-width: none;
  }
  #content table.fw-person tr th {
    width: 42%;
  }
}
/* Tabelle neben dem linksbuendigen Foto: gleiche Ausrichtung wie die frueher handgetippte Tabelle */
#content .single-entry-content img.alignleft + table.fw-person,
#content .single-entry-content a + table.fw-person {
  margin-left: 0;
}

/* ---------- Bilder aus dem Block-Editor wie die alten klassischen Bilder ----------
   Altbeitraege haben <img class="alignleft">. Der Block-Editor speichert
   <div class="wp-block-image"><figure class="alignleft ..."><img></figure></div> (Klasse an der inneren figure).
   Das klassische Theme liefert fuer diese Struktur keinen Float; hier das Aequivalent der alten img-Regeln. */
#content .wp-block-image {
  margin: 0;
}
#content .wp-block-image figure {
  margin: 0;
}
#content .wp-block-image figure.alignleft {
  float: left;
  display: block;
  margin: .2em 20px 12px 0;
  max-width: 50%;
}
#content .wp-block-image figure.alignright {
  float: right;
  display: block;
  margin: .2em 0 12px 20px;
  max-width: 50%;
}
#content .wp-block-image figure.aligncenter {
  float: none;
  display: block;
  margin: 1em auto;
  text-align: center;
}
#content .wp-block-image figure.alignnone {
  margin: 0 0 1em;
}
#content .wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
#content .wp-block-image figcaption {
  display: block;
  margin: 6px 0 0;
  font-size: .85rem;
  line-height: 1.4;
  color: #5b6770;
  text-align: center;
}
@media screen and (max-width: 680px) {
  #content .wp-block-image figure.alignleft,
  #content .wp-block-image figure.alignright {
    float: none;
    max-width: 100%;
    margin: 0 auto 16px;
  }
  #content .wp-block-image figure.alignleft img,
  #content .wp-block-image figure.alignright img {
    margin: 0 auto;
  }
}

/* Das alte Theme setzt "#content .post p { clear: both }" und hebt es nur fuer klassische Absaetze auf.
   Absaetze neben Block-Bildern muessen am Bild vorbeifliessen duerfen, sonst rutscht der Text darunter. */
#content .single-entry-content .wp-block-paragraph,
#content .single-entry-content .wp-block-image + p,
#content .single-entry-content .wp-block-image + .wp-block-paragraph {
  clear: none;
}
/* Ueberschriften und Tabellen duerfen weiter unter ein Bild rutschen; die Personentabelle bleibt neben dem ersten Foto */
#content .single-entry-content .wp-block-heading,
#content .single-entry-content .wp-block-separator {
  clear: both;
}

/* Fotorahmen wie bei den alten Beitragsbildern (style.css: img.size-medium mit 1px #ddd und 10px Abstand) */
#content .single-entry-content .wp-block-image img {
  border: 1px solid #ddd;
  padding: 10px;
  box-sizing: content-box;
  background: #fff;
}
#content .single-entry-content .wp-block-image figure.alignleft,
#content .single-entry-content .wp-block-image figure.alignright {
  max-width: 50%;
}
#content .single-entry-content .wp-block-image figure.alignleft img,
#content .single-entry-content .wp-block-image figure.alignright img {
  max-width: 100%;
}
/* Der Editor legt nach einem linksbuendigen Bild gern einen leeren Absatz an: der soll keinen Platz einnehmen */
#content .single-entry-content p:empty {
  display: none;
}

/* Foto am Anfang des Beitrags (Text laeuft daneben): Das alte Theme setzt "#content .post p { clear: both }". Bisher stand die Tabelle
   "Zur Person" zwischen Foto und Text, wodurch der Text neben dem Foto begann. Steht die Tabelle jetzt im Kopf, muss der erste
   Textabsatz hinter einem Foto am Anfang am Foto vorbeifliessen duerfen. Alle weiteren Absaetze bleiben unveraendert. */
#content .single-entry-content > table.fw-person + p + p,
#content .single-entry-content > table.fw-person + .wp-block-image + p {
  clear: none;
}

/* ---------- Tabelle "Zur Person": bei genug Breite zweispaltig ----------
   Die Zeilen sind kurz (Median 7 Zeichen, 99 % bis 27 Zeichen), die Tabelle hat 4 bis 6 Zeilen. Auf breiten Inhaltsbereichen
   stehen sie deshalb in zwei Spalten (links Person: Name, Alter, Geburtsort; rechts Wohnort, Land, Beruf), das macht die Tabelle
   etwa halb so hoch. Ab 681 px Fensterbreite (darunter: eine Spalte wie bisher). Das HTML bleibt eine Tabelle (Screenreader);
   --fw-z (Zeilen je Spalte) kommt aus inc/personendaten.php. */
#content table.fw-person {
  max-width: none;
}
/* Das alte Theme (style.css) setzt Rahmen an thead, tr, th und td ("#content table tr { border-top/bottom }"). In der Tabellenansicht
   werden sie von border-collapse zusammengelegt; hier, mit display:block/grid, lagen sie uebereinander und ergaben einen
   doppelten, dicken oberen Rand. Deshalb alles auf null und nur die gewuenschten Linien neu setzen. */
#content table.fw-person thead,
#content table.fw-person thead tr,
#content table.fw-person thead tr th,
#content table.fw-person tbody,
#content table.fw-person tbody tr,
#content table.fw-person tbody tr th,
#content table.fw-person tbody tr td,
#content table.fw-person tbody tr:first-child th,
#content table.fw-person tbody tr:first-child td {
  border: 0;
}
/* Einspaltige Ansicht (Handy): Linie unter der Kopfzeile und zwischen den Zeilen, an den Zellen */
#content table.fw-person thead tr th {
  border-bottom: 1px solid #e6ebee;
}
#content table.fw-person tbody tr + tr th,
#content table.fw-person tbody tr + tr td {
  border-top: 1px solid #e6ebee;
}
@media screen and (min-width: 681px) {
  #content table.fw-person,
  #content table.fw-person thead,
  #content table.fw-person tbody {
    display: block;
    max-width: 44rem;
  }
  #content table.fw-person {
    border: 1px solid #d9e0e5;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }
  #content table.fw-person tbody tr + tr th,
  #content table.fw-person tbody tr + tr td {
    border-top: 0;
  }
  #content table.fw-person thead tr {
    display: block;
  }
  #content table.fw-person thead tr th {
    display: block;
    border-bottom: 1px solid #e6ebee;
  }
  #content table.fw-person tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--fw-z, 3), auto);
    grid-auto-flow: column;
    column-gap: 0;
    /* Trennlinie zwischen den beiden Spalten */
    background: linear-gradient(#e6ebee, #e6ebee) 50% 0 / 1px 100% no-repeat;
  }
  #content table.fw-person tbody tr {
    display: grid;
    grid-template-columns: minmax(8.5rem, 46%) minmax(0, 1fr);
    border-top: 0;
    border-bottom: 1px solid #e6ebee;
  }
  /* Die letzte Zeile einer Spalte schliesst mit dem Aussenrahmen ab, dort keine eigene Linie; Zeilen am Tabellenende ebenfalls nicht */
  #content table.fw-person tbody tr:last-child,
  #content table.fw-person.fw-z2 tbody tr:nth-child(2),
  #content table.fw-person.fw-z3 tbody tr:nth-child(3),
  #content table.fw-person.fw-z4 tbody tr:nth-child(4) {
    border-bottom: 0;
  }
  #content table.fw-person tbody tr th,
  #content table.fw-person tbody tr td {
    width: auto;
    border: 0;
    overflow-wrap: anywhere;
  }
}


/* ---------- Barrierefreiheit: Sprungmarke, Hauptbereich, Bewegung ---------- */
a.fw-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10000;
  padding: 10px 16px;
  background: #005b73;
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
}
a.fw-skip:focus {
  top: 0;
  outline: 3px solid #ffe07a;
  outline-offset: 2px;
  color: #fff;
}
#content:focus { outline: none; }
#branding #site-title p.site-name a { text-decoration: none; }

/* ---------- Meta-Zeile unter Beitraegen und Eintraegen (Datum, Kategorien, Permalink) ---------- */
#content .entry-meta p,
#content .post .single-entry-meta p {
  padding: 12px 0 0;
  font: normal .875rem/1.5 'Noto Sans', system-ui, sans-serif;
  color: #4a5860;
}
#content .entry-meta a,
#content .post .single-entry-meta a {
  font-family: 'Noto Sans', system-ui, sans-serif;
}
#content .entry-meta time.entry-date,
#content .post .single-entry-meta time.entry-date {
  font-style: normal;
  font-weight: 600;
  color: #2f3b42;
  white-space: nowrap;
}

/* ---------- Ueberschriften: ruhiger, kleiner, nicht so schwer ---------- */
/* Titel eines einzelnen Beitrags */
#content .single-entry-header h1.entry-title {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
/* Titel in Uebersichten (Kategorie, Archiv, Suche, Startseite) */
#content .post .entry-header h2.entry-title,
#content .entry-header h2.entry-title,
#content .fw-neueste h3.entry-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 0 0 .15em;
}
/* Seitentitel (Startseite, Spenden, Kontakt ...) bleiben Seitenueberschriften, nur etwas zurueckgenommen */
#content .page-entry-header h1.entry-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}
@media screen and (max-width: 680px) {
  #content .single-entry-header h1.entry-title { font-size: 1.15rem; }
  #content .entry-header h2.entry-title,
  #content .fw-neueste h3.entry-title { font-size: 1.05rem; }
  #content .page-entry-header h1.entry-title { font-size: 1.35rem; }
}
/* Abschnittsueberschrift "Neueste Beitraege": kleiner als die Beitragstitel darunter, wie die Ueberschriften der Seitenleiste */
#content .fw-neueste h2.widget-title {
  margin: 1.4em 0 1em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3a4a52;
}
/* Luft zwischen Meta-Zeile und Trennlinie eines Eintrags */
#content article.post {
  padding-bottom: 22px;
}
#content .entry-meta p {
  padding-bottom: 0;
  margin: 0;
}


/* ---------- Spendenanfrage (inc/spendenformular.php) ---------- */
form.fw-spendenform, div.fw-spendenform {
  max-width: 640px;
  margin: 2em 0;
  padding: 24px 26px 8px;
  background: #f5f8fa;
  border: 1px solid #dfe6ea;
  border-radius: 12px;
}
.fw-spendenform h3 { margin: 0 0 .4em; padding: 0; font-size: 1.15rem; border: 0; color: #00485c; }
.fw-spendenform p { margin: 0 0 1em; padding: 0; }
.fw-spendenform .fw-sp-intro { color: #4a5860; font-size: .95rem; }
.fw-spendenform label { display: block; margin: 0 0 .3em; font-weight: 600; font-size: .95rem; color: #22303a; }
.fw-spendenform input[type=text], .fw-spendenform input[type=email], .fw-spendenform select, .fw-spendenform textarea {
  display: block; width: 100%; box-sizing: border-box; padding: 11px 12px; font: inherit; color: #22303a;
  background: #fff; border: 1px solid #aebbc3; border-radius: 8px;
}
.fw-spendenform input:focus-visible, .fw-spendenform select:focus-visible, .fw-spendenform textarea:focus-visible, .fw-spendenform button:focus-visible {
  outline: 3px solid #00809f; outline-offset: 2px;
}
.fw-spendenform .fw-sp-zustimmung label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
.fw-spendenform .fw-sp-zustimmung input { margin-top: .25em; flex: none; }
.fw-spendenform .fw-sp-pflicht { color: #b3261e; margin-left: .15em; }
.fw-spendenform .fw-sp-koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fw-spendenform .fw-sp-knopf {
  display: inline-block; padding: 12px 26px; font: inherit; font-weight: 700; color: #1d2a30; background: #ffd23f;
  border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.fw-spendenform .fw-sp-knopf:hover { background: #ffe07a; }
.fw-spendenform .fw-sp-meldung { padding: 12px 14px; border-radius: 8px; font-weight: 600; }
.fw-spendenform .fw-sp-ok { background: #e4f5e8; color: #1f5f31; }
.fw-spendenform .fw-sp-fehler { background: #fdeceb; color: #8a1c14; }
@media (max-width: 560px) { form.fw-spendenform { padding: 18px 16px 4px; } }