/* ----- Urbar-Bereichsnavigation (Startseite/Karte/Detailsuche) -----
   Siehe ritterorden-subnav.php. Liegt im Markup als Geschwisterelement VOR #content-outer-wrap,
   direkt innerhalb von #outer-wrap. Anders als auf den anderen drei Urbar-Seiten setzt weder
   basic.css noch diese Seite selbst einen oberen Randabstand auf #outer-wrap (der bereits
   vorhandene Versatz von 4.5% liegt dort stattdessen auf .intro-area#intro, siehe css/index.css) -
   ohne einen eigenen oberen Randabstand läge diese Leiste sonst hinter dem fixierten #top-nav.
   Derselbe Wert (4.5%) wie auf den anderen drei Seiten, nur hier direkt an der Komponente statt an
   #outer-wrap gesetzt. Dieselbe Regel ist aus demselben Grund wie .secondary-nav-link (siehe dort in
   ritter.css/ritterkarte.css) dupliziert, da keine der drei Seiten ein gemeinsames CSS lädt.
   Bewusst weiß statt der ursprünglichen Archivgrau-Fläche (#f3f2ee) und ohne Schatten: die Leiste
   soll als schlanke Sekundärnavigation unter dem schwarzen #top-nav wirken, nicht wie eine zweite
   Informationskarte/ein zweiter Header. Der Trennstrich bleibt nur als extrem dezente 1px-Linie
   erhalten, damit die Leiste sich weder unsichtbar mit dem Seiteninhalt darunter vermischt noch
   selbst wie eine eigenständige Box wirkt.
   margin-top: siehe ausführliche Begründung für max() in ritter.css (identischer Grund/identische
   Media-Query-Grenze) - reines 4.5% (% der Viewport-Breite) konnte die tatsächliche #top-nav-Höhe bei
   stärkerem Browser-Zoom unterschreiten, wodurch diese Leiste teilweise hinter dem fixierten #top-nav
   verschwand.
   Innenabstand/Zeilenhöhe/Schriftgröße bewusst knapp gehalten (0.3em statt 0.5em Innenabstand,
   line-height:1.2 statt Browser-Standard, 0.8em statt 0.85em Schrift), identisch zu ritter.css/
   ritterkarte.css: reine Kompaktheit der Leiste selbst, betrifft NICHT ihren margin-top/
   max(4.5%, 65px)-Sicherheitsabstand zu #top-nav oben (siehe dort) - der bleibt unverändert.
   Sockelwerte (2026-09-16 auf 65px/78px korrigiert): siehe ritter.css, identische, per Firefox-
   DevTools Box-Modell real gemessene Werte (57.13px Desktop, 42.13-69.28px Mobil je nach Breite bis
   zur 900px-Grenze) - die vorherigen 100px/50px waren nicht wirklich verifiziert und der 50px-Mobil-
   Sockel lag sogar unter der real gemessenen Höhe nahe der 900px-Grenze. */
