/* ===========================================================================
   Responsives Layout und Barrierefreiheit
   Sächsische Gerichtsbücher

   Diese Datei wird nach style.css geladen und überschreibt gezielt. Die
   Trennung ist Absicht: style.css trägt die Gestaltung, hier steht alles,
   was von der Fensterbreite abhängt.

   Breakpoints:
     bis 1151 px   alles unterhalb der Breite, ab der der Kopf passt
     bis  767 px   Tablet hoch, großes Telefon
     bis  479 px   Telefon

   Warum 1151 und nicht die üblichen 1023: Der Kopf trug feste Maße - Logo 101,
   Titelblock 299, Menükasten 650, zusammen die 1056 px von #header. Bei einem
   Wrapper von 960 px begann er bei (Fenster - 960) / 2 und endete 1056 px
   später; vollständig sichtbar war er erst ab 2 * 1056 - 960 = 1152 px.

   Diese Rechnung gilt nicht mehr - der Kopf ist oberhalb von 1151 px eine
   Reihe aus Flex-Elementen und so breit wie der Wrapper. Der Breakpoint bleibt
   trotzdem bei 1151: Dort wechselt das Menü in den Schalter, und dafür ist er
   nach wie vor der richtige Punkt. Der Menükasten braucht rund 650 px, Logo
   und Titelblock 400 - unterhalb von etwa 1050 px würde das Menü umbrechen.

   Geprüft wird bei 320 px CSS-Breite - das verlangt WCAG 1.4.10 (Reflow).
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Grundgerüst - Container, Bilder, Fußzeile
   --------------------------------------------------------------------------- */

/* Die tragenden Container waren auf feste Pixelbreiten gesetzt. #content war
   dabei mit 1015 px breiter als #wrapper (960 px) und #header - eine reine
   max-width auf dem Wrapper hätte deshalb nichts bewirkt.

   1200 statt der früheren 960: Die Trefferliste trägt sechs Spalten, darunter
   Titel und Datierung, die beide lang werden. Auf 960 px brach der Titel
   regelmäßig um, während links und rechts je gut 200 px leer blieben. Der Kopf
   wächst mit, siehe den Abschnitt weiter unten. */
#wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    float: none;
}

#content {
    width: auto;
    max-width: 100%;
    float: none;
}

/* ---------------------------------------------------------------------------
   Kopfbereich auf breiten Schirmen
   ---------------------------------------------------------------------------

   Der Kopf war eine Reihe aus drei Floats mit festen Breiten, die zusammen
   genau aufgingen: Logo 101 px, grüner Titelblock 299 px, Menükasten 650 px -
   in der Summe die 1056 px von #header. Solange der Wrapper 960 px maß, fiel
   das nicht auf.

   Bei einem breiteren Wrapper geht die Rechnung nicht mehr auf: Der Kopf
   bliebe auf 1056 px stehen und säße links im Wrapper, rechts klaffte eine
   Lücke. Wächst er dagegen mit, ohne dass der Menükasten mitwächst, bricht
   das Menü um - 650 px reichen für fünf Punkte, aber nicht für die Lücke, die
   ein breiterer Kopf davor legt.

   Deshalb hier eine Reihe aus Flex-Elementen: Logo und Titelblock behalten
   ihre Maße, der Menükasten nimmt den Rest. Die Ecke aus eck.png sitzt
   absolut bei 400 px und bleibt damit richtig, solange die beiden ersten
   Elemente zusammen 400 px messen.

   Erst ab 1152 px, weil unterhalb davon der Kopf ohnehin umgebaut wird - dort
   wird #menubox zu display:contents und die Reihenfolge über order gesteuert.
   Diese Regeln dürfen sich nicht in die Quere kommen.
   --------------------------------------------------------------------------- */

@media (min-width: 1152px) {
    #header {
        width: 100%;
        display: flex;
        align-items: flex-start;
    }

    /* Die Floats werden zu Flex-Elementen. float bleibt wirkungslos, wird aber
       zurückgesetzt, damit die Regel für sich lesbar ist. */
    .logo {
        flex: 0 0 101px;
        float: none;
    }

    .desc {
        flex: 0 0 299px;
        float: none;
    }

    /* Nimmt den Platz, der übrig bleibt. Die 650 px aus style.css waren die
       Restbreite bei einem 1056 px breiten Kopf - jetzt rechnet es der Browser
       aus. */
    #menubox {
        flex: 1 1 auto;
        width: auto;
        float: none;
    }
}


/* Das Attribut hidden gilt immer. Der Browser setzt es nur als schwache
   Grundregel um, und jede display-Angabe ueberschreibt sie: style.css stellt
   section auf display:block, karte.css die Wahl "offenhalten" der
   Detailkarte auf flex. Ausgeblendete Abschnitte der Listen von A bis Z
   blieben so stehen, und ohne JavaScript erschien auf den Detailseiten ein
   Kaestchen, das nichts tut. */
[hidden] {
    display: none !important;
}

/* Bilder nie über die Spaltenbreite hinaus. */
img {
    max-width: 100%;
    height: auto;
}

/* Die Begriffstabelle der Projektseite trug feste Spaltenbreiten von 300 und
   500 Pixeln - zusammen mehr, als ein Telefon breit ist, und die Seite schob
   sich seitlich über den Rand. Die Breiten stehen jetzt hier statt als
   width-Attribut in der Tabelle, damit sie sich mitverkleinern können.
   table-layout:fixed ist dabei nötig: Ohne das leitet die Tabelle ihre
   Mindestbreite aus dem längsten unteilbaren Wort ab und lässt sich nicht
   weiter stauchen. Das Verhältnis 37,5 zu 62,5 Prozent entspricht den
   früheren 300 zu 500 Pixeln. */
#section table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#section td {
    overflow-wrap: anywhere;
}

#section td:first-child {
    width: 37.5%;
}

/* Lange E-Mail-Adressen und URLs bieten keine Trennstelle und schieben in der
   schmalen Ansicht ebenfalls den Inhalt hinaus. */
a.links {
    overflow-wrap: anywhere;
}

/* Zusammengesetzte Wörter werden im Deutschen leicht länger als eine schmale
   Spalte - "Grundbesitzveränderungen" misst bei 1,4 rem rund 280 Pixel. Ohne
   Trennstelle schiebt ein solches Wort die ganze Seite über den Rand.
   break-word greift nur dann, wenn das Wort sonst überliefe. */
#section,
#article,
.index {
    overflow-wrap: break-word;
}

/* Der Footer war fest am unteren Rand verankert. Auf niedrigen Fenstern und
   bei 200 % Textvergrößerung verdeckt das Inhalt - WCAG 1.4.4 und 1.4.10. */
