/* ===========================
   BASIS & FARBSCHEMA
   =========================== */
:root {
    --main-color: #8c1d1d;      /* Rotton aus dem Logo */
    --main-color-light: #f7e7e7;
    --text-dark: #333333;
    --text-light: #ffffff;
    --bg-light: #f5f5f5;
    --bg-dark: #1f1f1f;
    --accent-gray: #e1e1e1;
    --max-width: 1100px;
    --radius-lg: 18px;
    --shadow-soft: 0 15px 35px rgba(0, 0, 0, 0.08);
    --transition-fast: 0.2s ease;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    background: #ffffff;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===========================
   HEADER / NAVIGATION
   =========================== */

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e5e5;
}

.nav-container {
    width: 100%;
    padding: 18px 40px;   /* Abstand links & rechts */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #000 !important;
}

.logo img {
    height: 100px; /* bei 1024px PNG völlig ok, kannst 90–130 variieren */
    width: auto;
}

.logo-text {
    font-size: 20px;
    font-weight: 700;
    color: #000;          /* Schwarz */
    text-decoration: none !important;
}

.logo:hover .logo-text {
    text-decoration: none !important;
}

/* Desktop-Navigation */

.nav-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 20px;
    font-weight: 500;
    position: relative;
    padding-bottom: 3px;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--main-color);
    transition: width var(--transition-fast);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Call-to-Action in der Navi (z.B. Kontakt) */

.nav-cta {
    font-weight: 600;
    border: none;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.nav-cta:hover {
    background: var(--main-color);
    color: var(--text-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

/* Mobile Nav (Hamburger) */

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text-dark);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ===========================
   GENERISCHE LAYOUT-KLASSEN
   =========================== */

main {
  padding: 0;
}


.section-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section {
    margin-bottom: 70px;
}

.section-heading {
    font-size: 32px;
    margin-bottom: 14px;
    color: var(--main-color);
}

.section-subheading {
    font-size: 16px;
    color: #777777;
    margin-bottom: 25px;
}

/* Platzhalter-Box für Texte */

.placeholder-box {
    border: 2px dashed var(--accent-gray);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #888888;
    text-align: center;
}

/* ===========================
   HERO MIT UNFALLFOTO (Startseite)
   =========================== */

/* ===========================
   HERO MIT UNFALLFOTO (Startseite)
   =========================== */

.hero-background {
    width: 100%;
    position: relative;

    /* von /css/styles.css eine Ebene hoch in /img */
    background-image:
  linear-gradient(to bottom,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.08) 60%,
    rgba(255,255,255,1) 100%
  ),
  url("../img/111c.jpg");

    background-size: cover;
    background-position: center;

    min-height: 360px;
    padding: 80px 0 90px;
    margin-bottom: 70px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.15),
    rgba(255, 255, 255, 1)
  );
}




/* Weißer Kasten vor dem Bild */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-left: 5%;
    padding: 30px 32px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    color: var(--text-dark);
}

.hero-content h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--main-color);
}

.hero-content p {
    max-width: 650px;
    font-size: 17px;
    color: #333;
    margin-bottom: 22px;
}

/* Gemeinsame Elemente (Badges, Buttons) */

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.badge {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid #dddddd;
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-primary,
.btn-secondary {
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
    background: var(--main-color);
    color: var(--text-light);
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.btn-secondary {
    background: transparent;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.btn-secondary:hover {
    background: var(--main-color);
    color: var(--text-light);
}

/* Falls irgendwo noch .hero verwendet wird, lassen wir ihn neutral */

.hero {
    width: 100%;
    padding: 90px 26px 110px;
    border-radius: 0;
    margin: 0 0 70px 0;

    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
    align-items: center;
}

.hero-text h1 {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 12px;
    color: var(--main-color);
}

.hero-text p {
    font-size: 17px;
    color: #555555;
    margin-bottom: 22px;
}

.hero-info-box {
    background: rgba(255, 255, 255, 0.86);
    border-radius: 22px;
    padding: 20px;
    border: 1px solid #eeeeee;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hero-info-box h3 {
    font-size: 19px;
    margin-bottom: 4px;
    color: var(--text-dark);
}

.hero-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
}

.hero-info-item span {
    display: block;
}

/* Mobile-Anpassungen für den Hero */

@media (max-width: 900px) {
    .hero-background {
        padding: 60px 0 70px;
        min-height: 300px;
        justify-content: center;
    }

    .hero-content {
        margin-left: 0;
        margin: 0 20px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-background {
        padding: 40px 0 60px;
        min-height: 260px;
    }

    .hero-content h1 {
        font-size: 28px;
    }
}

/* Einsatzgebiete auf der Startseite */
.einsatzgebiete-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.einsatzgebiet-pill {
    padding: 10px 12px;
    border-radius: 999px;
    background: #fafafa;
    border: 1px dashed #dddddd;
    font-size: 14px;
    text-align: center;
}

/* ===========================
   KARTEN & GRIDS (Leistungen)
   =========================== */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}

.card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #f0f0f0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    border-color: var(--main-color-light);
}

.card-title {
    font-size: 19px;
    margin-bottom: 8px;
    color: var(--main-color);
}

.card-placeholder {
    margin-top: 14px;
}

/* ===========================
   FAQ
   =========================== */



/* ===========================
   KONTAKT & SOFORTHILFE
   =========================== */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 24px;
    align-items: flex-start;
}

.contact-box {
    border-radius: var(--radius-lg);
    padding: 22px;
    border: 1px solid #e4e4e4;
    box-shadow: var(--shadow-soft);
    background: #ffffff;
}

.contact-form label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #d0d0d0;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 1px rgba(140, 29, 29, 0.14);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.soforthilfe-box {
    background: radial-gradient(circle at top left, var(--main-color), #4b0f0f);
    color: var(--text-light);
}

/* ===========================
   FOOTER
   =========================== */

footer {
    background: #111;
    color: #ccc;
    padding: 15px 20px;
    width: 100%;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 13px;
}

.footer-logo img {
    height: 60px;
    width: auto;
    margin-bottom: 8px;
}

.footer-middle a,
.footer-right a {
    color: #ccc;
}

.footer-middle h4,
.footer-right h4 {
    font-size: 14px;
    margin-bottom: 8px;
}

/* kleine Fußzeile (© + Links), wenn nur diese verwendet wird */
.footer-links a {
    color: #ccc;
    margin-left: 12px;
}

@media (max-width: 800px) {
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-links a {
        margin-left: 6px;
        margin-right: 6px;
    }
}

/* ===========================
   ANIMATIONEN (Scroll-Reveal)
   =========================== */

.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */

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

    .hero-info-box {
        order: -1;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        inset: 60px 12px auto 12px;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
        padding: 16px 18px;
        flex-direction: column;
        align-items: stretch;
        display: none;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-cta {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .nav-toggle {
        display: flex;
    }

    .hero {
        margin-top: 20px;
    }

    .hero-background {
        padding: 40px 0 60px;
        min-height: 280px;
    }

    .hero-content h1 {
        font-size: 28px;
    }
}

@media (max-width: 520px) {
    .section-heading {
        font-size: 26px;
    }

    .nav-container {
        padding-inline: 14px;
    }
}

/* =========================================
   KONTAKTSEITE – Layout wie Referenzbild
   ========================================= */

.contact-page {
    max-width: var(--max-width);
    margin: 0 auto;
}

.contact-intro {
    margin-bottom: 30px;
    max-width: 800px;
}

.contact-intro h2 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.contact-intro p + p {
    margin-top: 6px;
}

/* Formular-Layout */

.contact-form-grid {
    margin-top: 20px;
}

.contact-form-grid .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 16px;
}

.contact-form-grid .form-row.full {
    grid-template-columns: 1fr;
}

.contact-form-grid .form-field label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 600;
}

.contact-form-grid input,
.contact-form-grid textarea {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    padding: 8px 10px;
    font-size: 14px;
}

.contact-form-grid textarea {
    min-height: 140px;
    resize: vertical;
}

/* Checkbox-Zeile */

.checkbox-row {
    margin-top: 4px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
}

/* Senden-Button rechtsbündig */

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Feste Kontaktdaten unter dem Formular */

.contact-fixed-info {
    margin-top: 40px;
    font-size: 14px;
}

.contact-fixed-info h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

/* Mobile-Anpassung */

@media (max-width: 700px) {
    .contact-form-grid .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   HEADER HOTLINE BOX (C&T Style)
   =============================== */

.header-hotline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hotline-box {
    background: var(--main-color);
    color: #272424;
    padding: 8px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-size: 14px;
}

.hotline-icon {
    font-size: 30px;
}

.hotline-text strong {
    font-size: 14px;
}

.hotline-icon-btn{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* WhatsApp-Button grün */
.whatsapp-btn {
  background: transparent;
  border: none;
  padding: 0;
}


/* Mobile: Hotline oben ausblenden, wenn zu eng */
@media (max-width: 900px) {
    .header-hotline {
        display: none;
    }
}

/* Einsatzgebiet-Band */

/* Einsatzgebiet-Band mit Bild links, Text rechts */

.full-width-band {
    background: #f2f2f2; /* hellgrauer Balken */
    padding: 40px 0;
}

.einsatzgebiet-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 32px;
    align-items: center;
}

.einsatzgebiet-image {
    flex: 1 1 45%;
}

.einsatzgebiet-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    display: block;
}

.einsatzgebiet-text {
    flex: 1 1 55%;
}

.einsatzgebiet-text p {
    margin-bottom: 10px;
}

/* Mobil: Bild oben, Text unten untereinander */
@media (max-width: 900px) {
    .einsatzgebiet-layout {
        flex-direction: column;
        text-align: left;
    }

    .einsatzgebiet-text {
        width: 100%;
    }
}


/* ===========================
   ABLAUF-SECTION (3 SCHRITTE)
   =========================== */

.ablauf-section {
    background: #f2f2f2;
    padding: 60px 0;
}

.ablauf-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.ablauf-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
}

/* Hotline-Button */
.ablauf-hotline {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.ablauf-hotline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #ffd800;
    color: #111;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.ablauf-hotline-btn:hover {
    filter: brightness(0.95);
}

.ablauf-hotline-icon {
    font-size: 18px;
}

/* Schritte */
.ablauf-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: flex-start;
    margin-top: 10px;
}

/* Linie hinter den Steps – in Rot */
.ablauf-steps::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--main-color);
    z-index: 0;
}

/* Step Nummer – Rot */
.step-number {
    background: var(--main-color);
    color: #ffffff;
    width: 46px;
    height: 46px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    margin: 0 auto 18px;
    position: relative;
    z-index: 1;
}

.ablauf-step h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ablauf-step p {
    font-size: 14px;
    line-height: 1.6;
}

/* Mobile ohne Linie */
@media (max-width: 900px) {
    .ablauf-steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ablauf-steps::before {
        display: none;
    }
}

/* ===========================
   LEISTUNGEN – Zentrierte Blöcke
   =========================== */

.leistung-section {
    max-width: 1200px;
    margin: 0 auto 80px;
    text-align: center;
}

.leistung-section p {
    max-width: 1000px;
    margin: 0 auto 16px;
}

.leistung-section .btn-primary {
    margin-top: 10px;
    display: inline-block;
}

/* Liste bei Flotten/B2B linksbündig, aber mittig im Block */
.leistung-section ul {
    max-width: 760px;
    margin: 0 auto 16px;
    text-align: left;
}



.hotline-number {
  font-weight: 700;   /* sehr dick */
}



.footer-links {
  order: -1;
}

.footer-inner {
  justify-content: flex-start; /* alles links */
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 16px; /* Abstand zwischen Text & Links */
}

footer a {
  color: #ccc;
  text-decoration: none;
}

.footer-inner {
  margin-left: 0;
  justify-content: flex-start;
}
footer a {
  text-decoration: underline;
}



.footer-left {
  display: flex;
  flex-direction: column;   /* ⬅️ DAS macht Logo über Text */
  align-items: flex-start;  /* alles links */
  gap: 10px;
}

.footer-text {
  display: flex;
  gap: 16px;                /* Abstand zwischen Text & Links */
  align-items: center;
}

.footer-logo {
  height: 70px;             /* Logo-Größe */
  width: auto;
}



.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* ⬅️ wichtig: unten ausrichten */
}

/* linker Bereich (hast du schon, nur zur Sicherheit) */
.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}


.footer-inner {
  max-width: none;
  margin: 0;
}

.footer-right a {
  text-decoration: underline;
}


.footer-right {
  margin-left: auto;      /* ganz nach rechts */
  display: flex;
  flex-direction: row;    /* ⬅️ NEBENEINANDER */
  align-items: flex-end;    /* vertikal ausrichten */
  gap: 20px;              /* Abstand Links ↔ Logo */
}


.footer-right-links {
  display: flex;        /* nebeneinander */
  gap: 20px;            /* Abstand zwischen Über uns & Kontakt */
}

.footer-exali-img {
  width: 80px;
  height: auto;
}


.page-header {
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.page-header h1 {
    background: rgba(0,0,0,0.5);
    padding: 15px 30px;
    border-radius: 6px;
    font-size: 40px;
}

/* SPEZIELL NUR FÜR LEISTUNGEN */
.leistungen-header {
  background-image: url("../img/Leistung.jpg");
}

/* SPEZIELL NUR FÜR ÜBER UNS */
.ueber-uns-header {
  background-image: url("../img/Interior.jpg");
}


.b2b-services {
  text-align: left;
}

.b2b-services{
  text-align: left;
}

.b2b-services .b2b-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px; /* DAS ist der Schlüssel */
}

/* Alle Inhalte exakt gleich ausrichten */
.b2b-services h2,
.b2b-services h3,
.b2b-services p,
.b2b-services ul {
  margin-left: 0;
  text-align: left;
}

/* Gesamtbereich */
.b2b-section{
  padding: 70px 0;
}

/* Container: zentriert, 2 Spalten */
.b2b-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 60px;
  align-items: start;
}