.urbar-subnav {
    width: 100%;
    box-sizing: border-box;
    margin-top: max(4.5%, 65px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3em 4%;
    background: #ffffff;
    border-bottom: 1px solid #eee;
}

@media screen and (max-width: 900px) {
    .urbar-subnav {
        margin-top: max(4.5%, 78px);
    }
}

.urbar-subnav-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3em 1.8em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.urbar-subnav-link {
    color: #555;
    text-decoration: none;
    padding-bottom: 0.1em;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.urbar-subnav-link:hover {
    color: #080808;
    border-color: #999;
}

.urbar-subnav-link-aktiv {
    color: #080808;
    font-weight: 600;
    border-bottom: 1px solid #080808;
}

@media screen and (max-width: 700px) {
    .urbar-subnav {
        padding: 0.3em 5%;
    }

    .urbar-subnav-links {
        gap: 0.3em 1.2em;
    }
}

/* Intro-Text auf der Startseite: css/index.css setzt hier font-size:1.5em, was neben der übrigen,
   inzwischen zurückhaltenderen Typografie der Seite überdimensioniert wirkte. Weiter reduziert
   (1.5em -> 1.3em -> 1.2em): auch 1.3em wirkte neben dem normalen Fließtext der Seite (#db-info
   .db-info-text, 115%, siehe unten) noch spürbar zu groß. 1.2em bleibt bewusst knapp über diesen
   115% (statt exakt gleich), da es sich um den einleitenden Text der gesamten Seite handelt und
   dieser weiterhin leicht hervorgehoben bleiben soll - derselbe 1.2em-Schritt wie an anderen
   Stellen der Anwendung (vgl. .criteria-text/.label-titel in ritter.css/ritterkarte.css).
   max-width/margin:auto zentrieren den gesamten Einleitungsblock als kompakten "Hero"-Bereich, statt
   ihn auf die volle Breite von .content-area zu strecken - auf breiten/Ultrawide-Bildschirmen blieben
   die Zeilen sonst unangenehm lang. Der Wert (780px) liegt in der gewünschten Bandbreite von ca.
   700-850px. */
.intro-area .intro-text {
    font-size: 1.2em;
    max-width: 780px;
    margin: 0 auto;
}

/* Bewusst NICHT einfach text-align:center auf den gesamten Block: css/index.css setzt hier
   text-align:justify für alle Absätze (dort für den früheren, einzelnen Einleitungsabsatz gedacht).
   Der eigentliche Fließtext bleibt links (statt Blocksatz) linksbündig lesbar - nur die einleitende
   Frage/Überschrift (erster Absatz) wird als zentrierter "Hook" hervorgehoben. :first-of-type spart
   eine zusätzliche Klasse im Markup. */
.intro-area .intro-text p {
    text-align: left;
}

/* Leichte Betonung als "Lead" (Einstiegsfrage), ohne daraus eine dritte Überschrift zu machen -
   bleibt bewusst ein <p>, nur etwas kräftiger als der erklärende Absatz darunter. */
.intro-area .intro-text p:first-of-type {
    text-align: center;
    font-weight: 500;
}

/* "Kartenansicht"/"Detailsuche" direkt im Einleitungstext verlinkt statt über separate Buttons
   darunter (die beiden .secondary-nav-link-Buttons in .intro-button-container wurden entfernt,
   dieselbe Navigation ist jetzt hier im Lesefluss enthalten). Bewusst OHNE Unterstreichung -
   wirkte neben der zurückhaltenden Katalogtypografie der Seite wie ein gewöhnlicher blauer/
   unterstrichener Weblink. Kräftigere Schriftstärke (600 statt der umgebenden 300) macht die
   Links stattdessen rein typografisch erkennbar, wie ein bewusst gesetzter Verweis in einem
   akademischen Fließtext statt ein Hyperlink-Muster. */
.intro-text-link {
    color: #080808;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.intro-text-link:hover {
    opacity: 0.7;
}

.intro-text-link i {
    font-size: 85%;
    margin-left: 0.2em;
}

/* .secondary-nav-link: derselbe zurückhaltende Rahmen-Button wie in ritter.css/ritterkarte.css und
   auf ritterorden-ergebnisse.php (dort .detail-nav "Zur Detailsuche"/"Zur Kartenansicht") - die
   Startseite lädt keines dieser Stylesheets, daher hier wie auf den anderen drei Seiten dupliziert,
   statt weiterhin den portalweiten, dunkel gefüllten .action-button-Stil (css/basic.css) zu nutzen,
   der neben den übrigen, zurückhaltenden Urbar-Buttons wie ein zweites, fremdes Design wirkte.
   margin übernimmt hier den Abstand zwischen den beiden Links (statt eines gap im Flex-Parent
   .intro-button-container aus css/index.css), analog zum margin-top in der ritterkarte.css-Fassung
   für deren eigenen Layoutkontext. */
.secondary-nav-link{
    display: inline-block;
    margin: 0 0.6em;
    padding: 0.4em 1em;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    letter-spacing: 0.5px;
    color: #555;
    background: #ffffff;
    border: 1px solid #999;
    border-radius: 2px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.secondary-nav-link:hover{
    background: rgba(8, 8, 8, 0.04);
    color: #080808;
    border-color: #080808;
}

.secondary-nav-link i{
    font-size: 85%;
    margin-left: 0.3em;
}

/* #backToTopButton (nav.php, css/basic.css): dieselbe kräftige schwarze Fläche mit Invertierung
   im Hover wie der frühere .action-button-Stil - wirkte neben der inzwischen zurückhaltenden, dünn
   umrandeten Button-Sprache dieser Seite (.secondary-nav-link oben, .intro-text-link) wie ein
   zweites, älteres Design. Hier nur lokal auf dieselbe Weiß-/Rahmen-/Hover-Optik umgestellt, ohne
   die geteilte Basisregel in css/basic.css anzufassen (dort weiterhin unverändert für andere
   Portalseiten). Größe/Position/Sichtbarkeitslogik bleiben unverändert, nur Farben/Rahmen ändern
   sich. */
#backToTopButton{
    background: #ffffff;
    border: 1px solid #080808;
    color: #080808;
}

#backToTopButton:hover{
    background: rgba(8, 8, 8, 0.04);
    color: #080808;
}

/* .intro-button-container schaltet unter 600px per css/basic.css auf flex-direction:column um -
   die seitliche margin von .secondary-nav-link wirkt dort als ungleichmäßiger Abstand zwischen den
   gestapelten Links; hier wie bei .submit-line .action-button (ritter.css) auf vertikalen Abstand
   umgestellt. */
@media screen and (max-width: 600px) {
    .secondary-nav-link{
        margin: 0.4em 0;
    }
}

/* Titelunterstrich: css/index.css setzt hier eine volle, schwarze 1px-Linie über die gesamte Breite
   von h1 (Blockelement, keine eigene Breitenbegrenzung) - wirkte als grafisches Element zu schwer,
   zumal sie inzwischen direkt auf den neuen, kurzen Lead-Absatz trifft (kein Untertitel mehr dazwischen,
   siehe unten). Ersetzt durch einen kurzen, zentrierten, hellgrauen Trenner per ::after (keine
   zusätzliche Markup-Änderung nötig) - trennt Titel und Lead spürbar, ohne als grafisches Element zu
   dominieren.
   font-size/margin zusätzlich an .search-heading h1 (ritter.css) angeglichen: css/index.css setzt
   hier keine eigene h1-Schriftgröße, wodurch h1 bislang auf die Browser-Standardgröße zurückfiel
   (2em der bereits 2em großen .intro-heading, also deutlich größer als der identische Titel auf der
   Detailsuche). 150% derselben 2em-Basis wie dort sorgt für dieselbe Titelgröße auf beiden Seiten.
   margin: oben/links/rechts waren zuvor ebenfalls nicht gesetzt (Browser-Standardabstand) - jetzt wie
   auf der Detailsuche explizit auf 0 gesetzt, margin-bottom bleibt beim bisherigen, bewusst gewählten
   Wert (0.5em) statt auf den dortigen 0.3em vereinheitlicht zu werden. */
.intro-area .intro-heading h1 {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 1.1em 0;
    font-size: 150%;
}

.intro-area .intro-heading h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    background: #999;
    margin: 0.5em auto 0 auto;
}

