:root{
  --ink:#1c2e28;
  --muted:#6f8f84;
  --accent:#5fae8a;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.92);
  --surface-glass:rgba(255,255,255,.78);
  --line:rgba(0,0,0,.06);
  --shadow:rgba(0,0,0,.08);
  --bg-grad-1:#f4faf7;
  --bg-grad-2:#ffffff;
  --bg-soft:#f2f9f5;
  --header-bg:rgba(255,255,255,.9);
  --header-height:72px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8f3ee;
    --muted:#a6c1b6;
    --accent:#62c79a;
    --bg:#0b1411;
    --surface:#0f1a16;
    --surface-2:rgba(15,26,22,.92);
    --surface-glass:rgba(15,26,22,.78);
    --line:rgba(255,255,255,.10);
    --shadow:rgba(0,0,0,.45);
    --bg-grad-1:#07110e;
    --bg-grad-2:#0b1411;
    --bg-soft:#0c1915;
    --header-bg:rgba(15,26,22,.88);
  }
}

/* Manual theme override (via JS / user toggle). */
:root[data-theme="light"]{
  --ink:#1c2e28;
  --muted:#6f8f84;
  --accent:#5fae8a;
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:rgba(255,255,255,.92);
  --surface-glass:rgba(255,255,255,.78);
  --line:rgba(0,0,0,.06);
  --shadow:rgba(0,0,0,.08);
  --bg-grad-1:#f4faf7;
  --bg-grad-2:#ffffff;
  --bg-soft:#f2f9f5;
  --header-bg:rgba(255,255,255,.9);
}

:root[data-theme="dark"]{
  --ink:#e8f3ee;
  --muted:#a6c1b6;
  --accent:#62c79a;
  --bg:#0b1411;
  --surface:#0f1a16;
  --surface-2:rgba(15,26,22,.92);
  --surface-glass:rgba(15,26,22,.78);
  --line:rgba(255,255,255,.10);
  --shadow:rgba(0,0,0,.45);
  --bg-grad-1:#07110e;
  --bg-grad-2:#0b1411;
  --bg-soft:#0c1915;
  --header-bg:rgba(15,26,22,.88);
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
}

body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:
    linear-gradient(
      180deg,
      var(--bg-grad-1) 0%,
      var(--bg-grad-2) 55%
    );
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html[dir="rtl"] body{
  direction:rtl;
  text-align:right;
}

html[dir="rtl"] .site-header-actions{
  direction:ltr;
}

html[dir="rtl"] .nav-menu,
html[dir="rtl"] .nav-mega,
html[dir="rtl"] .site-footer,
html[dir="rtl"] .footer-grid{
  text-align:right;
}

html[dir="rtl"] .lang-menu-panel{
  right:auto;
  left:0;
}

abbr[title]{
  text-decoration:underline dotted;
  text-underline-offset:2px;
  cursor:help;
}

.product-detail-page{
  padding:calc(var(--header-height) + 1.5rem) 80px 120px;
}

/* Produkt-Detailseiten */
.localized-content{
  display:none;
}

body[data-active-lang="de"] .localized-content[data-lang="de"],
body[data-active-lang="en"] .localized-content[data-lang="en"],
body[data-active-lang="es"] .localized-content[data-lang="es"],
body[data-active-lang="fr"] .localized-content[data-lang="fr"],
body[data-active-lang="ar"] .localized-content[data-lang="ar"],
body[data-active-lang="yue"] .localized-content[data-lang="yue"]{
  display:block;
}

/* Product detail pages have no dedicated yue block: keep German as safe fallback. */
body.product-detail-view .localized-content{
  display:none;
}

body.product-detail-view .localized-content[data-lang="de"]{
  display:block;
}

body.product-detail-view[data-active-lang="en"] .localized-content[data-lang="de"],
body.product-detail-view[data-active-lang="es"] .localized-content[data-lang="de"],
body.product-detail-view[data-active-lang="fr"] .localized-content[data-lang="de"],
body.product-detail-view[data-active-lang="ar"] .localized-content[data-lang="de"]{
  display:none;
}

body.product-detail-view[data-active-lang="en"] .localized-content[data-lang="en"],
body.product-detail-view[data-active-lang="es"] .localized-content[data-lang="es"],
body.product-detail-view[data-active-lang="fr"] .localized-content[data-lang="fr"],
body.product-detail-view[data-active-lang="ar"] .localized-content[data-lang="ar"]{
  display:block;
}

.product-detail-page .product-hero{
  margin-top:1.5rem;
  gap:2.25rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  align-items:start;
}

.product-detail-page .product-media img{
  width:100%;
  height:auto;
  border-radius:.6rem;
}

.product-detail-page .product-article,
.product-detail-page .product-spec,
.product-detail-page .product-content{
  margin-top:2rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1.5rem 1.75rem;
  box-shadow:0 14px 32px rgba(0,0,0,.06);
}

.product-detail-page > section:first-of-type{
  margin-top:0;
}

.product-subnav{
  margin:4px 0 18px 0;
}

.product-shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:22px;
  align-items:start;
}

.product-main{
  min-width:0;
}

.product-sidebar{
  position:sticky;
  top:calc(var(--header-height) + 16px);
}

.product-sidebar-card{
  border:1px solid color-mix(in srgb, var(--line) 72%, rgba(95,174,138,.30) 28%);
  border-radius:16px;
  padding:18px;
  background:
    linear-gradient(165deg, rgba(95,174,138,.10), rgba(95,174,138,0) 48%),
    var(--surface);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}

.product-sidebar-kicker{
  margin:0 0 6px 0;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}

.product-sidebar-card h2{
  margin:0 0 10px 0;
  font-size:28px;
  line-height:1.15;
}

.product-sidebar-stats{
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.product-sidebar-stats dt{
  font-size:13px;
  color:var(--muted);
  margin:0;
}

.product-sidebar-stats dd{
  margin:0;
  color:var(--ink);
  font-size:18px;
  font-weight:650;
}

.product-sidebar-note{
  margin:12px 0 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.product-detail-page .grid{
  display:grid;
  gap:16px;
}

.product-detail-page .grid.grid--3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.product-detail-page .grid.grid--3 > article{
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 16px 18px;
  background:var(--surface-2);
}

.product-detail-page .grid.grid--3 > article h3{
  margin:0 0 8px 0;
  font-size:20px;
  line-height:1.3;
  color:var(--ink);
}

.product-detail-page .grid.grid--3 > article p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.product-detail-page .product-article h2,
.product-detail-page .product-spec h2,
.product-detail-page .product-content h2{
  font-size:30px;
  line-height:1.2;
  margin:0 0 10px 0;
}

.product-detail-page .product-article h2,
.product-detail-page .product-spec h2,
.product-detail-page .product-content h2{
  margin-bottom:.6rem;
}

.product-detail-page .product-spec dl{
  display:grid;
  grid-template-columns:minmax(140px, 220px) 1fr;
  gap:.5rem 1.25rem;
  margin-top:1rem;
}

.product-detail-page .product-spec dd,
.product-detail-page .product-article li,
.product-detail-page .product-content li{
  color:var(--muted);
}

.product-detail-page .product-gallery{
  margin-top:.85rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
  gap:.6rem;
}

.product-detail-page .gallery-grid{
  display:contents;
}

.product-detail-page .gallery-item{
  border:1px solid var(--line);
  border-radius:.75rem;
  background:var(--surface);
  padding:0;
  cursor:zoom-in;
  overflow:hidden;
}

.product-detail-page .gallery-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.product-detail-page .product-gallery .gallery-item{
  min-height:84px;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(8,12,14,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:2000;
  backdrop-filter:blur(3px);
}

.lightbox[hidden]{
  display:none;
}

.lightbox img{
  width:auto;
  max-width:min(88vw, 720px);
  max-height:82vh;
  border-radius:.5rem;
  box-shadow:0 34px 80px rgba(0,0,0,.45);
}

.lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  background:rgba(9,12,14,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  padding:12px 22px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(9,12,14,.92);
  color:#fff;
  width:68px;
  height:68px;
  border-radius:999px;
  cursor:pointer;
  font-size:34px;
  line-height:1;
}

.lightbox-nav.prev{
  left:22px;
}

.lightbox-nav.next{
  right:22px;
}

/* HERO (Startseiten-Stil, global nutzbar) */
.hero{
  --hero-edge-blend-color:var(--bg-grad-2);
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:180px 80px 110px;
  background:var(--bg-grad-2);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}


.hero-video-bg{
  position:absolute;
  inset:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.06);
  filter:saturate(.75) contrast(1.10) brightness(1.08);
  --hero-video-opacity:.44;
  opacity:var(--hero-video-opacity);
  transition:opacity 1.8s ease;
  will-change:opacity;
  z-index:0;
  pointer-events:none;
}

/* Flächenpartner Hero: Bild etwas „kleiner“ und nach rechts geframed + besser lesbarer Text. */
.hero.hero-partner{
  min-height:100svh;
  min-height:100vh;
  padding:180px 80px 110px;
}

body[data-hero-bg] .hero.hero-partner{
  background:none;
  background:
    linear-gradient(180deg, rgba(244,250,247,.88), rgba(255,255,255,.80) 75%),
    var(--page-hero-bg) center / cover no-repeat !important;
  background-color:transparent;
}

@media (max-width: 720px){
  .hero.hero-partner{
    min-height:auto;
    padding:140px 24px 90px;
  }
}

.hero-partner::before{
  background:
    radial-gradient(1200px 600px at 18% 18%, rgba(95,174,138,.16), rgba(95,174,138,0) 72%),
    linear-gradient(180deg, rgba(244,250,247,.86), rgba(255,255,255,.72) 75%);
}

.hero.hero-partner::before{
  content:none !important;
  background:none !important;
}

.hero-partner .hero-product{
  width:min(660px, 100%);
}

.hero-partner .hero-product img{
  opacity:.62;
  transform:translateY(-18px);
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.14));
}

:root[data-theme="dark"] .hero-partner .hero-product img{
  opacity:.52;
}

:root[data-theme="dark"] body[data-hero-bg] .hero.hero-partner{
  background:none;
  background:
    linear-gradient(180deg, rgba(7,17,14,.84), rgba(11,20,17,.72) 75%),
    var(--page-hero-bg) center / cover no-repeat !important;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-partner .hero-product img{
    opacity:.52;
  }
}

.hero-video-bg.is-fading-out{
  opacity:0;
  transition-duration:2.4s;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% 18%, rgba(95,174,138,.14), rgba(95,174,138,0) 72%),
    linear-gradient(180deg, rgba(244,250,247,.78), rgba(255,255,255,.60) 75%);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:180px;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      var(--hero-edge-blend-color) 100%
    );
  pointer-events:none;
  z-index:1;
}

.hero-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:center;
  gap:72px;
  position:relative;
  z-index:2;
}

.hero-text{
  max-width:820px;
}

:root[data-theme="dark"] .hero-video-bg{
  --hero-video-opacity:.26;
  filter:saturate(.60) contrast(1.08) brightness(.92);
}

:root[data-theme="dark"] .hero::before{
  background:
    radial-gradient(1200px 600px at 20% 18%, rgba(95,174,138,.18), rgba(95,174,138,0) 72%),
    linear-gradient(180deg, rgba(7,17,14,.76), rgba(11,20,17,.58) 75%);
}

:root[data-theme="dark"] .hero-partner::before{
  background:
    radial-gradient(1200px 600px at 18% 18%, rgba(95,174,138,.22), rgba(95,174,138,0) 72%),
    linear-gradient(180deg, rgba(7,17,14,.82), rgba(11,20,17,.66) 75%);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero-video-bg{
    --hero-video-opacity:.26;
    filter:saturate(.60) contrast(1.08) brightness(.92);
  }
  :root:not([data-theme="light"]) .hero::before{
    background:
      radial-gradient(1200px 600px at 20% 18%, rgba(95,174,138,.18), rgba(95,174,138,0) 72%),
      linear-gradient(180deg, rgba(7,17,14,.76), rgba(11,20,17,.58) 75%);
  }
  :root:not([data-theme="light"]) .hero-partner::before{
    background:
      radial-gradient(1200px 600px at 18% 18%, rgba(95,174,138,.22), rgba(95,174,138,0) 72%),
      linear-gradient(180deg, rgba(7,17,14,.82), rgba(11,20,17,.66) 75%);
  }
}

@media (prefers-reduced-motion: reduce){
  video.hero-video-bg{ display:none; }
}

@media (hover: none), (pointer: coarse){
  .hero-video-bg{
    filter:none;
    transform:none;
  }
}

.hero h1{
  font-size:clamp(20px, 5.2vw, 68px);
  font-weight:400;
  line-height:1.05;
}

.hero .hero-brand{
  color:var(--accent);
}

@media (min-width: 900px){
  .hero .hero-brand{
    white-space:nowrap;
  }
}

/* Spanish hero brand line is longer and should wrap naturally on desktop. */
html[lang="es"] .home-page .hero .hero-brand{
  white-space:normal;
  display:block;
  max-width:22ch;
  text-wrap:balance;
}

.hero h1 strong{
  font-weight:600;
}

.hero h1 .countup-fixed-area{
  width:auto;
  white-space:nowrap;
  text-align:left;
}

.hero h1 .countup-fixed-euro{
  width:auto;
  white-space:nowrap;
  text-align:left;
}

.hero p{
  margin-top:40px;
  font-size:22px;
  color:var(--muted);
  max-width:620px;
}

.hero-media{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.hero-product{
  width:min(520px, 100%);
  display:block;
}

.hero-product img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.18));
}

[data-countup]{
  font-variant-numeric:tabular-nums;
  display:inline-block;
}

figure{
  margin:0;
}

.img-caption,
figure figcaption{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  text-wrap:pretty;
}

.img-caption{
  max-width:none;
}

/* Keep captions consistent even inside sections that style generic <p> larger */
.home-page section p.img-caption,
.home-page section figure figcaption,
.contracting-page p.img-caption,
.energy-reveal .img-caption,
.contracting-energy-reveal .img-caption{
  margin-top:10px !important;
  max-width:none !important;
  font-size:12px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  text-wrap:pretty;
}

.img-caption a,
figure figcaption a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(95,174,138,.35);
}

.img-caption a:hover,
.img-caption a:focus-visible,
figure figcaption a:hover,
figure figcaption a:focus-visible{
  border-bottom-color:rgba(95,174,138,.75);
}

.hero-media figcaption{
  text-align:center;
}

.gallery{
  padding:96px 80px;
}

.gallery-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.gallery-item{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
}

.gallery-item img{
  width:100%;
  display:block;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.gallery-item figcaption{
  margin:0;
  padding:12px 16px 14px;
}

.reference-slider{
  --ref-progress:0%;
  --ref-ease:cubic-bezier(.22,.74,.22,1);
  position:relative;
  margin:26px auto 0;
  width:min(100%, 1120px);
  padding:0;
}

.reference-slider-viewport{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(1100px 320px at 50% -30%, rgba(95,174,138,.18), rgba(95,174,138,0) 66%),
    var(--surface);
  box-shadow:0 20px 52px color-mix(in srgb, var(--shadow) 58%, transparent 42%);
}

.reference-slider-viewport::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 72%, rgba(0,0,0,.18) 100%);
}

.reference-slider-track{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}

.reference-slide{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,0,0) scale(1.02);
  filter:saturate(.88);
  transition:opacity .52s var(--ref-ease), filter .52s var(--ref-ease), transform .64s var(--ref-ease);
  z-index:1;
  border:0;
  background:color-mix(in srgb, var(--bg-soft) 70%, #fff 30%);
}

.reference-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.03);
  transition:transform 5.8s linear;
}

