:root {
    /* Grund – tiefes, warmes Schwarz wie im Logo, kein Blaustich */
    --c-bg:         #0c0a0a;
    --c-surface:    #141010;
    --c-surface-2:  #1a1514;
    --c-raised:     #201917;
    --c-line:       #2c2422;
    --c-line-soft:  #221b1a;

    /* Schrift */
    --c-text:       #f0e9e2;
    --c-text-2:     #b8aca3;
    --c-text-3:     #8b7f76;

    /* Gold – direkt aus dem Logo abgenommen:
       Kern #9c702e, Flaeche #c9a24a, Glanzlicht #f2e3bb, Unterzeile #e5b369 */
    --c-gold:       #c9a24a;
    --c-gold-2:     #e8cf90;
    --c-gold-3:     #f2e3bb;
    --c-gold-deep:  #8a6526;
    --c-gold-dim:   rgba(201, 162, 74, 0.32);
    --c-gold-soft:  rgba(201, 162, 74, 0.09);
    --g-gold:       linear-gradient(135deg, #e8cf90 0%, #c9a24a 46%, #9c702e 100%);
    --g-gold-line:  linear-gradient(90deg, rgba(201,162,74,0) 0%, #c9a24a 22%, #f2e3bb 50%, #c9a24a 78%, rgba(201,162,74,0) 100%);

    /* Rosé – die Straehne und die Wortmarke im Logo: #d12f5f / #ed7ea2 */
    --c-rose:       #d12f5f;
    --c-rose-2:     #e56287;
    --c-rose-soft:  rgba(209, 47, 95, 0.13);
    --c-rose-dim:   rgba(209, 47, 95, 0.34);

    /* Heller Block */
    --c-ivory:      #f4efe8;
    --c-ivory-2:    #e6dcd0;
    --c-ivory-ink:  #17110f;
    --c-ivory-ink2: #574c45;

    /* Signale */
    --c-good:       #6fae8e;
    --c-good-soft:  rgba(111, 174, 142, 0.14);
    --c-error:      #e0708a;
    --c-error-soft: rgba(224, 112, 138, 0.12);

    /* Typografie – Systemstacks, keine Webfont-Requests */
    --f-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md:   1.0625rem;
    --fs-lg:   1.25rem;
    --fs-xl:   clamp(1.375rem, 1.05rem + 1.3vw, 1.875rem);
    --fs-2xl:  clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    --fs-3xl:  clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);

    --w-container: 1180px;
    --w-narrow: 780px;
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --sp-9: 6rem;

    --r-sm: 2px;
    --r-md: 4px;

    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.34);
    --sh-3: 0 20px 60px rgba(0, 0, 0, 0.6);
    --sh-gold: 0 0 0 1px var(--c-gold-dim), 0 10px 30px rgba(0, 0, 0, 0.45);

    --t-fast: 130ms ease;
    --t-base: 260ms cubic-bezier(0.2, 0, 0.2, 1);
    --t-slow: 520ms cubic-bezier(0.2, 0, 0.2, 1);

    /* Rueckwaertskompatible Namen: im Stylesheet stehen noch viele
       Verweise auf die frueheren Messing- und Rouge-Variablen. */
    --c-brass:      var(--c-gold);
    --c-brass-2:    var(--c-gold-2);
    --c-brass-dim:  var(--c-gold-dim);
    --c-brass-soft: var(--c-gold-soft);
    --c-rouge:      var(--c-rose);
    --c-rouge-2:    var(--c-rose-2);
}

/* --------------------------------------------------------------------------
   2. Reset / Basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--c-brass-2); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-text); }

:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-rouge); color: #fff; }

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--c-text);
    text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { text-wrap: pretty; }
p + p { margin-top: 0.9em; }
strong { font-weight: 600; color: var(--c-text); }

.lead { font-size: var(--fs-md); color: var(--c-text-2); line-height: 1.68; }

/* Messing-Vorzeile mit Haarlinie: das wiederkehrende Ornament der Seite */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-brass);
    margin-bottom: var(--sp-4);
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--g-gold-line); flex: none; }
/* Die Vorzeile ist eine Zeile Beschriftung, kein Fliesstext. Bricht sie um,
   soll die Haarlinie oben bleiben und der Text sauber einruecken. */
.eyebrow { align-items: flex-start; }
.eyebrow::before { margin-top: 0.62em; }
.eyebrow .num { color: var(--c-text-3); }

.meta { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--sp-5); }
.narrow { max-width: var(--w-narrow); }
.site-main { flex: 1 0 auto; }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--surface { background: var(--c-surface); }
.section--hairline { border-top: 1px solid var(--c-line); }
.section--light { background: var(--c-ivory); color: var(--c-ivory-ink); }

.section-head { max-width: 64ch; margin-bottom: var(--sp-7); }
.section-head p { color: var(--c-text-2); margin-top: var(--sp-3); }

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 200;
    background: var(--c-brass);
    color: #17110b;
    font-weight: 600;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); color: #17110b; }

/* --------------------------------------------------------------------------
   5. Kopfzeile
   -------------------------------------------------------------------------- */