/* Mobile Titelgröße: dasselbe Prinzip/derselbe Zielwert wie .search-heading h1 (ritter.css,
   @media max-width:700px) - 150% der 2em-Basis wirkt auf schmalen Bildschirmen überdimensioniert,
   115% reduziert auf denselben Wert wie dort, damit der identische Titel auf beiden Seiten weiterhin
   etwa gleich groß bleibt. */
@media screen and (max-width: 700px) {
    .intro-area .intro-heading h1 {
        font-size: 115%;
    }
}

/* Sanftes Einblenden der Einleitung (Titel, Einleitungstext) beim Laden der Seite – dezentes Fade-in
   mit leichter Aufwärtsbewegung, gestaffelt nach Lesereihenfolge. Bewusst nur ein einmaliger Effekt
   beim Laden (nicht scroll-getriggert wie die Statistik-Sektion unten), da die Einleitung stets im
   ersten sichtbaren Bereich der Seite liegt. */
@keyframes intro-einblenden {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-area#intro .intro-heading h1,
.intro-area#intro .intro-text p {
    opacity: 0;
    animation: intro-einblenden 0.7s ease-out forwards;
}

.intro-area#intro .intro-heading h1 {
    animation-delay: 0.05s;
}

/* Gestaffelt statt einheitlich: Lead und erklärender Absatz sollen nacheinander erscheinen
   (Titel -> Lead -> Fließtext), nicht gleichzeitig. :first-of-type/:last-of-type genügen hier
   eindeutig, da .intro-text ausschließlich diese zwei Absätze enthält. */
.intro-area#intro .intro-text p:first-of-type {
    animation-delay: 0.30s;
}

.intro-area#intro .intro-text p:last-of-type {
    animation-delay: 0.50s;
}

@media (prefers-reduced-motion: reduce) {

    .intro-area#intro .intro-heading h1,
    .intro-area#intro .intro-text p {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

/* Dezenter Bildausschnitt im Einleitungsbereich: unterstreicht den Charakter der Startseite als
   "digitaler Atlas" mit einem Ausschnitt einer historischen Katasterkarte (Kompassrose +
   Ortsansicht), ohne als eigenständige Illustration zu wirken. Bildnachweis siehe
   .intro-manuscript-credit weiter unten. position:relative auf #intro macht das absolut
   positionierte Bild zum Kind dieses einen Containers, ohne die geteilte Struktur aus css/index.css
   sonst zu verändern (ID ist auf dieser Seite eindeutig).
   margin-top zusätzlich leicht reduziert (7% aus css/index.css -> 6% -> 2%, hier überschrieben statt in
   der gemeinsam genutzten index.css geändert, da diese Datei projektübergreifend eingebunden ist -
   ritterorden-statistik.css lädt nach index.css und gewinnt bei gleicher Spezifität): Abstand
   zwischen .urbar-subnav und dem Startseiten-Titel wirkte etwas zu groß. Betrifft nur den
   Außenabstand des Blocks, nicht die Position/Größe von .intro-manuscript-bg darin. */
.intro-area#intro {
    position: relative;
    margin-top: 2%;
    padding-top: 5%;
    padding-bottom: 4%;
}

/* Eigenes <img> statt background-image, damit object-fit/object-position den gewünschten
   Bildausschnitt unabhängig von der Containerhöhe steuern. Rechts leicht angeschnitten (right
   negativ) für den gewünschten "Bleed" zum Seitenrand hin, bleibt dabei innerhalb des 90% breiten
   .content-wrapper und erzeugt keinen horizontalen Scrollbalken. Starke Entsättigung (grayscale)
   plus sehr geringe Deckkraft, damit das Bild als ruhige Papiertextur wirkt statt mit den
   Ordensfarben der Statistik darunter zu konkurrieren. pointer-events:none, da rein dekorativ. */
