/* ============================================================================
   Annuitätendarlehen – Gestaltung
   Richtung „Klarheit vor Kulisse": Tinte auf warmem Papier, ein Kupfer-Akzent.
   Fraunces (Titel, optische Größe) · Inter (Lauftext). Alles selbst gehostet.
   ========================================================================== */

:root {
	--tinte: #14213d;
	--tinte-tief: #0c1430;
	--papier: #f6f3ec;
	--papier-tief: #ece7dc;
	--weiss: #ffffff;
	--kupfer: #c2672a;
	--kupfer-dunkel: #9d5121;
	--gruen: #1f7a5a;
	--grau: #5b6273;
	--linie: #e1dccf;
	--schatten: 0 18px 50px -24px rgba(20, 33, 61, .35);

	--schrift-titel: 'Fraunces', Georgia, 'Times New Roman', serif;
	--schrift-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--breite: 1120px;
	--lesebreite: 72ch;
	--rand: clamp(18px, 4vw, 40px);
	--radius: 10px;

	--t-1: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
	--t-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
	--t-3: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
	--text: clamp(1rem, .95rem + .25vw, 1.0625rem);
}

/* ---------------------------------------------------------------- Grundstimmung */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	font: 400 var(--text)/1.65 var(--schrift-text);
	-webkit-font-smoothing: antialiased;
}
body { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
/* Rasterkinder duerfen schmaler werden als ihr Inhalt - sonst schiebt ein langes Wort die Spalte ueber den Rand */
.hero-innen > *, .zweispaltig > *, .gegenueber > *, .zitate > *, .merkmale > *, .karten > *, .fuss-innen > *, .wpcf7 form > * { min-width: 0; }
iframe { max-width: 100%; }
a { color: var(--kupfer-dunkel); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--tinte); }
h1, h2, h3, h4 {
	font-family: var(--schrift-titel);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	font-variation-settings: 'opsz' 96;
	text-wrap: balance;
}
h1 { font-size: var(--t-1); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-3); font-weight: 600; }
p, ul, ol { margin: 0 0 1.1em; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; border-radius: 3px; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--tinte); color: #fff; padding: .6em 1em; z-index: 100; }
.sprung:focus { left: 12px; top: 12px; }