.topbar {
    background: #0a0808;
    border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-text-3);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
}
.topbar .container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}
.topbar a { color: var(--c-text-2); }
.topbar a:hover { color: var(--c-brass-2); }
.topbar-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.topbar-facts li { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-facts li::before { content: ""; width: 3px; height: 3px; background: var(--c-brass); border-radius: 50%; flex: none; }

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--g-gold-line);
    opacity: 0.5;
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(16, 13, 13, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--c-line);
}
.site-header .container { display: flex; align-items: center; gap: var(--sp-5); min-height: 74px; }

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--c-text); margin-right: auto; order: 1; }
.brand:hover { color: var(--c-text); }
.brand-mark {
    width: auto;
    height: 40px;
    max-width: 56px;
    flex: none;
    object-fit: contain;
}
.brand-name { font-family: var(--f-display); font-size: 1.18rem; letter-spacing: 0.01em; line-height: 1.1; }
.brand-sub {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); order: 2; }
.nav a:not(.btn) { display: block; padding: var(--sp-2) var(--sp-3); color: var(--c-text-2); font-size: var(--fs-base); position: relative; }
.nav a:not(.btn):hover { color: var(--c-text); }
.nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 2px;
    height: 1px;
    background: var(--c-brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-base);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]:not(.btn) { color: var(--c-text); }
.nav a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }
.nav .btn::after { content: none; }

.nav-toggle {
    display: none;
    order: 4;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
    cursor: pointer;
    padding: 0;
    place-items: center;
}
.nav-toggle span { display: block; width: 18px; height: 1px; background: var(--c-text); position: relative; transition: background var(--t-fast); }
.nav-toggle span::before,
.nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 1px;
    background: var(--c-text);
    transition: transform var(--t-base);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--f-body);
    font-size: var(--fs-base);
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-align: center;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Die Hauptaktion traegt das Gold des Logos, nicht Rot: Gold ist im Zeichen
   die Flaeche, Rosé nur die Straehne. Dunkle Schrift auf Gold liest sich
   ausserdem besser als Weiss auf Rot. */