.reference-slide.is-active{
  visibility:visible;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:saturate(1);
  border-radius:0;
  z-index:3;
}

.reference-slide.is-active img{
  transform:scale(1);
}

.reference-slider[data-ref-direction="next"] .reference-slide.is-entering{
  animation:ref-slide-enter-next .6s var(--ref-ease) both;
}

.reference-slider[data-ref-direction="next"] .reference-slide.is-leaving{
  animation:ref-slide-leave-next .6s var(--ref-ease) both;
}

.reference-slider[data-ref-direction="prev"] .reference-slide.is-entering{
  animation:ref-slide-enter-prev .6s var(--ref-ease) both;
}

.reference-slider[data-ref-direction="prev"] .reference-slide.is-leaving{
  animation:ref-slide-leave-prev .6s var(--ref-ease) both;
}

.reference-slide.is-prev:not(.is-entering):not(.is-leaving):not(.is-active),
.reference-slide.is-next:not(.is-entering):not(.is-leaving):not(.is-active){
  opacity:0;
  visibility:hidden;
}

.reference-slide.is-entering{
  visibility:visible;
  z-index:3;
}

.reference-slide.is-leaving{
  visibility:visible;
  z-index:2;
  pointer-events:none;
}

.reference-slide.is-prev::after,
.reference-slide.is-next::after{
  content:none;
}

.reference-slide.is-prev img,
.reference-slide.is-next img{
  filter:none;
}

.reference-slide figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:10px 14px;
  max-width:none;
  border-radius:0;
  color:var(--ink);
  font-size:13px;
  line-height:1.42;
  background:color-mix(in srgb, var(--surface-2) 84%, #fff 16%);
  border-top:1px solid var(--line);
  backdrop-filter:none;
  transform:translateY(8px);
  opacity:0;
  transition:transform .4s var(--ref-ease), opacity .4s var(--ref-ease);
}

.reference-slide.is-active figcaption{
  transform:translateY(0);
  opacity:1;
}

.reference-slider-nav{
  position:absolute;
  top:50%;
  bottom:auto;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  background:color-mix(in srgb, var(--surface) 84%, #fff 16%);
  box-shadow:0 10px 24px color-mix(in srgb, var(--shadow) 42%, transparent 58%);
  backdrop-filter:none;
  cursor:pointer;
  transform:translateY(-50%);
  z-index:5;
  transition:transform .24s var(--ref-ease), background .24s var(--ref-ease), border-color .24s var(--ref-ease), box-shadow .24s var(--ref-ease);
}

.reference-slider-nav.prev{ left:12px; }
.reference-slider-nav.next{ right:12px; }

.reference-slider-nav:hover,
.reference-slider-nav:focus-visible{
  background:var(--surface);
  border-color:color-mix(in srgb, var(--accent) 42%, var(--line) 58%);
  box-shadow:0 14px 30px color-mix(in srgb, var(--shadow) 60%, transparent 40%);
  transform:translateY(-50%) scale(1.05);
}

.reference-slider-meta{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--surface-glass) 88%, #fff 12%);
  border:1px solid var(--line);
  backdrop-filter:none;
}

.reference-slider-counter{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:color-mix(in srgb, var(--ink) 85%, #fff 15%);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.reference-slider-progress{
  width:96px;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb, var(--line) 78%, #fff 22%);
}

.reference-slider-progress-fill{
  display:block;
  width:var(--ref-progress);
  height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), var(--accent));
  transition:width .38s ease;
}

.reference-slider-dots{
  margin-top:14px;
  display:flex;
  justify-content:flex-start;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb, var(--surface-2) 86%, #fff 14%);
  scrollbar-width:thin;
}

.reference-slider-dot{
  width:132px;
  min-width:132px;
  height:78px;
  border-radius:12px;
  border:1px solid var(--line);
  padding:0;
  background-color:color-mix(in srgb, var(--bg-soft) 78%, #fff 22%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 999px rgba(9,24,20,.42);
  cursor:pointer;
  opacity:.52;
  transform:translateY(0) scale(1);
  transition:opacity .26s ease, border-color .26s ease, box-shadow .26s ease, transform .26s cubic-bezier(.2,.7,.2,1), filter .26s ease;
  filter:saturate(.62) grayscale(.24);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.reference-slider-dot::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
  opacity:0;
  transform:translateX(-28%);
  transition:opacity .3s ease, transform .4s ease;
  z-index:1;
  pointer-events:none;
}

.reference-slider-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(95,174,138,.0);
  transition:border-color .26s ease, box-shadow .26s ease;
  z-index:2;
  pointer-events:none;
}

.reference-slider-dot.is-active{
  border-color:color-mix(in srgb, var(--accent) 70%, var(--line) 30%);
  box-shadow:
    inset 0 0 0 999px rgba(9,24,20,.06),
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent 72%);
  opacity:1;
  filter:saturate(1) grayscale(0);
  transform:translateY(-2px) scale(1.04);
  animation:none;
}

.reference-slider-dot:hover,
.reference-slider-dot:focus-visible{
  opacity:.86;
  box-shadow:inset 0 0 0 999px rgba(9,24,20,.18);
  filter:saturate(.9) grayscale(.08);
  transform:translateY(-2px) scale(1.03);
}

.reference-slider-dot:hover::before,
.reference-slider-dot:focus-visible::before,
.reference-slider-dot.is-active::before{
  opacity:1;
  transform:translateX(0);
}

.reference-slider-dot:hover::after,
.reference-slider-dot:focus-visible::after,
.reference-slider-dot.is-active::after{
  border-color:color-mix(in srgb, var(--accent) 54%, transparent 46%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}

.reference-slider-dots::-webkit-scrollbar{
  height:8px;
}

.reference-slider-dots::-webkit-scrollbar-track{
  background:transparent;
}

.reference-slider-dots::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--line) 75%, var(--accent) 25%);
  border-radius:999px;
}

@keyframes thumbPulse{
  0%, 100%{
    box-shadow:
      inset 0 0 0 999px rgba(9,24,20,.06),
      0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent 78%);
  }
  50%{
    box-shadow:
      inset 0 0 0 999px rgba(9,24,20,.12),
      0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent 62%);
  }
}

@keyframes ref-slide-enter-next{
  from{ opacity:0; transform:translate3d(4%,0,0) scale(1.03); filter:saturate(.84) blur(.5px); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:saturate(1) blur(0); }
}

@keyframes ref-slide-leave-next{
  from{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:saturate(1); }
  to{ opacity:0; transform:translate3d(-3%,0,0) scale(1.01); filter:saturate(.86); }
}

@keyframes ref-slide-enter-prev{
  from{ opacity:0; transform:translate3d(-4%,0,0) scale(1.03); filter:saturate(.84) blur(.5px); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:saturate(1) blur(0); }
}

@keyframes ref-slide-leave-prev{
  from{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:saturate(1); }
  to{ opacity:0; transform:translate3d(3%,0,0) scale(1.01); filter:saturate(.86); }
}

@media (max-width:900px){
  .reference-slider{
    width:100%;
    padding:0;
    margin-top:24px;
  }

  .reference-slider-viewport{
    aspect-ratio:4 / 3.3;
    overflow:hidden;
    border-radius:16px;
  }

  .reference-slide{
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:16px;
    transform:none;
  }

  .reference-slide.is-prev,
  .reference-slide.is-next{
    opacity:0;
    visibility:hidden;
  }

  .reference-slide figcaption{
    left:0;
    right:0;
    bottom:0;
    font-size:13px;
    padding:9px 11px;
    border-radius:0;
  }

  .reference-slider-nav{
    width:36px;
    height:36px;
  }

  .reference-slider-nav.prev{ left:8px; }
  .reference-slider-nav.next{ right:8px; }

  .reference-slider-meta{
    left:50%;
    top:8px;
    transform:translateX(-50%);
    padding:5px 8px;
  }

  .reference-slider-progress{
    width:74px;
  }

  .reference-slider-dot{
    width:96px;
    min-width:96px;
    height:58px;
    border-radius:8px;
  }
}

@media (prefers-reduced-motion: reduce){
  .reference-slide,
  .reference-slide img,
  .reference-slide figcaption{
    transition:none;
    animation:none !important;
  }
  .reference-slider-dot{
    transition:none;
  }
  .reference-slider-dot::before,
  .reference-slider-dot::after{
    transition:none;
  }
  .reference-slider-dot.is-active{
    animation:none;
  }
}

/* Reference slider v2 (override): horizontal track + cleaner controls */
.reference-slider{
  --ref-progress:0%;
  margin:26px auto 0;
  width:min(100%, 1120px);
}

.reference-slider-viewport{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 22px 56px color-mix(in srgb, var(--shadow) 60%, transparent 40%);
}

.reference-slider-track{
  display:flex;
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.reference-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  opacity:1;
  visibility:visible;
  transform:none;
  filter:none;
  overflow:hidden;
}

.reference-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 4.2s linear;
}

.reference-slide.is-active img{
  transform:scale(1);
}

.reference-slide figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:10px 14px;
  border-top:1px solid color-mix(in srgb, var(--line) 88%, transparent 12%);
  background:color-mix(in srgb, var(--surface-2) 84%, #fff 16%);
  transform:none;
  opacity:1;
}

.reference-slider-nav{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.04);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(3px);
}

.reference-slider-nav:hover,
.reference-slider-nav:focus-visible{
  transform:translateY(-50%) scale(1.05);
  border-color:rgba(255,255,255,.78);
  background:rgba(0,0,0,.2);
}

.reference-slider-dots{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}

.reference-slider-dot{
  width:30px;
  min-width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  filter:none;
  box-shadow:none;
  transform:none;
}

.reference-slider-dot::before,
.reference-slider-dot::after{
  content:none;
}

.reference-slider-dot.is-active{
  border-color:color-mix(in srgb, var(--accent) 62%, var(--line) 38%);
  background:linear-gradient(145deg, rgba(95,174,138,.2), rgba(95,174,138,.08));
  color:var(--ink);
  transform:none;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent 80%);
}

@media (max-width:900px){
  .reference-slider-viewport{
    border-radius:16px;
  }
  .reference-slider-nav{
    width:38px;
    height:38px;
  }
  .reference-slider-dot{
    width:26px;
    min-width:26px;
    height:26px;
    font-size:11px;
  }
}

.trust{
  padding:72px 0;
  background:transparent;
  margin-top:-1px;
}

.trust .container{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:18px;
}

.trust-kicker{
  margin:0;
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 64%, var(--accent) 36%);
  font-weight:700;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 30px;
  justify-content:flex-start;
  align-items:center;
  max-width:1100px;
}

.logo-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  color:color-mix(in srgb, var(--ink) 78%, var(--accent) 22%);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  user-select:none;
  white-space:nowrap;
  max-width:100%;
  box-shadow:none;
  transition:color .18s ease;
  opacity:1;
  transform:none;
  animation:none;
}

.logo-item::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background-image:url("../img/Sonne%20GBS.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.logo-item:hover{
  color:var(--ink);
}

.highlight{
  padding:32px 0 20px;
  background:transparent;
}

.highlight-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}

.highlight-card{
  border-radius:14px;
  border:1px solid var(--line);
  padding:16px 18px;
  background:var(--surface);
  box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.highlight-card h3{
  margin:0;
  font-size:18px;
  margin-bottom:6px;
}

.highlight-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.info-strip{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
}

.info-pill{
  background:transparent;
  border-radius:0;
  padding:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  box-shadow:none;
  line-height:1.5;
}

.info-pill::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:2px;
  background-image:url("../img/Sonne%20GBS.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.feature-list{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}

.feature-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--ink);
  line-height:1.55;
}

.feature-list li::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:2px;
  background-image:url("../img/Sonne%20GBS.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.hero-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  color:var(--muted);
}

.hero-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.hero-list li::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:2px;
  background-image:url("../img/Sonne%20GBS.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.page-main ul:not(.download-list):not(.footer-list):not(.nav-menu):not(.hero-list):not(.feature-list):not(.icon-list):not(.calc-hero-kpis):not(.calc-breakdown){
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px;
}

.page-main ul:not(.download-list):not(.footer-list):not(.nav-menu):not(.hero-list):not(.feature-list):not(.icon-list):not(.calc-hero-kpis):not(.calc-breakdown) li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.55;
}

.page-main ul:not(.download-list):not(.footer-list):not(.nav-menu):not(.hero-list):not(.feature-list):not(.icon-list):not(.calc-hero-kpis):not(.calc-breakdown) li::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:2px;
  background-image:url("../img/Sonne%20GBS.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

.shop-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--muted);
}

.shop-breadcrumbs a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.shop-breadcrumbs a:hover,
.shop-breadcrumbs a:focus-visible{
  border-bottom-color:rgba(95,174,138,.55);
}

.shop-note{
  margin-top:18px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
}

.download-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

.download-item a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
}

.download-item a:hover,
.download-item a:focus-visible{
  border-bottom-color:rgba(95,174,138,.55);
}

.download-meta{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.shop-products{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}

.product-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 16px 32px rgba(0,0,0,.08);
  position:relative;
}

.product-media{
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid rgba(0,0,0,.08);
  padding:12px;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.product-media picture{
  width:100%;
  display:block;
}

.product-media img{
  width:100%;
  height:160px;
  object-fit:contain;
  display:block;
}

.product-card .btn.btn-ghost{
  background:var(--ink);
  color:var(--bg);
  border-color:transparent;
}

.product-card .btn.btn-ghost:hover,
.product-card .btn.btn-ghost:focus-visible{
  background:rgba(0,0,0,.85);
  color:var(--bg);
}

:root[data-theme="dark"] .product-card .btn.btn-ghost:hover,
:root[data-theme="dark"] .product-card .btn.btn-ghost:focus-visible{
  background:rgba(255,255,255,.85);
  color:var(--bg);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .product-card .btn.btn-ghost:hover,
  :root:not([data-theme="light"]) .product-card .btn.btn-ghost:focus-visible{
    background:rgba(255,255,255,.85);
    color:var(--bg);
  }
}

.product-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.product-badge.badge-muted{
  background:rgba(0,0,0,.6);
}

:root[data-theme="dark"] .product-badge.badge-muted{
  background:var(--surface-2);
  color:var(--ink);
  border:1px solid var(--line);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .product-badge.badge-muted{
    background:var(--surface-2);
    color:var(--ink);
    border:1px solid var(--line);
  }
}

.product-card h3{
  margin:0;
  font-size:20px;
}

.product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.product-tags span{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(95,174,138,.12);
  color:var(--ink);
  border:1px solid rgba(95,174,138,.22);
}

.product-meta{
  font-size:15px;
  color:var(--muted);
  line-height:1.5;
}

.product-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;
}

.form-step{
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 16px 16px;
  background:var(--surface);
  display:grid;
  gap:12px;
  overflow:hidden;
}

.form-step.is-active{
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  animation:stepFade .3s ease;
}

.form-step legend{
  display:block;
  font-weight:600;
  font-size:15px;
  padding:0;
  margin:0 0 10px;
  max-width:100%;
}

.form-step[hidden]{
  display:none;
}

@keyframes stepFade{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.info-strip .info-pill{
  border:0;
}

.highlight{
  padding:32px 0 20px;
  background:linear-gradient(180deg,var(--surface-2),rgba(95,174,138,.03));
}

.highlight-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}

.highlight-card{
  border-radius:14px;
  border:1px solid var(--line);
  padding:16px 18px;
  background:var(--surface);
  box-shadow:0 12px 32px rgba(0,0,0,.06);
}

.highlight-card h3{
  margin:0;
  font-size:18px;
  margin-bottom:6px;
}

