/* Token-Overrides und kleine Ergänzungen zur Legacy-Optik */

body {
  font-family: var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  color: var(--c-text, #333333);
}

a {
  color: var(--c-link, #0088cc);
  /* Weicher Übergang statt hartem Wechsel bei Hover/Focus (Feinschliff) */
  transition: color 0.15s ease, background-color 0.15s ease;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-headings, inherit);
}

.page-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.themap {
  width: 100%;
  height: auto;
}

.map-holder {
  position: relative;
}

/* Bildkarte weicht auf schmalen Geraeten der Standortliste unter ihr.
   Das Original blendet die Karte erst unter 630 px aus; hier schon ab 768 px,
   weil die Kartenpunkte auf dem Telefon nicht mehr treffbar sind. */
@media (max-width: 767px) {
  #imagemap {
    display: none;
  }
}

/* Suchformular in der ausgeklappten Navigation (nur Telefon) */
.nav-search {
  display: none;
}
@media (max-width: 767px) {
  .nav-search {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .nav-search input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
  }
  .nav-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  .nav-search button {
    padding: 9px 14px;
    border: none;
    border-radius: 4px;
    background: var(--c-button, #126690);
    color: #fff;
    font-size: 13.5px;
    cursor: pointer;
  }
}

.sitemap-list {
  list-style: none;
  margin: 10px 0 30px 0;
}
.sitemap-list li {
  padding: 3px 0;
}

/* Suchfeld im Header wie im Original ausrichten */
.search-all form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Suchfeld und Suchknopf exakt gleich hoch: im Original waren sie ein paar
   Pixel gegeneinander versetzt (Kundenmeldung zur Ausrichtung im Kopfbereich). */
.search-all input[type='text'] {
  height: 30px;
  box-sizing: border-box;
  margin: 0;
}
.search-all .headerbtn {
  height: 30px;
  width: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-all .headerbtn img {
  height: 27px;
  width: auto;
}

/* ============================================================
   Kopfbereich ab 980 px: Logo links, Suche und Login rechts
   Das Original floatet den Login-Knopf nach rechts und das Suchfeld nach
   links mit clear:both. Dadurch landet die Suche immer unter dem
   Login-Knopf statt daneben, und der Login-Knopf haengt dabei mittig im
   Kopfbereich statt an der Kante (Kundenmeldung). Hier werden Login und
   Suche auf eine gemeinsame Zeile gebracht, mit dem gleichen Randabstand
   (20 px) wie .content-inner und die Navigation darunter.
   ============================================================ */
#header::before,
#header::after {
  /* Der Clearfix von .row-fluid erzeugt sonst zwei leere Pseudo-Elemente,
     die als zusaetzliche Flex-Kinder mitzaehlen und Logo sowie Kopfbereich
     von den Raendern weg zur Mitte schieben. */
  content: none;
}

@media (min-width: 980px) {
  #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Ohne border-box zaehlt der Innenabstand zur Breite dazu, der weisse
       Kopfbalken stand dann 20 px weiter rechts als Menue, Banner und
       Inhalt darunter. */
    box-sizing: border-box;
    padding-right: 20px;
  }
  .header-bar {
    float: none;
    width: auto;
  }
  .navbar-form.pull-right {
    float: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
  }
  .members-login {
    float: none;
    padding: 0;
  }
  .search-all {
    float: none;
    clear: none;
    padding: 0;
  }
}

/* Fusszeile ab Tablet: Copyright links, Rechtslinks rechts, alles auf einer
   Zeile. Das Original-Raster gab dem Menü nur 5 von 12 Spalten, dadurch brach
   der letzte Link um, während die rechte Hälfte leer blieb. */
@media (min-width: 980px) {
  .footer-content {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }
  #footerCopy,
  #footerMenu {
    width: auto;
    float: none;
    margin: 0;
  }
  #footerMenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 26px;
    row-gap: 4px;
  }
  #footerMenu a {
    width: auto;
    padding: 0;
    white-space: nowrap;
  }
}