.intro-manuscript-bg {
    position: absolute;
    top: 0;
    right: -2%;
    /* bottom statt height:100% (2026-09-10): height:100% koppelte die Bildhöhe 1:1 an
       .intro-area#intro - als dessen padding-bottom zur Verkürzung des Abstands zu #orden-info
       reduziert wurde, schrumpfte/verzerrte dadurch ungewollt auch der Bildausschnitt. Der feste
       Versatz reicht knapp über die (jetzt kürzere) Containerkante hinaus und stellt so wieder etwa
       die vorherige Bildhöhe her, unabhängig von künftigen Anpassungen an diesem Innenabstand. */
    bottom: -40px;
    width: clamp(240px, 32vw, 460px);
    object-fit: cover;
    object-position: center top;
    z-index: 0;
    opacity: 0.28;
    filter: grayscale(1) contrast(0.9);
    pointer-events: none;
    user-select: none;
    /* Verlauf von der oberen rechten Ecke aus (2026-09-10, zweite Korrektur): eine einzelne, in der
       oberen rechten Ecke verankerte Ellipse blendet ganz natürlich sowohl nach links als auch nach
       unten aus, ohne dass zwei Masken-Ebenen übereinandergelegt werden müssen. Oben rechts (wo das
       Bild ohnehin bleedet) bleibt es am kräftigsten sichtbar; zur linken und unteren Kante hin läuft
       es weich aus - u. a. wichtig, da das Bild dank "bottom:-40px" oben über die kürzere
       #intro-Box hinausragt und dieser Überhang so weich statt hartkantig endet. */
    -webkit-mask-image: radial-gradient(ellipse 120% 100% at 100% 0%, #000 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 120% 100% at 100% 0%, #000 45%, transparent 100%);
}

/* Absolut positionierte Elemente rendern grundsätzlich über normal positionierten Geschwistern,
   unabhängig von der Reihenfolge im Markup - Titel/Text/Buttons werden hier daher explizit wieder
   über das Hintergrundbild gehoben, damit sie in jedem Fall klar lesbar/dominant bleiben. */
.intro-area#intro .intro-heading,
.intro-area#intro .intro-text {
    position: relative;
    z-index: 1;
}

/* Bildnachweis zum Katasterkarten-Ausschnitt (.intro-manuscript-bg): absolut statt im normalen
   Textfluss positioniert, direkt am rechten Rand des Bildes selbst statt darunter. z-index:1 hebt
   die Schrift über das Bild (z-index:0), wie bei Titel/Text/Buttons oben. Weiterhin sehr klein/
   zurückhaltend, kein eigener Rahmen/Hintergrund - nur die Schriftfarbe unterscheidet Link vom
   Fließtext, wie auch sonst auf der Seite. */
.intro-manuscript-credit {
    /* Vertikal am rechten Bildrand statt liegend am unteren Rand (2026-09-10): oben/bottom
       spannen dieselbe Höhe wie .intro-manuscript-bg auf (inkl. des "bottom:-40px"-Überhangs), die
       Schrift läuft darin von oben nach unten (writing-mode) und wird über die Flex-Zentrierung auf
       der (in vertical-rl liegenden) Hauptachse mittig im Bild platziert - .intro-manuscript-credit a
       ist dabei das einzige Flex-Kind. rotate(180deg) dreht die Leserichtung um (liest von unten nach
       oben, Kopf nach rechts geneigt) statt der writing-mode-Grundrichtung - gängige Konvention für
       Bildnachweise am rechten Rand. right sehr knapp gehalten, damit der Text nah an der Bildkante
       sitzt, ohne am Viewport-Rand abgeschnitten zu werden. */
    position: absolute;
    top: 0;
    bottom: -40px;
    right: -1.2em;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.7em;
    line-height: 1.4;
}

.intro-manuscript-credit a {
    color: #999;
}

.intro-manuscript-credit a:hover,
.intro-manuscript-credit a:focus {
    color: #666;
    text-decoration: underline;
}

/* Statistik-Bereich Startseite ("Datenbank in Zahlen") */

/* Eigenständiger Forschungscontainer im selben Archivgrau wie .searchform-content (Suchseite) und
   .single-record (Detailansicht) – dieselbe Grau-Fläche, derselbe zurückhaltende Rahmen/Schatten,
   dieselbe Eckrundung, damit die Startseite optisch zum gleichen Katalogsystem gehört statt einer
   fortlaufenden Textseite zu gleichen. Breite an #db-info angeglichen (80%), damit alle
   Inhaltscontainer der Startseite dieselbe Spaltenbreite teilen. */
.statistik-area {
    width: 80%;
    margin: 2% auto 4% auto;
    background: #f3f2ee;
    border: 1px solid #e5e2dc;
    border-radius: 1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 3% 4%;
    box-sizing: border-box;
}

.statistik-heading {
    text-align: center;
    margin-bottom: 4%;
}

.statistik-heading h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 180%;
    letter-spacing: 2px;
    display: inline-block;
    border-bottom: 1px solid black;
    padding-bottom: 1%;
    margin: 0;
}

.statistik-stand {
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    letter-spacing: 1px;
    text-align: center;
    color: #666;
    margin: 0.6em 0 0 0;
}

/* Kacheln: echtes Grid mit drei gleich breiten Spalten statt Flexbox-Umbruch (der je nach
   verfügbarer Breite der neuen .statistik-area unvorhersehbar eine Karte in eine zweite Zeile
   umbrechen ließ). grid-auto-rows:1fr sorgt zusätzlich dafür, dass alle drei Karten in dieser
   einen Zeile gleich hoch werden, unabhängig vom Textumfang. */