.highlight-card p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.container{
  max-width:1280px;
  margin:0 auto;
}

.container--full{
  max-width:none;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.keep-together{
  white-space:nowrap;
}

@supports (content-visibility: auto){
  .section,
  .site-footer{
    content-visibility:auto;
    contain-intrinsic-size:800px;
  }
}

@supports (content-visibility: auto){
  @media (max-width: 900px){
    .section,
    .site-footer{
      content-visibility:visible;
      contain-intrinsic-size:auto;
    }
  }
}

@media (hover: none), (pointer: coarse){
  .hero-video-bg{
    filter:none;
    transform:scale(1.02);
    transition-duration:.9s;
  }

  .swap-stack .swap-img{
    transition-duration:.45s;
  }

  .swap-hint,
  .swap-hoverbox{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;

  padding:12px 48px;

  background:var(--header-bg);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);

  transform:translateY(0);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), background-color .28s ease;
}

.site-header-inner{
  max-width:1400px;
  margin:0 auto;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.site-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-nav{
  display:flex;
  gap:32px;
  align-items:center;
}

@media (max-width: 1200px){
  .site-header{
    padding:12px 40px;
  }

  .site-header-inner{
    gap:12px;
  }

  .site-nav{
    gap:20px;
  }

  .site-nav a,
  .site-nav summary{
    font-size:11px;
    letter-spacing:.12em;
  }

  .site-header-actions{
    gap:8px;
  }

  .lang-toggle,
  .theme-toggle{
    padding:5px 8px;
    font-size:10px;
  }
}

.site-nav a,
.site-nav summary{
  position:relative;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 0;
  transition:color .25s ease;
}

@media (min-width: 1201px){
  html[data-page-lang="en"] .site-nav{
    gap:22px;
  }

  html[data-page-lang="en"] .site-nav a,
  html[data-page-lang="en"] .site-nav summary{
    letter-spacing:.12em;
  }
}

.site-nav summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

.site-nav summary::-webkit-details-marker{
  display:none;
}

.site-nav .nav-group{
  position:relative;
}

.site-nav .nav-group > summary::after{
  content:"";
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.75;
  transform:translateY(1px);
}

.site-nav .nav-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:-14px;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(95,174,138,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,250,.94));
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:0 24px 64px rgba(9,19,15,.18);
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:1100;
}

.site-nav .nav-group[open] > .nav-menu{
  display:flex;
}

.site-nav .nav-subgroup{
  border-radius:12px;
  border:1px solid transparent;
}

.site-nav .nav-subgroup summary{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:8px 12px;
  border-radius:10px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.site-nav .nav-subgroup summary::after{
  content:"";
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.7;
  transform:translateY(1px);
  margin-left:auto;
}

.site-nav .nav-subgroup[open] > summary{
  color:var(--ink);
}

.site-nav .nav-subgroup[open] > summary::after{
  transform:translateY(1px) rotate(180deg);
}

.site-nav .nav-submenu{
  display:none;
  padding:2px 4px 8px 4px;
}

.site-nav .nav-subgroup[open] > .nav-submenu{
  display:block;
}

.site-nav .nav-menu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid transparent;
  text-transform:none;
  letter-spacing:.01em;
  font-size:14px;
  color:var(--ink);
  font-weight:560;
}

.site-nav .nav-submenu a{
  padding-left:18px;
}

.site-nav .nav-subgroup summary .nav-tight{
  margin-left:-.08em;
}

.site-nav .nav-menu.nav-mega{
  min-width:460px;
  padding:14px;
  display:none;
  flex-direction:row;
  gap:18px;
}

.site-nav .nav-group[open] > .nav-menu.nav-mega{
  display:flex;
}

.site-nav .nav-mega-col{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.site-nav .nav-mega-title{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding:4px 10px 6px;
}

.site-nav .nav-menu.nav-mega .nav-mega-link{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ink);
  background:transparent;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.site-nav .nav-menu.nav-mega .nav-mega-link:hover,
.site-nav .nav-menu.nav-mega .nav-mega-link:focus-visible{
  border-color:rgba(95,174,138,.35);
  background:rgba(95,174,138,.08);
  transform:translateY(-1px);
}

.site-nav .nav-mega-link-title{
  display:block;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}

.site-nav .nav-mega-link-desc{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:color-mix(in srgb, var(--ink) 64%, var(--muted) 36%);
  line-height:1.4;
}

.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible{
  border-color:transparent;
  background:transparent;
  color:var(--ink);
}

.lang-toggle,
.theme-toggle{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  cursor:pointer;
}

.lang-menu{
  position:relative;
}

.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:38px;
  height:38px;
  padding:0;
  letter-spacing:0;
  text-transform:none;
}


.lang-globe{
  position:relative;
  width:20px;
  height:20px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 20px;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='ocean' cx='0.3' cy='0.3' r='0.9'%3E%3Cstop offset='0' stop-color='%23e9f7ff'/%3E%3Cstop offset='0.55' stop-color='%237ab7e6'/%3E%3Cstop offset='1' stop-color='%232b6c9d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23ocean)'/%3E%3Cpath d='M16 28c4-6 13-8 19-5 6 3 7 9 2 13-4 4-10 4-16 1-6-3-9-6-5-9z' fill='%236cc087'/%3E%3Cpath d='M36 38c5-3 12-2 16 2 3 3 2 8-2 10-5 3-12 3-16-1-4-4-2-9 2-11z' fill='%235aac76'/%3E%3Cpath d='M20 40c2-2 6-2 8 1 2 3 1 6-2 8-3 2-7 1-8-2-1-3 0-5 2-7z' fill='%2363b37b'/%3E%3C/svg%3E");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  border:1px solid rgba(95,174,138,.35);
}

.lang-globe::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  box-shadow:inset 2px 2px 6px rgba(255,255,255,.6), inset -4px -6px 8px rgba(0,0,0,.22);
  pointer-events:none;
}

.lang-globe::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), rgba(255,255,255,0) 50%);
  pointer-events:none;
}

@media (max-width: 1200px){
  .lang-toggle{
    width:34px;
    height:34px;
    padding:0;
  }

  .lang-globe{
    width:18px;
    height:18px;
    flex:0 0 18px;
  }
}

.lang-flag{
  width:18px;
  height:18px;
  border-radius:999px;
  flex:0 0 18px;
  background-position:center;
  background-size:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.18);
}

.lang-flag.flag-de{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='36' height='12' y='0' fill='%23000'/%3E%3Crect width='36' height='12' y='12' fill='%23dd0000'/%3E%3Crect width='36' height='12' y='24' fill='%23ffce00'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag.flag-en{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='36' height='36' fill='%23012169'/%3E%3Crect x='-4' y='15' width='44' height='6' fill='%23fff' transform='rotate(45 18 18)'/%3E%3Crect x='-4' y='15' width='44' height='6' fill='%23fff' transform='rotate(-45 18 18)'/%3E%3Crect x='-4' y='16.5' width='44' height='3' fill='%23C8102E' transform='rotate(45 18 18)'/%3E%3Crect x='-4' y='16.5' width='44' height='3' fill='%23C8102E' transform='rotate(-45 18 18)'/%3E%3Crect x='14' width='8' height='36' fill='%23fff'/%3E%3Crect y='14' width='36' height='8' fill='%23fff'/%3E%3Crect x='15.5' width='5' height='36' fill='%23C8102E'/%3E%3Crect y='15.5' width='36' height='5' fill='%23C8102E'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag.flag-es{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='36' height='12' y='0' fill='%23c60b1e'/%3E%3Crect width='36' height='12' y='12' fill='%23ffc400'/%3E%3Crect width='36' height='12' y='24' fill='%23c60b1e'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag.flag-fr{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='12' height='36' x='0' fill='%23002395'/%3E%3Crect width='12' height='36' x='12' fill='%23ffffff'/%3E%3Crect width='12' height='36' x='24' fill='%23ed2939'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag.flag-ar{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='36' height='12' y='0' fill='%23000000'/%3E%3Crect width='36' height='12' y='12' fill='%23ffffff'/%3E%3Crect width='36' height='12' y='24' fill='%2300892d'/%3E%3Cpolygon points='0,0 14,18 0,36' fill='%23d21034'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-flag.flag-cn{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='18' cy='18' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='36' height='36' fill='%23de2910'/%3E%3Cpolygon points='11,5 12.8,9.6 17.8,9.6 13.8,12.5 15.4,17.5 11,14.4 6.6,17.5 8.2,12.5 4.2,9.6 9.2,9.6' fill='%23ffde00'/%3E%3C/g%3E%3C/svg%3E");
}

.lang-menu-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:180px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(95,174,138,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,250,.94));
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
  box-shadow:0 24px 64px rgba(9,19,15,.18);
  display:none;
  z-index:1100;
}

.lang-menu.is-open .lang-menu-panel{
  display:block;
}

.lang-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:10px;
  border:1px solid transparent;
  padding:8px 10px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  font-size:13px;
  font-weight:560;
  letter-spacing:.02em;
}

:root[data-theme="dark"] .site-nav .nav-menu,
:root[data-theme="dark"] .lang-menu-panel{
  border-color:rgba(95,174,138,.42);
  background:linear-gradient(180deg, rgba(14,23,19,.94), rgba(10,17,14,.92));
  box-shadow:0 28px 68px rgba(0,0,0,.5);
}

:root[data-theme="dark"] .site-nav .nav-mega-link-desc{
  color:color-mix(in srgb, #e9f4ee 74%, var(--muted) 26%);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .site-nav .nav-menu,
  :root:not([data-theme="light"]) .lang-menu-panel{
    border-color:rgba(95,174,138,.42);
    background:linear-gradient(180deg, rgba(14,23,19,.94), rgba(10,17,14,.92));
    box-shadow:0 28px 68px rgba(0,0,0,.5);
  }

  :root:not([data-theme="light"]) .site-nav .nav-mega-link-desc{
    color:color-mix(in srgb, #e9f4ee 74%, var(--muted) 26%);
  }
}

.lang-option:hover,
.lang-option:focus-visible{
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.08);
}

.lang-option[aria-selected="true"]{
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.12);
}

.lang-option-code{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:auto;
}

.lang-option-name{
  flex:1;
  text-transform:none;
}

.lang-toggle:hover,
.lang-toggle:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible{
  color:var(--ink);
  border-color:rgba(95,174,138,.55);
}

.theme-toggle[aria-pressed="true"]{
  color:var(--ink);
  border-color:rgba(95,174,138,.55);
  background:linear-gradient(135deg, rgba(95,174,138,.18), rgba(95,174,138,.06));
}

.theme-toggle.theme-toggle--icon{
  width:38px;
  height:38px;
  padding:0;
  border-radius:999px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  background:linear-gradient(140deg, rgba(95,174,138,.16), rgba(95,174,138,.02));
  box-shadow:0 16px 30px var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.theme-toggle.theme-toggle--icon:hover,
.theme-toggle.theme-toggle--icon:focus-visible{
  border-color:rgba(95,174,138,.55);
  transform:translateY(-1px);
  box-shadow:0 20px 36px var(--shadow);
}

.theme-toggle.theme-toggle--icon .theme-icon{
  position:relative;
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-block;
  transition:transform .3s ease, filter .3s ease;
}

.theme-toggle.theme-toggle--icon .theme-icon::before,
.theme-toggle.theme-toggle--icon .theme-icon::after{
  content:"";
  position:absolute;
  border-radius:999px;
  transition:transform .35s ease, opacity .35s ease;
}

.theme-toggle.theme-toggle--icon[data-next-theme="light"] .theme-icon{
  transform:rotate(0deg);
}

.theme-toggle.theme-toggle--icon[data-next-theme="light"] .theme-icon::before{
  inset:3px;
  background:radial-gradient(circle at 35% 35%, #fff4c4 0 45%, #f2b24c 70%, #d8871c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 0 10px rgba(242,178,76,.55);
}

.theme-toggle.theme-toggle--icon[data-next-theme="light"] .theme-icon::after{
  inset:-2px;
  opacity:.95;
  box-shadow:
    0 -10px 0 -8px rgba(242,178,76,.9),
    0 10px 0 -8px rgba(242,178,76,.9),
    10px 0 0 -8px rgba(242,178,76,.9),
    -10px 0 0 -8px rgba(242,178,76,.9),
    7px 7px 0 -8px rgba(242,178,76,.85),
    -7px 7px 0 -8px rgba(242,178,76,.85),
    7px -7px 0 -8px rgba(242,178,76,.85),
    -7px -7px 0 -8px rgba(242,178,76,.85);
}

.theme-toggle.theme-toggle--icon[data-next-theme="dark"] .theme-icon{
  transform:rotate(-20deg);
}

.theme-toggle.theme-toggle--icon[data-next-theme="dark"] .theme-icon::before{
  inset:2px;
  background:radial-gradient(circle at 30% 30%, #f5f9ff 0 50%, #c7d6ff 70%, #8ea7ff 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 0 10px rgba(142,167,255,.55);
}

.theme-toggle.theme-toggle--icon[data-next-theme="dark"] .theme-icon::after{
  width:12px;
  height:12px;
  top:1px;
  left:8px;
  opacity:1;
  background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

@media (prefers-reduced-motion: reduce){
  .theme-toggle.theme-toggle--icon,
  .theme-toggle.theme-toggle--icon .theme-icon,
  .theme-toggle.theme-toggle--icon .theme-icon::before,
  .theme-toggle.theme-toggle--icon .theme-icon::after{
    transition:none;
  }
}

@media (max-width: 720px){
  .theme-toggle.theme-toggle--icon{
    width:36px;
    height:36px;
  }
}

.search-shell{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.search-toggle{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--line);
  padding:0;
  background:linear-gradient(145deg, rgba(95,174,138,.16), rgba(95,174,138,.03));
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 16px 30px var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.search-toggle:hover,
.search-toggle:focus-visible{
  border-color:rgba(95,174,138,.55);
  transform:translateY(-1px);
  box-shadow:0 20px 36px var(--shadow);
}

.search-shell.is-open .search-toggle{
  background:linear-gradient(145deg, rgba(95,174,138,.24), rgba(95,174,138,.06));
}

.search-icon{
  position:relative;
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid currentColor;
  transition:transform .28s ease;
}

.search-icon::after{
  content:"";
  position:absolute;
  right:-5px;
  bottom:-2px;
  width:8px;
  height:2px;
  background:currentColor;
  border-radius:999px;
  transform:rotate(45deg);
  transform-origin:right center;
  transition:transform .28s ease;
}

.search-icon::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:2px solid rgba(95,174,138,.25);
  opacity:0;
}

.search-toggle:hover .search-icon::before,
.search-shell.is-open .search-icon::before{
  animation:search-pulse 1.4s ease infinite;
}

.search-shell.is-open .search-icon{
  transform:rotate(-10deg);
}

.search-shell.is-open .search-icon::after{
  transform:rotate(55deg);
}

@keyframes search-pulse{
  0%{ opacity:0; transform:scale(.6); }
  40%{ opacity:.6; }
  100%{ opacity:0; transform:scale(1.2); }
}

.search-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(360px, 92vw);
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-glass);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 26px 60px var(--shadow);
  z-index:1100;
}

.search-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.search-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2);
  transition:border-color .15s ease, box-shadow .15s ease;
}

.search-input-wrap:focus-within{
  border-color:rgba(95,174,138,.55);
  box-shadow:0 0 0 4px rgba(95,174,138,.12);
}

.search-field-icon{
  position:relative;
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid var(--muted);
  flex:0 0 14px;
}

.search-field-icon::after{
  content:"";
  position:absolute;
  right:-4px;
  bottom:-1px;
  width:6px;
  height:2px;
  background:var(--muted);
  border-radius:999px;
  transform:rotate(45deg);
}

.search-input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:14px;
}

.search-input::placeholder{
  color:var(--muted);
}

.search-input:focus{
  outline:none;
}

.search-clear{
  position:relative;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid transparent;
  background:rgba(95,174,138,.12);
  color:var(--ink);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.search-clear.is-visible{
  opacity:1;
  pointer-events:auto;
}

.search-clear:hover,
.search-clear:focus-visible{
  border-color:rgba(95,174,138,.45);
  transform:translateY(-1px);
}

.search-clear::before,
.search-clear::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}

.search-clear::before{
  transform:translate(-50%, -50%) rotate(45deg);
}

.search-clear::after{
  transform:translate(-50%, -50%) rotate(-45deg);
}

.search-status{
  margin-top:10px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.search-results{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.search-result{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ink);
  background:transparent;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.search-result:hover,
.search-result:focus-visible{
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.08);
  transform:translateY(-1px);
}

.search-result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 12px;
  flex-wrap:wrap;
}

.search-result-title{
  font-size:14px;
  font-weight:600;
  flex:1;
  min-width:0;
}

.search-result-lang{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(95,174,138,.08);
  white-space:nowrap;
}

.search-result-lang .lang-flag{
  width:14px;
  height:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

.search-result-lang-code{
  font-size:10px;
  letter-spacing:.14em;
}

.search-result-desc{
  margin-top:0;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

@media (prefers-reduced-motion: reduce){
  .search-toggle,
  .search-icon,
  .search-icon::before,
  .search-icon::after,
  .search-clear,
  .search-result{
    transition:none;
    animation:none;
  }
}

@media (max-width: 720px){
  .search-toggle{
    width:36px;
    height:36px;
  }
}

@media (max-width: 900px){
  .search-panel{
    position:fixed;
    left:calc(env(safe-area-inset-left, 0px) + 12px);
    right:calc(env(safe-area-inset-right, 0px) + 12px);
    top:calc(env(safe-area-inset-top, 0px) + var(--header-height) + 8px);
    width:auto;
    max-height:70vh;
    overflow-y:auto;
  }
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible{
  border-color:rgba(95,174,138,.55);
  box-shadow:0 16px 34px var(--shadow);
  transform:translateY(-1px);
}

.nav-toggle-icon{
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:999px;
  position:relative;
  display:block;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}

.nav-toggle-icon::before{ top:-6px; }
.nav-toggle-icon::after{ top:6px; }

.mobile-nav-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.24);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.mobile-drawer{
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + var(--menu-pill-space, 72px));
  height:auto;
  max-height:min(72dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px));
  width:auto;
  z-index:1001;
  padding:12px;
  background:var(--surface-glass);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 26px 60px var(--shadow);
  transform:translateY(calc(100% + var(--menu-pill-space, 72px) + 24px));
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.mobile-drawer .mobile-drawer-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
}

.mobile-drawer .mobile-drawer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  margin:0 auto;
}