/* Bild links */
.b2b-left img{
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  border-radius: 6px;     /* viel weniger rund wie bei dir */
  display: block;
}

/* Text rechts */
.b2b-right h2{
  margin: 0 0 18px 0;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
}

.b2b-right p{
  margin: 0 0 16px 0;
  line-height: 1.7;
}

/* Liste mit Icon links (statt Bulletpoints) */
.b2b-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 24px 0;
}

.b2b-list li{
  position: relative;
  padding-left: 34px;
  margin: 12px 0;
  line-height: 1.6;
}

/* kleines "Zahnrad/Service" Icon */
.b2b-list li::before{
  content: "⚙";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  line-height: 1.2;
}

/* Button */
.b2b-btn{
  display: inline-block;
  padding: 12px 18px;
  background: #8b1f1f; /* dein Rot */
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
}

/* Mobil: untereinander */
@media (max-width: 950px){
  .b2b-wrap{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .b2b-left img{
    max-height: 340px;
  }

  .b2b-right h2{
    font-size: 34px;
  }
}

.b2b-list li::before{
  color: #8b1f1f;   /* dein Rot */
}

.b2b-right h2{
  letter-spacing: -0.5px;
}
.b2b-right h2{
  color: #8b1f1f; /* dein Rot */
}



/* ===== EDLES ACCORDION DESIGN ===== */

.leistungen-accordion{
  width: 100%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0;
}

/* Einzelner Punkt */
.leistungen-accordion .accordion-item{
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 14px;
  background: #fff;
  overflow: hidden;
}

/* Titelzeile */
.leistungen-accordion summary{
  padding: 18px 28px 18px 22px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
}

/* Standard-Dreieck links ENTFERNEN */
.leistungen-accordion summary::-webkit-details-marker{
  display: none;
}

/* Pfeil rechts */
.leistungen-accordion summary::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #8b1f1f;
  border-bottom: 2px solid #8b1f1f;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.2s ease;
}

/* geöffnet = Pfeil nach oben */
.leistungen-accordion details[open] summary::after{
  transform: translateY(-50%) rotate(-135deg);
}

/* Hover */
.leistungen-accordion summary:hover{
  background: #fafafa;
}

/* Inhalt */
.leistungen-accordion .accordion-content{
  padding: 0 22px 18px 22px;
  border-top: 1px solid #f1f1f1;
}

.leistungen-accordion .accordion-content p{
  margin: 10px 0;
  line-height: 1.6;
}


/* ===== ECHTER SLIDE-DOWN für DETAILS ===== */
details.accordion-item .accordion-content{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .8s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}

details.accordion-item[open] .accordion-content{
  opacity: 1;
}


.section-subheading {
  font-size: 1rem;
}

.section-subheading .highlight {
  font-size: 1.4em;
  font-weight: 700;
  display: block; /* sorgt für Zeilenumbruch */
  margin-bottom: 0;
}

.section-subheading {
  color: #000;
}


.sub-title {
  color: #000;
  margin: 0.4rem 0 0.3rem;
}

.highlight-red {
  color: #8b1f1f;
  font-weight: 700;
}

.section-subheading {
  color: #070707;
  margin: 0;
}





/* =========================
   ÜBER UNS – INTRO BEREICH
   ========================= */

.ueber-uns-intro {
  margin-top: 40px;
  margin-bottom: 60px;
}

.ueber-uns-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

/* Text links */
.ueber-uns-text h2 {
  font-size: 36px;
  font-weight: 800;
  color: var(--main-color);
  margin-bottom: 10px;
}

.person-title {
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}

/* Bild rechts */
.ueber-uns-image img {
  width: 100%;
  max-width: 200px;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}

/* Mobil */
@media (max-width: 900px) {
  .ueber-uns-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ueber-uns-image img {
    max-width: 100%;
  }
}


/* ===== TEAM / ÜBER UNS ===== */

.team-member {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;

  display: flex;
  gap: 50px;
  align-items: flex-start;
}

/* Standard: Bild rechts (wie bei dir) */
.team-image {
  flex: 0 0 340px;
}

.team-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  object-fit: cover;
}

/* Text */
.team-content {
  flex: 1;
}

.team-content h2 {
  font-size: 30px;
  color: var(--main-color);
  margin-bottom: 6px;
}

.team-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #222;
}

.team-content p {
  margin-bottom: 14px;
  line-height: 1.7;
}

.team-content .focus {
  margin-top: 10px;
}

/* ===== GESPIEGELT: Bild links, Text rechts ===== */

.team-member {
  display: flex;
}

.team-member.reverse {
  display: flex;
  flex-direction: row-reverse;
}



/* Mobile */
@media (max-width: 900px) {
  .team-member,
  .team-member.reverse {
    flex-direction: column;
    gap: 24px;
  }

  .team-image {
    width: 100%;
    max-width: 340px;
  }
}


/* ===== TEAM BLOCK (Über uns) ===== */
.team-member{
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;

  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* Standard: Text links, Bild rechts (wenn du es so willst) */
.team-member .team-image{
  flex: 0 0 200px;   /* Bild-Spalte */
}
.team-member .team-image img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  display: block;
}

.team-member .team-content{
  flex: 1;           /* Text-Spalte */
}

/* REVERSE: Bild links, Text rechts */
.team-member.reverse{
  flex-direction: row;              /* Bild links */
}

/* Wenn du bei dir Bild rechts willst (Thien), dann nimm:
   - bei Thien: kein reverse und pack Bild NACH Text
   - beim Partner: reverse + Bild VOR Text
*/

/* Mobile: untereinander */
@media (max-width: 900px){
  .team-member,
  .team-member.reverse{
    flex-direction: column;
  }
  .team-member .team-image{
    flex: 0 0 auto;
    max-width: 360px;
  }
}


/* ================================
   TEAM – Überschriften angleichen
   ================================ */

/* Thien Cam dünner machen */
.person-name {
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}

/* Bugra Tamer explizit gleich setzen */
.team-content h2 {
  font-weight: 600;
  letter-spacing: -0.3px;
}



.section-wrapper {
  text-align: left;
}






/* ===== Rechtliches (Impressum/Datenschutz) immer links ===== */
.legal-content,
.legal-content *{
  text-align: left !important;
}

/* Datenschutzerklärung – Überschrift links ausrichten */
#datenschutz .section-heading{
  text-align: left !important;
}


/* Startseite: letzten Abschnitt wieder links */
body:has(.hero-background) main > .section-wrapper:last-of-type{
  text-align: left !important;
}


/* Kontaktseite immer links */
.contact-page,
.contact-page * {
  text-align: left !important;
}

/* FAQ-Seite: alles links ausrichten */
.faq-item,
.faq-item * {
  text-align: left !important;
}

/* Überschrift + Untertitel links */
.section-heading,
.section-subheading {
  text-align: left;
}


/* ===== ÜBER UNS – CTA „Was können wir für Sie tun?“ ===== */
.ueber-uns-header ~ .section-wrapper:last-of-type {
  text-align: center;
}



/* ÜBER UNS – nur der CTA-Block mittig */
.cta-ueber-uns{
  text-align: center !important;
}

.cta-ueber-uns .section-heading,
.cta-ueber-uns .section-subheading{
  text-align: center !important;
}

/* Falls Button/Link nicht mittig ist */
.cta-ueber-uns a,
.cta-ueber-uns .btn-primary,
.cta-ueber-uns .btn-secondary{
  margin-left: auto;
  margin-right: auto;
}



/* ===========================
   FAQ HEADER (Bild oben)
   =========================== */

.faq-header{
  background-image: url("../img/777.jpg"); /* Bildpfad anpassen */
}







/* ===========================
   FAQ – SLIDE ACCORDION (DIVs)
   =========================== */

.faq-item{
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.faq-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  border-color: rgba(140, 29, 29, .25);
}

.faq-question{
  margin: 0;
  padding: 12px 56px 12px 20px; /* oben/unten gleich */
  display: flex !important;
  align-items: center !important;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  position: relative;
  user-select: none;
  line-height: 1.25;
}

/* Chevron rechts */
.faq-question::after{
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--main-color);
  border-bottom: 2px solid var(--main-color);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .18s ease;
}

.faq-item.open .faq-question{
  color: var(--main-color);
}

.faq-item.open .faq-question::after{
  transform: translateY(-50%) rotate(-135deg);
}

/* Antwort: smooth ohne max-height (ohne extra HTML-Wrapper) */
.faq-answer{
  overflow: hidden;

  opacity: 0;
  transform: translateY(-6px);
  padding: 0 22px;
  border-top: 1px solid #f2f2f2;

  /* "zu" Zustand */
  max-height: 0;

  /* animieren */
  transition: max-height .5s cubic-bezier(.4,0,.2,1), opacity .5s ease, transform .5s ease;

  will-change: max-height;

  font-size: 15.5px;
  line-height: 1.7;
  color: #2b2b2b;
}

/* offen */
.faq-item.open .faq-answer{
  opacity: 1;
  transform: translateY(0);
  padding: 12px 22px 18px 22px;

  /* groß genug, damit nichts abgeschnitten wird */
  max-height: 2000px;
}


/* =========================
   DANKE-SEITE ZENTRIERUNG
   ========================= */

.thanks-wrapper {
  min-height: calc(100vh - 120px); /* Header-Footer ausgleichen */
  display: flex;
  align-items: center;    /* vertikal */
  justify-content: center;/* horizontal */
  padding: 40px 20px;
}

.thanks-box {
  text-align: center;
  max-width: 600px;
}

.thanks-actions {
  margin-top: 30px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* DANKE-SEITE: Überschrift & Text zentrieren */
.thanks-box .section-heading,
.thanks-box .section-subheading {
  text-align: center;
}


/* =========================
   DANKE-SEITE – Hintergrund + Zentrierung
   ========================= */
.thanks-wrapper{
  min-height: 100vh;                 /* volle Höhe */
  display: flex;
  align-items: center;               /* vertikal mittig */
  justify-content: center;           /* horizontal mittig */

  background-image: url("../img/20.png"); /* <- Bildpfad */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 40px 20px;                /* Abstand am Rand (mobile) */
}

/* Inhalt (weißer Kasten) */
.thanks-box{
  background: rgba(255, 252, 252, 0.8);
  padding: 50px 60px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  max-width: 760px;
  width: 100%;
}

/* Buttons mittig */
.thanks-actions{
  margin-top: 28px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile: Box etwas kleiner */
@media (max-width: 600px){
  .thanks-box{
    padding: 30px 22px;
    border-radius: 18px;
  }
}

/* DANKE-SEITE: nur Text weiß, Überschrift bleibt rot */
.thanks-box .section-subheading,
.thanks-box p {
  color: #242424 !important;
}


.page-header {
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Kontakt Headerbild ===== */


.page-header{
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kontakt-header{
  background-image: url("../img/12.jpg");
}
.unfallschaden-header{
  background-image: url("../img/Baustein1.jpg");
}
.fahrzeugbewertung-header{
  background-image: url("../img/Baustein4\ -\ Kopie.jpg");
}
.kurzgutachten-header{
  background-image: url("../img/Baustein2\ -\ Kopie.jpg");
}
.reparaturpruefung-header{
  background-image: url("../img/Baustein6.jpg"); /* oder dein Wunschbild */
}
.rekonstruktion-header{
  background-image: url("../img/Baustein5\ -\ Kopie.jpg"); /* oder dein Wunschbild */
}
.flotte-b2b-header{
  background-image: url("../img/Baustein3.jpg"); /* oder dein Wunschbild */
}



@media (max-width: 768px){
  .page-header{ height: 180px; }
}



.card{
  border-radius: 16px;
  overflow: hidden;
}

.card-media{
  height: 140px;
  overflow: hidden;
}

.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}





/* ===== WHY SECTION (Warum C&T) ===== */
.why .section-heading {
  margin-bottom: 14px;
}

.why-intro {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 5px solid #8b1e1e; /* eure Rotfarbe */
  border-radius: 16px;
  padding: 16px 18px;
  line-height: 1.7;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.why-intro p {
  margin: 0 0 8px 0;
}

.why-intro-meta {
  margin: 0;
  opacity: 0.9;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
@media (max-width: 700px){

  .why-grid{
    grid-template-columns: 1fr;
  }

}

.why-card {
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}


.why-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.why-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(139, 30, 30, 0.08);
  font-size: 18px;
}

.why-card h3 {
  font-size: 16px;
  margin: 0;
  font-weight: 800;
}

.why-card ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}

.why-card li {
  margin: 6px 0;
}

.why-cta {
  margin-top: 18px;
}

/* Mobile */
@media (max-width: 820px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .why-intro {
    padding: 14px 14px;
  }
}


.why {
  background: linear-gradient(180deg, rgba(139,30,30,0.04), rgba(0,0,0,0));
  border-radius: 24px;
  padding: 28px 22px;
}


.why-meta {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(139,30,30,0.06);
  border: 1px solid rgba(139,30,30,0.10);
  font-weight: 600;
  font-size: 14px;
}


.why-card {
  position: relative;
  overflow: hidden;
}

.why-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 100%;
  background: rgba(139,30,30,0.55);
}

/* PREMIUM CARDS */
.why-card{
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  position: relative;
}

.why-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background: linear-gradient(
    90deg,
    rgba(139,30,30,0.8),
    rgba(139,30,30,0.2)
  );
}
.why-card ul{
  list-style:none;
  padding-left:0;
}

.why-card li{
  position:relative;
  padding-left:22px;
  margin:10px 0;
  line-height:1.6;
}

.why-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-weight:800;
  color:rgba(139,30,30,0.85);
}
.why-intro{
  background: rgba(255,255,255,0.9);
  border-left:6px solid rgba(139,30,30,0.9);
  box-shadow:0 20px 45px rgba(0,0,0,0.08);
  line-height:1.8;
}
.why .btn-primary{
  box-shadow:0 14px 34px rgba(139,30,30,0.25);
  transition:all .2s ease;
}

