/* main.css, immobilienbewertung-thurgau.ch
   Gestaltungssystem: ruhige Sachlichkeit mit editorialem Charakter, näher am Marktbericht einer Kantonalbank
   als am Immobilienportal. Dokumentation, Palette und Kontrastwerte: docs/design.md.
   Klassennamen sind mit dem Theme und dem mu-Plugin ibt-funnel abgestimmt und werden hier nicht verändert.
   Bewegung nur über transform und opacity. */

/* ==================== 1. Tokens ==================== */
:root {
	/* Farben */
	--c-schiefer: #1c3944;          /* Primär: Struktur, Überschriften, Navigation, dunkle Flächen */
	--c-schiefer-dunkel: #122830;   /* Fuss */
	--c-schiefer-mittel: #2f4d58;   /* Hover auf Schieferflächen */
	--c-kupfer: #a85c2c;            /* einziger Akzent: CTA, Fortschritt, Markierungen */
	--c-kupfer-dunkel: #8a4a1f;     /* Links im Text, Button-Hover */
	--c-kupfer-hell: #d9a06a;       /* Akzent auf dunklen Flächen */
	--c-kupfer-flaeche: #f8f1ea;    /* gewählte Option */
	--c-papier: #f7f4ee;            /* Seitenhintergrund, Kalkweiss */
	--c-sand: #ece7dc;              /* zweite Fläche, warmes Steingrau */
	--c-weiss: #ffffff;             /* Karten, Formulare */
	--c-text: #1f272b;
	--c-text-soft: #4c5a61;
	--c-rand: #6f8087;              /* Ränder von Eingabefeldern */
	--c-linie: rgba(28, 57, 68, .16);
	--c-linie-stark: rgba(28, 57, 68, .32);
	--c-fehler: #a32d2d;
	--c-fehler-flaeche: #fbf1f0;
	/* Namen aus dem Gerüst, damit ältere Verweise weiter funktionieren */
	--c-akzent: var(--c-kupfer);
	--c-akzent-dunkel: var(--c-kupfer-dunkel);
	--c-salbei: var(--c-schiefer-mittel);
	/* Schrift */
	--f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--f-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--t-basis: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);   /* 18 bis 20 px */
	--t-klein: clamp(.9375rem, .9rem + .2vw, 1.0625rem);    /* 15 bis 17 px */
	--t-label: .875rem;                                     /* 14 px, Versalien mit Sperrung */
	--t-lead: clamp(1.1875rem, 1.1rem + .45vw, 1.375rem);   /* 19 bis 22 px */
	--t-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);      /* 19 bis 22 px */
	--t-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);       /* 26 bis 36 px */
	--t-h1: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);          /* 34 bis 56 px */
	--t-zahl: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);      /* Kennzahlen */
	--t-legend: clamp(1.375rem, 1.2rem + .9vw, 1.875rem);   /* Funnel-Frage */
	--zh-text: 1.6;
	/* Abstände: kleine Stufen für Komponenten, grosse für Abschnitte */
	--r-1: .5rem; --r-2: .75rem; --r-3: 1rem; --r-4: 1.5rem; --r-5: 2.25rem; --r-6: 3.5rem;
	--raum: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
	--raum-hero: clamp(3rem, 2rem + 5vw, 7rem);
	/* Form, Tiefe, Bewegung */
	--radius: 3px; --radius-gross: 6px;
	--schatten-1: 0 1px 2px rgba(18, 40, 48, .06), 0 8px 24px rgba(18, 40, 48, .08);
	--schatten-2: 0 2px 4px rgba(18, 40, 48, .08), 0 18px 48px rgba(18, 40, 48, .14);
	--dauer: 160ms; --dauer-lang: 260ms;
	--kurve: cubic-bezier(.2, .7, .2, 1);
	--breite: 72rem; --breite-schmal: 44rem;
	--kopf-hoehe: 4.5rem;
}

/* ==================== 2. Fonts (selbst gehostet, Latin-Subset) ==================== */
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }

/* ==================== 3. Basis ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); scroll-padding-bottom: 6rem; background: var(--c-papier); }
body { margin: 0; background: var(--c-papier); color: var(--c-text); font-family: var(--f-sans); font-size: var(--t-basis); line-height: var(--zh-text); font-variant-numeric: tabular-nums lining-nums; padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { body { padding-bottom: 0; } html { scroll-padding-bottom: 1rem; } }
body.typ-bewertung { padding-bottom: 0; }
::selection { background: rgba(168, 92, 44, .22); }
h1, h2, h3, h4, .wortmarke { font-family: var(--f-serif); font-weight: 600; color: var(--c-schiefer); line-height: 1.15; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; overflow-wrap: break-word; }
h2, h3, h4 { hyphens: auto; hyphenate-limit-chars: 14 5 5; }
body { overflow-wrap: break-word; }
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.02em; max-width: 22ch; }
h2 { font-size: var(--t-h2); margin-top: 1.75em; }
h3 { font-size: var(--t-h3); font-family: var(--f-sans); letter-spacing: 0; line-height: 1.3; }
p, ul, ol, table, figure { margin: 0 0 1.15em; }
a { color: var(--c-kupfer-dunkel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; text-decoration-color: rgba(138, 74, 31, .45); }
a:hover { color: var(--c-schiefer); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--c-kupfer); outline-offset: 3px; border-radius: 2px; }
.cta-band :focus-visible, .fuss :focus-visible, .karten-raster-3 > .karte:first-child :focus-visible { outline-color: var(--c-kupfer-hell); }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 200; background: var(--c-schiefer); color: var(--c-papier); padding: .8rem 1.25rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; transform: translateY(-150%); opacity: 0; transition: transform var(--dauer) var(--kurve), opacity var(--dauer); }
.skip-link:focus { transform: none; opacity: 1; outline-color: var(--c-kupfer-hell); }
.wrap { width: min(100% - 2rem, var(--breite)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 3rem, var(--breite)); } }
.wrap-schmal { max-width: var(--breite-schmal); }
.abschnitt, .inhalt-breit { padding-block: var(--raum); }
.abschnitt-sand { background: var(--c-sand); }
.eyebrow { display: flex; align-items: center; gap: .75rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-soft); margin: 0 0 1.25rem; }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--c-kupfer); flex: none; }
.einstieg { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.5; color: var(--c-text-soft); max-width: 60ch; margin: 0 0 1.75rem; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ==================== 4. Buttons ==================== */
.btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.5rem; border-radius: var(--radius); font: 600 1.0625rem/1.2 var(--f-sans); text-decoration: none; text-align: center; cursor: pointer; border: 1.5px solid var(--c-kupfer); background: var(--c-kupfer); color: #fff; transition: transform var(--dauer) var(--kurve); -webkit-tap-highlight-color: transparent; }
.btn:hover, .wp-block-button__link:hover { background: var(--c-kupfer-dunkel); border-color: var(--c-kupfer-dunkel); color: #fff; }
.btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.btn-outline, .btn-zurueck { background: transparent; border-color: var(--c-schiefer); color: var(--c-schiefer); }
.btn-outline:hover, .btn-zurueck:hover { background: var(--c-schiefer); border-color: var(--c-schiefer); color: var(--c-papier); }
.btn-klein { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; white-space: nowrap; }
.btn-gross { min-height: 3.5rem; padding: .9rem 1.9rem; font-size: 1.125rem; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }

@media (max-width: 639px) { .hero-cta .btn, .cta-band-aktionen .btn, .funnel-nav .btn-gross { flex: 1 1 100%; width: 100%; } .cta-zwischen .btn { justify-self: stretch; } }

/* ==================== 5. Kopf ==================== */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--c-papier); border-bottom: 1px solid var(--c-linie); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; min-height: var(--kopf-hoehe); flex-wrap: wrap; }
.wortmarke { display: inline-flex; flex-direction: column; font-size: clamp(1rem, .82rem + .9vw, 1.3rem); hyphens: manual; line-height: 1.05; text-decoration: none; color: var(--c-schiefer); margin: 0; letter-spacing: -.015em; }
.wortmarke:hover { color: var(--c-schiefer); }
.wortmarke-region { display: block; font: 600 .6875rem/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--c-kupfer-dunkel); margin-top: .35rem; }
.wortmarke-hell { color: var(--c-papier); font-size: 1.375rem; }
.burger { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--c-linie-stark); border-radius: var(--radius); cursor: pointer; padding: 0; }
.burger span { width: 20px; height: 2px; background: var(--c-schiefer); transition: transform var(--dauer) var(--kurve), opacity var(--dauer); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav { display: none; width: 100%; padding: .5rem 0 1.25rem; border-top: 1px solid var(--c-linie); }
.nav.offen { display: block; }
.nav-liste, .sub-menu, .fuss-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; padding: .55rem 0; color: var(--c-schiefer); text-decoration: none; font-weight: 600; font-size: 1.0625rem; }
.nav-liste a:hover, .nav-liste .current-menu-item > a { color: var(--c-kupfer-dunkel); }
.menu-item-has-children > a::after { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--c-kupfer); border-bottom: 2px solid var(--c-kupfer); transform: translateY(-2px) rotate(45deg); transition: transform var(--dauer) var(--kurve); margin-right: .25rem; }
.menu-item-has-children.offen > a::after { transform: translateY(2px) rotate(-135deg); }
.nav-liste .sub-menu { display: none; padding: .25rem 0 .5rem 1rem; border-left: 2px solid var(--c-kupfer); margin: 0 0 .5rem; }
.nav-liste .offen > .sub-menu { display: block; }
.nav-liste .sub-menu a { font-weight: 400; font-size: 1rem; min-height: 2.5rem; }
.kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: 1rem; border-top: 1px solid var(--c-linie); margin-top: .75rem; }
.kopf-telefon { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-schiefer); font-weight: 600; text-decoration: none; font-size: 1rem; white-space: nowrap; }
.kopf-telefon:hover { color: var(--c-kupfer-dunkel); }
.kopf-telefon-mobil { margin-left: auto; width: 44px; height: 44px; justify-content: center; border: 1px solid var(--c-linie-stark); border-radius: var(--radius); color: var(--c-kupfer-dunkel); }
@media (min-width: 900px) {
	/* Masthead in zwei Zeilen wie bei einem Marktbericht: oben Wortmarke, Telefon und Knopf, unten die Navigation auf dem Raster */
	:root { --kopf-hoehe: 6.375rem; }
	.burger, .kopf-telefon-mobil { display: none; }
	.kopf-zeile { flex-wrap: wrap; gap: 0 1.5rem; min-height: 0; }
	.nav { display: contents; }
	.nav-liste { display: flex; gap: 0; order: 3; flex-basis: 100%; border-top: 1px solid var(--c-linie); margin-left: -.7rem; }
	.nav-liste > li { position: relative; }
	.nav-liste > li > a { position: relative; padding: .6rem .7rem; min-height: 2.75rem; font-size: .9375rem; white-space: nowrap; }
	.nav-liste > li > a::before { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .35rem; height: 2px; background: var(--c-kupfer); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer-lang) var(--kurve); }
	.nav-liste > li:hover > a::before, .nav-liste > li > a:focus-visible::before, .nav-liste > .current-menu-item > a::before, .nav-liste > .current-menu-ancestor > a::before, .nav-liste > li.offen > a::before { transform: scaleX(1); }
	.nav-liste > li > a:hover, .nav-liste > .current-menu-item > a { color: var(--c-schiefer); }
	.menu-item-has-children > a::after { width: .4rem; height: .4rem; border-color: var(--c-text-soft); margin-right: 0; }
	.nav-liste .sub-menu, .nav-liste .offen > .sub-menu { display: block; position: absolute; left: 0; top: 100%; min-width: 17rem; background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--radius-gross); box-shadow: var(--schatten-2); padding: .5rem; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), visibility var(--dauer); }
	.nav-liste > li:hover > .sub-menu, .nav-liste > li:focus-within > .sub-menu, .nav-liste > li.offen > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.nav-liste .sub-menu a { padding: .65rem .9rem; border-radius: var(--radius); min-height: 2.75rem; }
	.nav-liste .sub-menu a:hover, .nav-liste .sub-menu .current-menu-item > a { background: var(--c-sand); color: var(--c-schiefer); }
	.wortmarke { padding-block: .45rem; }
	.kopf-aktionen { order: 2; margin: 0 0 0 auto; padding: .35rem 0; border: 0; gap: 1.25rem; flex-wrap: nowrap; }
	.nav-liste > li > a { font-size: 1rem; }
}
@media (min-width: 1200px) { .nav-liste > li > a { padding-inline: .85rem; } .nav-liste { margin-left: -.85rem; } .nav-liste > li > a::before { left: .85rem; right: .85rem; } }

