/*
 * polli-IPS – Stylesheet „hell und edel“ (15.10.2026)
 *
 * Viel Weiß, Haarlinien statt Flächen. Messing (#9c7a4a) kommt vom
 * vergoldeten Bilderrahmen im Porträt und zeichnet nur Linien, Symbole und
 * die Guilloche – das Linienmuster von Banknoten und Ausweisen, also aus der
 * Welt der Sicherheitsdrucke. Ochsenblut (#7b2431) bleibt den finanziellen
 * Folgen vorbehalten.
 * Schriften: Cormorant Garamond (Überschriften, zart), IBM Plex Sans (Text).
 * Beide OFL, selbst gehostet.
 */

@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --weiss: #ffffff;
    --porzellan: #f6f6f4;
    --tinte: #141d26;
    --tinte-weich: #26323d;
    --text: #2c3640;
    --leise: #5c6772;
    --haar: #dcdfe1;
    --haar-dunkel: #b9bfc4;
    --feldrand: #9aa3aa;
    --messing: #9c7a4a;
    --messing-text: #7a5c32;       /* Messing für kleine Schrift: Kontrast ≥ 5:1 auf Weiß */
    --messing-hell: #c7a978;       /* Messing auf dunklem Grund */
    --ochsenblut: #7b2431;
    --ochsenblut-hauch: #faf5f5;
    --auf-dunkel: #e6e9ec;
    --auf-dunkel-leise: #a9b3bc;
    --erfolg: #1f5a3d;

    --antiqua: "Cormorant Garamond", "Garamond", "Iowan Old Style", Georgia, serif;
    --grotesk: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

    --breite: 76rem;
    --rand: 1rem;
    --abstand: clamp(4rem, 2.75rem + 5vw, 8rem);
}