.why .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(139,30,30,0.35);
}


/* ===== Google Reviews ===== */
.reviews-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.reviews-stars{
  color:#8b1e1e;
  font-size:20px;
  letter-spacing:2px;
}

/* === Reviews Grid (Kästchen nebeneinander) === */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

/* Review Karte */
.review-card {
  background: #ececec;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

/* Sterne */
.review-stars {
  color: #f4b400;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

/* Text */
.review-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 16px;
}

/* Name */
.review-author {
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}



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

/* Google Reviews – Sterne gelb */
.reviews-stars,
.review-stars-small {
  color: #f4b400; /* Google-Gelb */
}



/* Alle Bewertungssterne GELB erzwingen */
.reviews-stars,
.review-stars-small,
.review-card strong,
.review-card span,
.review-card i {
  color: #f4b400 !important; /* Google-Gelb */
}


/* ===== Footer Kontakt (wie Beispiel) ===== */
.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  font-size: 14px;
}

.footer-line{
  color:#cfcfcf;
  opacity:.9;
}

.footer-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#e7e7e7;
  text-decoration:none;
}

.footer-item:hover{
  opacity:.95;
}

.footer-ico{
  width:22px;
  display:inline-flex;
  justify-content:center;
  margin-top:2px;
  opacity:.95;
}

.footer-social{
  display:flex;
  gap:12px;
  margin-top: 10px;
}

.social-btn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  background: rgba(255,255,255,0.06);
  transition: transform .15s ease, background .15s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.10);
}

.footer-legal{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 12px;
  font-size: 13px;
  color:#cfcfcf;
}

.footer-legal a{
  color:#cfcfcf;
  text-decoration: underline;
}








.social-btn{
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
}

.social-btn:hover{
  background: rgba(255,255,255,0.10);
}


/* ===== FOOTER ICONS (Premium) ===== */

.footer-contacts{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}

.footer-contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#eaeaea;
  text-decoration:none;
  font-size:14.5px;
  line-height:1.4;
}

.footer-contact-item i{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#ffffff;
  font-size:14px;
}

.footer-contact-item:hover{
  opacity:0.95;
}

/* Social Buttons */
.footer-social{
  display:flex;
  gap:12px;
  margin-top:18px;
}

.social-btn{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.06);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.social-btn i{
  font-size:20px;
}

.social-btn:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.35);
}

/* kleine Farbakzente wie im Beispiel */
.social-btn.whatsapp{
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.35);
}
.social-btn.whatsapp:hover{
  background: rgba(37, 211, 102, 0.22);
}

.social-btn.instagram{
  background: rgba(225, 48, 108, 0.14);
  border-color: rgba(225, 48, 108, 0.30);
}
.social-btn.instagram:hover{
  background: rgba(225, 48, 108, 0.22);
}

.social-btn.mail{
  background: rgba(255,255,255,0.10);
}

/* Footer: 3 Spalten */
.footer-inner{
  display:grid !important;
  grid-template-columns: 1.2fr 0.8fr 0.6fr;
  gap: 40px;
  align-items:start;
}

.footer-mid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  color:#e7e7e7;
  margin-top: 10px;
}

.footer-mid-title{
  font-weight: 800;
  color:#ffffff;
  margin-bottom: 6px;
}

.footer-mid a{
  color:#cfcfcf;
  text-decoration: none;
  opacity: .95;
}

.footer-mid a:hover{
  text-decoration: underline;
}

@media (max-width: 900px){
  .footer-inner{
    grid-template-columns: 1fr !important;
  }
}

/* Footer: mittlere + rechte Spalte nach unten schieben */
.footer-right {
  margin-top: auto;
}


.footer-mid {
  transform: none !important;
}




/* ===== Einsatzgebiet: Premium Look ===== */
.einsatzgebiet-premium{
  background: rgba(230, 227, 227, 0.7);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.einsatzgebiet-premium .einsatzgebiet-image img{
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.einsatzgebiet-premium .section-heading{
  margin-bottom: 12px;
}

.einsatzgebiet-premium .einsatzgebiet-text p{
  color: rgba(156, 153, 153, 0.92); /* falls dunkler band-hintergrund */
}

/* Wenn dein Band hell ist, dann stattdessen: */
.full-width-band .einsatzgebiet-premium .einsatzgebiet-text p{
  color: #202020;
}

/* Listen schöner: fett links, ruhiger Text */
.einsatzgebiet-premium strong{
  color: var(--main-color);
}

.einsatzgebiet-premium p{
  line-height: 1.7;
}

/* Mehr Abstand zwischen den Regionen */
.einsatzgebiet-premium p strong{
  display: inline-block;
  margin-top: 10px;
}

/* Mobile: Padding kleiner */
@media (max-width: 900px){
  .einsatzgebiet-premium{
    padding: 18px;
    border-radius: 18px;
  }
}

.region-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.region-list li{
  background: rgba(237, 1, 1, 0.04);
  border: 1px solid rgba(140,29,29,0.10);
  border-radius: 14px;
  padding: 12px 14px;
  line-height: 1.6;
}

.einsatzgebiet-image img {
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.einsatzgebiet-layout {
  gap: 50px;
}

.einsatzgebiet-text {
  padding-left: 20px;
  border-left: 1px solid rgba(0,0,0,0.06);
}

/* ===== PREMIUM NAV (Desktop) ===== */
.nav-links{
  gap: 26px;                     /* mehr Luft */
}

.nav-links a{
  font-size: 17px;               /* etwas kleiner = edler */
  font-weight: 600;              /* hochwertiger */
  letter-spacing: 0.2px;
  padding: 10px 14px;            /* Klickfläche */
  border-radius: 999px;          /* Pill */
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-links a::after{
  display:none;                  /* dünne Linie weg */
}

/* Hover */
.nav-links a:hover{
  background: rgba(140,29,29,0.08);
  color: var(--main-color);
  transform: translateY(-1px);
}

/* Active (Startseite) */
.nav-links a.active{
  background: rgba(140,29,29,0.12);
  color: var(--main-color);
}

/* ===== HEADER LOOK etwas "Luxury" ===== */
header{
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}


nav{
  flex: 1;
  display: flex;
  justify-content: center;
}


/* ===== LUXURY LOOK: WHY SECTION ===== */
.why{
  background: radial-gradient(circle at 10% 0%, rgba(140,29,29,0.06), rgba(255,255,255,0) 55%),
              radial-gradient(circle at 90% 30%, rgba(0,0,0,0.03), rgba(255,255,255,0) 55%);
  border-radius: 28px;
  padding: 34px 28px;
}

/* Titel etwas edler */
.why .section-heading{
  letter-spacing: -0.4px;
  font-weight: 800;
}

/* Intro-Box: weniger „Kasten“, mehr „Statement“ */
.why-intro{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.05);
  border-left: 6px solid rgba(140,29,29,0.85);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.10);
}

/* Cards: Rahmen fast unsichtbar, weichere Schatten */
.why-card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* obere Linie: dünner & subtiler */
.why-card::before{
  height: 2px;
  background: linear-gradient(90deg, rgba(140,29,29,0.70), rgba(140,29,29,0.10));
}

/* Hover: minimal, „teuer“ */
.why-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.12);
}

/* Überschriften in Cards etwas größer */
.why-card h3{
  font-size: 17px;
  letter-spacing: -0.2px;
}

/* Checkmarks: kleiner & eleganter */
.why-card li::before{
  font-size: 14px;
  color: rgba(140,29,29,0.80);
}

/* Button: etwas mehr Präsenz */
.why .btn-primary{
  padding: 12px 20px;
  box-shadow: 0 18px 46px rgba(140,29,29,0.28);
}









/* ===== LUXURY LOOK: Leistungen Cards ===== */

/* Grid etwas luftiger */
.card-grid{
  gap: 26px;
}

/* Card Premium */
.card{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.05);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Hover: „teuer“ */
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.12);
}

/* Bildbereich wie „Premium Tile“ */
.card-media{
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  margin-bottom: 10px;
}

/* Bild: leicht „cinematic“ */
.card-media img{
  transform: scale(1.02);
  transition: transform .35s ease;
}

.card:hover .card-media img{
  transform: scale(1.06);
}

/* Titel: etwas edler */
.card-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

/* Text: ruhiger */
.card p{
  color: rgba(0,0,0,0.75);
  line-height: 1.65;
}

/* Optional: alle Karten gleiche Höhe (wirkt hochwertig) */
.card{
  display: flex;
  flex-direction: column;
}
.card p{
  margin-top: auto;
}

.card-title{
  margin-bottom: 6px;   /* vorher ca. 10–12px */
}

.card p{
  margin-top: 6px;      /* vorher auto / groß */
  line-height: 1.55;    /* etwas dichter */
}







/* ===== LUXURY LOOK: Ablauf / 3 Schritte ===== */
.ablauf-section{
  background: radial-gradient(circle at 20% 0%, rgba(140,29,29,0.05), rgba(255,255,255,0) 55%),
              radial-gradient(circle at 90% 30%, rgba(0,0,0,0.03), rgba(255,255,255,0) 55%);
  padding: 80px 0;
}

.ablauf-inner{
  max-width: 1100px;
}

/* Überschrift edler */
.ablauf-heading{
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 18px;
}

/* Hotline Button: premium statt „gelb-blockig“ */
.ablauf-hotline-btn{
  background: rgba(255, 216, 0, 0.12);
  border: 1px solid #fbd606d6;
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

.ablauf-hotline-btn:hover{
  filter: none;
  background: rgba(255, 217, 0, 0.515);
  transform: translateY(-2px);
}

/* Timeline Linie subtiler */
.ablauf-steps::before{
  height: 1px;
  background: linear-gradient(90deg, rgba(140,29,29,0.15), rgba(140,29,29,0.55), rgba(140,29,29,0.15));
}

/* Jede Step als Card */
.ablauf-step{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 22px;
  padding: 22px 18px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ablauf-step:hover{
  transform: translateY(-3px);
  box-shadow: 0 34px 90px rgba(0,0,0,0.12);
}

/* Nummern: edler Badge */
.step-number{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(140,29,29,1), rgba(90,15,15,1));
  box-shadow: 0 18px 40px rgba(140,29,29,0.25);
}

/* Step Titel + Text */
.ablauf-step h3{
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.ablauf-step p{
  margin-top: 10px;
  color: rgba(0,0,0,0.75);
  line-height: 1.7;
  font-size: 14.5px;
}

/* Mobile: Cards bleiben schön */
@media (max-width: 900px){
  .ablauf-section{ padding: 60px 0; }
  .ablauf-step{ padding: 18px 16px; }
}






/* ===== PREMIUM HOTLINE BUTTON (GOLD) ===== */
.hotline-box{
  background: linear-gradient(180deg,#ffe58a 0%,#ffd24d 45%,#e6b800 100%);
  color: #3b2a00;
  border-radius: 999px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c8a0288c;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
  font-weight: 700;
  transition: all 0.18s ease;
}

.hotline-box:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
  filter: brightness(1.04);
}

.hotline-box .hotline-icon{
  color: #6b4b00;
  font-size: 20px;
}

.hotline-number{
  font-weight: 800;
}

/* ===== HERO CARD – PREMIUM / LUXURY ===== */
.hero-content{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,248,246,0.96));
  border-radius: 28px;
  padding: 34px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
}


/* HERO LUXUS – erzwingen */
.hero-background .hero-content{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,248,246,0.96)) !important;
  border-radius: 28px !important;
  padding: 34px 36px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

.hero-background .hero-content h1{
  font-size: 34px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: #7a1414 !important;
}





/* =========================
   PREMIUM ACCORDION LOOK
   ========================= */

:root{
  --lux-bg: #ffffff;
  --lux-surface: #fbfbfc;
  --lux-border: rgba(15, 23, 42, 0.10);
  --lux-border-strong: rgba(15, 23, 42, 0.14);
  --lux-text: #0f172a;        /* edles Dunkel */
  --lux-muted: rgba(15,23,42,.68);
  --lux-muted-2: rgba(15,23,42,.55);

  /* Champagner/Gold Akzent */
  --lux-accent: #b08a3a;
  --lux-accent-2: #d9bf7a;

  --lux-shadow: 0 18px 40px rgba(2, 6, 23, .06);
  --lux-shadow-2: 0 10px 22px rgba(2, 6, 23, .06);
  --lux-radius: 18px;
}

/* Container */
.leistungen-accordion{
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 18px 40px;
}

/* DETAILS Card */
.leistungen-accordion .accordion-item{
  background: linear-gradient(180deg, var(--lux-bg), var(--lux-surface));
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius);
  box-shadow: var(--lux-shadow-2);
  margin: 16px 0;
  overflow: hidden;
  position: relative;
}

/* Premium "Glow" beim Hover */
.leistungen-accordion .accordion-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--lux-radius);
  background: radial-gradient(900px 120px at 20% 0%,
    rgba(176, 138, 58, .18),
    transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.leistungen-accordion .accordion-item:hover::before{ opacity: 1; }

/* Summary Layout */
.accordion-summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  /* premium spacing */
  min-height: 76px;
}

.accordion-summary::-webkit-details-marker{ display:none; }

/* Linke Seite (Icon + Text) */
.sum-left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.sum-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* edles Icon-Feld */
  background: linear-gradient(145deg, rgba(176,138,58,.12), rgba(176,138,58,.03));
  border: 1px solid rgba(176,138,58,.22);
  box-shadow: 0 10px 20px rgba(176,138,58,.08);
  flex: 0 0 44px;
}

.sum-icon i{
  font-size: 18px;
  color: var(--lux-accent);
}

.sum-text{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}

.sum-title{
  font-size: 18px;
  font-weight: 700;
  color: var(--lux-text);
  letter-spacing: .2px;
  line-height: 1.15;
}