/* ==================== 6. Hero, Vertrauensliste, Platzhalter ==================== */
.hero { position: relative; background: var(--c-sand); padding-block: var(--raum-hero); border-bottom: 1px solid var(--c-linie); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hero-raster > * { min-width: 0; }
.hero h1 { margin-bottom: 1rem; }
.hero .einstieg { margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: 0 0 1rem; }
.hero-sekundaer { color: var(--c-text-soft); font-size: var(--t-klein); max-width: 48ch; margin: 0 0 2rem; }
.hero-einfach .hero-text { max-width: var(--breite-schmal); }
.hero-bild { display: none; position: relative; }
.hero-bild > * { position: relative; border-radius: var(--radius-gross); }
@media (min-width: 900px) {
	.hero-split .hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); }
	.hero-bild { display: block; }
}
.trust { list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid var(--c-linie-stark); display: grid; gap: .65rem; font-size: var(--t-klein); color: var(--c-text); }
.trust li { position: relative; padding-left: 1.75rem; }
.trust li::before { content: ""; position: absolute; left: .1rem; top: .5em; width: .85rem; height: .45rem; border-left: 2.5px solid var(--c-kupfer); border-bottom: 2.5px solid var(--c-kupfer); transform: rotate(-45deg); }
.platzhalter { display: grid; place-items: center; width: 100%; background: repeating-linear-gradient(135deg, rgba(28, 57, 68, .05) 0 10px, transparent 10px 20px), var(--c-sand); border: 1px dashed var(--c-linie-stark); color: var(--c-text-soft); font-size: var(--t-klein); text-align: center; padding: 1rem; border-radius: var(--radius-gross); }
.platzhalter span { background: rgba(247, 244, 238, .92); padding: .4rem .8rem; border-radius: var(--radius); max-width: 28ch; }
.hero .platzhalter { background-color: var(--c-papier); }
.typ-danke .hero h1::before { content: ""; display: block; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--c-kupfer); margin-bottom: 1.25rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a85c2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.4rem no-repeat; }
.typ-bewertung .hero { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* ==================== 7. Inhalt, Blöcke ==================== */
.inhalt > :first-child, .inhalt .wrap-schmal > :first-child, .bewertung-text > :first-child { margin-top: 0; }
.inhalt h2 + h3 { margin-top: 1.25rem; }
.inhalt ul, .inhalt ol { padding-left: 1.4rem; }
.inhalt li { margin-bottom: .45rem; }
.inhalt li::marker { color: var(--c-kupfer); }
.inhalt ol li::marker { font-weight: 600; }
.inhalt hr, .wp-block-separator { border: 0; height: 1px; background: var(--c-linie); margin: 2.5rem 0; }
.inhalt img, .wp-block-image img { border-radius: var(--radius-gross); }
.wp-block-image figcaption, .tabelle-wrap figcaption, .wp-block-table figcaption { font-size: var(--t-klein); color: var(--c-text-soft); margin-top: .75rem; text-align: left; }
.inhalt .wp-block-columns { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .inhalt .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
blockquote, .zitat { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.5; color: var(--c-schiefer); border-left: 3px solid var(--c-kupfer); padding-left: 1.25rem; margin: 2rem 0; }
.kurz { position: relative; background: var(--c-sand); padding: 1.5rem 1.5rem 1.5rem 1.75rem; border-radius: var(--radius-gross); margin: 0 0 var(--r-6); }
.kurz::before, .cta-zwischen::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 3px; background: var(--c-kupfer); border-radius: 2px; }
.kurz h2 { margin: 0 0 .75rem; font: 600 var(--t-label)/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-kupfer-dunkel); }
.kurz p { font-family: var(--f-serif); font-size: var(--t-lead); line-height: 1.5; color: var(--c-schiefer); margin: 0; text-wrap: pretty; }
.kurz p + p { margin-top: .75rem; }
@media (min-width: 768px) { .kurz { padding: 2rem 2.25rem 2rem 2.5rem; } }
.beispiel { background: var(--c-weiss); border: 1px solid var(--c-linie); border-left: 3px solid var(--c-kupfer); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius-gross) var(--radius-gross) 0; }
.hinweis, .autor { font-size: var(--t-klein); color: var(--c-text-soft); border-top: 1px solid var(--c-linie); padding-top: 1.25rem; margin-top: var(--r-6); }
.geprueft { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; font-size: var(--t-klein); color: var(--c-text-soft); margin-top: 2rem; }
.geprueft::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-kupfer); flex: none; }
.geprueft time { font-weight: 600; color: var(--c-text); }
.hinweis + .geprueft, .autor + .geprueft { margin-top: .75rem; }
/* Startseite: Textspalte links am 72-rem-Raster, Datenblöcke laufen von der Spaltenkante auf die volle Breite */
.inhalt-breit .wrap-schmal { margin-left: max(1rem, (100% - var(--breite)) / 2); }
.inhalt-breit .wrap-schmal > :is(.karten-raster, .fakten, .tabelle-wrap, .wp-block-table, .ablauf) { width: min(var(--breite), 100vw - 2rem); }
@media (min-width: 768px) { .inhalt-breit .wrap-schmal { margin-left: max(1.5rem, (100% - var(--breite)) / 2); } .inhalt-breit .wrap-schmal > :is(.karten-raster, .fakten, .tabelle-wrap, .wp-block-table, .ablauf) { width: min(var(--breite), 100vw - 3rem); } }