.innen, .kopf-innen, .fuss-innen, .liste-innen, .seitenkopf-innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.lesebreite { max-width: var(--lesebreite); margin-inline: auto; padding-inline: var(--rand); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
	display: inline-flex; align-items: center; gap: .5em;
	background: var(--kupfer); color: #fff;
	font: 600 .95rem/1 var(--schrift-text);
	padding: .85em 1.35em; border: 0; border-radius: 999px;
	text-decoration: none; cursor: pointer;
	transition: background .15s, transform .15s;
}
.knopf:hover { background: var(--kupfer-dunkel); color: #fff; transform: translateY(-1px); }
.knopf-zweit { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.knopf-zweit:hover { background: var(--tinte); color: #fff; }
.knopf-hell { background: #fff; color: var(--tinte); }
.knopf-hell:hover { background: var(--papier-tief); color: var(--tinte); }

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--papier) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.wortmarke { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--tinte); font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.wortmarke-punkt { color: var(--kupfer); }
.wortmarke-sub { font-family: var(--schrift-text); font-size: .7rem; font-weight: 500; color: var(--grau); margin-left: .35em; letter-spacing: .08em; text-transform: uppercase; }
.wortmarke-hell { color: #fff; }
.wortmarke-hell .wortmarke-sub { color: rgba(255,255,255,.6); }

.navigation { display: flex; align-items: center; gap: 28px; }
.menue { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.menue a { color: var(--tinte); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .3em 0; border-bottom: 2px solid transparent; }
.menue a:hover, .menue .aktiv > a, .menue .current-menu-item > a { border-bottom-color: var(--kupfer); }
.knopf-kopf { padding: .7em 1.1em; font-size: .88rem; }

.menue-schalter { display: none; background: none; border: 0; font: 600 .9rem var(--schrift-text); color: var(--tinte); align-items: center; gap: 10px; cursor: pointer; padding: 8px 0; }
.menue-balken { position: relative; width: 22px; height: 2px; background: currentColor; display: block; }
.menue-balken::before, .menue-balken::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .2s; }
.menue-balken::before { top: -7px; } .menue-balken::after { top: 7px; }
.menue-schalter[aria-expanded="true"] .menue-balken { background: transparent; }
.menue-schalter[aria-expanded="true"] .menue-balken::before { transform: translateY(7px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-balken::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
	.menue-schalter { display: inline-flex; }
	.navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--linie); padding: 14px var(--rand) 22px; flex-direction: column; align-items: flex-start; gap: 14px; box-shadow: var(--schatten); }
	.navigation.offen { display: flex; }
	.menue { flex-direction: column; gap: 4px; width: 100%; }
	.menue a { display: block; padding: .6em 0; border-bottom: 1px solid var(--linie); }
}

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt { padding-block: clamp(56px, 8vw, 104px); }
.abschnitt-eng { padding-block: clamp(36px, 5vw, 64px); }
.abschnitt-papier { background: var(--papier-tief); }
.abschnitt-weiss { background: var(--weiss); }
.abschnitt-tinte { background: var(--tinte); color: #fff; }
.abschnitt-tinte a { color: #fff; }
.abschnitt-tinte h2 { color: #fff; }
.vorzeile {
	display: block; font: 600 .78rem/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase;
	color: var(--kupfer); margin-bottom: .8em;
}
.abschnitt-tinte .vorzeile { color: #f0b98f; }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.abschnitt-kopf p { color: var(--grau); font-size: 1.08rem; }
.abschnitt-tinte .abschnitt-kopf p { color: rgba(255,255,255,.78); }
.mittig { text-align: center; margin-inline: auto; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.zweispaltig > figure { margin: 0; }
.zweispaltig figure img { border-radius: var(--radius); box-shadow: var(--schatten); }
.prosa { max-width: 62ch; }
.prosa > :last-child { margin-bottom: 0; }
@media (max-width: 820px) { .zweispaltig { grid-template-columns: 1fr; } .zweispaltig > figure { order: -1; max-width: 520px; } }

/* ---------------------------------------------------------------- Hero */
.hero {
	background: var(--tinte);
	color: #fff;
	position: relative;
	overflow: hidden;
	padding-block: clamp(48px, 7vw, 96px);
}
.hero::before {
	content: ''; position: absolute; inset: 0;
	background:
		radial-gradient(60% 80% at 85% 10%, rgba(194,103,42,.32), transparent 60%),
		radial-gradient(50% 60% at 10% 90%, rgba(255,255,255,.07), transparent 60%);
	pointer-events: none;
}
.hero-innen { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem); font-weight: 500; margin-bottom: .3em; }
.hero h1 em { font-style: italic; font-variation-settings: 'opsz' 144; color: #f0b98f; }
.hero-unter { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: rgba(255,255,255,.82); max-width: 32ch; margin-bottom: 1.6em; }
.vorteile { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: .6em; }
.vorteile li { position: relative; padding-left: 2em; font-size: 1.05rem; }
.vorteile li::before {
	content: ''; position: absolute; left: 0; top: .3em; width: 1.25em; height: 1.25em; border-radius: 50%;
	background: var(--kupfer);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vorteile li::after {
	content: ''; position: absolute; left: .34em; top: .62em; width: .55em; height: .3em;
	border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg);
}
.hero-hinweis { font-size: .88rem; color: rgba(255,255,255,.6); margin: 0; }

.karte-formular {
	background: #fff; color: var(--tinte);
	border-radius: 14px; padding: clamp(22px, 3vw, 34px);
	box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.karte-formular h2 { font-size: 1.35rem; margin-bottom: .25em; }
.karte-formular > p { color: var(--grau); font-size: .93rem; margin-bottom: 1.2em; }
@media (max-width: 900px) { .hero-innen { grid-template-columns: 1fr; } .karte-formular { max-width: 560px; } }

/* ---------------------------------------------------------------- Formulare (Contact Form 7) */
.wpcf7 form { display: grid; gap: 14px; }
.wpcf7 form > p, .wpcf7 form .feld { margin: 0; }
.wpcf7 label, .feld-titel { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35em; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 textarea, .suche-feld {
	width: 100%; font: inherit; color: var(--tinte);
	padding: .7em .85em; border: 1.5px solid #cfd3dc; border-radius: 8px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .suche-feld:focus { border-color: var(--kupfer); box-shadow: 0 0 0 3px rgba(194,103,42,.18); outline: 0; }
.wpcf7-radio { display: flex; flex-wrap: wrap; gap: .4em .9em; }
.wpcf7-radio .wpcf7-list-item { margin: 0; }
.wpcf7-radio label { display: inline-flex; align-items: center; gap: .4em; font-weight: 500; font-size: .93rem; cursor: pointer; margin: 0; }
.wpcf7-radio input { accent-color: var(--kupfer); width: 1.05em; height: 1.05em; }
.wpcf7 input[type="submit"] {
	width: 100%; background: var(--kupfer); color: #fff; border: 0; border-radius: 999px;
	font: 600 1rem/1 var(--schrift-text); padding: 1em 1.4em; cursor: pointer; transition: background .15s;
}
.wpcf7 input[type="submit"]:hover { background: var(--kupfer-dunkel); }
.wpcf7-spinner { display: none; }
.wpcf7-not-valid-tip { font-size: .82rem; color: #b3261e; margin-top: .3em; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: .8em 1em; border-radius: 8px; border: 1.5px solid var(--linie); font-size: .93rem; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--gruen); background: #eef7f2; color: var(--gruen); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #b3261e; background: #fbeeec; }
.formular-fuss { font-size: .8rem; color: var(--grau); margin: 0; }

/* ---------------------------------------------------------------- Logos */
.logos { padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--linie); background: var(--weiss); }
.logos-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.logos-titel { font: 500 .85rem/1.3 var(--schrift-text); color: var(--grau); margin: 0; flex: 1 1 100%; text-align: center; }
.logos-reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; width: 100%; }
.logos-reihe img { height: 34px; width: auto; filter: grayscale(1); opacity: .7; transition: opacity .15s, filter .15s; }
.logos-reihe img:hover { filter: none; opacity: 1; }

/* ---------------------------------------------------------------- Rechner */
.rechner {
	background: #fff; border: 1.5px dashed var(--linie); border-radius: var(--radius);
	padding: clamp(24px, 4vw, 44px); text-align: center; max-width: 820px; margin-inline: auto;
}
.rechner.geladen { padding: 0; border-style: solid; overflow: hidden; }
.rechner-hinweis { color: var(--grau); font-size: .93rem; max-width: 52ch; margin: 0 auto 1.2em; }

/* ---------------------------------------------------------------- Merkmale, Kennzahlen */
.merkmale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.merkmal { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px; }
.merkmal h3 { margin-bottom: .4em; }
.merkmal p { margin: 0; color: var(--grau); }
.kennzahl { display: flex; flex-direction: column; gap: 2px; }
.kennzahl-wert { font-family: var(--schrift-titel); font-size: clamp(2.2rem, 2rem + 1.5vw, 3.2rem); font-weight: 500; line-height: 1; color: var(--kupfer); }
.kennzahl-text { font-size: .9rem; color: var(--grau); }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-top: 1.4em; }
@media (max-width: 820px) { .merkmale { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Gegenüberstellung, Kästen */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kasten { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 26px; }
.kasten h3 { margin-bottom: .6em; }
.kasten ul { padding-left: 1.2em; margin-bottom: 0; }
.kasten li + li { margin-top: .4em; }
.kasten-plus { border-top: 4px solid var(--gruen); }
.kasten-minus { border-top: 4px solid var(--kupfer); }
.kurz {
	background: #fff; border-left: 4px solid var(--kupfer); border-radius: 0 var(--radius) var(--radius) 0;
	padding: 20px 24px; margin: 0 0 2em; box-shadow: var(--schatten);
}
.kurz h2, .kurz h3 { font-size: 1.05rem; font-family: var(--schrift-text); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--kupfer-dunkel); margin-bottom: .6em; }
.kurz ul { margin: 0; padding-left: 1.2em; }
.kurz li + li { margin-top: .35em; }
.beispiel { background: var(--papier-tief); border-radius: var(--radius); padding: 20px 24px; margin: 1.4em 0; }
.beispiel p:last-child { margin-bottom: 0; }
.formel { font-family: var(--schrift-titel); font-size: 1.25rem; font-style: italic; text-align: center; margin: 1em 0; }
@media (max-width: 700px) { .gegenueber { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Akkordeon */
details.akkordeon { border-top: 1px solid var(--linie); }
details.akkordeon:last-of-type { border-bottom: 1px solid var(--linie); }
details.akkordeon summary {
	list-style: none; cursor: pointer; padding: 1em 2.4em 1em 0; position: relative;
	font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600;
}
details.akkordeon summary::-webkit-details-marker { display: none; }
details.akkordeon summary::after {
	content: ''; position: absolute; right: .4em; top: 50%; width: .6em; height: .6em;
	border-right: 2px solid var(--kupfer); border-bottom: 2px solid var(--kupfer);
	transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
details.akkordeon[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details.akkordeon .akkordeon-inhalt { padding: 0 0 1.4em; max-width: var(--lesebreite); }

/* ---------------------------------------------------------------- Tabellen */
.tabelle-rahmen { overflow-x: auto; margin: 1.2em 0 2em; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
/* In der Lesespalte duerfen Tabellen ausbrechen, damit sechs Spalten Platz haben */
@media (min-width: 900px) {
	.seite-inhalt .tabelle-rahmen { width: min(calc(100vw - 2 * var(--rand)), 980px); position: relative; left: 50%; transform: translateX(-50%); }
}
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .65em .9em; text-align: right; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--papier-tief); font-weight: 600; font-size: .85rem; letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td, tr.summe td { font-weight: 600; background: var(--papier); }
caption { caption-side: top; text-align: left; font-weight: 600; padding: .8em .9em .3em; font-family: var(--schrift-titel); font-size: 1.1rem; }

/* ---------------------------------------------------------------- Zitate */
.zitate { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.zitat { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 26px 28px; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.zitat p { font-family: var(--schrift-titel); font-size: 1.15rem; font-style: italic; line-height: 1.45; margin: 0; font-variation-settings: 'opsz' 120; }
.zitat figcaption { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--grau); margin-top: auto; }
.zitat figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.zitat figcaption strong { display: block; color: var(--tinte); }
@media (max-width: 760px) { .zitate { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Aufruf */
.aufruf { text-align: center; }
.aufruf h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); max-width: 22ch; margin-inline: auto; }
.aufruf p { max-width: 50ch; margin-inline: auto; }
.aufruf .knopf { margin-top: .8em; }

/* ---------------------------------------------------------------- Seitenkopf, Seiteninhalt */
.seitenkopf { background: var(--weiss); border-bottom: 1px solid var(--linie); padding-block: clamp(36px, 5vw, 64px); }
.seitenkopf-pfad { font-size: .85rem; color: var(--grau); margin-bottom: .8em; }
.seitenkopf-pfad a { color: var(--grau); text-decoration: none; }
.seitenkopf-pfad a:hover { color: var(--kupfer-dunkel); }
.seitenkopf-titel { max-width: 20ch; margin-bottom: .2em; }
.seitenkopf-anriss { font-size: 1.1rem; color: var(--grau); max-width: 60ch; margin: .6em 0 0; }
.seitenkopf-meta { color: var(--grau); font-size: .9rem; margin: .4em 0 0; }
.seite-inhalt { padding-block: clamp(36px, 5vw, 64px); }
.seite-inhalt h2 { margin-top: 1.6em; }
.seite-inhalt h2:first-child { margin-top: 0; }
.seite-inhalt h3 { margin-top: 1.3em; }
.seite-inhalt img { border-radius: var(--radius); margin: 1.2em 0; }
.seite-inhalt figure { margin: 1.6em 0; }
.seite-inhalt figcaption { font-size: .85rem; color: var(--grau); margin-top: .5em; }
.seite-inhalt ul, .seite-inhalt ol { padding-left: 1.3em; }
.seite-inhalt li + li { margin-top: .3em; }
.liste-schlicht { padding-left: 1.2em; }
.beitrag-bild { margin-block: 0; padding-top: clamp(24px, 3vw, 40px); }
.beitrag-bild img { border-radius: var(--radius); width: 100%; }
.beitrag-nachbarn { display: flex; justify-content: space-between; gap: 20px; padding-bottom: clamp(36px, 5vw, 64px); font-size: .95rem; }
.beitrag-nachbarn p { margin: 0; }
.beitrag-nachbarn .weiter { margin-left: auto; text-align: right; }

/* ---------------------------------------------------------------- Listen, Karten */
.liste-innen { padding-block: clamp(36px, 5vw, 64px); }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.karte-bild img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.karte-text { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.karte-titel { font-size: 1.25rem; margin: 0; }
.karte-titel a { color: var(--tinte); text-decoration: none; }
.karte-titel a:hover { color: var(--kupfer-dunkel); }
.karte-anriss { color: var(--grau); margin: 0; font-size: .95rem; }
.karte-meta { font-size: .82rem; color: var(--grau); margin: auto 0 0; }
.blaettern { margin-top: 36px; }
.blaettern .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.blaettern .page-numbers { padding: .5em .9em; border: 1px solid var(--linie); border-radius: 8px; text-decoration: none; color: var(--tinte); background: #fff; }
.blaettern .page-numbers.current { background: var(--tinte); color: #fff; border-color: var(--tinte); }

/* ---------------------------------------------------------------- Suche */
.suche { margin-top: 2em; }
.suche-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4em; }
.suche-zeile { display: flex; gap: 10px; }
.suche-zeile .knopf { flex: 0 0 auto; }

/* ---------------------------------------------------------------- Fußzeile */
.fuss { background: var(--tinte-tief); color: rgba(255,255,255,.78); margin-top: clamp(40px, 6vw, 80px); }
.fuss-innen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-block: clamp(40px, 5vw, 64px); }
.fuss-marke p { margin: 1em 0 0; max-width: 34ch; font-size: .93rem; }
.fuss-titel { font: 600 .78rem/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: #f0b98f; margin-bottom: 1em; }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: .95rem; }
.fuss-liste a { color: #fff; text-decoration: none; }
.fuss-liste a:hover { color: #f0b98f; }
.fuss-zeile { border-top: 1px solid rgba(255,255,255,.12); }
.fuss-zeile p { max-width: var(--breite); margin-inline: auto; padding: 18px var(--rand); font-size: .8rem; color: rgba(255,255,255,.5); }
@media (max-width: 820px) { .fuss-innen { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fuss-innen { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Druck */
@media print {
	.kopf, .fuss, .knopf, .rechner, .karte-formular { display: none !important; }
	body { background: #fff; color: #000; }
}