/* Gemeinsamer optischer Feinschliff für Öffentlichkeit, Arbeitsplatz und Mobil.
   Nach den Bereichsstilen laden; Farben, Rundungen, Schrift und Abstände kommen
   weiterhin aus den vorhandenen Darstellungseinstellungen des Archivs. */
:root {
  --abstand-abschnitt: calc(var(--abstand-kachel, 1.35rem) * 1.5);
}

.kartenflaeche { height:clamp(18rem,62vh,45rem); border:1px solid var(--farbe-linie); border-radius:var(--rand); }
.karten-punktliste { margin-block:1rem; padding:1rem; background:var(--farbe-flaeche); border:1px solid var(--farbe-linie); border-radius:var(--rand); }
.zeitreise-blaettern { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; background:var(--farbe-flaeche); border-radius:var(--rand); }
@media(max-width:40rem) { .kartenflaeche { height:52vh; min-height:18rem; } }

h1, h2, h3 { letter-spacing: -.015em; }
.inhalt > h1, .bk-inhalt > h1 { margin-block: .5rem .65rem; }
.einleitung { line-height: 1.75; margin-block: .5rem var(--abstand-abschnitt); }
.brotkrumen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem;
  font-size: .85rem; color: var(--farbe-gedimmt); margin-block: 0 1.25rem;
}
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }
.fuss { background: var(--farbe-flaeche); line-height: 1.8; }
.systemmeldung {
  max-width: 34rem; margin: 12vh auto 2rem; padding: var(--abstand-abschnitt);
  border: 1px solid var(--farbe-linie); border-radius: var(--rand);
  background: var(--farbe-flaeche); box-shadow: var(--schatten); text-align: center;
}
.archivfilter { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-block:1rem .5rem; }
.archivfilter label { font-weight:600; }
.archivfilter select { width:auto; max-width:100%; min-height:44px; margin:0; }
.rueckkehr { margin-block:0 1rem; }
@media(max-width:40rem) { .archivfilter select { width:100%; } }

/* Ruhige Kopfzeile und klar erkennbare, aufklappbare Menübereiche. */
.kopf-innen { padding-block: 1.1rem; }
.hauptnav { background: var(--farbe-flaeche); }
.hauptnav-innen { gap: .2rem; padding-block: .4rem; }
.hauptnav-innen > li > a, .nav-desktop-gruppe > summary {
  border-radius: var(--rand-klein); padding-inline: .8rem;
}
.nav-desktop-gruppe > summary.aktiv, .hauptnav a.aktiv {
  background: var(--farbe-flaeche-sanft);
  box-shadow: inset 0 -2px var(--farbe-primaer);
}
.hauptnav-dropdown { border-radius: var(--rand); margin-top: .35rem; padding: .65rem; }
.hauptnav-dropdown a[aria-current], .menue-panel a[aria-current] {
  background: var(--farbe-flaeche-sanft); font-weight: 700;
}
.nav-abschnitt { border-top: 1px solid var(--farbe-linie); margin-top: .45rem; }
.menue-panel .nav-mobile-gruppe { border-bottom: 1px solid var(--farbe-linie); padding-block: .2rem; }
.menue-panel .nav-mobile-gruppe > summary { font-weight: 700; }
.menue-panel .nav-mobile-gruppe > ul { padding: .2rem 0 .6rem .65rem; }
.kopf-suche-knopf svg, .kopf-konto-knopf svg, .konto-menue > summary svg {
  width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem;
}
.kopf-suche-knopf:hover, .konto-menue > summary:hover { background: var(--farbe-flaeche-sanft); }

