/* ==========================================================================
   REDESIGN OVERRIDES — Sauberes, ruhigeres Design
   Überschreibt chaotische Elemente aus main.css ohne Inhalt zu ändern.
   ========================================================================== */

/* ---------- 1. ANIMIERTE HINTERGRUND-SHAPES BERUHIGEN ---------- */

/* Alle rotierenden/animierten Shapes stark dezenter */
.shapes-container .animation-shape,
.shapes-container .shape-ring,
.shapes-container .shape-circle,
.shapes-container .shape-triangle,
.shapes-container .shape-diamond,
.shapes-container .static-shape {
    opacity: 0.18;
}

/* Animationen verlangsamen statt abschalten — wirkt ruhiger */
.animation--rotating {
    animation-duration: 60s;
}
.animation--rotating-diagonal {
    animation-duration: 60s;
}
.animation--clockwise {
    animation-duration: 60s;
}
.animation--anti-clockwise {
    animation-duration: 60s;
}

/* Background shape in alter3-features weniger dominant */
.alter3-features .background-shape-main {
    opacity: 0.04;
}

/* Dot patterns dezenter */
.shapes-container .pattern-dots-1,
.shapes-container .pattern-dots-2,
.shapes-container .pattern-dots {
    opacity: 0.08;
}

/* Floating icons in Pricing & Trial sections dezenter */
.pricing-plans .shapes-container > .icon,
.start-free .shapes-container > .icon {
    opacity: 0.10;
}

/* FAQ decorative icons */
.faqs-dd .shapes-container .icon {
    opacity: 0.08;
}


/* ---------- 2. KONSISTENTE SECTION-ABSTÄNDE ---------- */