.statistik-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 2%;
    margin-bottom: 5%;
}

/* Weiße Katalogkarte innerhalb der grauen .statistik-area – identische Werte wie
   .record-content-line in der Detailansicht, damit einzelne Kennzahlen sich klar von der
   Archivgrau-Fläche abheben statt selbst grau/schwarzumrandet zu wirken. */
.statistik-karte {
    background: #ffffff;
    border: 1px solid #e5e2dc;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 3% 4%;
    text-align: center;
    transition: transform 0.25s ease-out, box-shadow 0.3s ease-out;
}

/* Minimaler Versatz (1px statt vorher 2px) und sanft auslaufende ease-out-Kurve statt der vorherigen
   kürzeren/linearen "ease"-Transition – dieselbe ruhigere Hover-Sprache wie .filter-data-row
   (ritterkarte.css) und .besitz-mini-card (ritter.css). */
.statistik-karte:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.statistik-zahl {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 260%;
    line-height: 1;
}

.statistik-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 85%;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #444;
    margin-top: 0.6em;
}

/* Info-Tooltip neben "Standorte"/"Kommenden": dasselbe Icon-+-Hover/Fokus-Tooltip-Muster wie an
   anderer Stelle der Anwendung (vgl. .info-tooltip in ritter.css/ritterkarte.css) - hier erneut
   dupliziert statt geteilt (CSS-Modification-Rule in CLAUDE.md), da Kontext/Öffnungsrichtung
   abweichen: die Kachel sitzt zentriert nahe dem oberen Seitenrand, daher öffnet der Tooltip hier
   zentriert nach unten statt nach oben/links wie in den anderen Varianten. text-transform/
   letter-spacing werden zurückgesetzt, da .statistik-label (Elternelement) Großschreibung/
   Sperrung erzwingt, die für Icon und Fließtext-Satz im Tooltip nicht passen. */
.statistik-label .info-tooltip{
    position: relative;
    display: inline-block;
    margin-left: 0.4em;
    color: #666;
    font-size: 90%;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    cursor: default;
}

.statistik-label .info-tooltip .info-tooltip-text{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    width: 18em;
    max-width: 70vw;
    background: #ffffff;
    color: #333;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: left;
    padding: 0.6em 0.8em;
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.2s ease;
    z-index: 10;
}

.statistik-label .info-tooltip:hover .info-tooltip-text,
.statistik-label .info-tooltip:focus .info-tooltip-text,
.statistik-label .info-tooltip:focus-within .info-tooltip-text{
    visibility: visible;
    opacity: 1;
}

/* Mobiler Positionswechsel gegen Viewport-Überlauf: dieselbe Lösung wie bei den drei anderen Kopien
   dieses Tooltip-Musters (ritter.css, ritterkarte.css x2, siehe dortige ausführliche Begründung).
   Auch das bereits zentrierte left:50%/transform hier ist relativ zum Auslöser-Icon positioniert,
   nicht zum Viewport - bei einem Icon nahe einer Bildschirmkante reicht das auf schmalen Bildschirmen
   nicht aus. position:fixed mit gleich großem Abstand zu beiden Seitenrändern des Viewports macht die
   Box unabhängig von der Icon-Position garantiert vollständig sichtbar. Breite/Farben/Rahmen/Schatten/
   Übergang/Wortlaut bleiben unverändert, nur Position und die davon abhängigen
   Platzierungs-Eigenschaften werden umgestellt; auf dem Desktop bleibt die bisherige, gegen das Icon
   zentrierte Positionierung unverändert. */
@media screen and (max-width: 600px) {
    .statistik-label .info-tooltip .info-tooltip-text{
        position: fixed;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        transform: none;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

/* Ordensverteilung */
.statistik-verteilung {
    text-align: center;
}

.statistik-verteilung h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 100%;
    margin-bottom: 3%;
}

.verteilung-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6%;
}

.verteilung-donut {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--donut-gradient);
}

.verteilung-donut::after {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #FFF;
    border-radius: 50%;
}

/* Registriert den Sweep-Winkel als animierbare (interpolierbare) Eigenschaft,
   damit der Übergang unten per CSS transition laufen kann. */
@property --donut-reveal {
    syntax: '<angle>';
    inherits: false;
    initial-value: 360deg;
}

/* Aufbau-Animation beim Sichtbarwerden (per IntersectionObserver gesteuert, siehe JS).
   Die Klasse "animation-bereit" wird nur mit aktivem JavaScript gesetzt, damit das
   Diagramm ohne JavaScript (oder ohne Unterstützung für @property/mask) stets sofort
   vollständig sichtbar bleibt, statt in einem leeren Zustand zu verharren.
   Eine Maske deckt den Ring per Kreissektor ab und gibt ihn schrittweise frei –
   die zugrundeliegenden Orden-Farben und -Anteile (--donut-gradient) bleiben dabei
   unverändert, es wird nichts gedreht, nur zunehmend „aufgedeckt". */