/* Die Fußzeile liegt im HTML innerhalb von #wrapper und erbt damit dessen
   max-width von 960 px. Früher war sie mit position:fixed aus dem Fluss
   genommen und deshalb über die volle Breite sichtbar.

   Fixiert bleiben kann sie nicht: Bei 200 % Textvergrößerung und auf
   niedrigen Fenstern verdeckt eine feste Fußzeile Inhalt (WCAG 1.4.4/1.4.10).
   Stattdessen bricht sie hier aus dem Container aus - 100vw plus negative
   Ränder, die den Container-Rand ausgleichen. Der Hintergrund läuft damit
   wieder über die gesamte Fensterbreite, die Links bleiben mittig auf
   Inhaltsbreite. */
#footer {
    position: static;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 3em;
    padding: 0.75em 0;
    clear: both;
}

/* 100vw schließt die Breite einer vertikalen Scrollleiste mit ein. Ohne
   overflow-x entstünde dadurch ein horizontaler Scrollbalken.

   margin-bottom: style.css setzt 30 px am body. Solange die Fußzeile fixiert
   war, lag dieser Rand unsichtbar dahinter. Im Fluss erscheint er als
   Leerstreifen unter der Fußzeile - deshalb hier auf 0. */
body {
    overflow-x: hidden;
    margin-bottom: 0;
}

#footer {
    margin-bottom: 0;
}

#footer ul {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 1em;
    box-sizing: border-box;
}

#footer ul li a {
    padding: 0.7em 1.1em;
    min-height: 44px;
    display: inline-block;
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------------
   Vorschlagsliste der Autovervollständigung
   ---------------------------------------------------------------------------

   Die Liste steht im normalen Textfluss unterhalb des Eingabefelds. Bei vielen
   Treffern - "Neu" liefert 142 - wird die Seite dadurch länger und man scrollt
   das ganze Dokument. Das ist gewollt: ein eigener Scrollbereich innerhalb der
   Liste ist auf Touchgeräten fummelig.

   Treffername und Beschreibung stehen untereinander statt nebeneinander -
   nebeneinander bräuchten sie feste Breiten, die auf schmalen Schirmen nicht
   aufgehen. */

.input_container {
    position: static;
    display: block;
}

/* Das Eingabefeld floatet, der Container bekäme dadurch keine eigene Höhe -
   nachfolgende Elemente rutschen darunter. Der Clearfix schließt den Float
   ein, damit die Liste sicher unterhalb beginnt. */
.input_container::after {
    content: "";
    display: table;
    clear: both;
}

#country_list_id {
    position: static;
    float: none;
    /* Das Eingabefeld hat float:left. Ohne clear liefe die Liste daneben und
       begänne auf derselben Höhe. */
    clear: both;
    margin: 0 0 1.5em 0;
    padding: 0.875em 0 0 0;
    width: 100%;
    max-width: 44em;
    background: transparent;
    box-sizing: border-box;
    list-style: none;
}

#country_list_id li {
    margin: 0 0 1px 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    line-height: 0.1;    /* schluckt den Zeilenumbruch zwischen den Blöcken */
}

/* Jeder Eintrag endet mit <br clear="both">. Das war nötig, solange Name und
   Beschreibung nebeneinander gefloatet waren - seit beide Blockelemente sind,
   erzeugt es nur noch eine Leerzeile zwischen den Treffern. */
#country_list_id li br {
    display: none;
}

/* Der Treffername stand auf festen 200 px, der Beschreibungstext auf 400 px -
   zusammen mehr, als auf schmalen Schirmen Platz ist. */
#country_list_id li a {
    float: none;
    display: block;
    width: auto;
    padding: 0.3em 0.8em;
    font-size: 0.95rem;
    line-height: 1.3;
}

#country_list_id li a:hover,
#country_list_id li a:focus {
    background-color: #2f5f49;
}

#country_list_id li p {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0.8em 0.4em 0.8em;
    line-height: 1.3;
}


/* Die Buch-Abbildung. Float und Breite standen als Inline-Attribut am img
   (float:right; width:19rem) - die Klasse .imgRight in style.css enthält nur
   Rand und max-width. Beim Auflösen des Inline-Styles fielen sie deshalb weg
   und das Bild stand links über dem Text. */
.imgRight {
    float: right;
    width: 19rem;
    max-width: 100%;
    height: auto;
}


/* Der Titel im grünen Kasten. Die Angaben standen vorher als Inline-Attribut
   am Link und gelten deshalb auf jeder Bildschirmbreite, nicht nur mobil. */
.desc-link {
    color: #fff;
    text-decoration: none;
}

.desc-link:visited,
.desc-link:hover,
.desc-link:focus {
    color: #fff;
}


/* --- Barrierefreiheit, unabhängig von der Bildschirmbreite --------------- */

/* In style.css gibt es keine einzige :focus-Regel, dafür zweimal
   outline:none. Ohne sichtbaren Fokus ist die Seite per Tastatur nicht
   bedienbar - WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #b34700;
    outline-offset: 2px;
}

/* Ältere Browser ohne :focus-visible */
a:focus,
button:focus,
input:focus {
    outline: 3px solid #b34700;
    outline-offset: 2px;
}

.logo:focus-visible {
    outline: 3px solid #b34700;
}

/* Sprunglink zum Inhalt: sichtbar, sobald er den Fokus bekommt. */
.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #fff;
    color: #000;
    padding: 0.75em 1.25em;
    border: 2px solid #447f64;
}

.sprunglink:focus {
    left: 0;
}

/* Beschriftung nur für Screenreader - siehe .visuell-versteckt in style.css */


/* --- Druckausgabe -------------------------------------------------------- */
/* Vorher gab es im ganzen Projekt keine einzige Media Query. Beim Ausdruck
   einer Trefferliste oder Detailseite verdeckte der fixierte Footer Inhalt. */
@media print {
    #balken,
    #menubox,
    #spacer,
    #footer,
    .subnav,
    .sprunglink {
        display: none !important;
    }

    #wrapper,
    #content {
        width: auto;
        max-width: none;
        margin: 0;
        float: none;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    a {
        color: #000;
    }

    /* Ziel externer Links mitdrucken, sonst ist der Ausdruck wertlos */
    #content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}


/* ---------------------------------------------------------------------------
   Kopfbereich und Menü
   --------------------------------------------------------------------------- */

/* Der Burger-Schalter erscheint nur auf schmalen Schirmen. */
.menu-schalter {
    display: none;
    align-items: center;
    gap: 0.6em;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    padding: 0.6em 1em;
    cursor: pointer;
    min-height: 44px;
}

.menu-schalter .burger {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: #fff;
    position: relative;
}

.menu-schalter .burger::before,
.menu-schalter .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
}

.menu-schalter .burger::before { top: -7px; }
.menu-schalter .burger::after  { top:  7px; }

/* Geöffnet: aus dem Burger wird ein Kreuz. */
.menu-schalter[aria-expanded="true"] .burger { background: transparent; }
.menu-schalter[aria-expanded="true"] .burger::before { top: 0; transform: rotate(45deg); }
.menu-schalter[aria-expanded="true"] .burger::after  { top: 0; transform: rotate(-45deg); }

