/* martinastaab.de – eigene Ergänzungen zum Sandbox-Theme */

/* Saira Semi Condensed 600/700 (latin, Google Fonts, OFL) – das Theme laedt in style.css nur 100-500 */
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/saira/saira-semi-condensed-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Saira Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/saira/saira-semi-condensed-latin-700.woff2') format('woff2'); }

/* Hero-Foto als echtes <img> (LCP, srcset) statt JS-Hintergrund */
.hero-media { overflow: hidden; }
@media (min-width: 992px) { .hero-media { height: 100%; } }
.hero-media picture, .hero-media img { display: block; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 25%; }
@media (max-width: 991.98px) {
  .hero-media { height: 58vh; min-height: 320px; max-height: 560px; }
}

/* Sprungziele unter dem fixierten Header freihalten */
section[id], footer[id], [id="bewertung"], [id="mietwert"] { scroll-margin-top: 90px; }

/* Hamburger-Button ist im Theme-CSS ausgeblendet (Relikt des leeren Menüs) – auf Mobil wieder einblenden */
@media (max-width: 991.98px) { button.hamburger { display: flex !important; } }

/* Fettschrift: echtes Gewicht 600 statt kuenstlich aufgedicktem 700 (Theme setzt 700, Saira war nur bis 500 geladen) */
b, strong, th, .fw-bold, .fw-bolder, .dropdown-item, .more, .btn, .badge, .breadcrumb-item.active, .nav-link.active { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }

/* Claim */
.claim { color: #8e3960; letter-spacing: .08em; }

/* Bewertungs-Wizard */
.wizard-box { background: #e9e4e6; }
.wizard-box .form-control, .wizard-box .form-select { background: #fff; }
.range-result { background: #fff; border-left: 4px solid #8e3960; border-radius: .3rem; padding: 1rem 1.2rem; }
.range-result .range-value { font-size: 1.5rem; font-weight: 600; color: #8e3960; font-variant-numeric: tabular-nums; }

/* CTA-Band und Footer */
.cta-band { background: linear-gradient(120deg, #8e3960 0%, #a35e7d 100%); }
.btn-outline-white { border-color: #fff; color: #fff; }
.btn-outline-white:hover, .btn-outline-white:focus { background: #fff; color: #8e3960; border-color: #fff; }
.site-footer { background: #f6f3f4; }
.site-footer hr { border-color: #e6dce1; opacity: 1; }

/* Prozess-Schritte */
.process-step { display: flex; gap: 1rem; align-items: flex-start; }
.process-step .step-no { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #8e3960; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.process-step h3 { font-size: 1.15rem; margin-bottom: .3rem; }

/* Preistabelle */
.price-table { width: 100%; font-size: .95rem; }
.price-table th, .price-table td { padding: .55rem .7rem; border-bottom: 1px solid #e6dce1; vertical-align: top; }
.price-table th { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6f5f67; }
.price-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Regionen-Chips */
.region-chip { display: inline-block; border: 1px solid #e6dce1; border-radius: 2rem; padding: .35rem .95rem; margin: .25rem .3rem .25rem 0; font-size: .95rem; color: #241b20; background: #fff; text-decoration: none; }
.region-chip:hover, .region-chip:focus { border-color: #8e3960; color: #8e3960; }

/* Karten-Ueberschriften (Ratgeber, Regionen, Angebote, Referenzen) */
.ref-card h2, .ref-card h3, .ref-card h2 a, .ref-card h3 a { font-weight: 600; }

/* Referenz-Karten */
.facts .fact + .fact::before { content: " · "; color: #6f5f67; }
.ref-card { border: 0; box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07); }
.ref-card .card-img-top img { width: 100%; height: auto; display: block; }

/* Ratgeber */
.article-body { max-width: 72ch; font-size: 1.05rem; }
.article-body h2 { font-size: 1.6rem; margin-top: 2.4rem; margin-bottom: .8rem; }
.article-body h3 { font-size: 1.25rem; margin-top: 1.8rem; margin-bottom: .6rem; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.article-body li { margin-bottom: .4rem; }
.article-body table { width: 100%; font-size: .95rem; margin-bottom: 1.4rem; }
.article-body th, .article-body td { padding: .45rem .6rem; border-bottom: 1px solid #e6dce1; vertical-align: top; text-align: left; }
.article-body blockquote { border-left: 4px solid #8e3960; padding-left: 1rem; color: #5b4c53; }
.article-body .hinweis { background: #f3e4ec; border-radius: .3rem; padding: 1rem 1.2rem; }
.author-box { display: flex; gap: 1.2rem; align-items: flex-start; background: #fff; border-radius: .4rem; padding: 1.2rem 1.4rem; box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07); }
.author-img { width: 88px; height: 88px; object-fit: cover; object-position: center top; border-radius: 50%; flex: 0 0 88px; }
.cta-box { background: #fff; border-radius: .4rem; padding: 1.6rem; box-shadow: 0 .25rem 1.75rem rgba(30, 34, 40, .07); }
.review footer { color: #6f5f67; }

/* Sticky-Kontaktleiste (nur mobil) */
.contact-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; gap: 1px; background: #8e3960; box-shadow: 0 -2px 12px rgba(0,0,0,.18); }
.contact-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: .5rem .25rem; color: #fff; font-size: .8rem; line-height: 1.1; text-decoration: none; }
.contact-bar a i { font-size: 1.35rem; margin-bottom: .15rem; }
.contact-bar a:hover, .contact-bar a:focus { background: rgba(255,255,255,.14); color: #fff; }
@media (min-width: 992px) { .contact-bar { display: none; } }
@media (max-width: 991.98px) { body { padding-bottom: 56px; } }

/* Barrierefreiheit: Social-Icons als ausreichend große Klickflächen, sichtbarer Fokus */
.nav.social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
a:focus-visible, button:focus-visible { outline: 2px solid #8e3960; outline-offset: 2px; }