/* ============================================================
   Elektro Reiss GmbH – modernisiertes Stylesheet
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* Markenfarben behalten – Gelb & Rot bleiben die Identität */
  --color-primary: #E2001A;          /* Reiss-Rot */
  --color-primary-hover: #B80016;
  --color-accent: #FFD400;           /* Reiss-Gelb */
  --color-accent-soft: #FFE34D;

  /* Modernisierte Neutraltöne – kein reines Schwarz/Weiß */
  --color-text: #1C1F26;
  --color-text-muted: #5B6470;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F6F7F9;
  --color-dark: #2A2D34;
  --color-dark-2: #21242A;
  --color-border: #E6E8EC;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* Radien */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 9999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 6px 20px rgba(16,24,40,.08);
  --shadow-lg: 0 16px 40px rgba(16,24,40,.14);

  --font-base: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1240px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-primary-hover); }
h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: 1.18; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 var(--space-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 13px 26px; border-radius: var(--radius-md);
  font-family: inherit; font-weight: 700; font-size: 16px;
  border: none; cursor: pointer; transition: all .2s ease; text-align: center;
}
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-secondary { background: #fff; color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

/* ============================================================
   HEADER (gelbes Branding-Band)
   ============================================================ */
.site-header {
  background: #FFF93C;
  border-bottom: 4px solid var(--color-primary);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding-block: var(--space-6); flex-wrap: wrap;
}

/* Original REISS-Logo (links) */
.brand { display: block; line-height: 0; }
.brand img { width: auto; height: 110px; max-width: 100%; }

/* Original 50-Jahre- / Telefon-Logo (rechts) */
.header-logo { display: block; line-height: 0; }
.header-logo img { width: auto; height: 132px; max-width: 100%; }

/* ============================================================
   NAVIGATION (schwarzes Band)
   ============================================================ */
.site-nav {
  background: var(--color-dark);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.nav-inner { display: flex; align-items: center; justify-content: flex-start; }
.nav-menu {
  display: flex; list-style: none; margin: 0; padding: 0; gap: 2px;
}
.nav-menu a {
  display: block; padding: 16px 22px; color: #fff; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm); transition: background .2s ease, color .2s ease;
}
.nav-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-menu a.is-active { background: var(--color-primary); color: #fff; }

/* Dropdown / Submenü */
.has-submenu { position: relative; }
.submenu-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 22px; background: none; border: none; cursor: pointer;
  color: #fff; font-family: inherit; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm); transition: background .2s ease;
}
.submenu-toggle:hover, .has-submenu:hover .submenu-toggle,
.submenu-toggle[aria-expanded="true"] { background: rgba(255,255,255,.08); }
.submenu-toggle i { font-size: 12px; transition: transform .25s ease; }
.has-submenu:hover .submenu-toggle i,
.submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: 0; z-index: 110;
  min-width: 280px; margin: 0; padding: var(--space-2); list-style: none;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-submenu:hover .submenu,
.has-submenu .submenu.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu li { margin: 0; }
.submenu a {
  display: block; padding: 11px 16px; color: var(--color-text); font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm); background: none;
}
.submenu a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: 26px; line-height: 1;
}
.burger i { pointer-events: none; transition: transform .3s ease; }
.burger:hover i { transform: scale(1.05); }

/* ============================================================
   HERO / INTRO
   ============================================================ */
.section-hero { padding-block: var(--space-24) var(--space-16); }
.hero-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-16); align-items: start;
}
.hero-intro h1 {
  font-size: clamp(32px, 4vw, 48px); color: var(--color-primary); margin-bottom: var(--space-6);
}
.hero-lead { font-size: 20px; color: var(--color-text); }
.hero-intro p { color: var(--color-text-muted); }
.hero-sign { font-style: italic; color: var(--color-text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.service-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.service-box::before {
  content: ""; position: absolute; top: 0; left: var(--space-8); right: var(--space-8);
  height: 4px; background: var(--color-primary); border-radius: var(--radius-pill);
  transform: translateY(-2px);
}
.service-box h2 { font-size: 22px; color: var(--color-text); margin-bottom: var(--space-6); }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.service-list li {
  display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--color-text);
}
.service-list i {
  width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--color-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}

/* ============================================================
   LEISTUNGS-KARTEN
   ============================================================ */
.section-cards { padding-top: 0; }
.cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
}
.card {
  background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-title { font-size: 19px; padding: var(--space-6) var(--space-6) var(--space-8); margin: 0; color: var(--color-text); }
.card-sub { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-muted); font-style: italic; margin-top: 4px; }