/* Ab hier greift das gestapelte Kopf-Layout. Der Breakpoint liegt nicht bei
   767 px: Logo (101), Titelkasten (299) und Menü (650) brauchen zusammen
   1050 px, der Kopf selbst ist auf 1056 px festgelegt. Da der Wrapper mittig
   ausgerichtet ist, passt er erst ab 1152 px Fensterbreite vollständig ins
   Bild - darunter wurde er rechts abgeschnitten. */
@media (max-width: 1151px) {
    /* Zwei absolut positionierte Dekorschichten mit harten Koordinaten:
       #balken deckt 35 % der Viewportbreite hinter dem Kopf ab, das ::after
       am Titelkasten sitzt auf left:400px - exakt Logobreite plus Titelbreite.
       Beides trägt keine Information und stünde bei umbrechendem Kopf im
       Nichts. */
    #balken,
    #header p:after {
        display: none;
    }

    /* Der Kopf wird zum Flex-Container. #menubox bekommt display:contents,
       damit seine Kinder - Burger, Navigation, Freistaat-Logo - zu direkten
       Flex-Elementen von #header werden. Erst dadurch lässt sich die Reihen-
       folge über order steuern, obwohl sie im HTML auf zwei Ebenen liegen.

       Gewünschte Abfolge:
         1  Burger-Schalter
         2  Logo und Schriftzug nebeneinander, über die volle Breite
         3  Navigation (nur wenn geöffnet)
         4  Logo des Freistaats  */
    #header {
        display: flex;
        flex-wrap: wrap;
        /* stretch statt center: Logo und Schriftzug sollen in ihrer Zeile
           gleich hoch sein. Die Höhe gibt der Textkasten vor, das Logo
           passt sich an. */
        align-items: stretch;
        width: auto;
        height: auto;
        margin-top: 0;
        overflow: visible;
    }

    #menubox {
        display: contents;
    }

    .menu-schalter {
        display: flex;
        justify-content: flex-start;
        order: 1;
        flex: 0 0 100%;
        margin: 0.75em 0;
    }

    /* Logo und Schriftzug teilen sich eine Zeile über die volle Breite.
       Beide hatten feste 101 bzw. 299 px und eine Höhe von 119 px. */
    .logo {
        order: 2;
        float: none;
        width: auto;
        height: auto;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    /* Volle Zeilenhöhe, Seitenverhältnis bleibt erhalten. */
    .logo img {
        display: block;
        height: 100%;
        width: auto;
        max-height: 100%;
        object-fit: contain;
    }

    .desc {
        order: 2;
        float: none;
        width: auto;
        height: auto;
        min-height: 84px;
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.9em 1em;
        display: flex;
        align-items: center;
        background-size: cover;
        box-sizing: border-box;
    }

    .desc-link {
        font-size: 1.15rem;
        line-height: 1.25;
    }

    /* Die Navigation liegt in der dritten Zeile und ist zunächst zu. */
    .menu {
        order: 3;
        display: none;
        float: none;
        width: 100%;
        flex-basis: 100%;
    }

    .menu.menu-offen {
        display: block;
        background: #323642;
    }

    .menu ul {
        float: none;
        margin: 0;
        padding: 0;
    }

    .menu li {
        float: none;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Der Hover-Effekt zieht mit margin-bottom:-15px den Nachbarn hoch.
       In einer gestapelten Liste überlappen sich die Einträge dadurch. */
    .menu li:hover {
        margin-bottom: 0;
        padding-bottom: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    }

    .menu li a {
        display: block;
        padding: 0.9em 1em;
    }

    /* Das Logo des Freistaats schließt den Kopf ab, eigene Zeile. */
    .logo-freistaat {
        order: 4;
        float: none;
        margin: 0.75em auto 0 auto;
        top: 0;
        width: 100%;
        /* Mittig, mit derselben Luft wie der Inhalt. Bei box-sizing
           border-box zählt der Innenabstand mit - das Bild wird damit
           rund 288 px breit. */
        max-width: 320px;
        padding-left: 1em;
        padding-right: 1em;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }

    .logo-freistaat img {
        width: 100%;
        height: auto;
    }
}

/* ---------------------------------------------------------------------------
   Detailseiten
   --------------------------------------------------------------------------- */

/* Kontrast: .block a stand auf #057e4b. Auf dem Seitenhintergrund ergibt das
   rund 4:1, gefordert sind 4,5:1 (WCAG 1.4.3). Betroffen sind die Ortslinks
   der Detailseiten, also die meistgeklickten Links der Anwendung.
   #045c37 liegt bei etwa 6:1 und bleibt im gleichen Farbton. */
.block a {
    color: #045c37;
    /* Die Verweise sind inline-block (style.css); ein langer Linktext ohne
       Trennstelle legte so die Mindestbreite des Kastens fest und schob die
       Seite bei 320 px ueber den Rand. anywhere senkt diese Mindestbreite,
       break-word taete es nicht. */
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    /* Die Zweispaltigkeit kommt allein aus #block1/#block2 mit 40 % float -
       #mc1 und #mc2 haben in style.css keine einzige Regel. */
    #block1,
    #block2 {
        width: auto;
        float: none;
        margin-left: 0;
    }

    /* Die Blätter-Buttons hatten width:10.795%. Bei 320 px Viewport ergibt
       das eine 34 px breite Fläche mit dem Wort ZURÜCK. WCAG 2.5.5 verlangt
       mindestens 44 x 44 px. */
    .button,
    .button.green {
        width: auto;
        min-width: 44px;
        min-height: 44px;
        display: inline-block;
        padding: 0.7em 1.2em;
        box-sizing: border-box;
    }

    /* Feste Einrückung der Blätterleiste, vorher teils inline im HTML */
    .subnav {
        margin-left: 0;
        display: block;
        padding: 0.5em 0;
    }
}

@media (max-width: 479px) {
    /* Bei 320 px bleibt neben einem 304-px-Bild kein Platz für Text. */
    .imgRight {
        float: none;
        display: block;
        margin: 0 0 1em 0;
        max-width: 100%;
    }

    body {
        font-size: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Fußzeile auf schmalen Schirmen
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
    #footer {
        margin-top: 2em;
        padding: 1em 0;
    }

    #footer ul {
        text-align: center;
        padding: 0;
    }

    #footer ul li {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    #footer ul li:first-child {
        border-top: 0;
    }

    #footer ul li a {
        display: block;
        padding: 0.9em 1em;
    }
}

/* ---------------------------------------------------------------------------
   Fußzeile am unteren Rand halten
   ---------------------------------------------------------------------------

   Bei kurzem Inhalt endete die Seite mitten im Fenster und darunter blieb der
   Seitenhintergrund stehen. #wrapper wird deshalb zur Spalte mit voller
   Fensterhöhe; die Fußzeile schiebt sich mit margin-top:auto nach unten.

   Die Floats innerhalb von #header und #content bleiben davon unberührt -
   Flex wirkt nur auf die direkten Kinder des Wrappers. */

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#footer {
    margin-top: auto;
}

