/* Archiv 1864 – Seitenstile nach Mockups 01–08, 12. Werte aus tokens.css. Desktop und Handy ab 360 px (UC-001, UC-002, UC-003, UC-010). */

:root {
    --font-body: var(--font-roboto);
    --footer-dunkel: #171717;
    --kachel-hell: #dcdcdc;
    --flaeche-hell: #f3f3f1;
    --text-dunkel: #222222;
    --linie-hell: #e2e2de;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    background: var(--weiss);
    color: var(--text);
}

.s64-container {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: 10px;
    box-sizing: border-box;
}

/* Kopfzeile */
.s64-header {
    position: relative;
    z-index: 30;
    background: var(--weiss);
    min-height: var(--header-hoehe);
}

.s64-header .s64-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--header-hoehe);
}

.s64-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: flex-start;
    text-decoration: none;
}

.s64-logo {
    display: block;
    width: var(--logo-breite);
    margin: 10px 0 -85px;
    padding: 3px;
    background: var(--weiss);
    border: var(--rahmen-duenn) solid var(--anthrazit);
    box-sizing: content-box;
    position: relative;
    z-index: 40;
}

.s64-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.s64-brand-text {
    font: 600 12px/14px var(--font-oswald);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--anthrazit);
}

.s64-brand-text span {
    display: block;
    color: var(--gold);
}

.s64-nav {
    display: flex;
    align-items: center;
}

.s64-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--menue-abstand-y) var(--menue-abstand-x);
    font: 400 16px/20px var(--font-oswald);
    color: var(--anthrazit);
    text-decoration: none;
}

.s64-nav a::after {
    content: "";
    position: absolute;
    left: var(--menue-abstand-x);
    right: var(--menue-abstand-x);
    bottom: 0;
    height: var(--rahmen-dick);
    background: var(--anthrazit);
    opacity: 0;
}

.s64-nav a:hover::after,
.s64-nav a[aria-current="page"]::after {
    opacity: 1;
}

.s64-nav a.s64-gold {
    color: var(--gold);
}

.s64-nav a.s64-gold::after {
    background: var(--gold);
}

.s64-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--anthrazit);
}

.s64-tools svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.s64-tools a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 6px;
}

/* Gesamtmenü hinter ☰ (Aufbau nach Mockup 12) */
.s64-menue-knopf,
.s64-menue-zu {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.s64-menue {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--overlay-dunkel);
}

.s64-menue[hidden] {
    display: none;
}

.s64-menue-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    overflow-y: auto;
    padding: 30px 40px 40px;
    box-sizing: border-box;
    background: var(--footer-dunkel);
    color: var(--weiss);
}

.s64-menue-panel svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.s64-menue-zu {
    margin: 0 -6px 20px auto;
    color: var(--weiss);
}

.s64-menue-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.s64-menue-panel a,
.s64-menue-unter span {
    color: inherit;
    text-decoration: none;
}

.s64-menue-haupt {
    display: block;
    padding: 12px 0;
    border-bottom: var(--rahmen-duenn) solid rgba(255, 255, 255, 0.15);
    font: 500 30px/36px var(--font-oswald);
}

.s64-menue-haupt.s64-gold,
.s64-menue-panel a:hover {
    color: var(--gold);
}

.s64-menue-haupt[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.s64-menue-unter {
    padding: 8px 0 8px 24px !important;
}

.s64-menue-unter li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 4px 0;
    font: 400 19px/26px var(--font-oswald);
    color: #b4b4b4;
}

.s64-menue-klein {
    font-size: 15px;
}

body.s64-menue-offen {
    overflow: hidden;
}

/* Bildflächen mit Überlagerung; ohne Bild bleibt der Anthrazit-Hintergrund */
.s64-bild {
    position: relative;
    background-color: var(--anthrazit);
    overflow: hidden;
}

.s64-bild::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bild);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
}