.btn--primary {
    background: var(--g-gold);
    color: #17110b;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
}
.btn--primary:hover { background: linear-gradient(135deg, #f2e3bb 0%, #dcb75f 46%, #ab7d31 100%); color: #17110b; }

.btn--rose { background: var(--c-rose); color: #fff; }
.btn--rose:hover { background: var(--c-rose-2); color: #fff; }

.btn--brass { background: var(--c-brass); color: #17110b; }
.btn--brass:hover { background: var(--c-brass-2); color: #17110b; }

.btn--secondary { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.btn--secondary:hover { border-color: var(--c-brass-dim); color: var(--c-brass-2); }

.btn--ghost { background: transparent; color: var(--c-text-2); }
.btn--ghost:hover { color: var(--c-text); }

.btn--wa { background: transparent; color: #63cf94; border-color: rgba(99, 207, 148, 0.35); }
.btn--wa:hover { background: rgba(99, 207, 148, 0.1); color: #7ddcaa; border-color: rgba(99, 207, 148, 0.6); }

.btn--lg { padding: 0.95rem 1.8rem; font-size: var(--fs-md); }
.btn--sm { padding: 0.45rem 0.8rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* --------------------------------------------------------------------------
   Schriftfarbe der Schaltflaechen gegen das Umfeld absichern.

   Der Grund, warum "Bewerbung starten" in der Kopfzeile unleserlich war:
   `.nav a` hat die Spezifitaet 0,1,1 – `.btn--primary` nur 0,1,0. Die
   Umgebungsregel gewinnt also und faerbte die dunkle Schrift auf dem goldenen
   Knopf in das helle Grau der Navigationslinks um. Dasselbe droht in der
   Fusszeile (`.site-footer a`) und im hellen Block (`.section--light a`).

   Zwei Klassen ergeben 0,2,0 und schlagen jede dieser Regeln – unabhaengig
   davon, an welcher Stelle im Stylesheet sie stehen.
   -------------------------------------------------------------------------- */
.btn.btn--primary,
.btn.btn--brass { color: #17110b; }
.btn.btn--primary:hover,
.btn.btn--brass:hover { color: #17110b; }

.btn.btn--secondary { color: var(--c-text); }
.btn.btn--secondary:hover { color: var(--c-gold-2); }

.btn.btn--ghost { color: var(--c-text-2); }
.btn.btn--ghost:hover { color: var(--c-text); }

.btn.btn--rose { color: #fff; }
.btn.btn--rose:hover { color: #fff; }

.btn.btn--wa { color: #63cf94; }
.btn.btn--wa:hover { color: #7ddcaa; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 550; }
.link-arrow::after { content: "→"; transition: transform var(--t-fast); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-9) var(--sp-8); border-bottom: 1px solid var(--c-line); }
/* warmes Streiflicht – ruhig, nicht animiert */
.hero::before {
    content: "";
    position: absolute;
    inset: -30% 40% 20% -20%;
    background: radial-gradient(ellipse at 30% 30%, rgba(209, 47, 95, 0.14), transparent 62%);
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 82% 0%, rgba(201, 162, 74, 0.1), transparent 55%);
    pointer-events: none;
}
.hero .container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--sp-8);
    align-items: start;
}
.hero h1 { margin-bottom: var(--sp-5); }
.hero .lead { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}
.hero-points li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); }
.hero-points svg { width: 15px; height: 15px; color: var(--c-brass); flex: none; }

/* Signature: die Aktenkarte in Messing */
.record {
    background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    overflow: hidden;
    position: relative;
}
.record::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--g-gold);
}
.record-head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.record-title { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass); }
.record-body { padding: var(--sp-2) var(--sp-5) var(--sp-4); }
.record-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line-soft); }
.record-row:last-child { border-bottom: 0; }
.record-row dt { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3); }
.record-row dd { margin: 0; font-weight: 550; text-align: right; color: var(--c-text); }
.record-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-line-soft); background: var(--c-brass-soft); font-size: var(--fs-sm); color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   8. Vertrauensleiste
   -------------------------------------------------------------------------- */
.trustbar { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.trustbar .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.trustbar li { padding: var(--sp-6) var(--sp-5) var(--sp-6) 0; border-right: 1px solid var(--c-line-soft); }
.trustbar li:last-child { border-right: 0; }
.trustbar li:not(:first-child) { padding-left: var(--sp-5); }
.trustbar h3 { font-family: var(--f-body); font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-2); }
.trustbar p { font-size: var(--fs-sm); color: var(--c-text-3); }
.trustbar svg { width: 19px; height: 19px; color: var(--c-brass); margin-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   9. Ablauf
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6) var(--sp-5); counter-reset: step; }
.steps li { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.steps li::after { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 1px; background: var(--g-gold); }
.steps li::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    color: var(--c-brass);
    margin-bottom: var(--sp-3);
}
.steps h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.steps p { font-size: var(--fs-sm); color: var(--c-text-2); }

/* --------------------------------------------------------------------------
   10. Karten
   -------------------------------------------------------------------------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.card { background: var(--c-bg); padding: var(--sp-6) var(--sp-5); transition: background var(--t-base); }
.card:hover { background: var(--c-surface); }
.card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.card p { font-size: var(--fs-sm); color: var(--c-text-2); }
.card-icon { color: var(--c-brass); margin-bottom: var(--sp-4); }
.card-icon svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   11. Partnerkarten
   -------------------------------------------------------------------------- */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: var(--sp-5); }

.partner-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.partner-card:hover { border-color: var(--c-brass-dim); transform: translateY(-3px); box-shadow: var(--sh-2); }

.partner-figure { position: relative; aspect-ratio: 16 / 10; background: var(--c-raised); overflow: hidden; }
.partner-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.82);
    transition: filter var(--t-slow), transform var(--t-slow);
}
.partner-card:hover .partner-figure img { filter: saturate(1) brightness(0.95); transform: scale(1.03); }
.partner-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 13, 13, 0) 45%, rgba(16, 13, 13, 0.85) 100%);
    pointer-events: none;
}
.partner-figure--empty { display: grid; place-items: center; color: var(--c-text-3); }
.partner-figure--empty svg { width: 34px; height: 34px; }

.partner-flag {
    position: absolute;
    z-index: 1;
    top: var(--sp-3);
    left: var(--sp-3);
    background: rgba(10, 8, 8, 0.78);
    border: 1px solid var(--c-brass-dim);
    color: var(--c-brass-2);
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.28rem 0.5rem;
    border-radius: var(--r-sm);
}

.partner-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.partner-body h2, .partner-body h3 { font-size: var(--fs-lg); }
.partner-city {
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-brass);
}
.partner-city svg { width: 13px; height: 13px; }
.partner-desc {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.partner-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag { font-size: var(--fs-xs); color: var(--c-text-2); background: var(--c-raised); border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 0.2rem 0.55rem; }
.partner-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

.filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-5);
}
.filterbar .search { flex: 1 1 240px; min-width: 200px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.42rem 0.75rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: transparent;
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--t-fast);
}
.chip:hover { border-color: var(--c-brass-dim); color: var(--c-brass-2); }
.chip[aria-pressed="true"] { background: var(--c-brass); border-color: var(--c-brass); color: #17110b; }

.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { color: var(--c-text-2); margin-bottom: var(--sp-5); }

/* --------------------------------------------------------------------------
   12. Partnerdetail
   -------------------------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--c-text-3);
    padding-block: var(--sp-5);
}
.breadcrumb a { color: var(--c-text-3); }
.breadcrumb a:hover { color: var(--c-brass-2); }
.breadcrumb li { display: inline-flex; gap: var(--sp-2); }
.breadcrumb li::after { content: "·"; margin-left: var(--sp-2); color: var(--c-line); }
.breadcrumb li:last-child::after { content: none; }

/* Kopfbereich als Banner: Bild als Grund, Text darauf gesetzt.
   Vorher standen Titel und Bild untereinander, dadurch war der obere
   Seitenbereich sehr hoch und der Einstieg wirkte zerrissen. */
.detail-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 38vw, 460px);
    padding-block: var(--sp-8) var(--sp-6);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}
