/* HEITFELD plus – Kanzleiwebsite
   Statischer Nachbau der bisherigen WordPress/Divi-Seite (Stand 04.11.2026).
   Designwerte aus dem Original: Gold #B09B6A (Mockup fbv), Schwarz, Weiß;
   Inhaltsbreite 80 % (max. 1124 px), Abschnitte 56 px / Zeilen 28 px Innenabstand. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/manrope-latin-700-normal.woff2") format("woff2"); }

:root {
  --gold: #b09b6a;
  --gold-50: rgba(176, 155, 106, .5);
  --black: #000;
  --white: #fff;
  --font: "Manrope", system-ui, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --wrap: 1124px;
  --sec: 56px;   /* Abschnitt oben/unten */
  --row: 28px;   /* Zeile oben/unten */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 175px; }
body { margin: 0; padding-top: 30px; background: var(--black); color: var(--black); font: 400 16px/29px var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { opacity: .8; }
p { margin: 0; padding-bottom: 16px; }
p:last-child { padding-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding-bottom: 10px; font-weight: 500; }
b { font-weight: 400; }
strong { font-weight: 700; }
ul { margin: 0; padding: 0; }
svg.i { display: inline-block; fill: currentColor; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--black); padding: 8px 14px; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Raster ---------- */
.wrap { width: 80%; max-width: var(--wrap); margin: 0 auto; }
.sec { padding: var(--sec) 0; position: relative; }
.row { padding: var(--row) 0; }
.bg-black { background: var(--black); color: var(--white); }
.bg-white { background: var(--white); }
.bg-gold { background: var(--gold); }
.bg-muster { background: var(--white) url("../img/muster.jpg") 50% 50% / cover no-repeat; }
.bg-gold.bg-muster { background-color: var(--gold); }
.cols { display: grid; gap: 0 5.5%; }
/* Spaltenbreiten wie Divi (Abstand 5,5 %) */
.cols-2 { grid-template-columns: 47.25% 47.25%; }
.cols-3 { grid-template-columns: 29.6667% 29.6667% 29.6667%; }
.cols-4 { grid-template-columns: repeat(4, 20.875%); }
.cols-2-3 { grid-template-columns: 36.7% 57.8%; }
.cols-3-2 { grid-template-columns: 57.8% 36.7%; }
.cols-1-3 { grid-template-columns: 20.875% 73.625%; }
.cols-3-1 { grid-template-columns: 73.625% 20.875%; }
.cols > *, .kacheln > *, .fragen > *, .themen > *, .reviews > * { min-width: 0; }
.ta-l { text-align: left; } .ta-c { text-align: center; } .ta-r { text-align: right; }
.c-gold { color: var(--gold); } .c-white { color: var(--white); } .c-black { color: var(--black); }

/* ---------- Typografie ---------- */
.display { font-size: 45px; line-height: 1.5; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
.display.tight { line-height: 1; }
.display a { color: inherit; }
.eyebrow { font-size: 18px; line-height: 9px; font-weight: 700; text-transform: uppercase; }
.kicker { text-transform: uppercase; }
.lead-up { font-size: 23px; line-height: 23px; font-weight: 700; text-transform: uppercase; }
.quote { font-size: 18px; line-height: 27px; font-weight: 500; font-style: italic; color: var(--gold); padding-bottom: 10px; }
.spacer { height: 46px; }

/* ---------- Kopfbereich ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--black); padding-bottom: 14px; }
.site-header .wrap { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 0 4px; }
.logo { display: block; width: 309px; flex: 0 0 auto; }
.logo img { width: 309px; height: auto; }
.nav { display: flex; flex-direction: column; align-items: flex-end; padding-top: 39px; }
.nav ul { list-style: none; display: flex; gap: 0 22px; }
.nav a { display: block; font-weight: 500; line-height: 14px; padding-bottom: 8px; }
.nav-meta a { font-size: 12px; color: var(--white); }
.nav-main { margin-top: 15px; }
.nav-main a { font-size: 14px; color: var(--gold); text-transform: uppercase; }
.nav-mobile { display: none; }

/* ---------- Buttons ---------- */
.btn-row { padding-top: 0; }
.btn { position: relative; display: inline-block; font: 300 20px/34px var(--font); padding: 6px 20px; border: 1px solid var(--black); color: var(--black); transition: padding .3s ease; }
.btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0; transition: opacity .3s ease;
  background: currentColor; -webkit-mask: url("../img/plus.svg") center / contain no-repeat; mask: url("../img/plus.svg") center / contain no-repeat; }
.btn:hover { opacity: 1; padding-right: 44px; }
.btn:hover::after { opacity: 1; }
.btn-hero { color: var(--white); border-color: var(--gold); background: transparent; }
.btn-hero::after { background: var(--gold); }
.btn-hero.on-black { background: var(--black); }
.btn-gold { background: var(--gold); border-color: var(--black); color: var(--black); }
.btn-gold.border-white { border-color: var(--white); }
.btn-white { background: var(--white); border-color: var(--black); }
.btn-white.border-gold { border-color: var(--gold); }
.btn-white.border-gold::after { background: var(--gold); }
.btn-call { display: none; margin-top: 30px; background: var(--gold-50); border-color: var(--gold); color: var(--white); padding-left: 34px; }
.btn-call .i { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; }
.btn-call::after { display: none; }
.btn-call:hover { padding-right: 20px; }

/* ---------- Hero (Keyvisual) ---------- */
.hero { position: relative; height: 1000px; background: var(--gold) var(--img) var(--pos, 50% 50%) / cover no-repeat; color: var(--white); }
.hero .wrap { height: 100%; position: relative; }
.hero-text { position: absolute; top: var(--top, 148px); left: var(--left, 75px); right: 0; text-align: var(--align, left); }
.hero-title { font-size: 45px; line-height: 67.5px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); padding-bottom: 10px; }
.hero-sub { font-size: 20px; line-height: 26px; font-weight: 500; color: var(--white); padding-bottom: 0; }
.hero .btn { margin-top: 31px; }
.hero-right { --align: right; --left: 75px; }
.team { height: 1100px; background: var(--black) var(--img) var(--pos, 50% 0%) / cover no-repeat; }