.s64-hero.s64-bild::before {
    filter: none;
}

.s64-bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-dunkel);
}

.s64-bild > * {
    position: relative;
    z-index: 1;
}

/* Hero */
.s64-hero {
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--weiss);
}

.s64-hero h1 {
    margin: 0 0 14px;
    font: 700 46px/52px var(--font-oswald);
    text-transform: uppercase;
    color: var(--weiss);
}

.s64-hero p {
    margin: 0;
    font: 400 18px/26px var(--font-oswald);
    letter-spacing: 1px;
}

/* Einleitung */
.s64-intro {
    padding: 80px 0 40px;
    text-align: center;
}

.s64-intro p.s64-eyebrow {
    max-width: none;
    margin: 0 0 12px;
    font: 400 13px/20px var(--font-oswald);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
}

.s64-intro h2 {
    margin: 0 0 22px;
    font: 600 32px/40px var(--font-oswald);
    color: var(--anthrazit);
}

.s64-intro p {
    max-width: 690px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 26px;
    color: var(--text);
}

/* Kacheln */
.s64-kacheln {
    padding-bottom: 90px;
}

.s64-kacheln .s64-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--raster-spalte);
}

.s64-kachel {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.s64-kachel .s64-bild {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s64-kachel .s64-icon {
    width: 90px;
    height: 90px;
    border: 2px solid var(--weiss);
    border-radius: var(--radius-kreis);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--weiss);
}

.s64-kachel .s64-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.s64-kachel-text {
    flex: 1;
    padding: 20px;
    background: var(--kachel-hell);
}

.s64-kachel-text h3 {
    margin: 0 0 6px;
    font: 600 26px/32px var(--font-oswald);
    color: var(--schwarz);
}

.s64-kachel-text p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 21px;
    color: var(--text);
}

.s64-weiter {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--gold);
    font: 400 14px/18px var(--font-oswald);
    color: var(--anthrazit);
}

/* Fußzeile */
.s64-footer {
    background: var(--footer-dunkel);
    color: #c8c8c8;
}

.s64-footer .s64-container {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--footer-spalten);
    padding-block: 52px 40px;
}

.s64-footer h4 {
    margin: 0 0 14px;
    font: 600 17px/22px var(--font-oswald);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--weiss);
}

.s64-footer p {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
}

.s64-footer a {
    display: block;
    color: var(--weiss);
    text-decoration: none;
    font-size: 15px;
    line-height: 23px;
}

.s64-footer-unten {
    border-top: var(--rahmen-duenn) solid #2a2a2a;
    font-size: 13px;
    color: #8a8a8a;
}

.s64-footer-unten .s64-container {
    display: flex;
    justify-content: space-between;
    padding-block: 18px;
}

.s64-footer-unten a {
    display: inline;
    color: inherit;
    font-size: 13px;
}

/* ---------- Inhaltsseiten (UC-002) ---------- */