/* Zwei Hilfselemente sind direkte Kinder des Wrappers und würden als
   Flex-Elemente eine eigene Zeile beanspruchen: der Ankerpunkt des
   Sprunglinks und das <br clear="both"> vor der Fußzeile. */
#inhalt,
#wrapper > br {
    flex: 0 0 auto;
    height: 0;
    margin: 0;
    line-height: 0;
}

/* Der Inhaltsbereich füllt den Platz zwischen Kopf und Fußzeile. */
#content,
#suchbereich,
#mainContentRahmen {
    flex: 1 0 auto;
}

/* #suchbereich trug float:left aus style.css. Ein Float richtet seine Breite
   nach dem Inhalt statt nach dem Container - die Trefferliste darin bekam mit
   width:100% deshalb nicht die 960 px des Wrappers, sondern die Breite, die
   ihre Zellen gerade bevorzugten. Die Tabelle war dadurch je nach Suchbegriff
   verschieden breit: 922 px bei "Dresden", 960 px bei "Leipzig".
   Unterhalb von 1151 px war der Float schon aufgehoben; hier gilt dasselbe
   für jede Fensterbreite. */
#suchbereich {
    float: none;
    width: 100%;
}


/* ---------------------------------------------------------------------------
   Seitenränder auf schmalen Schirmen
   ---------------------------------------------------------------------------
   Ohne Innenabstand klebten die Inhaltsbereiche am linken Fensterrand.
   box-sizing steht in style.css global auf border-box, der Innenabstand
   vergrößert die Container also nicht. */

@media (max-width: 1151px) {
    #suchbereich,
    #content,
    #mainContentRahmen {
        padding-left: 1em;
        padding-right: 1em;
        float: none;
    }

    /* Der Zurück-Link und die Überschrift der Trefferlisten liegen direkt im
       inhalt und bekommen damit denselben Rand. */
    #suchbereich {
        margin-top: 1.5em;
        margin-bottom: 2em;
        width: 100%;
    }
}

/* ===========================================================================
   Trefferliste
   ===========================================================================
   Eine Tabelle, serverseitig gerendert. Unter 767 px wird daraus eine
   Kartenliste - dieselbe Auszeichnung, andere Darstellung. */

.suchformular {
    display: flex;
    flex-wrap: wrap;
    /* Die Felder sollen auf einer Linie stehen. Jedes Feld ist eine Spalte aus
       Beschriftung und Eingabe; flex-end richtet sie an der Unterkante aus. */
    align-items: flex-end;
    gap: 1em 1.5em;
    margin: 1em 0 0.4em 0;
}

