/* ============================================================
   AMD Tarifcheck – Design-Verbesserungen v1
   Fokus: Helligkeit, Vertrauen, Lesbarkeit, Layout-Harmonie
   Alle Texte bleiben unverändert.
   ============================================================ */


/* ============================================================
   1. HERO – Overlay aufhellen, freundlicher und einladender
   ============================================================ */

/* Hauptseite Hero: weniger dunkel, mehr Bildwirkung */
.hero::before,
.hero__overlay {
  background: linear-gradient(
    105deg,
    rgba(10, 22, 40, 0.72) 0%,
    rgba(15, 31, 53, 0.52) 42%,
    rgba(15, 31, 53, 0.22) 72%,
    rgba(15, 31, 53, 0.00) 100%
  ) !important;
}

/* KFZ-Hero: etwas aufhellen */
.kfz-hero::before {
  background: linear-gradient(
    0deg,
    rgba(10, 19, 33, 0.82) 0%,
    rgba(10, 19, 33, 0.52) 50%,
    rgba(10, 19, 33, 0.14) 100%
  ) !important;
}

/* Hero min-height etwas reduzieren für bessere Proportion */
.hero {
  min-height: 54vh;
}

/* Hero-Content etwas kompakter */
.hero__content {
  padding: 60px 16px 72px;
  max-width: 680px;
}


/* ============================================================
   2. PAGE-HERO (Unterseiten) – heller, freundlicher
   ============================================================ */