@media (min-width: 40em) {
    :root { --rand: 2.5rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--weiss);
    color: var(--text);
    font-family: var(--grotesk);
    font-weight: 400;
    font-size: 1.03rem;
    line-height: 1.72;
    font-feature-settings: "kern", "liga";
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    margin: 0 0 0.55em;
    color: var(--tinte);
    text-wrap: balance;
}
h1, h2 {
    font-family: var(--antiqua);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.012em;
}
h3 {
    font-family: var(--grotesk);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

:focus-visible {
    outline: 1px solid var(--tinte);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(156, 122, 74, 0.28);
}
.abschnitt--dunkel :focus-visible, .fuss :focus-visible { outline-color: #fff; }

.innen {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
}

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

.springen {
    position: absolute;
    left: var(--rand);
    top: -4rem;
    z-index: 100;
    background: var(--tinte);
    color: #fff;
    padding: 0.6rem 1rem;
}
.springen:focus { top: 0.5rem; }

main:focus { outline: none; box-shadow: none; }

/* --- Kopf und Navigation ------------------------------------------------ */

.kopf {
    background: var(--weiss);
    border-bottom: 1px solid var(--haar);
    position: relative;
    z-index: 10;
}
.kopf__innen {
    max-width: var(--breite);
    margin-inline: auto;
    padding: 1.1rem var(--rand);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marke {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--tinte);
    line-height: 1;
}
.marke__name {
    font-family: var(--antiqua);
    font-weight: 500;
    font-size: 1.85rem;
    letter-spacing: 0.01em;
}
.marke__strich { color: var(--messing); }
.marke__zusatz {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--leise);
    letter-spacing: 0.16em;
    margin-top: 0.4rem;
}

.navigation__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navigation a {
    position: relative;
    display: block;
    padding: 0.55rem 0.9rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.93rem;
    letter-spacing: 0.02em;
}
.navigation a::after {
    content: "";
    position: absolute;
    left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
    height: 1px;
    background: var(--messing);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.navigation a:hover::after,
.navigation a[aria-current="page"]::after { transform: scaleX(1); }
.navigation a[aria-current="page"] { color: var(--tinte); }
.navigation__sprache a {
    border: 1px solid var(--haar-dunkel);
    padding: 0.35rem 0.65rem;
    margin-left: 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}
.navigation__sprache a::after { display: none; }
.navigation__sprache a:hover { border-color: var(--messing); }

.menueknopf {
    display: none;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: 1px solid var(--haar-dunkel);
    color: var(--tinte);
    font: inherit;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    min-height: 44px;
}
.menueknopf__linien,
.menueknopf__linien::before,
.menueknopf__linien::after {
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    position: relative;
}
.menueknopf__linien::before,
.menueknopf__linien::after { content: ""; position: absolute; left: 0; }
.menueknopf__linien::before { top: -5px; }
.menueknopf__linien::after { top: 5px; }
.menueknopf[aria-expanded="true"] .menueknopf__linien { background: transparent; }
.menueknopf[aria-expanded="true"] .menueknopf__linien::before { top: 0; transform: rotate(45deg); }
.menueknopf[aria-expanded="true"] .menueknopf__linien::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 47.99em) {
    .marke__name { font-size: 1.6rem; }
    .js .menueknopf { display: inline-flex; }
    .js .navigation {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: var(--weiss);
        border-bottom: 1px solid var(--haar);
        padding: 0.25rem var(--rand) 1.5rem;
        box-shadow: 0 18px 30px -24px rgba(20, 29, 38, 0.35);
    }
    .js .navigation.ist-offen { display: block; }
    .navigation__liste { flex-direction: column; align-items: stretch; gap: 0; }
    .js .navigation a { padding: 0.95rem 0; border-bottom: 1px solid var(--haar); font-size: 1.05rem; }
    .js .navigation a::after { left: 0; right: auto; width: 2.5rem; bottom: -1px; }
    .js .navigation__sprache a { border: 0; border-bottom: 1px solid var(--haar); margin: 0; letter-spacing: 0.02em; font-size: 1.05rem; }
    html:not(.js) .kopf__innen { flex-wrap: wrap; }
    html:not(.js) .navigation__liste { flex-direction: row; flex-wrap: wrap; }
}

/* --- Knöpfe und Links ---------------------------------------------------- */

.knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.75rem 1.6rem;
    font-family: var(--grotesk);
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid var(--tinte);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.knopf--voll { background: var(--tinte); color: #fff; }
.knopf--voll:hover { background: var(--tinte-weich); }
.knopf--linie { background: transparent; color: var(--tinte); border-color: var(--haar-dunkel); }
.knopf--linie:hover { border-color: var(--tinte); }
.knopf--klein { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.85rem; }

.textlink {
    color: var(--tinte);
    text-decoration: none;
    background-image: linear-gradient(var(--messing), var(--messing));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
}
.textlink:hover { color: var(--messing-text); }

/* --- Kopfbereich der Startseite ----------------------------------------- */

.held {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--haar);
}
.held__innen {
    max-width: var(--breite);
    margin-inline: auto;
    padding: clamp(3rem, 2rem + 4.5vw, 6.5rem) var(--rand) clamp(2.5rem, 2rem + 3vw, 4.5rem);
    display: grid;
    gap: 3rem;
    position: relative;
}
.held__titel {
    font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.018em;
    max-width: 15ch;
    margin-bottom: 0.45em;
}
.held__einleitung {
    position: relative;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.27rem);
    line-height: 1.65;
    color: var(--text);
    max-width: 34em;
    padding-top: 1.6rem;
}
.held__einleitung::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3.5rem;
    height: 1px;
    background: var(--messing);
}

/* Porträt im feinen Doppelrahmen, dahinter die Guilloche-Rosette */
.held__bild { margin: 0; position: relative; }
.held__bild::before {
    content: "";
    position: absolute;
    width: 150%;
    aspect-ratio: 1;
    right: -55%;
    top: 50%;
    transform: translateY(-50%);
    background: url("../img/guilloche-rosette.svg") center / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
}
.rahmen {
    position: relative;
    padding: 10px;
    border: 1px solid var(--messing);
    background: var(--weiss);
}
.rahmen::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(156, 122, 74, 0.35);
    pointer-events: none;
}
.rahmen img { width: 100%; position: relative; z-index: 1; }

@media (min-width: 60em) {
    .held__innen {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: center;
        gap: 4.5rem;
    }
    .rahmen img {
        aspect-ratio: 5 / 4;
        object-fit: cover;
        object-position: 18% 30%;
    }
}