.suchformular .suchfeld {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.suchformular label,
.suchformular .suchfeld-gruppe {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.2em;
    line-height: 1.3;
}

/* Genauigkeit des Suchbegriffs. Das Auswahlfeld bekommt dieselbe Höhe wie
   die Texteingaben, damit die Felder auf einer Linie stehen. */
.suchfeld-modus select {
    height: 44px;
    padding: 0 0.4em;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #767676;
    border-radius: 3px;
    background: #fff;
    color: #222;
    max-width: 14em;
}

/* Zeitraum: Überschrift über beiden Feldern, darunter von/bis nebeneinander */
.suchfeld-zeit {
    display: block;
}

.suchfeld-zeit .suchfeld-zeile {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.suchfeld-zeit label {
    margin: 0;
}

/* Der Hinweis steht unter dem ganzen Formular, nicht im Feld - sonst
   verschiebt er die Grundlinie der ersten Spalte. */
.suchhinweis {
    font-size: 0.85rem;
    margin: 0 0 1.2em 0;
    color: #4a4a4a;
}

.suchformular input[type="text"] {
    font: inherit;
    padding: 0.45em 0.6em;
    border: 1px solid #9a9a9a;
    border-radius: 3px;
    background: #fff;
    color: #000;
    box-sizing: border-box;
}

#q {
    /* Schmaler als die urspruenglichen 22em, damit Suchen und Zuruecksetzen
       auf derselben Zeile bleiben, sobald das Auswahlfeld daneben steht. */
    width: 17.5em;
    max-width: 100%;
}


/* Knopf und Zurücksetzen nebeneinander, mit Abstand */
.suchfeld-knopf {
    flex-direction: row !important;
    align-items: center;
    gap: 1.2em;
}

.suche-zuruecksetzen {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Vorschlagsliste der Autovervollständigung
   ---------------------------------------------------------------------------

   Sie schwebt über dem Inhalt, statt im Fluss zu stehen. Andernfalls schöbe
   sie auf den Trefferseiten die ganze Tabelle nach unten und sähe dabei aus
   wie ein zweites Suchergebnis.

   Gestaltet als Eingabehilfe, nicht als Ergebnis: heller Kasten mit Rahmen
   und Schatten, deutlich abgesetzt von der Trefferliste darunter. Die
   Höhengrenze ist hier zwingend - bei der Eingabe "Neu" sind es 142
   Vorschläge, die sonst über den Bildschirmrand hinausreichen. */

.suchformular .suchfeld {
    position: relative;
}

.vorschlaege {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1200;
    list-style: none;
    margin: 3px 0 0 0;
    padding: 0;
    width: 100%;
    min-width: 22em;
    max-width: 34em;
    max-height: 21em;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #7d7d7d;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
}

.vorschlaege li {
    margin: 0;
    line-height: 0.1;
    border-bottom: 1px solid #e0e0e0;
}

.vorschlaege li:last-child { border-bottom: 0; }

.vorschlaege li br { display: none; }

.vorschlaege li a {
    display: block;
    background: transparent;
    color: #1d1d1d;
    text-decoration: none;
    padding: 0.5em 0.8em;
    font-size: 0.95rem;
    line-height: 1.35;
}

.vorschlaege li a:hover,
.vorschlaege li a:focus {
    background: #447f64;
    color: #fff;
    outline-offset: -3px;
}

/* Der Suchbegriff wird im Vorschlag fett hervorgehoben. */
.vorschlaege li b {
    color: #045c37;
}

.vorschlaege li a:hover b,
.vorschlaege li a:focus b {
    color: #fff;
}

.treffer-zahl {
    margin: 0 0 0.8em 0;
}

/* Fußzeile der Liste: Sprungfeld und Zeilenzahl nebeneinander, zentriert wie
   das Sprungfeld allein zuvor. Wird es zu eng, rutscht die Zeilenzahl unter
   das Sprungfeld statt hinauszuragen. */
.treffer-fuss {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6em 1.8em;
    margin: 0.8em 0 1.6em 0;
}

.treffer-fuss .treffer-sprung {
    margin: 0;
}

/* Zeilen je Seite. Nutzt dieselben Knöpfe wie die Seitenzahlen der
   Blätterleiste, damit beides als eine Bedienung erkennbar ist. */
.treffer-menge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
}

.treffer-menge ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.treffer-menge-text {
    color: #4a4a4a;
}

.treffer-tabelle {
    overflow-x: auto;
    /* Bezugsrahmen fuer die versteckten Sortierhinweise in den Spaltenkoepfen
       (position: absolute). Ohne ihn liegen sie ausserhalb des scrollbaren
       Kastens, werden nicht beschnitten und dehnen die ganze Seite: bei
       768 px liess sie sich um 41 px seitlich verschieben. */
    position: relative;
}

.treffer table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.treffer thead th {
    text-align: left;
    background: #313642;
    padding: 0;
}

.treffer thead a.treffer-sort {
    display: block;
    padding: 0.6em 0.7em;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.treffer thead a.treffer-sort:hover,
.treffer thead a.treffer-sort:focus {
    background: #464c58;
}

.treffer-pfeil { margin-left: 0.3em; }

.treffer tbody th,
.treffer tbody td {
    text-align: left;
    font-weight: normal;
    vertical-align: top;
    padding: 0.55em 0.7em;
    border-bottom: 1px solid #b0b0b0;
}

/*
 * Zebrastreifen. Beide Zeilenarten liegen als Schleier über dem
 * Seitenhintergrund, seine Struktur bleibt also schwach sichtbar.
 *
 * Der zweite Streifen ist neutral grau, nicht grünlich. Die Links der Liste
 * sind grün; ein grünstichiger Streifen darunter lässt beides ineinander
 * laufen, auch wenn der gemessene Kontrast stimmt.
 *
 * Er ist deshalb dunkler statt farbiger: Bei rein hellen Tönen rücken beide
 * Zeilenarten an Weiß und damit aneinander. Die hohe Deckkraft hält den
 * Abstand über den ganzen Hintergrund konstant - das Bild schwankt von hellen
 * zu dunkleren Stellen, ein durchscheinender Streifen würde mitschwanken.
 *
 * Gemessen gegen die Linkfarbe #045c37: 7,9:1 auf der hellen Zeile, 6,8:1 auf
 * der grauen. Gefordert sind 4,5:1.
 *
 * Der graue Streifen ist auf den aufgehellten Seitengrund abgestimmt: Beide
 * Zeilenarten liegen rund 18 Stufen auseinander, genug zum Unterscheiden und
 * wenig genug, dass die Liste nicht streifig wirkt. Die Trennlinien tragen
 * den Rest.
 */
.treffer tbody tr {
    background: rgba(255, 255, 255, 0.86);
}

.treffer tbody tr:nth-child(even) {
    background: rgba(234, 234, 234, 0.94);
}

/* Die überfahrene Zeile.
 *
 * Dezent, aus zwei Gründen: Ein kräftiger Schleier drückt den Kontrast der
 * Links darunter - bei 0,22 fiel er auf der grauen Zeile auf 5,2:1 -, und die
 * Zeile sprang beim Überfahren um 40 Helligkeitsstufen, was in einer langen
 * Liste unruhig wirkt. Bei 0,10 sind es 18 Stufen, deutlich genug zum
 * Verfolgen, und die Links bleiben bei 6,0 bis 7,0:1.
 */
.treffer tbody tr:hover {
    background: rgba(68, 127, 100, 0.10);
}

.treffer tbody a {
    color: #045c37;
    font-weight: bold;
    text-decoration: none;
}

.treffer tbody a:hover,
.treffer tbody a:focus {
    text-decoration: underline;
}

/*
 * Spaltenbreiten der Trefferliste.
 *
 * Ohne Vorgabe verteilt der Browser die Breite nach dem laengsten Inhalt. Ein
 * einzelner langer Titel - "Kaufbuch fuer Grundstuecke unterhalb des Schlosses
 * und auf dem Areal der ehem. Moenchskirche in Bautzen" - zieht dann die
 * Titelspalte auf und draengt die Datierung so weit zusammen, dass die beiden
 * Jahreszahlen untereinander stehen.
 *
 * Die Datierung darf deshalb nie umbrechen; die Titelspalte bekommt eine
 * Obergrenze und bricht statt dessen selbst um. Angesprochen wird ueber
 * data-spalte, nicht ueber die Position - so bleibt die Zuordnung lesbar,
 * auch wenn sich die Spaltenfolge einmal aendert.
 */
.treffer [data-spalte="Datierung"] {
    white-space: nowrap;
}

/*
 * Die erste Spalte traegt den Ort beziehungsweise das Gericht und ist die
 * Spalte, an der man die Zeile wiederfindet. Bei kurzen Namen - Burk, Oehna,
 * Seidau - schrumpft sie sonst auf wenige Zeichen und die Liste franst links
 * aus. Angesprochen ueber scope="row", damit die Regel fuer beide Suchen
 * gilt: die Spalte heisst einmal "Ort", einmal "Gericht".
 */
.treffer thead th:first-child,
.treffer tbody th[scope="row"] {
    min-width: 8em;
}

.treffer [data-spalte="Titel, Band"] {
    max-width: 20em;
    overflow-wrap: break-word;
}

/* Zweites Feld einer Zelle - Band unter Titel, Bestandsbezeichnung unter Nummer */
.treffer-zusatz {
    display: block;
    font-size: 0.88em;
    color: #4a4a4a;
}

.treffer-blaettern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 1em 0;
    flex-wrap: wrap;
}

.treffer-blatt {
    display: inline-block;
    padding: 0.6em 1.1em;
    min-height: 44px;
    box-sizing: border-box;
    background: #447f64;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}

.treffer-blatt:hover,
.treffer-blatt:focus { background: #2f5f49; }

.treffer-blatt.ist-aus {
    background: #b9b9b9;
    color: #f0f0f0;
}

/* Blätterknöpfe der Detailseiten am Rand des Bestands: Sie bleiben stehen und
   werden abgeschaltet, statt zu verschwinden - sonst rückt der verbliebene
   Knopf an die Stelle des fehlenden und die Leiste springt beim Blättern.
   Als <span> ausgegeben, also von sich aus weder anklickbar noch im
   Tabulatorlauf; die Farben zeigen denselben Zustand wie in der Trefferliste. */
.button.ist-aus,
.button.green.center.ist-aus {
    background-color: #b9b9b9;
    color: #f0f0f0;
    cursor: default;
}

.gerichtsbeschreibung {
    margin: 2em 0;
    max-width: 50rem;
}

/* Der Zurück-Link steht außerhalb der Bereiche, für die style.css Farben
   definiert - er erschien deshalb in der Standard-Linkfarbe. */
.zurueck {
    margin: 0 0 0.5em 0;
}

/* Kopf der Detailseiten: der Weg zurück zur Trefferliste links, die
   Blätterleiste rechts, beides in einer Zeile. Reicht der Platz nicht, bricht
   die Blätterleiste darunter - der Zurück-Weg steht im Markup zuerst und
   bleibt damit oben, wo er auf dem Telefon zuerst gebraucht wird.

   Die feste Einrückung der Blätterleiste (margin-left in style.css) wird hier
   aufgehoben; sie schöbe die Zeile sonst über die Spaltenbreite hinaus. */
.detail-kopfnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 1.5em;
    margin: 0.2em 0 0.8em 0;
    /* Bündig mit den Inhaltsspalten darunter: #block1 und #block2 stehen mit
       je 40 % nebeneinander, dazwischen 20 px. Ohne diese Grenze reicht der
       Kopf über die volle Breite und die Blätterleiste steht sichtbar weiter
       rechts als alles darunter. Unter 768 px füllen die Blöcke die Breite,
       dann gilt die Grenze nicht. */
    max-width: calc(80% + 20px);
}

@media (max-width: 767px) {
    .detail-kopfnav {
        max-width: none;
    }

    /* Untereinander: Die Leiste steht dann linksbündig unter dem Zurück-Weg,
       wie die zweite Blätterleiste am Fuß der Seite. */
    .detail-kopfnav .subnav {
        margin-left: 0;
    }
}

/* Die Knöpfe behalten ihre natürliche Breite - als Flex-Element würden sie
   sonst gestaucht, bis die Beschriftungen übereinanderstehen. Schrumpfen darf
   stattdessen der Zurück-Weg, dessen Text umbrechen kann. */
/* Rechts ausgerichtet über einen auto-Rand, nicht über justify-content:
   space-between. Bei space-between verteilt sich, was gerade da ist - fehlt
   der Zurück-Weg (unbekannte id), rückte die Leiste an den linken Rand und
   stünde damit woanders als sonst. Der auto-Rand hält sie in jedem Fall
   rechts. */
.detail-kopfnav .subnav {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.detail-kopfnav .subnav > * {
    flex: 0 0 auto;
}

/* Zweite Blätterleiste unter dem Inhalt. Sie trug eine feste Einrückung von
   680 Pixeln, die sich an nichts orientiert - je nach Fensterbreite stand sie
   damit weiter rechts als die Inhaltsspalten darüber. Jetzt endet sie bündig
   mit ihnen, wie die Leiste im Seitenkopf. */
.subnav-fuss {
    margin-left: 0;
    max-width: calc(80% + 20px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 767px) {
    .subnav-fuss {
        max-width: none;
        justify-content: flex-start;
    }
}

/* Die Blätter-Knöpfe tragen in style.css eine prozentuale Breite (10,795 %).
   Sie richtet sich nach dem umgebenden Kasten und ergab dort, wo dieser
   schmaler ist als die halbe Seite, eine 20 Pixel breite Fläche mit dem Wort
   ZURÜCK darin. Die Breite ergibt sich jetzt aus der Beschriftung. Für die
   Knöpfe der Formulare gilt das ohnehin schon. */
.subnav .button {
    width: auto;
}

/* Versalien kommen aus dem Stylesheet, nicht aus dem Quelltext: "WEITER" im
   Markup buchstabieren manche Screenreader als W-E-I-T-E-R. Der zugaengliche
   Name beginnt mit dem sichtbaren Wort, damit der Sprachbefehl "Weiter"
   trifft (WCAG 2.5.3). */
.subnav .button {
    text-transform: uppercase;
}

.zurueck-liste {
    margin: 0;
    min-width: 0;
}

/* Lange Namen - "Oschatz, Königl. Landgericht (Vorprov.: Schulamt Meißen, Amt
   Oschatz)" - ziehen den Zurück-Weg sonst bis an die Blätterleiste heran. Er
   bleibt auf der halben Zeile und bricht darin um. Steht er ohnehin allein in
   seiner Zeile, gilt die Grenze nicht. */
.detail-kopfnav .zurueck-liste {
    max-width: 50%;
}

@media (max-width: 767px) {
    .detail-kopfnav .zurueck-liste {
        max-width: none;
    }
}

.zurueck a {
    color: #045c37;
    text-decoration: none;
}

.zurueck a:hover,
.zurueck a:focus {
    text-decoration: underline;
}


/* --- Kartenansicht auf schmalen Schirmen --------------------------------- */

@media (max-width: 767px) {
    .treffer-tabelle { overflow-x: visible; }

    .treffer table,
    .treffer tbody,
    .treffer tbody tr,
    .treffer tbody th,
    .treffer tbody td {
        display: block;
        width: auto;
    }

    /* Die Kopfzeile entfällt sichtbar - die Beschriftung steht je Zelle davor.
       Im Dokument bleibt sie, denn in ihr stecken die Sortierlinks; mit
       display:none wären sie für Screenreader und Tastatur weg. Deshalb das
       Muster von .visuell-versteckt: aus dem Fluss nehmen, auf 1 px
       schrumpfen, beschneiden.

       Das allein reicht nicht. position:absolute macht das thead zwar zum
       Block, tr und th bleiben aber Tabellenzeile und -zelle - und für
       Tabellenteile ohne Tabelle baut der Browser eine anonyme Tabelle. Die
       richtet sich nicht nach dem 1 px des thead, sondern nach ihrem Inhalt:
       Die Sortierlinks stehen auf white-space:nowrap, die Zeile wird so breit
       wie alle Spaltenköpfe zusammen, rund 670 px. Zu sehen ist davon nichts,
       weil das thead sie beschneidet und der body overflow-x:hidden trägt;
       die Kästen ragen trotzdem über den rechten Rand hinaus, und jede
       Messung des Umbruchs findet sie dort. Als Blöcke übernehmen tr und th
       die 1 px des thead, und die anonyme Tabelle entsteht gar nicht erst.
       Das thead steht der Vollständigkeit halber mit in der Liste. */
    .treffer thead,
    .treffer thead tr,
    .treffer thead th {
        display: block;
    }

    .treffer thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .treffer tbody tr {
        border: 1px solid #b0b0b0;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.86);
        margin-bottom: 0.8em;
        padding: 0.3em 0.6em;
    }

    .treffer tbody tr:nth-child(even) { background: rgba(234, 234, 234, 0.94); }

    .treffer tbody th,
    .treffer tbody td {
        border-bottom: 0;
        padding: 0.3em 0;
    }

    /* Als Kartenliste steht jedes Feld ohnehin auf eigener Zeile - die
       Breitenvorgaben der Tabelle wuerden hier nur stoeren. */
    .treffer [data-spalte="Titel, Band"] {
        max-width: none;
    }

    .treffer tbody th[scope="row"] {
        min-width: 0;
    }

    /* Feldname vor dem Wert, aus data-spalte */
    .treffer tbody td::before {
        content: attr(data-spalte) ": ";
        font-size: 0.85em;
        color: #4a4a4a;
    }

    .treffer tbody td:empty { display: none; }

    .treffer tbody th {
        font-size: 1.05rem;
        padding-bottom: 0.4em;
    }

    .suchformular { gap: 0.8em; }
    #q { width: 100%; }
    .suchfeld:first-child { width: 100%; }
}


/* ---------------------------------------------------------------------------
   Knöpfe
   ---------------------------------------------------------------------------

   style.css enthält zwei .button-Regeln mit unterschiedlichen Werten, darunter
   width:10.795% und line-height:20px. Dazu berechnen button- und a-Elemente
   ihre Innenabstände verschieden - deshalb standen Suchen und Zurücksetzen auf
   unterschiedlicher Höhe.

   Hier eine gemeinsame Grundlage: feste Höhe, Inhalt per Flexbox zentriert,
   line-height neutralisiert. Die Selektoren sind bewusst spezifischer als die
   Regeln in style.css. */

.suchformular .button,
.suchformular .button-zweit,
.treffer-sprung .button,
.treffer-sprung .button-zweit,
a.button-zweit,
button.button-zweit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    width: auto;
    min-width: 0;
    padding: 0 1.6em;
    margin: 0;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 3px;
    cursor: pointer;
}

/* Hauptaktion */
.suchformular button.button,
.treffer-sprung button.button {
    background: #447f64;
    border: 1px solid #447f64;
    color: #fff;
}

.suchformular button.button:hover,
.suchformular button.button:focus,
.treffer-sprung button.button:hover,
.treffer-sprung button.button:focus {
    background: #2f5f49;
    border-color: #2f5f49;
}

/* Zweitrangig: gleiche Maße, heller Grund */
a.button-zweit,
button.button-zweit {
    background: #fff;
    border: 1px solid #447f64;
    color: #2f5f49;
}

a.button-zweit:hover,
a.button-zweit:focus,
button.button-zweit:hover,
button.button-zweit:focus {
    background: #e8f0ec;
    color: #24493a;
}

/* Eingabefelder auf dieselbe Höhe wie die Knöpfe */
.suchformular input[type="text"],
.treffer-sprung input[type="number"] {
    height: 44px;
    line-height: 1;
}

/* --- Seitenzahlen und Sprungfeld ---------------------------------------- */

.treffer-seiten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.treffer-seite {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    padding: 0.55em 0.6em;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    border: 1px solid #9a9a9a;
    border-radius: 3px;
    background: #fff;
    color: #1d1d1d;
}

a.treffer-seite:hover,
a.treffer-seite:focus {
    background: #447f64;
    border-color: #447f64;
    color: #fff;
}

.treffer-seite.ist-aktuell {
    background: #313642;
    border-color: #313642;
    color: #fff;
    font-weight: bold;
}

.treffer-luecke {
    padding: 0 0.2em;
    color: #4a4a4a;
}

/* Sprungfeld für lange Ergebnisse */
/* Sprungfeld mittig unter beziehungsweise über der Blätterleiste */
.treffer-sprung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    margin: 0.8em 0 1.6em 0;
}

.treffer-sprung input[type="number"] {
    font: inherit;
    width: 5em;
    padding: 0 0.6em;
    border: 1px solid #9a9a9a;
    border-radius: 3px;
    box-sizing: border-box;
}


@media (max-width: 767px) {
    .treffer-blaettern { justify-content: center; }
    .treffer-seiten { justify-content: center; width: 100%; order: 3; }
    .treffer-sprung { flex-wrap: wrap; }
}

/* Anklickbare Zeile: Zeiger und Hervorhebung wie bei einem Link */
.treffer tbody tr[data-ziel] {
    cursor: pointer;
}

.treffer tbody tr[data-ziel]:hover {
    background: rgba(68, 127, 100, 0.10);
}

/* Der Link in der ersten Spalte bleibt die Tastaturbedienung; wenn er den
   Fokus hat, wird die ganze Zeile hervorgehoben. */
/* Der Tastaturfokus darf kräftiger sein als der Mauszeiger - er muss ohne
   Zeigegerät auffindbar bleiben (WCAG 2.4.7). Die Umrandung trägt die
   Hauptlast, der Schleier stützt sie nur. */
.treffer tbody tr[data-ziel]:focus-within {
    background: rgba(68, 127, 100, 0.16);
    outline: 2px solid #b34700;
    outline-offset: -2px;
}

/*
 * Nur für Screenreader. Der Text steht im Dokument und wird vorgelesen, ist
 * aber nicht zu sehen. clip statt display:none - Ausgeblendetes liest kein
 * Screenreader vor.
 *
 * Gebraucht für den Hinweis an ausgehenden Links, dass sie ein neues Fenster
 * öffnen. WCAG 3.2.5 verlangt, dass das vorher erkennbar ist; wer die Seite
 * hört statt sieht, merkt den Fensterwechsel sonst erst am fehlenden Zurück.
 */
.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Ausgehende Links tragen einen kleinen Pfeil. Er steht in ::after und damit
 * außerhalb des Textflusses; aria-hidden ist nicht nötig, weil generierter
 * Inhalt von Screenreadern uneinheitlich behandelt wird - die Ansage kommt
 * aus dem .nur-sr-Text daneben, nicht von hier.
 */
a[data-extern]::after {
    content: "\2197";
    margin-left: 0.15em;
    font-size: 0.9em;
    text-decoration: none;
}


/* --- Listen von A bis Z: Gerichtsstellen (gerichtssuche/liste/), Orte -------
   (karte/liste.php) ------------------------------------------------------- */

/* Sprungleiste. Die Felder sind gross genug zum Antippen (44 px Zielgroesse
   bei 320 px Breite: 2,75em bei 16 px) und brechen in Zeilen um. */
.buchstaben ul {
    list-style: none;
    margin: 0 0 1.2em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

.buchstaben a {
    display: inline-block;
    min-width: 2.75em;
    padding: 0.55em 0.4em;
    text-align: center;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.86);
    color: #045c37;
    font-weight: bold;
    text-decoration: none;
}

.buchstaben a:hover,
.buchstaben a:focus {
    text-decoration: underline;
}

/* Zwei Spalten, sobald Platz ist; darunter eine. Ein Eintrag bricht nie
   zwischen zwei Spalten. */
.az-liste ul {
    list-style: none;
    margin: 0 0 1.4em;
    padding: 0;
    columns: 2 20em;
    column-gap: 2.5em;
}

.az-liste li {
    break-inside: avoid;
    padding: 0.2em 0;
}

.az-liste a {
    color: #045c37;
    font-weight: bold;
    text-decoration: none;
}

.az-liste a:hover,
.az-liste a:focus {
    text-decoration: underline;
}

.az-liste-zahl {
    color: #4a4a4a;
    font-size: 0.9em;
    white-space: nowrap;
}

/* Filterfeld, von js/az-filter.js eingesetzt. Ohne JavaScript gibt es das
   Element nicht. Rahmen #767676: 4,5:1 auf Weiss, mehr als die 3:1, die
   WCAG 1.4.11 fuer die Grenze eines Eingabefelds verlangt. Schrift 16 px,
   sonst zoomt iOS beim Antippen heran. Den Fokus zeigt die allgemeine
   :focus-visible-Regel der Seite. */
.az-filter {
    margin: 0 0 1em;
}

.az-filter label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.3em;
}

.az-filter input {
    font: inherit;
    font-size: max(1rem, 16px);
    width: 100%;
    max-width: 24em;
    height: 44px;
    box-sizing: border-box;
    padding: 0.45em 0.6em;
    border: 1px solid #767676;
    border-radius: 3px;
    background: #fff;
    color: #000;
}

.az-filter-stand {
    min-height: 1.4em;
    margin: 0.4em 0 0;
    font-size: 0.9em;
    color: #4a4a4a;
}

/* Ortsliste: Verweis ins Historische Ortsverzeichnis, leiser als der Ortsname. */
.az-liste a.az-liste-hov {
    font-weight: normal;
    font-size: 0.9em;
    color: #045c37;
}


/* --- Kennzahlen auf der Startseite --------------------------------------- */

/* Vier Kacheln unter den Suchknoepfen, in voller Breite; bei schmalem
   Schirm zwei mal zwei. Die Zahl steht gross, die Bezeichnung darunter -
   dt und dd werden dafuer in der Darstellung vertauscht, das Dokument
   behaelt Bezeichnung vor Wert. */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6em;
    margin: 1.6em 0 0.4em;
    padding: 0;
    clear: both;
}

