/* mobilsale24.de — Startseite */

.hero{
  position:relative;
  background:linear-gradient(120deg, var(--color-hero-1) 0%, var(--color-hero-2) 55%, var(--color-hero-3) 100%);
  color:#fff;
  padding:var(--sp-12) 0 calc(var(--sp-16) + 40px);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 280px at 82% 0%, rgba(var(--color-primary-rgb),.32), transparent 70%),
    radial-gradient(560px 360px at 12% 120%, rgba(91,130,245,.26), transparent 70%);
}
.hero__inner{position:relative;z-index:1}
.hero__intro{max-width:780px}
.hero__title{font-size:clamp(2rem,1.3rem + 3vw,3.25rem);font-weight:var(--fw-bold);letter-spacing:var(--ls-tighter);margin-bottom:var(--sp-4);line-height:1.06;color:#fff}
.hero__subtitle{color:rgba(255,255,255,.85);font-size:var(--fs-lg);line-height:var(--lh-normal);margin-bottom:var(--sp-6);max-width:640px}

.nl-search{
  display:flex;align-items:center;gap:8px;max-width:660px;margin:0;
  background:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);
  padding:7px 7px 7px 20px;border:1px solid rgba(255,255,255,.6);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.nl-search:focus-within{box-shadow:var(--shadow-lg),0 0 0 4px rgba(255,255,255,.22)}
.nl-search__icon{display:flex;align-items:center;color:var(--color-text-muted);flex:none}
.nl-search__input{
  flex:1;min-width:0;height:44px;border:none;outline:none;background:transparent;
  font-size:var(--fs-md);color:var(--color-text);
}
.nl-search__input::placeholder{color:var(--color-text-muted)}
.nl-search__btn{width:48px;height:44px;padding:0;border-radius:var(--radius-pill);white-space:nowrap;flex:none}
.nl-search__spark{font-size:var(--fs-sm)}
@media (max-width:560px){
  .nl-search{padding:5px 5px 5px 14px;gap:6px}
  .nl-search__btn{padding:0 var(--sp-3)}
}

/* Weißes Suchpanel überlappt den dunklen Hero (mobilsale24.de-Look) */
.hero-search{position:relative;z-index:2;margin-top:-56px;margin-bottom:var(--sp-6)}

.quick-search{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:var(--sp-2) var(--sp-6) var(--sp-6);text-align:left;
}
.quick-search__tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-6);border-bottom:1px solid var(--color-divider);overflow-x:auto;-webkit-overflow-scrolling:touch}
.quick-search__tab{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;
  padding:var(--sp-4) var(--sp-3) var(--sp-3);flex:none;min-width:84px;
  border-bottom:2.5px solid transparent;background:transparent;
  font-size:var(--fs-xs);font-weight:var(--fw-medium);white-space:nowrap;
  color:var(--color-text-muted);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.quick-search__tab svg{width:32px;height:24px;opacity:.85;transition:opacity var(--dur) var(--ease)}
.quick-search__tab:hover{color:var(--color-text)}
.quick-search__tab:hover svg{opacity:1}
.quick-search__tab.is-active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--fw-semibold)}
.quick-search__tab.is-active svg{opacity:1}

.quick-search__panel{display:none}
.quick-search__panel.is-active{display:block}
.quick-search__panel[hidden]{display:none}
.quick-search__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);align-items:end}
.quick-search .field__label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-text-muted);margin-bottom:2px}
.quick-search .select,.quick-search .input{height:48px;font-weight:var(--fw-medium)}