.mobile-drawer .mobile-drawer-brand img{
  height:56px;
  width:auto;
  display:block;
}

.mobile-drawer .mobile-drawer-top .nav-toggle{
  position:absolute;
  right:0;
  top:0;
}

.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:6px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
}

.mobile-nav > a,
.mobile-nav > details{
  border-bottom:1px solid var(--line);
}

.mobile-nav > :last-child{
  border-bottom:none;
}

.mobile-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:0;
  border:1px solid transparent;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  letter-spacing:.01em;
  background:transparent;
  font-size:16px;
  text-align:left;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible{
  border-color:rgba(95,174,138,.25);
  background:rgba(95,174,138,.08);
}

.mobile-nav a[aria-current="page"]{
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.12);
}

.mobile-nav-row{
  font-size:16px;
  font-weight:700;
}

.mobile-nav-group{
  background:transparent;
}

.mobile-nav-group summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.mobile-nav-group summary::-webkit-details-marker{
  display:none;
}

.mobile-nav-group summary::after{
  content:"";
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  opacity:.7;
  transform:translateY(1px);
}

.mobile-nav-group[open] > summary{
  background:rgba(95,174,138,.08);
}

.mobile-nav-group[open] > summary::after{
  transform:translateY(1px) rotate(180deg);
}

.mobile-nav-panel{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:6px 0 12px;
  background:var(--surface-2);
  border-top:1px solid var(--line);
}

.mobile-nav-subtitle{
  padding:8px 16px 2px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

.mobile-nav-subrow{
  font-size:15px;
  font-weight:600;
  padding:10px 20px;
  background:transparent;
}

.mobile-drawer .mobile-meta{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.mobile-drawer .mobile-meta a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(95,174,138,.35);
}

.mobile-drawer .mobile-meta a:hover,
.mobile-drawer .mobile-meta a:focus-visible{
  border-bottom-color:rgba(95,174,138,.7);
}

@media (max-width: 720px){
  .mobile-drawer{
    width:calc(100vw - 28px);
    max-height:calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
      - var(--menu-pill-space, 72px)
      - 24px
    );
    padding:10px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + var(--menu-pill-space, 72px));
  }

  .mobile-nav{
    border-radius:14px;
  }

  .mobile-nav a,
  .mobile-nav-group summary{
    padding:12px 14px;
    font-size:15px;
  }

  .mobile-nav-row{
    font-size:15px;
  }

  .mobile-nav-subrow{
    font-size:14px;
    padding:9px 18px;
  }

  .mobile-nav-subtitle{
    font-size:10px;
    letter-spacing:.1em;
  }

  .mobile-drawer .mobile-meta{
    font-size:12px;
  }
}

body.nav-open .mobile-nav-overlay{
  opacity:1;
  pointer-events:auto;
}

body.nav-open .mobile-drawer{
  transform:translateY(0);
}

body.nav-open{
  overflow:hidden;
}

.menu-pill{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform:translateX(-50%);
  z-index:1002;
  display:none;
  align-items:center;
  gap:0;
  padding:14px 18px;
  min-height:56px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 38px var(--shadow);
  cursor:pointer;
  color:var(--ink);
}

.menu-pill .nav-toggle-icon{
  width:18px;
}

.menu-pill .nav-toggle-icon,
.menu-pill .nav-toggle-icon::before,
.menu-pill .nav-toggle-icon::after{
  width:18px;
}

@media(max-width:420px){
  .mobile-drawer{
    left:10px;
    right:10px;
  }

  .mobile-drawer .mobile-drawer-brand img{
    height:52px;
  }

}

.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.site-nav summary::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  font-family:inherit;
  font-size:16px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover,
.btn:focus-visible{
  border-color:rgba(95,174,138,.55);
  box-shadow:0 16px 34px var(--shadow);
  transform:translateY(-1px);
}

.btn-primary{
  background:linear-gradient(135deg, rgba(95,174,138,.18), rgba(95,174,138,.06));
  border-color:rgba(95,174,138,.45);
}

.btn-ghost{
  background:transparent;
}

.btn-invest-highlight{
  border-color:rgba(95,174,138,.7);
  background:linear-gradient(135deg, rgba(95,174,138,.2), rgba(95,174,138,.05));
  box-shadow:0 0 0 0 rgba(95,174,138,.38);
  animation:invest-cta-pulse 2.2s ease-out infinite;
}

.btn-invest-highlight:hover,
.btn-invest-highlight:focus-visible{
  animation-play-state:paused;
  border-color:rgba(95,174,138,.8);
}

@keyframes invest-cta-pulse{
  0%{
    transform:translateY(0);
    box-shadow:0 0 0 0 rgba(95,174,138,.38);
  }
  45%{
    transform:translateY(-1px);
    box-shadow:0 0 0 10px rgba(95,174,138,0);
  }
  100%{
    transform:translateY(0);
    box-shadow:0 0 0 0 rgba(95,174,138,0);
  }
}

@media (prefers-reduced-motion: reduce){
  .btn-invest-highlight{
    animation:none;
  }
}

.home-cta-pair .btn{
  min-width:220px;
}

.section{
  padding:120px 80px;
}

.section-title{
  font-size:34px;
  font-weight:500;
  line-height:1.25;
  margin:0;
}

.section-lead{
  margin-top:18px;
  max-width:900px;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.balance-copy{
  text-wrap:pretty;
}

.mail-keep-together{
  white-space:nowrap;
}

.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:42px;
  align-items:start;
}

.media{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}

.media img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
}

picture{
  display:block;
}

picture > img{
  display:block;
}

.media figcaption{
  margin:0;
  padding:12px 14px 14px;
  background:var(--surface-2);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

/* Image swap (hover/tap) */
.swap-stack{
  position:relative;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(800px 240px at 20% 0%, rgba(95,174,138,.18), rgba(95,174,138,0) 60%),
    radial-gradient(700px 260px at 90% 0%, rgba(95,174,138,.10), rgba(95,174,138,0) 62%),
    var(--surface);
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.08);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  aspect-ratio:16 / 9;
}

.swap-stack--plain{
  border:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
}

.swap-stack:focus-visible{
  outline:3px solid rgba(95,174,138,.35);
  outline-offset:4px;
}

.swap-stack .swap-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  transition:opacity 1.15s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
  z-index:0;
}

.swap-stack .swap-front{ opacity:1; }
.swap-stack .swap-back{ opacity:0; }

.swap-stack:hover .swap-front,
.swap-stack.is-flipped .swap-front{
  opacity:0;
}

.swap-stack:hover .swap-back,
.swap-stack.is-flipped .swap-back{
  opacity:1;
}

.swap-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.34);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:750;
  letter-spacing:.01em;
  backdrop-filter:blur(6px);
  pointer-events:none;
  z-index:2;
}

.swap-hoverbox{
  position:absolute;
  left:0;
  top:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.34);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:12px;
  font-weight:750;
  letter-spacing:.01em;
  backdrop-filter:blur(6px);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:auto;
  z-index:3;
}

.swap-stack.is-hover-link .swap-hoverbox,
.swap-stack:focus-within .swap-hoverbox,
.swap-stack.is-flipped .swap-hoverbox{
  opacity:1;
  transform:translateY(0);
}

.swap-hoverbox:focus-visible{
  outline:3px solid rgba(95,174,138,.35);
  outline-offset:3px;
}

.faq{
  margin-top:26px;
  display:grid;
  gap:12px;
}

.faq details{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  background:var(--surface-2);
}

.faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  color:var(--ink);
}

/* Mobile alternative for interactive hotspot graphics */
.reveal-mobile-panel{
  display:none;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
}

.reveal-mobile-panel details{
  padding:14px 16px;
  border-top:1px solid var(--line);
}

.reveal-mobile-panel details:first-child{
  border-top:0;
}

.reveal-mobile-panel summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  color:var(--ink);
}

.reveal-mobile-panel p{
  margin-top:10px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

/* Dark mode: stronger text contrast in mobile panels */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .reveal-mobile-panel p{
    color:var(--ink);
    opacity:.92;
  }
}
:root[data-theme="dark"] .reveal-mobile-panel p{
  color:var(--ink);
  opacity:.92;
}

@media (max-width:900px), (hover: none), (pointer: coarse){
  /* Mobile: keep tap-targets on image, but use the panel for the text. */
  .reveal-stage .reveal-layer{
    outline:none;
    background:transparent;
  }

  .reveal-stage .reveal-layer .reveal-tooltip,
  .reveal-stage .hotspot .hotspot-tooltip{
    display:none;
  }

  .reveal-mobile-panel{
    display:block;
  }

  /* Prevent browser scroll-anchoring from "jumping" when <details> expands. */
  .energy-reveal,
  .reveal-mobile-panel{
    overflow-anchor:none;
  }

  /* When we scroll programmatically, account for the fixed header. */
  .reveal-stage{
    scroll-margin-top:120px;
  }
}

/* Highlight effects (image hotspot + panel item) */
.reveal-stage .reveal-layer.is-highlight{
  transform:translateY(-1px);
}

.reveal-stage .reveal-layer.is-highlight::after{
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  animation:hotspot-pulse 1.25s ease-out 1;
}

.reveal-stage .reveal-layer.is-highlight::before{
  opacity:1;
  animation:hotspot-ring 1.25s ease-out 1;
}

.reveal-stage .hotspot.is-highlight .marker{
  box-shadow:0 16px 34px rgba(0,0,0,.18);
  animation:hotspot-pulse 1.25s ease-out 1;
}

.reveal-stage .hotspot.is-highlight .marker::after{
  opacity:1;
  animation:hotspot-ring 1.25s ease-out 1;
}

.reveal-mobile-panel details{
  transition:background-color .25s ease, box-shadow .25s ease;
}

.reveal-mobile-panel details.is-highlight{
  background:rgba(95,174,138,.10);
  box-shadow:inset 0 0 0 1px rgba(95,174,138,.18);
}

@keyframes hotspot-pulse{
  0%{ transform:translate(-50%,-50%) scale(1); }
  35%{ transform:translate(-50%,-50%) scale(1.12); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

@keyframes hotspot-ring{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:.95; }
  100%{ transform:translate(-50%,-50%) scale(1.35); opacity:0; }
}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{
  content:"+";
  float:right;
  color:var(--muted);
}

.faq details[open] summary::after{
  content:"–";
}

.faq p{
  margin-top:10px;
  color:var(--muted);
  line-height:1.65;
  font-size:16px;
}

.form{
  margin-top:32px;
}

.form-steps{
  margin-top:0;
}

.stepper{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 14px 0;
  padding:0;
  list-style:none;
}

.stepper li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:13px;
}

.stepper .step-num{
  width:26px;
  height:26px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--surface);
  font-weight:700;
}

.stepper li[aria-current="step"]{
  color:var(--ink);
  border-color:rgba(95,174,138,.35);
  background:rgba(95,174,138,.07);
}

.stepper li[aria-current="step"] .step-num{
  border-color:rgba(95,174,138,.55);
  color:var(--ink);
}

.form-progress{
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  overflow:hidden;
  margin:10px 0 18px;
}

.form-progress .bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(95,174,138,.75), rgba(95,174,138,.25));
  transition:width .25s ease;
}

.contact-form{
  position:relative;
  margin-top:18px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(95,174,138,.18);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(95,174,138,.14), rgba(95,174,138,0) 55%),
    var(--surface);
  box-shadow:0 18px 36px rgba(0,0,0,.08);
}

.contact-form .stepper{
  margin-bottom:20px;
  gap:12px;
}

.contact-form .stepper li{
  position:relative;
  padding:12px 16px;
  border-radius:16px;
  font-size:14px;
  border-color:rgba(95,174,138,.18);
  background:
    linear-gradient(135deg, rgba(95,174,138,.10), rgba(95,174,138,0)),
    var(--surface);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.contact-form .stepper li.is-complete{
  color:var(--ink);
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.12);
}

.contact-form .stepper li[aria-current="step"]{
  color:var(--ink);
  border-color:rgba(95,174,138,.6);
  background:linear-gradient(135deg, rgba(95,174,138,.18), rgba(95,174,138,.06));
  box-shadow:0 10px 22px rgba(95,174,138,.18);
  transform:translateY(-1px);
}

.contact-form .stepper .step-num{
  width:30px;
  height:30px;
  font-size:12px;
  border-color:rgba(95,174,138,.25);
  background:var(--surface);
}

.contact-form .stepper li.is-complete .step-num{
  background:rgba(95,174,138,.18);
  border-color:rgba(95,174,138,.55);
  color:var(--ink);
}

.contact-form .stepper li[aria-current="step"] .step-num{
  background:rgba(95,174,138,.22);
  border-color:rgba(95,174,138,.65);
  color:var(--ink);
}