/* Einladender Einstieg; Suchfeld und Hauptaktion bilden eine klare Einheit. */
.hero { padding: calc(var(--abstand-kachel, 1.35rem) * 2); margin-block: .5rem var(--abstand-abschnitt); }
.hero h1 { max-width: 22ch; font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
.hero .einleitung { margin-bottom: 1.5rem; max-width: 55ch; }
.hero-suche input { box-shadow: var(--schatten); }
.hero-suche button { padding-inline: 1.4rem; }
.hero-knopf { flex-grow: 0; }
.gruppen-raster { gap: var(--abstand-kachel, 1.35rem); }
.gruppen-kachel { border-top: 3px solid var(--farbe-primaer); }
.gruppen-kachel .icon-kreis { width: 2.9rem; height: 2.9rem; margin-bottom: 1.1rem; }
.gruppen-kachel h2 { font-size: 1.25rem; line-height: 1.4; margin-bottom: .65rem; }
.gruppen-kachel p { line-height: 1.65; }
.gruppen-kachel .anzahl { margin-block: .2rem 1rem; }
.gruppen-kachel-hintergrundsymbol { opacity: .035; }
.gruppen-knopf { background: var(--farbe-flaeche-sanft); color: var(--farbe-primaer); }
.gruppen-knopf svg { color: currentColor; }
.gruppen-kachel:hover .gruppen-knopf { background: var(--farbe-primaer); color: var(--farbe-auf-akzent); }

/* Fachgruppen als echte Abschnittsüberschriften statt einzelner Karten. */
.bereichsliste--gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.bereichsliste--gruppen > li { margin: 0; min-width: 0; padding: 1rem 1.1rem; }
.bereichsliste--gruppen > .bereichs-ueberschrift {
  grid-column: 1 / -1; border: 0; background: transparent; padding: .75rem 0 .2rem;
  font-size: 1.05rem; color: var(--farbe-text);
}
.bereichsliste--gruppen .anzahl { margin-left: auto; }
.bereichsliste--gruppen a { flex: 1; }

/* Suchtreffer: deutlicher Titel, ruhiger Begleittext und erhaltene Bildfarben. */
.trefferliste .suchtreffer { margin-bottom: 1rem; }
.suchtreffer-kopf { row-gap: .5rem; line-height: 1.45; }
.suchtreffer-kopf a { font-size: 1.15rem; }
.suchtreffer-bildlink { border: 1px solid var(--farbe-linie); padding: .3rem; }
.suchtreffer-angaben { padding-top: .6rem; border-top: 1px solid var(--farbe-linie); }
.suchtreffer-beschreibung { line-height: 1.7; }
.suchtreffer-inhalt > :last-child { margin-bottom: 0; }
.datensatz-kopf { border-top: 3px solid var(--farbe-primaer); }
.datensatz > .abschnitt { margin-top: var(--abstand-abschnitt); }
.angaben dt, .angaben dd { padding-block: .2rem; }
html.dunkel img { filter: none; }

/* Gleiche Eingabeflächen, Legenden und Aktionsgrößen in allen Formularwegen. */
.formular { max-width: 44rem; }
.formular input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),
.formular select, .formular textarea, .pruefkarte textarea {
  width: 100%; padding: .75rem .85rem; border: 1px solid var(--farbe-linie);
  border-radius: var(--rand-klein); background: var(--farbe-flaeche); color: var(--farbe-text);
}
.formular label { line-height: 1.5; margin-block: 1.1rem .4rem; }
.formular > label:first-of-type { margin-top: 0; }
.formular input[type=checkbox], .formular input[type=radio],
.mob-formular input[type=checkbox], .mob-formular input[type=radio] { accent-color: var(--farbe-primaer); }
.formular fieldset { min-width: 0; margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--farbe-linie); border-radius: var(--rand-klein); }
.formular legend { padding-inline: .45rem; font-weight: 700; color: var(--farbe-primaer); }
.formular button, .pruefkarte button { padding: .65rem 1rem; font-weight: 600; }
.formular input[type=file] { overflow: hidden; }
.formular input[type=file]::file-selector-button, .mob-formular input[type=file]::file-selector-button {
  background: var(--farbe-flaeche-sanft); color: var(--farbe-text); border: 1px solid var(--farbe-linie);
  border-radius: var(--rand-klein); padding: .5rem .65rem; min-height: 44px; font: inherit;
}
.hinweis { padding: 1rem 1.2rem; margin-block: 1rem; }
.hinweis > :first-child { margin-top: 0; }
.hinweis > :last-child { margin-bottom: 0; }
.seitennavigation, .blaettern { margin-top: 1.25rem; border-top: 1px solid var(--farbe-linie); padding-top: 1rem; }