/* ==================== 8. Tabellen ==================== */
.tabelle-wrap, .wp-block-table { margin: var(--r-5) 0; overflow: visible; }
.inhalt table, .tabelle { width: 100%; border-collapse: collapse; font-size: var(--t-klein); line-height: 1.45; margin: 0; }
.inhalt th, .inhalt td, .tabelle th, .tabelle td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--c-linie); vertical-align: top; }
.inhalt thead th, .tabelle thead th { font: 600 var(--t-label)/1.3 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-soft); border-bottom: 2px solid var(--c-schiefer); padding-bottom: .6rem; vertical-align: bottom; }
.inhalt tbody th, .tabelle tbody th { font-weight: 600; color: var(--c-schiefer); }
.tabelle tbody tr:last-child > *, .inhalt tbody tr:last-child > * { border-bottom-color: var(--c-linie-stark); }
.tabelle caption { text-align: left; font: 600 var(--t-h3)/1.3 var(--f-serif); color: var(--c-schiefer); padding: 0 0 .75rem; caption-side: top; }
.marktdaten td, .marktdaten thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.marktdaten tbody tr:hover td { background: rgba(28, 57, 68, .04); }

/* ==================== 9. Karten ==================== */
.karten-raster { display: grid; gap: 1.25rem; margin: var(--r-5) 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 640px) { .karten-raster-3, .karten-raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .karten-raster-3 > .karte:first-child { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1023px) { .karten-raster-3 > .karte:nth-child(even):last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .karten-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .karten-raster-3 > .karte:first-child { grid-column: span 2; grid-row: span 2; } .karten-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.karte { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .5rem; background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--radius-gross); padding: 1.5rem; transition: transform var(--dauer-lang) var(--kurve); }
.karte::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--schatten-1); opacity: 0; transition: opacity var(--dauer-lang); pointer-events: none; }
.karte:hover { transform: translateY(-3px); border-color: var(--c-linie-stark); }
.karte:hover::after { opacity: 1; }
.karte:has(a:focus-visible) { outline: 3px solid var(--c-kupfer); outline-offset: 3px; }
.karte-titel { font: 600 clamp(1.25rem, 1.15rem + .5vw, 1.5rem)/1.25 var(--f-serif); letter-spacing: -.01em; margin: 0; }
.karte-titel a { color: var(--c-schiefer); text-decoration: none; }
.karte-titel a::after { content: ""; position: absolute; inset: 0; }
.karte-titel a:focus-visible { outline: none; }
.karte:hover .karte-titel a { text-decoration: underline; text-decoration-color: var(--c-kupfer); text-decoration-thickness: 1.5px; }
.karte p { margin: 0; color: var(--c-text-soft); font-size: var(--t-klein); flex-grow: 1; }
.karte-link { display: inline-block; margin-top: .5rem; color: var(--c-kupfer-dunkel); font-weight: 600; font-size: var(--t-klein); }
.karte:hover .karte-link { color: var(--c-schiefer); }
/* Erste Karte im Dreierraster ist die Leitkarte: dunkel, grösser, mehr Luft */
.karten-raster-3 > .karte:first-child { background: var(--c-schiefer); border-color: var(--c-schiefer); padding: 2rem 1.75rem; justify-content: space-between; gap: .75rem; overflow: hidden; }
.karten-raster-3 > .karte:first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(34rem 20rem at 100% 100%, rgba(217, 160, 106, .26), transparent 62%); pointer-events: none; }
.karten-raster-3 > .karte:first-child .karte-titel { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); max-width: 16ch; }
.karten-raster-3 > .karte:first-child .karte-titel a { color: var(--c-papier); }
.karten-raster-3 > .karte:first-child:hover .karte-titel a { text-decoration-color: var(--c-kupfer-hell); }
.karten-raster-3 > .karte:first-child p { color: rgba(247, 244, 238, .84); font-size: var(--t-lead); max-width: 40ch; flex-grow: 0; }
.karten-raster-3 > .karte:first-child .karte-link { margin-top: auto; padding-top: 1.5rem; }
.karten-raster-3 > .karte:first-child .karte-link, .karten-raster-3 > .karte:first-child:hover .karte-link { color: var(--c-kupfer-hell); }
.karten-raster-3 > .karte:first-child:hover { border-color: var(--c-schiefer-mittel); }
@media (min-width: 1024px) { .karten-raster-3 > .karte:first-child { padding: 2.5rem; } }
.navigation.pagination { margin-top: var(--r-5); }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--c-linie-stark); border-radius: var(--radius); color: var(--c-schiefer); text-decoration: none; font-weight: 600; }
a.page-numbers:hover { border-color: var(--c-schiefer); color: var(--c-schiefer); }
.page-numbers.current { background: var(--c-schiefer); color: var(--c-papier); border-color: var(--c-schiefer); }