.s64-seitenkopf {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.s64-seitenkopf h1 {
    margin: 0;
    font: 700 46px/52px var(--font-oswald);
    text-transform: uppercase;
    color: var(--weiss);
}

.s64-brotkrumen {
    padding: 24px 0 32px;
    font-size: 13px;
    line-height: 18px;
    color: #777;
}

.s64-brotkrumen a {
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-inhaltsseite {
    display: grid;
    grid-template-columns: minmax(0, 740px) 300px;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 90px;
}

.s64-text {
    color: #555;
    font-size: 15px;
    line-height: 26px;
}

.s64-text h2 {
    margin: 0 0 18px;
    font: 600 30px/38px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-text h3 {
    margin: 40px 0 14px;
    font: 600 22px/28px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-text p {
    margin: 0 0 16px;
}

.s64-text .s64-lead {
    font-size: 18px;
    line-height: 30px;
    color: var(--text-dunkel);
}

.s64-text blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 20px;
    border-left: var(--rahmen-dick) solid var(--gold);
    font: italic 400 15px/26px var(--font-body);
    color: var(--text-dunkel);
}

.s64-text blockquote::before,
.s64-text blockquote::after {
    content: none;
    display: none;
}

.s64-unterschrift {
    margin-top: 28px;
}

.s64-unterschrift strong {
    display: block;
    font: 600 18px/24px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-unterschrift span {
    display: block;
    font-size: 13px;
    color: #777;
}

.s64-btn,
.s64-text .wpcf7-submit {
    display: inline-block;
    padding: 14px 22px;
    border: 0;
    background: var(--footer-dunkel);
    color: var(--weiss);
    font: 400 16px/20px var(--font-oswald);
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
}

.s64-btn-gold {
    background: var(--gold);
    color: var(--footer-dunkel);
}

/* Seitenleiste */
.s64-seitenleiste {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s64-kasten {
    padding: 26px 22px;
    background: var(--flaeche-hell);
    font-size: 14px;
    line-height: 23px;
    color: #555;
}

.s64-kasten h4 {
    margin: 0 0 16px;
    font: 600 18px/24px var(--font-oswald);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dunkel);
}

.s64-kasten p {
    margin: 0 0 20px;
}

.s64-kasten-menue,
.s64-kasten .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.s64-kasten-menue a,
.s64-kasten .menu a {
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: var(--rahmen-duenn) solid var(--linie-hell);
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-kasten .menu .sub-menu a {
    padding-left: 14px;
    color: var(--text-dunkel) !important;
}

.s64-kasten-menue li:last-child a {
    border-bottom: 0;
}

.s64-kasten-menue span {
    color: var(--gold);
}

.s64-kasten-menue a[aria-current="page"] {
    font-weight: 700;
}

/* Das Projekt: Sammlungen */
.s64-sammlungen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0 10px;
}

.s64-sammlung {
    padding: 22px 14px 18px;
    background: var(--flaeche-hell);
    border-top: var(--rahmen-dick) solid var(--footer-dunkel);
}

.s64-sammlung h4 {
    margin: 0 0 6px;
    font: 600 18px/22px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-sammlung p {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: #777;
}

/* Spenden */
.s64-verteilung {
    display: grid;
    grid-template-columns: var(--fonds) 1fr;
    margin-top: 20px;
    font: 600 17px/54px var(--font-oswald);
}

.s64-verteilung-fonds {
    padding-left: 16px;
    background: var(--footer-dunkel);
    color: var(--weiss);
}

.s64-verteilung-archiv {
    background: var(--gold);
    color: var(--footer-dunkel);
    text-align: center;
}

.s64-verteilung-legende {
    display: flex;
    justify-content: space-between;
    margin: 10px 0 40px;
    font-size: 13px;
    color: #777;
}

.s64-boxen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.s64-box {
    padding: 26px 24px 30px;
    background: var(--flaeche-hell);
    border-top: var(--rahmen-dick) solid var(--footer-dunkel);
}

.s64-text .s64-box h3 {
    margin-top: 0;
}

.s64-daten {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 0;
    margin: 0;
}

.s64-daten dt {
    color: #888;
}

.s64-daten dd {
    margin: 0;
    color: var(--text-dunkel);
}

/* Kontakt */
.s64-personen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0 10px;
}

.s64-person {
    padding: 22px 22px 18px;
    background: var(--flaeche-hell);
}

.s64-text .s64-person .s64-eyebrow {
    margin: 0 0 4px;
    font: 600 11px/16px var(--font-oswald);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}

.s64-person h4 {
    margin: 0 0 4px;
    padding: 0;
    font: 600 20px/26px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-text .s64-person p {
    margin: 0;
}

.s64-formular label {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--text-dunkel);
}

.s64-formular-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.s64-formular input[type="text"],
.s64-formular input[type="email"],
.s64-formular textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 10px 12px;
    border: var(--rahmen-duenn) solid #cfcfcb;
    background: var(--weiss);
    font: inherit;
}

.s64-formular input[type="text"],
.s64-formular input[type="email"] {
    height: 44px;
}

.s64-formular textarea {
    height: 130px;
}

.s64-formular .wpcf7-not-valid-tip {
    font-size: 13px;
    color: #b3261e;
}


/* ---------- Bedienbarkeit (UC-010) ---------- */

.s64-unsichtbar {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.s64-sprung {
    position: absolute;
    left: 10px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--footer-dunkel);
    color: var(--weiss);
}

.s64-sprung:focus {
    top: 10px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.s64-btn,
.s64-tools a,
.s64-menue-knopf,
.s64-menue-zu,
.s64-suchfeld button,
.s64-suchfeld input,
.s64-filter-wahl,
.s64-chip-aktiv,
.s64-seitenzahlen a,
.s64-seitenzahlen span,
.s64-sortierung select {
    min-height: 44px;
    box-sizing: border-box;
}

.s64-tools a,
.s64-menue-knopf {
    min-width: 44px;
    justify-content: center;
}

.s64-btn-rahmen {
    background: var(--weiss);
    color: var(--footer-dunkel);
    border: 2px solid var(--footer-dunkel);
}

.s64-klein {
    font-size: 13px;
    line-height: 19px;
    color: #777;
}

.s64-platzhalter {
    padding: 16px 18px;
    background: #fbf6e6;
    border-left: var(--rahmen-dick) solid var(--gold);
    color: var(--text-dunkel);
}

/* Hauptmenü mit Untermenü „Das Projekt“ */
.s64-nav-gruppe {
    position: relative;
}

.s64-nav-unter {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 230px;
    padding: 8px 0;
    background: var(--weiss);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    visibility: hidden;
    opacity: 0;
}

.s64-nav-gruppe:hover .s64-nav-unter,
.s64-nav-gruppe:focus-within .s64-nav-unter {
    visibility: visible;
    opacity: 1;
}

.s64-nav .s64-nav-unter a {
    display: flex;
    padding: 10px 20px;
    font-size: 15px;
}

.s64-nav .s64-nav-unter a::after {
    display: none;
}

.s64-nav .s64-nav-unter a:hover,
.s64-nav .s64-nav-unter a[aria-current="page"] {
    background: var(--flaeche-hell);
}

/* Fusszeile: Links als Liste */
.s64-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.s64-footer-links a {
    padding: 4px 0;
}

/* ---------- Durchsuchen (UC-003, Mockup 02) ---------- */

/* Suchfeld (FT-006): ein Rahmen um Feld und Knopf, damit bei jedem Zoom (z. B. 125 %) nichts verrutscht */
.s64-suchfeld {
    display: flex;
    align-items: stretch;
    margin: 0;
    border: 2px solid var(--footer-dunkel);
    background: var(--weiss);
    box-sizing: border-box;
}

.s64-suchfeld input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--text-dunkel);
}

.s64-suchfeld input[type="search"]:focus-visible {
    outline: none;
}

.s64-suchfeld:focus-within {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.s64-suchfeld button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--footer-dunkel);
    color: var(--weiss);
    font: 500 16px/20px var(--font-oswald);
    cursor: pointer;
}

.s64-suchfeld button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -5px;
}

