/*
Theme Name: Kollektive Energie
Theme URI: https://kollektive-energie.de
Author: Kollektive Energie
Description: Zweisprachiges (DE/TR) Vergleichsportal für Strom & Gas – Privat & Gewerbe. Schwarzer Header, helles Layout, grüne Akzente, integrierter Tarifrechner und Kontaktformular.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kollektive-energie
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600&display=swap');

  :root{
    color-scheme: light;
    --bg:#ffffff;
    --bg-2:#eef2ee;
    --surface:#ffffff;
    --surface-2:#f4f7f4;
    --surface-3:#e9efe9;
    --border:#e2e8e2;
    --border-strong:#cbd5c9;
    --text:#0e140e;
    --muted:#566056;
    --dim:#8a938a;
    --green:#3fdc5c;
    --green-bright:#52e56e;
    --green-deep:#1f9e3c;
    --green-ink:#178a33;
    --green-soft:rgba(63,220,92,0.12);
    --green-line:rgba(23,138,51,0.28);
    --shadow:0 20px 45px -24px rgba(15,35,15,0.20);
    --shadow-green:0 18px 50px -22px rgba(63,220,92,0.22);
    --r-sm:10px;
    --r-md:16px;
    --r-lg:22px;
    --maxw:1200px;
    --serif:"Playfair Display", Georgia, "Times New Roman", serif;
    --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.12; text-wrap:balance; margin:0;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  ::selection{background:var(--green); color:#06120a;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,48px);}
  .eyebrow{
    font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--green); font-weight:700; display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--green-line); display:inline-block;}
  .section{padding:clamp(64px,9vw,110px) 0; position:relative;}
  .section-alt{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);}
  .sec-head{max-width:640px; margin:0 auto 54px; text-align:center; display:flex; flex-direction:column; gap:18px; align-items:center;}
  .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
  .sec-head p{color:var(--muted); font-size:1.05rem; max-width:56ch;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--sans); font-weight:700; font-size:.98rem;
    padding:15px 26px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent;
    transition:transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--green); color:#06120a; box-shadow:0 10px 30px -12px rgba(63,220,92,.5);}
  .btn-primary:hover{background:var(--green-bright); transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(63,220,92,.6);}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
  .btn-ghost:hover{border-color:var(--green); color:var(--green); transform:translateY(-2px);}
  .btn-block{width:100%;}
  .btn-lg{padding:18px 34px; font-size:1.05rem;}

  /* ---------- Top bar ---------- */
  .topbar{background:#050705; border-bottom:1px solid var(--border); font-size:.82rem; color:var(--muted);}
  .topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:42px;}
  .topbar-left{display:flex; gap:22px; align-items:center;}
  .topbar-left span{display:inline-flex; align-items:center; gap:7px;}
  .topbar svg{width:14px; height:14px; stroke:var(--green);}
  .topbar-right{display:flex; align-items:center; gap:18px;}
  .lang{display:inline-flex; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden;}
  .lang button{background:transparent; border:0; color:var(--muted); font-family:var(--sans); font-weight:700; font-size:.76rem; letter-spacing:.06em; padding:5px 12px; cursor:pointer; transition:.18s;}
  .lang button.active{background:var(--green); color:#06120a;}
  @media(max-width:680px){ .topbar-left span:nth-child(2){display:none;} }

  /* ---------- Nav ---------- */
  header.nav{position:sticky; top:0; z-index:60; background:rgba(7,9,7,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--border);}
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
  .brand img{height:46px; width:auto;}
  .menu{display:flex; gap:6px; align-items:center;}
  .menu .item{color:var(--muted); font-weight:600; font-size:.95rem; padding:9px 14px; border-radius:8px; cursor:pointer; transition:.16s;}
  .menu .item:hover{color:var(--text); background:var(--surface-2);}
  .nav-cta{display:flex; align-items:center; gap:14px;}
  .burger{display:none; background:transparent; border:1px solid var(--border-strong); border-radius:8px; width:44px; height:40px; cursor:pointer;}
  .burger span{display:block; width:18px; height:2px; background:var(--text); margin:3px auto;}
  @media(max-width:940px){ .menu{display:none;} .nav-cta .btn{display:none;} .burger{display:block;} }

  /* ---------- Hero ---------- */
  .hero{position:relative; padding:clamp(48px,7vw,86px) 0 clamp(60px,8vw,96px); overflow:hidden;}
  .hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(720px 420px at 78% 8%, rgba(63,220,92,.14), transparent 60%),radial-gradient(560px 500px at 8% 92%, rgba(63,220,92,.06), transparent 62%);}
  .hero::after{content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
    background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(760px 520px at 70% 30%, #000, transparent 75%);
    -webkit-mask-image:radial-gradient(760px 520px at 70% 30%, #000, transparent 75%);}
  .hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center;}
  .hero-copy{display:flex; flex-direction:column; gap:26px; max-width:600px;}
  .hero h1{font-size:clamp(2.5rem,5.2vw,4.15rem); letter-spacing:-.01em;}
  .hero h1 .accent{color:var(--green); font-style:italic; font-weight:600;}
  .hero .lead{color:var(--muted); font-size:1.14rem; max-width:52ch;}
  .hero-trust{display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:4px;}
  .hero-trust .t{display:inline-flex; align-items:center; gap:9px; font-size:.9rem; color:var(--text); font-weight:600;}
  .hero-trust svg{width:18px; height:18px; stroke:var(--green); flex:none;}

  /* ---------- Widget ---------- */
  .widget{position:relative; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow), var(--shadow-green); padding:8px; z-index:1;}
  .widget-inner{background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--r-lg) - 8px); padding:clamp(20px,3vw,30px);}
  .widget-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; gap:12px;}
  .widget-head h3{font-size:1.4rem;}
  .widget-head .free{font-size:.78rem; font-weight:700; color:var(--green); letter-spacing:.04em; text-transform:uppercase;}
  .segtoggle{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:5px; margin-bottom:12px;}
  .seg{background:transparent; border:0; color:var(--muted); font-family:var(--sans); font-weight:700; font-size:.9rem; padding:11px 8px; border-radius:8px; cursor:pointer; transition:.16s;}
  .seg.active{background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong);}
  .seg:not(.active):hover{color:var(--text);}
  .tabs{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:5px; margin-bottom:22px;}
  .tab{display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 8px; border-radius:8px; font-weight:700; font-size:.9rem; color:var(--muted); cursor:pointer; border:0; background:transparent; font-family:var(--sans); transition:.16s;}
  .tab svg{width:17px; height:17px; stroke:currentColor;}
  .tab.active{background:var(--green); color:#06120a;}
  .tab:not(.active):hover{color:var(--text);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-size:.82rem; font-weight:700; color:var(--muted); margin-bottom:8px; letter-spacing:.02em;}
  .field input, .field select{width:100%; background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:1rem; padding:14px 15px; transition:.16s;}
  .field input::placeholder{color:var(--dim);}
  .field input:focus, .field select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .chips{display:flex; flex-wrap:wrap; gap:8px;}
  .chip{border:1px solid var(--border-strong); background:var(--bg); color:var(--muted); border-radius:999px; padding:9px 14px; font-size:.85rem; font-weight:600; cursor:pointer; font-family:var(--sans); transition:.16s;}
  .chip.active{border-color:var(--green); color:var(--green); background:var(--green-soft);}
  .chip:hover:not(.active){color:var(--text);}
  .widget-foot{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:.82rem; color:var(--dim);}
  .widget-foot svg{width:14px; height:14px; stroke:var(--green);}

  /* ---------- Stats ---------- */
  .stats{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-2);}
  .stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding-left:0; padding-right:0;}
  .stat{padding:38px 24px; text-align:center; position:relative;}
  .stat:not(:last-child)::after{content:""; position:absolute; right:0; top:22%; height:56%; width:1px; background:var(--border);}
  .stat .num{font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.7rem); font-weight:800; color:var(--text); line-height:1; font-variant-numeric:tabular-nums;}
  .stat .num em{color:var(--green); font-style:normal;}
  .stat .lbl{color:var(--muted); font-size:.9rem; margin-top:10px;}
  @media(max-width:760px){ .stats .wrap{grid-template-columns:1fr 1fr;} .stat:nth-child(2)::after{display:none;} }

  /* ---------- Products ---------- */
  .cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:32px 30px; display:flex; flex-direction:column; gap:16px; transition:.2s; position:relative; overflow:hidden;}
  .card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--green),transparent 70%); opacity:0; transition:.25s;}
  .card:hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow);}
  .card:hover::before{opacity:1;}
  .card-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .card-ico{width:52px; height:52px; border-radius:13px; background:var(--green-soft); border:1px solid var(--green-line); display:flex; align-items:center; justify-content:center;}
  .card-ico svg{width:26px; height:26px; stroke:var(--green);}
  .seg-tag{font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green); border:1px solid var(--green-line); border-radius:999px; padding:5px 12px;}
  .card h3{font-size:1.5rem;}
  .card p{color:var(--muted); font-size:.98rem; flex:1;}
  .card .go{color:var(--green); font-weight:700; font-size:.95rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
  .card .go svg{width:16px; height:16px; stroke:var(--green); transition:.18s;}
  .card:hover .go svg{transform:translateX(4px);}

  /* ---------- Steps ---------- */
  .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,44px); position:relative;}
  .step{display:flex; flex-direction:column; gap:14px;}
  .step .n{font-family:var(--serif); font-size:2.4rem; font-weight:800; color:var(--green); width:70px; height:70px; border-radius:50%; border:1px solid var(--green-line); background:var(--green-soft); display:flex; align-items:center; justify-content:center; line-height:1;}
  .step h3{font-size:1.35rem;}
  .step p{color:var(--muted); font-size:.98rem;}

  /* ---------- Why ---------- */
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,72px); align-items:center;}
  .why-copy{display:flex; flex-direction:column; gap:22px;}
  .why-copy h2{font-size:clamp(1.9rem,3.6vw,2.9rem);}
  .why-copy .lead{color:var(--muted); font-size:1.08rem;}
  .blist{display:flex; flex-direction:column; gap:2px; margin-top:6px;}
  .bitem{display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--border);}
  .bitem:last-child{border-bottom:1px solid var(--border);}
  .bitem .bi{flex:none; width:34px; height:34px; border-radius:9px; background:var(--green-soft); border:1px solid var(--green-line); display:flex; align-items:center; justify-content:center;}
  .bitem .bi svg{width:18px; height:18px; stroke:var(--green);}
  .bitem .bt strong{display:block; font-weight:700; color:var(--text); font-size:1.02rem;}
  .bitem .bt span{color:var(--muted); font-size:.92rem;}
  .why-visual{position:relative;}
  .savecard{background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
  .savecard::after{content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(63,220,92,.16), transparent 70%);}
  .savecard .tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green); border:1px solid var(--green-line); border-radius:999px; padding:5px 12px; margin-bottom:20px;}
  .savecard .srow{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:.95rem;}
  .savecard .srow span{color:var(--muted);} .savecard .srow strong{color:var(--text); font-weight:700;}
  .savecard .big{margin-top:22px;}
  .savecard .big .amt{font-family:var(--serif); font-size:3rem; font-weight:800; color:var(--green); line-height:1; font-variant-numeric:tabular-nums;}
  .savecard .big .cap{color:var(--muted); font-size:.9rem; margin-top:6px;}
  @media(max-width:860px){ .why-grid{grid-template-columns:1fr;} }

  /* ---------- Proof ---------- */
  .quote{max-width:840px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:24px; align-items:center;}
  .stars{display:flex; gap:5px;}
  .stars svg{width:22px; height:22px; fill:var(--green); stroke:none;}
  .quote blockquote{font-family:var(--serif); font-size:clamp(1.5rem,2.8vw,2.15rem); font-weight:600; font-style:italic; line-height:1.35; color:var(--text);}
  .quote .who{color:var(--muted); font-size:.95rem;}
  .quote .who b{color:var(--text); font-weight:700; font-style:normal;}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
  .qa{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s;}
  .qa.open{border-color:var(--border-strong);}
  .qa button{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; background:transparent; border:0; cursor:pointer; padding:22px 24px; font-family:var(--serif); font-size:1.14rem; font-weight:700; color:var(--text);}
  .qa .ic{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--green); transition:.25s; font-size:1.2rem; line-height:1;}
  .qa.open .ic{background:var(--green); color:#06120a; border-color:var(--green); transform:rotate(45deg);}
  .qa .ans{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .qa .ans p{padding:0 24px 24px; color:var(--muted); font-size:1rem;}

  /* ---------- CTA ---------- */
  .cta-band{position:relative; overflow:hidden;}
  .cta-inner{background:linear-gradient(135deg,#0c140c 0%,#0a0f0a 100%); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:clamp(40px,6vw,68px); text-align:center; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; align-items:center;}
  .cta-inner::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% -10%, rgba(63,220,92,.16), transparent 65%);}
  .cta-inner > *{position:relative; z-index:1;}
  .cta-inner h2{font-size:clamp(2rem,4vw,3.1rem);}
  .cta-inner p{color:var(--muted); font-size:1.1rem; max-width:50ch;}

  /* ---------- Footer ---------- */
  footer{background:#050705; border-top:1px solid var(--border); padding:clamp(56px,7vw,84px) 0 30px;}
  .foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--border);}
  .foot-brand img{height:88px; width:auto; margin-bottom:20px;}
  .foot-brand p{color:var(--muted); font-size:.95rem; max-width:38ch;}
  .foot-col h4{font-family:var(--sans); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700; margin-bottom:18px;}
  .foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
  .foot-col li{color:var(--muted); font-size:.95rem; cursor:pointer; transition:.15s; width:fit-content;}
  .foot-col li:hover{color:var(--green);}
  .foot-bottom{display:flex; align-items:center; justify-content:space-between; padding-top:26px; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:.85rem;}
  .foot-bottom .fb-links{display:flex; gap:20px;}
  @media(max-width:860px){ .foot-top{grid-template-columns:1fr 1fr;} }
  @media(max-width:520px){ .foot-top{grid-template-columns:1fr;} }

  /* ---------- Responsive ---------- */
  @media(max-width:900px){
    .hero-inner{grid-template-columns:1fr; gap:40px;}
    .hero-copy{max-width:none;}
    .cards{grid-template-columns:1fr;}
    .steps-grid{grid-template-columns:1fr;}
  }
  @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important;} }

  /* ===== LIGHT THEME OVERRIDES ===== */
  .eyebrow{color:var(--green-ink);}
  .free{color:var(--green-ink);}
  .hero::after{opacity:.35;}
  .hero-trust svg{stroke:var(--green-ink);}
  .card-ico svg{stroke:var(--green-ink);}
  .seg-tag{color:var(--green-ink); border-color:var(--green-line);}
  .card .go{color:var(--green-ink);} .card .go svg{stroke:var(--green-ink);}
  .step .n{color:var(--green-ink);}
  .bitem .bi svg{stroke:var(--green-ink);}
  .savecard .tag{color:var(--green-ink); border-color:var(--green-line);}
  .widget-foot svg{stroke:var(--green-ink);}
  .segtoggle,.tabs{background:#eef2ee; border-color:var(--border);}
  .seg.active{background:#ffffff; color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong), 0 1px 2px rgba(0,0,0,.06);}
  .field input,.field select,.chip{background:#ffffff;}
  .chip.active{border-color:var(--green-ink); color:var(--green-ink); background:var(--green-soft);}
  /* header stays dark */
  .topbar{background:#050705; color:#9aa79a; border-bottom-color:transparent;}
  .topbar .lang{border-color:#33402f;}
  .topbar .lang button{color:#9aa79a;}
  .topbar .lang button.active{background:var(--green); color:#06120a;}
  header.nav{background:#050705; border-bottom-color:#1c241b;}
  .menu .item{color:#9aa79a;}
  .menu .item:hover{color:#ffffff; background:#161d16;}
  .burger{border-color:#33402f;}
  .burger span{background:#e9efe9;}
  /* CTA light green wash */
  .cta-inner{background:linear-gradient(135deg,#e9f7ec,#f5fbf6); border-color:#cdeacf;}
  .cta-inner::before{background:radial-gradient(600px 300px at 50% -10%, rgba(63,220,92,.22), transparent 65%);}
  /* footer light + dark logo badge */
  footer{background:#eef2ee; border-top-color:var(--border);}
  .foot-badge{display:inline-block; background:#070907; border:1px solid #1c241b; border-radius:16px; padding:16px 22px; margin-bottom:20px;}
  .foot-badge img{height:72px; width:auto; margin:0;}
  .foot-col li:hover{color:var(--green-ink);}

/* ============================================================
   SUBPAGES / COMPONENTS (Kollektive Energie – erweiterte Seiten)
   ============================================================ */

/* --- Page hero (compact, for subpages) --- */
.page-hero{position:relative; overflow:hidden; padding:clamp(48px,7vw,80px) 0 clamp(36px,5vw,56px); background:linear-gradient(180deg,#f4f7f4,#ffffff);}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 340px at 82% 0%, rgba(63,220,92,.12), transparent 62%);}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .ph-inner{max-width:760px; display:flex; flex-direction:column; gap:18px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem); letter-spacing:-.01em;}
.page-hero h1 .accent{color:var(--green-ink); font-style:italic; font-weight:600;}
.page-hero p.lead{color:var(--muted); font-size:1.12rem; max-width:56ch;}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:.85rem; color:var(--dim); flex-wrap:wrap;}
.breadcrumb a{color:var(--muted);} .breadcrumb a:hover{color:var(--green-ink);}
.breadcrumb .sep{opacity:.5;}

/* hero with widget layout on subpages */
.calc-hero .ph-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,4vw,56px); align-items:center;}
@media(max-width:900px){ .calc-hero .ph-grid{grid-template-columns:1fr; gap:36px;} }

/* --- Results (tariff list) --- */
.results{padding:clamp(40px,5vw,64px) 0;}
.results-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:8px;}
.results-head h2{font-size:clamp(1.5rem,2.6vw,2rem);}
.results-note{font-size:.85rem; color:var(--dim);}
.results-sub{color:var(--muted); font-size:.98rem; margin-bottom:24px;}
.result-list{display:flex; flex-direction:column; gap:14px;}
.tariff{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:22px 24px; transition:.18s;}
.tariff:hover{border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px);}
.tariff.best{border-color:var(--green); box-shadow:0 0 0 1px var(--green), var(--shadow);}
.tariff .t-brand{display:flex; flex-direction:column; gap:6px;}
.tariff .t-logo{width:42px; height:42px; border-radius:10px; background:var(--green-soft); border:1px solid var(--green-line); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:800; color:var(--green-ink); font-size:1.1rem;}
.tariff .t-name{font-weight:700; color:var(--text); font-size:1.05rem; font-family:var(--serif);}
.tariff .t-tags{display:flex; gap:6px; flex-wrap:wrap;}
.t-badge{font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid var(--green-line); color:var(--green-ink); background:var(--green-soft);}
.t-badge.gray{color:var(--muted); border-color:var(--border-strong); background:transparent;}
.t-badge.best{color:#06120a; background:var(--green); border-color:var(--green);}
.tariff .t-col .lab{font-size:.76rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;}
.tariff .t-col .val{font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; font-size:1.02rem;}
.tariff .t-price .big{font-family:var(--serif); font-size:1.7rem; font-weight:800; color:var(--text); line-height:1; font-variant-numeric:tabular-nums;}
.tariff .t-price .small{font-size:.8rem; color:var(--muted); margin-top:4px;}
.tariff .t-save{color:var(--green-ink); font-weight:700; font-size:.9rem; margin-top:6px;}
.tariff .t-cta{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:150px;}
.results-empty{background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r-md); padding:28px; text-align:center; color:var(--muted);}
@media(max-width:820px){
  .tariff{grid-template-columns:1fr 1fr; gap:16px;}
  .tariff .t-cta{grid-column:1 / -1; min-width:0;}
  .tariff .t-cta .btn{width:100%;}
}

/* --- Feature / info split --- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center;}
.split.rev .split-media{order:2;}
.split-copy{display:flex; flex-direction:column; gap:18px;}
.split-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.split-copy p{color:var(--muted);}
.split-media .media-card{background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border-strong); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow);}
@media(max-width:860px){ .split{grid-template-columns:1fr;} .split.rev .split-media{order:0;} }

.checklist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.checklist li{display:flex; gap:12px; align-items:flex-start; color:var(--text); font-weight:500;}
.checklist li svg{width:20px; height:20px; stroke:var(--green-ink); flex:none; margin-top:2px;}
.checklist li span{color:var(--muted); font-weight:400;}

/* --- Article grid (Ratgeber) --- */
.articles{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.article{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:.18s;}
.article:hover{border-color:var(--border-strong); transform:translateY(-4px); box-shadow:var(--shadow);}
.article .thumb{height:150px; background:linear-gradient(135deg,#0c140c,#123018); position:relative; display:flex; align-items:center; justify-content:center;}
.article .thumb svg{width:44px; height:44px; stroke:var(--green);}
.article .a-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.article .a-cat{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-ink);}
.article h3{font-size:1.2rem;}
.article p{color:var(--muted); font-size:.92rem; flex:1;}
.article .a-more{color:var(--green-ink); font-weight:700; font-size:.9rem; display:inline-flex; gap:7px; align-items:center;}
@media(max-width:900px){ .articles{grid-template-columns:1fr;} }
@media(min-width:901px) and (max-width:1080px){ .articles{grid-template-columns:1fr 1fr;} }

/* --- Contact --- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,4vw,56px); align-items:start;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.form{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); box-shadow:var(--shadow);}
.form .frow{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){ .form .frow{grid-template-columns:1fr;} }
.form .field textarea{width:100%; background:#ffffff; border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); font-family:var(--sans); font-size:1rem; padding:13px 15px; min-height:130px; resize:vertical; transition:.16s;}
.form .field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
.form .consent{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--muted); margin:4px 0 6px;}
.form .consent input{margin-top:3px; accent-color:var(--green);}
.form-status{font-size:.9rem; font-weight:600; padding:12px 14px; border-radius:var(--r-sm); margin-top:4px;}
.form-status.ok{background:var(--green-soft); color:var(--green-ink); border:1px solid var(--green-line);}
.form-status.err{background:#fdecec; color:#b42318; border:1px solid #f3c0bd;}
.contact-info{display:flex; flex-direction:column; gap:14px;}
.info-card{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:22px 24px;}
.info-card .ic{flex:none; width:44px; height:44px; border-radius:11px; background:var(--green-soft); border:1px solid var(--green-line); display:flex; align-items:center; justify-content:center;}
.info-card .ic svg{width:20px; height:20px; stroke:var(--green-ink);}
.info-card .it strong{display:block; color:var(--text); font-weight:700; margin-bottom:3px;}
.info-card .it span, .info-card .it a{color:var(--muted); font-size:.95rem;}
.info-card .it a:hover{color:var(--green-ink);}

/* --- About / values / team / stats-on-light --- */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.value{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:30px 28px; display:flex; flex-direction:column; gap:14px;}
.value .v-ico{width:50px; height:50px; border-radius:12px; background:var(--green-soft); border:1px solid var(--green-line); display:flex; align-items:center; justify-content:center;}
.value .v-ico svg{width:24px; height:24px; stroke:var(--green-ink);}
.value h3{font-size:1.25rem;} .value p{color:var(--muted); font-size:.95rem;}
@media(max-width:860px){ .values{grid-template-columns:1fr;} }
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.member{text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:26px 18px;}
.member .avatar{width:76px; height:76px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,#123018,#0c140c); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:800; color:var(--green); font-size:1.6rem;}
.member strong{display:block; color:var(--text);} .member span{color:var(--muted); font-size:.88rem;}
@media(max-width:860px){ .team{grid-template-columns:1fr 1fr;} }

/* --- Legal prose --- */
.prose{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}
.prose h2{font-size:1.4rem; margin-top:18px;}
.prose p, .prose li{color:var(--muted);}
.prose ul{padding-left:20px; display:flex; flex-direction:column; gap:8px;}

/* --- Mobile nav panel --- */
.mnav{position:fixed; inset:0 0 0 auto; width:min(84vw,340px); background:#050705; z-index:200; transform:translateX(100%); transition:transform .28s ease; display:flex; flex-direction:column; padding:24px; gap:6px; box-shadow:-20px 0 60px rgba(0,0,0,.5);}
.mnav.open{transform:translateX(0);}
.mnav a{color:#cdd6cd; font-weight:600; font-size:1.05rem; padding:13px 12px; border-radius:8px;}
.mnav a:hover{background:#161d16; color:#fff;}
.mnav .mn-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.mnav .mn-close{background:transparent; border:1px solid #33402f; color:#e9efe9; width:40px; height:40px; border-radius:8px; cursor:pointer; font-size:1.2rem;}
.mnav .btn{margin-top:12px;}
.mscrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:190; opacity:0; visibility:hidden; transition:.28s;}
.mscrim.open{opacity:1; visibility:visible;}

/* --- section helpers --- */
.section-tight{padding:clamp(44px,6vw,72px) 0;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:760px){ .grid-2{grid-template-columns:1fr;} }