/* ============================================================
   Mobile (bis 767 px)
   Das Original-CSS von 2013 bricht auf heutigen Telefonen auseinander:
   Suchfeld über dem Logo, unlesbar grosse Überschriften, Randlosigkeit.
   Hier wird der Kopfbereich neu geordnet, ohne den Desktop anzutasten.
   ============================================================ */

@media (max-width: 979px) {
  #wrapper.container {
    width: auto;
    padding: 0;
  }
  /* Alle Raster-Zeilen sind 100 % breit; ohne border-box addiert jeder
     Innenabstand Breite dazu und die Seite lässt sich seitlich schieben. */
  #wrapper .row-fluid {
    box-sizing: border-box;
  }

  /* --- Kopfbereich: Logo links, Login rechts, Suche darunter --- */
  #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background-size: auto 100%;
  }
  .logo {
    width: auto;
    display: block;
  }
  /* #logo traegt aus dem Original noch 20 px padding-left; zusammen mit dem
     Innenabstand von #header ergab das einen doppelt so grossen Randabstand
     wie beim Inhalt darunter. Die Kante uebernimmt hier allein #header. */
  #logo {
    padding-left: 0;
  }
  .logo img.toplayer {
    height: 42px;
    width: auto;
  }
  .header-bar {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
  }
  .navbar-form {
    float: none !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Das Original blendet den Login auf Telefonen aus — hier wieder sichtbar */
  .members-login {
    display: block;
    float: none;
    padding: 0;
    order: 1;
  }
  .logo {
    text-align: left;
  }
  .members-login a {
    display: inline-block;
    box-shadow: none;
    border-radius: 4px;
    font-size: 12px;
    padding: 9px 12px;
    white-space: nowrap;
  }

  /* --- Navigationsleiste --- */
  #header-nav {
    padding: 0;
  }
  /* Bootstrap gibt .span12 hier nur einen Bruchteil der Breite — korrigieren */
  #header-nav .navbar,
  #header-nav .navbar-inner,
  #header-nav .container {
    margin: 0;
    padding: 0;
    width: 100%;
    float: none;
  }
  .navbar .btn-navbar {
    display: block;
    float: none;
    /* Ohne border-box zählt Bootstrap die 16 px Innenabstand zur Breite dazu,
       die Leiste wurde dadurch 32 px breiter als der Bildschirm. */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    background: var(--c-footer-bg, #1e4c80);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .navbar .btn-navbar .icon-bar {
    background: #fff;
    box-shadow: none;
    width: 22px;
    height: 2px;
    display: block;
    /* Daumenweg: das Symbol steht rechts, bündig mit dem Login-Knopf darüber */
    margin: 4px 0 4px auto;
    border-radius: 2px;
  }
  .nav-collapse {
    background: #123a63;
  }
  .navbar .nav {
    margin: 0;
    float: none;
  }
  .navbar .nav > li {
    float: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .navbar .nav > li > a {
    /* 48 px Zielfläche: bequem mit dem Daumen zu treffen */
    padding: 14px 16px;
    font-size: 15px;
    background-image: none;
  }
  .navbar .nav > .active > a,
  .navbar .nav > li > a:hover {
    background: rgba(255, 255, 255, 0.12);
    background-image: none;
  }

  /* --- Inhalt --- */
  #mainContent {
    padding: 0;
  }
  .content-inner {
    padding: 16px;
  }
  #main-content-area .span4,
  #main-content-area .span8,
  #main-content-area .span12 {
    width: auto;
    float: none;
    margin-left: 0;
  }
  h1 {
    font-size: 21px;
    line-height: 1.25;
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .extralarge {
    font-size: 100%;
  }
  .banner-trans,
  .homepage .banner-trans {
    position: static;
    width: auto;
    padding: 0;
  }
  p,
  .content-inner ul {
    font-size: 14px;
    line-height: 1.6;
  }
  .content-inner ul {
    padding-left: 20px;
  }

  /* --- Kanzlei-Detailseite: erst das Profil, dann die Übersicht --- */
  #main-content-area {
    display: flex;
    flex-direction: column;
  }
  #main-content-area > #content {
    order: 1;
  }
  #main-content-area > .span4 {
    order: 2;
  }
  .columncontent.ontop h3 {
    font-size: 16px;
    padding: 10px 16px;
    margin: 0;
  }
  .list-element {
    padding: 0 16px;
  }
  /* .content-inner ul weiter oben setzt einen Einzug; der Reiter-Streifen ist
     aber eine Navigation und braucht die volle Breite. */
  .content-inner .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 1px solid #ddd;
  }
  .nav-tabs > li {
    float: none;
    margin: 0;
  }
  .nav-tabs > li > a {
    padding: 8px 10px;
    font-size: 12.5px;
    margin: 0;
  }

  /* --- Fusszeile --- */
  #footer {
    padding: 0;
  }
  #footerArea {
    display: none;
  }
  .footer-content {
    /* .row-fluid ist 100 % breit und rechnet ohne border-box; die 16 px
       Innenabstand schoben die Fusszeile sonst über den Bildschirmrand. */
    box-sizing: border-box;
    background: var(--c-footer-bg, #1e4c80);
    padding: 18px 16px 22px;
    margin: 0;
  }
  #footerCopy,
  #footerMenu {
    width: auto;
    float: none;
    margin: 0;
  }
  #footerCopy p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12.5px;
    margin: 0 0 10px;
  }
  #footerMenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  #footerMenu a {
    width: auto;
    display: block;
    padding: 8px 0;
    color: #fff;
    font-size: 13.5px;
  }

  /* Tabellen in CMS-Inhalten scrollbar statt überlaufend */
  .content-inner table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Tablet: vier Menüpunkte passen nebeneinander, kein Aufklapp-Button nötig */