.kennzahlen > div {
    display: flex;
    flex-direction: column-reverse;
    padding: 0.7em 0.6em;
    border: 1px solid #b0b0b0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.86);
    text-align: center;
}

.kennzahlen dt {
    font-size: 0.95em;
    color: #333;
}

.kennzahlen dt a {
    color: #045c37;
    font-weight: bold;
}

.kennzahlen dd {
    margin: 0;
    font-size: 1.6em;
    font-weight: bold;
    color: #313642;
}

.kennzahlen-stand {
    font-size: 0.9em;
    color: #4a4a4a;
    margin: 0 0 0.6em;
}

/* Bei 320 px bleiben je Kachel gut 120 px - "Gerichtsbücher" und
   "Gerichtsstellen" brachen dort mitten im Wort. Etwas kleinere Schrift und
   weniger Rand halten sie auf einer Zeile; hyphens trennt richtig, falls
   eine Schrift doch breiter laeuft. */
@media (max-width: 599px) {
    .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kennzahlen > div { padding: 0.6em 0.3em; }
    .kennzahlen dt { font-size: 0.85em; hyphens: auto; }
}


/* --- Stand der Veroeffentlichung im Impressum ----------------------------- */

/* Kaum sichtbar, aber markierbar: Wer die Seite markiert oder genau hinsieht,
   findet Commit und Zeitpunkt des letzten Pulls. */