.detail-banner--plain {
    min-height: 0;
    padding-block: var(--sp-6) var(--sp-7);
    background: var(--c-surface);
}
.detail-banner-media { position: absolute; inset: 0; z-index: -2; }
.detail-banner-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.55); }
.detail-banner-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16, 13, 13, 0.55) 0%, rgba(16, 13, 13, 0.2) 40%, rgba(16, 13, 13, 0.95) 100%),
        linear-gradient(90deg, rgba(16, 13, 13, 0.8) 0%, transparent 65%);
}

.detail-banner-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-5);
    width: 100%;
}
.detail-logo {
    width: 84px;
    height: 84px;
    flex: none;
    border: 1px solid var(--c-brass-dim);
    border-radius: var(--r-md);
    background: rgba(10, 8, 8, 0.72);
    object-fit: contain;
    padding: var(--sp-2);
}
.detail-title h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.detail-title .lead { max-width: 46ch; }
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.detail-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.32rem 0.6rem;
    border-radius: var(--r-sm);
    background: rgba(10, 8, 8, 0.6);
    border: 1px solid var(--c-line);
    color: var(--c-text-2);
    backdrop-filter: blur(4px);
}
.badge svg { width: 12px; height: 12px; }
.badge--good { background: var(--c-good-soft); border-color: rgba(111, 174, 142, 0.35); color: var(--c-good); }
.badge--brass { background: var(--c-brass-soft); border-color: var(--c-brass-dim); color: var(--c-brass-2); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); align-items: start; padding-top: var(--sp-7); }

.prose h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); position: relative; }
.prose h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 52px; height: 1px; background: var(--g-gold); }
.prose > section + section { margin-top: var(--sp-7); }
.prose p { color: var(--c-text-2); }

.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.amenities li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-2); padding: var(--sp-1) 0; }
.amenities svg { width: 14px; height: 14px; color: var(--c-brass); flex: none; }

.hours { border-top: 1px solid var(--c-line-soft); }
.hours li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line-soft); font-size: var(--fs-sm); }
.hours .day { color: var(--c-text-2); }
.hours .time { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text); }
.hours li[data-today="1"] .day { color: var(--c-text); font-weight: 600; }
.hours li[data-today="1"] .day::after {
    content: "heute";
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-brass);
    margin-left: var(--sp-2);
    font-weight: 400;
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: var(--sp-3); }
.gallery button { padding: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; background: none; cursor: pointer; aspect-ratio: 4 / 3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); transition: transform var(--t-slow), filter var(--t-slow); }
.gallery button:hover { border-color: var(--c-brass-dim); }
.gallery button:hover img { transform: scale(1.05); filter: saturate(1) brightness(0.95); }

.sidebar { position: sticky; top: 98px; display: grid; gap: var(--sp-5); }
.side-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-5); }
.side-card h3 {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-brass);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line-soft);
}
.side-card p { font-size: var(--fs-sm); color: var(--c-text-2); }
.side-list li { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line-soft); font-size: var(--fs-sm); color: var(--c-text-2); }
.side-list li:last-child { border-bottom: 0; }
.side-list svg { width: 15px; height: 15px; color: var(--c-text-3); flex: none; margin-top: 4px; }
.side-card .btn { margin-top: var(--sp-4); }

.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(6, 5, 5, 0.95); display: grid; place-items: center; padding: var(--sp-5); }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--r-md); object-fit: contain; }
.lightbox-close {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text);
    font-size: 1.2rem;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------------------
   13. Recht & Sicherheit (heller Block)
   -------------------------------------------------------------------------- */
.section--light h1, .section--light h2, .section--light h3 { color: var(--c-ivory-ink); }
.section--light .lead, .section--light p { color: var(--c-ivory-ink2); }
.section--light a { color: #8a2437; }
.section--light a:hover { color: var(--c-ivory-ink); }
.section--light .eyebrow { color: #8a2437; }
.section--light .eyebrow::before { background: #8a2437; }
.section--light .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); }

.legal-list li { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-ivory-2); font-size: var(--fs-sm); }
.legal-list li:last-child { border-bottom: 0; }
.legal-list svg { width: 16px; height: 16px; color: #8a2437; flex: none; margin-top: 4px; }
.legal-list strong { display: block; color: var(--c-ivory-ink); margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-2);
    cursor: pointer;
    font-weight: 550;
    list-style: none;
    transition: color var(--t-fast);
}
.faq summary:hover { color: var(--c-brass-2); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.15rem; color: var(--c-brass); flex: none; }
.faq details[open] summary { color: var(--c-brass-2); }
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 var(--sp-2) var(--sp-5); color: var(--c-text-2); font-size: var(--fs-sm); max-width: 78ch; }

/* --------------------------------------------------------------------------
   15. CTA
   -------------------------------------------------------------------------- */