/* ==================== 10. Ablauf, Fakten ==================== */
.ablauf { list-style: none; margin: var(--r-5) 0; padding: 0; counter-reset: schritt; display: grid; gap: 1.75rem; }
.ablauf-schritt { position: relative; padding-left: 4.25rem; min-height: 3rem; }
.ablauf-schritt::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: 0; top: -.2rem; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font: 600 1.375rem/1 var(--f-serif); color: var(--c-kupfer-dunkel); background: var(--c-weiss); border: 1.5px solid var(--c-kupfer); }
.ablauf-schritt:not(:last-child)::after { content: ""; position: absolute; left: calc(1.5rem - .5px); top: 2.9rem; bottom: -1.75rem; width: 1px; background: var(--c-linie-stark); }
.ablauf-schritt h3 { margin: 0 0 .35rem; }
.ablauf-schritt p { margin: 0; color: var(--c-text-soft); font-size: var(--t-klein); }
@media (min-width: 1024px) {
	.inhalt-breit .ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
	.inhalt-breit .ablauf-schritt { padding-left: 0; padding-top: 4.25rem; }
	.inhalt-breit .ablauf-schritt::before { top: 0; }
	.inhalt-breit .ablauf-schritt:not(:last-child)::after { left: 3.4rem; right: -1.1rem; top: calc(1.5rem - .5px); bottom: auto; width: auto; height: 1px; }
}
.fakten { display: grid; gap: 1.75rem; margin: var(--r-5) 0; container-type: inline-size; }
.fakt { padding-top: 1.1rem; border-top: 2px solid var(--c-schiefer); }
.fakt strong { display: block; font: 600 var(--t-zahl)/1 var(--f-serif); color: var(--c-schiefer); letter-spacing: -.02em; white-space: nowrap; }
@supports (width: 1cqi) { .fakt strong { font-size: clamp(1.5rem, .9rem + 1.8cqi, 2.75rem); } }
.fakt span { display: block; margin-top: .6rem; color: var(--c-text); }
.fakt small { display: block; margin-top: .6rem; font-size: .875rem; color: var(--c-text-soft); }
.fakt small a { color: inherit; }
@media (min-width: 900px) { .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; } .fakt + .fakt { border-left: 1px solid var(--c-linie); padding-left: 2rem; margin-left: -1rem; } }