.stand-zeile {
    margin-top: 3em;
    font-size: 0.75em;
    color: rgba(0, 0, 0, 0.12);
}


/* --- Gerichtsbücher je Archiv (projekt/) ---------------------------------- */

/* So breit wie der Inhalt, nicht wie die Spalte: Die Regel fuer
   "#section table" weiter oben gilt der Begriffstabelle derselben Seite
   (volle Breite, feste Spalten) und zog diese Tabelle auf 100 % - die Zahlen
   standen dann eine Bildschirmbreite von den Namen entfernt. Gestaltet wie
   die Trefferliste: dunkle Kopfzeile, Zebrastreifen, gleiche Gruentoene. */
#section table.archivtabelle {
    width: auto;
    min-width: 20em;
    table-layout: auto;
    margin: 1.2em 0 1.6em;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #b0b0b0;
    font-size: 0.95em;
}

.archivtabelle caption {
    text-align: left;
    font-weight: bold;
    padding-bottom: 0.5em;
}

.archivtabelle th,
.archivtabelle td {
    text-align: left;
    font-weight: normal;
    padding: 0.45em 0.9em;
    border-bottom: 1px solid #d4d4d4;
}

.archivtabelle thead th {
    background: #313642;
    color: #fff;
    font-weight: bold;
}