.sum-sub{
  font-size: 13.5px;
  color: var(--lux-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rechte Seite (Badges + Pfeil) */
.sum-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Premium Badges (weniger “Chip”, mehr “Label”) */
.badge{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(176,138,58,.35);
  background: rgba(176,138,58,.10);
  color: rgba(15,23,42,.85);
  font-weight: 700;
}

.badge-light{
  border-color: rgba(15,23,42,.16);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.78);
}

/* Chevron: clean & premium */
.chev{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--lux-border);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 20px rgba(2,6,23,.05);
  transition: transform .25s ease, border-color .25s ease;
}

.chev i{
  font-size: 14px;
  color: rgba(15,23,42,.72);
}

/* Rotate Chevron when open */
.accordion-item[open] .chev{
  transform: rotate(180deg);
  border-color: rgba(176,138,58,.35);
}

/* Inhalt / Animation (du hast JS max-height) */
.accordion-content{
  padding: 0 18px 18px;
  border-top: 1px solid rgba(15,23,42,.06);
}

/* Grid im Content */
.acc-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 16px;
}

/* Cards im Content */
.acc-card{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 14px 34px rgba(2,6,23,.05);
}

.acc-card h4{
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.80);
  display:flex;
  align-items:center;
  gap: 8px;
}

.acc-card h4 i{
  color: var(--lux-accent);
  font-size: 14px;
}

.acc-card p{
  margin: 0;
  color: var(--lux-muted);
  line-height: 1.55;
  font-size: 14.5px;
}

.acc-card ul{
  margin: 0;
  padding-left: 18px;
  color: var(--lux-muted);
  line-height: 1.55;
  font-size: 14.5px;
}

.acc-card li{ margin: 4px 0; }

/* CTA Bereich */
.acc-cta{
  margin-top: 14px;
  padding-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(15,23,42,.06);
  flex-wrap: wrap;
}

.cta-note{
  font-size: 13px;
  color: var(--lux-muted-2);
}

/* Deinen bestehenden .btn-primary machen wir “premium” */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(176,138,58,.45);
  background: linear-gradient(135deg, rgba(176,138,58,.95), rgba(217,191,122,.92));
  color: #0b1220;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 18px 40px rgba(176,138,58,.18);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration: none;
}

.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 44px rgba(176,138,58,.22);
}

/* Focus-States (wichtig für Premium/Accessibility) */
.accordion-summary:focus-visible,
.btn-primary:focus-visible{
  outline: 3px solid rgba(176,138,58,.35);
  outline-offset: 3px;
}

/* Mobile */
@media (max-width: 820px){
  .acc-grid{ grid-template-columns: 1fr; }
  .sum-sub{ white-space: normal; }
  .badge{ display:none; } /* optional: cleaner mobile */
}






/* =========================================
   PREMIUM / LUXURY – B2B / FLOTTE (FINAL)
   nur für <section class="b2b-section"> ...
   ========================================= */

.b2b-section{
  padding: 80px 18px;
  background:
    radial-gradient(900px 260px at 15% 10%, rgba(140,29,29,.08), transparent 60%),
    radial-gradient(900px 260px at 85% 30%, rgba(0,0,0,.05), transparent 60%),
    #fafafa;
}

/* Wrapper als Premium-Card */
.b2b-wrap{
  max-width: 1100px;
  margin: 0 auto;

  /* wichtig: keine inner padding hier (du hast das früher drin) */
  padding: 0 !important;

  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  align-items: stretch;

  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,.10);
  overflow: hidden;
  position: relative;
}

/* dünne “Luxury”-Linie oben */
.b2b-wrap::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, transparent, rgba(140,29,29,.75), rgba(140,29,29,.18), transparent);
  opacity:.9;
}

/* Linke Bild-Spalte */
.b2b-left{
  padding: 22px;
}

.b2b-left img{
  width: 100%;
  height: 100%;
  max-height: 540px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
  display:block;

  /* “cinematic” aber subtil */
  filter: contrast(1.05) saturate(1.03);
}

/* Rechte Content-Spalte */
.b2b-right{
  padding: 34px 30px 32px;
  width: 100%;
}

/* Headline: edler (dein altes 44px ist sehr “laut”) */
.b2b-right h2{
  margin: 0 0 12px;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: #7a1414; /* premium burgundy */
}

/* kleine Linie unter der H2 */
.b2b-right h2::after{
  content:"";
  display:block;
  width: 76px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(140,29,29,.85), rgba(140,29,29,.18));
}

/* Text ruhiger */
.b2b-right p{
  margin: 14px 0 18px;
  max-width: 62ch;
  color: rgba(0,0,0,.74);
  line-height: 1.85;
  font-size: 15.5px;
}

/* optional: falls du im HTML gleich eine Lead-Zeile setzt */
.b2b-right .b2b-lead{
  font-size: 16px;
  color: rgba(0,0,0,.82);
  margin-bottom: 12px;
}

/* Premium-Liste: keine Zahnräder + keine Umbruch-Probleme */
.b2b-list{
  list-style: none;
  margin: 18px 0 26px;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;

  width: 100%;
}

.b2b-list li{
  /* überschreibt dein altes padding-left:34px / ::before "⚙" */
  position: relative;
  padding: 12px 14px 12px 44px !important;
  margin: 0 !important;

  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);

  color: rgba(0,0,0,.78);
  line-height: 1.6;
  font-size: 14.8px;

  /* ganz wichtig gegen “Buchstaben-Umbruch” */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Luxury Dot links */
.b2b-list li::before{
  content:"";
  position:absolute;
  left: 16px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(140,29,29,.95), rgba(140,29,29,.35));
  box-shadow: 0 10px 20px rgba(140,29,29,.18);
}

/* Button: Premium CTA (Burgundy) */
.b2b-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  background: linear-gradient(180deg, #8c1d1d, #5e1212);
  color: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 46px rgba(140,29,29,.28);

  font-weight: 800;
  letter-spacing: .2px;

  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.b2b-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 26px 70px rgba(140,29,29,.34);
}

/* Responsive */
@media (max-width: 980px){
  .b2b-wrap{
    grid-template-columns: 1fr;
  }
  .b2b-left{
    padding: 18px 18px 0;
  }
  .b2b-left img{
    max-height: 380px;
  }
  .b2b-right{
    padding: 22px 18px 22px;
  }
}





/* =========================================
   GOLD TOUCH (subtil) – nur B2B Block
   ganz unten einfügen
   ========================================= */

:root{
  --gold-1: #d9bf7a;   /* champagner */
  --gold-2: #b08a3a;   /* warmes gold */
  --gold-3: rgba(217,191,122,.28);
}

/* Top-Line wird gold statt rot */
.b2b-wrap::before{
  background: linear-gradient(90deg, transparent, var(--gold-2), var(--gold-1), transparent) !important;
  opacity: .85 !important;
}

/* H2 Unterstrich gold */
.b2b-right h2::after{
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1)) !important;
  opacity: .95 !important;
}

/* Goldene “Halo”-Aura um die Card (sehr subtil) */
.b2b-wrap{
  box-shadow:
    0 26px 70px rgba(0,0,0,.10),
    0 0 0 1px rgba(217,191,122,.18),
    0 22px 80px rgba(176,138,58,.10) !important;
}

/* Bild bekommt goldene Kante (edel, nicht laut) */
.b2b-left img{
  border: 1px solid rgba(176,138,58,.28) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.14),
    0 0 0 1px rgba(217,191,122,.18) !important;
}

/* Bullet-Dot gold statt rot */
.b2b-list li::before{
  background: linear-gradient(135deg, var(--gold-2), var(--gold-1)) !important;
  box-shadow: 0 10px 22px rgba(176,138,58,.22) !important;
}

/* Premium-Liste: leichter goldener “sheen” beim Hover */
.b2b-list li{
  position: relative;
  overflow: hidden;
}