/* ============================================================
   SPAR-TIPPS
   ============================================================ */
.section-tips { background: var(--color-bg-alt); }
.tips-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
}
.tip {
  background: #fff; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
  text-align: center; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.tip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-soft) 100%);
  color: var(--color-primary); font-size: 28px; margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.tip h3 { font-size: 19px; color: var(--color-text); margin-bottom: var(--space-3); }
.tip p { color: var(--color-text-muted); font-size: 15.5px; margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-dark); color: #cfd2d8; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12);
  padding-block: var(--space-16);
}
.footer-col h4 {
  color: #fff; font-size: 17px; margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-primary); display: inline-block;
}
.footer-col p { color: #cfd2d8; margin: 0; }
.footer-contact, .footer-services { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-contact li { display: flex; align-items: center; gap: var(--space-3); }
.footer-contact i { color: var(--color-accent); width: 18px; text-align: center; }
.footer-contact a { color: #cfd2d8; }
.footer-contact a:hover { color: var(--color-accent); }
.footer-services li { position: relative; padding-left: var(--space-4); }
.footer-services li::before { content: "–"; position: absolute; left: 0; color: var(--color-accent); }

.footer-bottom { background: var(--color-dark-2); padding-block: var(--space-6); }
.footer-bottom .container { text-align: center; }
.footer-privacy { color: #cfd2d8; text-decoration: underline; font-size: 14px; }
.footer-privacy:hover { color: var(--color-accent); }
.footer-copy { font-size: 13px; color: #9aa0ab; margin: var(--space-3) 0 0; }
.agency-branding { text-align: center; padding: var(--space-6) 0; }
.agency-branding p { font-size: 13px; color: #9aa0ab; margin: 0; }
.agency-branding i { color: red; }
.agency-branding a { color: #cfd2d8; }
.agency-branding a:hover { color: var(--color-accent); }

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(160%);
  width: min(960px, calc(100% - 32px)); z-index: 200;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  transition: transform .4s ease;
}
.cookie-banner.is-visible { transform: translateX(-50%) translateY(0); }
.cookie-banner p { margin: 0; font-size: 15px; color: var(--color-text-muted); flex: 1 1 380px; }
.cookie-actions { display: flex; gap: var(--space-3); }

/* ============================================================
   TO-TOP
   ============================================================ */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 150;
  width: 48px; height: 48px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: var(--color-primary); color: #fff; font-size: 18px;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-primary-hover); transform: translateY(-3px); }

/* ============================================================
   REVEAL-ANIMATIONEN
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   INHALTSSEITEN (404 / Datenschutz)
   ============================================================ */
.page-hero { background: var(--color-bg-alt); padding-block: var(--space-16); text-align: center; }
.page-hero h1 { color: var(--color-primary); font-size: clamp(28px, 4vw, 44px); }
.page-hero p { color: var(--color-text-muted); max-width: 640px; margin-inline: auto; }
.content-prose { max-width: 820px; }
.content-prose h2 { font-size: 24px; color: var(--color-text); margin-top: var(--space-12); }
.content-prose h2:first-child { margin-top: 0; }
.content-prose p { color: var(--color-text-muted); }
.error-code { font-size: clamp(80px, 16vw, 160px); font-weight: 800; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-4); -webkit-text-stroke: 2px var(--color-primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .tips-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-12); }
  .section-hero { padding-block: var(--space-12); }

  .header-inner { gap: var(--space-4); justify-content: center; text-align: center; }
  .brand img { height: 88px; }
  .header-logo { display: none; }

  /* Mobile-Navigation */
  .burger { display: flex; }
  .nav-menu {
    position: fixed; inset: 0 0 0 25%; top: 0;
    flex-direction: column; gap: 0; padding: var(--space-16) var(--space-6); background: var(--color-dark);
    transform: translateX(100%); transition: transform .3s ease; box-shadow: -8px 0 30px rgba(0,0,0,.3);
    z-index: 120; overflow-y: auto;
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu a { padding: 16px 14px; border-radius: var(--radius-sm); }

  /* Submenü mobil: aufklappbarer Block statt Hover-Dropdown */
  .has-submenu { width: 100%; }
  .submenu-toggle { width: 100%; justify-content: space-between; padding: 16px 14px; }
  .submenu {
    position: static; min-width: 0; box-shadow: none; background: rgba(255,255,255,.06);
    padding: 0; margin: 4px 0 4px 12px; border-radius: var(--radius-sm);
    display: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .submenu.is-open { display: block; }
  .has-submenu:hover .submenu { opacity: 1; visibility: visible; }
}

/* ============================================================
   ÜBER UNS – Chronik / Timeline
   ============================================================ */
.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before {
  content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 2px;
  background: var(--color-border);
}
.timeline-item { position: relative; padding: 0 0 var(--space-12) 56px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 8px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-year {
  display: inline-block; font-weight: 800; font-size: 15px; color: #fff;
  background: var(--color-primary); padding: 3px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.timeline-item h3 { font-size: 19px; margin-bottom: var(--space-2); }
.timeline-item p { color: var(--color-text-muted); margin: 0; }
.timeline-item.is-today .timeline-dot { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.timeline-item.is-today .timeline-year { background: var(--color-text); }

/* Chronik-Galerie */
.chronik-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6);
  margin-top: var(--space-16);
}
.chronik-gallery figure { margin: 0; }
.chronik-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.chronik-gallery img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Partner-Grid */
.partner-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6);
  margin-top: var(--space-8);
}
.partner-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm);
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.partner-card h3 { font-size: 16px; margin-bottom: var(--space-1); color: var(--color-text); }
.partner-card a { font-weight: 700; word-break: break-word; }

/* ============================================================
   REFERENZEN – Bereiche-Grid
   ============================================================ */
.ref-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4);
  margin-top: var(--space-8);
}
.ref-item {
  display: flex; align-items: center; gap: var(--space-3);
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6); font-weight: 600; color: var(--color-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ref-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.ref-item i { color: var(--color-primary); font-size: 18px; flex: 0 0 auto; }

.lead-text { font-size: 19px; color: var(--color-text); max-width: 760px; }

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-12); align-items: start;
  margin-top: var(--space-8);
}
.kontakt-info { display: grid; gap: var(--space-8); }
.kontakt-block h2 {
  font-size: 18px; color: var(--color-text); margin-bottom: var(--space-3);
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-primary); display: inline-block;
}
.kontakt-block p { color: var(--color-text-muted); margin: 0; }
.kontakt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kontakt-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.kontakt-list i { color: var(--color-primary); width: 20px; text-align: center; flex: 0 0 auto; }
.kontakt-list a { color: var(--color-primary); font-weight: 600; }