@media (min-width: 768px) and (max-width: 979px) {
  .navbar .btn-navbar {
    display: none;
  }
  .nav-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    background: #123a63;
    width: 100%;
    float: none;
  }
  .nav-collapse > div,
  .navbar .nav {
    display: flex;
    width: 100%;
    margin: 0;
  }
  .navbar .nav > li {
    flex: 1;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
  .navbar .nav > li:first-child {
    border-left: none;
  }
  .navbar .nav > li > a {
    text-align: center;
    padding: 13px 8px;
  }
}

/* Nur Telefon: Suche wandert ins Menü, Schrift etwas kleiner */
@media (max-width: 767px) {
  body {
    font-size: 15px;
    /* Bootstrap legt hier 20 px Aussenabstand an. Auf dem Telefon rahmte das
       die Seite grau ein und nahm 40 px Lesebreite weg. */
    padding-left: 0;
    padding-right: 0;
  }
  .search-all {
    display: none;
  }
  h1 {
    font-size: 21px;
  }

  /* Logos im Alt-Content stehen per Inline-Stil im Textfluss rechts; auf dem
     Telefon bleibt daneben kein Platz, sie kommen deshalb auf eine eigene Zeile. */
  #main-content-area img[style*="float"] {
    float: none !important;
    display: block;
    margin: 12px 0;
  }
}

/* Blocksatz: Der Alt-Content ist durchgehend im Blocksatz gesetzt. Nicht nur
   auf dem Telefon reisst das Löcher zwischen die Wörter, auch auf Tablets
   und schmalen Fenstern bis 900 px wirkt das unruhig, deshalb hier ebenfalls
   linksbündig. */
@media (max-width: 900px) {
  #main-content-area [style*="justify"],
  #main-content-area [align="justify"] {
    text-align: left !important;
  }
}

/* ============================================================
   Lesbarkeit Fliesstext (ab Tablet)
   12 px bei 20 px Zeilenhöhe und rund 157 Zeichen pro Zeile (940 px Spalte)
   sind auf dem Bildschirm zu klein und zu lang. Etwas grösser setzen und auf
   den einspaltigen Seiten die Zeilenlänge auf eine lesbare Mass begrenzen.
   Die zweispaltigen Mitgliederseiten (.content.span8) bleiben unangetastet.
   ============================================================ */
