/* ==========================================================
   Antonio Völkerling – Finanzberatung Nürnberg
   Aufbau nach Vorbild elektro-epilation.de, Farben nach Logo.
   Farben & Schriften zentral in :root anpassen.
   ========================================================== */

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face { font-family: "Heebo"; font-weight: 400; font-display: swap; src: url("fonts/heebo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 500; font-display: swap; src: url("fonts/heebo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 600; font-display: swap; src: url("fonts/heebo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Licorice"; font-weight: 400; font-display: swap; src: url("fonts/licorice-latin-400-normal.woff2") format("woff2"); }

:root {
  --text: #292929;
  --heading: #5a5454;
  --muted-text: #6b6560;
  --white: #ffffff;
  --primary: #e4d9c4;      /* entspricht dem Salbeigrün der Vorlage */
  --muted: #f6f1e8;        /* entspricht dem hellen Mintton der Vorlage */
  --accent: #8a6a30;       /* Buttons (entspricht Magenta) */
  --accent-hover: #6f5525;
  --script: #856529;       /* Schreibschrift & Links – Kontrast ≥ 4,5:1 auf Weiß und Hellbeige */
  --nav-active: #856529;   /* aktiver Menüpunkt – Kontrast 5,4:1 auf Weiß */
  --dark: #262522;
  --line: rgba(118, 118, 118, .25);

  --f-head: "Heebo", "Segoe UI", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --f-script: "Licorice", "Brush Script MT", cursive;

  --wrap: 1200px;
  --header-h: 100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); }
/* Standard-Darstellung am Computer: 90 % (wie Browser-Zoom 90 %). Handy und Tablet bleiben bei 100 %, damit die Schrift lesbar bleibt. */
@media (min-width: 961px) { html { zoom: .9; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--text); font: 400 16px/1.75 var(--f-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--script); }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; color: var(--heading); line-height: 1.3; margin: 0 0 .6em; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.section { padding: 80px 0; }
.section--primary { background: var(--primary); }
.section--muted { background: var(--muted); }
.center { text-align: center; }
.lead { max-width: 820px; }
.center .lead { margin-left: auto; margin-right: auto; }
.script { font-family: var(--f-script); font-weight: 400; color: var(--script); font-size: 1.45em; line-height: 1; }
.small { font-size: .9rem; }

/* ---------- Buttons (Pill wie Vorlage) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 42px; padding: 0 30px; border-radius: 500px;
  background: var(--accent); color: var(--white); border: 0;
  font: 600 15px/1 var(--f-head); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--accent-hover); }
.btn--white { background: var(--white); color: #444; }
.btn--white:hover { background: var(--muted); }
.btn--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.btn--outline:hover { background: var(--accent); color: var(--white); }
.btn .arr { font-size: 1.15em; }
.btn-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header + Dropdown ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 0 rgba(0,0,0,.06); transition: transform .3s ease; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #222; }
.brand img { height: 52px; width: auto; }
.brand span { font: 500 15px/1.2 var(--f-head); letter-spacing: .26em; text-transform: uppercase; }
.nav { display: flex; align-items: center; height: 100%; }
.nav > li { list-style: none; position: relative; height: 100%; display: flex; align-items: center; }
.nav { margin: 0; padding: 0; }
.nav > li > a { display: flex; align-items: center; height: 100%; padding: 0 10px; color: #444; text-decoration: none; font: 400 15px var(--f-head); position: relative; } /* 15 statt 16 px: mehr Abstand zum Logo seit „Zusammenarbeit“ (Wunsch Antonio, 25.10.2026); Abstand 20 statt 30 px (padding 10 statt 15) */
.nav > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: transparent; }
.nav > li > a:hover, .nav > li.active > a { color: var(--nav-active); }
.nav > li.active > a::after { background: var(--nav-active); }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 240px; padding: 22px 26px;
  background: var(--white); box-shadow: 0 8px 30px rgba(0,0,0,.12);
  list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s;
}
.nav > li:hover .dropdown, .nav > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 6px 0; color: #666; text-decoration: none; font: 400 15px var(--f-head); }
.dropdown a:hover { color: var(--nav-active); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #333; margin: 6px 0; }

/* ---------- Startseiten-Hero ---------- */
.hero {
  position: relative; min-height: 560px; display: flex; align-items: center; color: var(--white);
  background: var(--dark);
}
.hero__mark { position: absolute; left: 13%; top: 50%; transform: translateY(-50%); width: min(320px, 28vw); height: auto; }
/* Porträt links im Bogenrahmen mit goldener Linie */
.hero__portrait { position: absolute; right: calc(50% + 50px); top: 50%; transform: translateY(-50%); width: min(360px, 28vw); }
.hero__portrait img { display: block; width: 100%; height: auto; border-radius: 999px 999px 6px 6px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.hero__portrait::before { content: ""; position: absolute; inset: -12px; border: 1px solid #e6c98f; border-radius: 999px 999px 10px 10px; opacity: .6; pointer-events: none; }
.hero .wrap { width: 100%; display: flex; justify-content: flex-end; }
.hero__content { width: 50%; padding: 60px 0; }
.hero h1 { color: var(--white); font-size: clamp(1.6rem, 2.4vw, 1.75rem); margin-bottom: .2em; }
.hero h1 .script { display: block; color: #e6c98f; font-size: 1.55em; margin: .15em 0 .1em; line-height: 1.15; }
.hero__claim { font: 600 clamp(1.3rem, 2.3vw, 1.75rem)/1.3 var(--f-head); margin-bottom: 1em; }
.hero p { color: rgba(255,255,255,.95); }
.hero .btn-stack { margin-top: 1.5em; }

/* ---------- Unterseiten-Hero ---------- */
.page-hero {
  position: relative; min-height: 380px; display: flex; align-items: center; color: var(--white);
  background: var(--dark);   /* gleiche Farbe wie der Zitat-Kasten und der Startseiten-Header */
}
/* Optionales Bild in der linken Hälfte, läuft zur Textseite hin in die Hintergrundfarbe aus */
.page-hero__img { position: absolute; inset: 0 50% 0 0; overflow: hidden; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; display: block; }
.page-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,37,34,0) 55%, var(--dark) 100%); }
.page-hero--img { min-height: 460px; }
/* Herausgezoomt: schmalere, höhere Bildfläche, damit bei Hochformat-Bildern mehr vom Motiv zu sehen ist */
.page-hero--weit { min-height: 560px; }
.page-hero--weit .page-hero__img { right: auto; width: min(50%, 560px); }
.page-hero__img .ki-badge { z-index: 1; top: auto; bottom: 10px; right: auto; left: 10px; }
.page-hero .wrap { width: 100%; display: flex; justify-content: flex-end; }
.page-hero__content { width: 50%; padding: 60px 0; }
.page-hero h1 { color: var(--white); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.breadcrumb { background: var(--muted); font-size: .82rem; color: var(--muted-text); }
.breadcrumb .wrap { padding-top: 14px; padding-bottom: 14px; }
.breadcrumb a { color: var(--muted-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--script); }
.breadcrumb span::before { content: "/"; margin: 0 10px; opacity: .6; }

/* ---------- Bild-Platzhalter ---------- */
.media {
  aspect-ratio: 4 / 3; background: var(--muted) var(--img, none) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; border-radius: 2px;
}
.media svg { width: 60px; height: 60px; stroke: var(--script); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.media.has-img svg { display: none; }

/* ---------- Karten (3er-Reihe) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.card .media { margin-bottom: 22px; }
.card h3 { font-size: 1.3rem; }
.card p { font-size: .95rem; }
.card--box { background: var(--white); padding: 0 0 30px; display: flex; flex-direction: column; }
.card--box .media { aspect-ratio: 16 / 10; margin-bottom: 24px; }
.card--box h3, .card--box p, .card--box .btn { margin-left: 28px; margin-right: 28px; }
.card--box p { flex: 1; }
.card--box .btn { align-self: flex-start; }
/* Über mich, Meine Werte: drei Boxen in der Farbe des Telefon-Buttons (Wunsch Antonio, 25.10.2026) */
.card--wert { background: var(--accent); color: var(--white); padding: 34px 28px; border-radius: 6px; }
.card--wert h3, .card--wert p { color: var(--white); }
.cards--4 { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.cards--4 .card--box { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: 1fr 1fr; } }
/* Einspaltige Inhaltsseiten (ohne Seitenleiste) */
.content-single { max-width: 860px; }

/* ---------- Split-Abschnitte ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split h2 .script { display: block; margin-top: .1em; }
.quote-box { background: var(--dark); color: var(--white); padding: 56px 48px; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; }
.quote-box picture { display: block; }
.quote-box img { width: 60px; height: auto; margin-bottom: 24px; }
.quote-box blockquote { margin: 0; font: italic 400 clamp(1.15rem, 2vw, 1.5rem)/1.5 var(--f-body); }
.quote-box cite { display: block; margin-top: 18px; font: 500 .82rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: #e6c98f; }

/* ---------- Horizontaler Slider (Einblick / Wissenswertes) ---------- */
.slider { position: relative; margin-top: 40px; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 30px) / 3); gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
/* WICHTIG (Wunsch Antonio, 24.10.2026): Alle Kacheln in einem Slider (z. B. Wissenswertes auf der Startseite)
   sind immer gleich groß, egal wie lang Titel oder Text sind. Die Karte füllt die ganze Höhe der Zeile,
   der Button sitzt unten. Diese Regel nicht entfernen. */
.slider__track > div { display: flex; }
.slider__track > div > .card--box { flex: 1; }
.slider--full .slider__track { grid-auto-columns: calc((100% - 2 * 6px) / 3); gap: 6px; }
.slider__btn { position: absolute; top: 40%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: #444; font-size: 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.12); z-index: 2; }
.slider__btn--prev { left: -18px; } .slider__btn--next { right: -18px; }
.slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.slider__controls .slider__dots { margin-top: 0; }
.slider__pause { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--heading); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.slider__pause svg { width: 14px; height: 14px; fill: currentColor; }
.slider__pause .i-play, .slider__pause.is-paused .i-pause { display: none; }
.slider__pause.is-paused .i-play { display: block; }
.slider__pause:hover { border-color: var(--accent); color: var(--accent); }
.slider__dots span { width: 26px; height: 3px; background: rgba(0,0,0,.15); }
.slider__dots span.on { background: var(--accent); }
/* „Zum Inhalt springen“: unsichtbar, erscheint beim ersten Tab-Druck oben links */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--dark); color: var(--white); padding: 10px 16px; border-radius: 4px; text-decoration: none; font: 600 .95rem var(--f-head); transition: top .15s; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Startseite: die fünf Schritte der Beratung (ersetzt die frühere Slideshow) */
.step-cards { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: none; }
.step-card { position: relative; background: var(--white); display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
/* Kennzeichnung KI-generierter Bilder (oben rechts im Bild) */
.ki-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.62); color: #fff; font-size: .7rem; line-height: 1.4; padding: 2px 7px; border-radius: 3px; pointer-events: none; }
.step-card__img { display: block; aspect-ratio: 4 / 3; background: var(--primary); overflow: hidden; }
.step-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step-card__img--empty { display: flex; align-items: center; justify-content: center; }
.step-card__img--empty svg { width: 48px; height: 48px; stroke: var(--script); fill: none; stroke-width: 1.4; }
.step-card__body { position: relative; padding: 30px 20px 22px; flex: 1; }
.step-card__nr { position: absolute; top: -20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--white); font: 600 1rem/40px var(--f-head); text-align: center; box-shadow: 0 0 0 3px var(--white); }
.step-card h3 { font-size: 1.05rem; margin: 0 0 .5em; }
.step-card p { font-size: .9rem; margin: 0; color: var(--text); }
@media (max-width: 1100px) { .step-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .step-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .step-cards { grid-template-columns: 1fr; } }
.gallery-item { aspect-ratio: 4 / 3; background: var(--primary) var(--img, none) center / cover no-repeat; display: flex; align-items: flex-end; }
.gallery-item { position: relative; }
.gallery-item--empty svg { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 56px; height: 56px; stroke: var(--script); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gallery-item span { background: rgba(255,255,255,.88); padding: 6px 14px; margin: 14px; font: 500 .85rem var(--f-head); color: var(--heading); }

/* ---------- Kontakt-Split (Startseite) ---------- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); }
.contact-split .media { aspect-ratio: auto; min-height: 420px; --img: url("kontakt.jpg"); }
.contact-split__body { padding: 70px 8%; display: flex; flex-direction: column; justify-content: center; }
.contact-split h2 .script { font-size: 1.6em; }

/* ---------- Unterseiten: Inhalt + Sidebar ---------- */
.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 60px; align-items: start; }
/* Raster-Spalten dürfen schmaler werden als ihr breitester Inhalt (Karussell, Tabellen), sonst ragt die Seite am Handy über den Rand */
.content-grid > *, .reviews-map > *, .calc > *, .job-ad__grid > *, .split > *, .contact-page > * { min-width: 0; }
.content h2 { margin-top: 1.6em; }
.content h2:first-child { margin-top: 0; }
.content h3 { margin-top: 1.4em; }
.content .quote { font: italic 600 1.05rem/1.6 var(--f-body); color: var(--script); margin-bottom: 1.4em; }
.content .quote small { font-weight: 400; color: var(--muted-text); }
.content ul li, .content ol li { margin-bottom: .55em; }
/* Themen-Überschriften (Seite Immobilie): Schrift und Farbe wie die goldene Zeile, aber fett und größer */
.content h2.topic-title { font: italic 700 1.6rem/1.3 var(--f-body); color: var(--script); margin: 0 0 .7em; }
.content li::marker { color: var(--script); }
.content table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 1em 0 1.6em; font-size: .95rem; }
.content th, .content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.content thead th { background: var(--muted); color: var(--heading); font-family: var(--f-head); font-weight: 600; }
/* Seitenleiste scrollt mit, bis ihr Ende (Kasten „Ihre Frage war nicht dabei?“) sichtbar ist, und bleibt dann stehen.
   --sidebar-top wird in main.js berechnet (bei langen Leisten negativ). */