.s64-suchfeld button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Schmales Suchfeld (Seitenleiste): nur Lupe, damit der Platzhalter ganz sichtbar ist */
.s64-suchfeld:not(.s64-suchfeld-gross) button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.s64-suchfeld-gross input[type="search"] {
    min-height: 52px;
    padding: 0 18px;
    font-size: 18px;
}

.s64-suchfeld-gross button {
    padding: 0 30px;
    font-size: 18px;
}

.s64-such-tipp {
    margin: 10px 0 28px;
    font-size: 13px;
    line-height: 19px;
    color: #777;
}

.s64-such-tipp strong {
    color: var(--text-dunkel);
}

.s64-abschnitt {
    padding-bottom: 50px;
}

.s64-abschnitt h2,
.s64-keine-treffer h2,
.s64-trefferkopf h2 {
    margin: 0 0 18px;
    font: 600 24px/30px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-sammlungskacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s64-sammlungskachel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
    padding: 18px 16px;
    box-sizing: border-box;
    background: var(--flaeche-hell);
    border-top: var(--rahmen-dick) solid var(--footer-dunkel);
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-sammlungskachel:hover {
    border-top-color: var(--gold);
}

.s64-sammlungskachel-name {
    font: 600 19px/24px var(--font-oswald);
}

.s64-anzahl {
    font-size: 14px;
    color: #777;
}

.s64-neu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s64-neu-eintrag {
    padding-top: 12px;
    border-top: var(--rahmen-duenn) solid var(--linie-hell);
}

.s64-neu-eintrag a {
    font: 500 17px/23px var(--font-oswald);
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.s64-chip-aktiv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-radius: 22px;
    background: var(--footer-dunkel);
    color: var(--weiss);
    font-size: 13px;
    text-decoration: none;
}

.s64-filter-knopf {
    display: none;
}

.s64-suchlayout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 44px;
    padding-bottom: 90px;
}