/* ==================== 11. FAQ ==================== */
.faq { margin-top: var(--r-6); }
.faq h2 { margin-top: 0; margin-bottom: 1rem; }
.faq details, .wp-block-details { border-top: 1px solid var(--c-linie-stark); margin: 0; padding: 0; }
.faq details:last-of-type, .inhalt > .wp-block-details:last-of-type { border-bottom: 1px solid var(--c-linie-stark); }
.faq summary, .wp-block-details summary { position: relative; cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 0; min-height: 3rem; font: 600 clamp(1.125rem, 1.05rem + .4vw, 1.3rem)/1.4 var(--f-serif); color: var(--c-schiefer); letter-spacing: -.005em; }
.faq summary::-webkit-details-marker, .wp-block-details summary::-webkit-details-marker { display: none; }
.faq summary:hover, .wp-block-details summary:hover { color: var(--c-kupfer-dunkel); }
.faq summary::before, .wp-block-details summary::before { content: ""; position: absolute; right: 0; top: 1.05rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--c-kupfer); background: linear-gradient(var(--c-kupfer), var(--c-kupfer)) center / .75rem 1.5px no-repeat; }
.faq summary::after, .wp-block-details summary::after { content: ""; position: absolute; right: calc(.875rem - 1px); top: 1.55rem; width: 1.5px; height: .75rem; background: var(--c-kupfer); transition: transform var(--dauer) var(--kurve); }
.faq details[open] summary::after, .wp-block-details[open] summary::after { transform: rotate(90deg); }
.faq details > :not(summary), .wp-block-details > :not(summary) { padding-right: 3rem; }
.faq details p, .wp-block-details p { margin: 0 0 1rem; }
.faq details[open] > :not(summary):last-child { padding-bottom: .25rem; }

/* ==================== 12. Zwischen-CTA, CTA-Band ==================== */
.cta-zwischen { position: relative; display: grid; gap: 1.25rem; align-items: center; background: var(--c-sand); border-radius: var(--radius-gross); padding: 1.5rem 1.5rem 1.5rem 1.75rem; margin: var(--r-6) 0; }
.cta-zwischen p { margin: 0; font-size: var(--t-klein); color: var(--c-text); max-width: 60ch; }
.cta-zwischen .btn { justify-self: start; }
@media (min-width: 768px) { .cta-zwischen { padding: 1.75rem 2rem 1.75rem 2.25rem; gap: 1.5rem; } }
.cta-band { position: relative; background: var(--c-schiefer); color: var(--c-papier); padding-block: var(--raum); overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60rem 30rem at 90% 120%, rgba(217, 160, 106, .22), transparent 62%); pointer-events: none; }
.cta-band-inhalt { position: relative; display: grid; gap: 2rem; align-items: center; }
.cta-band h2 { color: var(--c-papier); margin: 0 0 .75rem; max-width: 20ch; }
.cta-band p { color: rgba(247, 244, 238, .86); max-width: 58ch; margin: 0; }
.cta-band-aktionen { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.cta-band .btn-primaer { background: var(--c-kupfer-hell); border-color: var(--c-kupfer-hell); color: var(--c-schiefer-dunkel); }
.cta-band .btn-primaer:hover { background: var(--c-papier); border-color: var(--c-papier); color: var(--c-schiefer-dunkel); }
.cta-band-telefon { color: var(--c-papier); font-weight: 600; text-decoration-color: rgba(247, 244, 238, .4); }
.cta-band-telefon:hover { color: var(--c-kupfer-hell); }
@media (min-width: 900px) { .cta-band-inhalt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; } .cta-band-aktionen { justify-self: end; align-items: flex-end; text-align: right; } }