/* ---------- Zitat-Banner (Grafik) ---------- */
.zitat { display: block; background: var(--white); }
.zitat img { width: 100%; }

/* ---------- Startseite ---------- */
.intro > .wrap > h2:first-child { padding-bottom: 41px; }
.intro p + h2 { padding-top: 14px; }
.box { border: 1px solid var(--white); padding: 20px; color: var(--gold); }
.box .display { color: var(--white); }
.box a { color: var(--white); }
.kuendigung h2 { color: var(--white); padding-bottom: 10px; }
.kuendigung .was-nun { line-height: 8px; text-transform: uppercase; padding-bottom: 30px; }
.kuendigung .btn-row { padding-top: 30px; }

.themen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 5.5%; }
.thema { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--black); padding-bottom: 30px; }
.thema:hover { opacity: 1; }
.thema .ico { height: 80px; display: flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 30px; }
.thema .ico svg { height: 80px; width: auto; }
.thema:hover .ico { opacity: .8; }
.thema span { font-size: 14px; line-height: 14px; min-height: 28px; }

.cta-black .loewe { max-width: 100%; }
.cta-black .display .c-gold { color: var(--gold); }

/* ---------- Bewertungen ---------- */
.stimmen { color: var(--black); }
.stimmen .display { color: var(--white); }
.rating { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.rating-score { font-size: 40px; line-height: 1; font-weight: 400; color: var(--white); }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; fill: var(--white); }
.rating-count { text-align: center; padding-top: 8px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.review { margin: 0; background: var(--black); color: var(--gold); padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.review .stars svg { width: 14px; height: 14px; fill: var(--gold); }
.review blockquote { margin: 0; font-size: 15px; line-height: 26px; flex: 1 1 auto; }
.review figcaption { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--white); }
.review figcaption span { font-weight: 400; }
.rating-note { font-size: 13px; line-height: 20px; text-align: center; padding-top: 24px; max-width: 820px; margin: 0 auto; }
.stimmen .btn-row { text-align: center; padding-top: 28px; }

/* ---------- Kontaktband ---------- */
.kontakt h2.display { color: var(--black); }
.kontakt-items { text-align: center; }
.kontakt-item .ico { display: flex; align-items: center; justify-content: center; height: 80px; color: var(--gold); margin-bottom: 30px; }
.kontakt-item .ico svg { height: 80px; width: auto; }
.kontakt-item .label { font-size: 16px; line-height: 24px; font-weight: 400; text-transform: uppercase; color: var(--black); padding-bottom: 0; }
.kontakt-item .value { font-size: 28px; line-height: 42px; font-weight: 500; letter-spacing: .5px; color: var(--gold); padding-top: 6px; }
.kontakt-item .value a { color: var(--gold); }
.kontakt.v-bold .label { font-size: 18px; line-height: 18px; font-weight: 500; padding-bottom: 10px; }
.kontakt.v-bold .label b { font-weight: 700; }
.kontakt.v-bold .value { line-height: 28px; padding-top: 20px; }
.kontakt:not(.v-bold) .value { text-transform: uppercase; }

/* ---------- Aufklapper ---------- */
.toggles { padding-bottom: 30px; }
.toggle { border-bottom: 1px solid var(--white); background: var(--black); color: var(--gold); }
.toggle summary { list-style: none; cursor: pointer; position: relative; padding: 20px 70px 20px 20px; font-size: 20px; line-height: 28px; font-weight: 500; text-transform: uppercase; color: var(--gold); }
.toggle summary::-webkit-details-marker { display: none; }
.toggle summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--gold);
  -webkit-mask: url("../img/plus.svg") center / contain no-repeat; mask: url("../img/plus.svg") center / contain no-repeat; }