.s64-filter fieldset {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}

.s64-filter legend {
    float: left;
    width: 100%;
    margin-bottom: 8px;
    padding: 14px 0 0;
    border-top: var(--rahmen-dick) solid var(--footer-dunkel);
    font: 600 16px/20px var(--font-oswald);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dunkel);
}

.s64-filter-wahl {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-dunkel);
    cursor: pointer;
}

.s64-filter legend + * {
    clear: both;
}

.s64-filter-wahl input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: auto;
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 0;
    background: none;
    accent-color: var(--footer-dunkel);
}

.s64-filter-wahl input[type="checkbox"]::before,
.s64-filter-wahl input[type="checkbox"]::after {
    content: none;
}

.s64-filter-zahl {
    margin-left: auto;
    font-size: 13px;
    color: #767676;
}

.s64-zeitraum {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.s64-zeitraum input {
    width: 100%;
    height: 44px;
    padding: 0 10px;
    box-sizing: border-box;
    border: var(--rahmen-duenn) solid #cfcfcb;
    font: inherit;
}

.s64-trefferkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding-bottom: 14px;
    border-bottom: var(--rahmen-duenn) solid var(--linie-hell);
}

.s64-trefferkopf h2 {
    margin: 0;
}

.s64-sortierung {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.s64-sortierung select {
    padding: 0 10px;
    border: var(--rahmen-duenn) solid #cfcfcb;
    background: var(--weiss);
    font: inherit;
}

.s64-sort-knopf {
    min-height: 44px;
    padding: 0 12px;
    border: var(--rahmen-duenn) solid #cfcfcb;
    background: var(--weiss);
    cursor: pointer;
}

.s64-hinweis {
    margin: 16px 0 0;
    padding: 10px 14px;
    background: #fbf6e6;
    font-size: 14px;
}

.s64-treffer {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 22px;
    padding: 22px 0;
    border-bottom: var(--rahmen-duenn) solid var(--linie-hell);
}

.s64-vorschau img,
.s64-vorschau-leer {
    display: block;
    width: 112px;
    height: 140px;
    object-fit: cover;
    background: var(--flaeche-hell) repeating-linear-gradient(transparent 0 14px, #d9d9d4 14px 15px);
    border: var(--rahmen-duenn) solid var(--linie-hell);
    box-sizing: border-box;
}

.s64-vorschau-audio,
.s64-vorschau-video {
    background: var(--anthrazit);
}

.s64-treffer-bereich {
    display: inline-block;
    margin: 0 0 6px;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--gold);
    font: 600 12px/16px var(--font-oswald);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dunkel);
}