/* ==================== 13. Formulare: Kontakt und Funnel ==================== */
.formular, .funnel { position: relative; background: var(--c-weiss); border: 1px solid var(--c-linie); border-radius: var(--radius-gross); padding: 1.5rem; box-shadow: var(--schatten-1); }
.formular { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .formular { grid-template-columns: 1fr 1fr; padding: 2rem; column-gap: 1.5rem; } .formular .feld-breit, .formular .feld-check, .formular .formular-aktion, .formular fieldset, .formular .fehler[role="alert"] { grid-column: 1 / -1; } .funnel { padding: 2rem 2.25rem; } }
.feld label, .feld legend { display: block; font-weight: 600; font-size: 1rem; line-height: 1.4; margin-bottom: .4rem; color: var(--c-schiefer); }
.feld label span { font-weight: 400; color: var(--c-text-soft); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; font-size: 1.0625rem; padding: .8rem .95rem; border: 1.5px solid var(--c-rand); border-radius: var(--radius); background: var(--c-weiss); color: var(--c-text); min-height: 3.25rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--c-schiefer); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { border-color: var(--c-schiefer); outline-offset: 1px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--c-text-soft); opacity: .8; }
.feld select { appearance: none; padding-right: 2.75rem; background: var(--c-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3944' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9rem center / 1.1rem no-repeat; }
.feld textarea { min-height: 8rem; resize: vertical; }
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--c-fehler); background-color: var(--c-fehler-flaeche); }
.fehler { display: flex; gap: .5rem; align-items: flex-start; color: var(--c-fehler); font-size: var(--t-klein); font-weight: 600; line-height: 1.45; margin: .45rem 0 0; }
.fehler::before { content: "!"; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--c-fehler); color: #fff; font: 700 .8rem/1.25rem var(--f-sans); text-align: center; margin-top: .1em; }
.fehler[role="alert"] { background: var(--c-fehler-flaeche); border: 1px solid rgba(163, 45, 45, .3); border-radius: var(--radius); padding: .75rem 1rem; margin: 0 0 1.25rem; }
.feld-check { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--t-klein); line-height: 1.5; }
.feld-check input { margin: .15rem 0 0; width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--c-kupfer); cursor: pointer; }
.feld-check label { font-weight: 400; font-size: inherit; margin: 0; color: var(--c-text); cursor: pointer; }
.feld-fehler.feld-check label { color: var(--c-fehler); }
.feld-fehler.feld-check input { outline: 2px solid var(--c-fehler); outline-offset: 1px; border-radius: 2px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-aktion { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hinweis-klein { font-size: var(--t-klein); color: var(--c-text-soft); }
.datenhinweis { font-size: var(--t-klein); color: var(--c-text); background: var(--c-sand); padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; border-left: 3px solid var(--c-kupfer); margin: .5rem 0 1.5rem; }
/* Funnel: ein Schritt pro Bildschirm mit JS, ohne JS alle Schritte untereinander */
.funnel fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; min-width: 0; }
.funnel fieldset:last-of-type { margin-bottom: 0; }
.funnel legend { font: 600 var(--t-legend)/1.2 var(--f-serif); color: var(--c-schiefer); letter-spacing: -.012em; margin: 0 0 1rem; padding: 0; text-wrap: balance; }
.funnel .schritt-hilfe { color: var(--c-text-soft); font-size: var(--t-klein); margin: -.25rem 0 1.25rem; }
.funnel .feld { margin-bottom: 0; }
.funnel fieldset > .feld + .feld, .funnel fieldset > .optionen + .feld, .funnel fieldset > .fehler + .feld, .funnel fieldset > .feld-reihe + .feld { margin-top: 1.25rem; }
.js .funnel fieldset:not(.aktiv) { display: none; }
.js .funnel fieldset.aktiv { margin-bottom: 0; }
.no-js .funnel fieldset + fieldset { border-top: 1px solid var(--c-linie); padding-top: 2rem; }
.no-js .schritt-nav { display: none; }
.fortschritt { margin-bottom: 1.75rem; }
.fortschritt-text { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); margin-bottom: .6rem; }
.fortschritt-text [data-fortschritt-prozent] { color: var(--c-kupfer-dunkel); }
.fortschritt-balken { height: 8px; background: var(--c-sand); border-radius: 4px; overflow: hidden; }
.fortschritt-balken i { display: block; height: 100%; width: 0; min-width: 4%; background: var(--c-kupfer); border-radius: 4px; }
.optionen { display: grid; gap: .75rem; }
@media (min-width: 640px) { .optionen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .optionen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.option { position: relative; display: flex; align-items: center; gap: .9rem; border: 1.5px solid var(--c-linie-stark); border-radius: var(--radius-gross); padding: .85rem 1.1rem; cursor: pointer; background: var(--c-weiss); min-height: 3.5rem; color: var(--c-text); line-height: 1.35; transition: transform var(--dauer) var(--kurve); -webkit-tap-highlight-color: transparent; }
.option:hover { border-color: var(--c-schiefer); }
.option:active { transform: scale(.985); }
.option input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--c-kupfer); cursor: pointer; }
.option input:focus-visible { outline: none; }
.option:has(input:focus-visible) { outline: 3px solid var(--c-kupfer); outline-offset: 2px; }
.option:has(input:checked) { border-color: var(--c-kupfer); background: var(--c-kupfer-flaeche); box-shadow: inset 0 0 0 1px var(--c-kupfer); color: var(--c-schiefer); }
.option small { display: block; color: var(--c-text-soft); font-size: var(--t-klein); }
.funnel fieldset.feld-fehler .option { border-color: var(--c-fehler); }
.feld-reihe { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feld-reihe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.funnel-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-linie); }
.funnel-nav .btn-primaer { margin-left: auto; }
.funnel-nav .btn-zurueck { border-color: var(--c-linie-stark); }
.funnel-nav .btn-zurueck:hover { border-color: var(--c-schiefer); }
.js .funnel-nav [data-nur-ohne-js] { display: none; }
.fehler-schritt { margin-bottom: 1rem; }
.renovation-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: .75rem; align-items: stretch; }
.renovation-zeile .feld { margin: 0; display: block; }
.renovation-zeile input[type="number"] { min-height: 3.5rem; width: 100%; }
.bewertung-raster { display: grid; gap: 2.5rem; }
.bewertung-text { max-width: var(--breite-schmal); }
@media (min-width: 1024px) { .bewertung-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } .bewertung-formular { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); } }

/* ==================== 14. Fuss ==================== */
.fuss { background: var(--c-schiefer-dunkel); color: rgba(247, 244, 238, .82); padding: var(--raum) 0 1.5rem; font-size: var(--t-klein); line-height: 1.6; }
.fuss a { color: var(--c-papier); text-decoration-color: rgba(247, 244, 238, .35); }
.fuss a:hover { color: var(--c-kupfer-hell); text-decoration-color: currentColor; }
.fuss-raster { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 640px) { .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss-raster > :first-child { grid-column: 1 / -1; max-width: 60ch; } }
@media (min-width: 1024px) { .fuss-raster { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; } .fuss-raster > :first-child { grid-column: auto; max-width: none; } }
.fuss .wortmarke-hell { display: block; color: var(--c-papier); margin: 0 0 1rem; }
.fuss-titel { font: 600 var(--t-label)/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-kupfer-hell); margin: 0 0 .75rem; }
.fuss-liste a { display: inline-block; padding: .55rem 0; text-decoration: none; }
.fuss-liste a:hover { text-decoration: underline; }
.nap { line-height: 1.8; margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(247, 244, 238, .15); }
.fuss-unten { border-top: 1px solid rgba(247, 244, 238, .15); margin-top: 3rem; padding-top: 1.5rem; font-size: .875rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; color: rgba(247, 244, 238, .7); }
.fuss-unten p { margin: 0; max-width: 70ch; }