.b2b-list li::after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(700px 120px at 12% 0%, var(--gold-3), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.b2b-list li:hover::after{
  opacity: 1;
}

/* Button: burgundy + gold rim */
.b2b-btn{
  border: 1px solid rgba(176,138,58,.55) !important;
  box-shadow:
    0 18px 46px rgba(140,29,29,.26),
    0 0 0 2px rgba(217,191,122,.10),
    0 22px 70px rgba(176,138,58,.16) !important;
}

/* Optional: kleine goldene “Spark” Linie im Button */
.b2b-btn{
  background:
    linear-gradient(180deg, #c8a0288c, #c8a0288c),
    radial-gradient(500px 60px at 30% 0%, rgba(217,191,122,.35), transparent 60%) !important;
  background-blend-mode: normal, screen;
}


/* Gold-Button Text schwarz */
.b2b-btn{
  color: #1f1f1f !important;   /* edles Schwarz */
}



/* ===== ÜBER UNS – PREMIUM GRUNDSTIMMUNG ===== */

.ueber-uns-header + .section-wrapper{
  max-width: 960px;
}

.section-wrapper{
  letter-spacing: 0.1px;
}

.section-heading{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.sub-title{
  font-size: 18px;
  font-weight: 500;
  margin-top: 6px;
}


/* ===== TEAM – PREMIUM CARDS ===== */

.ueber-uns-grid,
.team-member{
  background: rgba(255,255,255,0.92);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.10);
  margin-bottom: 60px;
}

.person-name{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}

.person-title{
  font-size: 15px;
  color: rgba(0,0,0,0.65);
  margin-bottom: 16px;
}

.ueber-uns-text p,
.team-content p{
  line-height: 1.75;
  color: rgba(0,0,0,0.75);
  max-width: 620px;
}


.ueber-uns-image img,
.team-image img{
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.18);
}



.focus strong,
.ueber-uns-text strong{
  color: #2b2727;
  font-weight: 700;
}

.focus{
  background: rgba(140,29,29,0.04);
  border-left: 4px solid rgba(140,29,29,0.7);
  padding: 14px 18px;
  border-radius: 12px;
}




/* ================================
   PREMIUM INTRO – ÜBER UNS
   ================================ */

.premium-intro{
  margin-top: 40px;
  padding: 46px 0 36px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(177,18,23,.06), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
}

.premium-intro__wrap{
  max-width: 1100px;            /* passt zu section-wrapper */
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

/* ---------- Text ---------- */

.premium-intro__eyebrow{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.premium-intro__title{
  margin: 0 0 14px;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 600;
  color: #0c0c0d;
}

.premium-intro__title span{
  color: #b11217; /* euer Rot */
}

.premium-intro__rule{
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, #b11217, rgba(177,18,23,.2));
  border-radius: 999px;
  margin: 18px 0 20px;
}

.premium-intro__text p{
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(0,0,0,.78);
}

/* Premium Tags */
.premium-intro__meta{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.premium-intro__meta span{
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(0,0,0,.75);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
  backdrop-filter: blur(6px);
}

/* ---------- Bild ---------- */

.premium-intro__media{
  position: relative;
}

.premium-intro__frame{
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 18px 60px rgba(0,0,0,.14),
    0 2px 0 rgba(255,255,255,.6) inset;
}

.premium-intro__frame img{
  width: 100%;
  height: clamp(320px, 34vw, 460px);
  display: block;
  object-fit: cover;
  object-position: center 68%;
  filter: contrast(1.06) saturate(.92) brightness(1.03);
  transform: scale(1.02);
}

/* feine Akzentlinie links am Bild */
.premium-intro__media::before{
  content: "";
  position: absolute;
  left: -14px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(177,18,23,.85), rgba(177,18,23,0));
  opacity: .9;
}

/* Subtiler Hover (Desktop) */
@media (hover:hover){
  .premium-intro__frame{
    transition: transform .45s ease, box-shadow .45s ease;
  }

  .premium-intro__frame:hover{
    transform: translateY(-5px);
    box-shadow:
      0 24px 80px rgba(0,0,0,.18),
      0 2px 0 rgba(255,255,255,.65) inset;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px){
  .premium-intro{
    padding: 34px 0 28px;
  }

  .premium-intro__wrap{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .premium-intro__media::before{
    display: none;
  }

  .premium-intro__frame img{
    height: 280px;
  }
}


.team-content {
  text-align: left;
}



html, body {
  overflow-x: hidden;
  max-width: 100%;
}


img, video, iframe {
  max-width: 100%;
  height: auto;
}


/* Header Icons: gleiche Box = gleiche Ausrichtung */
.header-hotline{
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-btn,
.hotline-icon-btn{
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}

.whatsapp-btn img{
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
}


.header-hotline .whatsapp-btn i{
  font-size: 34px;      /* ← HIER Größe */
  color: #219f28;
}

/* Kein blauer Unterstrich/Highlight bei Header-Icons */
.header-hotline a{
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* optional: Focus-Rahmen entfernen (sieht sonst blau aus) */
.header-hotline a:focus,
.header-hotline a:active{
  outline: none;
}

/* "Wichtige Links" ganz nach rechts schieben */
.footer-mid{
  justify-self: end;
  text-align: right;
}




/* Footer Layout sauber */
.footer-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: start;
}

/* Wichtige Links rechts ausrichten (ohne absolute) */
.footer-mid{
  justify-self: end;
  text-align: right;
}

/* Exali + Links GANZ nach rechts */
.footer-right{
  justify-self: end;
}




.footer-mid{
  justify-self: end;
  text-align: right;
  margin-right: -120px;   /* schiebt weiter nach rechts */
}

.logo{
  flex-shrink: 0;
}

@media (max-width: 768px){
  .logo img{
    height: 52px;   /* vorher ~100px */
  }
}





/* NAV DROPDOWN: Einsatzgebiete */
.nav-dropdown{ position:relative; display:inline-flex; align-items:center; }

.nav-dropbtn{
  background:transparent; border:0; cursor:pointer;
  font-size:17px; font-weight:600; letter-spacing:.2px;
  padding:10px 14px; border-radius:999px;
  color:var(--text-dark);
  display:inline-flex; align-items:center; gap:8px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.nav-dropbtn i{ font-size:12px; opacity:.8; transition:transform .18s ease; }

.nav-dropbtn:hover{
  background:rgba(140,29,29,.08);
  color:var(--main-color);
  transform:translateY(-1px);
}

/* ===============================
   Dropdown Standard (Desktop)
=================================*/
.nav-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  padding:12px 0;
  display:none;
  z-index:1000;
}

.nav-dropdown.open .nav-dropdown-menu{
  display:block;
}


/* ⬇️ WICHTIG: “Hover-Gap”-Fix: unsichtbare Brücke zwischen Button & Menü */
.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  top:-10px;
  width:100%;
  height:10px;
}

/* Öffnen nur per Klasse */
.nav-dropdown.open .nav-dropdown-menu{ display:block; }
.nav-dropdown.open .nav-dropbtn i{ transform:rotate(180deg); }

/* Links im Menü */
.nav-dropdown-menu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:#111;
  font-weight:600;
  font-size:15px;
}
.nav-dropdown-menu a:hover{
  background:rgba(140,29,29,.08);
  color:var(--main-color);
}
.nav-dropdown-sep{
  height:1px; background:rgba(0,0,0,.08);
  margin:8px 0;
}

/* Mobile: Menü “inline” unter dem Button */
@media (max-width:768px){
  .nav-dropdown{ width:100%; display:block; }
  .nav-dropbtn{ width:100%; justify-content:space-between; }
  .nav-dropdown-menu{
    position:static;
    min-width:0;
    margin-top:6px;
    box-shadow:none;
    border-radius:14px;
  }
  .nav-dropdown-menu::before{ display:none; }
}




/* Desktop: Dropdown beim Hover + Fokus offen halten */
@media (min-width: 769px){
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    display:block;
  }
}




/* Aktiv-Hintergrund (rot) für NAV entfernen */
.nav-links a.active,
.nav-dropbtn.active {
  background: transparent !important;
  color: var(--text-dark) !important;
}


/* Hover-Effekt in der Navigation deaktivieren */
.nav-links a:hover,
.nav-dropbtn:hover {
  background: transparent !important;
  color: inherit !important;
}









/* HERO Trust Chips */
.hero-trust { margin: 14px 0 6px; }

.trust-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.trust-list li{
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  white-space: nowrap;
}





/* HERO Buttons clean auf Mobile */
.hero-cta-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-cta-row a{
  flex: 1 1 220px;   /* beide gleich breit, wrappt sauber */
  text-align: center;
}


.btn-secondary{
  background: white;
  border: 2px solid #c8a24a;   /* Gold passend zu deinem Stil */
  color: #7a1f1f;              /* dein Rotton */
  font-weight: 600;
  border-radius: 999px;
  transition: all 0.2s ease;
}

.btn-secondary:hover{
  background: #f8f3e6;
  transform: translateY(-2px);
}







.hero-urgency{
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #1c1c1c;
}




/* LUXURY HERO INFO BOX */
/* HERO Info Bar – clean & luxury */
.hero-info-box{
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


/* Trust row – minimal, elegant */
.trust-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 12px 0;
}

.trust-list li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: #2a2a2a;
}




  /* Region chip elegant */
.why-meta{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.85;
}

.why-meta .chip{
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}





/* Sticky Kontaktleiste (nur Mobile) */
.sticky-contact{
  display: none;
}

@media (max-width: 768px){
  .sticky-contact{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 10px;
    z-index: 9999;
  }

  .sticky-btn{
    flex: 1;
    text-align: center;
    padding: 14px 14px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  }

  .sticky-btn.call{
    background: #c8a24a;
    color: #1a1a1a;
  }

  .sticky-btn.wa{
    background: #ffffff;
    border: 2px solid rgba(200,162,74,0.6);
    color: #7a1f1f;
  }
}


@media (max-width: 768px){
  body{ padding-bottom: 86px; }
}



/* Unfall-Checkliste */
.checklist{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.check-item{
  display: flex;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.check-num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(200,162,74,0.25);
  border: 1px solid rgba(200,162,74,0.35);
}

.check-title{
  margin: 0;
  font-size: 16px;
}

.check-text{
  margin: 4px 0 0;
  opacity: 0.9;
}

.check-cta{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.check-cta a{
  flex: 1 1 220px;
  text-align: center;
}




.reviews-subline{
  margin-top: 6px;
  opacity: 0.85;
  font-weight: 500;
}

.reviews-cta{
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248,243,230,0.7), rgba(255,255,255,0.9));
  border: 1px solid rgba(200,162,74,0.25);
  text-align: center;
}

.reviews-cta p{
  margin-bottom: 12px;
  font-weight: 600;
}



.quicklinks{
  display: grid;
  gap: 12px;
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.quicklink{
  display: block;
  padding: 16px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
}

.quicklink:hover{
  transform: translateY(-2px);
}




/* Premium Inline CTA (Einsatzgebiet-Seiten) */
.hero-inline-cta{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.hero-inline-text{
  opacity: 0.92;
}

.hero-inline-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #7a1f1f;
  background: rgba(248,243,230,0.70);
  border: 1px solid rgba(200,162,74,0.28);
  transition: transform 0.2s ease, background 0.2s ease;
}

.hero-inline-link:hover{
  transform: translateY(-1px);
  background: rgba(248,243,230,0.88);
}

.hero-alt-contact{
  margin-top: 10px;
  opacity: 0.92;
}



.text-link{
  color: #7a1f1f;
  font-weight: 600;
  text-decoration: none;
}


.section-subheading{
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  color: #2a2a2a;
}

.section-subheading strong{
  font-weight: 700;
  color: #1c1c1c;
}


.section-wrapper{
  padding-top: 60px;
  padding-bottom: 60px;
}




/* WHY Premium Layout */
.why-premium-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 26px;
  align-items: start;
}

@media (max-width: 900px){
  .why-premium-grid{ grid-template-columns: 1fr; }
}

.why-lead{
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.65;
  max-width: 60ch;
}

.why-proof{
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 10px;
  opacity: 0.92;
  font-weight: 600;
}

.why-proof li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.why-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  background: rgba(200,162,74,0.85);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.why-premium-right{
  border-left: 1px solid rgba(0,0,0,0.08);
  padding-left: 22px;
}

@media (max-width: 900px){
  .why-premium-right{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 18px;
  }
}

.why-item{
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.why-item:last-child{ border-bottom: none; }

.why-item h3{
  margin: 0 0 6px 0;
  font-size: 16px;
}

.why-item p{
  margin: 0;
  opacity: 0.88;
  line-height: 1.6;
}

.why-premium-cta{
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.why-premium-cta a{
  flex: 1 1 220px;
  text-align: center;
}





/* Rechte nach Unfall Section */
.rights-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: start;
}

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

.rights-lead{
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.7;
  max-width: 60ch;
}

.rights-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-weight: 600;
}

.rights-list li{
  position: relative;
  padding-left: 22px;
}

.rights-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200,162,74,0.9);
}