.section [class^="container"],
section [class^="container"] {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media (min-width: 768px) {
    .section [class^="container"],
    section [class^="container"] {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Section-Headings: Einheitlicher Abstand nach unten */
.section-heading {
    margin-bottom: 48px;
}


/* ---------- 3. CARDS — KEIN TILT/ROTATION, SAUBERER ---------- */

/* Tilt-Effekt auf hover entfernen */
.tilt {
    transform: none !important;
}

/* Rotated Cards begradigen */
.rotated-cards {
    transform: none !important;
}

/* Cards: Sauberer, einheitlicher Look */
.rotated-cards .card {
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.rotated-cards .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.10);
}

/* Card-Body: Gleichmäßiges Padding */
.rotated-cards .card .card-body {
    padding: 2rem 1.5rem;
}

/* Card Titel konsistenter Abstand */
.rotated-cards .card .card-body h4 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

/* Card Text: Nicht zu groß */
.rotated-cards .card .card-body p.lead {
    font-size: 0.92rem;
    line-height: 1.6;
}

/* 4-Spalten Feature Cards: Gleiche Höhe */
.alter3-features .row > .col-lg-3 {
    display: flex;
}
.alter3-features .row > .col-lg-3 > div {
    width: 100%;
}
.alter3-features .row > .col-lg-3 .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.alter3-features .row > .col-lg-3 .card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.alter3-features .row > .col-lg-3 .card .card-body p {
    flex: 1;
}


/* ---------- 4. HERO SECTION — AUFGERÄUMTER ---------- */

/* Hero Bubbles: Dezenter */
.bubbles-wrapper .bubble.bubbleText {
    opacity: 0.25;
    font-size: 0.8rem;
}

/* Hero Titel: Bessere Lesbarkeit */
.alter3-header h1.extra-bold {
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.alter3-header h1 .main-subtitle {
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* Hero Lead-Text: Etwas kompakter */
.alter3-header .lead {
    font-size: 1.05rem;
    line-height: 1.65;
    opacity: 0.92;
}

/* Badge: Moderner Look */
.alter3-header .badge-danger {
    font-size: 0.7rem;
    padding: 0.35em 0.65em;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}


/* ---------- 5. NAVIGATION — SAUBERER ---------- */

.main-nav.fixed-top {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.main-nav .nav-link {
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.2px;
    padding: 0.5rem 0.75rem;
}

.main-nav .dropdown-menu {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 0.5rem 0;
}

.main-nav .dropdown-item {
    padding: 0.5rem 1.25rem;
    font-size: 0.88rem;
}

.main-nav .dropdown-item:hover {
    border-radius: 4px;
}


/* ---------- 6. FEATURE-GRID (Pro-Domain Settings) — CLEANER ---------- */

.powered-design .media.flex-column {
    padding: 1.5rem 1rem;
    border-radius: 10px;
    transition: background-color 0.25s ease;
}

.powered-design .media.flex-column:hover {
    background-color: rgba(0,0,0,0.02);
}

.powered-design .media.flex-column h5 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.powered-design .media.flex-column p {
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: left !important;
}

/* Screenshot-Bilder: Einheitliche Rundung */
.powered-design .rounded.tilt {
    border-radius: 12px;
    overflow: hidden;
}
.powered-design .rounded.tilt figure {
    margin: 0;
}
.powered-design .rounded.tilt img {
    display: block;
    width: 100%;
}


/* ---------- 7. FEATURE HIGHLIGHTS (links/rechts) — AUSGEWOGENER ---------- */

.features-cant-miss .list-unstyled li.media {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.features-cant-miss .list-unstyled li.media:last-child {
    border-bottom: none;
}

.features-cant-miss .list-unstyled li.media h5 {
    font-size: 1.05rem;
}

.features-cant-miss .list-unstyled li.media p {
    font-size: 0.92rem;
    line-height: 1.6;
}


/* ---------- 8. MULTISHOP/DOMAIN-GRUPPEN SECTION — AUSGERICHTET ---------- */

/* Zwei-Spalten-Layout: Bessere Trennung */
.powered-design .row.gap-y > .col-md-6 > .section-heading {
    padding: 1.5rem;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
    height: 100%;
}

/* Listen in Multishop: Besser lesbar */
.powered-design .list-unstyled.lead li {
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0.35rem 0;
}

/* 3-Spalten Box am Ende */
.powered-design .rounded.overflow-hidden.shadow-box {
    border-radius: 16px;
}


/* ---------- 9. VALUE PROPOSITION — BESSER LESBAR ---------- */

.alter3-partners .section-heading h3 {
    font-size: 1.6rem;
    line-height: 1.35;
}

.alter3-partners p.lead {
    font-size: 1rem;
    line-height: 1.7;
}

.alter3-partners p {
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ---------- 10. HERO BANNER SLIDER — AUFGERÄUMTER ---------- */

.hero-banner-section .section-heading {
    margin-bottom: 32px;
}

.hero-slider {
    border-radius: 12px;
    overflow: hidden;
}

.hero-slider__caption {
    text-align: center;
}


/* ---------- 11. PRICING — MODERNER ---------- */

.pricing-plans-options {
    border-radius: 16px;
    overflow: hidden;
}

.pricing-plan .p-5 {
    border-radius: 0;
}

.pricing-plan.best-value {
    border-radius: 16px;
    z-index: 2;
    position: relative;
}

.pricing-plan .pricing-value {
    font-size: 2.5rem;
}

/* Strikeprice sauberer */
.strikeprice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}


/* ---------- 12. FAQ — SAUBERER ---------- */

.faqs-dd .card {
    border-radius: 10px;
    overflow: hidden;
    border: none;
}

.faqs-dd .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.faqs-dd .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.faqs-dd .card-body {
    font-size: 0.92rem;
    line-height: 1.65;
}


/* ---------- 13. DOMAINBOX SECTION — KLARER ---------- */

section.domainbox {
    background: #f8f9fb;
}

section.domainbox .section-heading .rounded-pill {
    display: inline-flex;
    align-items: center;
}

section.domainbox .section-heading h2 {
    margin-top: 1rem;
}


/* ---------- 14. BACKUP/INTEGRATION BUBBLES — RUHIGER ---------- */

.integration-bubbles .bubble {
    opacity: 0.85;
}

.integration-bubbles .bubble .badge {
    font-size: 0.7rem;
    white-space: nowrap;
}


/* ---------- 15. WHY CHOOSE US — AUFGERÄUMTER ---------- */

.why-choose-us .why-icon-list .list-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.why-choose-us .why-icon-list .list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.why-choose-us .why-icon-list h5 {
    font-size: 1.05rem;
}

.why-choose-us .why-icon-list p {
    font-size: 0.92rem;
    line-height: 1.6;
}


/* ---------- 16. FOOTER — MODERNER ---------- */

footer.site-footer {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

footer .logo {
    margin-bottom: 1rem;
}


/* ---------- 17. BUTTONS — KONSISTENTER ---------- */

.btn-rounded {
    border-radius: 50px;
}

.btn-lg {
    font-size: 0.95rem;
    padding: 0.85rem 2rem;
}

.btn-primary,
.btn-alternate {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-alternate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.more-link.btn {
    font-size: 0.9rem;
}


/* ---------- 18. TYPOGRAPHY — BESSERE HIERARCHIE ---------- */

/* H2: Einheitlich über alle Sections */
.section-heading h2,
.section-heading h2.heading-line {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .section-heading h2,
    .section-heading h2.heading-line {
        font-size: 2.25rem;
    }
}

/* Lead-Text: Einheitliche Größe */
.section-heading p.lead {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Heading-Line Unterstrich: Dezenter */
.heading-line:after {
    height: 3px;
    border-radius: 2px;
    opacity: 0.7;
}


/* ---------- 19. GENERAL POLISH ---------- */

/* Weichere Schatten überall */
.shadow-box {
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.shadow-hover:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

.shadow-lg {
    box-shadow: 0 8px 30px rgba(0,0,0,0.10) !important;
}

/* Images: Rounded corners */
.img-responsive {
    border-radius: 4px;
}

/* Icon-Boxes: Konsistenter */
.icon-box.icon-xl {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box .icon {
    font-size: 1.8rem;
}

/* Video: Abgerundete Ecken */
#productVideo {
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}


/* ---------- 20. ISOMETRIC MOCKUPS — WENIGER CHAOTISCH ---------- */

.isometric-mockups {
    opacity: 0.90;
}


/* ---------- 21. CONTACT CARDS ---------- */

section:last-of-type .rounded.media {
    border-radius: 12px;
    transition: transform 0.25s ease;
}

section:last-of-type .rounded.media:hover {
    transform: translateY(-3px);
}


/* ==========================================================================
   UNTERSEITEN-SPEZIFISCHE VERBESSERUNGEN
   (Sprachdomains, Google Shopping, Statistik, Multishop)
   ========================================================================== */


/* ---------- 23. HERO-SCREENSHOT (Unterseiten) ---------- */

.header-screenshot {
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: perspective(1200px) rotateY(-8deg) rotateX(1deg);
}

.header-screenshot:hover {
    transform: perspective(1200px) rotateY(-4deg) rotateX(0.5deg);
}


/* ---------- 24. TEXT-LESBARKEIT UNTERSEITEN ---------- */

/* Justify entfernen — links-bündig ist besser lesbar */
p.lead[style*="text-align: justify"],
.section-heading p.lead[style*="text-align: justify"] {
    text-align: left !important;
}

/* Lange Textblöcke: Bessere Lesbarkeit */
.alter3-partners .col-md-10 p.lead,
.alter3-partners .col-md-8 p.lead,
.powered-design .col-md-10 p.lead {
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
    color: #4a5568;
}

/* Fettgedruckte Spans in Fließtext: Etwas hervorgehoben */
p.lead .font-weight-normal,
p .font-weight-normal {
    color: #1a202c;
}

/* Maximale Lesebreite für sehr lange Absätze */
.alter3-partners .col-md-10 > .section-heading + p,
.alter3-partners .col-md-10 > p,
.alter3-partners .col-md-8 > .section-heading + p,
.alter3-partners .col-md-8 > p {
    max-width: 75ch;
}


/* ---------- 25. EINSTELLUNGS-LISTE (Sprachdomains h4+p Paare) ---------- */

.powered-design .col-md-10 h4.bold {
    font-size: 1.1rem;
    padding: 0.75rem 0 0.5rem;
    border-bottom: 2px solid rgba(0,0,0,0.06);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.powered-design .col-md-10 h4.bold i {
    font-size: 0.9rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(108, 99, 255, 0.08);
}

.powered-design .col-md-10 h4.bold + p {
    font-size: 0.92rem;
    line-height: 1.7;
    padding-bottom: 1rem;
    margin-bottom: 0;
}


/* ---------- 26. VERGLEICHS-BOXEN (Multishop-Seite) ---------- */

/* Negativbox (mehrere Installationen) */
.alter3-partners .rounded.bg-contrast.shadow-lg h4.text-danger {
    font-size: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(220, 53, 69, 0.15);
}

/* Positivbox (multiDomain) */
.alter3-partners .rounded.bg-contrast.shadow-lg h4.text-primary {
    font-size: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0, 123, 255, 0.15);
}

/* Absätze in Vergleichsboxen */
.alter3-partners .rounded.bg-contrast.shadow-lg p.text-muted {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.alter3-partners .rounded.bg-contrast.shadow-lg p.text-muted:last-child,
.alter3-partners .rounded.bg-contrast.shadow-lg p.text-muted.mb-0 {
    border-bottom: none;
    padding-bottom: 0;
}

/* Boxes gleiche Höhe */
@media (min-width: 768px) {
    .alter3-partners .row.gap-y > .col-md-6 > .rounded.bg-contrast.shadow-lg {
        height: 100%;
    }
}


/* ---------- 27. FEATURE-LISTEN (features-cant-miss auf Unterseiten) ---------- */

/* Icon-Alignment für Unterseiten-Feature-Listen */
.features-cant-miss .list-unstyled > li.media > i.pe {
    flex-shrink: 0;
    width: 48px;
    text-align: center;
}

.features-cant-miss .list-unstyled > li.media .media-body h5 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.features-cant-miss .list-unstyled > li.media .media-body p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #4a5568;
}


/* ---------- 28. PRAXIS-BEISPIEL LISTEN ---------- */

/* Bulletpoint-Listen in Praxisbeispielen besser lesbar */
.alter3-partners .list-unstyled.text-muted li {
    font-size: 0.92rem;
    line-height: 1.6;
    padding: 0.5rem 0;
    padding-left: 0.5rem;
    border-left: 3px solid rgba(108, 99, 255, 0.2);
    margin-bottom: 0.5rem;
    border-radius: 0 4px 4px 0;
    background: rgba(0,0,0,0.01);
}


/* ---------- 29. STATISTIK-SEITE: DASHBOARD-SCREENSHOT ---------- */

/* Dashboard-Bild: Besser eingerahmt */
#statistik-dashboard .rounded.tilt {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}

#statistik-dashboard .rounded.tilt figure {
    margin: 0;
}

#statistik-dashboard .rounded.tilt img {
    display: block;
    width: 100%;
}

/* Statistik-Text: Bessere Trennung der Abschnitte */
#statistik-dashboard .section-heading p.lead {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

#statistik-dashboard .section-heading p.lead:last-of-type,
#statistik-dashboard .section-heading p.text-muted:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


/* ---------- 30. BOT-ERKENNUNG SCHICHTEN ---------- */

/* Die 4 Schichten: Nummerierung-Effekt */
#bot-erkennung .list-unstyled > li.media {
    position: relative;
    padding-left: 0;
}

#bot-erkennung .list-unstyled > li.media h5 {
    font-size: 1.05rem;
}

#bot-erkennung .list-unstyled > li.media p {
    font-size: 0.88rem;
    line-height: 1.65;
}

/* Letzter Text unter der Liste */
#bot-erkennung > .container > .row > .col-md-6 > .mt-5 p.lead {
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 1.25rem;
    background: rgba(108, 99, 255, 0.04);
    border-radius: 10px;
    border-left: 4px solid rgba(108, 99, 255, 0.3);
}


/* ---------- 31. CTA SECTIONS (Unterseiten) ---------- */

/* CTA-Sections auf Unterseiten: Sauberer */
.start-free .section-heading {
    margin-bottom: 2rem;
}

.start-free .section-heading p.lead {
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left !important;
}

/* CTA-Buttons: Mehr Abstand nach oben */
.start-free .nav {
    margin-top: 1rem;
}


/* ---------- 32. GOOGLE SHOPPING: HOW IT WORKS ---------- */

/* Funktionsweise-Absätze: Visuelle Breaks */
.powered-design .col-md-10 p.lead.text-muted {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.powered-design .col-md-10 p.lead.text-muted:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}


/* ---------- 33. IPHONE MOCKUP AUF UNTERSEITEN ---------- */

/* iPhone dezenter auf Feature-Seiten */
.features-cant-miss .iphone.light {
    opacity: 0.88;
    transform: scale(0.92);
}


/* ---------- 34. BACK LINK SECTION ---------- */

/* "Zurück zur Übersicht" Section: Etwas kompakter */
section[style*="background: #fff"] .col-md-10 p.lead {
    font-size: 0.95rem;
    text-align: left !important;
}


/* ---------- 22. MOBILE OPTIMIERUNGEN ---------- */

@media (max-width: 767.98px) {
    .section-heading h2,
    .section-heading h2.heading-line {
        font-size: 1.6rem;
    }

    .section-heading p.lead {
        font-size: 0.95rem;
    }

    .rotated-cards .card .card-body p.lead {
        font-size: 0.88rem;
    }

    .alter3-header h1.extra-bold {
        font-size: 1.8rem;
    }

    .alter3-header .lead {
        font-size: 0.92rem;
    }

    /* Weniger Shapes auf Mobile */
    .shapes-container .animation-shape,
    .shapes-container .shape-ring,
    .shapes-container .shape-circle,
    .shapes-container .shape-triangle {
        opacity: 0.08;
    }

    /* Bubbles auf Mobile komplett ausblenden */
    .bubbles-wrapper .bubble.bubbleText {
        opacity: 0.12;
    }

    /* Cards: Stack clean */
    .rotated-cards .card {
        margin-bottom: 1.5rem;
    }

    /* Multishop zwei-Spalten auf Mobile: Abstand */
    .powered-design .row.gap-y > .col-md-6 > .section-heading {
        margin-bottom: 2rem;
        padding: 1rem;
    }
}