.verteilung-donut.animation-bereit {
    --donut-reveal: 0deg;
    -webkit-mask-image: conic-gradient(#000 var(--donut-reveal), transparent var(--donut-reveal));
    mask-image: conic-gradient(#000 var(--donut-reveal), transparent var(--donut-reveal));
    transition: --donut-reveal 1.5s ease-in-out;
}

.verteilung-donut.animation-bereit.ist-sichtbar {
    --donut-reveal: 360deg;
}

.verteilung-legende {
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 105%;
    font-weight: 300;
}

.legende-eintrag {
    display: flex;
    align-items: center;
    padding: 2% 0%;
}

.legende-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    margin-right: 0.6em;
    flex-shrink: 0;
}

/* Test (2026-09-16, Nutzer-Wunsch): Call-to-Action-Zeile nach der Statistik, um Nutzer aktiv zu
   Karte/Detailsuche weiterzuleiten. Gefuellter, rund abgesetzter Pill-Stil wie der Instagram-/Blog-
   Link auf der FDO-Portal-Startseite (#insta-showcase .insta-showcase-blog-link, siehe
   wp-content/themes/elisabeth/style.css) - hier dupliziert statt geteilt, da diese Seite jenes Theme/
   Stylesheet nicht laedt. Eigener .content-area-Abschnitt statt Teil von .statistik-area (fruehere
   Fassung): der Pill-Hintergrund (#f2f2f2) lag farblich zu nah am grauen Kartenhintergrund der
   Statistik-Box (#f3f2ee), ausserdem ist die CTA inhaltlich kein Teil der Statistik. Kein eigener
   margin-top noetig - .content-area (css/basic.css) liefert bereits dasselbe 2%-Padding wie zwischen
   den uebrigen Startseiten-Abschnitten. */
.statistik-cta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9em;
}

.statistik-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.8em;
    padding: 0 1.6em;
    font-family: 'Open Sans', sans-serif;
    font-size: 90%;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    color: #080808;
    background: #f2f2f2;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.statistik-cta-link:hover {
    background: #080808;
    color: #fff;
    transform: translateY(-2px);
}