.s64-treffer h3 {
    margin: 4px 0 6px;
    font: 500 22px/28px var(--font-oswald);
}

.s64-treffer h3 a {
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-treffer mark {
    padding: 0 2px;
    background: #f6e3a8;
    color: inherit;
}

.s64-treffer-meta {
    margin: 0 0 8px;
    font-size: 13px;
    color: #767676;
}

.s64-treffer-auszug {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 23px;
    color: #555;
}

.s64-treffer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 0;
}

.s64-treffer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 500 15px/20px var(--font-oswald);
    color: var(--text-dunkel);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.s64-seitenzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 30px;
}

.s64-seitenzahlen a,
.s64-seitenzahlen span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    border: var(--rahmen-duenn) solid var(--linie-hell);
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-seitenzahlen span[aria-current="page"] {
    background: var(--footer-dunkel);
    border-color: var(--footer-dunkel);
    color: var(--weiss);
}

.s64-keine-treffer {
    margin-bottom: 40px;
    padding: 26px 28px;
    background: var(--flaeche-hell);
}

.s64-keine-treffer ul {
    margin: 0;
    padding-left: 20px;
}

/* ---------- Artikel (UC-003, Mockup 03) ---------- */

.s64-artikel-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 50px;
    padding-bottom: 90px;
}

.s64-anzeige {
    padding: 24px;
    background: var(--flaeche-hell);
    border: var(--rahmen-duenn) solid var(--linie-hell);
    align-self: start;
}

.s64-pdf {
    display: block;
    width: 100%;
    height: 760px;
    background: var(--weiss);
}

.s64-anzeige audio,
.s64-anzeige video,
.s64-anzeige img {
    display: block;
    width: 100%;
}

.s64-anzeige-hinweis {
    padding: 30px 20px;
    text-align: center;
    color: #555;
}

.s64-artikel-angaben h2 {
    margin: 4px 0 14px;
    font: 600 32px/38px var(--font-oswald);
    color: var(--text-dunkel);
}

.s64-artikel-text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 25px;
    color: #555;
}

.s64-angaben {
    display: grid;
    grid-template-columns: 130px 1fr;
    margin: 0 0 24px;
    font-size: 15px;
}

.s64-angaben dt,
.s64-angaben dd {
    margin: 0;
    padding: 11px 0;
    border-bottom: var(--rahmen-duenn) solid var(--linie-hell);
}

.s64-angaben dt {
    color: #767676;
}

.s64-angaben dd {
    color: var(--text-dunkel);
}

.s64-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.s64-knoepfe .s64-btn {
    display: inline-flex;
    align-items: center;
}

.s64-zitierhinweis {
    margin: 28px 0;
    padding: 18px 20px;
    background: var(--flaeche-hell);
    font-size: 14px;
    line-height: 22px;
    overflow-wrap: anywhere;
}

.s64-zitierhinweis h3,
.s64-aehnlich h3 {
    margin: 0 0 10px;
    font: 600 16px/20px var(--font-oswald);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dunkel);
}

.s64-zitierhinweis p {
    margin: 0;
}

.s64-aehnlich {
    padding-top: 16px;
    border-top: var(--rahmen-dick) solid var(--footer-dunkel);
}

.s64-aehnlich ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.s64-aehnlich-eintrag {
    padding: 12px 0;
    border-bottom: var(--rahmen-duenn) solid var(--linie-hell);
}

.s64-aehnlich-eintrag a {
    display: block;
    color: var(--text-dunkel);
    text-decoration: none;
}

.s64-aehnlich-eintrag span {
    font-size: 13px;
    color: #767676;
}

.s64-schmal {
    max-width: 760px;
    padding-bottom: 90px;
}

/* ---------- Handy ab 360 px (UC-010, Mockup 12) ---------- */