.rights-cta{
  margin-top: 18px;
}
.rights-item{
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.rights-item:last-child{
  border-bottom: none;
}

.rights-item h3{
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.rights-item p{
  margin: 0;
  line-height: 1.6;
  opacity: 0.9;
}


.contact-page{
  padding-top: 60px;
}


.contact-quick{
  margin-top: 30px;
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.contact-quick h2{
  margin-bottom: 10px;
}

.contact-quick p{
  max-width: 70ch;
  line-height: 1.6;
}

.contact-quick .hero-cta-row{
  margin-top: 20px;
  margin-bottom: 10px;
}


.contact-page .section-heading{
  margin-bottom: 20px;
}


.contact-internal-links{
  margin-top: 50px;
  margin-bottom: 30px;
  font-size: 15px;
  color: #555;
}

.contact-internal-links a,
.contact-internal-links a:visited {
  color: var(--main-color);   /* ← DAS fehlte */
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 0, 0, 0.3);
  transition: all 0.2s ease;
}



.btn-contact{
  display: block;
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}


.contact-fixed-info{
  margin-top: 30px;
}
.contact-fixed-info{
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}


.contact-details{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-item i{
  font-size: 20px;
  color: #8b0000; /* deine Markenfarbe */
  margin-top: 3px;
}

.contact-item strong{
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: #555;
}

.contact-item span{
  font-size: 16px;
}

.contact-item a{
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

.contact-item a:hover{
  text-decoration: underline;
}

.contact-details{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-item i{
  font-size: 20px;
  color: #8b0000; /* deine Markenfarbe */
  margin-top: 3px;
}

.contact-item strong{
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: #555;
}

.contact-item span{
  font-size: 16px;
}

.contact-item a{
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

.contact-item a:hover{
  text-decoration: underline;
}





.contact-item strong{
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: #777;
}

.contact-item span{
  font-size: 16px;
  font-weight: 500;
}



.contact-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-item i{
  font-size: 18px;
  color: #8b0000;
  background: rgba(139, 0, 0, 0.06);
  padding: 10px;
  border-radius: 50%;
}






/* Standard Headerbanner (wie Kontakt) */
.page-header{
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px){
  .page-header{ height: 180px; }
}







/* ===== FULL-WIDTH HEADER (alle Seiten) ===== */
body { margin: 0; }

.page-header{
  width: 100%;
  max-width: 100%;
  margin: 0;
}








/* ===== FULL WIDTH HERO / HEADER ===== */
body {
  margin: 0;
}

.hero-background,
.page-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
}



/* ===========================
   FAQ PAGE – FINAL PREMIUM FIX (nur FAQ)
   =========================== */

/* FAQ Wrapper: Abstand nach Headerbild */
.faq-page{
  padding-top: 34px;
}

/* Intro Card oben (faq-page-intro) */
.faq-page .faq-page-intro{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,248,246,0.96));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 24px 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  margin-bottom: 18px;
}

.faq-page .faq-page-intro h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.4px;
}

.faq-page .faq-page-intro p{
  margin: 10px 0;
  color: rgba(0,0,0,0.78);
  line-height: 1.75;
  font-size: 15.5px;
}

.faq-page .microtrust{
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(0,0,0,0.60);
}

/* CTA Row im Intro */
.faq-page .cta-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Buttons nur im FAQ Intro – nicht global */
.faq-page .cta-row .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 800;
  letter-spacing: .2px;
  min-height: 46px;
  border: 1px solid rgba(200,162,74,0.45);
  background: #fff;
  color: #1c1c1c;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.faq-page .cta-row .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.14);
}

/* Primär im FAQ = Gold */
.faq-page .cta-row .btn-primary{
  background: linear-gradient(180deg,#ffe58a 0%,#ffd24d 45%,#e6b800 100%);
  color: #3b2a00;
  border-color: rgba(200,162,74,0.55);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* TOC Card */
.faq-page .faq-toc{
  margin: 18px 0 26px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 16px 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.faq-page .faq-toc-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.faq-page .faq-toc h2{
  margin:0;
  font-size:18px;
}

.faq-page .faq-toc-hint{
  font-size:13px;
  color: rgba(0,0,0,0.60);
}

/* TOC Grid */
.faq-page .faq-toc-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.faq-page .faq-toc-link{
  display:block;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 800;
  color: #111;
  background: linear-gradient(180deg, rgba(248,243,230,0.70), rgba(255,255,255,0.90));
  border: 1px solid rgba(200,162,74,0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .2s ease;
}

.faq-page .faq-toc-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}

/* Abschnitt H2 besser setzen */
.faq-page > h2{
  color: #9B1C1C !important;
  margin: 34px 0 14px;
  font-size: 24px;
  letter-spacing: -0.2px;
}

/* FAQ Cards: du hast schon Accordion – wir machen nur Premium-Spacings */
.faq-page .faq-item{
  border-radius: 20px;
}

/* Mobile */
@media (max-width: 780px){
  .faq-page .faq-toc-list{ grid-template-columns: 1fr; }
  .faq-page .cta-row .btn{ width: 100%; }
}




/* =========================================
   FAQ Buttons = Kontakt Button Look (Fix)
   ganz unten in styles.css einfügen
   ========================================= */

/* CTA-Reihe wie Kontakt */
.faq-cta-row,
.faq-page .cta-row,
.faq-bottom-cta .cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Buttons wie Kontaktseite (überschreibt Gold/Luxury nur in FAQ) */
.faq-cta-row .btn-primary,
.faq-page .cta-row .btn-primary,
.faq-bottom-cta .cta-row .btn-primary{
  background: var(--main-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-soft) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.faq-cta-row .btn-secondary,
.faq-page .cta-row .btn-secondary,
.faq-bottom-cta .cta-row .btn-secondary{
  background: transparent !important;
  color: var(--main-color) !important;
  border: 1px solid var(--main-color) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.faq-cta-row .btn-primary:hover,
.faq-page .cta-row .btn-primary:hover,
.faq-bottom-cta .cta-row .btn-primary:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12) !important;
}

.faq-cta-row .btn-secondary:hover,
.faq-page .cta-row .btn-secondary:hover,
.faq-bottom-cta .cta-row .btn-secondary:hover{
  background: var(--main-color) !important;
  color: #fff !important;
}

/* WhatsApp Button in FAQ wie Kontakt (Icon + Text) */
.faq-cta-row .btn-secondary.whatsapp-btn,
.faq-page .cta-row .btn-secondary.whatsapp-btn,
.faq-bottom-cta .cta-row .btn-secondary.whatsapp-btn{
  border: 1px solid var(--main-color) !important;
}

.faq-cta-row .btn-secondary.whatsapp-btn i,
.faq-page .cta-row .btn-secondary.whatsapp-btn i,
.faq-bottom-cta .cta-row .btn-secondary.whatsapp-btn i{
  font-size: 20px !important;
  color: #219f28 !important;
}

/* Mobile: Buttons gleich breit wie Kontakt-Reihe */
@media (max-width: 768px){
  .faq-cta-row a,
  .faq-page .cta-row a,
  .faq-bottom-cta .cta-row a{
    flex: 1 1 220px;
    text-align:center;
    justify-content:center;
  }
}


/* ===================================
   FAQ BUTTONS – 1:1 wie Kontakt
   =================================== */

.faq-cta-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
}

.btn-contact-gold{
  flex:1;
  text-align:center;
  padding:18px 24px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background: linear-gradient(90deg,#b48b3b 0%,#d8bd7a 50%,#c39a45 100%);
  color:#1a1a1a;
  border:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
  transition:all .2s ease;
}

.btn-contact-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(244, 213, 38, 0.25);
}

.btn-contact-outline{
  flex:1;
  text-align:center;
  padding:18px 24px;
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  background:#ffffff;
  border:2px solid #c39a45;
  color:#7a1f1f;
  transition:all .2s ease;
}

.btn-contact-outline:hover{
  background:#888888;
  transform:translateY(-2px);
}


/* ===================================
   FAQ H1 in Firmenrot
   =================================== */

.faq-page-intro h1{
  color: var(--main-color);   /* dein Firmenrot */
  font-weight: 800;
  margin-bottom: 14px;
}

/* FAQ Seite gleiche Abstände wie Kontakt */
.faq-page{
  padding-top: 60px;
}

/* FAQ H1 wie Kontakt (Firmenrot über section-heading) */
.faq-page .section-heading{
  color: var(--main-color);
  margin-top: 60px;
}

/* Abstand vor Bottom CTA */
.faq-bottom-cta{
  margin-top: 70px;
}
.faq-bottom-cta p{
  margin-bottom: 30px;
}

/* FAQ Abschnitts-Überschriften in Firmenrot */
.faq-page h2{
  color: #000;
}



/* Premium Surface (hell, seriös) */
.premium-surface{
  padding: 70px 0;
  margin-top: 60px;
}


/* Premium Card Look */
.premium-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 6px solid #b30000; /* Firmenrot */
  border-radius: 16px;
  padding: 34px 36px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

/* Headline im Block etwas kompakter */
.premium-card .section-heading{
  text-align: left;
  margin-top: 0;
  margin-bottom: 14px;
}

/* Text angenehmer lesbar */
.premium-card p{
  max-width: 900px;
  line-height: 1.7;
  margin: 10px 0;
  color: #1f1f1f;
}




.premium-intro__text p {
    text-align: left;
    max-width: 560px;
}






.premium-intro__title {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 10px;
}

.premium-subtitle {
    font-size: clamp(22px, 2.2vw, 30px);
    color: #b30000;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
}

.premium-intro__title {
    letter-spacing: -0.5px;
}


.hero-mini-cta {
    margin-top: 25px;
    font-size: 16px;
    color: #333;
}

.hero-mini-cta a {
    color: #b30000;
    text-decoration: none;
    font-weight: 600;
    margin: 0 6px;
}

.hero-mini-cta a:hover {
    text-decoration: underline;
}

.cta-separator {
    color: #999;
}





.warum-wir {
    margin-top: 60px;
}

.warum-wir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.warum-item {
    background: #f8f8f8;
    padding: 25px;
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.warum-item:hover {
    transform: translateY(-4px);
}

.warum-item strong {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
}

.warum-item p {
    margin: 0;
    font-size: 15px;
    color: #555;
}


.premium-intro__text a{
  color:#b30000;
  text-decoration:none;
  transition:all .2s ease;
}

.premium-intro__text a:hover{
  text-decoration:underline;
  color:#8f0000;
}

.premium-intro__text a:visited{
  color:#b30000;
}


/* NUR Textlinks im CTA-Bereich (Buttons bleiben unberührt) */
.cta-ueber-uns p a:not(.btn-primary):not(.btn-secondary){
  color:#b30000;
  text-decoration:none;
}

.cta-ueber-uns p a:not(.btn-primary):not(.btn-secondary):hover{
  color:#8f0000;
  text-decoration:underline;
}

.cta-ueber-uns p a:not(.btn-primary):not(.btn-secondary):visited{
  color:#b30000;
}





.profile-divider{
  width: 400px;
  height: 2px;
  margin: 100px auto;
  background: linear-gradient(90deg, transparent, #c5a05a, transparent);
  border-radius: 2px;
}




/* ===== Premium Trust Pills ===== */

.trust-pills{
  list-style:none;
  padding:0;
  margin:14px 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.trust-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(30,30,30,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.trust-ic{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(198,164,88,0.25), rgba(198,164,88,0.05));
  border: 1px solid rgba(198,164,88,0.35);
  color:#6b4f19;
  flex:0 0 auto;
}

.trust-txt{
  font-size:14.5px;
  line-height:1.2;
  color:#2f2d2d;
  white-space:nowrap;
}

.trust-txt strong{
  font-weight:800;
}


/* ===== WhatsApp Button – Blattgrün Premium ===== */

.btn-secondary.whatsapp-btn {
  background: linear-gradient(135deg, #2e7d32, #3fa34d);
  color: #ffffff;
  border: 2px solid #2e7d32;
  box-shadow: 0 8px 20px rgba(46, 125, 50, 0.25);
  transition: all 0.25s ease;
}

.btn-secondary.whatsapp-btn i {
  color: #ffffff;
}

.btn-secondary.whatsapp-btn:hover {
  background: linear-gradient(135deg, #276b2a, #368f43);
  border-color: #276b2a;
  box-shadow: 0 12px 28px rgba(46, 125, 50, 0.35);
  transform: translateY(-2px);
}

/* ===== Header Hotline Button Gold ===== */

.hotline-box {
  background: linear-gradient(135deg, #d4af37, #b9922e);
  color: #1a1a1a;
  border-radius: 50px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(185, 146, 46, 0.35);
  transition: all 0.25s ease;
}

.hotline-box:hover {
  background: linear-gradient(135deg, #c49c2f, #a88327);
  box-shadow: 0 12px 28px rgba(185, 146, 46, 0.45);
  transform: translateY(-2px);
}

.hotline-box .hotline-icon {
  font-size: 18px;
}

.hotline-box strong {
  font-weight: 800;
}






/* Einsatzgebiete Kacheln */
.area-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.area-tile{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  border-radius:14px;
  text-decoration:none;
  font-weight:700;
  text-align:center;

  /* dezent & passend zu euren Cards */
  background:#f6f3ee;
  border:1px solid rgba(0,0,0,0.08);
  color:#2f2d2d;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.area-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.14);
}

/* Responsive */
@media (max-width: 900px){
  .area-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .area-grid{ grid-template-columns: 1fr; }
  .area-tile{ padding:16px 12px; }
}


.section {
  padding: 20px 0;
}

.section-heading {
  margin-bottom: 12px;
}

.section-subheading {
  margin-bottom: 20px;
}


/* ============================
   CTA Button: Kontaktformular (NUR dieser!)
   ============================ */
.btn-contact,
.btn-contact:visited,
.btn-contact:hover,
.btn-contact:active,
.btn-contact:focus{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* gleiche "Dicke" wie links */
  padding: 16px 32px;
  min-height: 52px;

  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;

  /* Gold fixiert */
  background: linear-gradient(180deg,#ffe58a 0%,#ffd24d 45%,#e6b800 100%);
  color: #1a1a1a;
  border: 1px solid rgba(200,162,74,0.55);

  box-shadow: 0 14px 34px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Hover-Effekt bleibt gold (nur leichter Lift) */
.btn-contact:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.65);
}





.intro-text{
  max-width: 1100px;
  margin-top: 18px;
}

.intro-text p{
  margin-bottom: 14px;
  line-height: 1.6;
  font-size: 16px;
  color: #2f2d2d;
}




.section-wrapper h2 {
  margin-bottom: 24px;
}

.section-wrapper h3 {
  margin-top: 28px;
  margin-bottom: 12px;
}

.section-wrapper p {
  margin-bottom: 16px;
  line-height: 1.7;
}







/* ===== Trust / Benefits Block ===== */
.trust-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.trust-card {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 26px;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

.trust-title {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  margin: 0 0 10px;
  line-height: 1.25;
}

.trust-sub {
  margin: 0 0 14px;
  line-height: 1.7;
  color: #333;
  max-width: 62ch;
}

.trust-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.trust-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.trust-bullets i {
  margin-top: 2px;
  color: #1f7a3a;
  font-size: 1.05rem;
}

.trust-right {
  display: grid;
  align-content: start;
  gap: 16px;
}

.trust-actions {
  display: grid;
  gap: 10px;
}

.trust-btn {
  width: 100%;
  text-align: center;
}



.btn-secondary:hover {
  transform: translateY(-1px);
}

.trust-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trust-mini-item {
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

.trust-mini-top {
  display: block;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 4px;
}

.trust-mini-bottom {
  display: block;
  font-weight: 800;
  color: #222;
}

/* Responsive */
@media (max-width: 900px) {
  .trust-card {
    grid-template-columns: 1fr;

}}





/* ======================================
   TRUST WHATSAPP BUTTON – FIX FINAL
   ====================================== */

.trust-actions .btn-secondary {
  background: #2e7d32 !important;
  color: #ffffff !important;
  border: 2px solid #2e7d32 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
  text-align: center;
}

.trust-actions .btn-secondary i {
  color: #ffffff !important;
}

/* Hover soll NICHT weiß werden */
.trust-actions .btn-secondary:hover {
  background: #2e7d32 !important;
  color: #ffffff !important;
  border-color: #2e7d32 !important;
  transform: translateY(-1px);
}




/* FIX: Mobile Menü muss über allem liegen */
header { z-index: 10000; }
nav { position: relative; }

@media (max-width: 768px) {
  .nav-links {
    z-index: 10001;
  }
  .nav-toggle {
    position: relative;
    z-index: 10002;
  }
}



/* FIX Mobile-Menü: immer volle Viewport-Breite */
@media (max-width: 768px) {
  header { z-index: 10000; }

  .nav-links{
    position: fixed;          /* statt absolute */
    top: 72px;                /* ggf. 60/70/80 anpassen */
    left: 12px;
    right: 12px;
    inset: auto;              /* dein inset überschreiben */
    width: auto;
    z-index: 10001;
  }

  .nav-toggle{
    position: relative;
    z-index: 10002;
  }
}


.nav-dropdown{
  display: flex;              /* statt inline-flex */
  align-items: center;
  gap: 6px;
}

.nav-dropbtn{
  flex: 1;                    /* Link nimmt den Hauptbereich */
}

.nav-dropchev{
  flex: 0 0 auto;             /* Chevron bleibt klein rechts */
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}





/* ===============================
   Mobile Dropdown untereinander
=================================*/
@media (max-width: 768px){

  .nav-dropdown{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-dropdown-menu{
    position: static;        /* wichtig! */
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 12px;
    background: #f7f7f7;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display: block;
  }

}





/* ===== Dropdown unter Einsatzgebiete (Mobile) ===== */
@media (max-width: 768px){

  /* Dropdown-Container untereinander */
  .nav-dropdown{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  /* Button/Link volle Breite */
  .nav-dropbtn{
    width: 100%;
  }

  .nav-dropchev{
    position: absolute;
    right: 10px;
    top: 8px;
  }

  /* Menü: nicht absolut, sondern im Flow */
  .nav-dropdown-menu{
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;     /* WICHTIG (dein min-width killt Mobile) */
    margin-top: 8px;
    padding: 8px;
    border-radius: 14px;
    box-shadow: none !important;
    background: #f7f7f7;
  }

  /* Links im Menü volle Breite */
  .nav-dropdown-menu a{
    width: 100%;
    display: block;
  }
}










/* =========================================
   MOBILE CLEANUP (nur Handy)
   ganz unten einfügen
   ========================================= */
@media (max-width: 768px){

  /* Grundschrift + Zeilenhöhe */
  body{
    font-size: 15px;
    line-height: 1.55;
  }

  /* Header kompakter */
  .nav-container{
    padding: 10px 14px;
    gap: 10px;
  }

  /* Logo kleiner */
  .logo img{
    height: 46px !important;
  }

  /* Headline / Section-Titel kleiner */
  .section-heading{
    font-size: 24px !important;
    line-height: 1.2;
  }

  .section-subheading{
    font-size: 15px !important;
    line-height: 1.5;
  }

  /* Allgemeine Abstände reduzieren */
  .section-wrapper{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .section{
    margin-bottom: 34px !important;
  }

  /* Header Icons kleiner (Hotline/WhatsApp/Mail) */
  .whatsapp-btn,
  .hotline-icon-btn{
    width: 44px !important;
    height: 44px !important;
  }

  .header-hotline .whatsapp-btn i{
    font-size: 22px !important;
  }

  /* Mail-Icon kleiner (du hast es inline im HTML mit 36px) */
  .header-hotline a[aria-label="E-Mail"]{
    font-size: 24px !important;
  }

  /* Hotline Box kompakter */
  .hotline-box{
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .hotline-box .hotline-icon{
    font-size: 16px !important;
  }
  .hotline-number{
    font-size: 14px !important;
  }

  /* Navigation Links kleiner */
  .nav-links a,
  .nav-dropbtn{
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* Mobile Menü: bessere Lesbarkeit + weniger "Riesenfläche" */
  .nav-links{
    top: 62px !important;
    padding: 12px 12px !important;
  }

  /* Dropdown Menü untereinander + kompakt */
  .nav-dropdown{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-dropdown-menu{
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px;
    padding: 6px;
    border-radius: 12px;
    box-shadow: none !important;
    background: rgba(0,0,0,0.03);
  }

  .nav-dropdown-menu a{
    font-size: 15px !important;
    padding: 10px 10px !important;
  }

  /* Karten/Boxen kompakter */
  .card{
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .card-title{
    font-size: 16px !important;
  }

  /* Reviews Karten */
  .review-card{
    padding: 18px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  /* Footer kompakter */
  footer{
    padding: 18px 14px !important;
  }
}





.header-mail{
  font-size: 36px;
  color: #2f2d2d;
  text-decoration: none;
}
@media (max-width: 768px){
  .header-mail{ font-size: 24px; }
}





/* =========================================
   MOBILE FINAL FIX: kleiner + Seitenabstand
   ganz unten einfügen
   ========================================= */
@media (max-width: 768px){

  /* 1) Global: alles etwas kleiner */
  body{
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  h1{ font-size: 22px !important; line-height: 1.2 !important; }
  h2{ font-size: 20px !important; line-height: 1.25 !important; }
  h3{ font-size: 16px !important; line-height: 1.25 !important; }

  .section-heading{ font-size: 22px !important; }
  .section-subheading{ font-size: 14px !important; }

  /* 2) Seitenabstand für ALLE Inhalte */
  main{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Deine Wrapper zentrieren + Innenabstand */
  .section-wrapper,
  .contact-page,
  .trust-wrap{
    padding-left: 0 !important;
    padding-right:0 !important;
  }

  /* 3) ABSTÄNDE generell kleiner */
  .section-wrapper{
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  .section{
    margin-bottom: 26px !important;
    padding: 0 !important;
  }

  /* 4) Karten + Boxen kompakter */
  .card,
  .trust-card,
  .premium-card,
  .faq-item,
  .review-card{
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* 5) Buttons kleiner */
  .btn-primary,
  .btn-secondary,
  .btn-contact,
  .b2b-btn,
  .trust-btn{
    padding: 10px 14px !important;
    font-size: 14px !important;
    min-height: 42px !important;
  }

  /* 6) Header kompakter */
  .nav-container{
    padding: 10px 12px !important;
  }
  .logo img{
    height: 44px !important;
  }

  /* 7) Icons kleiner */
  .whatsapp-btn,
  .hotline-icon-btn{
    width: 42px !important;
    height: 42px !important;
  }
  .header-hotline .whatsapp-btn i{
    font-size: 20px !important;
  }
  .hotline-box{
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .hotline-number{
    font-size: 13px !important;
  }

  /* 8) Mobile Menü kompakt + mit Rand */
  .nav-links{
    left: 12px !important;
    right: 12px !important;
    top: 62px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }
  .nav-links a,
  .nav-dropbtn{
    font-size: 15px !important;
    padding: 9px 10px !important;
  }

  /* Dropdown untereinander + nicht riesig */
  .nav-dropdown{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dropdown-menu{
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 8px !important;
    padding: 6px !important;
    box-shadow: none !important;
    background: rgba(0,0,0,0.03) !important;
    border-radius: 12px !important;
  }
  .nav-dropdown-menu a{
    font-size: 14px !important;
    padding: 9px 10px !important;
  }

  /* 9) Fullwidth-Bilder: ja, aber ohne horizontales Springen */
  .page-header,
  .hero-background{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 10) Reviews Buttons nicht so breit/wuchtig */
  .reviews-actions .btn-primary,
  .reviews-actions .btn-secondary{
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}











/* =========================================
   HERO + CONTENT kleiner auf MOBILE
   ========================================= */
@media (max-width: 768px){

  /* Seitenabstand (damit nix am Rand klebt) */
  main{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero Background weniger hoch */
  .hero-background{
    padding: 26px 0 34px !important;
    min-height: 0 !important;
  }

  /* Weißer Hero-Kasten kleiner + mit Rand */
  .hero-content{
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  /* Überschrift + Text kleiner */
  .hero-content h1{
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .hero-content p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }

  /* Trust-Pills kleiner */
  .trust-pill{
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  .trust-ic{
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }
  .trust-txt{
    font-size: 13px !important;
  }

  /* Buttons kleiner und nicht so fett */
  .hero-cta-row a{
    padding: 12px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
}






/* Abstand zwischen "Einsatzgebiete" und Chevron kleiner */
.nav-dropdown{
  gap: 0 !important;              /* vorher gap: 6px */
}

.nav-dropdown .nav-dropbtn{
  padding-right: 6px !important;  /* vorher 14px */
}

.nav-dropdown .nav-dropchev{
  padding: 10px 8px !important;   /* vorher 10px 12px */
  margin-left: -2px;              /* optional: noch enger */
}



/* WHY Section bekommt exakt den gleichen Hintergrund wie Ablauf */
section.why-premium{
  background: #ffffff;
  padding: 20px 0;
  border-radius: 0;     /* kein Außen-Kasten */
  box-shadow: none;
  border: none;
}

.why-premium-grid{
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
}

.faq-bottom-cta h2 {
  color: #9B1C1C;
}

.faq-page .faq-question{
  margin: 0;
   padding: 16px 56px 16px 20px;  /* vorher 12px */
}


.faq-page .faq-answer a {
  color: var(--main-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 2px;
}

.faq-page .faq-answer a:hover {
  opacity: 0.8;
}


.first-call-section {
  background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 100%);
  padding: 80px 20px;
}

.first-call-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.first-call-heading {
  font-size: 32px;
  margin-bottom: 10px;
  color: #8b1e1e;
}

.first-call-sub {
  font-size: 18px;
  margin-bottom: 50px;
  color: #555;
}

.first-call-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.first-call-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: transform 0.3s ease;
}

.first-call-card:hover {
  transform: translateY(-6px);
}

.card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #b48a3a, #d4b067);
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}


.first-call-card h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.first-call-card p {
  font-size: 15px;
  color: #555;
}

.first-call-cta .btn-primary {
  font-size: 18px;
  padding: 16px 28px;
}




.rights-image {
  
  width: 70%;
  max-height: 500px;   /* Höhe anpassen falls minimal größer/kleiner gewünscht */
  object-fit: cover;
  border-radius: 16px;
  margin-top: 30px;
  display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
.rights-left .btn-primary {
  margin-bottom: 35px;
}
.rights-item {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}


/* Scroll-Fix – weniger Jank beim Scrollen */
@media (max-width: 900px){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Leichtere Schatten für bessere Performance */
.card,
.review-card,
.ablauf-step{
  box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
}





/* PERFORMANCE: Reveal kostet Scroll-Performance -> deaktivieren */
.reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* MOBILE: Performance > Scroll-Animationen */
@media (max-width: 900px){
  /* Reveal deaktivieren */
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* teurer Blur im Header aus */
  header{
    backdrop-filter: none !important;
  }

  /* Schatten etwas leichter (weniger Repaint) */
  .card,
  .review-card,
  .ablauf-step{
    box-shadow: 0 12px 28px rgba(0,0,0,0.10) !important;
  }
}





/* FIX: Warum-Section auf Mobile untereinander */
@media (max-width: 900px){
  .why-premium-grid{
    grid-template-columns: 1fr !important;
  }

  /* optional: rechter Bereich bekommt oben Abstand + Linie statt links */
  .why-premium-right{
    border-left: none !important;
    padding-left: 0 !important;

    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 18px;
    margin-top: 10px;
  }
}




/* HEADER HOTLINE PREMIUM */
.header-hotline{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Hauptbutton */
.hotline-premium{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 22px;
  border-radius:50px;
  background:linear-gradient(135deg,#c7a243,#a88422);
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  transition:all .3s ease;
}

.hotline-premium:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(0,0,0,0.25);
}

/* Icon Kreis */
.hotline-icon-wrap{
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

/* Text */
.hotline-content{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}

.hotline-label{
  font-size:12px;
  opacity:0.9;
}

.hotline-number{
  font-size:16px;
  font-weight:700;
}

/* WhatsApp Mini Button */
.hotline-mini{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  font-size:20px;
  text-decoration:none;
  transition:.3s;
}

.hotline-mini:hover{
  transform:scale(1.08);
}

/* Mobile Anpassung */
@media(max-width:768px){

  .hotline-premium{
    padding:10px 18px;
  }

  .hotline-number{
    font-size:14px;
  }

}




/* =========================================
   NUR HANDY: Header CTA ausblenden + Burger rechts
   ========================================= */
@media (max-width: 768px){

  /* 1) Obere Hotline + WhatsApp im Header entfernen (NUR Mobile) */
  .header-hotline{
    display: none !important;
  }

  /* 2) Nav-Zentrierung von Desktop auf Mobile aufheben */
  header nav{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;  /* Burger nach rechts */
  }

  /* 3) Burger selbst ganz rechts */
  .nav-toggle{
    margin-left: auto !important;
  }
}





/* =========================================
   MOBILE HEADER – PREMIUM LOOK (NUR HANDY)
   ========================================= */
@media (max-width: 768px){

  /* Header kompakter + cleaner */
  header{
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  }

  /* Container: feste Höhe + perfekte Vertikal-Ausrichtung */
  .nav-container{
    padding: 10px 14px !important;
    min-height: 64px;                 /* premium, nicht riesig */
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Logo etwas kleiner + sauber */
  .logo img{
    height: 44px !important;
    width: auto;
    display: block;
  }

  /* Nav nimmt Platz, Burger bleibt rechts */
  header nav{
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  /* Burger als "echter Button" (premium) */
  .nav-toggle{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.85);
    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin-left: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Burger-Linien: gleichmäßig, nicht "dünn" */
  .nav-toggle span{
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: rgba(20,20,20,0.92);
    display: block;
  }

  /* Hover (iOS: beim Tip sichtbar) */
  .nav-toggle:active{
    transform: translateY(1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  }

  /* Obere Header-CTA bleibt aus */
  .header-hotline{ display:none !important; }
}





@media (max-width: 768px){
  .nav-links{
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,0.14) !important;
  }

  .nav-links a,
  .nav-dropbtn{
    border-radius: 14px;
    padding: 12px 12px !important;
  }

  .nav-links a:active,
  .nav-dropbtn:active{
    background: rgba(140,29,29,0.08) !important;
  }
}



/* =========================================
   WhatsApp Button – Premium Deep Green
   ========================================= */

.whatsapp-btn{
  background: linear-gradient(135deg, #1E6F4F, #248A60) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 14px 35px rgba(30,111,79,0.30);
  transition: all 0.25s ease;
}

.whatsapp-btn i{
  color: #ffffff !important;
}

.whatsapp-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(30,111,79,0.40);
  filter: brightness(1.05);
}

.whatsapp-btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(30,111,79,0.35);
}




/* =========================================
   Mobile Sticky WhatsApp – Premium Green
   ========================================= */
@media (max-width: 768px){

  .sticky-btn.wa{
    background: linear-gradient(135deg, #1E6F4F, #248A60);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 12px 30px rgba(30,111,79,0.30);
  }

  .sticky-btn.wa:active{
    box-shadow: 0 6px 18px rgba(30,111,79,0.35);
    transform: translateY(1px);
  }
}



.trust-pill {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.trust-pill:hover {
  transform: translateY(-2px);
  transition: 0.2s ease;
}
.rating-value {
  color: #d4a843;
  font-weight: 700;
}
.trust-google {
  font-size: 0.95rem;
}

.review-count {
  opacity: 0.65;
}




.diff-v2{
  padding:80px 0;
  background: linear-gradient(180deg,#f7f7f7 0%, #ffffff 70%);
}

.diff-v2__wrap{
  display:grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap:60px;
  align-items:start;
}

.diff-v2__eyebrow{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(212,168,67,0.14);
  color:#6b4e12;
  font-weight:700;
  font-size:0.9rem;
  margin-bottom:14px;
}

.diff-v2__title{
  font-size:2.1rem;
  margin:0 0 14px 0;
}

.diff-v2__lead{
  font-size:1.08rem;
  opacity:0.85;
  margin-bottom:22px;
  max-width: 520px;
}

.diff-v2__ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.diff-v2__micro{
  display:flex;
  flex-direction:column;
  gap:8px;
  opacity:0.85;
  font-size:0.95rem;
}

.diff-v2__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.diff-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.05);
  transition: all .22s ease;
}

.diff-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.10);
  border-color: rgba(212,168,67,0.35);
}

.diff-card__top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.diff-card__top i{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(212,168,67,0.15);
  color:#6b4e12;
}

.diff-card__tag{
  font-weight:800;
  font-size:0.95rem;
  opacity:0.9;
}

.diff-card h3{
  margin:8px 0 8px 0;
  font-size:1.05rem;
}

.diff-card p{
  margin:0;
  opacity:0.85;
  line-height:1.5;
}

@media (max-width: 900px){
  .diff-v2__wrap{ grid-template-columns: 1fr; gap:28px; }
  .diff-v2__grid{ grid-template-columns: 1fr; }
}



.diff-v2__ctas .btn-secondary{
  background: linear-gradient(135deg, #d4a843, #c89a2f);
  color: #1a1a1a;
  border: none;
  padding: 14px 28px;
  border-radius: 40px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(212,168,67,0.35);
  transition: all 0.25s ease;
}


.btn-gold{
  background: linear-gradient(135deg, #d4a843, #c89a2f);
  color: #1a1a1a;
  padding: 12px 24px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(212,168,67,0.3);
  transition: all 0.25s ease;
}

.btn-gold:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(212,168,67,0.45);
}

.ablauf-steps::before{
  display:none !important;
  content:none !important;
}

/* Einsatzgebiet-Links: kein lila, CI-Farbe */
.einsatzgebiet-text p a,
.einsatzgebiet-text p a:visited{
  color: var(--main-color);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(140,29,29,0.35);
  padding-bottom: 2px;
}

.einsatzgebiet-text p a:hover,
.einsatzgebiet-text p a:focus-visible{
  color: #6f1313; /* optional etwas dunkler */
  border-bottom-color: rgba(140,29,29,0.75);
  text-decoration: none;
}

.card {
  text-decoration: none;
  color: inherit;
}


.whatsapp-center{
  display: flex;
  justify-content: center;
}




/* ========================= */
/* MOBILE EXPERT HERO */
/* ========================= */

/* Standard: AUS */
.hero-expert-mobile {
    display: none;
}

/* Nur Mobile */
@media (max-width: 768px) {

    .hero-expert-mobile {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 30px;
    }

    .hero-expert-img-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid rgba(255,255,255,0.4);
    }

 .hero-expert-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* WICHTIG */
    transform: scale(1.6);   /* Zoom */
    object-position: center 20%;
}

    .hero-expert-text {
        color: #fff;
        text-align: left;
    }

    .hero-expert-name {
        font-weight: 600;
        font-size: 15px;
        line-height: 1.2;
    }

    .hero-expert-role {
        font-size: 13px;
        opacity: 0.85;
    }
}






@media (max-width: 768px) {

    .hero-expert-mobile .hero-expert-text {
        color: #111; /* dunkles Schwarz */
    }

    .hero-expert-mobile .hero-expert-name {
        color: #111;
    }

    .hero-expert-mobile .hero-expert-role {
        color: #444; /* leicht grauer Untertitel */
    }

}


@media (max-width: 768px) {

    .hero-background {
        background: none !important;
    }

}




/* ============================= */
/* MOBILE: 1 REVIEW PRO SWIPE */
/* ============================= */

@media (max-width: 768px) {

  .reviews-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0; /* kein Abstand zwischen Karten */
  }

  .reviews-grid::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

}



/* ============================= */
/* MOBILE: Reviews Buttons nebeneinander */
/* ============================= */

@media (max-width: 768px) {

  .reviews-actions {
    display: flex;
    gap: 10px;
  }

  .reviews-actions a {
    flex: 1;
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
  }

}






/* ============================= */
/* MOBILE FOOTER CLEAN FIX */
/* ============================= */

@media (max-width: 768px) {

  footer {
    text-align: center;
    padding: 35px 20px 30px;
    min-height: auto !important;
  }

  /* Logo */
  footer img {
    max-width: 150px;
    margin: 0 auto 18px;
  }

  /* Öffnungszeiten */
  .footer-hours {
    font-size: 15px;
    margin-bottom: 20px;
    opacity: 0.85;
  }

  /* Kontakt kompakter */
  .footer-contact-item {
    justify-content: center;
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* Social Icons */
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 18px;
  }

  /* Exali direkt unter Social */
  .footer-badge {
    display: flex;
    justify-content: center;
    margin: 15px 0 20px;
  }

  .footer-badge img {
    max-width: 110px;
  }

  /* Über Uns / Kontakt */
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 15px;
  }

  /* Impressum & Datenschutz */
  .footer-legal {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    opacity: 0.75;
  }

}

@media (max-width: 768px) {

  .footer-badge {
    position: static !important;
    float: none !important;
    margin: 20px auto;
    text-align: center;
  }

}



/* Leistungen-Accordion: CSS-Pfeil deaktivieren, nur .chev bleibt */
.leistungen-accordion summary::after{
  content: none !important;
  display: none !important;
}

.cta-buttons{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-secondary{
  padding: 12px 22px;
  border-radius: 40px;
  background: transparent;
  border: 1px solid #c9a74d;
  color: #c9a74d;
  text-decoration: none;
  font-weight: 600;
  transition: 0.2s ease;
}

.btn-secondary:hover{
  background: #c9a74d;
  color: #fff;
}



/* Einsatzgebiete – mehr Abstand unter Headerbild */
.page-header + .section{
  padding-top: 80px;
}


.leistungen-intro {
  padding: 80px 20px 60px;

}

.leistungen-intro-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.leistungen-lead {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #333;
}

.leistungen-intro p {
  max-width: 850px;
  line-height: 1.7;
}

.leistungen-intro .leistungen-intro-inner h1{
  color: #8B1C1C !important;
  font-weight: 800 !important;
}

.leistungen-intro-inner {
  max-width: 930px;
  margin: 0 auto;
}


.city-links a,
.city-links a:visited {
  color: #7a1c1c;
}

.city-links a:hover {
  text-decoration: underline;
}

/* Einsatzgebiete Links Farbe fixen */

.city-links a,
.city-links a:visited,
.einsatz-links a,
.einsatz-links a:visited {
  color: #7a1c1c;
}

.city-links a:hover,
.einsatz-links a:hover {
  color: #9d2626;
}


.trust-bar{
display:flex;
gap:30px;
flex-wrap:wrap;
justify-content:center;
margin:35px auto 50px;
max-width:900px;
font-size:15px;
}

.trust-item{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
color:#333;
}

.trust-item i{
color:#8b1f1f;
}


/* ===== Leistungen-Seite: Links immer Burgundy Rot ===== */

.leistungen-intro a,
.leistungen-intro a:visited,
.accordion-content a,
.accordion-content a:visited,
.b2b-right a,
.b2b-right a:visited{
  color: #8b1f1f;
  font-weight: 600;
  text-decoration: none;
}

/* Hover Effekt */
.leistungen-intro a:hover,
.accordion-content a:hover,
.b2b-right a:hover{
  text-decoration: underline;
}

/* ===== Leistungen CTA ===== */

.leistungen-cta{
max-width:900px;
margin:80px auto;
text-align:center;
padding:40px;
border-radius:20px;
background:#f7f7f7;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.leistungen-cta h2{
color:#8b1f1f;
margin-bottom:15px;
}

.leistungen-cta p{
margin-bottom:20px;
line-height:1.6;
}

.leistungen-cta .cta-buttons{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
margin-bottom:12px;
}

.cta-note{
font-size:14px;
color:#666;
}

/* ===== Local SEO Abschnitt ===== */

.local-seo{
max-width:900px;
margin:80px auto;
padding:0 20px;
line-height:1.7;
}

.local-seo h2{
color:#8b1f1f;
margin-bottom:15px;
}

.local-seo p{
margin-bottom:12px;
}


/* ===== FAQ Bereich ===== */

.leistungen-faq{
max-width:900px;
margin:90px auto;
padding:0 20px;
}

.leistungen-faq h2{
color:#8b1f1f;
margin-bottom:30px;
}

.faq-item{
background:#f7f7f7;
border-radius:16px;
padding:22px 26px;
margin-bottom:18px;
box-shadow:0 8px 25px rgba(0,0,0,0.05);
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.faq-item h3{
font-size:18px;
margin-bottom:8px;
color:#1c1c1c;
}

.faq-item p{
line-height:1.6;
color:#444;
}

/* Links im Local SEO Bereich */
.local-seo a,
.local-seo a:visited{
  color:#8b1f1f;
  font-weight:600;
  text-decoration:none;
}

.local-seo a:hover{
  text-decoration:underline;
}


/* ===== FAQ Accordion ===== */

.faq-accordion{
max-width:900px;
margin:30px auto 0;
}

.faq-item{
background:#f7f7f7;
border-radius:14px;
margin-bottom:14px;
padding:18px 22px;
cursor:pointer;
}

.faq-item summary{
font-weight:600;
font-size:18px;
list-style:none;
cursor:pointer;
position:relative;
}

.faq-item summary::after{
content:"+";
position:absolute;
right:0;
font-size:22px;
color:#8b1f1f;
transition:transform 0.2s ease;
}

.faq-item[open] summary::after{
content:"−";
}

.faq-item p{
margin-top:10px;
line-height:1.6;
color:#444;
}


/* Trust Bar */

.trust-bar{
display:flex;
justify-content:center;
align-items:center;
gap:24px;
margin-top:25px;
margin-bottom:30px;
flex-wrap:nowrap; /* verhindert Umbruch */
}

.trust-item{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:#333;
padding:10px 18px;
background:#f5f5f5;
border-radius:30px;
font-size:15px;
white-space:nowrap; /* verhindert Textumbruch */
}

.trust-item i{
color:#8b1f1f;
font-size:16px;
}

/* Leistungen Intro breiter */
.leistungen-intro-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.leistungen-intro-inner h1{
  max-width:1000px;
}

.leistungen-intro-inner p{
  max-width:1000px;
}


/* ===== LEISTUNGEN INTRO – BREITER (OVERRIDE GANZ UNTEN EINSETZEN) ===== */
.leistungen-intro-inner{
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
}

.leistungen-intro .leistungen-intro-inner h1{
  max-width: 1200px !important;
}

.leistungen-intro p{
  max-width: 1200px !important;
}
/* BUTTON TEXTFARBEN FIX */
.btn-secondary {
  color: #111 !important;
}

.btn-primary {
  color: #111 !important;
}
.whatsapp-btn i,
.whatsapp-btn svg {
  color: #000 !important;
  fill: #000 !important;
}

.why-section{
margin-top:10px;
}

.why-intro{
  max-width:820px;
  margin:30px auto 55px auto;

  font-size:17px;
  line-height:1.75;
  color:#555;

  text-align:left;

  background:#ffffff;
  padding:20px 26px;

  border-radius:14px;
  border:1px solid #eee;

  box-shadow:0 8px 20px rgba(0,0,0,0.04);
}
.why-intro strong{
  color:#8c1d1d;
  font-weight:600;
}

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.why-box{
  background:#ffffff;
  border-radius:14px;
  padding:24px;

  border:1px solid #eee;
  box-shadow:0 12px 30px rgba(0,0,0,0.05);

  transition:all .2s ease;
}

.why-box:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.why-box h3{
  margin-bottom:12px;
  font-size:18px;
  color:#222;
}

.why-box p{
  font-size:15px;
  line-height:1.6;
  color:#555;
}



.scope-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:25px;
}

.scope-box{
background:#fff;
border-radius:14px;
padding:22px;

border:1px solid #eee;
box-shadow:0 10px 24px rgba(0,0,0,0.05);

transition:all .2s ease;
}

.scope-box:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.scope-box h3{
font-size:18px;
margin-bottom:8px;
color:#222;
}

.scope-box p{
font-size:15px;
line-height:1.6;
color:#555;
}

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




.steps-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-top:25px;
}

.step-box{
background:#fff;
border-radius:14px;
padding:24px;

border:1px solid #eee;
box-shadow:0 10px 24px rgba(0,0,0,0.05);

position:relative;
}

.step-number{
width:34px;
height:34px;

display:flex;
align-items:center;
justify-content:center;

background:#8c1d1d;
color:#fff;

font-weight:700;
border-radius:50%;

margin-bottom:12px;
}

.step-box h3{
font-size:17px;
margin-bottom:6px;
}

.step-box p{
font-size:15px;
line-height:1.6;
color:#555;
}

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




.compare-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:26px;
margin-top:25px;
}

.compare-box{
background:#fff;
border-radius:14px;
padding:24px;

border:1px solid #eee;
box-shadow:0 10px 24px rgba(0,0,0,0.05);
}

.compare-box h3{
margin-bottom:12px;
font-size:18px;
}

.compare-box ul{
padding-left:18px;
}

.compare-box li{
margin-bottom:8px;
line-height:1.6;
}

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


.faq-container{
width:100%;
margin-top:30px;
}

.faq-item{
border-bottom:1px solid #eee;
}

.faq-question{
width:100%;
background:none;
border:none;

text-align:left;
font-size:17px;
font-weight:600;

padding:18px 0;
cursor:pointer;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}

.faq-answer p{
padding-bottom:18px;
line-height:1.6;
color:#555;
}


.process-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:22px;
}

.process-step{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  padding:24px;
  box-shadow:0 10px 24px rgba(0,0,0,0.05);
  position:relative;
}

.process-badge{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#8c1d1d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:16px;
  margin:0 0 14px 0;   /* kein komisches Zentrieren */
}

.process-step h3{
  font-size:18px;
  margin-bottom:8px;
}

.process-step p{
  font-size:15px;
  line-height:1.6;
  color:#555;
}

.process-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

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

/* Typische Fälle Liste */

.cases-list{
  list-style:none;
  padding:0;
  margin-top:14px;
}

.cases-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0;
  line-height:1.6;
}

.cases-list i{
  color:#8c1d1d;
  margin-top:4px;
}

.center-heading {
text-align: center;
}


.cases-list {
list-style: none;
padding: 0;
margin-top: 20px;
}

.cases-list li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 17px;
line-height: 1.6;
}

.cases-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #8b1e1e;
font-weight: bold;
}


.cases-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:150px;
align-items:center;
}

.cases-image img{
width:100%;
height:auto;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

@media(max-width:900px){

.cases-layout{
grid-template-columns:1fr;
}

.cases-image{
order:-1;
}

}


/* ===== TRUST BAR ===== */
.trust-bar{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;        /* wichtig für Mobile */
  padding: 18px 20px;
  max-width: 1100px;
  margin: 0 auto 40px;
}

.trust-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 768px){

  .trust-bar{
    justify-content: flex-start;
    gap: 12px;
  }

  .trust-item{
    width: 100%;          /* untereinander */
    white-space: normal;
  }

}


/* WHY SECTION MOBILE FIX */

.why-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
}

@media (max-width:700px){

  .why-grid{
    grid-template-columns:1fr;
  }

}

/* PROCESS / ABLAUF MOBILE ZENTRIERUNG */

@media (max-width:700px){

  .process-step{
    text-align:center;
  }

  .process-badge{
    margin-left:auto;
    margin-right:auto;
  }

}

/* FOOTER MOBILE FIX */
@media (max-width:700px){

  .footer-inner{
    grid-template-columns:1fr !important;
    text-align:center;
    gap:24px;
  }

  .footer-right{
    margin:0;
    justify-content:center;
  }

  .footer-exali-img{
    display:none; /* entfernt das große Logo unten */
  }

}


@media (max-width:768px){

  .section-heading{
    margin-top:20px;
  }

}

@media (max-width: 768px){

.leistungen-intro{
  padding: 28px 12px 40px !important;
}

  .leistungen-intro-inner{
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .leistungen-intro .leistungen-intro-inner h1,
  .leistungen-intro p,
  .leistungen-lead{
    max-width: 100% !important;
  }

  .leistungen-intro h1{
    font-size: 26px !important;
    line-height: 1.2 !important;
  }

  .leistungen-intro p{
    font-size: 16px;
    line-height: 1.6;
  }

}
/* ===== TRUST BAR DESKTOP FIX ===== */
@media (min-width: 769px){

  .trust-bar{
    max-width: 1200px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }

  .trust-item{
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

}


/* Leistungen Seite gleiche Breite wie andere Seiten */
.leistungen-accordion{
  max-width: 1200px !important;
  margin: 40px auto !important;
}

.leistungen-faq{
  max-width: 1150px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.leistungen-intro + .trust-bar{
  margin-top: -80px;
}