@media (min-width: 961px) {
  .sidebar { position: sticky; top: var(--sidebar-top, calc(var(--header-h) + 30px)); }
}
.sidebar h3 { font-size: 1.1rem; }

/* ---------- Akkordeon (Oft gefragt) ---------- */
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:first-child { border-top: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; position: relative; padding: 18px 40px 18px 0; font: 600 1rem/1.45 var(--f-head); color: #333; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 300 1.4rem/1 var(--f-head); color: #888; }
.accordion details[open] summary::after { content: "−"; }
.accordion summary:hover { color: var(--script); }
.accordion details > div { padding: 0 0 20px; font-size: .95rem; }
.accordion details > div p:last-child { margin-bottom: 0; }
.faq-group { margin-top: 50px; }
.faq-group:first-of-type { margin-top: 0; }
.faq-group h2 { font-size: 1.3rem; }

/* ---------- Timeline (Werdegang) ---------- */
.timeline { border-left: 2px solid var(--primary); padding-left: 30px; margin: 30px 0; }
.timeline > div { position: relative; margin-bottom: 30px; }
.timeline > div::before { content: ""; position: absolute; left: -38px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.timeline h3 { margin: 0 0 .3em; font-size: 1.15rem; }

/* ---------- Kennzahlen & Info-Boxen ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { background: var(--white); padding: 30px 20px; text-align: center; }
.stat b { display: block; font: 600 2.1rem/1.1 var(--f-head); color: var(--heading); margin-bottom: .3em; }
.stat span { font-size: .92rem; color: var(--muted-text); }
.info-box { background: var(--muted); padding: 26px 28px; margin: 1.6em 0; }
.info-box p:last-child { margin: 0; }
.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { position: relative; padding-left: 56px; margin-bottom: 1.2em; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--white); font: 600 1rem/38px var(--f-head); text-align: center; }
.steps strong { display: block; font-family: var(--f-head); color: var(--heading); }

/* ---------- Blog / Wissenswertes ---------- */
.featured { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.featured .label { font-size: .85rem; color: var(--muted-text); margin-bottom: 14px; display: block; }
.blog-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.search { border: 1px solid var(--line); border-radius: 500px; height: 42px; padding: 0 20px; font: 400 .92rem var(--f-body); min-width: 260px; background: var(--muted); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.blog-grid .card--box { box-shadow: 0 2px 16px rgba(0,0,0,.06); }

/* ---------- Kontaktformular ---------- */
.contact-page { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.form-card { border: 1px solid var(--line); padding: 36px 40px; }
.form-card label.lbl { display: block; font: 500 .78rem var(--f-head); letter-spacing: .06em; text-transform: uppercase; color: #444; margin: 18px 0 6px; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=tel], .form-card textarea {
  width: 100%; border: 1px solid rgba(118,118,118,.33); border-radius: 500px; height: 44px; padding: 0 18px; font: 400 1rem var(--f-body); background: var(--white);
}
.form-card textarea { border-radius: 4px; height: 150px; padding: 12px 18px; resize: vertical; }
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--nav-active); outline-offset: 1px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .92rem; }
.radio-row label, .check label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-col { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; }
.form-card .privacy { font-size: .85rem; color: var(--muted-text); margin: 22px 0 10px; }
.check { font-size: .9rem; margin-bottom: 24px; }
.hp { position: absolute; left: -9999px; }
.alert { padding: 16px 20px; margin-bottom: 20px; }
.alert--ok { background: #e7f2e8; color: #1f5126; }
.alert--err { background: #fbe9e7; color: #7a1f12; }

/* ---------- Footer (4 Spalten wie Vorlage) ---------- */
.site-footer { background: var(--primary); padding: 64px 0 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.site-footer h4 { font-size: 1rem; margin-bottom: 1em; color: var(--heading); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4em; }
.site-footer a:not(.btn) { color: #6f5525; text-decoration: none; } /* dunkleres Gold: 5,0:1 auf dem Fußzeilen-Beige */
.footer-note, .footer-bottom { color: #5a5450; }
.site-footer a:not(.btn):hover { text-decoration: underline; }
/* Öffnungszeiten: Tag und Zeit jeweils in einer Zeile, nichts bricht um */
.hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 2px 14px; white-space: nowrap; }
/* ---------- Kundenstimmen (Bewertungskarussell im Google-Stil) ---------- */
.g-logo { width: 22px; height: 22px; flex: none; }
.g-stars { color: #fbbc04; letter-spacing: .1em; font-size: 1.05rem; line-height: 1; }
.g-summary { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 0; color: var(--heading); }
.g-summary .g-logo { width: 34px; height: 34px; }
.g-summary strong { font: 600 1.5rem var(--f-head); margin-right: 6px; vertical-align: middle; }
.g-summary small { color: var(--muted-text); }
.content .g-summary { justify-content: flex-start; }
.slider--reviews { margin-top: 30px; }
.slider--reviews .slider__track { grid-auto-columns: calc((100% - 30px) / 2); padding: 4px 0 14px; }
.slider--single .slider__track { grid-auto-columns: 100%; }
.g-review { margin: 0; background: var(--white); border-radius: 12px; padding: 24px 26px; box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 4px 14px rgba(60,64,67,.08); display: flex; flex-direction: column; gap: 12px; }
.g-review__head { display: flex; align-items: center; gap: 12px; }
.g-review__avatar { width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font: 600 1.1rem var(--f-head); flex: none; }
.g-review figcaption { flex: 1; line-height: 1.3; }
.g-review figcaption strong { display: block; color: #202124; }
.g-review figcaption span { font-size: .82rem; color: #70757a; }
.g-review blockquote { margin: 0; color: #3c4043; font-size: .97rem; line-height: 1.65; }
.slider--reviews .slider__btn { top: 50%; transform: translateY(-50%); }
.g-cta { text-align: center; margin-top: 26px; }
.content .g-cta { text-align: left; }
.btn--google { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: #3c4043; border: 1px solid #dadce0; }
.btn--google:hover { background: #f8f9fa; color: #202124; box-shadow: 0 1px 6px rgba(60,64,67,.2); }
.btn--google .g-logo { width: 18px; height: 18px; }
.reviews-note { margin-top: 18px; color: var(--muted-text); text-align: center; }
.content .reviews-note { text-align: left; }
@media (max-width: 760px) { .slider--reviews .slider__track { grid-auto-columns: 88%; } }

/* kompaktere Bewertungen neben der Karte (Startseite) */
.reviews-map { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.reviews-map h2 { margin-bottom: 18px; }
.reviews-map .g-summary { justify-content: flex-start; }
.reviews-map .g-summary .g-logo { width: 26px; height: 26px; }
.reviews-map .g-summary strong { font-size: 1.25rem; }
.reviews-map .slider--reviews { margin-top: 20px; }
.slider--single .g-review { padding: 18px 20px; gap: 9px; }
.slider--single .g-review__avatar { width: 34px; height: 34px; font-size: .95rem; }
.slider--single .g-review blockquote { font-size: .9rem; line-height: 1.6; }
.slider--single .g-stars { font-size: .95rem; }
.reviews-map .slider__dots { margin-top: 14px; }
.reviews-map .g-cta { text-align: left; margin-top: 18px; }
.reviews-map .reviews-note { text-align: left; font-size: .8rem; }

/* ---------- Bewerbung ---------- */
.job-intro { display: grid; grid-template-columns: 1fr 260px; gap: 60px; align-items: start; }
.job-facts { display: grid; gap: 16px; }
.job-facts .stat { background: var(--muted); }
.job-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 36px; }
.job-tile { background: var(--white); padding: 28px 24px; border-top: 3px solid var(--accent); }
.job-tile svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.6; margin-bottom: 14px; }
.job-tile h3 { font-size: 1.1rem; margin-bottom: .5em; }
.job-tile p { font-size: .93rem; margin: 0; }
.job-conditions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 36px; }
.job-conditions label { display: flex; flex-direction: column; background: var(--white); border: 2px solid transparent; padding: 30px 28px; cursor: pointer; transition: border-color .2s; }
.job-conditions label.is-checked { border-color: var(--accent); }
.job-conditions span { display: block; font: 600 3rem/1 var(--f-head); color: var(--accent); margin-bottom: 14px; }
.job-conditions p { margin: 0 0 18px; flex: 1; }
.job-conditions em { font-style: normal; font-size: .9rem; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.job-conditions input { width: 18px; height: 18px; accent-color: var(--accent); }
.job-check-result { margin-top: 24px; min-height: 1.6em; font-weight: 600; color: var(--heading); }
.job-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 36px; }
.job-paths article { border: 1px solid var(--line); padding: 28px; }
.job-paths h3 { font-size: 1.15rem; margin-bottom: .5em; }
.job-paths p { margin: 0; font-size: .95rem; }
.job-cta { padding: 70px 0; }
.job-cta h2 { margin-bottom: .8em; }
.job-cta .small { margin-top: 1.6em; color: var(--muted-text); }
@media (max-width: 960px) {
  .job-intro { grid-template-columns: 1fr; gap: 30px; }
  .job-facts { grid-template-columns: repeat(3, 1fr); }
  .job-tiles { grid-template-columns: 1fr 1fr; }
  .job-conditions, .job-paths { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .job-tiles, .job-facts { grid-template-columns: 1fr; } }

/* ---------- Bewerbung als Stellenanzeige ---------- */
.job-head { background: var(--muted); padding: 50px 0 44px; }
.job-head__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.job-head__ship { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
@media (max-width: 760px) { .job-head__grid { grid-template-columns: 1fr; } .job-head__ship { max-width: 360px; } }
.job-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 900px; margin-bottom: .4em; }
.job-head__meta { color: var(--muted-text); margin-bottom: 26px; }
.job-ad__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 60px; align-items: start; }
.job-list { padding-left: 1.2em; }
.job-list li { margin-bottom: .8em; }
.job-apply { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; margin: 2.4em 0; }
.job-apply p { margin-bottom: 14px; font-weight: 600; color: var(--heading); }
.job-apply .small { margin: 18px 0 0; font-weight: 400; color: var(--muted-text); }
.job-about { background: var(--primary); padding: 30px 32px; }
.job-about h2 { margin-top: 0; font-size: 1.3rem; }
.job-about p:last-child { margin-bottom: 0; }
/* Abstand oben = Höhe der Kopfzeile, damit sie beim Hochscrollen „Kontakt“ nicht verdeckt */
.job-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }
.job-card { border: 1px solid var(--line); padding: 24px 26px; }
.job-card h3 { font-size: 1.1rem; margin-bottom: .6em; }
.job-card p { margin: 0 0 .7em; }
.job-card .small { color: var(--muted-text); }
.job-card__person { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.job-card__person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.job-card__person p { margin: 0; }
/* Porträt auf „Über mich“ */
.portrait { float: right; width: 40%; max-width: 340px; margin: 0 0 1.2em 2em; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 2px; }
@media (max-width: 560px) { .portrait { float: none; width: 100%; max-width: none; margin: 0 0 1.5em; } }
.job-side__btn { text-align: center; justify-content: center; } /* Text mittig im Knopf (Wunsch Antonio, 25.10.2026) */
@media (max-width: 960px) {
  .job-ad__grid { grid-template-columns: 1fr; gap: 40px; }
  .job-side { position: static; }
}

/* ---------- Zinseszinsrechner ---------- */
:root { --c-ein: #4a7fb5; --c-zins: #b8862b; } /* geprüft: farbfehlsichtig unterscheidbar, Kontrast ≥ 3:1 auf Weiß */
.calc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; margin-top: 30px; align-items: start; }
.calc__form { background: var(--muted); padding: 26px; display: grid; gap: 16px; }
.calc__form label { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; font: 600 .92rem var(--f-head); color: var(--heading); }
.calc__note { margin-top: 2em; }
.calc__group { margin: 8px 0 -4px; padding-top: 12px; border-top: 1px solid var(--line); font: 600 .8rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--script); }
.calc__chart .cross { stroke: rgba(0,0,0,.45); stroke-width: 1.5; stroke-dasharray: 4 3; }
.calc__legend-line { display: inline-block; width: 16px; border-top: 2px dashed rgba(0,0,0,.45); margin: 0 4px 0 14px; vertical-align: middle; }
.calc__table tr.mark td { background: var(--muted); font-weight: 600; }
@media (max-width: 960px) and (min-width: 561px) { .calc__tiles { grid-template-columns: 1fr 1fr; } }
.calc__form input { grid-column: 1 / -1; width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--white); font: 400 1rem var(--f-body); }
.calc__form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc__unit { color: var(--muted-text); font-weight: 400; }
/* Laufzeit wahlweise in Jahren oder Monaten (Wunsch Antonio 24.10.2026) */
.calc__field { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.calc__field label { font: 600 .92rem var(--f-head); color: var(--heading); }
.calc__field select { border: 1px solid var(--accent); background: var(--white); padding: 4px 8px; font: 600 .88rem var(--f-head); color: var(--heading); cursor: pointer; }
.calc__einheit { font-style: normal; }
.calc__field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc__result { position: relative; min-width: 0; }
.calc__hero span { display: block; color: var(--muted-text); }
.calc__hero strong { display: block; font: 600 2.6rem/1.15 var(--f-head); color: var(--heading); margin: 2px 0 18px; }
.calc__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.calc__tiles div { border: 1px solid var(--line); padding: 14px 16px; }
.calc__tiles span { display: block; font-size: .85rem; color: var(--muted-text); }
.calc__tiles strong { font: 600 1.15rem var(--f-head); color: var(--heading); }
.calc__legend { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text); margin-bottom: 8px; }
.calc__legend .sw--zins { margin-left: 14px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.sw--ein { background: var(--c-ein); } .sw--zins { background: var(--c-zins); }
.calc__chart svg { display: block; max-width: 100%; overflow: visible; }
.calc__chart .grid { stroke: rgba(0,0,0,.08); stroke-width: 1; }
.calc__chart .base { stroke: rgba(0,0,0,.35); stroke-width: 1; }
.calc__chart .axis { font: 11px var(--f-body); fill: var(--muted-text); }
.calc__chart .bar-ein { fill: var(--c-ein); }
.calc__chart .bar-zins { fill: var(--c-zins); }
.calc__chart .hit { fill: transparent; cursor: pointer; }
.calc__chart .hit.on { fill: rgba(0,0,0,.05); }
.calc__xlabel { text-align: center; font-size: .8rem; color: var(--muted-text); margin-top: -4px; }
.calc__tip { position: absolute; transform: translateY(-100%); background: var(--white); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 10px 12px; font-size: .85rem; line-height: 1.6; pointer-events: none; white-space: nowrap; z-index: 5; }
.calc__tip b { display: block; color: var(--heading); }
.calc__table { margin-top: 18px; }
.calc__table summary { cursor: pointer; color: var(--script); font-weight: 600; }
.calc__table div { max-height: 340px; overflow: auto; margin-top: 10px; }
.calc__table table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.calc__table th, .calc__table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.calc__table th:first-child, .calc__table td:first-child { text-align: left; }
.calc__table thead th { position: sticky; top: 0; background: var(--muted); color: var(--heading); }
@media (max-width: 960px) {
  .calc { grid-template-columns: 1fr; }
  .calc__tiles { grid-template-columns: 1fr; }
}
/* Altersvorsorgedepot-Rechner: Auswahlfelder, Häkchen, Kinder-Geburtsjahre, Zulagen und Restkapital im Diagramm */
:root { --c-zul: #9cc1e4; --c-rest: #b5ada3; }
.calc__form > label > select, .calc__kinder select { grid-column: 1 / -1; width: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--white); font: 400 1rem var(--f-body); color: var(--text); }
.calc__form > label > select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc__form > div { display: grid; gap: 16px; }
.calc__form > div[hidden], .calc__form > label[hidden] { display: none; }
.calc__form label.calc__check { grid-template-columns: auto 1fr; align-items: center; font-weight: 400; gap: 10px; cursor: pointer; }
.calc__form label.calc__check input { grid-column: auto; width: 18px; height: 18px; padding: 0; accent-color: var(--script); }
.calc__kinder { display: grid; gap: 12px; }
.calc__kinder label { display: grid; grid-template-columns: 1fr; gap: 6px; font: 600 .85rem var(--f-head); color: var(--heading); }
.calc__tiles div[hidden] { display: none; }
.calc__insight { margin: -8px 0 20px; color: var(--text); }
.calc__legend .sw--zul, .calc__legend .sw--rest { margin-left: 14px; }
.sw--zul { background: var(--c-zul); } .sw--rest { background: var(--c-rest); }
.calc__chart .bar-zul { fill: var(--c-zul); }
.calc__chart .bar-rest { fill: var(--c-rest); }
.calc__vergleich { margin-top: 22px; }
.calc__vergleich table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 10px; }
.calc__vergleich th, .calc__vergleich td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.calc__vergleich th:first-child, .calc__vergleich td:first-child { text-align: left; }
.calc__vergleich thead th { background: var(--muted); color: var(--heading); }
.calc__leer { color: var(--muted-text); }

.calc-teasers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
/* Rechner-Kasten auf Wissenswertes: Text links, kleiner Screenshot rechts */
.calc-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); align-items: center; gap: 24px; background: var(--white); padding: 28px 30px; }
.calc-teaser__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.calc-teaser h2 { margin: .2em 0 .4em; }
.calc-teaser p { margin: 0 0 20px; }
.calc-teaser__img { display: block; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.calc-teaser__img img { width: 100%; height: auto; }
@media (max-width: 1100px) { .calc-teaser { grid-template-columns: 1fr; } .calc-teaser__img { max-width: 320px; } }
@media (max-width: 760px) { .calc-teasers { grid-template-columns: 1fr; } }

/* Google-Maps-Karte mit Zwei-Klick-Lösung */
.map-box { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--muted); box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 4px 14px rgba(60,64,67,.08); }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 18px; }
.map-box__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-box__pin { position: absolute; left: 50%; top: 32%; width: 30px; height: 42px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.map-box__card { position: relative; background: rgba(255,255,255,.96); border-radius: 10px; padding: 16px 20px; text-align: center; box-shadow: 0 2px 10px rgba(60,64,67,.2); max-width: 400px; width: 100%; }
.map-box__card p { margin: 0 0 10px; font-size: .9rem; }
.map-box__card .small { margin: 8px 0 0; font-size: .78rem; color: var(--muted-text); }
.map-box__remember { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: .85rem; cursor: pointer; }
.map-links { margin-top: 14px; font-size: .9rem; color: var(--muted-text); }
.map-links a { color: var(--script); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--script); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
@media (max-width: 960px) { .reviews-map { grid-template-columns: 1fr; gap: 50px; } }

.footer-note { margin-top: 40px; font-size: .82rem; color: var(--muted-text); }
.footer-note p { margin: 0; max-width: 900px; }
.footer-note + .footer-bottom { margin-top: 24px; }
.footer-bottom { margin-top: 50px; border-top: 1px solid rgba(0,0,0,.08); padding: 20px 0; font-size: .82rem; color: var(--muted-text); }
.footer-bottom .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.to-top { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: #666; box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; z-index: 50; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 860px; }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.ph { background: #fff3cd; padding: 0 .3em; color: #6b5200; }
.note { background: var(--muted); border-left: 4px solid var(--script); padding: 16px 20px; margin-bottom: 2em; }
.disclaimer { font-size: .8rem; color: var(--muted-text); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav > li > a { padding: 0 10px; font-size: 15px; }
  .brand span { display: none; }
}
@media (max-width: 960px) {
  :root { --header-h: 80px; }
  .wrap { padding: 0 24px; }
  .brand span { display: inline; }
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; height: auto; flex-direction: column; align-items: stretch; background: var(--white); box-shadow: 0 10px 20px rgba(0,0,0,.08); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav > li { height: auto; flex-direction: column; align-items: stretch; border-top: 1px solid #eee; }
  .nav > li > a { padding: 14px 24px; }
  .nav > li > a::after { display: none; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 24px 12px 40px; min-width: 0; }
  .cards, .blog-grid { grid-template-columns: 1fr 1fr; }
  .split, .featured, .contact-split, .content-grid, .contact-page { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .slider__track { grid-auto-columns: calc((100% - 30px) / 2); }
  .slider--full .slider__track { grid-auto-columns: calc((100% - 6px) / 2); }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__mark { position: static; transform: none; width: 90px; margin: 44px 0 0 24px; }
  .hero__portrait { position: relative; left: auto; right: auto; top: auto; transform: none; width: 200px; margin: 48px 0 18px 36px; }
  .hero__content, .page-hero__content { width: 100%; }
  .hero__content { padding: 16px 0 56px; }
  .page-hero { min-height: 260px; }
  .page-hero--img { flex-direction: column; align-items: stretch; }
  .page-hero__img, .page-hero--weit .page-hero__img { position: relative; inset: auto; width: auto; height: 300px; }
  .page-hero--weit { min-height: 0; }
  .page-hero__img::after { background: linear-gradient(180deg, rgba(38,37,34,0) 60%, var(--dark) 100%); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero__mark { margin-left: 16px; }
  .hero__portrait { width: 170px; margin-left: 28px; }
  .section { padding: 56px 0; }
  .cards, .blog-grid, .stats, .footer-grid { grid-template-columns: 1fr; }
  .slider__track, .slider--full .slider__track { grid-auto-columns: 86%; }
  .slider__btn { display: none; }
  .brand span { font-size: 12px; letter-spacing: .18em; }
  .brand img { height: 40px; }
  .quote-box { padding: 36px 26px; aspect-ratio: auto; }
  .form-card { padding: 24px 20px; }
  .contact-split__body { padding: 50px 16px; }
  .search { min-width: 0; width: 100%; }
}

/* Finanzierungsrechner als eigener Abschnitt auf der Seite Immobilienfinanzierung */
.section--rechner { border-top: 1px solid var(--line); }

/* Blocksatz für Fließtext auf allen Seiten (mit Silbentrennung, damit keine großen Lücken entstehen) */
main p, main li, .accordion div, .footer-note p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
main .center p, main .center li, main .calc__hero, main .g-summary, main .map-links { text-align: center; }
main .btn, main .breadcrumb { text-align: left; }

/* WhatsApp-Button in der Fußzeile */
.btn--whatsapp { background: #1a7f4b; }
.btn--whatsapp:hover { background: #13633a; }
.btn svg.arr { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* ---------- Header-Varianten (page_hero in build.py) ---------- */
/* Ohne Bild: Überschrift links */
.page-hero:not(.page-hero--img) .wrap { justify-content: flex-start; }
.page-hero:not(.page-hero--img) .page-hero__content { width: min(100%, 820px); }
/* Überschrift links, Bild rechts (Finanzplanung) */
.page-hero--rechts .wrap { justify-content: flex-start; }
.page-hero--rechts .page-hero__img { inset: 0 0 0 50%; }
.page-hero--rechts .page-hero__img::after { background: linear-gradient(270deg, rgba(38,37,34,0) 55%, var(--dark) 100%); }
.page-hero--rechts .page-hero__img .ki-badge { left: auto; right: 10px; }
/* Hell: weißer Hintergrund, schwarze Schrift (Über mich) */
.page-hero--hell { background: var(--white); color: #111; border-bottom: 1px solid var(--line); }
.page-hero--hell h1 { color: #c49c50; }   /* Goldton des Logos (Mitte des Verlaufs in logo-mark.png) */
/* Über mich: Überschrift in der Schreibschrift wie „Finanzberatung in Nürnberg“ auf der Startseite */
.page-hero--hell h1 { font-family: var(--f-script); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1.15; }
.page-hero--hell .page-hero__img::after { background: linear-gradient(90deg, rgba(255,255,255,0) 55%, var(--white) 100%); }
/* Vollbild: Bild über die ganze Breite, Überschrift steht im Text (Immobilie) */
.page-hero--voll { display: block; min-height: 0; }
.page-hero--voll .page-hero__img { position: relative; inset: auto; width: 100%; height: clamp(300px, 38vw, 560px); }
.page-hero--voll .page-hero__img::after { display: none; }
.content h1.content-title { margin: 0 0 .8em; }
@media (max-width: 960px) {
  .page-hero--rechts .page-hero__img { inset: auto; }
  .page-hero--rechts .page-hero__img::after { background: linear-gradient(180deg, rgba(38,37,34,0) 60%, var(--dark) 100%); }
  .page-hero--hell .page-hero__img::after { background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--white) 100%); }
  .page-hero--voll .page-hero__img { height: 260px; }
}
/* Finanzierungsrechner auf der Seite Immobilienfinanzierung: am Computer 80 % (Seite 90 % × 0,89) */
@media (min-width: 961px) { .section--rechner { zoom: .889; } }

/* Einblick in die Beratung (schmale Karten): linksbündig statt Blocksatz, sonst entstehen große Wortlücken */
main .step-card p, main .card p, main .card--box p { text-align: left; -webkit-hyphens: auto; hyphens: auto; }
main .step-card, main .step-card * { text-align: left; }
main .step-card .step-card__nr { text-align: center; }
.nowrap { white-space: nowrap; }

/* Bewerbung: Header nach Vorbild koenigswege.com/partner – Bild über die ganze Breite, Überschrift darauf */
.job-hero { position: relative; background: #2b3566; }
.job-hero__img { display: block; width: 100%; height: clamp(320px, 40vw, 600px); object-fit: cover; object-position: 30% 20%; }
.job-hero__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 6vw; pointer-events: none; }
.job-hero h1 { margin: 0; max-width: 520px; color: #fff; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.15; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.job-hero__key { display: inline-block; border-bottom: 5px solid #e6c98f; padding-bottom: .05em; }
.job-head { padding: 30px 0 34px; }
@media (max-width: 760px) {
  .job-hero__img { height: 240px; object-position: 20% center; }
  .job-hero__text { position: static; justify-content: center; padding: 22px 16px 26px; background: #2b3566; }
}

.job-hero .ki-badge { top: auto; bottom: 10px; right: 10px; }
/* Bewerbung: Überschrift oben rechts im Himmel, damit Sonne und Schatzinsel frei bleiben */
@media (min-width: 761px) {
  .job-hero__text { align-items: flex-start; padding-top: clamp(24px, 3.5vw, 56px); }
  .job-hero__img { object-position: center center; }
}
@media (min-width: 761px) { .job-hero__img { height: auto; aspect-ratio: 1584 / 672; } .job-hero__text { padding-right: 4vw; } .job-hero h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bewertungs-Karussell: Pfeile neben den Kacheln statt auf dem Text (Platz links und rechts freihalten) */
.slider--reviews { padding: 0 54px; }
.slider--reviews .slider__btn--prev { left: 0; }
.slider--reviews .slider__btn--next { right: 0; }
.slider--reviews .slider__btn { top: calc(50% - 22px); }
@media (max-width: 640px) { .slider--reviews { padding: 0; } }

/* Menü: eingerückter Unterpunkt (Finanzierungsrechner unter Immobilienfinanzierung) */
.dropdown__sub a { padding-left: 14px; font-size: 14px; }   /* nur eingerückt, ohne Strich */


/* Header mit Bild: die Hälfte ohne Bild nimmt die Farbe des Bildrands auf (--hero-bg aus build.py, HERO_FARBEN) */
.page-hero[style*="--hero-bg"] { background: var(--hero-bg); }
.page-hero[style*="--hero-bg"] .page-hero__img::after { background: linear-gradient(90deg, transparent 55%, var(--hero-bg) 100%); }
.page-hero--rechts[style*="--hero-bg"] .page-hero__img::after { background: linear-gradient(270deg, transparent 55%, var(--hero-bg) 100%); }
@media (max-width: 960px) {
  .page-hero[style*="--hero-bg"] .page-hero__img::after,
  .page-hero--rechts[style*="--hero-bg"] .page-hero__img::after { background: linear-gradient(180deg, transparent 60%, var(--hero-bg) 100%); }
}
.calc__leer { margin: 0; padding: 60px 20px; text-align: center; color: var(--muted-text); background: var(--muted); border-radius: 4px; }

/* Header-Bilder als Vollbild über die ganze Breite (am Computer). Die Überschrift liegt auf dem Bild,
   ein Verlauf in der Bildfarbe (--hero-bg) sorgt auf der Textseite für Lesbarkeit. Am Handy bleibt: Bild oben, Text darunter. */
@media (min-width: 961px) {
  .page-hero--img { min-height: 500px; }
  .page-hero--img .page-hero__img, .page-hero--weit .page-hero__img, .page-hero--rechts .page-hero__img { inset: 0; width: auto; right: 0; }
  .page-hero--img .page-hero__img::after { background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--hero-bg, var(--dark)) 88%, transparent) 72%); }
  .page-hero--rechts.page-hero--img .page-hero__img::after { background: linear-gradient(270deg, transparent 35%, color-mix(in srgb, var(--hero-bg, var(--dark)) 88%, transparent) 72%); }
  .page-hero--hell.page-hero--img .page-hero__img::after { background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.9) 70%); }
  .page-hero--img .page-hero__content { position: relative; z-index: 1; }
  .page-hero--img h1 { text-shadow: 0 2px 14px rgba(0,0,0,.35); }
  .page-hero--hell.page-hero--img h1 { text-shadow: none; }
  .page-hero--rechts .page-hero__img .ki-badge, .page-hero--img .page-hero__img .ki-badge { left: 10px; right: auto; }
}
/* Vollbild-Header: Verlauf kräftiger und mit höherer Spezifität (überschreibt die älteren Halbbild-Regeln) */
@media (min-width: 961px) {
  .page-hero.page-hero--img .page-hero__img::after { background: linear-gradient(90deg, transparent 22%, color-mix(in srgb, var(--hero-bg, var(--dark)) 92%, transparent) 56%); }
  .page-hero.page-hero--rechts.page-hero--img .page-hero__img::after { background: linear-gradient(270deg, transparent 22%, color-mix(in srgb, var(--hero-bg, var(--dark)) 92%, transparent) 56%); }
  /* Über mich (helles Porträt): Gesicht bleibt frei, Text weiter rechts auf Weiß */
  .page-hero.page-hero--hell.page-hero--img .page-hero__img::after { background: linear-gradient(90deg, transparent 58%, rgba(255,255,255,.95) 72%); }
  .page-hero--hell .page-hero__content { width: 40%; }
}

/* ---------- Header-Überschriften: immer links, leicht über der Mitte, gut lesbar ---------- */
.page-hero h1 { text-align: left; line-height: 1.2; letter-spacing: .005em; max-width: 620px; margin: 0; }
.page-hero--gespiegelt .page-hero__img img { transform: scaleX(-1); }
@media (min-width: 961px) {
  .page-hero .wrap, .page-hero--img .wrap, .page-hero--rechts .wrap { justify-content: flex-start; }
  .page-hero .page-hero__content, .page-hero--hell .page-hero__content { width: min(48%, 620px); padding: 40px 0 96px; }  /* unten mehr Abstand = Überschrift leicht erhöht */
  .page-hero.page-hero--img .page-hero__img::after,
  .page-hero.page-hero--rechts.page-hero--img .page-hero__img::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-bg, var(--dark)) 94%, transparent) 0%,
                                       color-mix(in srgb, var(--hero-bg, var(--dark)) 86%, transparent) 34%, transparent 64%); }
  .page-hero.page-hero--hell.page-hero--img .page-hero__img::after { background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 30%, transparent 52%); }
  .page-hero--img h1 { font-size: clamp(2rem, 3.2vw, 2.7rem); text-shadow: 0 2px 16px rgba(0,0,0,.45); }
  .page-hero--hell.page-hero--img h1 { text-shadow: 0 1px 10px rgba(255,255,255,.9); }
  .page-hero__img .ki-badge, .page-hero--img .page-hero__img .ki-badge { left: auto; right: 10px; }
}
/* Kapitalanlage: Bild über die ganze Breite, nur ein leichter Verlauf hinter der Überschrift.
   Höhe wie alle anderen Header (Wunsch Antonio 24.10.2026), Prüfung in build.py: pruefe_header_hoehe() */
@media (min-width: 961px) {
  .page-hero.page-hero--verlauf.page-hero--img .page-hero__img::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--hero-bg, var(--dark)) 55%, transparent) 0%,
                                       color-mix(in srgb, var(--hero-bg, var(--dark)) 30%, transparent) 30%, transparent 55%); }
}
@media (max-width: 960px) {
  .page-hero.page-hero--verlauf.page-hero--img .page-hero__img::after { background: none; }
}
@media (min-width: 961px) {
  .page-hero .page-hero__content, .page-hero--hell .page-hero__content { width: min(60%, 700px); }
  .page-hero--hell.page-hero--img h1 { font-size: clamp(2.8rem, 5vw, 4rem); }
}
@media (min-width: 961px) { .page-hero--hell .page-hero__content { width: min(34%, 420px); } }

/* Über mich: wieder wie vor dem Vollbild-Umbau – Porträt links in der halben Breite, Schreibschrift-Titel rechts */
@media (min-width: 961px) {
  .page-hero--hell.page-hero--img { min-height: 460px; }
  .page-hero--hell.page-hero--img .page-hero__img { inset: 0 50% 0 0; width: auto; right: 50%; }
  .page-hero.page-hero--hell.page-hero--img .page-hero__img::after { background: linear-gradient(90deg, rgba(255,255,255,0) 55%, var(--white) 100%); }
  .page-hero--hell .wrap { justify-content: flex-end; }
  .page-hero--hell .page-hero__content, .page-hero.page-hero--hell .page-hero__content { width: 50%; padding: 60px 0; }
  .page-hero--hell.page-hero--img h1 { font-size: clamp(2.6rem, 5vw, 3.8rem); text-shadow: none; max-width: none; }
}

/* Öffnungszeiten in der Fußzeile: zwei Zeilen, kein Umbruch innerhalb der Zeile */
.site-footer p.hours { display: block; white-space: nowrap; margin: 0; }

/* ---------- Startseiten-Header: voller gestaltet (Eckdaten-Leiste, Buttons nebeneinander, Glanz + Logo-Wasserzeichen) ---------- */
.hero { overflow: hidden; min-height: 600px; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 28% 50%, rgba(230,201,143,.16), transparent 70%),
              url("logo-mark.png") no-repeat right -60px center / auto 115%; opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 60%, rgba(38,37,34,.88) 100%); }
.hero .wrap { position: relative; z-index: 1; }
.hero__portrait { z-index: 1; }
.hero::before { filter: none; }
.hero__facts { list-style: none; margin: 1.6em 0 0; padding: 18px 0 0; border-top: 1px solid rgba(230,201,143,.35); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 34px; }
.hero__facts li { display: flex; flex-direction: column; text-align: left; }
.hero__facts strong { font: 600 1.6rem/1.1 var(--f-head); color: #e6c98f; }
.hero__facts span { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: 4px; }
.hero .hero__btns { margin-top: 1.8em; gap: 14px; }
.hero .hero__btns .btn:not(.btn--white) { background: #c49c50; color: #1d1b17; }
.hero .hero__btns .btn:not(.btn--white):hover { background: #e6c98f; }
@media (max-width: 640px) { .hero__facts { gap: 18px; } .hero__facts strong { font-size: 1.25rem; } }
/* Korrektur: Logo nur als sehr dezentes Wasserzeichen, Glanz separat */
.hero::before { background: radial-gradient(ellipse 60% 70% at 28% 50%, rgba(230,201,143,.16), transparent 70%); }
.hero::after { background: url("logo-mark.png") no-repeat right 2% center / auto 92%; opacity: .06; }
.hero__facts { gap: 48px; }

/* Fußzeile: Kontakt-Buttons etwas tiefer, „Persönlich in Nürnberg oder per Video.“ in einer Zeile */
.footer-kontakt { margin-top: 26px; }
.footer-video { margin-top: 0; }  /* direkt unter den Öffnungszeiten, ohne Leerzeile (Wunsch Antonio, 24.10.2026) */
@media (min-width: 961px) { .footer-video { white-space: nowrap; } }

/* Makler-Netzwerk (Seite Makler und Bauen): Foto links, Text rechts */
.makler-liste { display: grid; gap: 28px; margin: 1.6em 0; }
.makler { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; background: var(--muted); padding: 22px; border-radius: 4px; }
.makler img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--white), 0 0 0 4px #c49c50; }
.makler h3 { margin: 0 0 .4em; }
.makler p { margin: 0; }
@media (max-width: 560px) { .makler { grid-template-columns: 1fr; } .makler img { width: 120px; height: 120px; } }
/* Aufzählung ohne Zahlen (z. B. Unterlagen auf „Vorbereitung“): kleiner Punkt statt Nummer */
.steps--plain li { padding-left: 28px; }
.steps--plain li::before { content: ""; width: 10px; height: 10px; top: .45em; }
/* Immobilien-Unterseiten: Foto über die ganze Breite, Überschrift im Text (vollbild). Flacher halten, damit der Text sichtbar bleibt. */
.page-hero.page-hero--voll { min-height: 0; padding: 0; }
.page-hero.page-hero--voll .page-hero__img { display: block; position: relative; inset: auto; width: 100%; height: clamp(220px, 28vw, 400px); }
/* Handy und Tablet: kein Farbverlauf vom Header-Foto in die einfarbige Fläche, Foto endet mit klarer Kante (Wunsch Antonio, 24.10.2026).
   Am Computer bleibt der Verlauf. Über mich (--hell) bleibt unverändert. */
@media (max-width: 960px) {
  .page-hero.page-hero--img:not(.page-hero--hell) .page-hero__img::after { display: none; }
}
/* Handy und Tablet: Header mit Foto ohne leere Fläche unter der Überschrift (grauer Balken), Wunsch Antonio 24.10.2026.
   Höhe ergibt sich aus Foto (300 px) plus Überschrift. Über mich (--hell) bleibt unverändert. */
@media (max-width: 960px) {
  .page-hero.page-hero--img:not(.page-hero--hell) { min-height: 0; }
  .page-hero.page-hero--img:not(.page-hero--hell) .page-hero__content { padding: 28px 0 32px; }
}
/* Wissenswertes-Beiträge: Kachelbild als Header (rechte Hälfte), läuft am Computer in helles Beige aus,
   Überschrift links in dunkler Schrift. Am Handy Foto oben, Überschrift darunter, ohne Verlauf (Wunsch Antonio 24.10.2026). */
.page-hero.page-hero--licht { background: var(--muted); color: var(--text); border-bottom: 1px solid var(--line); }
.page-hero.page-hero--licht h1 { color: var(--heading); text-shadow: none; }
@media (min-width: 961px) {
  .page-hero.page-hero--licht.page-hero--img .page-hero__img { inset: 0 0 0 50%; width: auto; }
  .page-hero.page-hero--licht.page-hero--img .page-hero__img::after { background: linear-gradient(270deg, rgba(246,241,232,0) 45%, var(--muted) 100%); }
  .page-hero.page-hero--licht .page-hero__content { width: 46%; }
}
/* Wissenswertes: Altersvorsorgedepot-Rechner oben wie die beiden anderen Rechner-Kacheln, nur über die ganze Breite */
.calc-teaser--breit { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px; padding: 32px 36px; }
@media (max-width: 1100px) { .calc-teaser--breit { grid-template-columns: 1fr; } }
/* Unterüberschrift (Zitatzeile) linksbündig, sonst entstehen am Handy große Lücken zwischen den Wörtern */
.content .quote { text-align: left; }
@media (max-width: 760px) { .calc-teaser--breit { padding: 28px 24px; gap: 24px; } }
/* Bauen: Überschrift am Computer rechts, damit sie nicht über dem Gesicht liegt (24.10.2026) */
@media (min-width: 961px) {
  .page-hero.page-hero--titel-rechts .wrap { justify-content: flex-end; }
  .page-hero.page-hero--titel-rechts .page-hero__content { width: 30%; }
  .page-hero.page-hero--titel-rechts.page-hero--img .page-hero__img::after {
    background: linear-gradient(270deg, color-mix(in srgb, var(--hero-bg, var(--dark)) 90%, transparent) 0%,
                                        color-mix(in srgb, var(--hero-bg, var(--dark)) 78%, transparent) 26%, transparent 48%); }
}
/* Finanzplanungs- und Immobilienseiten: Foto über die ganze Breite, ohne beige Fläche und ohne Schleier, Überschrift weiß auf dem Foto.
   Am Handy Foto oben, Überschrift darunter auf Weiß. Header-Höhe unverändert (Wunsch Antonio 24.10.2026). */
.page-hero.page-hero--foto { background: var(--white); border-bottom: 1px solid var(--line); }
.page-hero.page-hero--foto .page-hero__img::after { display: none; }
.page-hero.page-hero--foto h1 { color: var(--heading); text-shadow: none; }
@media (min-width: 961px) {
  .page-hero.page-hero--foto.page-hero--img .page-hero__img { inset: 0; width: auto; }
  .page-hero.page-hero--foto.page-hero--img h1 { color: var(--white); text-shadow: 0 2px 4px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.45); }
}
/* Header-Foto am Computer vergrößert, von links aus gezoomt (HERO_ZOOM in build.py), damit das Motiv rechts neben der Überschrift steht */
@media (min-width: 961px) {
  .page-hero--zoom .page-hero__img img { transform: scale(var(--zoom, 1)); transform-origin: var(--zoom-anker, 0% 50%); }
}
@media (min-width: 1600px) and (max-width: 2199px) {
  /* Auf breiten Bildschirmen steht die Überschrift weiter rechts, das Motiv rückt deshalb etwas mehr nach rechts */
  .page-hero--zoom .page-hero__img img { transform: scale(calc(var(--zoom, 1) + .12)); }
}

/* ---------- Abschlussprüfung Runde 2, Layout (Antonio 25.10.2026) ---------- */
/* Am Handy linksbündig statt Blocksatz, sonst entstehen große Lücken zwischen den Wörtern. Am Computer bleibt der Blocksatz. */
@media (max-width: 600px) {
  main p, main li, .accordion div, .footer-note p { text-align: left; }
}
/* Kartenkasten (Google Maps, Startseite und Kundenstimmen) immer linksbündig */
.map-box__card p { text-align: left; }
/* Übersichtsseiten (Beratung, Finanzplanung): eine übrig gebliebene Kachel steht mittig in der letzten Reihe */
@media (min-width: 961px) {
  .cards:not(.cards--2x2) > :last-child:nth-child(3n+1) { grid-column: 2; }
  /* Immobilie: vier Kacheln als 2 × 2, Kacheln so groß wie in den Dreier-Reihen */
  .cards--2x2 { grid-template-columns: repeat(2, 1fr); max-width: calc((100% - 80px) * 2 / 3 + 40px); }
}
@media (min-width: 641px) and (max-width: 960px) {
  .cards > :last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 40px) / 2); }
}
/* Nach-oben-Pfeil erst einblenden, wenn eine Bildschirmhöhe gescrollt ist (main.js setzt .is-visible) */
.to-top { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.to-top.is-visible { opacity: 1; visibility: visible; }

/* Startseite Handy/Tablet: Google-Bewertungen-Button mittig unter „In Google Maps öffnen“ (25.10.2026) */
@media (max-width: 960px) { .reviews-map__map .g-cta { text-align: center; } }