.kontakt-map {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border); line-height: 0;
}
.kontakt-map iframe { width: 100%; height: 460px; border: 0; display: block; }

@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .kontakt-map iframe { height: 340px; }
}

/* ============================================================
   LEISTUNGEN – Akkordeon
   ============================================================ */
.accordion { display: grid; gap: var(--space-4); margin-top: var(--space-8); max-width: 980px; }
.acc-item {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease;
}
.acc-item.is-open { box-shadow: var(--shadow-md); }
.acc-header {
  display: flex; align-items: center; gap: var(--space-6); width: 100%;
  padding: var(--space-4) var(--space-6); background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit;
}
.acc-thumb {
  width: 96px; height: 72px; flex: 0 0 96px; border-radius: var(--radius-md);
  object-fit: cover; background: var(--color-bg-alt);
}
.acc-title { flex: 1; font-size: 18px; font-weight: 800; color: var(--color-text); letter-spacing: -.01em; }
.acc-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt); color: var(--color-primary); font-size: 16px;
  transition: transform .25s ease, background .2s ease;
}
.acc-item.is-open .acc-icon { transform: rotate(180deg); background: var(--color-primary); color: #fff; }
.acc-header { cursor: pointer; }
.acc-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease;
}
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-content {
  overflow: hidden;
  padding: 0 var(--space-6) 0 calc(96px + var(--space-6) + var(--space-6));
  color: var(--color-text-muted);
}
.acc-item.is-open .acc-content { padding-bottom: var(--space-6); }
.acc-content p { margin: 0 0 var(--space-3); }
.acc-content p:last-child { margin-bottom: 0; }
.acc-content em { color: var(--color-text); font-style: italic; font-weight: 600; }
.acc-content ul { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.acc-content li { margin-bottom: var(--space-1); }

@media (max-width: 640px) {
  .acc-header { gap: var(--space-4); padding: var(--space-4); }
  .acc-thumb { width: 64px; height: 50px; flex-basis: 64px; }
  .acc-title { font-size: 16px; }
  .acc-content { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* E-Check-Block */
.echeck {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-12); align-items: start;
  margin-top: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--color-border);
}
.echeck-logo { width: 100%; max-width: 200px; height: auto; }
.echeck h2 { color: var(--color-primary); font-size: 26px; margin-bottom: var(--space-6); }
.echeck p { color: var(--color-text-muted); }
@media (max-width: 768px) {
  .echeck { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; }
  .echeck-logo { max-width: 160px; margin: 0 auto; }
  .echeck h2, .echeck p { text-align: left; }
}

/* ============================================================
   LEISTUNGEN – Textseite (Smart Home etc.)
   ============================================================ */
.feature-hero {
  width: 100%; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-top: var(--space-8); margin-bottom: var(--space-16);
}
.feature-hero img { width: 100%; height: auto; display: block; }

.feature-split {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: center;
}
.feature-split h2 { color: var(--color-text); font-size: 26px; margin-bottom: var(--space-2); }
.feature-subtitle { font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-6); }
.feature-text p { color: var(--color-text-muted); }
.feature-media img {
  width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}

