:root{--ink:#193e50;--teal:#187c86;--pale:#eaf8f7;--accent:#f4c51c;--footer:#466888;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--pale)}a{color:inherit}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:white;padding:1rem;z-index:10}.hero{height:clamp(240px,31.25vw,500px);background:#4d3c69 url('../img/thor-hero.png') center center/cover no-repeat}.hero__inner{max-width:1280px;margin:auto;padding:1.5rem}.hero__tag{position:absolute;left:-9999px}.navigation{background:#fff;border-bottom:1px solid #d2e4e3}.navigation__inner{max-width:1280px;margin:auto;display:flex;gap:clamp(.7rem,3vw,3rem);align-items:center;flex-wrap:wrap;padding:1rem 1.5rem}.navigation a{text-decoration:none;font-weight:700}.navigation a:hover,.navigation a:focus-visible{color:var(--teal);text-decoration:underline}.intro{max-width:980px;margin:0 auto;padding:3.2rem 1.5rem 1.2rem;text-align:center}.eyebrow{color:var(--teal);font-weight:800;letter-spacing:.12em}.intro h1{font-size:clamp(1.65rem,3.3vw,2.8rem);line-height:1.15;margin:.5rem 0 1.2rem}.intro>p:not(.eyebrow){font-size:clamp(1rem,1.55vw,1.25rem);line-height:1.65}.intro__hint{font-weight:700;color:var(--teal)}.product-map{padding:0 1rem 4rem}.product-map__inner{max-width:1420px;margin:auto;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(240px,.65fr);align-items:center;gap:1rem}.house img{width:100%;height:auto;display:block}.product-links{display:grid;gap:1.25rem}.product{display:flex;flex-direction:column;justify-content:center;min-height:145px;background:#fff;border-left:5px solid var(--teal);padding:1.2rem 1.5rem;text-decoration:none;box-shadow:0 6px 22px #193e501a;border-radius:4px;transition:transform .15s,box-shadow .15s}.product[href]:hover,.product[href]:focus-visible{transform:translateY(-3px);box-shadow:0 10px 28px #193e5030}.product__title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800}.product__text{font-size:1.02rem;margin-top:.35rem}.product__action{color:var(--teal);font-weight:700;margin-top:.8rem}.product--pending .product__action{color:#6e858d;font-weight:400}.footer{background:var(--footer);color:#fff}.footer__inner{max-width:1280px;margin:auto;padding:2.3rem 1.5rem;display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap;line-height:1.8}.footer a{color:#fff}@media(max-width:760px){.hero{height:220px;background-position:center}.product-map__inner{grid-template-columns:1fr}.product-links{grid-template-columns:1fr}.product{min-height:110px}.intro{padding-top:2rem}.navigation__inner{gap:1rem}}


/* THOR: GENBOX-Schriften und Navigation */

/* Menü rechtsbündig */
.navigation__inner {
    justify-content: flex-end;
}

/* THOR ÜBERSPANNUNGSSCHUTZ – GENBOX-Blau */
.intro .eyebrow {
    color: #1094DF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
}

/* Schutz für Ihr Zuhause ... – GENBOX-Grün */
.intro h1 {
    color: #0B7475;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4.4vw, 56px);
    font-weight: 400;
    line-height: 1.15;
}

@media (max-width: 760px) {
    .intro .eyebrow {
        font-size: 26px;
    }
}


/* THOR: GENBOX-Menü im Hero */
.hero {
    position: relative;
}

.hero__inner {
    max-width: none;
    padding: 0 28px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.thor-nav {
    position: relative;
    z-index: 20;
    font-family: Arial, Helvetica, sans-serif;
}

.thor-nav__menu,
.thor-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thor-nav__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.thor-nav__menu > li {
    position: relative;
}

.thor-nav a {
    display: block;
    padding: 18px 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}

.thor-nav a:hover,
.thor-nav a:focus-visible {
    color: #16D8D8;
}

.thor-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.thor-nav__submenu a {
    color: #273451;
    padding: 12px 16px;
    font-size: 16px;
    text-shadow: none;
}

.thor-nav__dropdown:hover .thor-nav__submenu,
.thor-nav__dropdown:focus-within .thor-nav__submenu {
    display: block;
}

.thor-nav__submenu a:hover,
.thor-nav__submenu a:focus-visible {
    color: #0B7475;
    background: #E4F0ED;
}

.product__title {
    scroll-margin-top: 24px;
}

@media (max-width: 850px) {
    .hero__inner {
        padding: 0 12px;
    }

    .thor-nav__menu {
        flex-wrap: wrap;
        gap: 0;
    }

    .thor-nav a {
        padding: 12px 8px;
        font-size: 15px;
    }

    .thor-nav__submenu a {
        font-size: 15px;
    }
}


/* THOR-Produktboxen v1 */
.product-map {
    padding: 0 1.5rem 4rem;
}

.product-map__inner {
    max-width: 1500px;
    grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr);
    align-items: center;
    gap: 1.5rem;
}

.house img {
    width: 100%;
    height: auto;
}

.product-links {
    display: grid;
    gap: 1.25rem;
}

.thor-product-box {
    display: grid;
    grid-template-columns: minmax(130px, 43%) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 175px;
    padding: 12px 18px;
    background: #D1E5E0;
    border: 3px solid #fff;
    border-radius: 28px;
    scroll-margin-top: 90px;
}

.thor-product-box__image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.thor-product-box__image img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.thor-product-box__image[href]:hover img,
.thor-product-box__image[href]:focus-visible img {
    transform: scale(1.04);
}

.thor-product-box__image img {
    transition: transform .15s ease;
}

.thor-product-box__content h2 {
    margin: 0 0 .5rem;
    color: #0B7475;
    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1.15;
}

.thor-product-box__content p {
    margin: 0;
    color: #193e50;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.4;
}

@media (max-width: 950px) {
    .product-map__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .thor-product-box {
        grid-template-columns: 38% minmax(0, 1fr);
        gap: .7rem;
        padding: 10px;
        border-radius: 20px;
        min-height: 130px;
    }
    .thor-product-box__content h2 {
        font-size: 22px;
    }
    .thor-product-box__content p {
        font-size: 15px;
    }
}

/* Seitenhintergrund passend zum Hausbild */
body {
    background: #EDF9F7;
}

/* Seitenhintergrund wie GENBOX */
body {
    background: #E4F0ED;
}

/* Pfeile überlagern das Layout, ohne die Produktboxen zu verschieben */
.product-map__inner {
    position: relative;
}

.thor-connectors {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

@media (max-width: 950px) {
    .thor-connectors {
        display: none;
    }
}


/* Produktboxen bleiben oben an ihrer Position */
.product-map__inner {
    align-items: start;
}

.thor-connectors {
    display: none !important;
}


/* PV20/50 steht oberhalb der GENBOX; übrige Boxen bleiben in Reihenfolge */
.thor-product-box:last-child {
    order: -1;
}

/* Vier kompaktere Produktboxen neben dem Haus */
@media (min-width: 951px) {
    .product-map__inner {
        align-items: center;
    }

    .product-links {
        gap: 10px;
        transform: translateY(-28px);
    }

    .thor-product-box {
        min-height: 0;
        padding: 7px 12px;
        gap: 10px;
        grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
        border-radius: 22px;
    }

    .thor-product-box__image img {
        max-height: 125px;
    }

    .thor-product-box__content h2 {
        font-size: 25px;
        margin-bottom: 4px;
    }

    .thor-product-box__content p {
        font-size: 16px;
        line-height: 1.3;
    }
}


/* Zähleranlagen */
.zaehleranlage {
  background: #effafa;
  padding: 65px 30px;
}

.zaehleranlage__inner {
  max-width: 1450px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 50px;
}

.zaehleranlage__eyebrow {
  color: #168bd2;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 0 0 20px;
}

.zaehleranlage h2 {
  color: #087477;
  font-family: Georgia, serif;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 28px;
}

.zaehleranlage__text {
  color: #425466;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 30px;
}

.zaehleranlage__button {
  display: inline-block;
  background: #243451;
  color: #fff;
  padding: 16px 26px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.zaehleranlage__button:hover {
  background: #087477;
  color: #fff;
}

.zaehleranlage__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 800px) {
  .zaehleranlage {
    padding: 40px 20px;
  }

  .zaehleranlage__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .zaehleranlage__text {
    font-size: 17px;
  }
}

/* Einheitlicher Seitenhintergrund */
html,
body,
main,
.intro,
.product-map,
.zaehleranlage {
    background-color: #E4F0ED;
}