.cta { background: var(--c-surface); border-top: 1px solid var(--c-line); }
.cta .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.cta h2 { margin-bottom: var(--sp-3); }
.cta p { color: var(--c-text-2); max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   16. Formular
   -------------------------------------------------------------------------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: var(--sp-7); align-items: start; }

.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
.progress li {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    color: var(--c-text-3);
    transition: border-color var(--t-base), color var(--t-base);
}
.progress li[data-state="current"] { border-top-color: var(--c-brass); color: var(--c-brass); }
.progress li[data-state="done"] { border-top-color: var(--c-good); color: var(--c-text-2); cursor: pointer; }
.progress li[data-state="done"]:hover { color: var(--c-text); }
.progress .step-no { display: block; }
.progress .step-label { display: block; font-family: var(--f-body); letter-spacing: 0; font-size: var(--fs-sm); color: inherit; }

.form-panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-6); }
.form-step { display: none; }
.form-step[data-active="1"] { display: block; }
.form-step > h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.form-step > .step-intro { color: var(--c-text-2); font-size: var(--fs-sm); margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line-soft); }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field-row .field { margin-bottom: 0; }

.field > label, .fieldset > legend { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); padding: 0; }
.req { color: var(--c-rose-2); margin-left: 0.15em; }
.hint { font-size: var(--fs-xs); color: var(--c-text-3); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 0.7rem 0.8rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--c-text-3); }
textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c0a163' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
    padding-right: 2.3rem;
}
input:hover, select:hover, textarea:hover { border-color: var(--c-text-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-brass); box-shadow: 0 0 0 3px var(--c-brass-soft); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--c-error); background: var(--c-error-soft); }
.field-error { font-size: var(--fs-xs); color: var(--c-error); display: none; }
.field-error[data-show="1"] { display: block; }

.counter { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-3); text-align: right; }
.counter[data-state="over"] { color: var(--c-error); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.fieldset > legend { margin-bottom: var(--sp-3); }

/* Auswahlkacheln */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.choice {
    position: relative;
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-bg);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.choice:hover { border-color: var(--c-brass-dim); }
.choice input { margin: 3px 0 0; accent-color: var(--c-brass); width: 16px; height: 16px; flex: none; }
.choice:has(input:checked) { border-color: var(--c-brass); background: var(--c-brass-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--c-brass); outline-offset: 2px; }
.choice-title { font-weight: 600; font-size: var(--fs-sm); display: block; color: var(--c-text); }
.choice-meta { font-size: var(--fs-xs); color: var(--c-text-3); font-family: var(--f-mono); letter-spacing: 0.06em; }
.choice-thumb { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; flex: none; filter: saturate(0.85) brightness(0.85); }

.pill-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-bg);
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    cursor: pointer;
    transition: all var(--t-fast);
}
.pill input { accent-color: var(--c-brass); margin: 0; }
.pill:has(input:checked) { border-color: var(--c-brass); background: var(--c-brass-soft); color: var(--c-text); }

/* Live-Vorschau der gewaehlten Betriebe */
.preview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-6) 0 var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}
.preview-head h3 { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass); }
.preview-list { display: grid; gap: var(--sp-3); }
.preview-empty { padding: var(--sp-6) var(--sp-5); border: 1px dashed var(--c-line); border-radius: var(--r-md); text-align: center; color: var(--c-text-3); font-size: var(--fs-sm); }

.preview-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-left: 2px solid var(--c-brass);
    border-radius: var(--r-md);
    overflow: hidden;
}
.preview-card > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); }
.preview-card .pv-noimg { background: var(--c-raised); display: grid; place-items: center; color: var(--c-text-3); }
.preview-card .pv-noimg svg { width: 22px; height: 22px; }
.preview-body { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.preview-body h4 { font-size: var(--fs-md); }
.preview-meta { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--c-text-3); display: grid; gap: 3px; }
.preview-meta .pv-open { color: var(--c-good); }
.preview-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.preview-actions .btn { padding: 0.42rem 0.8rem; font-size: var(--fs-sm); }
.preview-note { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: var(--sp-3); }

/* Uploads */
.dropzone {
    display: block;
    position: relative;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-bg);
    padding: var(--sp-6);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover, .dropzone[data-drag="1"] { border-color: var(--c-brass); background: var(--c-brass-soft); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone svg { width: 22px; height: 22px; color: var(--c-brass); margin: 0 auto var(--sp-3); }
.dropzone .dz-title { font-weight: 600; font-size: var(--fs-sm); display: block; }
.dropzone .dz-hint { font-size: var(--fs-xs); color: var(--c-text-3); margin-top: var(--sp-1); display: block; }

.filelist { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.filelist li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.filelist .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .fsize { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-text-3); }
.filelist .fdrop { border: 0; background: none; color: var(--c-text-3); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; }
.filelist .fdrop:hover { color: var(--c-error); }

/* Einwilligungen */
.consent { display: flex; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-bg); margin-bottom: var(--sp-3); cursor: pointer; }
.consent input { accent-color: var(--c-brass); width: 17px; height: 17px; flex: none; margin: 4px 0 0; }
.consent span { font-size: var(--fs-sm); color: var(--c-text-2); }
.consent:has(input:checked) { border-color: var(--c-brass-dim); }
.consent[data-invalid="1"] { border-color: var(--c-error); background: var(--c-error-soft); }