.feature-cta {
  display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap;
  margin-top: var(--space-16); padding: var(--space-8);
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.feature-cta p { margin: 0; font-size: 18px; color: var(--color-text); flex: 1 1 320px; }
.feature-cta .accent { color: var(--color-primary); font-weight: 800; }
.feature-cta img { height: 80px; width: auto; }

@media (max-width: 768px) {
  .feature-hero { margin-bottom: var(--space-12); }
  .feature-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature-cta { gap: var(--space-6); }
}

/* Leistungs-Liste (z. B. Beleuchtungsarten) */
.feature-list-box {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-sm);
  position: relative;
}
.feature-list-box::before {
  content: ""; position: absolute; top: 0; left: var(--space-8); right: var(--space-8);
  height: 4px; background: var(--color-primary); border-radius: var(--radius-pill); transform: translateY(-2px);
}
.feature-list-box h3 { font-size: 18px; color: var(--color-text); margin-bottom: var(--space-6); }
.feature-list-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.feature-list-box li { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; color: var(--color-text); }
.feature-list-box li i { color: var(--color-primary); font-size: 15px; flex: 0 0 auto; }

/* Energieeffizienz – Themenblöcke (Text + Bild, alternierend) */
.feature-row {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-12); align-items: center;
  padding: var(--space-12) 0; border-top: 1px solid var(--color-border);
}
.feature-row h2 { color: var(--color-text); font-size: 24px; }
.feature-row p { color: var(--color-text-muted); }
.feature-row p:last-child { margin-bottom: 0; }
.feature-row strong { color: var(--color-text); font-weight: 800; }
.feature-row-media img {
  width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.feature-row.reverse .feature-row-text { order: 2; }
.feature-row.reverse .feature-row-media { order: 1; }
@media (max-width: 768px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) 0; }
  .feature-row.reverse .feature-row-text,
  .feature-row.reverse .feature-row-media { order: initial; }
}

/* Rechtstexte (Impressum / Datenschutz) */
.legal h2 { font-size: 22px; color: var(--color-primary); margin-top: var(--space-12); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 18px; color: var(--color-text); margin-top: var(--space-8); }
.legal p { color: var(--color-text-muted); }
.legal a { font-weight: 600; word-break: break-word; }
.legal ul { color: var(--color-text-muted); padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal .legal-card {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-8);
}
.legal .legal-card p { color: var(--color-text); margin: 0; }
.legal-toc { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-12); }
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.legal-toc a { color: var(--color-text); font-weight: 600; }
.legal-toc a:hover { color: var(--color-primary); }

/* ============================================================
   JOOMLA-EXPORT – Utility-Klassen (ersetzen Inline-Styles)
   ============================================================ */
.page-title { color: var(--color-primary); margin-bottom: var(--space-8); }
.page-title--tight { margin-bottom: var(--space-4); }
.text-center { text-align: center; }
.section-narrow { max-width: 820px; }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.intro-block { max-width: 820px; margin-bottom: var(--space-8); }
.intro-block h2 { color: var(--color-text); }

.error-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.error-lead { color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--space-8); }
.error-title { color: var(--color-text); }

/* Google-Maps-Container (Karte wird per JS geladen) */
.gmap-container {
  width: 100%; height: 460px; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--color-border); background: var(--color-bg-alt);
}
.gmap-container iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .gmap-container { height: 340px; } }