@media (min-width: 768px) {
  p,
  .content-inner ul,
  .content-inner ol {
    font-size: 13px;
    line-height: 1.65;
  }
  .content.span12 .peContent,
  .content.span12 .plainitem {
    max-width: 78ch;
  }
}

/* ============================================================
   Zustände: Login-Knopf und Fusszeilen-Links erben sonst die globale
   a:hover-Farbe (#005580), die auf ihrem eigenen blauen Grund fast
   unsichtbar wird. Eigene, klar sichtbare Zustände mit weichem Übergang.
   ============================================================ */
.members-login a {
  transition: background-color 0.15s ease, color 0.15s ease;
}
.members-login a:hover,
.members-login a:focus {
  background-color: var(--c-footer-bg, #1e4c80);
  color: #fff;
}
#footerMenu a {
  transition: color 0.15s ease;
}
#footerMenu a:hover,
#footerMenu a:focus {
  color: var(--c-primary, #9f904d);
}

/* Hinweis auf die Design-Agentur: bewusst kleiner als das Copyright. */
#footerCopy .footer-credit {
  font-size: 11px;
  opacity: 0.75;
}
#footerCopy .footer-credit a {
  color: inherit;
  text-decoration: underline;
}
#footerCopy .footer-credit a:hover,
#footerCopy .footer-credit a:focus {
  color: var(--c-primary, #9f904d);
}

/* ============================================================
   Sichtbare Fokusringe für Tastaturbedienung auf dunklem Grund. Der
   Browser-Standardring ist dort kaum erkennbar, deshalb weiss und nur für
   Tastaturbedienung (:focus-visible), nicht bei Maus-/Touch-Klick.
   ============================================================ */
.navbar .nav > li > a:focus-visible,
.btn-navbar:focus-visible,
.members-login a:focus-visible,
.search-all input:focus-visible,
.search-all button:focus-visible,
.nav-search input:focus-visible,
.nav-search button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   Rhythmus und Abstände
   ============================================================ */
h2 {
  margin: 0 0 14px;
}
.plainitem + .plainitem {
  margin-top: 30px;
}
/* ============================================================
   Sprachwechsel innerhalb einer Seite (Kundenmeldung: Englisch und
   Französisch gehen auf der Startseite ineinander über). Nur Abschnitte
   mit gesetztem lang-Feld bekommen die Trennung: eine feine Linie, etwas
   mehr Abstand und eine kleine, dezente Sprachbezeichnung in der
   Goldfarbe. Bewusst zurückhaltend, keine Reiter, keine neue Farbwelt.
   ============================================================ */