.toggle[open] summary { color: var(--white); }
.toggle[open] summary::after { -webkit-mask-image: url("../img/minus.svg"); mask-image: url("../img/minus.svg"); }
.toggle .content { padding: 0 20px 20px; }
.toggle .content p { padding-bottom: 16px; }
.toggle .content p:last-child { padding-bottom: 0; }

/* ---------- Kästen (Wie wir arbeiten, Karriere) ---------- */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px 5.5%; }
.kachel { border: 1px solid var(--white); padding: 20px; color: var(--gold); min-height: 380px; }
.kachel h3 { font-size: 26px; line-height: 26px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; color: var(--white); }
.kachel.gold-border { border-color: var(--gold); min-height: 0; }
.kachel.gold-border h3 { color: var(--gold); }
.kachel.gold-border p { color: var(--white); }

/* ---------- Wer wir sind ---------- */
.person .cols { align-items: start; }
.person .eyebrow { color: var(--white); }
.person .display { color: var(--gold); }
.person p { color: var(--white); }
.person p.quote { color: var(--gold); }
.person p.eyebrow { color: var(--white); }

/* ---------- Interview ---------- */
.fragen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5.5%; }
.frage .ico { display: flex; justify-content: center; height: 35px; color: var(--gold); margin-bottom: 30px; }
.frage .ico svg { height: 35px; width: auto; }
.frage h3 { font-size: 20px; line-height: 20px; font-weight: 400; text-transform: uppercase; color: var(--gold); padding-bottom: 10px; }

/* ---------- Karriere ---------- */
.karriere-intro .ico { display: flex; justify-content: center; color: var(--gold); margin-bottom: 30px; }
.karriere-intro .ico svg { width: 35px; height: 35px; }
.karriere-intro p { max-width: 550px; margin: 0 auto; font-weight: 500; font-size: 15px; }

/* ---------- Kontaktseite / Formular ---------- */
.anschrift { font-size: 18px; line-height: 27px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; row-gap: 0; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; }
.form input, .form textarea { width: 100%; margin-bottom: 3%; background: var(--black); border: 1px solid var(--white); color: var(--gold); font: 300 14px/1.5 var(--font); padding: 16px; border-radius: 0; }
.form input::placeholder, .form textarea::placeholder { color: var(--gold); opacity: 1; }
.form textarea { min-height: 150px; resize: vertical; }
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .consent { grid-column: 1 / -1; font-size: 13px; line-height: 20px; color: var(--white); }
.form .consent a { color: var(--gold); }
.form .send { grid-column: 1 / -1; text-align: right; }
.form button { font: 300 20px/34px var(--font); padding: 6px 20px; background: var(--black); color: var(--gold); border: 1px solid var(--white); cursor: pointer; }
.form button:hover { background: var(--gold); color: var(--black); }
.karte { min-height: 825px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--black); }
.karte .display { color: var(--white); }
.karte p { max-width: 640px; margin: 0 auto; }