/* Drei Eckdaten unter dem Kopfbereich, durch Haarlinien getrennt */
.fakten {
    display: grid;
    margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem);
    border-top: 1px solid var(--haar);
    position: relative;
}
.fakten__eintrag { padding: 1.2rem 0; border-bottom: 1px solid var(--haar); }
.fakten dt {
    font-family: var(--antiqua);
    font-size: 1.55rem;
    font-weight: 400;
    color: var(--tinte);
    line-height: 1.2;
}
.fakten dd { margin: 0.2rem 0 0; color: var(--leise); font-size: 0.92rem; }
@media (min-width: 48em) {
    .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fakten__eintrag { border-bottom: 0; padding: 1.5rem 2rem 0.25rem; border-left: 1px solid var(--haar); }
    .fakten__eintrag:first-child { border-left: 0; padding-left: 0; }
}

/* --- Abschnitte --------------------------------------------------------- */

.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt--eng { padding-block: calc(var(--abstand) * 0.6); }
.abschnitt--flaeche { background: var(--porzellan); border-block: 1px solid var(--haar); }
.abschnitt--flaeche + .abschnitt--flaeche { border-top: 0; }

.abschnitt__titel {
    font-size: clamp(2.05rem, 1.45rem + 2.3vw, 3.25rem);
}
.abschnitt__titel--klein { font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.2rem); }
.abschnitt__kopf { max-width: 46rem; margin-bottom: 3.25rem; }
.abschnitt__einleitung { color: var(--leise); font-weight: 300; font-size: 1.12rem; }

.zweispaltig { display: grid; gap: 1.25rem 5rem; }
@media (min-width: 56em) {
    .zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
    .zweispaltig > .abschnitt__titel { margin-bottom: 0; }
}

.fliesstext { max-width: 38em; }
.fliesstext--gross { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem); font-weight: 300; }

.zitat {
    font-family: var(--antiqua);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
    line-height: 1.38;
    color: var(--tinte);
    border-left: 1px solid var(--messing);
    padding-left: 1.5rem;
    margin-bottom: 1.6rem;
}
.gross {
    font-family: var(--antiqua);
    font-weight: 300;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
    line-height: 1.4;
}

/* Dunkles Band (Gründer) mit Guilloche-Linie oben */
.abschnitt--dunkel {
    background: var(--tinte);
    color: var(--auf-dunkel);
}
.abschnitt--dunkel::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 1.25rem;
    height: 24px;
    background: url("../img/guilloche-band.svg") 0 0 / 600px 24px repeat-x;
    opacity: 0.55;
}
.abschnitt--dunkel .abschnitt__titel,
.abschnitt--dunkel .gross { color: #fff; }
.abschnitt--dunkel .textlink { color: #fff; background-image: linear-gradient(var(--messing-hell), var(--messing-hell)); }
.abschnitt--dunkel .textlink:hover { color: var(--messing-hell); }

/* Seitenkopf der Unterseiten */
.seitenkopf {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 2.25rem + 3.5vw, 6rem) clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    border-bottom: 1px solid var(--haar);
}
.seitenkopf::after {
    content: "";
    position: absolute;
    width: 34rem;
    aspect-ratio: 1;
    right: -12rem;
    top: -9rem;
    background: url("../img/guilloche-rosette.svg") center / contain no-repeat;
    opacity: 0.4;
    pointer-events: none;
}
.seitenkopf .innen { position: relative; z-index: 1; }
.seitenkopf__titel {
    font-size: clamp(2.35rem, 1.6rem + 3.2vw, 4.4rem);
    line-height: 1.02;
    max-width: 18ch;
}
.seitenkopf__einleitung {
    position: relative;
    font-weight: 300;
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
    color: var(--text);
    max-width: 36em;
    padding-top: 1.4rem;
}
.seitenkopf__einleitung::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3.5rem;
    height: 1px;
    background: var(--messing);
}
.seitenkopf--schlicht .seitenkopf__titel { margin-bottom: 0.35em; }
.seitenkopf__symbol { color: var(--messing); margin-bottom: 1.4rem; }
.seitenkopf__symbol .symbol { width: 64px; height: 64px; stroke-width: 0.9; }
.seitenkopf__raster { display: grid; gap: 2.5rem; align-items: center; }
.seitenkopf__bild { margin: 0; }
.seitenkopf--mit-bild::after { display: none; }
@media (min-width: 56em) {
    .seitenkopf__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5rem; }
}

.pfadleiste { margin-bottom: 1.6rem; font-size: 0.85rem; letter-spacing: 0.04em; }
.pfadleiste a { color: var(--leise); text-decoration: none; }
.pfadleiste a::before { content: "‹ "; color: var(--messing); }
.pfadleiste a:hover { color: var(--tinte); }