/* ============================================================
   FULL-WIDTH-HINWEIS (Joomla)
   Header- und Footer-Module liegen i. d. R. außerhalb des
   Beitrags-Containers und sind dadurch bereits volle Breite.
   Liegt ein Element doch im schmalen Beitrags-Container und
   soll volle Breite haben, .full-bleed verwenden:
   ============================================================ */
.full-bleed { width: 100vw; margin-left: calc(-50vw + 50%); }

/* ============================================================
   JOOMLA-MENÜ (ul.mod-menu) – Styling im Original-Look
   Greift auf die nativen Joomla-Menü-Klassen. Das Menü liegt
   als ul.mod-menu direkt im div.header.
   ============================================================ */
.header ul.mod-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px;
  background: var(--color-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  position: relative; z-index: 100;
}
/* Container-Breite + zentriert wie .container */
.header ul.mod-menu {
  width: 100%;
  padding-inline: max(var(--space-6), calc((100% - var(--container)) / 2));
}

.header ul.mod-menu > li.nav-item { position: relative; display: flex; }

/* Menü-Links und nicht-verlinkte Eltern-Überschriften gleich stylen */
.header ul.mod-menu > li > a,
.header ul.mod-menu > li > .mod-menu__heading {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 22px; color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease; white-space: nowrap;
}
.header ul.mod-menu > li > a:hover,
.header ul.mod-menu > li > .mod-menu__heading:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Aktiver Punkt rot (Joomla setzt .current.active) */
.header ul.mod-menu > li.current > a,
.header ul.mod-menu > li.active > a { background: var(--color-primary); color: #fff; }

/* Pfeil bei Eltern mit Untermenü */
.header ul.mod-menu > li.deeper.parent > .mod-menu__heading::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 12px; transition: transform .25s ease;
}
.header ul.mod-menu > li.deeper.parent:hover > .mod-menu__heading::after,
.header ul.mod-menu > li.deeper.parent.is-open > .mod-menu__heading::after { transform: rotate(180deg); }

/* Untermenü (Dropdown) */
.header ul.mod-menu .mod-menu__sub {
  list-style: none; margin: 0; padding: var(--space-2);
  position: absolute; top: 100%; left: 0; z-index: 110;
  min-width: 290px; background: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.header ul.mod-menu > li.deeper.parent:hover .mod-menu__sub,
.header ul.mod-menu > li.deeper.parent.is-open .mod-menu__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.header ul.mod-menu .mod-menu__sub li { display: block; }
.header ul.mod-menu .mod-menu__sub a {
  display: block; padding: 11px 16px; color: var(--color-text);
  font-weight: 600; font-size: 15px; text-decoration: none; border-radius: var(--radius-sm);
}
.header ul.mod-menu .mod-menu__sub a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

/* Burger-Button (wird per JS eingefügt) – Desktop versteckt */
.jburger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: #1C1F26; font-size: 26px; line-height: 1;
}
.jburger i { pointer-events: none; transition: transform .3s ease; }

/* (Alter Joomla-Menü-Mobil-Block entfernt – ersetzt durch die
   finale MOBIL-KORREKTUREN-Sektion weiter unten.) */

/* ============================================================
   HEADER-MODUL Absicherung (falls Joomla das Custom-HTML-Modul
   in einen Wrapper packt). Header-Band & Nav volle Breite,
   damit das Layout auch im Modul-Container stimmt.
   ============================================================ */
.site-header, .site-nav { width: 100%; }
.moduletable .site-nav, .custom .site-nav { position: relative; }

/* ============================================================
   MOBIL-KORREKTUREN (final, überschreibt alles davor)
   Ziel: alles einspaltig, seitliches Padding, saubere Umbrüche,
   nichts ragt über den Rand, Joomla-Menü als Burger.
   ============================================================ */
