/* =========================
   Base / Tokens
   ========================= */
:root{
  /* Farben: hier zentral steuern (damit sich das Design nicht „ungewollt“ ändert) */
  --bg: #ffffff;
  --text: #0b1220;
  --muted: rgba(11,18,32,.72);
  --line: rgba(11,18,32,.10);
  --panel: rgba(11,18,32,.04);

 /* Accent – warmes Rot-Orange (Hausfarbe) */
  --brand: #d94b2b;        /* Primary: CTAs, Buttons */
  --brand-2: #f07c3e;      /* Secondary: Hover, Akzente */
  --brand-rgb: 217 75 43;
  --brand-2-rgb: 240 124 62;

  --ok: rgb(15 157 88);

  --radius: 18px;
  --shadow: 0 12px 28px rgba(11,18,32,.10);
  --shadow-sm: 0 8px 18px rgba(11,18,32,.08);

  --container: 1180px;
  --gutter: clamp(16px, 3vw, 28px);

  --h1: clamp(2rem, 3.8vw, 3rem);
  --h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --h3: clamp(1.1rem, 1.6vw, 1.3rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  overflow-x:hidden;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none; }
p{ margin:0 0 1rem 0; color:var(--muted); }
h1,h2,h3{ margin:0 0 .75rem 0; color:var(--text); line-height:1.15; }
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

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

/* =========================
   Topbar
   ========================= */
.topbar{
  background:rgba(11,18,32,.03);
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.topbar__inner{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:.6rem 0;
}
.topbar__left, .topbar__right{ display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.topbar__link{ color:rgba(11,18,32,.78); }
.topbar__link:hover{ color:var(--text); }
.topbar__meta{ color:rgba(11,18,32,.70); }

/* =========================
   Header / Nav
   ========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: .9rem 0;
}
.header.is-scrolled{ box-shadow: var(--shadow-sm); }

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-width: 220px;
}
.brand__logo{
  width:66px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:white;
  font-weight:800;
  letter-spacing:.5px;
}
.brand__logo--small{ width:65px;height:40px; border-radius:14px; }
.brand__text strong{ display:block; font-size:1rem; }
.brand__text small{ display:block; font-size:.85rem; color:rgba(11,18,32,.68); margin-top:.05rem; }

.nav{ position:relative; }
.nav__toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  background:white;
  border-radius:14px;
  cursor:pointer;
}
.nav__toggleIcon{
  display:block;
  width:18px;height:2px;
  margin:0 auto;
  background:var(--text);
  position:relative;
}
.nav__toggleIcon::before,
.nav__toggleIcon::after{
  content:"";
  position:absolute; left:0;
  width:18px;height:2px;
  background:var(--text);
}
.nav__toggleIcon::before{ top:-6px; }
.nav__toggleIcon::after{ top:6px; }

.nav__menu{
  display:flex;
  align-items:center;
  gap:1rem;
}
.nav__list{
  display:flex;
  gap:.25rem;
  list-style:none;
  padding:0;margin:0;
  align-items:center;
}
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.7rem .85rem;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font:inherit;
  color:rgba(11,18,32,.85);
}
.nav__link:hover{
  background:rgba(11,18,32,.04);
  border-color:rgba(11,18,32,.06);
  color:var(--text);
}
.nav__actions{ display:flex; gap:.75rem; align-items:center; }

.hero h1,
.hero .lead{
  color:#fff;
}

.hero p,
.hero span{
  color: rgba(255,255,255,0.85);
}

/* Mega menu */
.has-mega .nav__link::after{
  content:"▾";
  font-size:.85rem;
  opacity:.65;
}
.mega{
  display:none;
  position:absolute;
  left:0;
  top:calc(100% + .6rem);
  width:min(980px, calc(100vw - (2*var(--gutter))));
  transform:translateX(-10px);
  background:white;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:1.1rem 0;
}
.mega__inner{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
}
.mega__col{ padding: .25rem 1.1rem; }
.mega__title{ font-weight:800; color:var(--text); margin:.2rem 0 .6rem; }
.mega__link{
  display:block;
  padding:.5rem .55rem;
  border-radius:14px;
  color:rgba(11,18,32,.80);
}
.mega__link:hover{ background:rgba(11,18,32,.04); color:var(--text); }

.mega__promo{
  margin-right:1.1rem;
  border-radius:18px;
  background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.10), rgb(var(--brand-2-rgb) / 0.08));
  border:1px solid rgb(var(--brand-rgb) / 0.14);
  padding:1rem;
}
.mega__promoTitle{ font-weight:900; color:var(--text); margin:0 0 .3rem; }
.mega__promoText{ margin:0 0 .85rem; }

.has-mega.is-open > .mega{ display:block; }

/* Mobile nav */
@media (max-width: 980px){
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav__menu{
    position:absolute;
    right:0;
    top:calc(100% + .75rem);
    width:min(520px, calc(100vw - (2*var(--gutter))));
    flex-direction:column;
    align-items:stretch;
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow: var(--shadow);
    padding:.75rem;
    display:none;
  }
  .nav.is-open .nav__menu{ display:flex; }
  .nav__list{ flex-direction:column; align-items:stretch; }
  .nav__link{ width:100%; justify-content:space-between; }
  .nav__actions{ flex-direction:column; align-items:stretch; }
  .mega{
    position:static;
    width:100%;
    transform:none;
    border-radius:18px;
    box-shadow:none;
    margin-top:.5rem;
  }
  .mega__inner{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Buttons / UI
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.78rem 1rem;
  border-radius:16px;
  border:1px solid transparent;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.btn--primary{
  background: var(--brand-2);
  color:white;
  box-shadow: 0 10px 18px rgb(var(--brand-2-rgb) / 0.18);
}
.btn--primary:hover{ filter:brightness(.98); }
.btn--ghost{
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: var(--brand-2);
  color: var(--brand-2);
}
.btn--ghost:hover{ 
  background: rgba(var(--brand-2-rgb), 0.08); 
  color: var(--brand-2); 
}
.btn--block{ width:100%; }

.badge{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding:.32rem .6rem;
  font-size:.92rem;
  border-radius:999px;
  border:1px solid rgb(var(--brand-rgb) / .18);
  background: rgb(var(--brand-rgb) / .06);
  color: var(--brand);
  font-weight:800;
}
.textlink{ color: var(--brand); font-weight:800; }
.textlink:hover{ text-decoration:underline; }

.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.1rem;
}

.list{ margin:.6rem 0 0 1.1rem; color:rgba(11,18,32,.78); }
.fineprint{ font-size:.9rem; color:rgba(11,18,32,.62); }

/* =========================
   Layout sections
   ========================= */
.section{
  padding: clamp(2.25rem, 5vw, 4rem) 0;
}
.section--muted{ background: rgba(11,18,32,.02); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section__head{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  margin-bottom: 1.35rem;
}
.section__head p{ max-width: 85ch; }

/* Hero */
.hero{
  padding: clamp(2.25rem, 5vw, 4rem) 0;
  background:
    radial-gradient(900px 320px at 20% 0%, rgb(var(--brand-rgb) / 0.10), transparent 55%),
    radial-gradient(700px 300px at 80% 20%, rgb(var(--brand-2-rgb) / 0.10), transparent 52%);
}
.hero__inner{
  display:grid;
  gap:1.5rem;
  grid-template-columns: 1.2fr .9fr;
  align-items:start;
}
.hero .lead{ font-size:1.06rem; max-width: 85ch; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; }
.hero__trust{
  display:flex;
  gap:.75rem 1rem;
  flex-wrap:wrap;
  margin-top:1rem;
  color:rgba(11,18,32,.76);
  font-weight:700;
}
.hero__card .card{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:1.1rem;
}
.hero__card .card p { color: var(--muted); }
.hero__card .card h2, .hero__card .card h3 { color: var(--text); }
.hero__card .card span { color: var(--text); }
.hero__card .card .field span { color: rgba(11,18,32,.78); }

@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; }
}

/* Cards / grid */
.grid{
  display:grid;
  gap:1rem;
}
.grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 980px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

.feature, .post{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1rem;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.post__meta{ font-weight:800; font-size:.92rem; color:rgba(11,18,32,.62); margin:0 0 .4rem; }

.stat{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:1.2rem;
}
.stat__num{ font-weight:900; font-size:2rem; margin:0; color:var(--text); }
.stat__label{ margin:.25rem 0 0; }

/* Forms */
.form{ display:grid; gap:.75rem; }
.form--inline{ gap:.9rem; }
.field{ display:grid; gap:.35rem; }
.field span{ font-weight:800; color:rgba(11,18,32,.78); font-size:.95rem; }
input, select, textarea{
  width:100%;
  padding:.78rem .9rem;
  border-radius:16px;
  border:1px solid rgba(11,18,32,.16);
  background:white;
  color:var(--text);
  font:inherit;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgb(var(--brand-rgb) / .55);
  box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .12);
}
textarea{ resize:vertical; min-height:120px; }

/* CTA */
.cta{
  padding: clamp(2.25rem, 5vw, 3.6rem) 0;
  background: linear-gradient(135deg, rgb(var(--brand-rgb) / 0.10), rgb(var(--brand-2-rgb) / 0.06));
  border-top:1px solid rgb(var(--brand-rgb) / 0.16);
  border-bottom:1px solid rgb(var(--brand-rgb) / 0.16);
}
.cta__inner{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cta__content p{ max-width: 80ch; }
.cta__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* Pills */
.pilllist{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.pill{
  display:inline-flex;
  padding:.35rem .65rem;
  border-radius:999px;
  background:rgba(11,18,32,.03);
  border:1px solid rgba(11,18,32,.08);
  color:rgba(11,18,32,.78);
  font-weight:800;
  font-size:.92rem;
}

/* Footer */
.footer{
  padding: 2rem 0 0;
  border-top:1px solid var(--line);
  background: rgba(11,18,32,.02);
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
  padding-bottom: 1.25rem;
}
.footer__brand p{ margin:0; }
.footer__cols{
  display:grid;
  gap:1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  width: 100%;
}
.footer__col{ min-width: 170px; }
.footer__title{ font-weight:900; margin:0 0 .5rem; color:var(--text); }
.footer__link{ display:block; padding:.35rem 0; color:rgba(11,18,32,.74); }
.footer__link:hover{ color:var(--text); text-decoration:underline; }

.footer__bottom{
  border-top:1px solid var(--line);
}
.footer__bottomInner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding: 1rem 0;
  flex-wrap:wrap;
  color:rgba(11,18,32,.70);
}

/* Landing-Hub auf der Index unsichtbar (bleibt im Code) */
.is-hidden { display: none !important; }

/* ================================
   GLOBAL ADS – AUTO RESPONSIVE
   ================================ */
:root{
  --ad-gap: 1.25rem;
  --ad-radius: 16px;
  --ad-border: rgba(11,18,32,.10);
  --ad-bg: rgba(11,18,32,.02);
}

.page-with-ads{
  display:grid;
  gap: var(--ad-gap);
  align-items:start;
  grid-template-columns: 1fr;
}
.page-with-ads__content{ min-width:0; }

.ad-sky{ display:none; position:sticky; top: 96px; }
.ad-sky__slot{
  width:100%;
  max-width: 360px;
  border:1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ad-sky__slot img,
.ad-sky__slot iframe,
.ad-sky__slot video{
  width:100%;
  height:auto;
  max-height: 86vh;
  object-fit: contain;
  display:block;
}

.ad-banner{
  width:100%;
  border:1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  background: var(--ad-bg);
  overflow:hidden;
}
.ad-banner__slot{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.ad-banner__slot img,
.ad-banner__slot iframe,
.ad-banner__slot video{
  width:100%;
  height:auto;
  max-height: 52vh;
  object-fit: contain;
  display:block;
}

.ad--ratio-16-9{ aspect-ratio: 16 / 9; }
.ad--ratio-4-1{ aspect-ratio: 4 / 1; }
.ad--ratio-1-1{ aspect-ratio: 1 / 1; }

@media (min-width: 1200px){
  .page-with-ads{
    grid-template-columns: minmax(160px, 18vw) minmax(0,1fr);
  }
  .ad-sky--left{ display:block; }
}
@media (min-width: 1400px){
  .page-with-ads{
    grid-template-columns: minmax(160px, 16vw) minmax(0,1fr) minmax(160px, 16vw);
  }
  .ad-sky--right{ display:block; }
}

.section + .ad-banner,
.ad-banner + .section{ margin-top: var(--ad-gap); }


/* =========================
   Extra responsive tweaks
   ========================= */
@media (max-width: 520px){
  .topbar__inner{ flex-direction:column; align-items:flex-start; }
  .brand{ min-width: 0; }
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .nav__actions .btn{ width:100%; }
}

/* Comparison Table */
.compare{
  width:100%;
  border-collapse:collapse;
  min-width: 780px;
}
.compare th, .compare td{
  text-align:left;
  padding:.9rem .9rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}
.compare thead th{
  font-weight: 700;
  background: rgba(0,0,0,.03);
  position: sticky;
  top: 0;
}
.compare tbody tr:hover{
  background: rgba(0,0,0,.02);
}

/* ROI Ergebnis: keine Umbrüche + sauberes Auto-Layout */
#roi-rechner .stat__num{
  white-space: nowrap;              /* <- KEIN Zeilenumbruch */
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(1.2rem, 2.2vw, 2.05rem); /* etwas konservativer */
  line-height: 1.15;
  font-weight: 800;
  font-variant-numeric: tabular-nums; /* gleichmäßige Ziffern */
  letter-spacing: -0.02em;          /* spart Breite */
}

/* ROI Ergebnis-Grid: Spalten passen sich automatisch an */
#roi-rechner .grid.grid--3{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

#roi-rechner .stat{
  min-width: 0;
  overflow: visible;
  text-align: center;
}

/* Mobile: automatisch weniger Spalten -> mehr Platz */
@media (max-width: 900px){
  #roi-rechner .grid.grid--3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  #roi-rechner .grid.grid--3{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .grid--3{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* HERO: Fullwidth Hintergrundbild, Inhalt bleibt im Container */
.hero{
  position: relative;
  background-image:
    linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
    url("assets/images/pic_1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* kein flex → Layout bleibt original */
  padding: clamp(3rem, 7vw, 6rem) 0;
}

/* Text im Hero weiß */
.hero .badge,
.hero h1,
.hero .lead,
.hero .hero__trust span{
  color:#fff;
}
/* -------------------------------------------------------------------------- */
/* Customer Slider Marquee */
/* -------------------------------------------------------------------------- */
.customer-slider-section {
  background: var(--surface);
  padding: 3rem 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.customer-slider {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
}

.customer-slider::before,
.customer-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15vw;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.customer-slider::before {
  left: 0;
  background: linear-gradient(to right, var(--surface) 0%, transparent 100%);
}
.customer-slider::after {
  right: 0;
  background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
}

.customer-slider__track {
  display: flex;
  gap: 4rem;
  padding-right: 4rem; /* Match gap so loop is seamless */
  align-items: center;
  animation: scrollmarquee 30s linear infinite;
  min-width: 100%;
  flex-shrink: 0;
}

.customer-slider:hover .customer-slider__track {
  animation-play-state: paused;
}

.customer-slider__logo {
  height: 50px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.customer-slider__logo:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

@keyframes scrollmarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}