/* --- Fachgebiete: Raster mit Haarlinien -------------------------------- */

.verzeichnis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    border-top: 1px solid var(--haar-dunkel);
}
.verzeichnis__eintrag { border-bottom: 1px solid var(--haar-dunkel); }
.verzeichnis__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 1.25rem;
    padding: 1.8rem 0;
    height: 100%;
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.25s;
}
.verzeichnis__link .symbol {
    grid-row: span 3;
    color: var(--messing);
    width: 44px;
    height: 44px;
    transition: color 0.25s;
}
.verzeichnis__titel {
    font-family: var(--antiqua);
    font-weight: 400;
    font-size: clamp(1.45rem, 1.3rem + 0.5vw, 1.7rem);
    line-height: 1.15;
    color: var(--tinte);
}
.verzeichnis__kurz { color: var(--leise); font-size: 0.95rem; line-height: 1.6; }
.verzeichnis__mehr {
    justify-self: start;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--messing-text);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.verzeichnis__link:hover .symbol { color: var(--ochsenblut); }
.verzeichnis__link:hover .verzeichnis__mehr { color: var(--tinte); }

@media (min-width: 48em) {
    .verzeichnis:not(.verzeichnis--kompakt) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-left: 1px solid var(--haar-dunkel);
    }
    .verzeichnis:not(.verzeichnis--kompakt) .verzeichnis__eintrag { border-right: 1px solid var(--haar-dunkel); }
    .verzeichnis:not(.verzeichnis--kompakt) .verzeichnis__link {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.25rem 2rem 2rem;
    }
    .verzeichnis:not(.verzeichnis--kompakt) .verzeichnis__link .symbol { grid-row: auto; margin-bottom: 1rem; }
    .verzeichnis:not(.verzeichnis--kompakt) .verzeichnis__link:hover { background: var(--weiss); }
}
@media (min-width: 70em) {
    .verzeichnis:not(.verzeichnis--kompakt) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.verzeichnis--kompakt .verzeichnis__link { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 0; }
.verzeichnis--kompakt .verzeichnis__titel { font-size: 1.4rem; }
.verzeichnis--kompakt .verzeichnis__titel::after { content: " ›"; color: var(--messing); }
.verzeichnis--kompakt .verzeichnis__link:hover .verzeichnis__titel { color: var(--messing-text); }
@media (min-width: 56em) {
    .verzeichnis--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* --- Grundsätze --------------------------------------------------------- */

.grundsaetze { display: grid; margin-top: 2.5rem; border-top: 1px solid var(--haar); }
.grundsatz { padding: 1.6rem 0; border-bottom: 1px solid var(--haar); }
.grundsatz h3 { position: relative; padding-top: 1rem; }
.grundsatz h3::before { content: ""; position: absolute; top: 0; left: 0; width: 1.75rem; height: 1px; background: var(--messing); }
.grundsatz p { color: var(--leise); font-size: 0.97rem; }
@media (min-width: 48em) {
    .grundsaetze { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
    .grundsatz { border-bottom: 0; border-left: 1px solid var(--haar); padding: 0.5rem 2.25rem; }
    .grundsatz:first-child { border-left: 0; padding-left: 0; }
}

.grundsatzliste { margin: 1.75rem 0 0; display: grid; border-top: 1px solid var(--haar); }
.grundsatzliste div { padding: 1rem 0; border-bottom: 1px solid var(--haar); display: grid; gap: 0.1rem 2rem; }
@media (min-width: 40em) { .grundsatzliste div { grid-template-columns: 11rem minmax(0, 1fr); } }
.grundsatzliste dt { font-family: var(--antiqua); font-size: 1.35rem; font-weight: 400; color: var(--tinte); line-height: 1.3; }
.grundsatzliste dd { margin: 0; color: var(--leise); }

/* --- Lagebild: Gefahren, Probleme, finanzielle Folgen ------------------- */

.lagebild {
    padding-block: calc(var(--abstand) * 0.7);
    background: var(--porzellan);
    border-block: 1px solid var(--haar);
}
.lagebild__raster { display: grid; }
@media (min-width: 64em) {
    .lagebild__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lagebild__spalte {
    background: var(--weiss);
    border: 1px solid var(--haar);
    border-top: 1px solid var(--tinte);
    padding: 2rem 1.75rem 2.25rem;
    margin-top: -1px;
}
@media (min-width: 64em) {
    .lagebild__spalte { margin-top: 0; margin-left: -1px; }
    .lagebild__spalte:first-child { margin-left: 0; }
}
.lagebild__spalte--folgen {
    background: var(--ochsenblut-hauch);
    border-top: 2px solid var(--ochsenblut);
}
.lagebild__titel {
    font-size: clamp(1.65rem, 1.45rem + 0.6vw, 1.95rem);
    font-weight: 400;
    margin-bottom: 1.25rem;
}
.lagebild__spalte--folgen .lagebild__titel { color: var(--ochsenblut); }
.lagebild__liste { list-style: none; margin: 0; padding: 0; }
.lagebild__liste li {
    position: relative;
    padding: 0.8rem 0 0.8rem 1.5rem;
    border-top: 1px solid var(--haar);
    font-size: 0.97rem;
    line-height: 1.55;
}
.lagebild__liste li:first-child { border-top: 0; padding-top: 0; }
.lagebild__liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.55rem;
    width: 0.7rem;
    height: 1px;
    background: var(--messing);
}
.lagebild__liste li:first-child::before { top: 0.75rem; }
.lagebild__spalte--folgen .lagebild__liste li { border-top-color: rgba(123, 36, 49, 0.16); }
.lagebild__spalte--folgen .lagebild__liste li::before { background: var(--ochsenblut); }

/* Vorgehen: eine echte Abfolge, deshalb nummeriert */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; max-width: 40em; }
.schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 1.1rem 0 1.1rem 3.75rem;
    border-top: 1px solid var(--haar);
}
.schritte li:last-child { border-bottom: 1px solid var(--haar); }
.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0.45rem;
    font-family: var(--antiqua);
    font-weight: 300;
    font-size: 2.3rem;
    line-height: 1.2;
    color: var(--messing);
}