@media screen and (max-width: 700px) {
    .statistik-cta-link {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Projektinformationen (#db-info, aus css/index.css im gemeinsamen Root): Struktur/Breite/
   Flex-Ausrichtung stammen weiterhin von dort und aus basic.css (dort auch die mobile
   Stapel-Logik) – hier wird nur dieselbe Grau-→-Weiß-Kartenhierarchie wie bei .statistik-area/
   .statistik-karte oben ergänzt, keine der bestehenden Layout-Werte überschrieben. Jedes einzelne
   Thema (Projektteam, Aktueller Stand, Zeitraum, Aufbau der Datenbank, Kommenden, Benennung der
   Standorte, Hinweis) hat jetzt seine eigene graue Hülle (.db-info-gruppe) mit genau einer weißen
   Karte darin (.db-info-el) - in ritterorden.php entspricht das jetzt einer eigenen
   .db-info-gruppe pro Thema statt, wie zuvor, einer .db-info-gruppe pro mehrere Themen umfassender
   Rubrik (Forschungsstand, Methodik/Datenstruktur). Der Abstand zwischen den Themen-Karten kommt
   dadurch einheitlich aus dem bereits vorhandenen gap:2em zwischen den .db-info-gruppe-Elementen -
   das frühere zusätzliche 3%-margin von .db-info-el (css/index.css) wirkt jetzt nur noch als
   Innenabstand zur eigenen grauen Hülle, nicht mehr als Abstand zu einer benachbarten Karte
   innerhalb derselben Gruppe. */
#db-info {
    gap: 2em;
}

/* "Über dieses Projekt": schlanker, rein typografischer Auf-/Zuklapp-Regler für die sieben
   Themen-Gruppen darunter (Projektteam, Aktueller Stand, ... Hinweis) - dieselbe zurückhaltende
   Text-Button-Sprache wie .intro-text-link/.urbar-subnav-link (kein gefüllter Button, keine Box),
   damit der Regler neben der bereits überarbeiteten Statistik-Sektion nicht wie ein zusätzliches
   UI-Element wirkt. Zentriert wie .statistik-heading darüber, aber bewusst deutlich kleiner/leiser
   gehalten, da es sich nur um einen Sekundär-Regler handelt, nicht um eine Überschrift. */
.db-info-toggle-wrap {
    text-align: center;
    margin-bottom: 0.5em;
}

.db-info-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: none;
    border: none;
    padding: 0.3em 0.1em;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    letter-spacing: 0.5px;
    color: #555;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.db-info-toggle:hover,
.db-info-toggle:focus-visible {
    color: #080808;
    border-color: #999;
}

.db-info-toggle-icon {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    line-height: 1;
}

/* Auf-/Zuklapp-Mechanik selbst: die CSS-Grid-"0fr/1fr"-Technik animiert die tatsächliche
   Inhaltshöhe, ohne dass JavaScript sie vorher per scrollHeight berechnen müsste (Inhalt/Höhe der
   Themen-Karten bleibt so unabhängig von Zeilenumbruch, Zoom, Schriftgröße o. Ä. immer korrekt).
   Ohne die synchron per Inline-Skript gesetzte Klasse "js-db-info-toggle" (siehe ritterorden.php)
   bleibt .db-info-collapsible einfach bei grid-template-rows:1fr - also dauerhaft vollständig
   sichtbar, exakt wie vor dieser Ergänzung. */
.db-info-collapsible {
    display: grid;
    grid-template-rows: 1fr;
}

.js-db-info-toggle .db-info-collapsible {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s ease;
}

.js-db-info-toggle .db-info-collapsible.ist-ausgeklappt {
    grid-template-rows: 1fr;
}

/* min-height:0 verhindert, dass das Grid-Kind seine eigene "intrinsische" Mindesthöhe gegen
   grid-template-rows:0fr durchsetzt (Standard-Stolperstein der 0fr/1fr-Technik). overflow:hidden
   blendet den Inhalt aus, solange die Zeile 0fr hoch ist. display/flex-direction/gap entsprechen
   exakt den bisherigen #db-info-Werten (index.css/oben) - die sieben .db-info-gruppe-Elemente
   liegen jetzt eine Ebene tiefer (in diesem Inner-Wrapper statt direkt in #db-info), sollen aber
   optisch unverändert im selben 2em-Abstand untereinanderstehen. */
.db-info-collapsible-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

/* Verschobene Einleitungs-Absätze (siehe ritterorden.php - ehemals zweiter Absatz in .intro-text,
   liegt jetzt als .db-info-text direkt in .db-info-collapsible-inner): der Kind-Selektor (>) trifft
   ausschließlich dieses eine .db-info-text-Element, nicht die sieben Themen-Karten weiter unten
   (deren .db-info-text liegt jeweils in .db-info-el, also eine Ebene tiefer). max-width/margin:auto
   entsprechen exakt den bisherigen Werten von .intro-text (siehe oben) und stellen dieselbe
   zentrierte Blockbreite wieder her, die beim Verschieben aus #intro verloren ging - Schriftgröße/
   Textausrichtung/Verlinkung bleiben unverändert die von .db-info-text. */
.db-info-collapsible-inner > .db-info-text {
    max-width: 780px;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .js-db-info-toggle .db-info-collapsible {
        transition: none;
    }
}

/* "Über die geistlichen Ritterorden" (#orden-info, siehe ritterorden.php): drei gleichrangige Spalten
   statt der verschachtelten weißen Themen-Kacheln von #db-info (.db-info-el) - passend zum
   Vergleichscharakter ("drei Orden auf einen Blick") statt zum Katalogcharakter der Themen-Karten
   dort. Schmaler, ordensfarbener Akzentstreifen links statt einer vollständigen Kastenoptik -
   dieselben drei Hex-Werte wie beim Kartenrahmen der Ergebniskarten
   (.single-record.<orden>{border-left-color}, siehe ritter.css) und den Filter-Chips der Detailsuche,
   hier als Wiedererkennungsmerkmal statt als Statusanzeige. */
.orden-uebersicht {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2.5em;
    margin-top: 0.75em;
}

.orden-uebersicht-eintrag {
    border-left: 3px solid #ccc;
    padding-left: 1em;
}

.orden-uebersicht-eintrag.deutscher-orden {
    border-left-color: #1c1b1b;
}

.orden-uebersicht-eintrag.johanniterorden {
    border-left-color: #1668a8;
}

.orden-uebersicht-eintrag.templerorden {
    border-left-color: #a3121a;
}

.orden-uebersicht-eintrag h3 {
    font-size: 130%;
    margin: 0 0 0.5em 0;
    text-align: center;
}

.orden-uebersicht-eintrag p {
    margin: 0;
}

@media screen and (max-width: 700px) {
    .orden-uebersicht {
        grid-template-columns: 1fr;
        gap: 1.5em 0;
    }
}

#db-info .db-info-gruppe {
    background: #f3f2ee;
    border: 1px solid #e5e2dc;
    border-radius: 1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 2% 3%;
}

#db-info .db-info-el {
    background: #ffffff;
    border: 1px solid #e5e2dc;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    padding: 2% 3%;
}

/* css/index.css setzt hier font-size:240%, was neben dem Fließtext (145%) überdimensioniert wirkt.
   Nur die Größe wird reduziert, Schriftart/-schnitt/Ausrichtung bleiben unverändert. */
#db-info .db-info-heading h3 {
    font-size: 160%;
}

/* Fließtext im selben Verhältnis verkleinert wie die Überschrift nebenan (240% -> 160%, Faktor
   ~0,67), damit beide Spalten wieder zueinander passen statt die Überschrift allein zu verkleinern
   und den Text unverändert überdimensioniert zu lassen. */
#db-info .db-info-text {
    font-size: 115%;
}

/* Einblend-Animation für die Info-Boxen (#db-info .db-info-el), analog zum Donut-Diagramm oben:
   die "einblenden-bereit"-Klasse wird per JS gesetzt (siehe ritterorden-statistik.js), pro Box
   ergänzt ein eigener IntersectionObserver "ist-sichtbar", sobald die Box in den sichtbaren
   Ausschnitt scrollt - danach wird nicht mehr beobachtet, der Effekt läuft also nur einmal je Box.
   Ohne JavaScript/IntersectionObserver-Unterstützung bleibt "einblenden-bereit" ungesetzt und die
   Boxen sind sofort vollständig sichtbar statt in einem leeren Zustand zu verharren. Überschrift und
   Text starten den Übergang minimal versetzt (transition-delay), damit die Box nicht als ein
   einzelner starrer Block wirkt, ohne dabei unruhig zu werden. */