.contact-form .form-progress-wrap{
  margin-bottom:20px;
}

.contact-form .form-progress{
  --progress:0;
  position:relative;
  height:22px;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(95,174,138,.22);
  background:linear-gradient(90deg, rgba(95,174,138,.08), rgba(95,174,138,.02));
  display:flex;
  align-items:center;
  padding:0 12px;
  overflow:visible;
}

.contact-form .form-progress::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(95,174,138,.18), rgba(95,174,138,.04));
  transform:translateY(-50%);
}

.contact-form .form-progress .bar{
  position:absolute;
  left:12px;
  right:auto;
  width:calc(100% - 24px);
  top:50%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(95,174,138,.95), rgba(95,174,138,.35));
  transform:translateY(-50%) scaleX(var(--progress, 0));
  transform-origin:left;
  transition:transform .25s ease;
  box-shadow:0 6px 12px rgba(95,174,138,.22);
}

.contact-form .form-progress .progress-dots{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.contact-form .form-progress .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid rgba(95,174,138,.35);
  box-shadow:0 0 0 2px rgba(95,174,138,.10);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.contact-form .form-progress .dot.is-complete,
.contact-form .form-progress .dot.is-active{
  background:var(--accent);
  border-color:rgba(95,174,138,.7);
  transform:scale(1.08);
  box-shadow:0 0 0 3px rgba(95,174,138,.18);
}

.contact-form .form-progress .dot.is-active{
  box-shadow:0 0 0 4px rgba(95,174,138,.22);
}

.form-step{
  display:none;
  border:0;
  padding:0;
  margin:0;
}

.form-step.is-active{
  display:block;
}

.contact-form .form-step{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(95,174,138,.12);
  background:var(--surface-2);
}

.form-step legend{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 10px 0;
}

.contact-form .form-step legend{
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.contact-form .form-step legend::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(95,174,138,.4), rgba(95,174,138,0));
}

.review{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.review-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:var(--surface-2);
}

.review-item strong{
  display:block;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}

.review-item span{
  color:var(--ink);
  line-height:1.55;
  word-break:break-word;
}

.notice.success{
  border-color:rgba(95,174,138,.45);
  background:rgba(95,174,138,.10);
}

.notice.error{
  border-color:rgba(180,35,24,.45);
  background:rgba(180,35,24,.06);
}

.cta-banner{
  padding:96px 80px;
  background:transparent;
  border-top:0;
  border-bottom:0;
}

.cta-banner .cta-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:28px;
  align-items:center;
}

.cta-banner h2{
  margin:0;
  font-size:34px;
  font-weight:500;
  line-height:1.25;
}

.cta-banner p{
  margin-top:14px;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
  max-width:820px;
}

.cta-banner .cta-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}



@keyframes progressShine{
  0%{ transform:translateX(-60%); }
  55%{ transform:translateX(130%); }
  100%{ transform:translateX(130%); }
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.contact-form .form-grid{
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.contact-form .field{
  gap:10px;
}

.field label{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.contact-form .field label{
  font-size:14px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--ink);
  font-weight:600;
}

.contact-form .field:focus-within label{
  color:var(--accent);
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink);
  font:inherit;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea{
  padding:16px 18px;
  border-radius:16px;
  background:var(--surface);
}

.field textarea{
  min-height:140px;
  resize:vertical;
}

.contact-form .field textarea{
  min-height:180px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(95,174,138,.55);
  box-shadow:0 0 0 4px rgba(95,174,138,.12);
}

.field .hint{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.contact-form .field .hint,
.contact-form .field .error{
  font-size:14px;
}

.field .error{
  display:none;
  color:#b42318;
  font-size:13px;
  line-height:1.4;
}

.field[data-invalid="true"] .error{
  display:block;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select{
  border-color:rgba(180,35,24,.45);
  box-shadow:0 0 0 4px rgba(180,35,24,.10);
}

.form-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.contact-form .form-actions{
  margin-top:22px;
  gap:16px;
}

.notice{
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(95,174,138,.35);
  background:rgba(95,174,138,.08);
  color:var(--ink);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav summary:hover,
.site-nav summary:focus-visible{
  color:var(--ink);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}

.site-nav summary:hover::before,
.site-nav summary:focus-visible::before{
  transform:scaleX(1);
  transform-origin:left;
}

.site-logo img{
  height:88px;
  display:block;
}

.site-footer{
  border-top:1px solid var(--line);
  padding:56px 80px 28px;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(95,174,138,.10), rgba(95,174,138,0) 65%),
    var(--surface);
}

.site-footer .footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:28px;
  align-items:start;
}

.footer-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.footer-logo img{
  height:44px;
  width:auto;
  display:block;
}

.footer-tagline{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  max-width:320px;
  line-height:1.6;
}

.site-footer h2,
.site-footer h3{
  margin:0 0 12px 0;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:600;
}

.footer-list{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-list li{
  margin:8px 0;
  padding:0;
}

.site-footer a{
  color:var(--muted);
  text-decoration:none;
}

.site-footer a:hover,
.site-footer a:focus-visible{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:rgba(95,174,138,.6);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.footer-bottom{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.footer-bottom p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.page-main{
  padding:140px 80px 120px;
}

.page-title{
  font-size:40px;
  font-weight:500;
  line-height:1.15;
}

.page-lead{
  margin-top:24px;
  max-width:920px;
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
}

/* Subpages: use the same hero typography as the homepage. */
body:not(.home-page) .hero.hero-partner .hero-text h1,
body:not(.home-page) .hero.hero-partner .hero-text .page-title{
  margin:0;
  max-width:820px;
  font-size:clamp(20px, 5.2vw, 68px);
  font-weight:400;
  line-height:1.05;
  color:color-mix(in srgb, var(--accent) 82%, var(--ink) 18%);
}

body:not(.home-page) .hero.hero-partner .hero-text h1 .hero-brand{
  color:var(--accent);
  font-weight:400;
}

body:not(.home-page) .hero.hero-partner .hero-text h1 strong{
  color:var(--ink);
  font-weight:600;
}

body:not(.home-page) .hero.hero-partner .hero-text p,
body:not(.home-page) .hero.hero-partner .hero-text .page-lead,
body:not(.home-page) .hero.hero-partner .hero-text .hero-subtitle{
  margin-top:40px;
  max-width:620px;
  font-size:22px;
  color:var(--muted);
}

body:not(.home-page) .hero.hero-partner .hero-text .hero-subtitle{
  margin-top:8px;
  max-width:900px;
  font-size:clamp(20px, 5.2vw, 68px);
  font-weight:600;
  line-height:1.05;
  color:var(--ink);
}

body:not(.home-page) .hero.hero-partner .hero-text .info-strip{
  margin-top:26px;
}

/* Product detail pages: calmer hero typography and spacing like homepage rhythm */
body.product-detail-view{
  background:
    radial-gradient(1300px 720px at 50% -10%, rgba(95,174,138,.06), rgba(95,174,138,0) 70%),
    radial-gradient(1100px 620px at 50% 62%, rgba(95,174,138,.05), rgba(95,174,138,0) 72%),
    var(--bg-grad-2);
}

body.product-detail-view .hero.hero-partner{
  padding:156px 80px 86px;
}

body.product-detail-view .hero.hero-partner .hero-grid{
  grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
  gap:38px;
  align-items:start;
}

body.product-detail-view .hero.hero-partner .hero-text .product-kicker{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}

body.product-detail-view .hero.hero-partner .hero-text h1{
  margin:0;
  max-width:820px;
  font-size:clamp(20px, 5.2vw, 68px);
  font-weight:400;
  line-height:1.05;
  color:color-mix(in srgb, var(--accent) 82%, var(--ink) 18%);
}

body.product-detail-view .hero.hero-partner .hero-text p,
body.product-detail-view .hero.hero-partner .hero-text .section-lead{
  margin-top:40px;
  max-width:620px;
  font-size:22px;
  color:var(--ink);
}

body.product-detail-view .product-detail-page{
  padding:calc(var(--header-height) + 1.25rem) 80px 120px;
}

body.product-detail-view .product-hero-media{
  padding:14px;
  border:1px solid color-mix(in srgb, var(--line) 76%, rgba(95,174,138,.34) 24%);
  border-radius:18px;
  background:
    linear-gradient(160deg, rgba(95,174,138,.09), rgba(95,174,138,0) 48%),
    var(--surface);
  box-shadow:0 16px 34px rgba(0,0,0,.09);
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}

body.product-detail-view .product-hero-media .product-media{
  order:2;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
  cursor:zoom-in;
}

body.product-detail-view .product-hero-media .product-media img{
  transition:opacity .2s ease, transform .2s ease;
}

body.product-detail-view .product-hero-media .product-media img.is-switching{
  opacity:.78;
  transform:scale(.995);
}

body.product-detail-view .product-hero-media .product-gallery{
  order:1;
  margin-top:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

body.product-detail-view .product-hero-media .gallery-item{
  min-height:0;
  aspect-ratio:1 / 1;
  width:100%;
  border:1px solid color-mix(in srgb, var(--line) 72%, rgba(95,174,138,.28) 28%);
  opacity:.9;
  transition:border-color .15s ease, opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

body.product-detail-view .product-hero-media .gallery-item.is-active{
  border-color:rgba(95,174,138,.78);
  box-shadow:0 0 0 2px rgba(95,174,138,.20);
  opacity:1;
}

body.product-detail-view .product-hero-media .gallery-item:hover{
  transform:translateY(-1px);
  opacity:1;
}

body.product-detail-view .product-description p{
  margin:0;
  max-width:none;
}

body.product-detail-view .product-detail-page .product-article,
body.product-detail-view .product-detail-page .product-spec,
body.product-detail-view .product-detail-page .product-content{
  border-color:color-mix(in srgb, var(--line) 78%, rgba(95,174,138,.35) 22%);
  background:color-mix(in srgb, var(--surface) 92%, rgba(95,174,138,.08) 8%);
  box-shadow:0 12px 30px rgba(0,0,0,.05);
}

body.product-detail-view .product-detail-page .product-spec dl{
  margin-top:8px;
}

body.product-detail-view .product-detail-page .product-spec dt{
  color:var(--ink);
  font-weight:650;
}

body.product-detail-view .product-detail-page > section{
  margin-top:22px;
}

body.product-detail-view .product-detail-page > section:first-of-type{
  margin-top:0;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:12px;
  z-index:3000;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(95,174,138,.5);
  background:var(--surface);
  color:var(--ink);
  text-decoration:none;
  box-shadow:0 16px 34px var(--shadow);
}

.skip-link:focus{
  left:12px;
}

.page-subnav{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.page-subnav .btn{
  padding:10px 14px;
  border-radius:999px;
  font-weight:650;
}

.speicherinvest-page .page-main{
  padding-top:76px;
}

.speicherinvest-page .page-subnav{
  margin-top:6px;
  gap:8px;
}

.speicherinvest-page .page-subnav .btn{
  padding:8px 13px;
}

.speicherinvest-page .cta-banner#kontakt{
  padding:56px 80px;
}

.speicherinvest-page .cta-banner#kontakt .cta-inner{
  grid-template-columns:1fr;
  gap:16px;
  max-width:960px;
  margin:0 auto;
}

.speicherinvest-page .cta-banner#kontakt p{
  margin-top:10px;
  max-width:780px;
}

.speicherinvest-page .cta-banner#kontakt .cta-actions{
  justify-content:flex-start;
}

.invest-proof-card{
  margin-top:24px;
  background:
    linear-gradient(160deg, rgba(95,174,138,.13), rgba(95,174,138,0) 44%),
    var(--surface);
}

.invest-proof-kicker{
  margin:0;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.invest-proof-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.invest-proof-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px 14px;
  background:color-mix(in srgb, var(--surface) 92%, #fff 8%);
}

.invest-proof-label{
  display:block;
  margin-bottom:5px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.invest-signal-strip{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.invest-signal-strip span{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:var(--muted);
  background:color-mix(in srgb, var(--surface) 94%, #fff 6%);
}

.invest-signal-grid{
  margin-top:16px;
}

.invest-flow{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}

.invest-flow-step{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 14px;
  background:
    linear-gradient(170deg, rgba(95,174,138,.12), rgba(95,174,138,0) 44%),
    var(--surface);
}

.invest-flow-step h3{
  margin:8px 0 6px;
  font-size:18px;
}

.invest-flow-step p{
  margin:0;
  color:var(--muted);
}

.invest-flow-step:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-8px;
  top:50%;
  width:8px;
  height:8px;
  border-top:2px solid color-mix(in srgb, var(--accent) 50%, var(--line) 50%);
  border-right:2px solid color-mix(in srgb, var(--accent) 50%, var(--line) 50%);
  transform:translateY(-50%) rotate(45deg);
}

.invest-flow-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--accent) 36%, var(--line) 64%);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:color-mix(in srgb, var(--ink) 80%, #fff 20%);
}

.invest-note-card{
  margin-top:14px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line) 78%);
  border-radius:16px;
  padding:16px;
  background:color-mix(in srgb, var(--surface) 95%, #fff 5%);
}

.invest-note-card h3{
  margin:0 0 8px;
}

.invest-note-card p{
  margin:0;
  color:var(--muted);
}

.invest-icon-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.invest-icon-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(165deg, rgba(95,174,138,.12), rgba(95,174,138,0) 44%),
    var(--surface);
  padding:14px;
}

.invest-icon-wrap{
  width:56px;
  height:56px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  background:color-mix(in srgb, var(--surface) 92%, #fff 8%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.invest-icon-svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:color-mix(in srgb, var(--ink) 82%, var(--accent) 18%);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.invest-icon-card h3{
  margin:10px 0 6px;
  font-size:19px;
}

.invest-icon-card p{
  margin:0;
  color:var(--muted);
}

.invest-icon-points{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.invest-icon-points li{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 12px;
  background:color-mix(in srgb, var(--surface) 94%, #fff 6%);
  color:var(--muted);
}

.invest-icon-points li::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  flex:0 0 14px;
  background:linear-gradient(145deg, rgba(95,174,138,.95), rgba(95,174,138,.55));
}

.invest-timeline{
  margin:16px 0 0;
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
}

.invest-timeline li{
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  align-items:flex-start;
  gap:14px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:var(--surface);
}

.invest-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  color:color-mix(in srgb, var(--ink) 80%, #fff 20%);
  background:
    linear-gradient(145deg, rgba(95,174,138,.22), rgba(95,174,138,.08)),
    var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--line) 72%);
}

.invest-timeline h3{
  margin:1px 0 6px;
  font-size:18px;
}

.invest-timeline p{
  margin:0;
  color:var(--muted);
}

.contracting-hero{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  align-items:center;
  position:relative;
}

.contracting-hero .eyebrow{
  margin:0 0 10px 0;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.contracting-hero .page-title{
  margin-top:0;
}

.hero-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.contracting-hero-card{
  padding:22px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.contracting-hero-card h2{
  margin:0 0 12px 0;
  font-size:18px;
}

.hero-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:8px;
}

.contracting-kpis{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.contracting-kpis .kpi-label{
  display:block;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contracting-kpis .kpi-value{
  font-weight:700;
  font-size:16px;
}

.contracting-benefits .tile{
  background:var(--surface-2);
}

.contracting-page .page-main > section{
  margin-top:56px;
}

.contracting-page .page-main > section:first-of-type{
  margin-top:28px;
}

.contracting-page .tiles-grid{
  margin-top:26px;
}

.contracting-page .contracting-energy-reveal{
  margin-top:24px;
}

.contracting-page .contracting-energy-reveal .reveal-stage{
  position:relative;
  aspect-ratio:16/7;
  overflow:hidden;
  border-radius:22px;
  isolation:isolate;
}

.contracting-page .contracting-energy-reveal .reveal-clip{
  position:absolute;
  inset:0;
  border-radius:22px;
  overflow:hidden;
  z-index:1;
}

.contracting-page .contracting-energy-reveal .reveal-clip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(100%) contrast(.95);
}

.contracting-page .contracting-energy-reveal .reveal-layer{
  position:absolute;
  z-index:3;
  background:rgba(95,174,138,.04);
  border:none;
  border-radius:16px;
  outline:1px solid rgba(95,174,138,.22);
  cursor:pointer;
  transition:background .25s ease, outline-color .25s ease, transform .25s ease;
}

.contracting-page .contracting-energy-reveal .reveal-layer:focus-visible{
  outline:2px solid rgba(95,174,138,.55);
  outline-offset:4px;
}

.contracting-page .contracting-energy-reveal .gen-1{
  left:11.01%;
  top:15.19%;
  width:22%;
  height:26%;
}

.contracting-page .contracting-energy-reveal .gen-2{
  left:0.68%;
  top:57.33%;
  width:22%;
  height:26%;
}

.contracting-page .contracting-energy-reveal .storage{
  left:36.10%;
  top:55.18%;
  width:22%;
  height:40%;
}

.contracting-page .contracting-energy-reveal .grid-1{
  left:72.01%;
  top:23.13%;
  width:22%;
  height:26%;
}

.contracting-page .contracting-energy-reveal .grid-2{
  left:72.78%;
  top:70.57%;
  width:22%;
  height:26%;
}

.contracting-page .contracting-energy-reveal .reveal-layer::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.95);
  border:2px solid var(--accent);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  z-index:6;
}

.contracting-page .contracting-energy-reveal .reveal-layer::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(95,174,138,.22), rgba(95,174,138,0) 65%);
  opacity:.7;
  pointer-events:none;
  z-index:5;
}

.contracting-page .contracting-energy-reveal .reveal-layer .reveal-tooltip{
  display:block;
  position:absolute;
  width:max-content;
  max-width:300px;
  padding:24px 28px;
  border-radius:12px;
  background:var(--surface-2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transform:translate(var(--tx, 0), calc(var(--ty, 0) + 12px));
  transition:opacity .28s ease, transform .28s ease;
  color:var(--ink);
  text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  pointer-events:none;
  z-index:4;
}

.contracting-page .contracting-energy-reveal .gen-1 .reveal-tooltip{
  left:100%;
  top:40%;
  --tx:24px;
  --ty:-50%;
}

.contracting-page .contracting-energy-reveal .gen-2 .reveal-tooltip{
  left:100%;
  bottom:90%;
  --tx:24px;
  --ty:-20px;
}

.contracting-page .contracting-energy-reveal .storage .reveal-tooltip{
  left:50%;
  bottom:100%;
  --tx:-50%;
  --ty:-24px;
}

.contracting-page .contracting-energy-reveal .grid-1 .reveal-tooltip{
  right:100%;
  top:40%;
  --tx:-24px;
  --ty:-50%;
}

.contracting-page .contracting-energy-reveal .grid-2 .reveal-tooltip{
  right:100%;
  bottom:90%;
  --tx:-24px;
  --ty:-20px;
}

.contracting-page .contracting-energy-reveal .reveal-layer:hover .reveal-tooltip,
.contracting-page .contracting-energy-reveal .reveal-layer:focus-visible .reveal-tooltip,
.contracting-page .contracting-energy-reveal .reveal-layer.is-open .reveal-tooltip{
  opacity:1;
  transform:translate(var(--tx, 0), var(--ty, 0));
}

.contracting-page .contracting-energy-reveal .reveal-layer:hover,
.contracting-page .contracting-energy-reveal .reveal-layer:focus-visible{
  outline-color:rgba(95,174,138,.42);
  background:rgba(95,174,138,.07);
  transform:translateY(-1px);
}

.contracting-page .contracting-energy-reveal .img-caption{
  margin-top:10px;
}

@media (max-width:900px), (hover: none), (pointer: coarse){
  .contracting-page .contracting-energy-reveal .reveal-layer{
    outline:none;
    background:transparent;
  }

  .contracting-page .contracting-energy-reveal .reveal-layer .reveal-tooltip{
    display:none !important;
  }

  .contracting-page .contracting-energy-reveal .reveal-mobile-panel{
    display:block;
  }
}

.leistungen-page .leistungsband{
  margin-top:28px;
  padding:30px 26px;
  border-radius:24px;
  border:1px solid var(--line);
}

.leistungen-page .leistungsband-light{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, rgba(95,174,138,.08) 10%), var(--surface));
}

.leistungen-page .leistungsband-dark{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 84%, rgba(95,174,138,.22) 16%), color-mix(in srgb, var(--surface) 90%, rgba(95,174,138,.12) 10%)),
    linear-gradient(180deg, rgba(95,174,138,.14), rgba(95,174,138,.04));
  border-color:color-mix(in srgb, var(--line) 58%, rgba(95,174,138,.34) 42%);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.leistungen-page .leistungsband-dark .section-title,