/* Arbeitsplatz: mehr Orientierung ohne zusätzliche Menütiefe. */
.bk-kopf { box-shadow: var(--schatten); }
.bk-seite { padding: 1.1rem .7rem 2rem; }
.bk-seite .bk-schnellzugriff { padding-bottom: .75rem; border-bottom: 1px solid var(--farbe-linie); }
.bk-seite .bk-nav-gruppe { margin-block: .7rem; }
.bk-nav-gruppe > summary { padding: .7rem; font-size: .9rem; line-height: 1.4; }
.bk-nav-gruppe > summary.aktiv { background: var(--farbe-flaeche-sanft); font-weight: 800; }
.bk-seite .bk-untergruppe { margin-left: 1.15rem; font-size: .78rem; line-height: 1.5; }
.bk-kachel .zahl { font-variant-numeric: tabular-nums; font-size: 2rem; }
.bk-kachel .bezeichnung { line-height: 1.5; }
.bk-kachel { border-top: 3px solid var(--farbe-linie); }
a.bk-kachel:hover { border-color: var(--farbe-primaer); }
.bk-inhalt > h2 { margin-top: 2rem; }
.vorlagentabelle th { font-size: .85rem; font-weight: 700; }
.vorlagentabelle th, .vorlagentabelle td { line-height: 1.6; }
.vorlagentabelle tbody tr:nth-child(even) { background: var(--farbe-hintergrund); }
.vorlagentabelle tbody tr:hover { background: var(--farbe-flaeche-sanft); }
.vorlagentabelle td a { text-underline-offset: .2em; }
.mob-abschnitt { margin-block: 1rem; }
.mob-abschnitt > summary { padding-block: 1.15rem; }
.mob-abschnitt[open] > summary { background: var(--farbe-flaeche-sanft); margin-inline: -1rem; padding-inline: 1rem; border-radius: var(--rand) var(--rand) 0 0; }
.mob-formular label { line-height: 1.5; }

@media (max-width: 55rem) {
  .kopf-innen { padding-block: .8rem; }
  .menue { margin-left: 0; }
  .hero { padding: var(--abstand-kachel, 1.35rem); }
  .hero h1 { max-width: none; }
}
@media (max-width: 48rem) {
  .mob-abschnitt[open] > summary { margin-inline: -.75rem; padding-inline: .75rem; }
}
@media (max-width: 40rem) {
  .systemmeldung { margin-inline: 1rem; }
  .bereichsliste--gruppen { grid-template-columns: 1fr; }
  .hero-aktionen { align-items: stretch; }
  .formular { padding: 1rem; }
  .formular fieldset { padding: .75rem; }
  .suchtreffer-bild { height: 9rem; }
  .bk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 24rem) { .bk-kacheln { grid-template-columns: 1fr; } }
@media print {
  .gruppen-kachel, .datensatz-kopf, .bk-kachel { border-top-width: 1px; }
  .hero, .gruppen-kachel, .bk-kopf { box-shadow: none; }
  .suchtreffer-bildlink { display: none; }
}

/* v1.80: robuste mobile Suche und sichtbare Tastaturfokussierung. */
.suchfilter :is(input, select, button):focus-visible, .seitennavigation a:focus-visible, .suchtreffer-kopf a:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 3px; }
.suchfilter input[type="search"] { width: 100%; min-width: 0; max-width: 100%; }
.suchfilter-aktionen a, .suchfilter-aktionen button { min-height: 44px; }
.suchtreffer { min-width: 0; }
.suchtreffer-angaben dd { overflow-wrap: anywhere; }
@media(max-width: 40rem) {
  .suchfilter-aktionen > * { flex: 1 1 10rem; text-align: center; }
  .seitennavigation { justify-content: space-between; }
  .seitennavigation span { flex-basis: 100%; order: -1; }
  .suchtreffer-kopf a { overflow-wrap: anywhere; }
}