/* --- Aufruf zum Kontakt: Kasten im Doppelrahmen ------------------------- */

.aufruf { padding-block: calc(var(--abstand) * 0.8); }
.aufruf__innen {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem 3rem;
    padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
    border: 1px solid var(--messing);
    outline: 1px solid rgba(156, 122, 74, 0.35);
    outline-offset: -7px;
    max-width: calc(var(--breite) - 2 * var(--rand));
    width: calc(100% - 2 * var(--rand));
}
.aufruf__innen > div { max-width: 38rem; }
.aufruf__titel { font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem); margin-bottom: 0.35em; }
.aufruf p { color: var(--leise); }

/* --- Kontakt und Formular ----------------------------------------------- */

.kontakt { display: grid; gap: 3rem 5rem; }
@media (min-width: 56em) { .kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.kontakt__info { border-top: 1px solid var(--messing); padding-top: 1.4rem; align-self: start; }
.kontakt__name { font-family: var(--antiqua); font-weight: 400; font-size: 1.5rem; color: var(--tinte); margin-bottom: 0.3em; line-height: 1.2; }
.kontakt__hinweis {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--haar);
    color: var(--leise);
    font-size: 0.92rem;
}

.formular { max-width: 46rem; }
.formular--schmal { max-width: 24rem; }
.formular__reihe { display: grid; gap: 0 1.5rem; }
@media (min-width: 40em) { .formular__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.feld { margin-bottom: 1.5rem; min-width: 0; }
.feld label { display: block; font-size: 0.88rem; letter-spacing: 0.02em; margin-bottom: 0.4rem; color: var(--tinte); }
.feld__optional { color: var(--leise); font-size: 0.82rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 1rem;           /* nicht kleiner: iOS zoomt sonst beim Antippen */
    line-height: 1.5;
    color: var(--text);
    background-color: #fff;
    border: 1px solid var(--feldrand);
    border-radius: 0;
    padding: 0.7rem 0.85rem;
    min-height: 50px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { resize: vertical; min-height: 11rem; }
select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(135deg, var(--tinte) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 52%, calc(100% - 0.8rem) 52%;
    background-size: 0.3rem 0.3rem;
    background-repeat: no-repeat;
}
input:hover, select:hover, textarea:hover { border-color: var(--tinte-weich); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--messing);
    box-shadow: 0 0 0 3px rgba(156, 122, 74, 0.22);
}
[aria-invalid="true"] { border-color: var(--ochsenblut); }
.feld__fehler { color: var(--ochsenblut); font-size: 0.9rem; margin: 0.4rem 0 0; }

/* Datums- und Uhrzeitfelder in Safari auf dem iPhone (Regel für alle Projekte, 28.09.2026) */
input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.5em; }