.summary { margin-top: var(--sp-6); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.summary h3 {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-brass);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
}
.summary dl { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); }

.form-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }

.form-alert {
    display: none;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-5);
    background: var(--c-error-soft);
    border: 1px solid rgba(217, 100, 122, 0.35);
    color: #eba7b4;
}
.form-alert[data-show="1"] { display: flex; }
.form-alert svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }

.done { text-align: center; padding: var(--sp-8) var(--sp-5); }
.done-mark { width: 54px; height: 54px; margin: 0 auto var(--sp-5); border-radius: 50%; background: var(--c-good-soft); color: var(--c-good); display: grid; place-items: center; }
.done-mark svg { width: 24px; height: 24px; }
.done h2 { margin-bottom: var(--sp-3); }
.done p { color: var(--c-text-2); max-width: 52ch; margin-inline: auto; }
.reference {
    display: inline-block;
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--c-brass-dim);
    border-radius: var(--r-md);
    font-family: var(--f-mono);
    font-size: var(--fs-md);
    letter-spacing: 0.12em;
    color: var(--c-brass-2);
}

.busy { position: fixed; inset: 0; z-index: 250; background: rgba(16, 13, 13, 0.92); display: grid; place-items: center; text-align: center; }
.spinner { width: 30px; height: 30px; border: 1px solid var(--c-line); border-top-color: var(--c-brass); border-radius: 50%; margin: 0 auto var(--sp-4); animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   17. Fusszeile
   -------------------------------------------------------------------------- */
.site-footer::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--g-gold-line);
    opacity: 0.45;
}
.site-footer { background: #080606; border-top: 1px solid var(--c-line); color: var(--c-text-3); font-size: var(--fs-sm); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-7); }
.site-footer h3 { font-family: var(--f-mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-brass); margin-bottom: var(--sp-4); }
.site-footer a { color: var(--c-text-2); }
.site-footer a:hover { color: var(--c-brass-2); }
.site-footer li { padding: var(--sp-1) 0; }
.footer-about p { max-width: 40ch; color: var(--c-text-3); }
.footer-brand { font-family: var(--f-display); font-size: 1.25rem; color: var(--c-text); margin-bottom: var(--sp-3); }
.footer-help { border-left: 1px solid var(--c-brass-dim); padding-left: var(--sp-5); }
.footer-bottom {
    border-top: 1px solid var(--c-line-soft);
    padding-block: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    align-items: center;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
}
.age-mark { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--c-line); border-radius: 999px; padding: 0.25rem 0.75rem; color: var(--c-text-2); }
.age-mark b { color: var(--c-brass-2); }


/* --------------------------------------------------------------------------
   21. Sprachumschalter (nc-translate)
   Bewusst NICHT als schwebende Lasche am Bildschirmrand wie in der
   Vorlage: die verdeckt auf dem Handy die Inhalte und wirkt wie ein
   fremdes Widget. Hier sitzt er als Schaltflaeche in der Kopfzeile,
   direkt neben der Hauptaktion.
   -------------------------------------------------------------------------- */
.lang { position: relative; flex: none; order: 3; }

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.5rem 0.7rem;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    color: var(--c-text-2);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
}
.language-toggle:hover,
.language-toggle.active { border-color: var(--c-brass-dim); color: var(--c-brass-2); }
.language-toggle__globe { width: 15px; height: 15px; flex: none; color: var(--c-brass); }
.language-toggle__code { line-height: 1; }

.language-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: 262px;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-top: 2px solid var(--c-brass);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.language-menu.active { opacity: 1; visibility: visible; transform: none; }