/* ---------- Rechtstexte ---------- */
.legal { color: var(--white); }
.legal h1 { color: var(--white); }
.legal h2 { font-size: 18px; line-height: 27px; font-weight: 500; text-transform: uppercase; color: var(--gold); padding: 30px 0 10px; }
.legal h3 { font-size: 16px; line-height: 27px; font-weight: 500; color: var(--gold); padding: 16px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 27px; font-weight: 500; }
.legal ul { padding: 0 0 16px 22px; }
.legal a { overflow-wrap: anywhere; }
.legal h1, .legal h2, .legal h3, .toggle summary { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--black); color: var(--white); border-top: 1px solid var(--gold); }
.site-footer .cols { padding: var(--row) 0 115px; }
.f-title { font-size: 20px; line-height: 20px; font-weight: 500; padding-bottom: 20px; }
.f-title-2 { font-size: 19px; line-height: 19px; font-weight: 500; padding-bottom: 20px; }
.f-faq, .f-themen { font-size: 14px; line-height: 30px; font-weight: 500; }
.f-faq li, .f-themen li { list-style: none; }
.f-faq li::before { content: "+ "; color: var(--white); }
.f-social { display: flex; justify-content: center; padding: var(--row) 0; margin-bottom: 8px; }
.f-social a { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 2px solid var(--gold); border-radius: 50%; color: var(--gold); }
.f-social svg { width: 23px; height: 23px; }
.f-legal { text-align: center; font-size: 16px; line-height: 16px; font-weight: 400; text-transform: uppercase; padding: 0 0 40px; }
.f-legal a { color: var(--white); }
.f-legal span { padding: 0 12px; }

/* ---------- 404 / Danke ---------- */
.simple { min-height: 280px; display: flex; align-items: center; }

/* =========================================================
   Tablet (bis 980 px): Spalten untereinander, Burger-Menü
   ========================================================= */
@media (max-width: 980px) {
  html { scroll-padding-top: 190px; }
  .cols-2, .cols-3, .cols-2-3, .cols-3-2, .cols-1-3, .cols-3-1 { grid-template-columns: 1fr; row-gap: 30px; }
  .site-header { padding-bottom: 0; }
  .site-header .wrap { width: 88%; align-items: center; padding: 30px 0; }
  .logo, .logo img { width: 269px; }
  .nav { display: none; }
  .nav-mobile { display: block; position: static; }
  .nav-mobile summary { list-style: none; cursor: pointer; width: 32px; height: 32px; color: var(--gold); }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile summary svg { width: 32px; height: 32px; }
  .nav-mobile .ic-close { display: none; }
  .nav-mobile[open] .ic-open { display: none; }
  .nav-mobile[open] .ic-close { display: inline-block; }
  .nav-mobile ul { list-style: none; position: absolute; left: 6%; right: 6%; top: 100%; background: rgba(0, 0, 0, .85); padding: 17px; }
  .nav-mobile a { display: block; padding: 10px 15px; font-size: 14px; font-weight: 500; line-height: 27px; color: var(--gold); }
  .themen { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr 1fr; }
  .kacheln, .fragen { grid-template-columns: 1fr; }
  .kachel { min-height: 0; }
  .person-img { max-width: 413px; }
}