.feld--auswahl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.8rem;
    align-items: start;
}
.feld--auswahl input {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0.2rem 0 0;
    accent-color: var(--tinte);
}
.feld--auswahl label { font-size: 0.93rem; letter-spacing: 0; color: var(--text); margin: 0; }
.feld--auswahl label a { color: var(--tinte); text-decoration-color: var(--messing); }
.feld--auswahl .feld__fehler { grid-column: 2; }

/* Honigtopf für Spam-Programme: aus dem Bild geschoben, nicht display:none */
.feld--falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 1.4rem 1.6rem; margin-bottom: 2rem; border: 1px solid; border-left-width: 2px; }
.meldung h2 { font-size: 1.7rem; font-weight: 400; margin-bottom: 0.3em; }
.meldung--erfolg { background: #f2f7f4; border-color: var(--erfolg); }
.meldung--erfolg h2 { color: var(--erfolg); }
.meldung--fehler { background: var(--ochsenblut-hauch); border-color: var(--ochsenblut); }
.meldung--fehler h2 { color: var(--ochsenblut); }

/* --- Rechtstexte -------------------------------------------------------- */

.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: 1.85rem; font-weight: 400; margin-top: 2.6rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.2rem; }

.angaben { margin: 0 0 1.75rem; border-top: 1px solid var(--haar); }
.angaben div { display: grid; gap: 0.1rem 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--haar); }
@media (min-width: 40em) { .angaben div { grid-template-columns: 13rem minmax(0, 1fr); } }
.angaben dt { font-size: 0.9rem; color: var(--leise); letter-spacing: 0.02em; }
.angaben dd { margin: 0; color: var(--tinte); }

.wegweiser { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }

/* --- Fuß ----------------------------------------------------------------- */

.fuss {
    position: relative;
    background: var(--tinte);
    color: var(--auf-dunkel-leise);
    font-size: 0.9rem;
    padding-block: 4.5rem 2rem;
}
.fuss::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 1.4rem;
    height: 24px;
    background: url("../img/guilloche-band.svg") 0 0 / 600px 24px repeat-x;
    opacity: 0.5;
}
.fuss__innen {
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
    display: grid;
    gap: 2.25rem;
}
@media (min-width: 48em) {
    .fuss__innen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .fuss__copy { grid-column: 1 / -1; }
}
.fuss__name { font-family: var(--antiqua); font-weight: 400; color: #fff; font-size: 1.5rem; margin-bottom: 0.4em; line-height: 1.2; }
.fuss__marke p:not(.fuss__name) { max-width: 30rem; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 3.5rem; }
.fuss__nav ul { list-style: none; margin: 0; padding: 0; }
.fuss__nav a { color: var(--auf-dunkel); text-decoration: none; display: inline-block; padding: 0.3rem 0; }
.fuss__nav a:hover { color: var(--messing-hell); }
.fuss__copy { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.3rem; margin: 0; font-size: 0.82rem; letter-spacing: 0.03em; }

/* --- Admin --------------------------------------------------------------- */

.admin__inhalt { padding-block: 2.5rem 4rem; }
.admin__titel { font-size: 2.4rem; }
.admin__abmelden { margin: 0; }
.hinweis { color: var(--leise); }
.tabelle { overflow-x: auto; border-top: 1px solid var(--tinte); }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabelle th, .tabelle td { text-align: left; padding: 0.75rem 0.9rem 0.75rem 0; border-bottom: 1px solid var(--haar); white-space: nowrap; }
.tabelle th { font-weight: 500; color: var(--tinte); }
.tabelle tr.ist-neu td { font-weight: 600; }
.anfrage__text { background: var(--porzellan); border: 1px solid var(--haar); padding: 1.3rem 1.5rem; margin: 1.5rem 0 2rem; max-width: 46rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

@media print {
    .kopf, .fuss, .aufruf, .menueknopf, .held__bild::before, .seitenkopf::after { display: none; }
    .abschnitt--dunkel { background: none; color: #000; }
}