/*
Theme Name: LUPATO
Theme URI: https://www.lupato.de
Author: LUPATO – Photovoltaik-Reinigung
Author URI: https://www.lupato.de
Description: Individuelles Premium-WordPress-Theme fuer LUPATO Photovoltaik-Reinigung. Enthaelt Startseite, Impressum und Datenschutzerklaerung im eigenen Corporate Design (Dunkelblau/Limegruen).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lupato
*/


  :root{
    --navy:#16233f;
    --navy-deep:#0c1526;
    --green:#7ec242;
    --green-dark:#67a934;
    --green-tint:#f3f9ec;
    --white:#ffffff;
    --off-white:#fafbfc;
    --line: rgba(22,35,63,0.10);
    --line-light: rgba(255,255,255,0.16);
    --text-muted:#5b6478;
    --ease: cubic-bezier(0.22,1,0.36,1);
    --pad: clamp(24px, 6vw, 96px);
    --section-pad: clamp(80px, 11vw, 160px);
  }
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color:var(--navy); background:var(--white); line-height:1.65;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  button{ font-family:inherit; }
  section{ scroll-margin-top:96px; position:relative; }
  .pad{ padding-left:var(--pad); padding-right:var(--pad); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.75rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--green-dark); margin-bottom:20px;
  }
  .eyebrow::before{ content:''; width:22px; height:1px; background:var(--green); }
  h1,h2,h3{ font-weight:700; letter-spacing:-0.02em; color:var(--navy); }
  .h-xl{ font-size:clamp(2.4rem, 5.4vw, 4.6rem); line-height:1.06; font-weight:600; }
  .h-lg{ font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.14; }
  .h-md{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.25; }
  .body-lg{ font-size:clamp(1.02rem, 1.3vw, 1.22rem); color:var(--text-muted); font-weight:400; }
  .body-md{ font-size:1rem; color:var(--text-muted); }
  .section-head{ max-width:660px; margin:0 auto 60px; text-align:center; }
  .section-head.left{ text-align:left; margin:0 0 56px; }
  .skip-link{ position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:14px 22px; z-index:1000; }
  .skip-link:focus{ left:0; }
  :focus-visible{ outline:2px solid var(--green); outline-offset:4px; }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; gap:10px; appearance:none; font-family:inherit;
    padding:17px 34px; border-radius:100px; font-weight:600; font-size:0.92rem; letter-spacing:0.2px;
    border:1px solid transparent; cursor:pointer;
    transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  .btn-primary{ background:var(--green); color:var(--navy-deep); }
  .btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(103,169,52,0.5); }
  .btn-outline{ border-color:currentColor; }
  .btn-outline:hover{ background:var(--green); border-color:var(--green); color:var(--navy-deep); }
  .btn-ghost{ color:inherit; font-weight:500; padding:0; border-radius:0; display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; }
  .btn-ghost .arrow{ transition:transform 0.4s var(--ease); }
  .btn-ghost:hover .arrow{ transform:translateY(4px); }

  /* Logo mark (placeholder rebuild — swap when original file is available) */
  .logo-mark{ display:block; }
  /* Original-Logo (unverändert) — weißer Träger-Chip sorgt für Lesbarkeit auf dunklen Flächen,
     ohne die Logodatei selbst zu verändern. */
  .logo-chip{
    display:inline-flex; align-items:center; background:#fff; border-radius:14px;
    padding:8px 14px; box-shadow:0 6px 20px rgba(12,21,38,0.18);
    transition:box-shadow 0.5s var(--ease), padding 0.5s var(--ease);
  }
  header.scrolled .logo-chip{ box-shadow:none; }

  /* Header */
  header{ position:fixed; top:0; left:0; right:0; z-index:300; color:#fff; background:transparent;
    transition:background-color 0.6s var(--ease), box-shadow 0.6s var(--ease), color 0.6s var(--ease); }
  header.scrolled{ background:rgba(255,255,255,0.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 var(--line); color:var(--navy); }
  .header-inner{ display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad); transition:padding 0.5s var(--ease); }
  header.scrolled .header-inner{ padding-top:15px; padding-bottom:15px; }
  .logo-wrap{ display:inline-flex; }
  .logo-wrap .logo-mark{ height:56px; width:auto; }
  @media (max-width:600px){ .logo-wrap .logo-mark{ height:44px; } .logo-chip{ padding:6px 10px; border-radius:11px; } }

  .main-nav ul{ display:flex; gap:38px; }
  .main-nav a{ font-size:0.85rem; font-weight:500; letter-spacing:0.3px; color:inherit; position:relative; padding:6px 0; }
  .main-nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--green); transition:width 0.4s var(--ease); }
  .main-nav a:hover::after{ width:100%; }
  .header-right{ display:flex; align-items:center; gap:28px; }
  .burger{ display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:6px; }
  .burger span{ width:24px; height:1.5px; background:currentColor; transition:all 0.4s var(--ease); }
  .burger.active span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .burger.active span:nth-child(2){ opacity:0; }
  .burger.active span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  @media (max-width:900px){
    .main-nav{ position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(360px,85vw);
      background:var(--navy-deep); transform:translateX(100%); transition:transform 0.5s var(--ease); padding:120px 44px; z-index:250; }
    .main-nav.open{ transform:translateX(0); }
    .main-nav ul{ flex-direction:column; gap:0; }
    .main-nav ul li{ border-bottom:1px solid var(--line-light); }
    .main-nav ul li a{ display:block; padding:20px 0; color:#fff; font-size:1.1rem; }
    .burger{ display:flex; }
  }

  /* Hero */
  #startseite{ height:100vh; min-height:640px; position:relative; overflow:hidden; display:flex; align-items:flex-end; background:var(--navy-deep); }
  .hero-media{ position:absolute; inset:0; overflow:hidden; }
  .hero-media img{ position:absolute; top:-8%; left:0; width:100%; height:118%; object-fit:cover; will-change:transform; }
  .hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,21,38,0.55) 0%, rgba(12,21,38,0.25) 35%, rgba(12,21,38,0.78) 100%); }
  .hero-content{ position:relative; z-index:2; color:#fff; padding:0 var(--pad) 100px; width:100%; }
  .hero-content .eyebrow{ color:var(--green); } .hero-content .eyebrow::before{ background:var(--green); }
  .hero-content h1{ color:#fff; max-width:16ch; opacity:0; transform:translateY(24px); animation:heroIn 1.1s var(--ease) 0.2s forwards; }
  .hero-sub{ margin-top:24px; max-width:520px; color:rgba(255,255,255,0.85); font-size:clamp(1rem,1.4vw,1.2rem);
    opacity:0; transform:translateY(20px); animation:heroIn 1.1s var(--ease) 0.42s forwards; }
  .hero-actions{ margin-top:42px; display:flex; align-items:center; gap:36px; flex-wrap:wrap;
    opacity:0; transform:translateY(20px); animation:heroIn 1.1s var(--ease) 0.6s forwards; }
  .hero-actions .btn-ghost{ color:#fff; }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
  .scroll-indicator{ position:absolute; left:var(--pad); bottom:40px; z-index:2; color:rgba(255,255,255,0.6);
    display:flex; align-items:center; gap:12px; font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; }
  .scroll-line{ width:1px; height:40px; background:rgba(255,255,255,0.3); position:relative; overflow:hidden; }
  .scroll-line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--green); animation:scrollLine 2.4s ease-in-out infinite; }
  @keyframes scrollLine{ 0%{top:-100%;} 50%{top:0;} 100%{top:100%;} }

  /* Reveal */
  .reveal{ opacity:0; transform:translateY(44px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.visible{ opacity:1; transform:none; }
  .reveal-1{ transition-delay:0.08s; } .reveal-2{ transition-delay:0.16s; } .reveal-3{ transition-delay:0.24s; } .reveal-4{ transition-delay:0.32s; }

  /* Warum LUPATO - trust cards */
  #warum-lupato{ padding:var(--section-pad) 0; }
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
  .trust-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px 28px;
    transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
  .trust-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(22,35,63,0.25); border-color:transparent; }
  .trust-icon{ width:52px; height:52px; border-radius:14px; background:var(--green-tint); color:var(--green-dark);
    display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
  .trust-icon svg{ width:26px; height:26px; }
  .trust-card h3{ font-size:1.15rem; margin-bottom:10px; }
  .trust-card p{ color:var(--text-muted); font-size:0.94rem; }
  @media (max-width:1000px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .trust-grid{ grid-template-columns:1fr; } }

  /* Media frame w/ parallax */
  .media-frame{ position:relative; overflow:hidden; background:var(--off-white); }
  .media-frame img{ position:absolute; top:-12%; left:0; width:100%; height:124%; object-fit:cover; will-change:transform; }

  /* Ueber uns */
  #ueber-uns{ padding:var(--section-pad) 0; background:var(--off-white); }
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,100px); align-items:center; }
  .about-copy p{ color:var(--text-muted); margin-top:18px; max-width:52ch; }
  .about-values{ display:flex; flex-direction:column; gap:16px; margin-top:34px; }
  .about-values li{ display:flex; align-items:flex-start; gap:14px; }
  .about-values .check{ width:24px; height:24px; border-radius:50%; background:var(--green-tint); color:var(--green-dark);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .about-values .check svg{ width:12px; height:12px; }
  .about-values li span:last-child{ font-size:0.96rem; color:var(--navy); font-weight:500; }
  .about-media{ height:440px; border-radius:24px; }
  @media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } .about-media{ height:320px; order:-1; } }

  /* Leistungen — Premium-Referenzkarten */
  #leistungen{ padding:var(--section-pad) 0; }
  .service-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:420px; gap:24px; }
  .service-card{
    position:relative; border-radius:26px; overflow:hidden; grid-column:span 3;
    box-shadow:0 20px 50px -30px rgba(22,35,63,0.35);
    transition:transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  }
  .service-card.span-2{ grid-column:span 2; }
  .service-card.span-3{ grid-column:span 3; }
  .service-card.span-4{ grid-column:span 4; }
  .service-card.span-6{ grid-column:span 6; grid-auto-rows:280px; height:300px; }
  .service-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 40px 80px -30px rgba(22,35,63,0.45); }
  .service-card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 0.9s var(--ease);
  }
  .service-card:hover img{ transform:scale(1.08); }
  .service-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(12,21,38,0) 42%, rgba(12,21,38,0.55) 68%, rgba(12,21,38,0.92) 100%);
  }
  .service-panel{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:28px 28px 26px;
    display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  }
  .service-icon{
    width:42px; height:42px; border-radius:12px;
    background:rgba(255,255,255,0.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  }
  .service-icon svg{ width:20px; height:20px; }
  .service-title-row{ display:flex; flex-direction:column; gap:8px; }
  .service-panel h3{ color:#fff; font-size:clamp(1.15rem,1.6vw,1.4rem); position:relative; padding-bottom:12px; }
  .service-panel h3::after{
    content:''; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--green);
    transition:width 0.5s var(--ease);
  }
  .service-card:hover .service-panel h3::after{ width:58px; }
  .service-panel p{ color:rgba(255,255,255,0.82); font-size:0.9rem; max-width:42ch; }
  .service-more{
    display:inline-flex; align-items:center; gap:8px; margin-top:6px;
    padding:11px 20px; border-radius:100px; font-size:0.82rem; font-weight:600; color:#fff;
    background:rgba(255,255,255,0.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.3);
    transition:all 0.4s var(--ease);
  }
  .service-more svg{ width:13px; height:13px; transition:transform 0.4s var(--ease); }
  .service-card:hover .service-more{ background:var(--green); color:var(--navy-deep); border-color:var(--green); }
  .service-card:hover .service-more svg{ transform:translateX(3px); }

  @media (max-width:1000px){
    .service-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:360px; }
    .service-card, .service-card.span-2, .service-card.span-3, .service-card.span-4, .service-card.span-6{ grid-column:span 1; height:auto; }
  }
  @media (max-width:640px){
    .service-grid{ grid-template-columns:1fr; grid-auto-rows:340px; gap:22px; }
    .service-panel{ padding:24px 22px 22px; }
  }

  /* Balkonkraftwerke feature */
  #balkonkraftwerke{ display:grid; grid-template-columns:1fr 1fr; min-height:74vh; }
  .bk-media{ position:relative; overflow:hidden; }
  .bk-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .bk-copy{ display:flex; flex-direction:column; justify-content:center; padding:var(--section-pad) var(--pad); }
  .bk-copy p{ max-width:48ch; color:var(--text-muted); margin-top:16px; }
  @media (max-width:900px){ #balkonkraftwerke{ grid-template-columns:1fr; } .bk-media{ height:46vh; order:-1; } }

  /* Reinwasser */
  #reinwasser{ padding:var(--section-pad) 0; background:var(--off-white); }
  .rw-media-full{ width:100%; border-radius:24px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(22,35,63,0.32); }
  .rw-media-full img{ width:100%; height:auto; max-height:620px; object-fit:cover; display:block; }
  .rw-intro-text{ max-width:760px; margin:32px auto 60px; text-align:center; color:var(--text-muted); font-size:1.05rem; }
  .rw-qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 64px; max-width:1000px; margin:0 auto; }
  .rw-qa{ display:grid; gap:0; }
  .rw-qa li{ border-top:1px solid var(--line); padding:22px 0; }
  .rw-qa li:last-child{ border-bottom:1px solid var(--line); }
  .rw-qa-grid li:nth-last-child(2){ border-bottom:1px solid var(--line); }
  .rw-qa h3{ font-size:1.02rem; margin-bottom:8px; }
  .rw-qa p{ color:var(--text-muted); font-size:0.94rem; }
  @media (max-width:900px){ .rw-media-full img{ max-height:360px; } .rw-qa-grid{ grid-template-columns:1fr; } }

  .rw-process{ margin-top:var(--section-pad); }
  .process-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
  .process-flow::before{ content:''; position:absolute; top:26px; left:8%; right:8%; height:1px; background:var(--line); }
  .flow-step{ position:relative; text-align:center; padding:0 10px; }
  .flow-num{ width:52px; height:52px; border-radius:50%; background:#fff; border:1.5px solid var(--green);
    color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 20px; position:relative; z-index:2; }
  .flow-step h3{ font-size:1rem; margin-bottom:8px; }
  .flow-step p{ font-size:0.86rem; color:var(--text-muted); }
  @media (max-width:900px){ .process-flow{ grid-template-columns:1fr; gap:36px; } .process-flow::before{ display:none; } }

  /* ============ ERTRAGSRECHNER ============ */
  #ertragsrechner{ padding:var(--section-pad) 0; }
  .calc-card{
    background:#fff; border-radius:28px; padding:clamp(28px,4vw,48px);
    box-shadow:0 24px 60px -30px rgba(22,35,63,0.28); max-width:1080px; margin:0 auto;
  }
  .calc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 30px; }
  .calc-field label{ display:block; font-size:0.88rem; font-weight:600; color:var(--navy); margin-bottom:10px; }
  .calc-optional{ font-weight:400; color:var(--text-muted); }
  .calc-input-wrap{
    display:flex; align-items:center; border:1.5px solid var(--line); border-radius:14px;
    padding:4px 6px 4px 18px; transition:border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); background:var(--off-white);
  }
  .calc-input-wrap:focus-within{ border-color:var(--green); box-shadow:0 0 0 4px rgba(126,194,66,0.14); background:#fff; }
  .calc-input-wrap input{
    flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit;
    font-size:1.02rem; color:var(--navy); padding:14px 4px; appearance:textfield;
  }
  .calc-input-wrap input::-webkit-outer-spin-button, .calc-input-wrap input::-webkit-inner-spin-button{ opacity:0.5; }
  .calc-unit{ font-size:0.82rem; color:var(--text-muted); font-weight:600; padding-right:10px; white-space:nowrap; }
  .calc-select{
    width:100%; border:1.5px solid var(--line); border-radius:14px; padding:15px 18px; font-family:inherit;
    font-size:1.02rem; color:var(--navy); background:var(--off-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 16px center/18px;
    appearance:none; cursor:pointer; transition:border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .calc-select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(126,194,66,0.14); background-color:#fff; }
  .calc-hint{ margin-top:8px; font-size:0.8rem; color:var(--text-muted); }
  .calc-submit-row{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; }
  .calc-submit{ width:100%; justify-content:center; padding:18px 34px; font-size:1rem; }
  .calc-error{ color:#b3492f; font-size:0.88rem; font-weight:600; text-align:center; }
  @media (max-width:700px){ .calc-grid{ grid-template-columns:1fr; } }

  /* Ergebnis */
  .calc-results{ max-width:1080px; margin:56px auto 0; }
  .calc-results-head{ text-align:center; margin-bottom:44px; }
  .calc-age-note{ margin-top:14px; color:var(--text-muted); font-size:0.92rem; }
  .calc-results-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:start; }
  .calc-numbers{ display:flex; flex-direction:column; gap:18px; }
  .calc-number-item{ background:var(--off-white); border-radius:18px; padding:20px 24px; }
  .calc-number-item.highlight{ background:var(--green-tint); }
  .calc-number-label{ display:block; font-size:0.82rem; color:var(--text-muted); font-weight:600; margin-bottom:8px; }
  .calc-number-value{ display:block; font-size:1.5rem; font-weight:700; color:var(--navy); letter-spacing:-0.01em; }
  .calc-number-item.highlight .calc-number-value{ color:var(--green-dark); }
  .calc-number-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .calc-number-row .calc-number-value{ font-size:1.15rem; }
  .calc-usage-note{ font-size:0.85rem; color:var(--text-muted); margin-top:4px; }
  @media (max-width:640px){ .calc-number-row{ grid-template-columns:1fr; } }

  .calc-visuals{ display:flex; flex-direction:column; gap:32px; align-items:center; }
  .calc-gauge{ position:relative; width:180px; height:180px; }
  .calc-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .gauge-track{ fill:none; stroke:var(--line); stroke-width:12; }
  .gauge-fill{
    fill:none; stroke:var(--green); stroke-width:12; stroke-linecap:round;
    stroke-dasharray:439.8; stroke-dashoffset:439.8; transition:stroke-dashoffset 1.1s var(--ease);
  }
  .gauge-center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:6px;
  }
  .gauge-center strong{ font-size:1.7rem; color:var(--navy); font-weight:700; }
  .gauge-center span{ font-size:0.72rem; color:var(--text-muted); line-height:1.3; }
  .calc-bars{ width:100%; display:flex; flex-direction:column; gap:18px; }
  .calc-bar-row{ display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:14px; }
  .calc-bar-label{ font-size:0.82rem; color:var(--text-muted); font-weight:600; }
  .calc-bar-track{ height:10px; border-radius:6px; background:var(--line); overflow:hidden; }
  .calc-bar-fill{ height:100%; border-radius:6px; width:0%; transition:width 1s var(--ease); }
  .calc-bar-fill.before{ background:var(--navy); }
  .calc-bar-fill.after{ background:var(--green); }
  .calc-bar-value{ font-size:0.85rem; font-weight:700; color:var(--navy); white-space:nowrap; }

  .calc-disclaimer{
    margin-top:44px; padding:22px 26px; border-left:3px solid var(--green); background:var(--off-white);
    border-radius:0 14px 14px 0; font-size:0.85rem; color:var(--text-muted); max-width:900px; margin-left:auto; margin-right:auto;
  }

  .calc-cta{
    margin-top:56px; text-align:center; background:var(--navy-deep); color:#fff; border-radius:28px;
    padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px);
  }
  .calc-cta h3{ color:#fff; margin-bottom:14px; }
  .calc-cta p{ color:rgba(255,255,255,0.68); max-width:60ch; margin:0 auto 30px; }
  .calc-cta-actions{ display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap; }
  .calc-cta-actions .btn-ghost{ color:#fff; }
  .calc-cta-meta{ margin-top:28px; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; font-size:0.85rem; }
  .calc-cta-meta a{ color:rgba(255,255,255,0.7); border-bottom:1px solid rgba(255,255,255,0.25); }
  @media (max-width:900px){ .calc-results-grid{ grid-template-columns:1fr; } }

  /* Vorher/Nachher */
  #vorher-nachher{ padding:var(--section-pad) 0; }
  .comparison{ position:relative; aspect-ratio:16/8; overflow:hidden; border-radius:22px; background:var(--navy-deep); box-shadow:0 30px 70px -34px rgba(22,35,63,0.4); }
  .compare-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
  .compare-before-wrap{ position:absolute; top:0; left:0; height:100%; width:50%; overflow:hidden; }
  .compare-before-wrap img{ position:absolute; top:0; left:0; height:100%; max-width:none; }
  .compare-label{ position:absolute; top:22px; padding:9px 20px; background:rgba(12,21,38,0.55); color:#fff;
    font-size:0.72rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; backdrop-filter:blur(6px); }
  .label-before{ left:22px; } .label-after{ right:22px; }
  .compare-handle{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); pointer-events:none; }
  .compare-handle::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:1px; background:rgba(255,255,255,0.8); transform:translateX(-50%); }
  .compare-handle-icon{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%;
    background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy); transition:transform 0.3s ease; }
  .compare-handle-icon svg{ width:20px; height:20px; }
  .compare-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; appearance:none; background:transparent; cursor:ew-resize; z-index:5; opacity:0; }
  .compare-range:hover ~ .compare-handle .compare-handle-icon,
  .compare-range:focus ~ .compare-handle .compare-handle-icon{ transform:translate(-50%,-50%) scale(1.1); }

  /* Vorher/Nachher — Hauptlayout mit Vorteilen */
  .vn-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:36px; align-items:stretch; margin-top:8px; }
  .vn-main{ aspect-ratio:16/10; }
  .vn-benefits-card{
    background:#fff; border-radius:24px; padding:38px 32px; box-shadow:0 20px 50px -30px rgba(22,35,63,0.3);
    display:flex; flex-direction:column; justify-content:center; gap:24px;
  }
  .vn-benefits-title{ font-size:1.05rem; color:var(--navy); font-weight:700; }
  .vn-benefits{ display:flex; flex-direction:column; gap:20px; }
  .vn-benefit{ display:flex; gap:14px; align-items:flex-start; }
  .vn-benefit .check{ width:26px; height:26px; border-radius:50%; background:var(--green-tint); color:var(--green-dark);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .vn-benefit .check svg{ width:13px; height:13px; }
  .vn-benefit p{ font-size:0.94rem; color:var(--navy); font-weight:500; line-height:1.5; }
  @media (max-width:1000px){ .vn-layout{ grid-template-columns:1fr; } .vn-main{ aspect-ratio:16/9; } }

  /* Weitere Beispiele */
  .vn-examples-head{ margin-top:var(--section-pad); margin-bottom:36px; }
  .vn-examples-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:36px 32px; }
  .comparison-sm{ aspect-ratio:16/10; border-radius:18px; }
  .vn-example-label{ margin-top:16px; font-weight:600; color:var(--navy); font-size:1rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .vn-example-label .arrow{ font-weight:500; color:var(--text-muted); font-size:0.85rem; }
  @media (max-width:800px){ .vn-examples-grid{ grid-template-columns:1fr; } }

  /* Vorher/Nachher CTA-Banner */
  .vn-cta{ position:relative; overflow:hidden; background:var(--navy-deep); padding:var(--section-pad) 0; text-align:center; color:#fff; }
  .vn-cta-glow{ position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:900px; height:900px; border-radius:50%;
    background:radial-gradient(circle, rgba(126,194,66,0.16) 0%, rgba(126,194,66,0) 70%); pointer-events:none; }
  .vn-cta-inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
  .vn-cta-inner h2{ color:#fff; margin-bottom:18px; }
  .vn-cta-inner p{ color:rgba(255,255,255,0.68); font-size:1.05rem; margin-bottom:36px; }

  /* Ablauf */
  #ablauf{ padding:var(--section-pad) 0; background:var(--off-white); }
  .process-row{ display:grid; grid-template-columns:repeat(4,1fr); }
  .process-item{ padding:34px var(--pad) 0 0; border-top:1px solid var(--line); position:relative; }
  .process-item:first-child{ padding-left:0; }
  .process-num{ font-size:0.85rem; font-weight:600; color:var(--green-dark); letter-spacing:1px; margin-bottom:24px; display:block; }
  .process-item h3{ font-size:1.1rem; margin-bottom:10px; }
  .process-item p{ color:var(--text-muted); font-size:0.9rem; max-width:26ch; }
  @media (max-width:900px){ .process-row{ grid-template-columns:1fr; } .process-item{ padding:34px 0 0; } }

  /* FAQ */
  #faq{ padding:var(--section-pad) 0; }
  .faq-list{ max-width:820px; margin:0 auto; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-question{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
    padding:26px 4px; background:none; border:none; text-align:left; font-size:1.02rem; font-weight:600; color:var(--navy); cursor:pointer; }
  .faq-plus{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; transition:all 0.4s var(--ease); color:var(--navy); }
  .faq-plus svg{ width:12px; height:12px; transition:transform 0.4s var(--ease); }
  .faq-item.open .faq-plus{ background:var(--green); border-color:var(--green); color:var(--navy-deep); }
  .faq-item.open .faq-plus svg{ transform:rotate(45deg); }
  .faq-answer-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.5s var(--ease); }
  .faq-item.open .faq-answer-wrap{ grid-template-rows:1fr; }
  .faq-answer-inner{ overflow:hidden; }
  .faq-answer-inner p{ padding:0 4px 26px; color:var(--text-muted); max-width:68ch; font-size:0.95rem; }

  /* Unser Versprechen */
  #versprechen{ padding:var(--section-pad) 0; }
  .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .review-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px 28px;
    transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
  .review-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -26px rgba(22,35,63,0.25); }
  .promise-icon{ width:44px; height:44px; border-radius:12px; background:var(--green-tint); color:var(--green-dark);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
  .promise-icon svg{ width:22px; height:22px; }
  .review-card p.quote{ color:var(--navy); font-size:1.02rem; font-weight:500; line-height:1.55; }
  @media (max-width:900px){ .review-grid{ grid-template-columns:1fr; } }

  /* Kontakt */
  #kontakt{ background:var(--navy-deep); color:#fff; text-align:center; padding:var(--section-pad) var(--pad); }
  #kontakt h2{ color:#fff; max-width:16ch; margin:0 auto 22px; }
  #kontakt p{ color:rgba(255,255,255,0.65); max-width:480px; margin:0 auto 40px; font-size:1.05rem; }
  .kontakt-meta{ margin-top:30px; display:flex; justify-content:center; gap:32px; flex-wrap:wrap; font-size:0.9rem; color:rgba(255,255,255,0.6); }
  .kontakt-meta a{ color:rgba(255,255,255,0.85); border-bottom:1px solid rgba(255,255,255,0.25); }

  /* Footer */
  footer{ background:var(--navy-deep); color:rgba(255,255,255,0.7); padding:64px var(--pad) 30px; border-top:1px solid var(--line-light); }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; padding-bottom:50px; }
  .footer-brand p{ max-width:300px; margin-top:16px; font-size:0.9rem; color:rgba(255,255,255,0.55); }
  .footer-logo-chip{ box-shadow:none; padding:7px 12px; }
  .footer-logo-chip .logo-mark{ height:36px; width:auto; }
  .footer-links{ display:flex; gap:70px; flex-wrap:wrap; }
  .footer-col h4{ font-size:0.76rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:18px; font-weight:600; }
  .footer-col li{ margin-bottom:12px; font-size:0.9rem; }
  .footer-col a{ transition:color 0.3s ease; } .footer-col a:hover{ color:var(--green); }
  .footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:26px; border-top:1px solid var(--line-light); font-size:0.78rem; color:rgba(255,255,255,0.4); }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
    .hero-media img, .media-frame img, .tile img{ transform:none !important; }
  }

  /* ============ ANGEBOTSRECHNER / KONFIGURATOR ============ */
  .configurator-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
    padding:32px; opacity:0; visibility:hidden; transition:opacity 0.6s var(--ease), visibility 0.6s var(--ease); }
  .configurator-overlay.open{ opacity:1; visibility:visible; }
  .cfg-bg{ position:absolute; inset:0; overflow:hidden; background:var(--navy-deep); }
  .cfg-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.55) saturate(1.05); }
  .cfg-glass{ position:absolute; inset:0; background:linear-gradient(160deg, rgba(12,21,38,0.7) 0%, rgba(22,35,63,0.55) 100%);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
  .cfg-card{ position:relative; z-index:2; width:min(760px,100%); max-height:88vh; background:#fff; border-radius:28px;
    box-shadow:0 50px 120px -20px rgba(6,10,20,0.55); display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(28px) scale(0.97); opacity:0; transition:transform 0.6s var(--ease), opacity 0.6s var(--ease); }
  .configurator-overlay.open .cfg-card{ transform:translateY(0) scale(1); opacity:1; }
  .cfg-head{ padding:26px 32px 18px; display:flex; align-items:center; gap:22px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .cfg-logo-img{ height:32px; width:auto; flex-shrink:0; }
  @media (max-width:720px){ .cfg-logo-img{ height:26px; } }
  .cfg-progress{ flex:1; }
  .cfg-step-label{ display:block; font-size:0.75rem; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--green-dark); margin-bottom:10px; }
  .cfg-progress-track{ width:100%; height:3px; background:var(--line); border-radius:3px; overflow:hidden; }
  .cfg-progress-fill{ height:100%; width:16.66%; background:var(--green); border-radius:3px; transition:width 0.6s var(--ease); }
  .cfg-close{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--navy);
    transition:background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; }
  .cfg-close:hover{ background:var(--off-white); border-color:var(--navy); transform:rotate(90deg); }
  .cfg-close svg{ width:17px; height:17px; }
  .cfg-body{ padding:36px 32px 10px; overflow-y:auto; flex:1; }
  .config-step{ display:none; animation:cfgIn 0.55s var(--ease); }
  .config-step.active{ display:block; }
  @keyframes cfgIn{ from{ opacity:0; transform:translateX(18px);} to{ opacity:1; transform:translateX(0);} }
  .config-step h2{ font-size:clamp(1.3rem,2.2vw,1.65rem); margin-bottom:10px; line-height:1.25; }
  .config-sub{ color:var(--text-muted); font-size:0.94rem; margin-bottom:26px; }
  .option-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
  .option-grid-3{ grid-template-columns:repeat(3,1fr); }
  .option-grid-checkbox{ grid-template-columns:repeat(2,1fr); }
  .option-card{ appearance:none; font-family:inherit; text-align:left; cursor:pointer; background:#fff; border:1.5px solid var(--line);
    border-radius:18px; padding:20px 16px; display:flex; flex-direction:column; gap:9px;
    transition:border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.35s var(--ease); position:relative; }
  .option-card:hover{ border-color:rgba(126,194,66,0.55); transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(22,35,63,0.25); }
  .option-card.selected{ border-color:var(--green); background:var(--green-tint); box-shadow:0 0 0 4px rgba(126,194,66,0.16), 0 16px 34px -16px rgba(126,194,66,0.4); }
  .option-card.selected .option-icon{ color:var(--green-dark); }
  .option-card.selected::after{ content:''; position:absolute; top:13px; right:13px; width:20px; height:20px; border-radius:50%;
    background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316233f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/60% no-repeat; }
  .option-icon{ width:28px; height:28px; color:var(--navy); transition:color 0.3s ease; }
  .option-icon svg{ width:100%; height:100%; }
  .option-title{ font-weight:600; font-size:0.98rem; color:var(--navy); }
  .option-sub{ font-size:0.8rem; color:var(--text-muted); }
  .level-bars{ display:flex; gap:4px; align-items:flex-end; height:22px; }
  .level-bars span{ width:7px; background:var(--line); border-radius:2px; }
  .level-bars span:nth-child(1){ height:40%; } .level-bars span:nth-child(2){ height:70%; } .level-bars span:nth-child(3){ height:100%; }
  .option-card[data-value="leicht"] .level-bars span:nth-child(1){ background:var(--green); }
  .option-card[data-value="mittel"] .level-bars span:nth-child(1), .option-card[data-value="mittel"] .level-bars span:nth-child(2){ background:#d9a441; }
  .option-card[data-value="stark"] .level-bars span{ background:#c65f4a; }
  .check-card{ flex-direction:row; align-items:center; gap:14px; padding:16px 18px; }
  .check-box{ width:21px; height:21px; border-radius:7px; border:1.5px solid var(--line); flex-shrink:0;
    display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; }
  .check-card.selected .check-box{ background:var(--green); border-color:var(--green); }
  .check-box svg{ width:12px; height:12px; opacity:0; transform:scale(0.5); transition:all 0.25s ease; color:#fff; }
  .check-card.selected .check-box svg{ opacity:1; transform:scale(1); }
  .field-float{ position:relative; margin-bottom:8px; }
  .field-float input, .field-float textarea{ width:100%; padding:22px 4px 10px; border:none; border-bottom:2px solid var(--line);
    background:transparent; font-size:1.05rem; font-family:inherit; color:var(--navy); outline:none; resize:none; transition:border-color 0.35s var(--ease); }
  .field-float textarea{ min-height:88px; padding-top:26px; }
  .field-float label{ position:absolute; left:4px; top:22px; color:var(--text-muted); font-size:1rem; pointer-events:none; transition:all 0.25s var(--ease); }
  .field-float input:focus, .field-float textarea:focus{ border-color:var(--green); }
  .field-float input:focus + label, .field-float input:not(:placeholder-shown) + label,
  .field-float textarea:focus + label, .field-float textarea:not(:placeholder-shown) + label{ top:2px; font-size:0.73rem; color:var(--green-dark); letter-spacing:0.4px; }
  .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; margin-top:14px; }
  .field-grid .full{ grid-column:1/-1; }
  .unit-toggle{ display:inline-flex; background:var(--off-white); border-radius:100px; padding:4px; margin-bottom:8px; }
  .unit-btn{ appearance:none; border:none; background:none; font-family:inherit; cursor:pointer; padding:9px 20px; border-radius:100px;
    font-weight:600; font-size:0.83rem; color:var(--text-muted); transition:all 0.35s var(--ease); }
  .unit-btn.active{ background:var(--navy); color:#fff; }
  .cfg-footer{ padding:24px 32px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); flex-shrink:0; }
  .cfg-btn{ appearance:none; font-family:inherit; cursor:pointer; border-radius:100px; padding:14px 28px; font-weight:600; font-size:0.88rem; letter-spacing:0.2px; transition:all 0.4s var(--ease); }
  .cfg-btn-back{ background:none; border:1px solid var(--line); color:var(--navy); }
  .cfg-btn-back:hover{ border-color:var(--navy); }
  .cfg-btn-back.hidden{ visibility:hidden; }
  .cfg-btn-next{ background:var(--green); border:1px solid var(--green); color:var(--navy-deep); margin-left:auto; }
  .cfg-btn-next:hover:not(:disabled){ background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(103,169,52,0.5); }
  .cfg-btn-next:disabled{ background:var(--line); border-color:var(--line); color:#9aa3b5; cursor:not-allowed; }
  .confirm-wrap{ text-align:center; padding:26px 10px 10px; }
  .confirm-badge{ width:84px; height:84px; margin:0 auto 28px; }
  .confirm-badge circle{ fill:none; stroke:var(--green); stroke-width:2; stroke-dasharray:245; stroke-dashoffset:245; transition:stroke-dashoffset 0.9s var(--ease) 0.1s; }
  .confirm-badge path{ fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset 0.5s var(--ease) 0.7s; }
  .config-step[data-step="confirm"].active .confirm-badge circle{ stroke-dashoffset:0; }
  .config-step[data-step="confirm"].active .confirm-badge path{ stroke-dashoffset:0; }
  .confirm-wrap h2{ margin-bottom:14px; }
  .confirm-wrap p{ color:var(--text-muted); max-width:38ch; margin:0 auto 30px; }
  @media (max-width:720px){
    .configurator-overlay{ padding:0; }
    .cfg-card{ width:100%; height:100%; max-height:100%; border-radius:0; }
    .cfg-body{ padding:26px 20px 10px; } .cfg-head{ padding:20px 20px 14px; } .cfg-footer{ padding:18px 20px 24px; }
    .option-grid, .option-grid-3, .option-grid-checkbox{ grid-template-columns:1fr; }
    .field-grid{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce){ .config-step{ animation:none !important; } }


  /* ============ UNTERSEITEN (Impressum, Datenschutz) ============ */
  /* Header auf Unterseiten ohne dunkles Hero-Bild von Anfang an im hellen Zustand zeigen */
  body.subpage header{ background:rgba(255,255,255,0.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:0 1px 0 var(--line); color:var(--navy); }

  .legal-page{ padding-top:calc(96px + var(--section-pad)); padding-bottom:var(--section-pad); max-width:1080px; margin:0 auto; }
  .legal-card{
    background:#fff; border:1px solid var(--line); border-radius:26px;
    padding:clamp(32px,5vw,64px); box-shadow:0 30px 70px -34px rgba(22,35,63,0.22);
  }
  .legal-card h2{ font-size:1.3rem; margin-bottom:36px; }
  .legal-card + .legal-card{ margin-top:28px; }
  .legal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; margin-bottom:44px; }
  .legal-field h3{ font-size:0.76rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
  .legal-field p{ font-size:1.04rem; color:var(--navy); line-height:1.6; }
  .legal-field a{ border-bottom:1px solid var(--line); transition:color 0.3s ease, border-color 0.3s ease; }
  .legal-field a:hover{ color:var(--green-dark); border-color:var(--green-dark); }
  .legal-divider{ border:none; border-top:1px solid var(--line); margin-bottom:36px; }
  .legal-card h3.legal-subhead{ font-size:1.05rem; margin:0 0 14px; }
  .legal-card section + section h3.legal-subhead{ margin-top:34px; }
  .legal-card p.legal-text{ color:var(--text-muted); font-size:0.98rem; max-width:78ch; margin-bottom:14px; }
  .legal-card p.legal-text:last-child{ margin-bottom:0; }
  .legal-card ul.legal-list{ margin:0 0 14px 0; padding-left:22px; list-style:disc; }
  .legal-card ul.legal-list li{ color:var(--text-muted); font-size:0.98rem; line-height:1.6; margin-bottom:6px; }
  .legal-back{ display:inline-flex; align-items:center; gap:8px; margin-top:40px; font-weight:500; color:var(--navy); }
  .legal-back svg{ width:15px; height:15px; transition:transform 0.4s var(--ease); }
  .legal-back:hover svg{ transform:translateX(-4px); }
  @media (max-width:640px){ .legal-grid{ grid-template-columns:1fr; gap:26px; } }