@media (max-width: 820px) {

  /* Grund: niemals horizontaler Überlauf, Wörter brechen um */
  html, body { overflow-x: hidden; }
  * { min-width: 0; }
  img { max-width: 100%; height: auto; }
  h1, h2, h3, h4, p, a, li, span { overflow-wrap: anywhere; word-break: break-word; }

  /* Container: garantiert seitliches Padding, volle aber begrenzte Breite */
  .container { width: 100%; max-width: 100%; padding-inline: 18px; }

  /* ALLES einspaltig */
  .hero-grid,
  .cards-grid,
  .tips-grid,
  .footer-grid,
  .kontakt-grid,
  .feature-split,
  .feature-row,
  .echeck,
  .partner-grid,
  .ref-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* Abstand zwischen vormaligen Grid-Kindern, da jetzt block */
  .cards-grid > *,
  .tips-grid > *,
  .partner-grid > *,
  .ref-grid > *,
  .kontakt-info > *,
  .feature-split > *,
  .echeck > * { margin-bottom: 20px; }
  .cards-grid > *:last-child,
  .tips-grid > *:last-child { margin-bottom: 0; }

  /* feature-row: Bild immer unter Text, kein order-Trick */
  .feature-row { padding: 24px 0; }
  .feature-row.reverse .feature-row-text,
  .feature-row.reverse .feature-row-media { order: initial; }
  .feature-row-media { margin-top: 16px; }

  /* Karten / Boxen: volle Breite, nichts ragt über */
  .card, .tip, .partner-card, .ref-item,
  .service-box, .feature-list-box, .feature-cta,
  .legal-card, .gmap-container, .kontakt-map {
    width: 100%; max-width: 100%; margin-left: 0; margin-right: 0;
  }

  /* Akkordeon mobil: Bild kleiner, Text unter Titel sauber */
  .acc-header { gap: 12px; padding: 14px 16px; }
  .acc-thumb { width: 64px; height: 50px; flex: 0 0 64px; }
  .acc-title { font-size: 16px; }
  .acc-content { padding: 0 16px 0 16px; }
  .acc-item.is-open .acc-content { padding-bottom: 16px; }

  /* Überschriften etwas kleiner, damit nichts überläuft */
  .hero-intro h1, .page-title, .page-hero h1 { font-size: clamp(26px, 7vw, 34px); }
  .hero-lead { font-size: 17px; }

  /* Hero-Buttons volle Breite, untereinander */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  /* Header-Band: Logo zentriert, 50-Jahre-Logo ausblenden (Platz) */
  .header-inner { justify-content: center; gap: 12px; }
  .header-logo { display: none; }
  .brand img { height: 84px; }

  /* E-Check-Logo zentriert */
  .echeck-logo { max-width: 160px; margin: 0 auto 16px; }
}

/* ============================================================
   NATIVES JOOMLA-MENÜ – Burger + Mobil (robust, am Ende)
   ============================================================ */
/* Burger-Button (von JS vor das ul.mod-menu eingefügt) – Desktop aus */
.jburger { display: none; }

@media (max-width: 820px) {
  /* Burger als schlanke Leiste im Fluss (KEINE absolute Position),
     damit er unabhängig vom Modul-Wrapper immer sichtbar ist.       */
  .jburger {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: auto; padding: 16px; box-sizing: border-box;
    background: var(--color-dark); border: none; cursor: pointer;
    color: #fff; font-size: 26px; line-height: 1;
  }
  .jburger i { pointer-events: none; transition: transform .3s ease; }

  /* Menü-Band wird im geschlossenen Zustand ausgeblendet (nur Burger sichtbar) */
  .header ul.mod-menu, ul.mod-menu {
    display: none;
    flex-direction: column; gap: 0; flex-wrap: nowrap;
    list-style: none; margin: 0; padding: 0;
    background: var(--color-dark);
  }
  /* Geöffnet: Menü als Block unter dem Burger ausklappen */
  .header ul.mod-menu.is-open, ul.mod-menu.is-open { display: block; }

  .header ul.mod-menu > li, ul.mod-menu > li { display: block; width: 100%; border-top: 1px solid rgba(255,255,255,.08); }
  .header ul.mod-menu > li > a,
  .header ul.mod-menu > li > .mod-menu__heading,
  ul.mod-menu > li > a,
  ul.mod-menu > li > .mod-menu__heading {
    display: block; padding: 15px 24px; color: #fff; font-weight: 600;
    text-decoration: none; cursor: pointer; background: none;
  }
  /* Untermenü mobil aufklappbar */
  .header ul.mod-menu .mod-menu__sub, ul.mod-menu .mod-menu__sub {
    position: static; min-width: 0; box-shadow: none; opacity: 1; visibility: visible;
    transform: none; transition: none; background: rgba(0,0,0,.25);
    list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden;
  }
  .header ul.mod-menu > li.is-open .mod-menu__sub,
  ul.mod-menu > li.is-open .mod-menu__sub { max-height: 600px; }
  .header ul.mod-menu .mod-menu__sub a, ul.mod-menu .mod-menu__sub a {
    display: block; padding: 12px 40px; color: #cfd2d8; text-decoration: none; border-top: 1px solid rgba(255,255,255,.06);
  }
}