.db-info-el.einblenden-bereit .db-info-heading,
.db-info-el.einblenden-bereit .db-info-text {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.db-info-el.einblenden-bereit .db-info-heading {
    transition-delay: 0s;
}

.db-info-el.einblenden-bereit .db-info-text {
    transition-delay: 0.12s;
}

.db-info-el.einblenden-bereit.ist-sichtbar .db-info-heading,
.db-info-el.einblenden-bereit.ist-sichtbar .db-info-text {
    opacity: 1;
    transform: translateY(0);
}

/* Projektteam-Tabelle (Name / Zeitraum / Aufgabe): bewusst per CSS-Grid statt eines <table>-Elements
   umgesetzt, damit sich die Kalkoptik (dünne Trennlinien statt Zellrahmen, kein Zebra-Streifen,
   keine Kopfzeilenfüllung) frei gestalten lässt, statt gegen die schwere Standardoptik von Tabellen
   ankämpfen zu müssen – liest sich dadurch als ruhige Katalogliste, nicht als Kalkulationstabelle. */
.team-table {
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans', sans-serif;
}

/* Spaltenreihenfolge im Markup ist jetzt Zeitraum/Name/Rolle – die fr-Werte folgen in derselben
   Reihenfolge, damit die kurze Zeitangabe weiterhin die schmale und die Rollenbeschreibung
   weiterhin die breiteste Spalte erhält (Proportionen bleiben inhaltlich passend, nicht nur
   positional eingefroren). */
.team-row {
    display: grid;
    grid-template-columns: 0.7fr 1.1fr 1.6fr;
    gap: 0% 4%;
    padding: 0.7em 0%;
    border-bottom: 1px solid #e5e2dc;
}

.team-row:last-child {
    border-bottom: none;
}

.team-col-name {
    font-weight: 600;
}

.team-col-zeitraum {
    color: #666;
}

/* ----- Mobile Ansicht -------------------- */
@media screen and (max-width: 700px) {
    /* Rein dekoratives Element komplett ausgeblendet statt verkleinert/verschoben: der schmale
       verbleibende Platz neben dem gestapelten Titel/Text/Buttons würde entweder einen kaum noch
       erkennbaren Bildstreifen zeigen oder mit dem Inhalt konkurrieren. Text/Buttons/Statistik
       bleiben davon unberührt. */
    .intro-manuscript-bg {
        display: none;
    }

    /* Bildnachweis nur zusammen mit dem zugehörigen Bild ausblenden - ohne das Bild wäre die
       Quellenangabe ein Verweis ins Leere. */
    .intro-manuscript-credit {
        display: none;
    }

    .statistik-grid {
        grid-template-columns: 1fr;
    }

    .verteilung-wrap {
        flex-direction: column;
        gap: 4%;
    }

    .statistik-area {
        width: 90%;
        padding: 5% 6%;
    }

    #db-info .db-info-gruppe,
    #db-info .db-info-el {
        padding: 4% 5%;
    }

    .team-row {
        grid-template-columns: 1fr;
        gap: 0.2em;
        padding: 0.8em 0%;
    }
}

/* Mobile Lesbarkeit: Blocksatz (text-align:justify, von index.css für .intro-text p bzw. von
   body p für .db-info-text p vorgegeben) erzeugt auf schmalen Spalten unruhige Wortabstände und
   begünstigt gerade dort hässliche Umbrüche - auf Mobile daher linksbündig statt Blocksatz. Gilt
   ab derselben 700px-Marke wie die übrige Mobile-Anpassung dieser Datei (siehe .statistik-grid
   etc. oben), nicht erst ab 450px, damit die Wirkung nicht auf sehr schmale Geräte beschränkt bleibt.
   Silbentrennung (hyphens:auto + Präfixe) bleibt dabei aktiv, denn auch im Flattersatz sollen lange
   Wörter an Silbengrenzen statt am Spaltenrand unkontrolliert überstehen/umbrechen. word-break:normal
   (mit !important) und overflow-wrap:break-word setzen zusätzlich das aus css/basic.css stammende
   "body p { word-break: break-all !important; }" (unterhalb von 450px) zurück, das sonst weiterhin
   mitten im Wort zerschneiden würde - eine gemeinsam genutzte Datei wird dafür bewusst nicht
   angefasst, die Rücksetzung erfolgt lokal auf dieser Seite. */
@media screen and (max-width: 700px) {
    .intro-area .intro-text p,
    #db-info .db-info-text p,
    .orden-uebersicht-eintrag p {
        text-align: left;
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        word-break: normal !important;
        overflow-wrap: break-word;
    }

    /* Die einleitende Frage bleibt auch mobil zentriert (derselbe kompakte "Hook"-Effekt wie auf
       Desktop) - die linksbündige Regel oben gilt sonst pauschal für alle Absätze in .intro-text. */
    .intro-area .intro-text p:first-of-type {
        text-align: center;
    }
}