.leistungen-page .leistungsband-dark h3{
  color:var(--ink);
}

.leistungen-page .leistungsband-dark .section-lead,
.leistungen-page .leistungsband-dark p,
.leistungen-page .leistungsband-dark li,
.leistungen-page .leistungsband-dark .img-caption,
.leistungen-page .leistungsband-dark .img-caption a{
  color:var(--muted);
}

.leistungen-page .leistungsband-dark .tile,
.leistungen-page .leistungsband-dark .icon-item{
  background:color-mix(in srgb, var(--surface) 94%, rgba(95,174,138,.06) 6%);
  border-color:var(--line);
}

.leistungen-page .leistungsband-dark .icon{
  border-color:color-mix(in srgb, var(--line) 42%, rgba(95,174,138,.44) 58%);
  background:rgba(95,174,138,.12);
}

@media (max-width:900px){
  .leistungen-page .leistungsband{
    margin-top:20px;
    padding:24px 18px;
    border-radius:18px;
  }

  .contracting-page .page-main > section{
    margin-top:42px;
  }

  .contracting-page .page-main > section:first-of-type{
    margin-top:20px;
  }

  .contracting-page .tiles-grid{
    margin-top:20px;
  }

  .contracting-page .contracting-energy-reveal{
    margin-top:18px;
  }

  .contracting-page .contracting-energy-reveal .reveal-stage{
    border-radius:16px;
  }
}

body[data-hero-bg] .page-hero:not(.hero){
  background-image:
    linear-gradient(180deg, rgba(244,250,247,.88), rgba(255,255,255,.80) 75%),
    var(--page-hero-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:24px;
  padding:42px 36px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);
  margin-top:10px;
  min-height:320px;
  display:flex;
  align-items:center;
}

.product-detail-page .page-hero{
  display:grid;
  align-items:start;
}

.page-hero-inner{
  max-width:760px;
}

:root[data-theme="dark"] body[data-hero-bg] .page-hero:not(.hero){
  background-image:
    linear-gradient(180deg, rgba(7,17,14,.84), rgba(11,20,17,.72) 75%),
    var(--page-hero-bg);
}

body[data-hero-bg] .hero-video-bg{
  display:none;
}


.card{
  margin-top:40px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  background:var(--surface-2);
}

.contact-layout{
  margin-top:30px;
  align-items:start;
}

.contact-side .card:first-child,
.contact-layout > .contact-form-shell{
  margin-top:0;
}

.contact-checklist-card{
  margin-top:18px;
}

.contact-card .section-title{
  font-size:20px;
}

.contact-card .section-lead{
  margin-top:10px;
}

.contact-direct-list{
  list-style:none;
  margin:18px 0 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.page-main .contact-direct-list li{
  margin:0;
  padding:14px 14px 14px 44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
}

.page-main .contact-direct-list li::before{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  background:url("../img/Sonne GBS.svg") center / contain no-repeat;
  opacity:.92;
}

.contact-direct-list li span{
  font-weight:650;
  color:var(--ink);
}

.contact-direct-list li a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(95,174,138,.35);
}

.contact-direct-list li a:hover,
.contact-direct-list li a:focus-visible{
  border-bottom-color:rgba(95,174,138,.8);
}

.contact-checklist{
  list-style:none;
  margin:16px 0 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.page-main .contact-checklist li{
  margin:0;
  padding:0 0 0 30px;
  position:relative;
  color:var(--ink-soft);
  line-height:1.55;
}

.page-main .contact-checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  background:url("../img/Sonne GBS.svg") center / contain no-repeat;
}

.contact-form-shell{
  border-radius:20px;
  border:1px solid rgba(95,174,138,.18);
  background:
    radial-gradient(130% 110% at 100% 0, rgba(95,174,138,.12), rgba(95,174,138,0) 58%),
    var(--surface-2);
}

.inline-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.inline-row a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.inline-row a:hover,
.inline-row a:focus-visible{
  border-bottom-color:rgba(95,174,138,.6);
}

