/* StromPing Startseite: Hero-Kacheln und Infokarte im Referenzstil */

.hero .wrap{
  grid-template-columns:minmax(0,520px) 340px;
  gap:38px;
}

.hero-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
  width:100%;
  max-width:560px;
  margin-top:18px;
}

.hero-actions .btn{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  width:100% !important;
  min-height:68px;
  box-sizing:border-box;
  padding:14px 16px !important;
  text-align:left;
  border-radius:8px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  line-height:1.08;
}

.hero-actions .btn small{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.05;
  font-weight:700;
  opacity:.96;
}

.hero-actions .btn::before{
  content:"";
  flex:0 0 28px;
  width:28px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.hero-actions .btn.primary{
  background:#087286;
  color:#fff;
  border:1px solid #087286;
}

.hero-actions .btn.secondary{
  background:#fff;
  color:#075d6d;
  border:1px solid #087286;
}

.hero-actions .btn.paypal{
  background:#ffc439;
  color:#111;
  border:1px solid #f0b400;
}

.hero-actions .btn.light{
  background:#fff;
  color:#075d6d;
  border:1px solid #087286;
}

.hero-actions .btn.primary.download-main::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}

.hero-actions .btn.secondary.download-main::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
}

.hero-actions .btn.paypal::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M6 10v8h12v-8'/%3E%3Cpath d='M8 10V7a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M12 4v3'/%3E%3C/svg%3E");
}

.hero-actions .btn.secondary[href*="partnerprogramm"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='10' cy='7' r='3'/%3E%3Cpath d='M21 21v-2a3 3 0 0 0-2-2.8'/%3E%3Cpath d='M16 4.2a3 3 0 0 1 0 5.6'/%3E%3C/svg%3E");
}

.hero-actions .btn.light::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M12 18h0'/%3E%3C/svg%3E");
}

.hero-actions .btn.secondary[href*="datenschutz"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-5'/%3E%3C/svg%3E");
}

.phone{
  background:#fff;
  border:6px solid #1a2430;
  border-radius:26px;
  padding:16px 16px 14px;
  box-shadow:0 10px 24px rgba(23,33,43,.10);
  width:100%;
  box-sizing:border-box;
}

.phone .pill{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  text-align:left;
  padding:14px 16px;
  border-radius:8px;
  font-size:19px;
  line-height:1.1;
  margin-bottom:10px;
}

.phone .pill::before{
  content:"";
  flex:0 0 22px;
  width:22px;
  height:22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.phone .pill:first-child::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11 11h1v5'/%3E%3C/svg%3E");
}

.phone .pill.red::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='10' rx='2'/%3E%3Cpath d='M17 10h2l2 2-2 2h-2'/%3E%3Cpath d='M6 17v1'/%3E%3C/svg%3E");
}

.phone .row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 14px;
  background:#fff;
  border:1px solid #d7e2e8;
  border-radius:6px;
  margin-top:12px;
  font-size:16px;
  line-height:1.15;
  box-sizing:border-box;
}

.phone .row::before{
  content:"";
  flex:0 0 28px;
  width:28px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.phone .row:nth-of-type(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23F44336' d='M6 6l23 18-9 7L6 42z'/%3E%3Cpath fill='%234CAF50' d='M29 24l7-6 6 10-7 5z'/%3E%3Cpath fill='%23FFEB3B' d='M29 24L6 6h16l14 12z'/%3E%3Cpath fill='%234FC3F7' d='M6 42l23-18 7 6-16 12z'/%3E%3C/svg%3E");
}

.phone .row:nth-of-type(4)::before{
  background-color:#eef7fb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a4 4 0 0 1 4-4h1.5A5.5 5.5 0 0 1 21 12.5 4.5 4.5 0 0 1 16.5 17H8'/%3E%3Cpath d='M12 11v7'/%3E%3Cpath d='M9 15l3 3 3-3'/%3E%3C/svg%3E");
}

.phone .row:nth-of-type(5)::before{
  background-color:#eef7fb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a3 3 0 0 1-3 3H8l-5 3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3z'/%3E%3C/svg%3E");
}

.phone .row:nth-of-type(6)::before{
  background-color:#eef7fb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087286' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l4 4 14-14'/%3E%3Cpath d='M3 12l4-4'/%3E%3Cpath d='M10 19l11-11'/%3E%3C/svg%3E");
}

@media (max-width: 980px){
  .hero .wrap{
    grid-template-columns:1fr;
    gap:22px;
  }
  .hero-actions{
    max-width:620px;
  }
  .phone{
    max-width:520px;
  }
}

@media (max-width: 800px){
  .hero-actions{
    grid-template-columns:1fr;
    max-width:420px;
  }
  .hero-actions .btn{
    min-height:62px;
  }
  .phone .pill{
    font-size:17px;
  }
}