/* =========================================================
   Handy (bis 767 px): Schriftgrößen wie im Original
   ========================================================= */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .display { font-size: 28px; line-height: 1.1; }
  .display.tight { line-height: 28px; }
  .eyebrow { font-size: 16px; line-height: 16px; }
  .btn { font-size: 16px; line-height: 27.2px; padding: 4.8px 16px; }
  .btn:hover { padding-right: 36px; }
  .btn::after { right: 12px; width: 12px; height: 12px; margin-top: -6px; }
  .btn-call { display: inline-block; padding-left: 32px; }
  .btn-call:hover { padding-right: 16px; }
  .hero { height: 800px; background-image: var(--img-m); background-position: var(--pos-m, 50% 100%); }
  .hero .wrap { width: 80%; }
  .hero-text { top: var(--top-m, 80px); left: 15px; right: 15px; text-align: left; }
  .hero-title { font-size: 28px; line-height: 30.8px; }
  .hero-sub { font-size: 16px; line-height: 19.2px; font-weight: 400; }
  .hero .btn { margin-top: 30px; }
  .hero .btn-call { display: table; margin-top: 30px; }
  .team { height: 800px; background-image: var(--img-m); }
  .bg-muster { background-image: url("../img/muster-m.jpg"); }
  .themen { grid-template-columns: 1fr; }
  .thema { padding-bottom: 17px; }
  .reviews { grid-template-columns: 1fr; }
  .kontakt-items { row-gap: 50px; }
  .kontakt-item .value { overflow-wrap: anywhere; }
  .kuendigung .lead-up { font-size: 23px; }
  .form { grid-template-columns: 1fr; }
  .karte { min-height: 520px; }
  .f-faq, .f-themen { line-height: 28px; }
  .legal h1 { font-size: 28px; }
  .legal h2 { font-size: 16px; line-height: 24px; }
  .intro p + h2.display { font-size: 16px; line-height: 16px; font-weight: 500; color: var(--gold); padding-top: 14px; }
  .toggle summary { padding-right: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn::after { transition: none; }
}

/* ---------- Hilfsklassen (statt Inline-Styles, wegen CSP) ---------- */
.pt0 { padding-top: 0 !important; } .pb0 { padding-bottom: 0 !important; }
.pt20 { padding-top: 20px; } .pt30 { padding-top: 30px; }
.fw500 { font-weight: 500; } .small { font-size: 13px; line-height: 20px; } .big { font-size: 20px; line-height: 28px; }
.zitat { margin: 0; }
.kicker { font-size: 16px; line-height: 30px; }
.kacheln.colflow { grid-template-rows: auto auto; grid-auto-flow: column; }

/* ---------- Keyvisuals je Seite ---------- */
.hero-start     { --img: url("../img/hero-start.jpg");     --img-m: url("../img/hero-start-m.jpg");     --pos: 100% 100%; --top: 148px; --top-m: 30px; }
.hero-wir       { --img: url("../img/hero-wir.jpg");       --img-m: url("../img/hero-wir-m.jpg");       --pos: 50% 0%;    --top: 103px; }
.hero-angebot   { --img: url("../img/hero-angebot.jpg");   --img-m: url("../img/hero-angebot-m.jpg");   --pos: 50% 100%; }
.hero-arbeiten  { --img: url("../img/hero-arbeiten.jpg");  --img-m: url("../img/hero-arbeiten-m.jpg");  --pos: 50% 100%; }
.hero-karriere  { --img: url("../img/hero-karriere.jpg");  --img-m: url("../img/hero-karriere-m.jpg");  --pos: 50% 0%;    --top: 170px; }
.hero-kontakt   { --img: url("../img/hero-kontakt.jpg");   --img-m: url("../img/hero-kontakt-m.jpg");   --pos: 0% 50%; }
.hero-interview { --img: url("../img/hero-interview.jpg"); --img-m: url("../img/hero-interview-m.jpg"); --pos: 50% 0%; }
.hero-slide { --top: 455px; --left: 90px; }
.hero-slide.hero-nobtn { --top: 482px; }
.hero-right .hero-text { left: 75px; right: 0; }
.team-wir      { --img: url("../img/team-wir.jpg");      --img-m: url("../img/team-wir-m.jpg");      --pos: 50% 0%; }
.team-arbeiten { --img: url("../img/team-arbeiten.jpg"); --img-m: url("../img/team-arbeiten-m.jpg"); --pos: 50% 50%; height: 1000px; }