.tiles-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.tiles-grid.tiles-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.invest-compare-grid{
  grid-template-columns:repeat(2, minmax(320px, 1fr));
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

.icon-list{
  list-style:none;
  margin:22px auto 0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  max-width:1100px;
}

.icon-item{
  display:flex;
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.icon-item:hover{
  transform:translateY(-2px);
  border-color:rgba(95,174,138,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.icon-item:focus-within{
  transform:translateY(-1px);
  border-color:rgba(95,174,138,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.icon-item .icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,174,138,.22);
  background:linear-gradient(135deg, rgba(95,174,138,.14), rgba(95,174,138,.04));
  color:var(--ink);
}

.icon-item .icon svg{
  width:20px;
  height:20px;
  display:block;
  color:var(--accent);
}

.icon-item h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
}

.icon-item p{
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.tile{
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  background:var(--surface);
}

.benefits-grid{
  margin-top:28px;
  gap:14px;
}

.benefits-grid .tile{
  padding:18px 20px;
  background:var(--surface-2);
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  position:relative;
  overflow:hidden;
}

.benefits-grid .tile::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, rgba(95,174,138,.85), rgba(95,174,138,.22));
}

.benefits-grid .tile:hover{
  transform:translateY(-2px);
  border-color:rgba(95,174,138,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.benefits-grid .tile:focus-within{
  border-color:rgba(95,174,138,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.benefits-grid .tile h2,
.benefits-grid .tile h3{
  line-height:1.35;
}

.benefits-grid .tile h2::after,
.benefits-grid .tile h3::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin-top:12px;
  border-radius:999px;
  background:rgba(95,174,138,.75);
}

.tile h2,
.tile h3{
  font-size:18px;
  margin:0 0 10px 0;
  letter-spacing:normal;
  text-transform:none;
}

.benefits-grid .tile h2,
.benefits-grid .tile h3{
  margin:0;
}

.benefit-highlight{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(95,174,138,.22);
  background:linear-gradient(135deg, rgba(95,174,138,.14), rgba(95,174,138,.04));
  color:var(--ink);
  font-weight:650;
  letter-spacing:.01em;
  position:relative;
  overflow:hidden;
}

.benefit-highlight::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(
    90deg,
    rgba(95,174,138,0),
    rgba(95,174,138,.20),
    rgba(95,174,138,0)
  );
  transform:translateX(-60%);
  animation:highlight-sweep 2.8s ease-in-out infinite;
  pointer-events:none;
  opacity:.8;
}

.benefit-highlight-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(95,174,138,.78);
  box-shadow:0 10px 22px rgba(95,174,138,.18);
  position:relative;
  flex:0 0 auto;
}

.benefit-highlight-dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(95,174,138,.24);
  animation:highlight-pulse 1.9s ease-out infinite;
  opacity:.9;
}

@keyframes highlight-sweep{
  0%{ transform:translateX(-70%); opacity:0; }
  25%{ opacity:.85; }
  55%{ opacity:.6; }
  100%{ transform:translateX(70%); opacity:0; }
}

@keyframes highlight-pulse{
  0%{ transform:scale(.72); opacity:0; }
  18%{ opacity:.75; }
  100%{ transform:scale(1.35); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .benefit-highlight::before,
  .benefit-highlight-dot::after{
    animation:none;
  }
}

.calc-card{
  margin-top:24px;
  border-radius:18px;
  background:
    radial-gradient(900px 260px at 20% -10%, rgba(95,174,138,.16), rgba(95,174,138,0) 58%),
    radial-gradient(700px 240px at 90% 0%, rgba(95,174,138,.10), rgba(95,174,138,0) 62%),
    var(--surface-2);
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.calc-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.calc-reset{
  padding:10px 14px;
}

.calc-body{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  gap:14px;
  align-items:start;
}

.calc-panel{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:var(--surface-glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 18px 46px rgba(0,0,0,.06);
}

:root[data-theme="dark"] .calc-panel{
  background:rgba(15,26,22,.70);
}

.calc-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.calc-output{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.calc-control{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 12px;
  background:var(--surface);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.calc-control:hover{
  transform:translateY(-1px);
  border-color:rgba(95,174,138,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.calc-control label{
  display:block;
  font-size:13px;
  font-weight:750;
  color:var(--ink);
}

.calc-control .hint{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.calc-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.calc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(95,174,138,.25);
  background:rgba(95,174,138,.08);
  font-size:12px;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}

.calc-range{
  width:100%;
  margin-top:12px;
  height:10px;
  border-radius:999px;
  appearance:none;
  -webkit-appearance:none;
  background:
    linear-gradient(
      90deg,
      rgba(95,174,138,.85) 0%,
      rgba(95,174,138,.85) var(--fill, 50%),
      rgba(0,0,0,.07) var(--fill, 50%),
      rgba(0,0,0,.07) 100%
    );
  border:1px solid rgba(0,0,0,.06);
}

:root[data-theme="dark"] .calc-range{
  background:
    linear-gradient(
      90deg,
      rgba(95,174,138,.85) 0%,
      rgba(95,174,138,.85) var(--fill, 50%),
      rgba(255,255,255,.10) var(--fill, 50%),
      rgba(255,255,255,.10) 100%
    );
  border-color:rgba(255,255,255,.10);
}

.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid rgba(95,174,138,.85);
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

.calc-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid rgba(95,174,138,.85);
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

.calc-range::-moz-range-track{
  background:transparent;
}

.calc-inline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.calc-inline input{
  flex:0 0 128px;
}

.calc-inline-unit{
  color:var(--muted);
  font-weight:750;
}

.calc-control .calc-range{
  margin-top:12px;
}


.calc-bullets{
  margin:12px 0 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.calc-bullets li{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(95,174,138,.20);
  background:rgba(95,174,138,.06);
  color:var(--ink);
  font-weight:700;
  font-size:13px;
}

.calc-chart{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  padding:14px 14px 12px;
  overflow:hidden;
  margin-top:2px;
}

.calc-chart-hero{
  padding:16px 16px 14px;
  border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.calc-chart-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.calc-chart-title{
  margin:0;
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}

.calc-chart-sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.calc-battery-wrap{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:18px;
}

.calc-battery{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(260px, 52vw);
  flex:0 0 auto;
  --bat-hi:#b6ffd6;
  --bat-mid:#2ecc71;
  --bat-lo:#1f9d54;
  --bat-shadow:rgba(46,204,113,.22);
}

.calc-battery .battery-3d{
  width:160px;
  margin:10px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.calc-battery .battery-cap{
  width:84px;
  height:18px;
  background:linear-gradient(180deg,#f3f3f3,#b9b9b9);
  border-radius:10px 10px 6px 6px;
  margin-bottom:8px;
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.65);
}

.calc-battery .battery-body{
  position:relative;
  width:100%;
  height:260px;
  border-radius:22px;
  background:linear-gradient(180deg,#d7dddd,#9aa3a3);
  padding:10px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.44),
    0 18px 40px rgba(0,0,0,.25);
  overflow:hidden;
}

:root[data-theme="dark"] .calc-battery .battery-body{
  background:linear-gradient(180deg,#2c3434,#111818);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),
    0 18px 42px rgba(0,0,0,.48);
}

.calc-battery .battery-body::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:16px;
  background:rgba(80,160,90,.16);
  z-index:3;
  pointer-events:none;
  backdrop-filter:blur(2px);
}

:root[data-theme="dark"] .calc-battery .battery-body::before{
  background:rgba(80,160,90,.10);
}

.calc-battery .battery-fill{
  position:absolute;
  bottom:6px;
  left:6px;
  right:6px;
  top:6px;
  border-radius:14px;
  overflow:hidden;
  --level:0%;
  z-index:1;
  box-shadow:
    0 18px 46px var(--bat-shadow),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -10px 22px rgba(0,0,0,.16);
}

.calc-battery .battery-fill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, var(--bat-hi) 0%, var(--bat-mid) 55%, var(--bat-lo) 100%);
  transform:translateZ(0) translateY(calc(100% - var(--level)));
  transition:transform .55s cubic-bezier(.2,.9,.2,1);
  will-change:transform;
}

.calc-battery .battery-rings{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.calc-battery .battery-rings span{
  position:absolute;
  left:14px;
  right:14px;
  height:8px;
  background:rgba(255,255,255,.40);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

.calc-battery .battery-rings span:nth-child(1){ top:66px; }
.calc-battery .battery-rings span:nth-child(2){ top:116px; }
.calc-battery .battery-rings span:nth-child(3){ top:166px; }
.calc-battery .battery-rings span:nth-child(4){ top:216px; }

.calc-battery-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.calc-battery-percent{
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
}

.calc-battery-caption{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}

.calc-gauge-wrap{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:18px;
}

.calc-gauge{
  width:160px;
  height:160px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  --bat-hi:#b6ffd6;
  --bat-mid:#2ecc71;
  --bat-lo:#1f9d54;
  --bat-shadow:rgba(46,204,113,.22);
}

.calc-gauge-svg{
  width:160px;
  height:160px;
}

.calc-gauge-center{
  fill:var(--surface);
  opacity:.92;
}

.calc-tree-wrap{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:18px;
}

.calc-tree{
  width:160px;
  height:160px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  --bat-hi:#b6ffd6;
  --bat-mid:#2ecc71;
  --bat-lo:#1f9d54;
  --bat-shadow:rgba(46,204,113,.22);
}

.calc-tree-svg{
  width:160px;
  height:160px;
}

.calc-tree-ground{
  fill:none;
  stroke:var(--line);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.9;
}

.calc-tree-trunk-fill{
  fill:color-mix(in oklab, var(--ink) 32%, var(--muted) 68%);
  opacity:.62;
}

.calc-tree-trunk-outline{
  fill:none;
  stroke:color-mix(in oklab, var(--ink) 78%, var(--muted) 22%);
  stroke-width:2.4;
  stroke-linejoin:round;
  opacity:.32;
}

.calc-tree-trunk-highlight{
  fill:none;
  stroke:var(--surface);
  stroke-width:2.2;
  stroke-linecap:round;
  opacity:.22;
}

.calc-tree-bark path{
  fill:none;
  stroke:var(--surface);
  stroke-width:1.8;
  stroke-linecap:round;
  opacity:.14;
}

.calc-tree-branch{
  fill:none;
  stroke:color-mix(in oklab, var(--ink) 78%, var(--muted) 22%);
  stroke-linecap:round;
  opacity:.42;
}

:root[data-theme="dark"] .calc-tree-trunk-fill{ opacity:.42; }
:root[data-theme="dark"] .calc-tree-trunk-outline{ opacity:.22; }
:root[data-theme="dark"] .calc-tree-branch{ opacity:.34; }

.calc-tree-leaf{
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
  scale:.55;
  transition:opacity .35s ease, scale .45s cubic-bezier(.2,.9,.2,1);
  transition-delay:calc(var(--i, 0) * 14ms);
}

.calc-tree-leaf-shape{
  fill:var(--bat-mid);
  stroke:var(--bat-hi);
  stroke-width:1.25;
  filter:drop-shadow(0 12px 22px var(--bat-shadow));
}

.calc-tree-leaf-vein{
  fill:none;
  stroke:var(--bat-lo);
  stroke-width:1.1;
  stroke-linecap:round;
  opacity:.55;
}

.calc-tree-leaf.is-on{
  opacity:1;
  scale:1;
}

.calc-tree-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.calc-tree-percent{
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
}

.calc-tree-caption{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}

.calc-gauge-track{
  fill:none;
  stroke:var(--line);
  stroke-width:12;
}

.calc-gauge-value{
  fill:none;
  stroke:var(--bat-mid);
  stroke-width:12;
  stroke-linecap:round;
  stroke-dasharray:302;
  stroke-dashoffset:302;
  transition:stroke-dashoffset .55s cubic-bezier(.2,.9,.2,1), stroke .55s cubic-bezier(.2,.9,.2,1);
  filter:drop-shadow(0 12px 26px var(--bat-shadow));
}

.calc-gauge-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.calc-gauge-percent{
  font-size:44px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
}

.calc-gauge-caption{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}

@media (prefers-reduced-motion: reduce){
  .calc-gauge-value{ transition:none; }
  .calc-tree-leaf{ transition:none; }
}

@media (prefers-reduced-motion: reduce){
  .calc-battery .battery-fill::before{ transition:none; }
}

@media (max-width: 900px){
  .calc-battery .battery-body::before{
    backdrop-filter:none;
  }
  .calc-battery .battery-fill{
    box-shadow:
      0 14px 32px var(--bat-shadow),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -10px 20px rgba(0,0,0,.14);
  }
}

.calc-hero-kpis{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.calc-kpi{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 12px;
  background:rgba(255,255,255,.72);
}

:root[data-theme="dark"] .calc-kpi{
  background:rgba(15,26,22,.78);
}

.calc-kpi.is-primary{
  border-color:rgba(95,174,138,.25);
  background:linear-gradient(135deg, rgba(95,174,138,.14), rgba(255,255,255,.70));
}

:root[data-theme="dark"] .calc-kpi.is-primary{
  background:linear-gradient(135deg, rgba(95,174,138,.14), rgba(15,26,22,.78));
}

.calc-kpi-label{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}

.calc-kpi-value{
  margin-top:10px;
  font-size:30px;
  line-height:1.05;
  color:var(--ink);
  font-weight:850;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

.calc-card.is-updated .calc-kpi{
  animation:calc-pop .24s ease-out 1;
}

@keyframes calc-pop{
  0%{ transform:translateY(0); }
  40%{ transform:translateY(-1px); }
  100%{ transform:translateY(0); }
}

.calc-breakdown{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background:var(--surface-2);
}

.calc-breakdown summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  color:var(--ink);
}

.calc-breakdown summary::-webkit-details-marker{display:none}

.calc-breakdown summary::after{
  content:"+";
  float:right;
  color:var(--muted);
}

.calc-breakdown[open] summary::after{
  content:"–";
}

.calc-table-wrap{
  margin-top:12px;
  overflow:auto;
  border-radius:12px;
}

.calc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:420px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}

.calc-table th,
.calc-table td{
  padding:10px 12px;
  border-top:1px solid var(--line);
  text-align:left;
  font-size:13px;
}

.calc-table th{
  border-top:0;
  background:rgba(95,174,138,.08);
  color:var(--ink);
  font-weight:700;
}

.calc-table td:last-child,
.calc-table th:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.calc-table td:nth-child(2),
.calc-table th:nth-child(2){
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.tile p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

.team-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.profile{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.profile:hover{
  transform:translateY(-2px);
  border-color:rgba(95,174,138,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.profile:focus-within{
  transform:translateY(-1px);
  border-color:rgba(95,174,138,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.09);
}

.profile img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:50% 18%;
  filter:saturate(0.98) contrast(1.02);
  background:var(--surface-2);
}

/* Fine-tuned portrait framing per person */
.profile img[src*="portraet1"]{ object-position:50% 28%; }              /* Stefan */
.profile img[src*="portraet2"]{ object-position:50% 18%; }              /* Jan-Christian */
.profile img[src*="portraet3-portrait"]{ object-position:50% 14%; }     /* Robert */
.profile img[src*="andreasschuetz"]{ object-position:50% 24%; }         /* Andreas */
.profile img[src*="carstenschmidt"]{ object-position:50% 14%; }         /* Carsten */
.profile img[src*="2023 Silvano DAgostino"]{ object-position:50% 13%; } /* Silvano */

.profile .profile-body{
  padding:18px 18px 20px;
}

.profile .profile-name{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}

.profile .profile-role{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.profile .profile-text{
  margin-top:12px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

@media (max-width:900px){
  :root{
    --menu-pill-space:92px;
  }

  .menu-pill{
    display:flex;
  }

  .site-header{
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px;
  }
  .site-header-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
  }
  .site-header-actions{
    position:static;
    transform:none;
    gap:8px;
    justify-self:end;
    grid-column:3;
  }
  .site-logo{
    justify-self:start;
    grid-column:1;
  }
  .lang-toggle,
  .theme-toggle{
    padding:7px 11px;
    font-size:12px;
  }
  .site-logo img{
    height:56px;
  }
  body.has-mobile-nav .site-nav{
    display:none;
  }
  .nav-toggle{
    display:inline-flex;
    width:44px;
    height:44px;
  }
  html{
    scroll-padding-top:84px;
  }

  body.header-hidden .site-header{
    transform:translateY(calc(-100% - 10px));
  }

  body.show-scroll-pill .menu-pill{
    display:flex;
  }

  body.nav-open .site-header{
    transform:translateY(0);
  }
  .site-footer{
    padding:32px 24px 18px;
  }

  .site-footer .footer-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-bottom{
    margin-top:18px;
  }

  .page-main{
    padding:84px 20px 60px;
  }
  .product-detail-page{
    padding:calc(var(--header-height) + 1.25rem) 20px 60px;
  }
  .product-shell{
    grid-template-columns:1fr;
    gap:18px;
  }
  .product-sidebar{
    position:static;
  }
  .product-detail-page .grid.grid--3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  body.product-detail-view .hero.hero-partner{
    padding:132px 20px 64px;
  }
  body.product-detail-view .hero.hero-partner .hero-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  body.product-detail-view .product-hero-media{
    grid-template-columns:1fr;
    gap:10px;
  }
  body.product-detail-view .product-hero-media .product-gallery{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
  }
  body.product-detail-view .hero.hero-partner .hero-text h1{
    font-size:42px;
    max-width:100%;
    line-height:1.05;
  }
  body.product-detail-view .hero.hero-partner .hero-text p,
  body.product-detail-view .hero.hero-partner .hero-text .section-lead{
    margin-top:18px;
    font-size:17px;
    max-width:620px;
  }
  .page-title{
    font-size:32px;
  }

  .hero{
    min-height:auto;
    padding:124px 20px 60px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .hero p{
    margin-top:18px;
    font-size:17px;
  }

  .hero-media{
    justify-content:flex-start;
  }
  .page-lead{
    margin-top:16px;
  }

  body:not(.home-page) .hero.hero-partner .hero-text h1,
  body:not(.home-page) .hero.hero-partner .hero-text .page-title{
    font-size:42px;
    max-width:100%;
    line-height:1.05;
  }

  body:not(.home-page) .hero.hero-partner .hero-text p,
  body:not(.home-page) .hero.hero-partner .hero-text .page-lead,
  body:not(.home-page) .hero.hero-partner .hero-text .hero-subtitle{
    margin-top:18px;
    font-size:17px;
    max-width:620px;
  }

  body:not(.home-page) .hero.hero-partner .hero-text .hero-subtitle{
    margin-top:8px;
    max-width:100%;
    font-size:42px;
    line-height:1.05;
  }
  .card{
    margin-top:18px;
    padding:16px;
  }

	  .tiles-grid{
	    grid-template-columns:1fr;
	    margin-top:22px;
	    gap:12px;
	  }
	  .tiles-grid.tiles-grid-2{
	    grid-template-columns:1fr;
	  }

	  .icon-list{
	    grid-template-columns:1fr;
	  }

	  .team-grid{
	    grid-template-columns:1fr;
	    margin-top:20px;
	    gap:12px;
	  }

  .profile img{
    aspect-ratio:3 / 4;
    object-position:50% 18%;
  }

  .profile img[src*="portraet1"]{ object-position:50% 26%; }
  .profile img[src*="portraet2"]{ object-position:50% 17%; }
  .profile img[src*="portraet3-portrait"]{ object-position:50% 13%; }
  .profile img[src*="andreasschuetz"]{ object-position:50% 22%; }
  .profile img[src*="carstenschmidt"]{ object-position:50% 13%; }
  .profile img[src*="2023 Silvano DAgostino"]{ object-position:50% 12%; }

  .section{
    /* Offset for fixed header on mobile */
    padding:84px 20px 56px;
  }

  .gallery{
    padding:56px 24px;
  }

  .gallery-grid{
    grid-template-columns:1fr;
  }

  .trust{
    padding:34px 0;
  }

  .trust-row{
    justify-content:flex-start;
  }

  .split{
    grid-template-columns:1fr;
    gap:18px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .contact-form{
    padding:16px;
  }

  .contact-form .stepper{
    gap:8px;
  }

  .contact-form .stepper li{
    width:100%;
    justify-content:flex-start;
  }

  .contact-form .form-progress{
    height:20px;
    padding:0 10px;
  }

  .contact-form .form-progress::before{
    left:10px;
    right:10px;
  }

  .contact-form .form-progress .bar{
    left:10px;
    width:calc(100% - 20px);
  }

  .contact-form .form-progress .dot{
    width:10px;
    height:10px;
  }

  .contact-form .field label{
    font-size:13px;
  }

  .contact-form .field input,
  .contact-form .field select,
  .contact-form .field textarea{
    padding:14px 16px;
  }

  .btn{
    width:100%;
    padding:12px 16px;
  }

  .page-subnav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    margin-left:-6px;
    margin-right:-6px;
    padding-left:6px;
    padding-right:6px;
  }

  .page-subnav::-webkit-scrollbar{ display:none; }

  .page-subnav .btn{
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
  }

  .invest-proof-grid{
    grid-template-columns:1fr;
  }

  .invest-signal-strip{
    gap:8px;
  }

  .invest-signal-strip span{
    font-size:12px;
    padding:7px 10px;
  }

  .invest-flow{
    grid-template-columns:1fr;
    gap:10px;
  }

  .invest-flow-step:not(:last-child)::after{
    display:none;
  }

  .invest-icon-grid{
    grid-template-columns:1fr;
  }

  .invest-icon-points{
    grid-template-columns:1fr;
  }

  .invest-timeline li{
    grid-template-columns:48px minmax(0, 1fr);
    gap:10px;
    padding:12px;
  }

  .invest-step{
    width:40px;
    height:40px;
    border-radius:10px;
    font-size:12px;
  }

  .invest-timeline h3{
    font-size:16px;
    margin:0 0 4px;
  }
  .calc-top{
    flex-direction:column;
    align-items:stretch;
  }

  .calc-body{
    grid-template-columns:1fr;
  }

  .calc-inline input{
    flex:1;
  }

  .calc-battery-wrap{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  .calc-battery{
    width:min(260px, 92vw);
  }

  .calc-battery-meta{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .calc-battery-percent{
    font-size:38px;
  }

  .calc-hero-kpis{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:26px;
  }

  .section-lead{
    margin-top:12px;
    font-size:15px;
  }

  .faq{
    margin-top:14px;
    gap:8px;
  }

  .faq details{
    padding:12px 14px;
    border-radius:12px;
  }

  .reveal-mobile-panel{
    margin-top:14px;
  }

  .cta-banner{
    padding:46px 20px;
  }

  .cta-banner .cta-inner{
    grid-template-columns:1fr;
  }

  .cta-banner .cta-actions{
    justify-content:flex-start;
  }

}

@media (max-width:520px){
  body:not(.home-page) .hero.hero-partner .hero-text h1,
  body:not(.home-page) .hero.hero-partner .hero-text .page-title{
    font-size:36px;
  }

  body:not(.home-page) .hero.hero-partner .hero-text .hero-subtitle{
    font-size:36px;
  }
}

@media (max-width: 520px){
  .site-header{
    padding:calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  }

  .site-logo img{
    height:52px;
  }

  .page-main{
    padding:76px 16px 56px;
  }
  .product-detail-page{
    padding:calc(var(--header-height) + 1.1rem) 16px 56px;
  }
  .product-sidebar-card h2{
    font-size:24px;
  }
  .product-detail-page .grid.grid--3{
    grid-template-columns:1fr;
  }
  .product-detail-page .product-spec dl{
    grid-template-columns:1fr;
    gap:4px;
  }
  body.product-detail-view .product-hero-media{
    padding:12px;
    border-radius:14px;
  }
  body.product-detail-view .product-hero-media .product-gallery{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
  }
  body.product-detail-view .product-hero-media .gallery-item{
    width:72px;
    flex:0 0 72px;
  }

  .page-title{
    font-size:28px;
  }

  .section-title{
    font-size:24px;
  }

  .hero{
    padding:112px 16px 56px;
  }

  .hero p{
    font-size:16px;
  }

  .form-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .info-strip{
    padding:0;
    gap:8px 16px;
  }

  .info-pill{
    font-size:13px;
    padding:0;
  }

  .product-media img{
    height:120px;
  }

  .site-footer{
    padding:24px 16px 14px;
  }

  .logo-item{
    white-space:normal;
    width:100%;
    border-radius:14px;
    justify-content:flex-start;
  }

  .trust .container{
    gap:14px;
  }

  .trust-row{
    width:100%;
    gap:8px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .logo-item{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* Subtle scroll animations (respects prefers-reduced-motion via JS) */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}

.reveal-on-scroll.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-on-scroll.reveal-delay-1{ transition-delay:.06s; }
.reveal-on-scroll.reveal-delay-2{ transition-delay:.12s; }
.reveal-on-scroll.reveal-delay-3{ transition-delay:.18s; }


/* HOME PAGE */
:root{
  --home-section-gap:44px;
  --home-side-padding:80px;
}

.home-page{
  background:
    radial-gradient(1400px 760px at 50% -8%, rgba(95,174,138,.06), rgba(95,174,138,0) 70%),
    radial-gradient(1200px 680px at 50% 62%, rgba(95,174,138,.05), rgba(95,174,138,0) 72%),
    var(--bg-grad-2);
}

.home-page section{
  padding:0;
}

/* Keep breathing room before footer after the last home section */
.home-page .gallery{
  padding:0 0 52px;
}

.home-page .highlight{
  padding:20px 0 12px;
}

.home-page .trust{
  padding:30px 0;
}

.home-page .cta-banner{
  padding:0;
}

.home-page section > .container,
.home-page .highlight .container,
.home-page .trust .container,
.home-page .energy-reveal .container{
  padding-left:var(--home-side-padding);
  padding-right:var(--home-side-padding);
}

/* KEY FIGURES */
.home-page .figures{
  margin-top:44px;
  display:flex;
  gap:64px;
}

.home-page .figure span{
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

.home-page .figure strong{
  display:block;
  margin-top:10px;
  font-size:52px;
  font-weight:500;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* DIVIDER */
.home-page .divider{
  height:1px;
  background:transparent;
  margin:var(--home-section-gap) 0;
}

.home-page section h2{
  font-size:40px;
  font-weight:400;
  max-width:700px;
}

@media (min-width:901px){
  .home-page #pv-speicher h2{
    max-width:none;
    white-space:nowrap;
  }
}

.home-page section h2::after{
  content:"";
  display:block;
  width:48px;
  height:1px;
  background:var(--accent);
  margin-top:24px;
}

.home-page section p{
  margin-top:22px;
  max-width:700px;
  font-size:20px;
  color:var(--muted);
}

/* LIST */
.home-page section ul{
  margin-top:30px;
  list-style:none;
  border-top:1px solid var(--line);
  padding-top:24px;
}

.home-page section li{
  font-size:18px;
  margin-bottom:16px;
  padding-left:16px;
  position:relative;
}

.home-page section li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--accent);
}

/* RESPONSIVE */
@media (max-width:900px), (hover: none), (pointer: coarse){
  body:not(.home-page) .hero.hero-partner{padding:140px 24px 90px}
  body:not(.home-page) .hero.hero-partner .hero-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .home-page .hero{padding:140px 24px 90px}
  .home-page{ --home-section-gap:36px; --home-side-padding:24px; }
  .home-page .gallery{ padding:0 0 44px; }
  .home-page .figures{flex-direction:column;gap:40px}
  .home-page .hero h1{font-size:42px}
  .home-page section h2{font-size:32px}
  .home-page .hero-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media (max-width:520px){
  body:not(.home-page) .hero.hero-partner{padding:128px 18px 72px}
  .home-page .hero{padding:128px 18px 72px}
  .home-page{ --home-section-gap:30px; --home-side-padding:18px; }
  .home-page .gallery{ padding:0 0 32px; }
  .home-page .hero h1{font-size:36px}
  .home-page section h2{font-size:28px}
  .home-page section p{font-size:18px}
  .home-page .figure strong{font-size:44px}
}

/* ENERGY REVEAL */
.home-page .energy-reveal{
  position:relative;
  padding:0;
  background:
    linear-gradient(
      180deg,
      var(--bg-grad-2) 0%,
      var(--bg-soft) 55%,
      var(--bg-grad-2) 100%
    );
}

.home-page .energy-reveal::before, .home-page .energy-reveal::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:140px;
  pointer-events:none;
  z-index:0;
}

.home-page .energy-reveal::before{
  top:-1px;
  background:
    linear-gradient(
      180deg,
      var(--bg-grad-2),
      rgba(0,0,0,0)
    );
}

.home-page .energy-reveal::after{
  bottom:-1px;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0),
      var(--bg-grad-2)
    );
}

.home-page .energy-reveal .container{
  position:relative;
  z-index:1;
  max-width:1280px;
  margin:0 auto;
  padding-left:var(--home-side-padding);
  padding-right:var(--home-side-padding);
}

.home-page .reveal-stage{
  position:relative;
  margin-top:42px;
  aspect-ratio:16/7;
  overflow:hidden;
  border-radius:22px;
  isolation:isolate;
}

	.home-page .reveal-clip{
	  position:absolute;
	  inset:0;
	  border-radius:22px;
	  overflow:hidden;
	  z-index:1;
	}

	.home-page .reveal-clip picture{
	  width:100%;
	  height:100%;
	  display:block;
	}

	.home-page .reveal-clip img{
	  width:100%;
	  height:100%;
	  object-fit:cover;
	  filter:grayscale(100%) contrast(.95);
	  display:block;
	}

/* Interactive layers */
.home-page .reveal-layer{
  position:absolute;
  z-index:3;
  background:transparent;
  border:none;
  cursor:pointer;

  /* Zone sichtbar aber sehr dezent */
  border-radius:16px;
  outline:1px solid rgba(95,174,138,.22);
  background:rgba(95,174,138,.04);

  transition:background .25s ease, outline-color .25s ease, transform .25s ease;
  pointer-events:auto;
}
.home-page .reveal-layer:focus-visible{
  outline:2px solid rgba(95,174,138,.55);
  outline-offset:4px;
}

/* --- Sichtbare Hotspot-Zonen (Größe & Position) --- */
.home-page .gen-1{
  left:11.01%;
  top:15.19%;
  width:22%;
  height:26%;
}

.home-page .gen-2{
  left:0.68%;
  top:57.33%;
  width:22%;
  height:26%;
}

.home-page .storage{
  left:36.10%;
  top:55.18%;
  width:22%;
  height:40%;
}

.home-page .grid-1{
  left:72.01%;
  top:23.13%;
  width:22%;
  height:26%;
}

.home-page .grid-2{
  left:72.78%;
  top:70.57%;
  width:22%;
  height:26%;
}

/* sichtbarer Marker pro Zone */
.home-page .reveal-layer::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.95);
  border:2px solid var(--accent);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  z-index:6;
}

.home-page .reveal-layer::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(95,174,138,.22), rgba(95,174,138,0) 65%);
  opacity:.7;
  pointer-events:none;
  z-index:5;
}

/* Tooltip Styling and Animation */
.home-page .reveal-layer .reveal-tooltip{
  display:block;
  position:absolute;
  width:max-content;
  max-width:300px;
  padding:24px 28px;
  background:var(--surface-2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:12px;

  /* Animation ohne Positions-Transforms zu überschreiben */
  opacity:0;
  transform:translate(var(--tx, 0), calc(var(--ty, 0) + 12px));
  transition:opacity .28s ease, transform .28s ease;

  color:var(--ink);
  text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  pointer-events:none;
  z-index:4;
}

/* Tooltip Positionen – Desktop (optimal) */
.home-page .gen-1 .reveal-tooltip{
  left:100%;
  top:40%;
  --tx:24px;
  --ty:-50%;
}

.home-page .gen-2 .reveal-tooltip{
  left:100%;
  bottom:90%;
  --tx:24px;
  --ty:-20px;
}

.home-page .storage .reveal-tooltip{
  left:50%;
  bottom:100%;
  --tx:-50%;
  --ty:-24px;
}

.home-page .grid-1 .reveal-tooltip{
  right:100%;
  top:40%;
  --tx:-24px;
  --ty:-50%;
}

.home-page .grid-2 .reveal-tooltip{
  right:100%;
  bottom:90%;
  --tx:-24px;
  --ty:-20px;
}

/* Reveal interaction */
.home-page .reveal-layer:hover .reveal-tooltip, .home-page .reveal-layer:focus-visible .reveal-tooltip{
  opacity:1;
  transform:translate(var(--tx, 0), var(--ty, 0));
}
.home-page .reveal-layer:hover, .home-page .reveal-layer:focus-visible{
  outline-color:rgba(95,174,138,.42);
  background:rgba(95,174,138,.07);
  transform:translateY(-1px);
}
/* Tap-Open für Mobile */
.home-page .reveal-layer.is-open span{
  opacity:1;
  transform:translate(var(--tx, 0), var(--ty, 0));
}
.home-page .reveal-layer:hover .reveal-tooltip, .home-page .reveal-layer:focus-visible .reveal-tooltip, .home-page .reveal-layer.is-open .reveal-tooltip{
  pointer-events:auto;
}

/* REVEAL – Mobile: Tooltips immer im Bild (Panel), nur Tap */
@media(max-width:900px){
  .home-page .energy-reveal .container{
    padding:0 24px;
  }

  .home-page .reveal-stage{
    aspect-ratio:16/7;
  }

  /* Startseite mobil wie Contracting: Hotspot-Flächen ja, Tooltip im Bild nein. */
  .home-page .reveal-layer{
    outline:none;
    background:transparent;
  }

  .home-page .reveal-layer .reveal-tooltip{
    display:none !important;
  }

  .home-page .reveal-mobile-panel{
    display:block;
  }
}

/* Product gallery refresh (all storage pages) */
body.product-detail-view.storage-product-view .product-hero-media{
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  grid-template-columns:1fr;
  gap:6px;
}

body.product-detail-view.storage-product-view .product-hero-media .product-media{
  order:1;
  height:430px;
  min-height:0;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

body.product-detail-view.storage-product-view .product-hero-media .product-media img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  transform:scale(1.12);
  transform-origin:center center;
}

body.product-detail-view.storage-product-view .product-hero-media .product-gallery{
  order:2;
  margin-top:0;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}

body.product-detail-view.storage-product-view .product-hero-media .gallery-item{
  width:160px !important;
  flex:0 0 160px !important;
  aspect-ratio:1.5 / 1;
  padding:0;
  border-radius:14px;
  border:none;
  background:transparent;
  box-shadow:none;
  opacity:1;
  transition:opacity .2s ease, transform .2s ease, filter .2s ease;
  cursor:pointer;
  overflow:hidden;
}

body.product-detail-view.storage-product-view .product-hero-media .gallery-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--line) 80%, rgba(95,174,138,.18) 20%);
  background:color-mix(in srgb, var(--surface) 92%, rgba(95,174,138,.08) 8%);
}

body.product-detail-view.storage-product-view .product-hero-media .gallery-item.is-active{
  opacity:1;
  transform:translateY(-2px);
  filter:saturate(1.04);
}

body.product-detail-view.storage-product-view .product-hero-media .gallery-item.is-active img{
  border-color:rgba(95,174,138,.64);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

body.product-detail-view.storage-product-view .product-hero-media .gallery-item:hover{
  opacity:1;
}

@media (max-width:900px){
  body.product-detail-view.storage-product-view .product-hero-media .product-media{
    height:350px;
    min-height:0;
    padding:0;
  }

  body.product-detail-view.storage-product-view .product-hero-media .product-media img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    transform:scale(1.08);
  }

  body.product-detail-view.storage-product-view .product-hero-media .product-gallery{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:4px;
  }
}

@media (max-width:640px){
  body.product-detail-view.storage-product-view .product-hero-media{
    padding:0;
    border-radius:0;
    gap:12px;
  }

  body.product-detail-view.storage-product-view .product-hero-media .product-media{
    height:250px;
    min-height:0;
    padding:0;
    border-radius:0;
  }

  body.product-detail-view.storage-product-view .product-hero-media .product-media img{
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    transform:scale(1.03);
  }

  body.product-detail-view.storage-product-view .product-hero-media .product-gallery{
    gap:8px;
    justify-content:flex-start;
  }

  body.product-detail-view.storage-product-view .product-hero-media .gallery-item{
    width:110px !important;
    flex:0 0 110px !important;
    border-radius:10px;
  }

  body.product-detail-view.storage-product-view .product-hero-media .gallery-item img{
    border-radius:10px;
  }
}

/* Responsive text safety (all languages/pages) */
.site-nav a,
.site-nav summary,
.site-nav .nav-mega-link-title,
.site-nav .nav-mega-link-desc,
.btn,
.page-title,
.hero h1,
.hero p,
.section-lead,
.product-card h3,
.product-card .product-meta,
.footer-list a,
.footer-tagline{
  overflow-wrap:break-word;
  word-break:normal;
}

/* Keep button labels readable on narrow widths */
.btn{
  white-space:normal;
  text-align:center;
}

.page-subnav .btn{
  white-space:nowrap;
}

/* Avoid horizontal overflow in responsive grids/flex layouts */
.container,
.page-main,
.hero-grid,
.product-shell,
.product-main,
.product-sidebar,
.tiles-grid > *,
.grid > *{
  min-width:0;
}

@media (max-width:900px){
  .mobile-nav a,
  .mobile-nav-group summary,
  .mobile-drawer .mobile-meta,
  .site-footer .footer-list a,
  .site-footer .footer-tagline,
  .product-meta,
  .section-lead{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

/* Temporary switch to hide calculator sections without removing markup. */
body.hide-calculators-temp section#rechner{
  display:none !important;
}