.language-menu-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line-soft);
}
.language-menu-header h3 {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-brass);
}
.close-language-menu {
    border: 0;
    background: none;
    color: var(--c-text-3);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.close-language-menu:hover { color: var(--c-text); }

.language-options { padding: var(--sp-2) 0; }
.language-option {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    width: 100%;
    padding: 0.55rem var(--sp-4);
    border: 0;
    border-left: 2px solid transparent;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.language-option:hover { background: var(--c-brass-soft); }
.language-option.active { border-left-color: var(--c-brass); background: var(--c-brass-soft); }
.lang-name {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    color: var(--c-text-3);
    width: 26px;
    flex: none;
}
.lang-native { font-size: var(--fs-base); color: var(--c-text-2); }
.language-option.active .lang-name { color: var(--c-brass); }
.language-option.active .lang-native { color: var(--c-text); }

.language-note {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-line-soft);
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    line-height: 1.5;
}

/* Hinweis beim Umschalten */
.nc-lang-note {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 400;
    padding: 0.7rem 1.3rem;
    background: var(--c-surface);
    border: 1px solid var(--c-brass-dim);
    border-radius: var(--r-md);
    color: var(--c-brass-2);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Googles eigene Leiste unterdruecken und die eingehaengten <font>-Tags
   an die Seitenfarben binden */
.skiptranslate, .goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
font { color: inherit !important; background: transparent !important; }

/* --------------------------------------------------------------------------
   18. Bewegung
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 550ms ease, transform 550ms ease; }
[data-reveal][data-shown="1"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
    .hero .container { grid-template-columns: 1fr; gap: var(--sp-6); }
    .detail-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
    .sidebar { position: static; }
    .detail-banner-inner { grid-template-columns: auto minmax(0, 1fr); }
    .detail-cta { grid-column: 1 / -1; margin-top: var(--sp-4); }
    .form-layout { grid-template-columns: 1fr; }
    .form-aside { order: -1; }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .trustbar .container { grid-template-columns: repeat(2, 1fr); }
    .trustbar li { border-right: 0; border-bottom: 1px solid var(--c-line-soft); padding-left: 0 !important; }
    .trustbar li:nth-child(odd) { padding-right: var(--sp-5); }
    .trustbar li:nth-child(even) { padding-left: var(--sp-5) !important; border-left: 1px solid var(--c-line-soft); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .section--light .container { grid-template-columns: 1fr; gap: var(--sp-6); }
}

@media (max-width: 780px) {
    :root { --sp-8: 3.25rem; --sp-9: 4rem; }

    .nav-toggle { display: grid; }
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--sh-3);
        padding: var(--sp-3);
        display: none;
    }
    .nav[data-open="1"] { display: flex; }
    .nav a:not(.btn) { padding: var(--sp-3); }
    .nav a:not(.btn)::after { content: none; }
    .nav .btn { margin-top: var(--sp-2); }

    /* Sprachwahl steht ausserhalb der Navigation und bleibt daher auch
       bei eingeklapptem Menue erreichbar. */
    .site-header .container { gap: var(--sp-3); }
    .language-menu { right: -8px; width: min(280px, calc(100vw - 2 * var(--sp-5))); }

    /* Kopfbereich auf schmalen Geraeten
       Vorher brach die Vertrauensleiste auf zwei Zeilen um, darunter kam die
       Kontaktzeile, darunter ein Kopf mit umbrechendem Untertitel: drei Zeilen
       Beiwerk, bevor die Seite ueberhaupt anfing. Auf dem Handy zaehlt nur,
       was ueber der Falz steht.
       Die drei Stichpunkte stehen unmittelbar darunter noch einmal als
       Vertrauensleiste – hier sind sie also nicht verloren, nur nicht doppelt. */
    .topbar .container {
        justify-content: center;
        text-align: center;
        min-height: 34px;
    }
    .topbar-facts { display: none; }
    .topbar-contact { width: 100%; text-align: center; }

    .site-header .container { min-height: 62px; gap: var(--sp-3); }
    .brand { gap: var(--sp-2); min-width: 0; }
    .brand-mark { height: 34px; }
    .brand-name { font-size: 1.02rem; white-space: nowrap; }
    .brand-sub { display: none; }
    .language-toggle { padding: 0.45rem 0.6rem; letter-spacing: 0.08em; }
    .nav-toggle { width: 42px; height: 42px; }
    .steps { grid-template-columns: 1fr; }
    .progress { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
    .progress .step-label { display: none; }
    .form-panel { padding: var(--sp-5) var(--sp-4); }
    .form-nav { flex-direction: column-reverse; }
    .form-nav .btn { width: 100%; }
    .cta .container { flex-direction: column; align-items: flex-start; }
    .preview-card { grid-template-columns: 1fr; }
    .preview-card > img { height: 160px; }
}

@media (max-width: 380px) {
    .brand-name { font-size: 0.95rem; }
    .language-toggle__globe { display: none; }
    .topbar { font-size: 0.7rem; }
}

@media (max-width: 520px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-help { border-left: 0; padding-left: 0; border-top: 1px solid var(--c-brass-dim); padding-top: var(--sp-5); }
    .trustbar .container { grid-template-columns: 1fr; }
    .trustbar li:nth-child(even) { padding-left: 0 !important; border-left: 0; }
    .record-row { flex-direction: column; gap: var(--sp-1); }
    .record-row dd { text-align: left; }
    .detail-banner { min-height: 260px; padding-block: var(--sp-7) var(--sp-5); }
    .detail-banner-inner { grid-template-columns: 1fr; gap: var(--sp-4); }
    .detail-logo { width: 64px; height: 64px; }
    .detail-cta .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   20. Druck
   -------------------------------------------------------------------------- */
@media print {
    .site-header, .topbar, .site-footer, .cta, .form-nav, .nav-toggle { display: none !important; }
    body { background: #fff; color: #000; }
    * { box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   22. Einwilligung: Banner und Einstellungen
   Bewusst am unteren Rand und nicht als Sperrschicht ueber der Seite: die
   Seite setzt von sich aus nur notwendige Cookies, es gibt also nichts zu
   blockieren. Wer nicht reagiert, kann trotzdem alles lesen und sich bewerben –
   nur die Uebersetzung bleibt aus.
   -------------------------------------------------------------------------- */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(12, 10, 10, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--c-line);
    transform: translateY(100%);
    transition: transform var(--t-base);
}
.consent-banner::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 1px;
    background: var(--g-gold-line);
}
.consent-banner[data-da="1"] { transform: none; }
.consent-banner[data-weg="1"] { transform: translateY(100%); }

.consent-inner {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding: var(--sp-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-6);
    align-items: center;
}
.consent-text h2 {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-2);
}
.consent-text p {
    font-size: var(--fs-sm);
    color: var(--c-text-2);
    max-width: 78ch;
}
.consent-text p + p { margin-top: var(--sp-2); }

.consent-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: stretch;
    min-width: 220px;
}
.consent-link {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    text-align: center;
    padding-top: var(--sp-1);
}
.consent-link:hover { color: var(--c-gold-2); }

/* Einstellungen */
.consent-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(6, 5, 5, 0.86);
    display: grid;
    place-items: center;
    padding: var(--sp-5);
    overflow-y: auto;
}
.consent-sheet {
    width: min(560px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    position: relative;
}
.consent-sheet::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--g-gold);
}
.consent-sheet-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line-soft);
}
.consent-sheet-head h2 { font-size: var(--fs-lg); }
.consent-close {
    border: 0;
    background: none;
    color: var(--c-text-3);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--sp-2);
}
.consent-close:hover { color: var(--c-text); }