@media (max-width: 1100px) {
    .s64-nav a {
        padding-inline: 12px;
    }
}

@media (max-width: 767px) {
    .s64-container {
        padding-inline: 16px;
    }

    .s64-header,
    .s64-header .s64-container {
        min-height: 72px;
    }

    .s64-logo {
        width: 58px;
        margin: 6px 0 -40px;
    }

    .s64-brand-text {
        font-size: 11px;
    }

    .s64-nav {
        display: none;
    }

    .s64-menue-panel {
        width: 100%;
        padding: 24px 24px 40px;
    }

    .s64-hero {
        height: 240px;
    }

    .s64-hero h1,
    .s64-seitenkopf h1 {
        font-size: 32px;
        line-height: 38px;
    }

    .s64-seitenkopf {
        height: 170px;
    }

    .s64-intro {
        padding: 50px 0 30px;
    }

    .s64-intro h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .s64-kacheln .s64-container,
    .s64-inhaltsseite,
    .s64-footer .s64-container,
    .s64-boxen,
    .s64-personen,
    .s64-formular-zeile,
    .s64-suchlayout,
    .s64-artikel-raster,
    .s64-neu {
        grid-template-columns: 1fr;
    }

    .s64-sammlungen {
        grid-template-columns: 1fr 1fr;
    }

    .s64-inhaltsseite,
    .s64-suchlayout,
    .s64-artikel-raster {
        gap: 30px;
        padding-bottom: 50px;
    }

    .s64-footer .s64-container {
        gap: 28px;
        padding-block: 36px 28px;
    }

    .s64-suchfeld-gross input[type="search"] {
        min-height: 46px;
        padding: 0 12px;
        font-size: 16px;
    }

    .s64-suchfeld-gross button {
        padding: 0 14px;
    }

    .s64-suchfeld-gross button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .s64-sammlungskacheln {
        grid-template-columns: 1fr 1fr;
    }

    .s64-filter-knopf {
        display: inline-flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .s64-filter {
        display: none;
        padding: 16px;
        background: var(--flaeche-hell);
    }

    .s64-filter.s64-offen {
        display: block;
    }

    .s64-treffer {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }

    .s64-vorschau img,
    .s64-vorschau-leer {
        width: 72px;
        height: 92px;
    }

    .s64-treffer h3 {
        font-size: 19px;
        line-height: 24px;
    }

    .s64-pdf {
        height: 480px;
    }

    .s64-angaben {
        grid-template-columns: 100px 1fr;
    }

    .s64-artikel-angaben h2 {
        font-size: 26px;
        line-height: 32px;
    }
}

.s64-sort-knopf[hidden] {
    display: none !important;
}

.s64-suchfeld + .s64-knoepfe {
    margin-top: 20px;
}

/* FT-003: Das-Projekt-Kacheln als Links, weitere Seiten im Menü */
a.s64-sammlung {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.s64-sammlung:hover,
a.s64-sammlung:focus-visible {
    border-top-color: var(--gold);
    background: #ebebe7;
}

.s64-menue-weitere {
    margin-top: 28px !important;
    padding-top: 16px !important;
    border-top: var(--rahmen-duenn) solid rgba(255, 255, 255, 0.15);
}

.s64-menue-weitere a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 400 16px/22px var(--font-oswald);
    color: #b4b4b4;
}

/* FT-005: lange Wörter (z. B. aus PDF-Text) brechen um, kein seitliches Scrollen */
.s64-treffer-text,
.s64-artikel-angaben,
.s64-neu-eintrag {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* FT-006: Impreza zeichnet auf button[type=submit] einen weissen Innenrahmen (::before); bei eigenen Knöpfen aus */
.s64-suchfeld button::before,
.s64-suchfeld button::after,
button.s64-btn::before,
button.s64-btn::after,
.s64-sort-knopf::before,
.s64-sort-knopf::after {
    content: none;
}