/* ==================== 15. Mobile Leiste, Druck ==================== */
.mobil-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0px)); background: var(--c-papier); border-top: 1px solid var(--c-linie); box-shadow: 0 -6px 24px rgba(18, 40, 48, .08); }
.mobil-leiste .btn { min-height: 3rem; padding-inline: 1rem; white-space: nowrap; font-size: clamp(.875rem, .75rem + .6vw, 1rem); }
@media (min-width: 768px) { .mobil-leiste { display: none; } }
body.typ-bewertung .mobil-leiste { display: none; }
@media print { .kopf, .mobil-leiste, .cta-band, .skip-link, .hero-cta, .cta-zwischen { display: none !important; } body { padding: 0; background: #fff; color: #000; } .hero { background: none; border: 0; } a { color: inherit; } }

/* Claim im Fuss (Andy, 26.09.2026) */
.fuss .claim { font-family: var(--f-serif); font-size: 1.05rem; color: var(--c-papier); margin: -.25rem 0 1rem; }
.mobil-leiste { grid-template-columns: 1fr; }

/* Bilder aus assets/img (26.09.2026) */
.bild { margin: 1.5rem 0; }
.bild img { display: block; width: 100%; height: auto; border-radius: 6px; }
.bild figcaption { font-size: .9rem; color: var(--c-text-soft); margin-top: .5rem; }
.bild.portraet { max-width: 20rem; }
@media (min-width: 768px) { .bild.portraet { float: right; margin: 0 0 1rem 2rem; } }
.hero-bild picture, .hero-bild img { display: block; width: 100%; height: auto; }
.hero-bild img { border-radius: var(--radius-gross); }

/* Karten- und Ratgeberbilder (26.09.2026) */
.karte-mit-bild { padding-top: 0; overflow: hidden; }
.karte-bild { display: block; width: calc(100% + 3rem); max-width: none; height: auto; margin: 0 -1.5rem 1rem; aspect-ratio: 3 / 2; object-fit: cover; }
.bild-ratgeber { margin: 0 0 2rem; }
.bild-ratgeber img { border-radius: 8px; }

/* Tabellen ohne Scrollen: unter 768 px stapeln sich die Zeilen als Blöcke, main.js schreibt die Spaltentitel in data-label (Andy, 26.09.2026) */
@media (max-width: 767px) {
	.inhalt table, .tabelle { display: block; width: 100%; font-size: var(--t-basis); }
	.marktdaten td, .marktdaten thead th:not(:first-child) { text-align: left; white-space: normal; }
	h1 { hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: anywhere; }
	.inhalt thead, .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }
	.inhalt tbody, .tabelle tbody, .inhalt tr, .tabelle tr { display: block; }
	.inhalt tr, .tabelle tr { background: #fff; border: 1px solid var(--c-linie); border-radius: 6px; padding: .6rem .9rem; margin-bottom: .75rem; }
	.inhalt th, .inhalt td, .tabelle th, .tabelle td { display: block; border: 0; padding: .35rem 0; }
	.inhalt tbody th, .tabelle tbody th { font-family: var(--f-serif); font-size: 1.1rem; color: var(--c-schiefer); border-bottom: 1px solid var(--c-linie); padding-bottom: .5rem; margin-bottom: .25rem; }
	.inhalt td[data-label], .tabelle td[data-label] { display: grid; grid-template-columns: minmax(8rem, 42%) 1fr; gap: .75rem; align-items: start; }
	.inhalt td[data-label]::before, .tabelle td[data-label]::before { content: attr(data-label); font-weight: 600; font-size: .85rem; hyphens: auto; hyphenate-limit-chars: 10 4 4; color: var(--c-text-soft); line-height: 1.5; text-align: left; }
	.inhalt tbody tr:last-child > *, .tabelle tbody tr:last-child > * { border-bottom-color: transparent; }
	.tabelle caption { padding-bottom: .75rem; }
}
.ki-hinweis { border-top: 0; margin-top: .75rem; padding-top: 0; font-size: .85rem; }

/* Neu erschienen (Startseite): kompakte Liste, damit jeder neue Ratgeber sofort verlinkt ist */
.ratgeber-neu { list-style: none; margin: 0 0 var(--r-5); padding: 0; border-top: 1px solid var(--c-linie); }
.ratgeber-neu li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--c-linie); }
.ratgeber-neu time { flex: 0 0 6rem; font-size: .9rem; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.ratgeber-neu a { flex: 1 1 14rem; text-decoration: none; }
.ratgeber-neu a:hover, .ratgeber-neu a:focus-visible { text-decoration: underline; }