.consent-group {
    padding: var(--sp-5);
    border-bottom: 1px solid var(--c-line-soft);
}
.consent-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}
.consent-group h3 { font-size: var(--fs-md); }
.consent-group p { font-size: var(--fs-sm); color: var(--c-text-2); }
.consent-fixed {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3);
    flex: none;
}

.consent-switch { position: relative; flex: none; cursor: pointer; }
.consent-switch input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.consent-switch span {
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--c-raised);
    border: 1px solid var(--c-line);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.consent-switch span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-text-3);
    transition: transform var(--t-base), background var(--t-fast);
}
.consent-switch input:checked + span { background: var(--c-gold-soft); border-color: var(--c-gold); }
.consent-switch input:checked + span::after { transform: translateX(20px); background: var(--c-gold); }
.consent-switch input:focus-visible + span { outline: 2px solid var(--c-gold); outline-offset: 2px; }

.consent-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
    flex-wrap: wrap;
}
.consent-sheet-foot .btn { flex: 1 1 auto; }

@media (max-width: 780px) {
    .consent-inner { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
    .consent-actions { min-width: 0; }
    .consent-text h2 { font-size: var(--fs-base); }
}

/* --------------------------------------------------------------------------
   23. Rechtstexte
   -------------------------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal h2 {
    font-size: var(--fs-xl);
    margin: var(--sp-7) 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
    position: relative;
}
.legal h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 52px;
    height: 1px;
    background: var(--g-gold);
}
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); color: var(--c-gold-2); }
.legal p, .legal li { color: var(--c-text-2); }
.legal p + p { margin-top: var(--sp-3); }
.legal ul { margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.legal ul li { padding-left: var(--sp-5); position: relative; font-size: var(--fs-sm); }
.legal ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 12px;
    height: 1px;
    background: var(--c-gold);
}
.legal dl { margin: var(--sp-3) 0; }
.legal dt {
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-3);
    margin-top: var(--sp-3);
}
.legal dd { margin: var(--sp-1) 0 0; color: var(--c-text); }
.legal .toc {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-7);
}
.legal .toc ol { counter-reset: toc; display: grid; gap: var(--sp-2); }
.legal .toc li { counter-increment: toc; font-size: var(--fs-sm); }
.legal .toc li::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    color: var(--c-gold);
    margin-right: var(--sp-3);
}
.legal .stand {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    color: var(--c-text-3);
}

/* Von euch auszufuellende Angaben werden sichtbar markiert – so kann kein
   Platzhalter unbemerkt online gehen. */
.legal .luecke {
    background: var(--c-rose-soft);
    border-bottom: 1px dashed var(--c-rose);
    color: var(--c-rose-2);
    padding: 0 0.25em;
    font-family: var(--f-mono);
    font-size: 0.9em;
}

/* Hinweis in der Live-Vorschau, wenn ein Betrieb keine WhatsApp-Nummer hat */
.pv-kein-wa {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: var(--c-text-3);
}

/* --------------------------------------------------------------------------
   24. Objekte als erster Block nach dem Hero
   Der Abschnitt ist das Aushaengeschild der Seite und steht deshalb direkt
   unter der Einstiegsflaeche. Damit er nicht wie ein weiterer Absatz wirkt,
   bekommt er eine Goldkante nach oben und etwas mehr Luft.
   -------------------------------------------------------------------------- */
.section--objekte {
    position: relative;
    padding-top: var(--sp-8);
}
.section--objekte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--g-gold-line);
    opacity: 0.5;
}
.section-head--breit { max-width: 74ch; }
.section--objekte .section-head h2 { max-width: 26ch; }

.objekte-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}

@media (max-width: 780px) {
    .section--objekte .section-head h2 { max-width: none; }
    .objekte-fuss .btn { flex: 1 1 100%; }
}