.archivtabelle tbody tr:nth-child(even) {
    background: rgba(234, 234, 234, 0.94);
}

/* Gleich breite Ziffern in Zeilenhoehe, damit die Stellen untereinander
   stehen - die Schrift setzt sonst Mediaevalziffern unterschiedlicher Breite. */
.archivtabelle .zahl {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

.archivtabelle tfoot th,
.archivtabelle tfoot td {
    font-weight: bold;
    border-top: 2px solid #313642;
    border-bottom: 0;
}

/* Schmaler Schirm: die Tabelle fuellt die Breite, die Namen duerfen
   umbrechen. */
@media (max-width: 479px) {
    #section table.archivtabelle { width: 100%; min-width: 0; }
    .archivtabelle th,
    .archivtabelle td { padding: 0.4em 0.5em; }
}


/* --- Sortierleiste der Trefferliste auf schmalen Schirmen ----------------- */

/* Unter 768 px steht die Trefferliste als Kartenstapel da, und ihr Kopf war
   auf 1 px weggeschnitten (Block "Kartenansicht auf schmalen Schirmen"). Die
   Sortierlinks darin blieben per Tab erreichbar, aber der Fokus war
   unsichtbar (WCAG 2.4.7), und mit dem Finger liess sich gar nicht sortieren.

   Hier wird derselbe Kopf als Leiste von Knoepfen gezeigt: dieselben Links,
   dieselben Adressen wie am Desktop, ohne zweite Ausgabe und ohne
   JavaScript. thead, tr und th bleiben Bloecke bzw. eine Flex-Reihe - als
   Tabellenteile baute der Browser sonst eine anonyme Tabelle in der Breite
   aller Koepfe. Die versteckten Hinweise "- sortieren" sind position:absolute;
   jedes th ist ihr Bezugsrahmen, sonst dehnten sie die Seite.

   Nur fuer den Bildschirm: Gedruckt bleibt es bei der Kartenansicht ohne
   Leiste. */
@media screen and (max-width: 767px) {
    .treffer thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        margin-bottom: 0.8em;
    }

    .treffer thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        align-items: stretch;
    }

    .treffer thead tr::before {
        content: "Sortieren nach:";
        flex-basis: 100%;
        font-size: 0.9em;
        color: #4a4a4a;
    }

    .treffer thead th,
    .treffer thead th:first-child {
        position: relative;
        min-width: 0;
        background: none;
    }

    /* Mindestens 44 px hoch, gut zu treffen. */
    .treffer thead a.treffer-sort {
        display: flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
        padding: 0.5em 0.8em;
        background: #313642;
        border-radius: 4px;
    }

    /* Die gewaehlte Sortierung im Gruen der Seite, nicht nur am Pfeil
       erkennbar. Weiss auf #045c37: rund 8:1. */
    .treffer thead a.treffer-sort.ist-aktiv {
        background: #045c37;
    }
}