/* Zahlungsart-Umschalter (Kaufen/Leasen) */
.qs-toggle{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;height:48px;background:var(--color-surface-2);padding:3px;gap:3px}
.qs-toggle__btn{flex:1;border-radius:calc(var(--radius-md) - 3px);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-secondary);background:transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.qs-toggle__btn.is-active{background:var(--color-primary);color:#fff;box-shadow:0 2px 6px rgba(var(--color-primary-rgb),.3)}

/* "Nur Elektro"-Checkbox */
.qs-check{grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text);cursor:pointer}
.qs-check input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}
.quick-search__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--color-divider)}
.quick-search__reset{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-right:auto;transition:color var(--dur) var(--ease)}
.quick-search__reset:hover{color:var(--color-primary)}
.quick-search__advanced{color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.quick-search__advanced:hover{text-decoration:underline}
.quick-search__submit{min-width:230px}
.qs-zip-radius{display:flex;gap:6px}
.qs-zip-radius .input{flex:1;min-width:0}
.qs-zip-radius .select{width:auto;flex:none;min-width:150px}

@media (max-width:1024px){
  .quick-search__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .quick-search{padding:var(--sp-4)}
  /* mobil: 2 Felder pro Zeile (col-6 col-6), zusammengesetzte Felder volle Breite */
  .quick-search__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .quick-search__grid .field--wide{grid-column:1/-1}
  .quick-search__tab-label{font-size:10px}
  .quick-search__tab svg{width:30px;height:22px}
  .quick-search__actions{flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3)}
  .quick-search__reset{margin-right:0}
  .quick-search__advanced{margin-left:auto}
  .quick-search__submit{order:3;width:100%;min-width:0}
}

.section{padding:var(--sp-10) var(--container-pad)}
/* mobilsale24.de: weißes Inhaltsmodul – sitzt im .container (gleiche Spalte wie Header & Suchpanel) */
.module{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-6);
  margin-bottom:var(--sp-6);
}
/* Inhaltsseiten (Recht/Hilfe/Magazin) = identische Modulbreite wie auf der Startseite,
   inkl. mobilem Seitenabstand (gutter) auf allen Breiten */
.section.container,
.legal-page.container{
  width:calc(100% - var(--container-pad) * 2);
  max-width:calc(var(--container-max) - var(--container-pad) * 2);
  margin:var(--sp-6) auto;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:var(--sp-6);
}
/* Magazin-Artikel: angenehme Lesebreite */
.section.container.magazine-article{max-width:880px}
.section__title{margin-bottom:var(--sp-4);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.section__head .section__title{margin-bottom:0}
.section__more{color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.section__more:hover{text-decoration:underline}

/* Vorteile / Vertrauen */
.benefits{background:transparent}
.benefits__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.benefit{display:flex;align-items:center;gap:var(--sp-3)}
.benefit__icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-primary)}
.benefit div{display:flex;flex-direction:column}
.benefit strong{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.benefit span{font-size:var(--fs-xs);color:var(--color-text-muted)}
@media (max-width:900px){.benefits__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}

.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.category-card{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-3);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.category-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary);transform:translateY(-3px)}
.category-card__icon{
  display:flex;align-items:center;justify-content:center;width:60px;height:60px;
  border-radius:var(--radius-lg);background:var(--color-primary-soft);color:var(--color-primary);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.category-card:hover .category-card__icon{background:var(--color-primary);color:#fff;transform:scale(1.06)}
.category-card__label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-align:center;line-height:1.2}

.brand-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-3)}
.brand-card{
  display:flex;align-items:center;justify-content:center;height:60px;padding:0 var(--sp-2);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)
}
.brand-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.brand-card__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-text);text-align:center}
.brand-card:hover .brand-card__name{color:var(--color-primary)}

.listing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.listing-card--skeleton{padding:0}
.skeleton{background:linear-gradient(90deg,var(--color-surface-2),var(--color-bg-alt),var(--color-surface-2));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--radius-sm)}
.skeleton--img{height:160px;border-radius:0}
.skeleton--line{height:14px;margin:var(--sp-3)}
.skeleton--line.short{width:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:1024px){
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .brand-grid{grid-template-columns:repeat(4,1fr)}
  .listing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .listing-grid{grid-template-columns:1fr}
}


/* ---------- SEO-/Verlinkungssektion (weißes Modul, gleiche Breite) ---------- */
.seo-block{background:transparent}
.seo-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.seo-col h3{font-size:var(--fs-md);margin-bottom:var(--sp-3)}
.seo-col ul{display:flex;flex-direction:column;gap:6px}
.seo-col a{color:var(--color-text-secondary);font-size:var(--fs-sm)}
.seo-col a:hover{color:var(--color-primary);text-decoration:underline}
.seo-text{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--color-divider);max-width:900px}
.seo-text h2{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.seo-text p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
@media (max-width:1024px){.seo-cols{grid-template-columns:repeat(2,1fr)}}