/* =============================================================
   GSG Neunkirchen – Gemeinnützige Siedlungsgesellschaft mbH
   Statischer Nachbau der bisherigen Joomla-Seite (Helix Ultimate /
   SP Page Builder). Maße, Farben und Abstände folgen dem Original.
   Keine externen Schriften, keine Cookies, keine Drittanbieter.
   ============================================================= */

:root {
  --red: #e3051a;
  --red-hover: #044cd0;      /* Link-Hover im Original */
  --ink: #252525;
  --slate: #464855;
  --grey-bg: rgba(170, 170, 170, .2);
  --card-blue: rgb(158, 169, 200);
  --topbar-bg: #333;
  --topbar-text: #aaa;
  --footer-bg: #171717;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 16px/24px var(--font);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--red); text-decoration: none; transition: color .4s, background-color .4s; }
a:hover, a:focus { color: var(--red-hover); }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }

.skip-link { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 10px 16px; z-index: 10001; }
.skip-link:focus { left: 0; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Container / Raster (wie Bootstrap 5 im Original) ---------- */
.container { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row { display: flex; flex-wrap: wrap; margin-inline: -15px; }
.col-100, .col-50, .col-33 { width: 100%; padding-inline: 15px; }
@media (min-width: 768px) {
  .col-50 { width: 50%; }
  .col-33 { width: 33.3333%; }
}

/* ---------- Top-Bar ---------- */
.top-bar { background: var(--topbar-bg); color: var(--topbar-text); font-size: 14px; line-height: 21px; padding: 8px 0; }
.top-bar a { color: var(--topbar-text); }
.top-bar a:hover { color: #fff; }
.contact-info { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; }
.contact-info li { white-space: nowrap; font-size: 90%; display: inline-flex; align-items: center; gap: 5px; }
.contact-info svg { width: 1em; height: 1em; flex: none; fill: currentColor; }
@media (min-width: 992px) { .contact-info { justify-content: flex-end; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 99; height: 120px; background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 120px; }
.logo { display: block; line-height: 0; }
.logo img { height: 100px; width: auto; }
.nav-wrap { display: flex; align-items: center; }
.main-nav { display: none; list-style: none; }
@media (min-width: 992px) { .main-nav { display: flex; } }
.main-nav a {
  display: block; padding: 0 15px; line-height: 120px;
  font: 400 14px/120px Arial, sans-serif; color: var(--ink);
}
.main-nav a:hover, .main-nav .active a, .main-nav a[aria-current="page"] { color: var(--red); }

.burger { display: inline-flex; align-items: center; height: 120px; margin-left: 9px; padding: 0; background: none; border: 0; cursor: pointer; }
.burger-icon { width: 25px; }
.burger-icon span { display: block; height: 2px; margin-bottom: 5px; background: #000; transition: background .3s; }
.burger-icon span:last-child { margin-bottom: 0; }
.burger:hover .burger-icon span { background: var(--red); }

/* ---------- Off-Canvas-Menü (rechts, 300 px) ---------- */
.offcanvas-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: .4s; z-index: 9999; }
.offcanvas-menu {
  position: fixed; top: 0; right: 0; width: 300px; height: 100%; background: #fff; z-index: 10000;
  transform: translateX(100%); visibility: hidden; transition: transform .4s, visibility .4s; overflow-y: auto;
}
body.offcanvas-active .offcanvas-overlay { opacity: 1; visibility: visible; }
body.offcanvas-active .offcanvas-menu { transform: none; visibility: visible; }
.offcanvas-menu .close-offcanvas { display: inline-flex; padding: 24px 16px 16px; background: none; border: 0; cursor: pointer; }
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(2) { opacity: 0; }
.offcanvas-menu .close-offcanvas .burger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.offcanvas-menu ul { list-style: none; padding: 0 16px; }
.offcanvas-menu li a { display: block; padding: 8px 16px; font-size: 16px; color: var(--ink); border-radius: 4px; }
.offcanvas-menu li a:hover, .offcanvas-menu li.active a { color: var(--red); }

/* ---------- Page-Builder-Elemente ---------- */
.section { padding: 100px 0 108px; }
.section.pad-75 { padding: 75px 0; }
.section.pad-39 { padding: 39px 0 1px; }
.section.grey { background: var(--grey-bg); }
.spacer { height: 40px; }

.addon-title {
  margin: 20px 0 40px; font-size: 40px; line-height: 55px; font-weight: 500; color: var(--slate);
}
.addon-title.lg { margin: 0 0 20px; font-size: 48px; line-height: 72px; }
.addon-title.center { text-align: center; }
@media (max-width: 1199.98px) { .addon-title.lg { font-size: 36px; line-height: 48px; } }
@media (max-width: 767.98px)  { .addon-title.lg { font-size: 28px; line-height: 36px; } .addon-title { font-size: 32px; line-height: 44px; } }

.content { font-size: 15px; line-height: 25px; color: var(--slate); }
.content p { margin: 0 0 16px; }
.content ul { margin: 0 0 16px; padding-left: 32px; }
.content.big { font-size: 18px; line-height: 32px; }
.content.xl { font-size: 20px; line-height: 32px; }
.content.xl li span, .content.xl p span { font-size: 18px; }
.content a { color: var(--red); }
.content a:hover { color: var(--red-hover); }

.section-img img { width: 100%; display: block; }
.figure { position: relative; margin: 0; }
.figure img { width: 100%; display: block; }
.figure figcaption { color: #fff; background: rgba(0, 0, 0, .7); padding: 10px 15px; font-size: 16px; line-height: 24px; }

/* Hero (SP-Slider im Original: 600 / 500 / 350 / 200 px) */
.hero { position: relative; height: 600px; overflow: hidden; background: #ddd; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 991.98px) { .hero { height: 500px; } }
@media (max-width: 767.98px) { .hero { height: 350px; } }
@media (max-width: 575.98px) { .hero { height: 200px; } }

.job-hero { position: relative; padding: 100px 0 124px; color: #fff; background: #556 center/cover no-repeat; }
.job-hero .addon-title { color: #fff; margin: 20px 0 40px; }

/* Leistungs-Karten (Startseite) */
.feature {
  margin-bottom: 30px; padding: 40px 30px; border-radius: 3px; text-align: center;
  color: rgba(255, 255, 255, .8); background: var(--card-blue);
}
.feature img { display: block; width: 100%; margin-bottom: 0; }
.feature h3 { margin: 10px 0; font-size: 20px; line-height: 26px; font-weight: 500; color: #fff; }
.feature h3 a { color: #fff; }
.feature p { margin: 0 0 16px; font-size: 16px; line-height: 26px; }
.feature .btn { margin-inline: auto; }

.btn {
  display: flex; width: fit-content; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px;
  font-size: 16px; line-height: 20px; font-weight: 400; color: #fff; background: var(--red); cursor: pointer;
}
.btn:hover, .btn:focus { color: #fff; background: #aaa; }
.content a.btn, .content a.btn:hover, .content a.btn:focus, .feature a.btn { color: #fff; }
.btn svg { width: 1em; height: 1em; fill: currentColor; }

/* Team / Personen */
.person { text-align: center; }
.person-image { margin-bottom: 20px; }
.person-image img { width: 100%; display: block; }
.person-name { display: block; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--ink); }
.person-sub, .person-email { display: block; margin-top: 5px; font-size: 14px; line-height: 21px; font-weight: 500; color: rgba(0, 0, 0, .4); }
.person-email:hover { color: var(--red); }
.person-intro { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink); }

/* Service-Zeilen (Logo + Text + Foto im Wechsel) */
.service-row .row { align-items: flex-start; }
.service-row .logo-img { display: block; margin-bottom: 0; }
@media (min-width: 768px) {
  .service-row .row.flip .text-col { order: 2; }
  .service-row .row.flip .photo-col { order: 1; }
}
@media (max-width: 767.98px) { .service-row .photo-col { margin-top: 20px; } }

/* Rechtstexte */
.legal { padding: 100px 0; }
.legal h1 { margin: 0 0 40px; font-size: 40px; line-height: 55px; font-weight: 500; color: var(--slate); }
.legal h2 { margin: 40px 0 10px; font-size: 24px; line-height: 32px; font-weight: 500; color: var(--slate); }
.legal p, .legal li, .legal address { font-size: 15px; line-height: 25px; color: var(--ink); }
.legal p { margin: 0 0 16px; }
.legal address { font-style: normal; margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 32px; }
.legal a { color: var(--red); }
.legal a:hover { color: var(--red-hover); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: #fff; font-size: 14px; line-height: 21px; }
.footer-inner { padding-block: 30px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-title { margin: 0 0 8px; font-size: 28px; line-height: 33.6px; font-weight: 500; color: #fff; }
.footer-menu { display: inline-block; list-style: none; margin: 0 -10px; }
.footer-menu li { display: inline-block; margin: 0 10px; }
.footer-menu a { display: block; color: #a2a2a2; }
.footer-menu a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ---------- Externes Formular (Vermietungen) – erst nach Klick laden ---------- */
.embed iframe { display: block; width: 100%; height: 1000px; border: 0; }
.embed-consent { padding: 40px; text-align: center; background: var(--grey-bg); border-radius: 3px; }
.embed-consent .content { max-width: 720px; margin-inline: auto; }
.embed-consent .btn { margin-inline: auto; }
.embed-note { font-size: 14px; line-height: 21px; }
.embed-fallback { margin: 16px 0 0; font-size: 14px; }