:root{
      --orange:#f58220;
      --orange-dark:#d96f16;
      --dark:#2f3337;
      --text:#333;
      --muted:#6f7479;
      --line:#e1e4e8;
      --soft:#f5f6f7;
      --white:#fff;
      --shadow:0 12px 32px rgba(0,0,0,.12);
      --radius:18px;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--text);
      background:#080b0f;
      line-height:1.45;
    }

    a{color:inherit;text-decoration:none}

    .page{
      width:min(1180px, calc(100% - 28px));
      margin:28px auto;
      background:var(--white);
      border-radius:22px;
      box-shadow:var(--shadow);
      overflow:hidden;
      border:1px solid rgba(0,0,0,.06);
    }

    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
      padding:18px 24px;
      background:#fff;
      border-bottom:1px solid var(--line);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand-logo{
      height:58px;
      width:auto;
      display:block;
      flex:0 0 auto;
    }

    .brand-title{
      font-size:18px;
      font-weight:800;
      color:var(--dark);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brand-subtitle{
      font-size:13px;
      color:var(--muted);
      margin-top:2px;
    }

    .contact{
      text-align:right;
      font-size:13px;
      color:var(--muted);
      line-height:1.35;
      flex:0 0 auto;
    }

    .hero{
      position:relative;
      padding:44px 34px 38px;
      background:
        radial-gradient(circle at 85% 10%, rgba(245,130,32,.22), transparent 34%),
        linear-gradient(135deg,#35393e,#202327);
      color:#fff;
      overflow:hidden;
    }

    .hero:after{
      content:"";
      position:absolute;
      right:-120px;
      bottom:-155px;
      width:430px;
      height:260px;
      border:22px solid rgba(255,255,255,.07);
      border-radius:50%;
      transform:rotate(-14deg);
    }

    .hero-inner{position:relative;z-index:1;max-width:860px}

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:9px;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.2);
      padding:8px 12px;
      border-radius:999px;
      font-size:14px;
      margin-bottom:18px;
    }

    .kicker span{
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--orange);
      display:inline-block;
    }

    h1{
      margin:0 0 14px;
      font-size:clamp(31px,4vw,52px);
      line-height:1.05;
      letter-spacing:-.035em;
    }

    .hero p{
      margin:0;
      color:rgba(255,255,255,.84);
      font-size:18px;
      max-width:760px;
    }

    .content{padding:30px 28px 34px;background:#fff}

    .intro-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:-58px;
      position:relative;
      z-index:2;
    }

    .config-card{
      display:flex;
      flex-direction:column;
      min-height:100%;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:0 10px 26px rgba(0,0,0,.10);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .config-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 36px rgba(0,0,0,.16);
      border-color:rgba(245,130,32,.45);
    }

    .card-head{
      padding:20px 20px 0;
      background:linear-gradient(180deg,#fafafa,#f1f2f3);
      border-bottom:1px solid var(--line);
      min-height:375px;
      position:relative;
      display:flex;
      flex-direction:column;
    }

    .card-text-block{
      min-height:168px;
    }

    .label{
      display:inline-block;
      background:var(--orange);
      color:#fff;
      font-size:12px;
      font-weight:800;
      padding:6px 10px;
      border-radius:999px;
      margin-bottom:14px;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    .card-head h2{
      margin:0 0 8px;
      font-size:24px;
      color:var(--dark);
      line-height:1.12;
    }

    .card-head p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .product-image-wrap{
      margin-top:auto;
      height:205px;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      overflow:hidden;
      padding-bottom:20px;
    }

    .product-image{
      max-width:100%;
      max-height:195px;
      object-fit:contain;
      display:block;
    }

        .manual .product-image{
      max-width:128%;
      max-height:185px;
      transform:scale(1.22);
      transform-origin:center bottom;
      margin:0 0 8px 0;
    }

    .card-body{
      padding:18px 20px 20px;
      display:flex;
      flex-direction:column;
      flex:1;
    }

    .features{
      list-style:none;
      padding:0;
      margin:0 0 18px;
      display:grid;
      gap:9px;
      color:#4f555b;
      font-size:14px;
    }

    .features li{
      display:flex;
      gap:9px;
      align-items:flex-start;
    }

    .features li:before{
      content:"✓";
      color:var(--orange);
      font-weight:900;
      flex:0 0 auto;
    }

    .button{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
      margin-top:auto;
      min-height:48px;
      padding:13px 16px;
      border-radius:12px;
      color:#fff;
      background:linear-gradient(180deg,var(--orange),var(--orange-dark));
      font-weight:800;
      box-shadow:0 8px 18px rgba(245,130,32,.25);
      transition:filter .18s ease, transform .18s ease;
    }

    .button:hover{filter:brightness(1.04);transform:translateY(-1px)}

    .section{
      margin-top:28px;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      background:var(--soft);
    }

    .section-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:18px 20px;
      background:#fff;
      border-bottom:1px solid var(--line);
    }

    .section-title h2{
      margin:0;
      color:var(--dark);
      font-size:23px;
    }

    .hint-badge{
      background:#fff4ea;
      color:#9c520f;
      border:1px solid #ffd5ad;
      border-radius:999px;
      padding:7px 11px;
      font-size:13px;
      font-weight:700;
      white-space:nowrap;
    }

    .help-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1px;
      background:var(--line);
    }

    .help-item{
      background:#fff;
      padding:20px;
    }

    .help-item h3{
      margin:0 0 8px;
      color:var(--dark);
      font-size:18px;
    }

    .help-item p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

    .footer-cta{
      margin-top:26px;
      padding:24px;
      border-radius:var(--radius);
      background:linear-gradient(135deg,#f7f7f7,#fff);
      border:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }

    .footer-cta h2{
      margin:0 0 6px;
      font-size:24px;
      color:var(--dark);
    }

    .footer-cta p{margin:0;color:var(--muted)}

    .secondary-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:12px 18px;
      border-radius:12px;
      border:2px solid var(--orange);
      color:var(--orange-dark);
      background:#fff;
      font-weight:800;
      white-space:nowrap;
    }

    .copyright{
      padding:18px 24px;
      color:#80858a;
      text-align:center;
      font-size:13px;
      border-top:1px solid var(--line);
      background:#fafafa;
    }

    @media (max-width:900px){
      .intro-grid,.help-grid{grid-template-columns:1fr}
      .intro-grid{margin-top:-36px}
      .footer-cta,.topbar{align-items:flex-start;flex-direction:column}
      .contact{text-align:left}
      .card-head{
      padding:20px 20px 0;
      background:linear-gradient(180deg,#fafafa,#f1f2f3);
      border-bottom:1px solid var(--line);
      min-height:375px;
      position:relative;
      display:flex;
      flex-direction:column;
    }
    }

    @media (max-width:560px){
      .page{width:100%;margin:0;border-radius:0}
      .hero{padding:34px 20px 64px}
      .content{padding:22px 16px 28px}
      .topbar{padding:16px}
      .brand-title{white-space:normal}
      .section-title{align-items:flex-start;flex-direction:column}
      .hint-badge{white-space:normal}
    }
  

    .seo-section,.faq-section,.internal-links{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:24px;box-shadow:0 6px 18px rgba(0,0,0,.06)}
    .seo-section h2,.faq-section h2,.internal-links h2{margin:0 0 14px;color:var(--dark);font-size:24px;line-height:1.18}
    .seo-section p{margin:0 0 13px;color:#4f555b;font-size:15px}
    .seo-keywords{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
    .seo-keywords span{display:inline-flex;align-items:center;min-height:32px;padding:7px 11px;border-radius:999px;background:#fff4ea;color:#9c520f;border:1px solid #ffd5ad;font-size:13px;font-weight:700}
    .faq-section details{border:1px solid var(--line);border-radius:12px;background:#fafafa;padding:0;margin:10px 0;overflow:hidden}
    .faq-section summary{cursor:pointer;padding:15px 16px;font-weight:800;color:var(--dark);list-style:none}
    .faq-section summary::-webkit-details-marker{display:none}
    .faq-section summary:after{content:"+";float:right;color:var(--orange);font-size:20px;line-height:1;margin-left:12px}
    .faq-section details[open] summary:after{content:"–"}
    .faq-section details p{margin:0;padding:0 16px 16px;color:#4f555b;font-size:15px}
    .internal-link-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .internal-link-grid a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:12px;border-radius:12px;border:1px solid #ffd5ad;background:#fff4ea;color:#9c520f;font-weight:800;transition:filter .18s ease,transform .18s ease}
    .internal-link-grid a:hover{filter:brightness(1.03);transform:translateY(-1px)}
    @media (max-width:900px){.internal-link-grid{grid-template-columns:1fr 1fr}}
    @media (max-width:560px){.seo-section,.faq-section,.internal-links{padding:18px}.internal-link-grid{grid-template-columns:1fr}}

.hero h1{font-size:50px !important;line-height:1.08 !important;}

/* H1 Korrektur */
.hero h1,
.hero-title,
.hero-content h1,
h1{
    font-size:40px !important;
    line-height:1.08 !important;
}

@media (max-width: 768px){
    .hero h1,
    .hero-title,
    .hero-content h1,
    h1{
        font-size:28px !important;
        line-height:1.12 !important;
    }
}


.card-image a img,
.card-media a img,
.card a img{
    cursor:pointer;
}

.second-row-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;margin-top:18px;align-items:stretch}
.traffic-card-column .config-card{height:100%}
.service-cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.service-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 26px rgba(0,0,0,.10);transition:.18s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.16);border-color:rgba(245,130,32,.45)}
.service-card-image{height:175px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#fafafa,#f1f2f3);border-bottom:1px solid var(--line)}
.service-card-image img{width:100%;height:100%;object-fit:contain;display:block}
.service-card-body{padding:16px 18px 18px;flex:1}
.service-card-body h3{margin:0 0 8px;color:var(--dark);font-size:21px;line-height:1.15}
.service-card-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}
@media(max-width:900px){.second-row-layout{grid-template-columns:1fr}.service-cards-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.service-cards-grid{grid-template-columns:1fr}.service-card-image{height:190px}}

.landing-footer{margin-top:40px;background:#080b0f;color:#fff;padding:28px 20px}
.landing-footer-inner{max-width:1200px;margin:0 auto;display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap}
.landing-footer a{color:#fff;text-decoration:none}
.landing-footer a:hover{color:#f58220}
.landing-footer p{margin:0;color:#cfd3d8}



.config-card.traffic-island .product-image-wrap {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  padding-top:18px !important;
  box-sizing:border-box !important;
}
.config-card.traffic-island .product-image-wrap a {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
}
.config-card.traffic-island .product-image {
  display:block !important;
  width:500px !important;
  height:auto !important;
  max-width:none !important;
  max-height:260px !important;
  object-fit:contain !important;
  transform:none !important;
}
.config-card.traffic-island .button {
  white-space:nowrap !important;
}


/* Microsite: gemeinsamer Footer und Rechtsseiten */
.landing-footer{
  margin-top:40px;
  background:#080b0f;
  color:#fff;
  padding:28px 20px;
}
.landing-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.landing-footer a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.landing-footer a:hover{color:#f58220}
.landing-footer p{margin:0;color:#cfd3d8}

.legal-page{
  min-height:100vh;
  background:#080b0f;
  padding:28px 14px;
}
.legal-shell{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  background:#fff;
  border-radius:22px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.legal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:18px 24px;
  border-bottom:1px solid #e1e4e8;
  background:#fff;
}
.legal-header-brand{
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0;
}
.legal-header-logo{
  width:auto;
  height:58px;
  display:block;
}
.legal-header-title{
  font-size:18px;
  font-weight:800;
  color:#2f3337;
}
.legal-header-subtitle{
  margin-top:2px;
  font-size:13px;
  color:#6f7479;
}
.legal-home-link{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  padding:11px 16px;
  border-radius:11px;
  background:linear-gradient(180deg,#f58220,#d96f16);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.legal-hero{
  padding:38px 34px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(245,130,32,.22), transparent 34%),
    linear-gradient(135deg,#35393e,#202327);
}
.legal-hero h1{
  margin:0;
  font-size:clamp(32px,4vw,48px);
  line-height:1.08;
}
.legal-content{
  padding:32px 34px 42px;
  color:#333;
  line-height:1.65;
}
.legal-content h2{
  color:#2f3337;
  font-size:23px;
  line-height:1.25;
  margin:30px 0 10px;
}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{
  color:#2f3337;
  font-size:18px;
  margin:23px 0 8px;
}
.legal-content p{margin:0 0 13px}
.legal-content ul{margin:8px 0 16px;padding-left:23px}
.legal-content a{color:#d96f16}
.legal-note{
  padding:15px 17px;
  margin:18px 0;
  border-radius:12px;
  background:#fff4ea;
  border:1px solid #ffd5ad;
  color:#75400e;
}
.legal-data{
  padding:18px;
  border:1px solid #e1e4e8;
  border-radius:14px;
  background:#f7f8f9;
}
.placeholder-card{
  padding:24px;
  border-radius:16px;
  border:1px solid #ffd5ad;
  background:#fff8f1;
  text-align:center;
}
.error-code{
  font-size:clamp(72px,12vw,140px);
  line-height:1;
  font-weight:900;
  color:#f58220;
  margin:0 0 15px;
}
@media(max-width:700px){
  .legal-page{padding:0}
  .legal-shell{width:100%;border-radius:0}
  .legal-header{align-items:flex-start;flex-direction:column;padding:16px}
  .legal-hero{padding:30px 20px}
  .legal-content{padding:25px 20px 34px}
}


/* Cookie-Banner */
.cookie-banner{
  position:fixed;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:99999;
  display:none;
  max-width:1120px;
  margin:0 auto;
  padding:20px;
  border:1px solid rgba(245,130,32,.45);
  border-radius:18px;
  background:#11161d;
  color:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.cookie-banner.is-visible{display:block}
.cookie-banner-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
}
.cookie-banner h2{
  margin:0 0 8px;
  font-size:21px;
  color:#fff;
}
.cookie-banner p{
  margin:0;
  color:#cbd1d7;
  font-size:14px;
  line-height:1.5;
}
.cookie-banner a{
  color:#f58220;
  font-weight:700;
  text-decoration:none;
}
.cookie-banner-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.cookie-banner button,
.cookie-banner .cookie-banner-link{
  min-height:44px;
  padding:11px 15px;
  border-radius:11px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.cookie-banner-primary{
  border:0;
  background:linear-gradient(180deg,#f58220,#d96f16);
  color:#fff;
}
.cookie-banner-secondary{
  border:1px solid #46505b;
  background:#242c35;
  color:#fff;
}
.cookie-banner-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #46505b;
  background:transparent;
  color:#fff !important;
}
@media(max-width:760px){
  .cookie-banner{
    left:10px;
    right:10px;
    bottom:10px;
    padding:17px;
  }
  .cookie-banner-inner{
    grid-template-columns:1fr;
  }
  .cookie-banner-actions{
    justify-content:stretch;
  }
  .cookie-banner button,
  .cookie-banner .cookie-banner-link{
    flex:1 1 100%;
  }
}