@media (max-width: 980px) {
  .kacheln.colflow { grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 767px) {
  .team-arbeiten { height: 800px; }
}

/* ---------- Rechtstexte (Fassung wie fortbildungsvereinbarung.de) ---------- */
.legal address { font-style: normal; font-size: 15px; line-height: 27px; font-weight: 500; padding-bottom: 16px; }
.legal h2 + h3 { padding-top: 6px; }

/* ---------- Kartenausschnitt (festes Bild, Klick öffnet Google Maps) ---------- */
.karte-bild { position: relative; background: var(--gold); }
.karte-link { position: relative; display: block; color: var(--black); }
.karte-link:hover { opacity: 1; }
.karte-link img { width: 100%; height: 825px; object-fit: cover; }
.karte-hinweis { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.karte-adresse { background: rgba(0, 0, 0, .78); color: var(--white); padding: 6px 14px; font-size: 15px; line-height: 24px; font-weight: 500; }
.karte-link:hover .btn { padding-right: 44px; }
.karte-link:hover .btn::after { opacity: 1; }
.karte-quelle { position: absolute; right: 8px; bottom: 6px; margin: 0; padding: 0 6px; font-size: 11px; line-height: 18px; background: rgba(255, 255, 255, .75); color: #555; }
.karte-quelle a { color: #555; }
@media (max-width: 767px) {
  .karte-link img { height: 560px; }
  .karte-hinweis { bottom: 36px; width: 86%; }
}

/* Kartennadel: liegt genau in der Bildmitte (Kartenbilder sind auf L 9, 8 zentriert), Spitze zeigt auf die Kanzlei */
.karte-pin { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -76px 0 0 -30px; border-radius: 50%;
  background: var(--black); border: 2px solid #b09b6a; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35); pointer-events: none; }
.karte-pin img { width: 34px; height: auto; }
.karte-pin::after { content: ""; position: absolute; left: 50%; top: 100%; margin: 1px 0 0 -8px;
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 13px solid #b09b6a; }
.karte-pin::before { content: ""; position: absolute; left: 50%; top: 100%; width: 18px; height: 6px; margin: 13px 0 0 -9px;
  border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(2px); }

/* Mockup fbv-Schriften: Überschriften in Instrument Serif, gemischte Schreibung */
.display, .hero-title, .kachel h3, .frage h3, .rating-score { font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: 0; }
.display { font-size: 52px; line-height: 1.15; padding-bottom: 18px; }
.hero-title { font-size: 60px; line-height: 1.08; padding-bottom: 22px; }
.kachel h3 { font-size: 32px; line-height: 1.1; }
.frage h3 { font-size: 26px; line-height: 1.15; }
.rating-score { font-size: 56px; }
.toggle summary { font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.kicker, .eyebrow { font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; }
.nav-main a { font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; text-transform: none; }
@media (max-width: 767px) {
  .display { font-size: 36px; line-height: 1.15; }
  .hero-title { font-size: 40px; line-height: 1.1; }
  .intro p + h2.display { font-family: var(--font); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
}

/* Gold auf hellem Grund durchgehend #7A6838 (gegen Weiß 5,4:1) – Text, Symbole, Schaltflächen (Daniel, 04.11.2026);
   goldene Schaltflächen dort mit weißer Schrift. Auf Schwarz bleibt #B09B6A (7,7:1). */
.bg-white, .bg-muster { --gold: #7a6838; }
.bg-white .btn-gold, .bg-muster .btn-gold { color: var(--white); border-color: var(--gold); }
/* Handy: Text oberhalb des Motivs statt darüber; das Bild schließt unten an, das Motiv beginnt unter den Schaltflächen */
@media (max-width: 767px) {
  .hero:not(.hero-empty) { height: auto; background-color: var(--black); background-size: 100% auto; background-position: 50% 100%;
    padding: 34px 0 calc(var(--motiv-m, 1.2) * 100vw + 24px); }
  .hero:not(.hero-empty) .wrap { height: auto; }
  .hero:not(.hero-empty) .hero-text { position: static; }
  .hero-start { --motiv-m: 1.27; } .hero-wir { --motiv-m: 1.25; } .hero-kontakt { --motiv-m: 1.19; }
  .hero-arbeiten { --motiv-m: 1.12; } .hero-karriere { --motiv-m: 1.18; } .hero-angebot { --motiv-m: .95; }
}
/* Menü: Burger bis 1199 px (darüber passt die Leiste neben das Logo; vorher rutschte HOME ans Logo
   und die Punkte brachen zweizeilig um). Geöffnetes Menü deckt die Seite vollständig ab. */
@media (min-width: 981px) and (max-width: 1199px) {
  .site-header .wrap { align-items: center; }
  .nav { display: none; }
  .nav-mobile { display: block; position: static; }
  .nav-mobile summary { list-style: none; cursor: pointer; width: 32px; height: 32px; color: var(--gold); }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  .nav-mobile summary svg { width: 32px; height: 32px; }
  .nav-mobile .ic-close { display: none; }
  .nav-mobile[open] .ic-open { display: none; }
  .nav-mobile[open] .ic-close { display: inline-block; }
  .site-header { --hh: 163px; }
}
@media (max-width: 1199px) {
  .site-header { --hh: 172px; }
  html:has(.nav-mobile[open]) { overflow: hidden; }  /* nur html: overflow am body würde den Kopf aus "sticky" lösen */
  .nav-mobile ul { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--hh)); height: calc(100dvh - var(--hh));
    overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px 0 48px; background: var(--black);
    border-top: 1px solid rgba(176, 155, 106, .45); box-shadow: 0 50vh 0 0 var(--black); }
  .nav-mobile li { width: 88%; margin: 0 auto; }  /* bündig mit dem Logo */
  .nav-mobile li:nth-child(-n+6) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav-mobile a { padding: 16px 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: .08em; color: #b09b6a; }
  .nav-mobile a[aria-current] { color: var(--white); }
  .nav-mobile li:nth-child(7) { margin-top: 22px; }
  .nav-mobile li:nth-child(n+7) a { padding: 9px 0; font-size: 15px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .82); }
}
@media (min-width: 981px) and (max-width: 1199px) { .nav-mobile li { width: 80%; } }
/* Startseite, kleine Laptops: Löwe rückt sonst unter den Text (Motiv ab 52 % der Bildbreite) */
@media (min-width: 981px) and (max-width: 1199px) {
  .hero-start { height: auto; background-color: var(--black); background-size: 100% auto; background-position: 50% 100%; padding: 90px 0 calc(62.5vw + 24px); }
  .hero-start .wrap { height: auto; } .hero-start .hero-text { position: static; padding-left: 75px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-start { background-color: var(--black); background-size: auto min(1000px, calc(117.2vw - 672px)); background-position: 100% 100%; }
}
/* Tablet: Desktop-Bild unter den Text statt dahinter (sonst liegt der Text auf dem Motiv) */
@media (min-width: 768px) and (max-width: 980px) {
  .hero:not(.hero-empty) { height: auto; background-color: var(--black); background-size: 100% auto; background-position: 50% 100%;
    padding: 70px 0 calc(62.5vw + 24px); }
  .hero:not(.hero-empty) .wrap { height: auto; }
  .hero:not(.hero-empty) .hero-text { position: static; }
}

/* Zitat als Text statt Grafik (Mockup) */
.zitat-text { background: var(--white) url("../img/muster.jpg") 50% 50% / cover no-repeat; padding: 90px 0; }
.zitat-text blockquote { position: relative; max-width: 760px; margin: 0 auto; padding: 0 70px; font-size: 22px; line-height: 36px; font-weight: 400; color: var(--black); }
.zitat-text blockquote { font-family: var(--serif); font-size: 30px; line-height: 1.3; }
.zitat-text blockquote::before, .zitat-text blockquote::after { position: absolute; font-size: 120px; line-height: 1; font-weight: 700; color: var(--gold); }
.zitat-text blockquote::before { content: "\201E"; left: 0; top: -40px; }
.zitat-text blockquote::after { content: "\201C"; right: 0; bottom: -70px; }
@media (max-width: 767px) {
  .zitat-text { background-image: url("../img/muster-m.jpg"); padding: 70px 0; }
  .zitat-text blockquote { padding: 0 0 0 0; font-size: 19px; line-height: 31px; }
  .zitat-text blockquote::before { position: static; display: block; font-size: 90px; height: 50px; }
  .zitat-text blockquote::after { position: static; display: block; text-align: right; font-size: 90px; height: 40px; margin-top: 10px; }
}