/* corduladamm.de – Gestaltung nach Claude-Design-Prototyp v3 */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/jost-300.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/jost-400.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/jost-500.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/jost-700.woff2) format("woff2"); }

:root {
  --orange: #E36C0A;
  --orange-dark: #B4530A;
  /* gedeckter Ton für große Flächen (Einstieg, Zitatbänder, Artikelköpfe) – Markenorange wirkte dort zu grell (Kundin, 10.10.2026) */
  --orange-soft: #DB7633;
  /* Braun des Logo-Schriftzugs – im gelben Bereich für Tagline, Namenszeile und Link-Unterstriche (weniger Farben, Kundin 10.10.2026) */
  --brown: #985024;
  --blue: #004678;
  --petrol: #6CA2AE;
  --lightblue: #BCD0E2;
  --offwhite: #F9FAFD;
  --yellow: #F5CB45;
  --grey-text: #3d4a52;
  --grey-line: #69727d;
  --err: #A1260D;
  --err-bg: #FBEDEA;
  --ok: #2E7D32;
  --ok-bg: #EEF6EE;

  /* Bereich Business (Standard) */
  --band: var(--orange-soft);
  --band-ink: #FFFFFF;
  --tile: var(--lightblue);
  --accent: var(--orange);
  --accent-ink: #FFFFFF;
  --accent-hover: var(--yellow);

  --fs-body: clamp(18px, 1.1vw + 8px, 23px);
  --fs-h1: clamp(28px, 2.6vw + 8px, 50px);
  --fs-h2: clamp(25px, 2.6vw + 8px, 50px);
}
.area-privat {
  --band: var(--yellow);
  --band-ink: #000000;
  --tile: rgba(245, 203, 69, 0.81);
  --accent-hover: var(--orange-dark);
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (max-width: 1099px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-link img, .tagline, .tagline > *, [data-anim] { animation: none !important; opacity: 1 !important; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #000; font-family: "Jost", sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
main { flex: 1; }
img { max-width: 100%; }
a { color: var(--orange); font-weight: 500; text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
summary::-webkit-details-marker { display: none; }
li::marker { color: #000; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 100px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff; padding: 12px 20px; z-index: 200; }
.skip:focus { left: 10px; top: 10px; color: #fff; }

/* ---------- Kopfbereich ---------- */
.site-header { position: sticky; top: 0; z-index: 95; background: #fff; min-height: 100px; padding: 0 5%; display: flex; flex-direction: column; justify-content: center; box-shadow: 1px 0 30px 0 rgba(0, 0, 0, 0.2); }
.nav-desktop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 30px; row-gap: 4px; }
.nav-mobile { display: none; flex-direction: column; }
@media (max-width: 1099px) {
  .site-header { min-height: 70px; }
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
}
.nav-link { font-family: inherit; color: var(--orange); font-size: 23px; font-weight: 400; line-height: 1.5; padding: 5px 0; text-decoration: none; background: transparent; border: 0; border-bottom: 1px solid transparent; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.nav-link.active { border-bottom-color: var(--petrol); }
.nav-link:hover { color: var(--blue); border-bottom-color: var(--petrol); text-decoration: none; }
.caret { font-size: 13px; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: -24px; margin: 8px 0 0; padding: 10px 0; list-style: none; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); min-width: 360px; z-index: 100; }
.dropdown-menu a { display: block; padding: 10px 24px; color: var(--orange); font-size: 20px; font-weight: 400; line-height: 1.3; text-decoration: none; }
.dropdown-menu a.current { background: var(--offwhite); }
.dropdown-menu a:hover { background: var(--offwhite); color: var(--blue); text-decoration: none; }
.nav-sep { width: 1px; height: 30px; background: var(--petrol); display: block; margin-left: 6px; }
.switch { color: var(--blue); font-size: 18px; font-weight: 500; line-height: 1.2; padding: 10px 16px; border: 1px solid var(--petrol); border-radius: 3px; text-decoration: none; white-space: nowrap; }
.switch:hover { background: var(--offwhite); color: var(--blue); text-decoration: none; }
.nav-desktop .en { color: var(--blue); font-size: 16px; font-weight: 500; line-height: 1.2; padding: 10px 4px; }
.nav-desktop .en:hover { color: var(--orange); text-decoration: underline; }

.nav-mobile .bar { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-mobile .switch { font-size: 16px; padding: 12px 14px; }
.burger { width: 48px; height: 48px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 22px; height: 2px; background: var(--blue); }
.mobile-menu { display: flex; flex-direction: column; background: rgba(188, 208, 226, 0.25); margin: 0 -5.556%; padding: 6px 0 12px; }
.mobile-menu a { color: #000; font-size: 18px; font-weight: 400; line-height: 1.2; padding: 14px 20px; text-decoration: none; }
.mobile-menu a.strong { font-weight: 700; }
.mobile-menu a.sub { padding-left: 40px; }
.mobile-menu a.en { color: var(--blue); font-weight: 500; }
.mobile-menu a:hover { background: var(--offwhite); text-decoration: none; }

/* ---------- Logo und Tagline im Einstieg der Startseiten ---------- */
.logo-link img { width: 100%; height: auto; display: block; animation: zoomIn 1.5s ease 0.3s both; }
.tagline { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; color: #fff; font-size: clamp(30px, 2.2vw + 8px, 40px); font-weight: 300; line-height: 1.2; text-align: center; }
/* Einblenden wie auf der alten Seite (Elementor): Wörter der Tagline nacheinander von unten, Logo zoomt auf */
.tagline > * { animation: fadeInUp 1.25s ease 0.6s both; }
.tagline > :nth-child(2) { animation-delay: 0.7s; }
.tagline > :nth-child(3) { animation-delay: 0.8s; }
.tagline > :nth-child(4) { animation-delay: 0.9s; }
.tagline > :nth-child(5) { animation-delay: 1s; }
.area-privat .tagline { animation: fadeInUp 1.25s ease 0.6s both; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }

/* Scroll-Animationen (wie auf der alten Seite). Versteckt wird nur, wenn das Skript im <head> die Klasse
   .anim gesetzt hat – ohne JavaScript oder bei „Bewegung reduzieren“ ist alles sofort sichtbar.
   site.js setzt .is-in, sobald ein Element ins Bild scrollt. */
.anim [data-anim]:not(.is-in) { opacity: 0; }
.anim [data-anim].is-in { animation: 2s ease both; }
.anim [data-anim="fadeIn"].is-in { animation-name: fadeIn; }
.anim [data-anim="zoomIn"].is-in { animation-name: zoomIn; animation-delay: 0.4s; }
.anim [data-anim="riseIn"].is-in { animation-name: riseIn; animation-duration: 1.4s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
.anim .offer-card:nth-child(1) { animation-delay: 0s; }
.anim .offer-card:nth-child(2) { animation-delay: 0.35s; }
.anim .offer-card:nth-child(3) { animation-delay: 0.7s; }
.anim .offer-card:nth-child(4) { animation-delay: 1.05s; }
.anim .offer-card:nth-child(5) { animation-delay: 1.4s; }

@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
.tdot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: block; }

/* ---------- Startseiten: Einstieg aus zwei Kacheln – links farbig (Orange bzw. Gelb) mit Logo, rechts weiß ---------- */
.logo-hero { display: flex; min-height: calc(100vh - var(--head, 100px)); }
.logo-hero > .logo-hero-brand { flex: 1 1 0; background: var(--band); display: flex; align-items: center; justify-content: center; padding: 6% 5%; }
.brand-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.logo-hero .logo-link { display: block; width: 360px; max-width: 100%; }
.logo-hero .tagline { font-size: clamp(20px, 1vw + 8px, 26px); gap: 12px; flex-wrap: nowrap; white-space: nowrap; }
.area-privat .logo-hero .tagline { flex-wrap: wrap; white-space: normal; color: var(--brown); }
.logo-hero > .cell-text { flex: 2 1 0; padding: 4% 7%; }
/* Desktop: Die Farbe füllt zuerst den ganzen Bildschirm, das Logo erscheint; sobald es da ist, schiebt sich
   die Textkachel von rechts herein und drückt die Farbe auf ein Drittel (die Höhe bleibt gleich).
   Flüssig, weil nur verschoben und gestreckt wird (transform) – die Kacheln haben von Anfang an ihre
   Endbreite: Die Farbfläche (::before) ist dreifach gestreckt, Logo und Textkachel sind nach rechts
   verschoben. Alle drei laufen im Gleichschritt, damit keine Lücke entsteht.
   Beim Scrollen läuft die Bewegung im gleichen ruhigen Tempo weiter. Ohne Bewegungswunsch: gleich der Endzustand. */
@media (min-width: 920px) and (prefers-reduced-motion: no-preference) {
  .logo-hero { position: relative; overflow: hidden; }
  .logo-hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 33.333%; background: var(--band); transform-origin: left center; animation: heroBandShrink 2.2s cubic-bezier(0.45, 0, 0.2, 1) 1.8s both; }
  .logo-hero > .logo-hero-brand { flex: 0 0 33.333%; padding: 0; position: relative; }
  .brand-inner { width: 100%; padding: 6% 15%; animation: heroBrandSlide 2.2s cubic-bezier(0.45, 0, 0.2, 1) 1.8s both; }
  .logo-hero > .cell-text { flex: 0 0 66.667%; position: relative; animation: heroTextSlide 2.2s cubic-bezier(0.45, 0, 0.2, 1) 1.8s both; }
}
@media (max-width: 1099px) { .logo-hero { --head: 70px; } }
@keyframes heroBandShrink { from { transform: scaleX(3); } }
@keyframes heroBrandSlide { from { transform: translateX(100%); } }
@keyframes heroTextSlide { from { transform: translateX(100%); } }
.kicker { margin: 0 0 12px; color: #000; font-size: clamp(17px, 0.4vw + 14px, 21px); font-weight: 500; line-height: 1.4; }
.area-privat .kicker { color: var(--brown); }

/* ---------- Startseiten: Angebote als Kacheln ---------- */
.offers { padding: 5% 6%; background: rgba(188, 208, 226, 0.25); display: flex; flex-direction: column; gap: 30px; }
.offers .t { margin: 0; text-align: center; }
.offers-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.offer-card { flex: 1 1 200px; min-width: 0; max-width: 280px; background: #fff; display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; }
.offer-img { background: var(--tile); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.offer-img img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.offer-card h3, .offer-card p, .offer-card .btn-link { margin: 0 20px; }
.offer-card h3 { hyphens: auto; overflow-wrap: break-word; color: var(--orange); font-size: clamp(21px, 0.6vw + 16px, 26px); font-weight: 400; line-height: 1.25; }
.offer-card p { font-size: 18px; line-height: 1.5; flex: 1; }
.offer-card .btn-link { font-size: 18px; align-self: flex-start; }
/* Lebens- und Paarberatung: zwei breitere Kacheln, heller Gelbton */
.area-privat .offers { background: rgba(245, 203, 69, 0.15); }
.area-privat .offer-card { flex-basis: 300px; max-width: 420px; }
@media (max-width: 619.98px) { .offer-card, .area-privat .offer-card { max-width: none; flex-basis: 100%; } }

/* ---------- Überschriften & Text ---------- */
.t { margin: 0 0 20px; color: var(--orange); font-weight: 400; line-height: 1.2; text-wrap: balance; }
h1.t { font-size: var(--fs-h1); }
h2.t { font-size: var(--fs-h2); }
.copy { font-size: var(--fs-body); line-height: 1.5; color: #000; text-wrap: pretty; }
.copy h3 { margin: 0.4em 0 0.3em; font-size: inherit; font-weight: 700; line-height: 1.3; }
.copy p { margin: 0 0 0.9em; }
.copy ul { margin: 0 0 0.9em; padding-left: 1.3em; }
.copy ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.copy li { margin: 0 0 0.2em; }
.lead { margin: 0; font-size: var(--fs-body); line-height: 1.5; max-width: 900px; }

/* ---------- Buttons ---------- */
.ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; padding-top: 16px; }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-body); font-weight: 700; line-height: 1.2; padding: 12px 24px; border-radius: 3px; text-decoration: none; text-align: center; }
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); text-decoration: none; }
.btn-teaser:hover { opacity: 0.9; }
.btn-link { color: var(--orange); font-size: var(--fs-body); font-weight: 500; line-height: 1.2; padding: 10px 0; border-bottom: 1px solid var(--petrol); text-decoration: none; }
.btn-link:hover { color: var(--blue); text-decoration: none; }
.area-privat .btn-link { border-bottom-color: var(--brown); }
.btn-white { display: inline-block; background: #fff; color: #000; font-size: var(--fs-body); font-weight: 700; line-height: 1.2; padding: 14px 26px; border-radius: 3px; text-decoration: none; text-align: center; }
.btn-white:hover { background: var(--offwhite); color: var(--blue); text-decoration: none; }

/* ---------- Zweispaltige Zeilen ---------- */
.row { display: flex; }
.cell { flex: 1 1 460px; min-width: 0; }
/* Handy/Tablet: Kacheln untereinander; .m-first/.m-last sorgen dafür, dass Bild und Text abwechseln */
@media (max-width: 919.98px) {
  .row { flex-direction: column; }
  .row > .cell { flex: 0 0 auto; }
  .row > .m-first { order: -1; }
  .row > .m-last { order: 1; }
  .row.m-recolor > .cell-text { background: var(--tile); }
  .row.m-recolor > .cell-text.tile { background: #fff; }
  .logo-hero { flex-direction: column; min-height: 0; }
  .logo-hero > .cell { flex: 0 0 auto; }
  .logo-hero-brand { padding: 40px 6%; }
  .logo-hero .logo-link { width: 240px; }
  .logo-hero .tagline { flex-wrap: wrap; white-space: normal; }
}
.cell-text { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 6% 8%; }
.tile { background: var(--tile); }
/* Zwei Angebote nebeneinander: Inhalt oben, Buttons auf gleicher Höhe unten */
.row-ctas-bottom > .cell-text { justify-content: flex-start; }
.row-ctas-bottom .ctas { margin-top: auto; }
.row.has-img { min-height: 75vh; }
.row.has-img .cell-text { min-height: 75vh; padding: 7%; }
.cell-img { min-height: 75vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cell-img img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.cell-img img.contain { display: block; width: auto; max-width: 100%; height: auto; padding: 10%; }

/* ---------- Zitat-Bänder ---------- */
.band { background: var(--band); min-height: 50vh; padding: 5% 0; display: flex; align-items: center; justify-content: center; }
.band-inner { width: 80%; color: var(--band-ink); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.band figure { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.band blockquote { margin: 0; font-size: clamp(25px, 2.4vw + 10px, 45px); line-height: 1.5; text-wrap: balance; }
.band figcaption { font-size: clamp(17px, 0.6vw + 12px, 22px); font-weight: 500; }
.band h2 { margin: 0; font-size: clamp(25px, 2.4vw + 10px, 45px); font-weight: 400; line-height: 1.3; text-wrap: balance; }

/* ---------- Stimmen ---------- */
.stimmen { background: var(--lightblue); padding: 6% 10%; display: flex; flex-direction: column; gap: 36px; }
.stimmen .t { margin: 0; }
.stimmen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 30px; }
.stimmen figure { margin: 0; background: #fff; padding: 36px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.qmark { color: var(--orange); font-size: 80px; line-height: 0.5; height: 30px; font-family: Georgia, serif; }
.stimmen blockquote { margin: 0; flex: 1; font-size: clamp(17px, 0.7vw + 11px, 21px); line-height: 1.55; color: #000; text-wrap: pretty; }
.stimmen figcaption { font-size: clamp(16px, 0.5vw + 12px, 19px); font-weight: 700; line-height: 1.3; color: #000; }

/* ---------- Akkordeons (FAQ, Module) ---------- */
.faq, .modules { padding: 6% 10%; display: flex; flex-direction: column; gap: 24px; background: #fff; }
.modules { background: rgba(188, 208, 226, 0.25); }
.faq .t, .modules .t { margin: 0; }
.faq-list { display: flex; flex-direction: column; max-width: 1100px; }
.faq details, .modules details { border-top: 1px solid var(--petrol); padding: 4px 0; }
.faq summary, .modules summary { cursor: pointer; list-style: none; padding: 18px 0; display: flex; align-items: baseline; gap: 20px; }
.faq summary .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); display: block; align-self: center; }
.modules summary .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); display: block; align-self: center; }
.faq summary h3 { margin: 0; font-size: clamp(19px, 1vw + 10px, 25px); font-weight: 400; line-height: 1.35; color: #000; }
.modules summary h3 { margin: 0; font-size: clamp(20px, 1.4vw + 8px, 30px); font-weight: 400; line-height: 1.3; color: #000; }
.faq details > p { margin: 0; padding: 0 0 22px 34px; font-size: clamp(17px, 0.8vw + 9px, 21px); line-height: 1.55; color: #000; max-width: 900px; }
.module-body { padding: 0 0 24px 38px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 48px; font-size: clamp(17px, 0.8vw + 9px, 21px); line-height: 1.5; }
.module-body > div { display: flex; flex-direction: column; gap: 6px; }
.module-body p { margin: 0; }
.module-body p.ziel { margin: 0 0 10px; }
.module-body h4 { margin: 0; font-size: inherit; font-weight: 700; }
.module-body ul { margin: 0; padding-left: 1.3em; }

/* ---------- Impulse-Karten ---------- */
.cards { padding: 5% 10%; display: flex; flex-direction: column; gap: 30px; }
.cards .t { margin: 0; }
.cards .more { display: flex; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 36px 30px; }
.cards article { display: flex; flex-direction: column; gap: 12px; }
.thumb { display: block; aspect-ratio: 3 / 2; background: var(--lightblue); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cards .meta { margin: 0; font-size: 15px; color: var(--blue); }
.card-title { margin: 0; font-size: 23px; font-weight: 500; line-height: 1.3; }
.card-title a { color: #000; text-decoration: none; }
.card-title a:hover { color: var(--orange); text-decoration: none; }
.excerpt { margin: 0; font-size: 18px; line-height: 1.5; color: #000; }

/* ---------- Artikel & Rechtstexte (HTML aus WordPress) ---------- */
.article { display: flex; flex-direction: column; }
.article-head { background: var(--orange-soft); padding: 5% 10%; display: flex; flex-direction: column; gap: 16px; }
.article-head p { margin: 0; color: #fff; font-size: 18px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.article-head h1 { margin: 0; color: #fff; font-size: var(--fs-h1); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.article-body { padding: 5% 10%; font-size: var(--fs-body); line-height: 1.5; color: #000; max-width: 1400px; }
.article-nav { background: var(--lightblue); padding: 4% 10%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: var(--fs-body); }
.article-nav a { color: #000; font-weight: 400; }
.article-nav a.strong { font-weight: 500; }
.legal { padding: 5% 10%; font-size: clamp(16px, 0.6vw + 10px, 18px); line-height: 1.6; color: #000; max-width: 1400px; }
.legal > .t { margin: 0 0 24px; }
.rich h1, .rich h2 { color: var(--orange); font-size: clamp(22px, 1.6vw + 8px, 36px); font-weight: 400; line-height: 1.2; margin: 1.2em 0 0.5em; }
.rich > :is(h1, h2):first-child { margin-top: 0; }
.rich h3 { font-size: 1.05em; font-weight: 700; margin: 1em 0 0.4em; }
.rich img { max-width: 100%; height: auto; display: block; }
.rich figure { margin: 20px 0; }
.rich .row { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin: 0 0 30px; }
.rich .row > * { flex: 1 1 340px; min-width: 0; }
.rich .btn { display: inline-block; background: var(--orange); color: #fff; padding: 12px 24px; border-radius: 3px; font-weight: 700; text-decoration: none; }
.rich p { margin: 0 0 0.9em; }
.rich a { overflow-wrap: anywhere; }
/* Liste mit orangen Kreisen (wie im blauen Angebotskasten): <ul class="punkte"> */
.rich ul.punkte { list-style: none; padding-left: 0; }
.rich ul.punkte li { position: relative; padding-left: 34px; margin: 0 0 0.5em; }
.rich ul.punkte li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }

/* ---------- Kontakt-Teaser ---------- */
.kontakt-teaser { padding: 5%; display: flex; justify-content: center; }
.kontakt-teaser > div { width: 80%; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.kontakt-teaser img, .form-side img { width: 300px; max-width: 100%; height: auto; display: block; }
.kontakt-teaser .t { margin: 0; }
.kontakt-teaser .lead { max-width: 1000px; }

/* ---------- Kontaktformular ---------- */
.form-section { display: flex; flex-wrap: wrap; min-height: 75vh; }
.form-col { flex: 1.4 1 520px; min-width: 0; padding: 6% 8%; display: flex; flex-direction: column; gap: 16px; }
.form-col .t { margin: 0; }
.form-col > .lead { margin: 0 0 8px; }
.kontakt-form { display: flex; flex-wrap: wrap; gap: 18px 20px; font-family: inherit; }
.kontakt-form .note { margin: 0; flex: 1 1 100%; font-size: 16px; line-height: 1.5; }
.kontakt-form .full { flex: 1 1 100%; }
.field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 18px; font-weight: 500; }
.field input, .field select, .field textarea { font-family: inherit; font-size: 18px; padding: 10px 14px; border: 1px solid var(--grey-line); border-radius: 3px; background: #fff; min-height: 48px; color: #000; }
.field textarea { resize: vertical; }
.field .invalid { border: 2px solid var(--err); }
.field .hint { margin: 0; font-size: 16px; color: var(--grey-text); }
.field .err { margin: 0; color: var(--err); font-size: 16px; font-weight: 500; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { flex: 0 1 auto; font-family: inherit; padding: 12px 28px; border: 0; cursor: pointer; min-height: 48px; }
.btn-submit[disabled] { opacity: 0.6; cursor: wait; }
.msg-ok, .msg-err { margin: 0; padding: 14px 16px; font-size: 18px; line-height: 1.5; }
.msg-ok { border-left: 6px solid var(--ok); background: var(--ok-bg); }
.msg-err { border-left: 6px solid var(--err); background: var(--err-bg); }
.msg-invalid { margin: 0; font-size: 18px; color: var(--err); font-weight: 500; }
.form-side { flex: 1 1 380px; min-width: 0; padding: 6% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.form-side .btn-white { font-size: clamp(18px, 1vw + 8px, 21px); padding: 12px 22px; }
.form-side .btn-white:hover { background: #fff; }
.form-side .tel { margin: 0; font-size: var(--fs-body); }
.form-side .tel a { color: inherit; }

/* ---------- Fußbereich ---------- */
.site-footer { background: #fff; padding: 30px 0; }
.site-footer > div { width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer p { margin: 0; color: var(--orange); font-size: 15px; font-weight: 300; line-height: 1.5; }
.site-footer nav { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 15px; color: var(--orange); }
.site-footer nav a { font-weight: 300; }
.site-footer nav { align-items: center; }
.site-footer .social { display: inline-flex; margin-left: 10px; color: var(--orange); }
.site-footer .social:hover { color: var(--blue); }