.plainitem.lang-shift {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #ddd;
}
.lang-label {
  margin: 0 0 8px;
  color: var(--c-primary, #9f904d);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Trennlinie in der Mitglieder-Seitenleiste: 0 wirkt zusammengequetscht */
.pull-right .columncontent hr {
  margin: 16px 0;
}

/* ============================================================
   Trefferflächen: Fusszeilen-Links und Reiter auf den
   Mitglieder-Detailseiten waren mit rund 20 px deutlich zu knapp.
   ============================================================ */
@media (max-width: 979px) {
  /* Fusszeile ist hier eine gestapelte Liste; 44 px ist die gängige
     Mindest-Zielgrösse für Daumen. */
  #footerMenu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
@media (max-width: 767px) {
  .content-inner .nav-tabs > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 768px) {
  /* Desktop: 20 px Zeilenhöhe ohne Polster war eine sehr knappe Klickfläche */
  .content-inner .nav-tabs > li > a {
    padding: 8px 0;
  }
}

/* ============================================================
   Layoutsprünge vermeiden: Platz reservieren, bevor Bilder geladen sind.
   ============================================================ */
.page-banner {
  min-height: 120px;
}
@media (min-width: 768px) {
  .page-banner {
    min-height: 200px;
  }
}
/* Kartenbild hat ein bekanntes Format (980x588) und reserviert seinen Platz
   dadurch passgenau statt nur näherungsweise über eine feste Höhe. */
.map-holder {
  aspect-ratio: 980 / 588;
}

/* ============================================================
   Standortliste mit Flaggen (Members-Seite und Contact-Seitenspalte).
   Gestaltung liefert das Alt-CSS ueber .member .summary .side bzw.
   .contact .summary .item; hier nur die Ergaenzungen fuer schmale Geraete.
   ============================================================ */
@media (max-width: 767px) {
  /* Zwei 49-Prozent-Spalten sind fuer "Amsterdam, The Netherlands" neben der
     Flagge zu eng, auf dem Telefon deshalb eine Spalte. */
  .contact .summary .item,
  .member .summary .side {
    display: block;
    width: auto;
  }
  /* Gleiche Mindest-Zielgroesse wie bei den uebrigen Links */
  .member .summary .side .linepagetitle a,
  .contact .summary .item .linepagetitle a {
    display: block;
    padding: 10px 0;
  }
}

/* ============================================================
   Startseite ohne Scrollen.

   Auf einem 1366x768-Laptop bleiben nach Browserleiste und Taskleiste rund
   625 px nutzbare Hoehe. Die Startseite war 853 px hoch, man musste also gut
   230 px scrollen, um Text und Fusszeile zu sehen. Gemessen mit dem echten
   Alt-CSS in Chromium.

   Die Regeln greifen nur bei knapper Bauhoehe (max-height) und ab Tablet-
   Breite. Auf grossen Monitoren passt die Seite ohnehin, dort aendert sich
   nichts; auf dem Telefon wird ohnehin gescrollt, dort waere ein zusammen-
   gestauchter Banner nur schlechter.

   Reihenfolge des Nachgebens: zuerst der Banner (rein dekorativ), dann die
   Abstaende, zuletzt nichts an der Schriftgroesse des Fliesstextes. Der
   Lesetext bleibt unangetastet.
   ============================================================ */
@media (min-width: 768px) and (max-height: 900px) {
  /* Der Banner ist mit 347 px der groesste Block und gibt zuerst nach.
     Feste Hoehe statt height:auto, damit der Platz schon vor dem Laden
     steht und nichts springt. object-fit beschneidet das Bild, statt es
     zu verzerren; der Bildausschnitt sitzt leicht oberhalb der Mitte, dort
     liegt bei den Bannerfotos das Motiv.

     Die Hoehe bemisst sich am tatsaechlich freien Platz, nicht an einem
     festen Anteil der Fensterhoehe. Alles ausser dem Banner (Kopf,
     Navigation, Text, Fuss) braucht mit den Kuerzungen unten 474 px,
     nachgemessen am echten zweisprachigen Starttext (Englisch plus
     Franzoesisch, siehe Kuerzung bei .lang-shift unten); die 490 lassen
     rund 16 px Reserve. Die erste Fassung hatte nur den englischen Text
     gemessen und liess die franzoesische Wiederholung aussen vor, dadurch
     blieb die Seite auf ueblichen Laptop-Hoehen (z. B. 1366x768) rund
     70 px zu hoch und scrollte trotz dieser Regel noch.

     Untergrenze 90 px: darunter waere der Banner nur noch ein Streifen.
     Damit passt die Seite bis hinunter zu rund 564 px Fensterhoehe.
     Wer sein Browserfenster noch flacher zieht, scrollt wieder, das ist
     unvermeidlich: Kopf, zweisprachiger Text und Fuss allein brauchen
     schon 474 px.

     Die Obergrenze ist die natuerliche Hoehe des Bildes (980x340 skaliert
     auf die 980 px Containerbreite). Dadurch geht der Banner stufenlos in
     die unveraenderte Darstellung ueber, sobald das Fenster hoch genug
     ist, und springt an der Grenze der Media Query nicht. */
  .homepage .page-banner img {
    height: clamp(90px, calc(100svh - 490px), 340px);
    object-fit: cover;
    object-position: center 38%;
  }
  /* Die Platzreservierung von oben wuerde den kuerzeren Banner sonst wieder
     auf 200 px aufblasen. Die feste Hoehe am Bild reserviert den Platz jetzt
     selbst, die Mindesthoehe wird hier also nicht mehr gebraucht. */
  .homepage .page-banner {
    min-height: 0;
  }

  /* Der halbtransparente Textkasten sitzt absolut im Banner. Mit dem
     kuerzeren Banner muss er von oben heranruecken und kompakter setzen,
     sonst steht er unten heraus. Breiter als die 26 Prozent des Alt-CSS,
     damit die Zeilen trotz kleinerer Schrift nicht oefter umbrechen. */
  .homepage .banner-trans {
    top: 0;
    width: 38%;
  }
  .homepage .banner-trans-inner {
    padding-top: 14px;
  }
  .homepage .banner-trans-inner h1 {
    margin: 4px 0;
    font-size: 17px;
    line-height: 19px;
  }

  /* Die Ueberschrift "Welcome to the Lexicom website" hat im Alt-CSS je
     30 px Innenabstand oben und unten, zusammen 60 px allein an Luft. */
  #content.homepage .peContent h1 {
    padding-top: 10px;
    padding-bottom: 12px;
  }
  #content.homepage .peContent p {
    margin-bottom: 10px;
  }
  #content.homepage .peContent p:last-child {
    margin-bottom: 0;
  }

  /* Startseite zeigt Englisch und darunter, per Sprachwechsel-Trennlinie
     abgesetzt, denselben Text auf Franzoesisch (siehe CmsPage.tsx,
     isLangShift). Die Trennlinie allein kostet im Alt-CSS 40 px Abstand
     plus 22 px Innenabstand, macht zusammen 62 px reine Luft vor einer
     zweiten Textwiederholung. Das ist der Hauptgrund, warum die Seite
     trotz der Anpassungen oben noch scrollte: die erste Fassung dieser
     Regel kannte den zweiten Sprachblock nicht. */
  #content.homepage .plainitem.lang-shift {
    margin-top: 14px;
    padding-top: 10px;
  }
  #content.homepage .lang-label {
    margin-bottom: 4px;
  }

  /* Kopf- und Fusszeile geben den Rest her: das Logo etwas kleiner (es
     behaelt sein Seitenverhaeltnis ueber width:auto), weniger Luft um die
     Navigation und unter dem Inhalt.

     Kopf und Fuss liegen ausserhalb von .homepage, deshalb der Umweg ueber
     :has() am Wrapper. So bleiben die Unterseiten (Members, Contact, About
     Us, die Rechtsseiten) unveraendert, sie sollen ja weiterhin scrollen
     duerfen und wurden nicht beanstandet.

     Browser ohne :has() (Stand 2026 praktisch nur noch sehr alte) lassen
     diesen Block einfach aus. Dann bleibt der Kopf gross und die Startseite
     scrollt auf den knappsten Laptops wieder ein Stueck, also genau der
     heutige Zustand. Kein kaputtes Layout, nur kein Gewinn. */
  #wrapper:has(#content.homepage) #header .logo img.toplayer {
    height: clamp(56px, 9svh, 88px);
    width: auto;
  }
  #wrapper:has(#content.homepage) #header-nav {
    padding-top: 4px;
  }
  #wrapper:has(#content.homepage) #mainContent {
    padding-bottom: 0;
  }
  #wrapper:has(#content.homepage) .footer-content {
    padding-top: 4px;
  }
}

/* Nur für Screenreader und Suchmaschinen sichtbar.

   Auf der Members-Seite steht über der Karte ein <h1>Members</h1>. Das
   Original hat es an derselben Stelle, im Bild wirkt es aber doppelt: der
   Navigationspunkt MEMBERS ist bereits hervorgehoben. Es ist zugleich die
   einzige Hauptüberschrift dieser Seite, ersatzloses Löschen würde sie also
   ohne h1 zurücklassen. Deshalb ausgeblendet statt entfernt. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}