.page-hero {
  background: linear-gradient(135deg, #132540 0%, #1e3d66 55%, #2a5085 100%);
  padding: 44px 20px 52px;
}

/* Subtiler Licht-Overlay statt zu tiefem Schwarz */
.page-hero::before {
  background:
    radial-gradient(ellipse at 85% 55%, rgba(196, 92, 20, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 15% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
}


/* ============================================================
   3. SECTION--DARK-BENEFITS – aufhellen
   ============================================================ */

.section--dark-benefits {
  background: linear-gradient(135deg, #1e3d5c 0%, #152d47 100%);
  padding: 52px 0;
}

/* Benefits-Panel: etwas transparenter, heller */
.benefits-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 100%);
  border: 1px solid rgba(255,255,255,.18);
  width: min(760px, 100%);
}


/* ============================================================
   4. ZUL-PROMO / URLAUB-BANNER – leicht heller
   ============================================================ */

.zul-promo {
  background: linear-gradient(135deg, #152d47 0%, #1e3d66 55%, #264e7a 100%);
}

.urlaub-banner {
  background: linear-gradient(135deg, #1a3a62 0%, #112638 100%);
}


/* ============================================================
   5. TRUST-BAR – navy etwas heller, weniger düster
   ============================================================ */

.trust-bar {
  background: #112136;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.trust-label {
  color: #7a90a8;
  font-size: 0.72rem;
}


/* ============================================================
   6. TOPBAR – dezenter, weniger dominant
   ============================================================ */

.topbar {
  background: #0f1e33;
  font-size: 0.74rem;
  padding: 6px 0;
}


/* ============================================================
   7. WHATSAPP-BUTTON – besser ins Design integriert
   Statt knalligem Grün: gedämpft, passend zum Kupfer/Navy-System
   ============================================================ */

.btn-wa {
  background: transparent;
  color: #2a9e56;
  border-color: #2a9e56;
  border-width: 1.5px;
}

.btn-wa:hover {
  background: #2a9e56;
  color: #fff;
  border-color: #2a9e56;
  box-shadow: 0 4px 14px rgba(42, 158, 86, 0.22);
}

/* WhatsApp-Button in Hero: als Ghost-Button auf dunklem Hintergrund */
.hero .btn-wa {
  background: rgba(42, 158, 86, 0.14);
  color: #7ee8a8;
  border-color: rgba(42, 158, 86, 0.45);
}

.hero .btn-wa:hover {
  background: rgba(42, 158, 86, 0.26);
  color: #a7f3ca;
  border-color: rgba(42, 158, 86, 0.65);
}

/* Scheiben-Service WA-Button ebenfalls anpassen */
.btn-wa-scheiben {
  background: #2a9e56;
  border-radius: 8px;
}
.btn-wa-scheiben:hover {
  background: #1e7a42;
}

/* Support-Bereich: WA-Button als primär-ähnlich, aber grün */
.support-actions .btn-wa {
  background: transparent;
  color: #2a9e56;
  border-color: #2a9e56;
}
.support-actions .btn-wa:hover {
  background: #2a9e56;
  color: #fff;
}


/* ============================================================
   8. HERO KONTAKT-BUTTONS – weniger aufdringlich früh im Funnel
   Der WA-Button und E-Mail-Button im Hero sollen dezenter sein.
   ============================================================ */

/* Drei Buttons nebeneinander: etwas kompakter, ruhiger */
.hero__actions {
  gap: 9px;
  max-width: 640px;
}

/* Primär-Button im Hero: etwas kleiner */
.hero .btn-primary {
  padding: 11px 20px;
  font-size: 0.875rem;
}

.hero .btn-outline,
.hero .btn-wa {
  padding: 10px 16px;
  font-size: 0.84rem;
  font-weight: 600;
  min-height: 42px;
}


/* ============================================================
   9. HEADLINE-UMBRÜCHE – Headlines breiter, natürlicher
   ============================================================ */

/* Section-Titles breiter halten, kein unnötiger Umbruch */
.section__title,
.section-title {
  max-width: none;
  hyphens: none;
  overflow-wrap: normal;
  white-space: normal;
}

/* Headline im Hero: kein forcierter Umbruch */
.hero h1 {
  hyphens: none;
  max-width: 700px;
  white-space: normal;
}

/* Page-Hero Headlines: keine Worttrennungen */
.page-hero h1 {
  hyphens: none;
  max-width: none;
  white-space: normal;
}

/* KFZ-Hero: gleich */
.kfz-hero h1 {
  hyphens: none;
  max-width: none;
  white-space: normal;
}

/* Promo-Headlines: kein künstlicher Zeilenbruch */
.zul-promo h2,
.urlaub-text h2,
.cta-block h3,
.benefits-panel h2 {
  hyphens: none;
  white-space: normal;
}


/* ============================================================
   10. TEXTUMBRÜCHE & BREITE – Fließtext besser nutzen
   ============================================================ */

/* Section-Sub-Text: mehr Breite nutzen */
.section-sub {
  max-width: 680px;
  line-height: 1.7;
  hyphens: none;
}

/* Hero-Lead-Text: leicht breiter */
.hero__lead {
  max-width: 640px;
  hyphens: none;
}

/* Fließtext in Promo-Blöcken: breiter */
.zul-promo p,
.urlaub-text p {
  max-width: 580px;
  hyphens: none;
}

/* Why-Cards: kein Wortumbruch bei kurzen Texten */
.why-card p {
  hyphens: none;
  overflow-wrap: break-word;
}

/* Karten-Texte: kein Wortbruch */
.card__text,
.kfz-card p,
.zul-card > p {
  hyphens: none;
}


/* ============================================================
   11. KARTEN-HEIGHTS & LEERRÄUME – harmonischer
   ============================================================ */

/* Why-Grid: gleichmäßige Kartenhöhen */
.why-grid {
  align-items: stretch;
}

.why-card {
  height: 100%;
  box-sizing: border-box;
}

/* KFZ-Card-Grid: gleichmäßige Höhen */
.kfz-card-grid {
  align-items: stretch;
}

.kfz-card {
  height: 100%;
}

/* Zulassung-Cards: gleichmäßige Höhen */
.zul-leistungen-grid {
  align-items: stretch;
}

.zul-card {
  height: 100%;
  box-sizing: border-box;
}

/* Info-Cards: gleichmäßige Höhen */
.info-grid {
  align-items: stretch;
}

.info-card {
  height: 100%;
  box-sizing: border-box;
}

/* USP-Liste: kompaktere Abstände */
.usp-list {
  gap: 8px;
}

/* Why-Grid padding harmonisieren */
.why-card {
  padding: 20px;
}


/* ============================================================
   12. SEKTION-ABSTÄNDE – unnötige Leerräume reduzieren
   ============================================================ */

/* Section-Padding etwas reduzieren für kompakteres Gesamtbild */
.section {
  padding: 56px 0;
}

/* Letzte Sektion vor Footer etwas weniger Abstand */
.section:last-of-type {
  padding-bottom: 48px;
}

/* Trust-Bar kompakter */
.trust-item {
  padding: 18px 14px;
}

/* Quick-Contact Karten harmonisieren */
.quick-contact .info-card {
  padding: 20px 22px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* ============================================================
   13. BILDER – heller, sympathischer
   ============================================================ */

/* Hero-Bild: brightness leicht erhöhen */
.hero__bg img {
  filter: brightness(1.05) saturate(0.95);
}

/* KFZ-Hero-Bild: brightness erhöhen */
.kfz-hero__bg img {
  filter: brightness(1.08) saturate(0.92);
}

/* Karten-Bilder: etwas heller */
.card__img,
.kfz-card img {
  filter: brightness(1.03);
}


/* ============================================================
   14. RESPONSIVE – Verbesserungen für alle Bildschirmgrößen
   ============================================================ */

@media (max-width: 900px) {
  .hero {
    min-height: 50vh;
  }

  .hero__content {
    padding: 48px 16px 60px;
  }

  .section {
    padding: 44px 0;
  }

  /* Headlines auf Tablet: keine Worttrennungen */
  .section__title,
  .hero h1,
  .page-hero h1,
  .kfz-hero h1 {
    hyphens: none;
  }

  /* Section-Sub auf Tablet: volle Breite */
  .section-sub {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 46vh;
  }

  .hero__content {
    padding: 40px 16px 52px;
  }

  .section {
    padding: 36px 0;
  }

  /* Benefits-Panel auf Mobile */
  .benefits-panel {
    padding: clamp(22px, 5vw, 34px);
  }

  /* Why-Card auf Mobile: kompakter */
  .why-card {
    padding: 16px;
  }

  /* Promo-Blöcke auf Mobile: kompakter */
  .zul-promo {
    padding: 32px 20px;
  }

  .urlaub-banner {
    padding: 26px 20px;
  }

  /* Sektions-Titel auf Mobile: keine Worttrennungen */
  h1, h2, h3, h4 {
    hyphens: none;
    overflow-wrap: break-word;
  }

  /* Trust-Bar auf Mobile: kompakter */
  .trust-item {
    padding: 14px 10px;
  }

  /* Hero-Buttons auf Mobile: volle Breite */
  .hero__actions {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Alle Headlines: kein Wortbruch */
  h1, h2, h3 {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* Info-Cards auf Mobilgeräten: untereinander */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* ============================================================
   15. FOOTER – etwas aufhellen
   ============================================================ */

.site-footer {
  background: #0f1e33;
}


/* ============================================================
   16. KONTAKT-SEITE – Page-Hero harmonisieren
   ============================================================ */

/* Kontakt-Hero: heller als Standard */
.kontakt-hero,
.page-hero.kontakt {
  background: linear-gradient(135deg, #132540 0%, #1e3d66 100%);
}
/* Desktop/Laptop: bessere Zeilenumbrüche, mehr Textbreite */
@media (min-width: 1024px) {
  #usps .container > p {
    max-width: 900px !important;
  }

  #usps .why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  #usps .why-card {
    min-height: 170px;
    padding: 24px !important;
  }

  #usps .why-card h4,
  #usps .why-card p {
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
}
@media (min-width: 1200px) {
  .strengths-intro,
  .section-intro,
  .why-us p {
    max-width: 1200px !important;
  }
}
@media (min-width: 1200px) {
  .hero__content {
    max-width: 900px !important;
  }

  .hero__lead,
  .section-sub {
    max-width: 900px !important;
  }
}
@media (max-width: 768px) {
  .hero .hero__badge,
  .hero .hero-badge {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
  }

  .hero .hero__badge span,
  .hero .hero-badge span {
    display: block;
    width: 100%;
    text-align: center;
  }
}