/*
Theme Name: Haus & Garten Sejmanovic Pro
Theme URI: https://example.com/
Author: Freisign GmbH
Author URI: https://www.freisign.gmbh
Description: Vollständiges responsives WordPress-Theme mit Bootstrap 5, Theme-Optionen, Leistungsseiten, Referenzen, Kontaktbereich sowie Footer für Impressum und Datenschutz.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: haus-und-garten
*/

@font-face {
  font-family: 'Noto Sans';
  src: url('NotoSans-SemiBoldItalic.woff2') format('woff2'),
      url('NotoSans-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}



:root {
  --hg-brown: #7f4a2c;
  --hg-brown-dark: #5d341f;
  --hg-green: #9ac318;
  --hg-green-dark: #73950f;
  --hg-green-soft: #eef5d4;
  --hg-cream: #f6f3ee;
  --hg-white: #ffffff;
  --hg-text: #2c251f;
  --hg-muted: #6d655f;
  --hg-border: rgba(127,74,44,.12);
  --hg-shadow-sm: 0 8px 24px rgba(44, 29, 18, .08);
  --hg-shadow-lg: 0 18px 44px rgba(44, 29, 18, .16);
  --hg-radius-sm: .8rem;
  --hg-radius: 1rem;
  --hg-radius-lg: 1.4rem;
  --hg-header-height: 108px;
  --bs-primary: var(--hg-brown);
  --bs-primary-rgb: 127,74,44;
  --bs-secondary: var(--hg-green);
  --bs-secondary-rgb: 154,195,24;
  --bs-body-color: var(--hg-text);
  --bs-body-bg: #fff;
  --bs-link-color: var(--hg-brown);
  --bs-link-hover-color: var(--hg-brown-dark);
  --bs-border-color: var(--hg-border);
  --bs-font-sans-serif: 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--bs-font-sans-serif);
  color: var(--hg-text);
  background: linear-gradient(180deg, #f8f5f1 0%, #ffffff 220px);
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
.skip-link {
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 9999; background: #fff; padding: .75rem 1rem; border-radius: .5rem;
}
.site-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 1030;
}
.admin-bar .site-header { top: 32px; }
.site-branding-wrap { min-height: var(--hg-header-height); position: relative; }
.brand-logo-badge {
  width: clamp(96px, 10vw, 140px); height: clamp(96px, 10vw, 140px); border-radius: 50%; background: var(--hg-white);
  box-shadow: var(--hg-shadow-lg); display: flex; align-items: center; justify-content: center; padding: 1rem;
  position: absolute; left: 0; top: 50%; transform: translateY(-36%);
}
.brand-title img { max-height: 72px; width: auto; }
.brand-logo-badge img { width: 100%; }
.brand-offset { padding-left: clamp(110px, 12vw, 160px); }
.main-navigation .navbar-nav { gap: 1rem; }
.main-navigation .nav-link {
  color: var(--hg-brown); font-weight: 700; font-size: 1.1rem; padding: .75rem 1rem; font-style: italic;
}
.main-navigation .nav-link:hover,
.main-navigation .nav-link:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { color: var(--hg-green-dark); }
.hero-section { position: relative; min-height: clamp(460px, 75vh, 780px); display: flex; align-items: end; overflow: hidden; }
.hero-media, .hero-media img, .hero-overlay { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(36,21,8,.14) 45%, rgba(26,16,7,.6) 100%); }
.hero-content {
  position: relative; z-index: 2; width: min(100%, 760px); margin: 0 auto clamp(2rem, 6vw, 4rem); background: rgba(64,31,10,.72);
  color: var(--hg-white); text-align: center; padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: var(--hg-radius-lg); box-shadow: var(--hg-shadow-lg);
}
.hero-content h1, .section-title, .display-italic { font-family: 'Noto Sans'; font-style: italic; font-weight: 800; letter-spacing: .01em; }
.hero-content h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); margin-bottom: 1rem; }
.hero-content p { font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1.45; margin-bottom: 0; }
.section-padding { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-soft { background: var(--hg-cream); }
.section-title { color: var(--hg-brown); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 1rem; }
.lead-copy { color: var(--hg-muted); font-size: 1.08rem; max-width: 62ch; }
.card-surface, .service-card, .reference-card, .contact-card, .legal-card, .info-card {
  background: var(--hg-white); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow-sm); border: 1px solid var(--hg-border); height: 100%;
}
.service-card, .contact-card, .legal-card, .info-card { padding: 2rem; }
.reference-card img { border-radius: var(--hg-radius) var(--hg-radius) 0 0; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.reference-card-body { padding: 1.5rem; }
.service-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(154,195,24,.18); color: var(--hg-brown); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; margin-bottom: 1rem;
}
.badge-hg {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--hg-green-soft); color: var(--hg-green-dark); font-weight: 700; border-radius: 999px; padding: .45rem .8rem;
}
.btn-hg, .wp-block-button__link, input[type='submit'], button[type='submit'], .wpcf7-submit {
  background: var(--hg-brown); color: var(--hg-white); border: 0; border-radius: 999px; padding: .9rem 1.5rem; font-weight: 700;
}
.btn-hg:hover, .wp-block-button__link:hover, input[type='submit']:hover, button[type='submit']:hover, .wpcf7-submit:hover {
  background: var(--hg-green-dark); color: var(--hg-white);
}
.btn-outline-hg {
  border: 1px solid var(--hg-brown); color: var(--hg-brown); border-radius: 999px; padding: .9rem 1.5rem; font-weight: 700; background: transparent;
}
.btn-outline-hg:hover { background: var(--hg-brown); color: #fff; }
.form-control, .form-select, .wpcf7-form-control, input[type='text'], input[type='email'], input[type='tel'], textarea {
  border-radius: .85rem; border: 1px solid rgba(127,74,44,.18); padding: .9rem 1rem;
}
.page-hero {
  background: linear-gradient(135deg, rgba(127,74,44,.95), rgba(93,52,31,.92)); color: #fff; padding: 4rem 0 3.5rem;
}
.page-hero h1 { font-style: italic; font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 1rem; }
.content-area { padding: 3rem 0 5rem; }
.content-area p, .entry-content p { margin-bottom: 1rem; }
.entry-title, .page-title { color: var(--hg-brown); margin-bottom: 1rem; }
.meta-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.meta-list li { color: var(--hg-muted); }
.footer-top { padding: 3rem 0 2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.site-footer { background: #2c1f17; color: rgba(255,255,255,.86); }
.site-footer a { color: var(--hg-green); }
.footer-brand img { max-width: 220px; }
.footer-bottom { padding: 1.2rem 0; font-size: .95rem; }
.list-clean { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.archive-grid { display: grid; gap: 1.5rem; }
.contact-shortcode-box { background: var(--hg-green-soft); border-radius: var(--hg-radius); padding: 1.2rem; border: 1px dashed rgba(115,149,15,.4); }
@media (max-width: 991.98px) {
  :root { --hg-header-height: 92px; }
  .site-branding-wrap { padding: 1rem 0; }
  .brand-logo-badge { width: 84px; height: 84px; transform: translateY(-28%); }
  .brand-offset { padding-left: 96px; }
  .main-navigation .navbar-collapse { background: #fff; border-radius: 1rem; margin-top: 1rem; padding: .75rem; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
}
@media (max-width: 767.98px) {
  .admin-bar .site-header { top: 46px; }
  .brand-logo-badge { position: relative; inset: auto; transform: none; margin: 0 auto 1rem; }
  .brand-offset { padding-left: 0; text-align: center; }
  .brand-title img { max-height: 62px; margin: 0 auto; }
  .hero-section { min-height: 520px; align-items: center; }
  .hero-content { margin: 7rem 1rem 2rem; }
}