/* Zentrale Grundstruktur und mobile Optimierung
   Diese Datei dient als gemeinsamer Feinschliff für alle statischen HTML-Seiten. */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey-light: #dcdcdc;
  --color-grey-medium: #c8c8c8;
  --color-grey-dark: #b0b0b0;
  --color-blue-dark: #34495e;
  --color-blue-dark-alt: #2c3e50;
  --color-blue-light: #6ea5e0;
  --color-blue-light-hover: #5b8bc0;
  --color-gold: #c2aa4f;
  --color-success: #22c55e;
  --color-danger: #ef4444;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
}

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

/* Einheitlicher Unterseiten-Header */
.page-header {
  background: var(--navy, var(--color-blue-dark));
  color: var(--white, var(--color-white));
  padding: clamp(64px, 8vw, 100px) 20px clamp(42px, 5vw, 60px);
  text-align: center;
}

.page-header .breadcrumb,
.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--color-grey-dark);
  margin-bottom: 30px;
}

.breadcrumb a {
  color: var(--gold, var(--color-gold));
}

.page-header h1 {
  color: var(--white, var(--color-white));
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 20px;
}

.page-header p {
  color: var(--color-grey-light);
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  max-width: 900px;
  margin: 0 auto;
}

/* Einheitlicher Footer für Unterseiten; Startseite behält ihren erweiterten Anfragebereich darüber. */
footer {
  background: var(--navy, var(--color-blue-dark));
  color: var(--white, var(--color-white));
  padding: 80px 20px 30px;
  text-align: center;
}

footer h2 {
  color: var(--gold, var(--color-gold)) !important;
}

footer p {
  color: var(--color-grey-dark);
}

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
}

footer .footer-links a {
  color: var(--white, var(--color-white)) !important;
  opacity: 0.92;
}

footer .footer-links a:hover {
  color: var(--gold, var(--color-gold)) !important;
  opacity: 1;
}

/* Mobile Navigation und Lesbarkeit */
@media (max-width: 1200px) {
  .nav-container {
    height: 72px;
  }

  .nav-wrapper {
    top: 72px !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .dropdown,
  .nested-dropdown {
    width: 100%;
    padding: 8px 0 !important;
  }

  .dropbtn,
  .nested-dropbtn,
  .nav-center > a,
  .nav-right > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .dropdown-content,
  .nested-dropdown-content {
    width: 100%;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
  }

  .logo {
    font-size: 1.1rem !important;
  }

  .page-header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .content-container,
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}



/* Vergleich PKV vs. GKV */
.table-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.comparison-table thead th {
    background: var(--navy);
    color: var(--white);
    padding: 16px 18px;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
}
.comparison-table tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid #e6ebf1;
    vertical-align: top;
}
.comparison-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.chart-box {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 24px;
    margin-top: 20px;
}
.chart-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.source-box {
    margin-top: 20px;
}
@media (max-width: 768px) {
    .comparison-table {
        min-width: 680px;
    }
    .chart-box {
        padding: 14px;
    }
}

/* Krankentagegeld-Rechner */
.calculator-card { background:#ffffff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.08); padding:28px; margin-top:20px; }
.calculator-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
.calculator-grid label { display:flex; flex-direction:column; gap:8px; font-weight:600; }
.calculator-grid input, .calculator-grid select { width:100%; border:1px solid #b0b0b0; border-radius:12px; padding:13px 14px; font:inherit; background:#ffffff; }
.input-wrapper { display:flex; align-items:center; border:1px solid #b0b0b0; border-radius:12px; background:#ffffff; overflow:hidden; }
.input-wrapper input { border:0; border-radius:0; }
.input-wrapper span { padding:0 14px; color:var(--text-muted); font-weight:700; }
.kt-button { border:0; cursor:pointer; }
.kt-result { margin-top:22px; border-radius:14px; background:#f1f5f9; padding:20px; }
.kt-result-placeholder { display:flex; align-items:center; gap:12px; color:var(--text-muted); }
.kt-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kt-result-grid div { background:#ffffff; border-radius:12px; padding:16px; border-left:4px solid var(--accent); }
.kt-result-grid span { display:block; font-size:0.9rem; color:var(--text-muted); margin-bottom:6px; }
.kt-result-grid strong { display:block; font-family:'Poppins', sans-serif; font-size:1.25rem; color:var(--navy); }
.kt-details { margin-top:16px; }
.kt-details p + p { margin-top:8px; }
.kt-warning { background:#ffffff; border-left:4px solid #c2aa4f; border-radius:12px; padding:16px; }
@media (max-width:900px) { .calculator-grid, .kt-result-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .calculator-card { padding:18px; } }

.fixed-value input[readonly] {
    background: #f1f5f9;
    color: var(--text-muted);
    cursor: not-allowed;
}
#ktPkvField,
#ktRvField {
    display: flex;
}

/* Krankentagegeld-Rechner Ergebnis im Versorgungslücken-Format */
.kt-summary-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
}
.kt-summary-box h4 {
    margin-bottom: 18px;
}
.kt-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid #e6ebf1;
}
.kt-line span {
    color: var(--text-dark);
}
.kt-line strong {
    white-space: nowrap;
}
.kt-total {
    margin-top: 10px;
    border-bottom: 0;
    font-weight: 800;
}
.kt-total span,
.kt-total strong {
    font-size: 1.08rem;
}
.kt-recommendation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #b0b0b0;
}
.kt-recommendation span {
    font-weight: 800;
    font-size: 1.1rem;
}
.kt-recommendation strong {
    font-family: 'Poppins', sans-serif;
    color: var(--accent);
    font-size: 1.8rem;
}
@media (max-width: 768px) {
    .kt-line,
    .kt-recommendation {
        flex-direction: column;
        gap: 4px;
    }
}

/* Kontaktformular und PKV-Ausbau */
.contact-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:28px;align-items:start}.contact-form-card,.contact-info-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:28px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.lead-form label{display:flex;flex-direction:column;gap:8px;font-weight:600}.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid #b0b0b0;border-radius:12px;padding:13px 14px;font:inherit;background:#fff}.full-field{margin-top:18px}.privacy-check{flex-direction:row!important;align-items:flex-start;gap:12px!important;margin:18px 0;font-weight:400!important}.privacy-check input{width:auto;margin-top:4px}.form-note{margin-top:14px;font-size:.9rem;color:var(--text-muted)}.contact-step{border-left:4px solid var(--accent);padding-left:14px;margin:18px 0}.compact-info{margin-top:22px}.dropdown-content{max-height:min(80vh,760px);overflow-y:auto}@media(max-width:900px){.contact-layout,.form-grid{grid-template-columns:1fr}.contact-form-card,.contact-info-card{padding:20px}}

/* =========================================================
   Version 008: Responsive Desktop & Mobile Optimierung
   ========================================================= */

:root {
    --container-max: 1180px;
    --section-gap-desktop: 72px;
    --section-gap-mobile: 42px;
}

/* Grundsätzlich bessere Darstellung */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
}

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

button, input, select, textarea {
    font: inherit;
}

/* Desktop: angenehmere Lesebreite und harmonischere Container */
.content-container,
.container,
.nav-container {
    width: min(100% - 40px, var(--container-max));
    margin-left: auto;
    margin-right: auto;
}

.content-container {
    padding-top: 0;
}

.content-section {
    margin: var(--section-gap-desktop) auto;
}

.content-section > p,
.content-section .section-intro {
    max-width: 920px;
}

/* Header / Hero der Unterseiten */
.page-header {
    padding: clamp(64px, 8vw, 110px) 20px;
    text-align: center;
}

.page-header h1 {
    font-size: clamp(2rem, 4.2vw, 4rem);
    line-height: 1.08;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
}

.page-header p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 920px;
    margin: 16px auto 0;
}

/* Navigation Desktop */
nav {
    isolation: isolate;
}

.nav-container {
    height: auto;
    min-height: 76px;
}

.nav-center,
.nav-right {
    min-width: 0;
}

.dropdown-content,
.nested-dropdown-content {
    max-height: min(78vh, 720px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Dropdowns dürfen auf kleineren Desktopbreiten nicht aus dem Viewport laufen */
.nav-center .dropdown:last-child .dropdown-content,
.nav-right .dropdown:last-child .dropdown-content {
    right: 0;
    left: auto;
}

.nested-dropdown-content {
    max-width: calc(100vw - 40px);
}

/* Karten harmonischer */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.bento-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bento-card p {
    flex: 1;
}

.bento-card .btn {
    align-self: flex-start;
}

/* Info-Boxen optisch ruhiger */
.info-box {
    overflow-wrap: anywhere;
}

.info-box + .info-box {
    margin-top: 18px;
}

/* Buttons besser klickbar */
.btn,
button.btn,
a.btn {
    min-height: 46px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

/* Tabellen mobil scrollbar, Desktop sauber */
.table-wrap,
.table-card,
.comparison-table {
    max-width: 100%;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    border-spacing: 0;
}

/* Formulare */
.contact-layout,
.calculator-grid,
.form-grid,
.kt-result-grid {
    min-width: 0;
}

.lead-form input,
.lead-form select,
.lead-form textarea,
.calculator-grid input,
.calculator-grid select,
.input-wrapper {
    min-height: 46px;
}

textarea {
    resize: vertical;
}

/* Rechner und Diagramme */
.calculator-card,
.chart-box,
.contact-form-card,
.contact-info-card,
.table-card {
    max-width: 100%;
}

.kt-result {
    overflow-wrap: anywhere;
}

.kt-summary-box {
    max-width: 100%;
}

.kt-line,
.kt-recommendation {
    min-width: 0;
}

/* Footer */
footer {
    overflow-x: hidden;
}

.footer-content,
.footer-grid {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Tablet */
@media (max-width: 1100px) {
    .nav-wrapper {
        margin-left: 22px;
    }

    .nav-center {
        gap: 16px;
    }

    .nav-right {
        gap: 14px;
    }

    .nav-center > a,
    .dropbtn {
        font-size: 0.9rem;
    }

    .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-section {
        margin: 58px auto;
    }
}

/* Mobile Navigation */
@media (max-width: 900px) {
    .content-container,
    .container,
    .nav-container {
        width: min(100% - 28px, var(--container-max));
    }

    .nav-container {
        min-height: 68px;
        padding-left: 0;
        padding-right: 0;
    }

    .logo {
        font-size: 1.25rem;
    }

    .logo i {
        font-size: 1.45rem;
    }

    .hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        color: var(--text-dark);
        font-size: 1.4rem;
        cursor: pointer;
        border-radius: 10px;
    }

    .hamburger:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .nav-wrapper {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        margin-left: 0;
        background: var(--white);
        border-top: 1px solid #b0b0b0;
        box-shadow: 0 18px 30px rgba(0,0,0,0.12);
        padding: 14px;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 4000;
    }

    .nav-wrapper.active,
    .nav-wrapper.open,
    #nav-links.active,
    #nav-links.open {
        display: block;
    }

    .nav-center,
    .nav-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .nav-center > a,
    .nav-right > a,
    .dropbtn,
    .nested-dropbtn,
    .dropdown-content a,
    .nested-dropdown-content a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        padding: 12px 14px !important;
        border-bottom: 1px solid #edf2f7;
        font-size: 0.98rem;
        color: var(--text-dark);
    }

    .dropdown,
    .nested-dropdown {
        position: static;
        padding: 0;
        width: 100%;
    }

    .dropdown-content,
    .nested-dropdown-content {
        display: block !important;
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: #f8fafc;
        overflow: visible;
    }

    .nested-dropdown-content {
        margin-left: 0;
        background: #ffffff;
    }

    .dropdown-content a {
        padding-left: 24px !important;
    }

    .nested-dropdown-content a {
        padding-left: 34px !important;
    }

    .dropdown:hover .dropdown-content,
    .nested-dropdown:hover .nested-dropdown-content {
        animation: none;
    }

    .nav-right {
        margin-top: 8px;
    }

    .nav-right .btn,
    .nav-right a.btn {
        justify-content: center;
        margin-top: 10px;
    }

    /* Wenn JS anders arbeitet, trotzdem mobile Menü sichtbar machen */
    body.menu-open .nav-wrapper,
    body.nav-open .nav-wrapper {
        display: block;
    }

    .page-header {
        padding: 54px 14px;
    }

    .content-section {
        margin: var(--section-gap-mobile) auto;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bento-card,
    .info-box,
    .contact-form-card,
    .contact-info-card,
    .calculator-card,
    .chart-box,
    .table-card {
        border-radius: 14px;
    }

    .contact-layout,
    .form-grid,
    .calculator-grid,
    .kt-result-grid {
        grid-template-columns: 1fr !important;
    }

    .cta-section {
        padding: 42px 18px !important;
        border-radius: 16px;
    }

    .cta-section h2 {
        font-size: clamp(1.55rem, 7vw, 2.2rem);
    }
}

/* Kleine Smartphones */
@media (max-width: 600px) {
    .content-container,
    .container,
    .nav-container {
        width: min(100% - 22px, var(--container-max));
    }

    h1 {
        font-size: clamp(1.9rem, 9vw, 2.55rem);
    }

    h2 {
        font-size: clamp(1.45rem, 7vw, 2rem);
    }

    h3 {
        font-size: clamp(1.18rem, 5vw, 1.45rem);
    }

    p,
    li,
    td,
    th,
    label,
    input,
    select,
    textarea {
        font-size: 0.98rem;
    }

    .page-header {
        padding: 44px 10px;
    }

    .content-section {
        margin: 36px auto;
    }

    .bento-card,
    .info-box,
    .contact-form-card,
    .contact-info-card,
    .calculator-card,
    .chart-box {
        padding: 18px !important;
    }

    .bento-card i {
        font-size: 1.65rem;
    }

    .btn,
    button.btn,
    a.btn {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
    }

    .nav-right .btn,
    .bento-card .btn,
    .info-box .btn {
        width: 100%;
    }

    .kt-line,
    .kt-recommendation {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .kt-recommendation strong {
        font-size: 1.55rem;
    }

    .table-card {
        margin-left: -2px;
        margin-right: -2px;
    }

    .comparison-table {
        min-width: 640px;
        font-size: 0.92rem;
    }

    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 12px 13px;
    }

    .chart-box {
        padding: 10px !important;
    }

    .chart-image {
        border-radius: 8px;
    }

    footer {
        text-align: center;
    }
}

/* Sehr kleine Geräte */
@media (max-width: 380px) {
    .logo {
        font-size: 1.08rem;
    }

    .page-header h1 {
        font-size: 1.85rem;
    }

    .page-header p {
        font-size: 0.96rem;
    }

    .comparison-table {
        min-width: 600px;
    }
}

/* Bessere Bedienbarkeit für Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Version 009: PKV-Hub und schlankere PKV-Navigation */
.pkv-hub-section {
    scroll-margin-top: 100px;
}

.pkv-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

.pkv-hub-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(176,176,176,0.35);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pkv-hub-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: var(--accent);
    font-size: 1.35rem;
    margin-bottom: 16px;
}

.pkv-hub-card h3 {
    margin-bottom: 10px;
}

.pkv-hub-card p {
    color: var(--text-muted);
    margin-bottom: 18px;
}

.pkv-hub-card ul {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.pkv-hub-card li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    font-weight: 600;
}

.pkv-hub-card li a::after {
    content: "→";
    color: var(--accent);
    font-weight: 800;
}

.pkv-hub-card li a:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateX(2px);
}

.pkv-hub-card li a:hover::after {
    color: #ffffff;
}

.pkv-hub-card-highlight {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #ffffff;
}

.pkv-hub-card-highlight h3,
.pkv-hub-card-highlight p {
    color: #ffffff;
}

.pkv-hub-card-highlight .pkv-hub-icon {
    background: rgba(255,255,255,0.12);
    color: var(--gold);
}

.pkv-hub-card-highlight .btn {
    margin-top: auto;
    background: var(--gold);
    color: var(--navy) !important;
}

@media (max-width: 900px) {
    .pkv-hub-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .pkv-hub-card {
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .pkv-hub-card li a {
        padding: 12px;
    }
}

/* Version 011: Aktuelles-Kategorie */
.news-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--accent);
}

/* Version 014: Hubs, Checklisten und Rechner */
.checklist-box ul {
    display: grid;
    gap: 12px;
}
.checklist-box li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.checklist-box li i {
    color: var(--accent);
    margin-top: 4px;
}
.start-trust-section .bento-card,
.beratung-ablauf-section .bento-card {
    border-top: 4px solid var(--accent);
}

/* Version 015: Neue Home-Seite */
.home-main {
    background: #f4f4f4;
}

.home-hero {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #ffffff;
    padding: clamp(64px, 9vw, 120px) 0;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 42px;
    align-items: center;
}

.eyebrow {
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.home-hero h1 {
    color: #ffffff;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    line-height: 1.04;
    margin-bottom: 18px;
}

.hero-lead {
    color: rgba(255,255,255,0.86);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    max-width: 760px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.btn-secondary {
    background: rgba(255,255,255,0.12);
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.28);
}

.trust-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.trust-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    font-size: 0.92rem;
}

.trust-points i {
    color: var(--gold);
}

.home-hero-card {
    background: #ffffff;
    color: var(--text-dark);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 22px 50px rgba(0,0,0,0.22);
}

.home-hero-card h2 {
    color: var(--navy);
    font-size: 1.55rem;
}

.quick-links {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.quick-links a,
.news-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #f1f5f9;
    border: 1px solid #e6ebf1;
    font-weight: 700;
}

.quick-links a:hover,
.news-list a:hover {
    background: var(--accent);
    color: #ffffff;
}

.home-section {
    padding: clamp(48px, 7vw, 84px) 0;
}

.home-section:nth-of-type(even) {
    background: #ffffff;
}

.section-heading {
    max-width: 850px;
    margin-bottom: 30px;
}

.section-heading h2,
.home-explain h2,
.news-preview h2,
.home-final-cta h2 {
    color: var(--navy);
}

.home-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.home-topic-card,
.step-card,
.audience-card,
.faq-preview-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    border: 1px solid rgba(176,176,176,0.32);
}

.home-section:nth-of-type(even) .home-topic-card,
.home-section:nth-of-type(even) .step-card,
.home-section:nth-of-type(even) .audience-card,
.home-section:nth-of-type(even) .faq-preview-card {
    background: #f8fafc;
}

.home-topic-card {
    display: block;
    color: var(--text-dark);
}

.home-topic-card i,
.audience-card i {
    color: var(--accent);
    font-size: 1.8rem;
    margin-bottom: 14px;
}

.home-topic-card h3,
.step-card h3,
.audience-card h3,
.faq-preview-card h3 {
    color: var(--navy);
    margin-bottom: 8px;
}

.home-topic-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.explain-grid,
.news-grid,
.final-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 34px;
    align-items: center;
}

.explain-card {
    background: var(--navy);
    color: #ffffff;
    border-radius: 22px;
    padding: 28px;
    display: grid;
    gap: 14px;
}

.explain-card div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
}

.explain-card i {
    color: var(--gold);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 800;
    margin-top: 16px;
}

.steps-grid,
.audience-grid,
.faq-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.audience-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.step-card span {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--accent);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 14px;
}

.news-list {
    display: grid;
    gap: 12px;
}

.center-action {
    text-align: center;
    margin-top: 24px;
}

.home-final-cta {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #ffffff;
    padding: 52px 0;
}

.home-final-cta h2 {
    color: #ffffff;
}

.home-final-cta p {
    color: rgba(255,255,255,0.82);
}

.home-final-cta .btn {
    justify-self: end;
    background: var(--gold);
    color: var(--navy) !important;
}

@media (max-width: 1000px) {
    .home-hero-grid,
    .explain-grid,
    .news-grid,
    .final-cta-grid {
        grid-template-columns: 1fr;
    }

    .home-final-cta .btn {
        justify-self: start;
    }

    .home-topic-grid,
    .steps-grid,
    .faq-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .home-hero {
        padding: 46px 0;
    }

    .home-hero-card {
        padding: 20px;
        border-radius: 18px;
    }

    .hero-actions,
    .trust-points {
        flex-direction: column;
    }

    .trust-points span {
        width: 100%;
    }

    .home-topic-grid,
    .steps-grid,
    .audience-grid,
    .faq-preview-grid {
        grid-template-columns: 1fr;
    }

    .home-topic-card,
    .step-card,
    .audience-card,
    .faq-preview-card {
        padding: 20px;
    }
}

/* Version 016: Home-Hero ohne Themenkarte */
.home-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.home-hero-content {
    max-width: 980px;
}

@media (min-width: 1001px) {
    .home-hero-content {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .home-hero-content .hero-actions,
    .home-hero-content .trust-points {
        justify-content: center;
    }

    .home-hero-content .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Version 025: Index-Hero mit Foto */
.index-photo-hero {
    background: #d6d6d6;
    padding: clamp(64px, 8vw, 120px) 0;
}

.index-photo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(32px, 7vw, 90px);
    align-items: center;
}

.index-photo-eyebrow {
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: clamp(0.9rem, 1.2vw, 1.15rem);
    margin-bottom: 24px;
}

.index-photo-hero h1 {
    color: #000000;
    font-size: clamp(3.4rem, 7vw, 7.3rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 28px;
}

.index-photo-hero h1 span {
    color: var(--accent);
}

.index-photo-lead {
    max-width: 650px;
    color: #222222;
    font-size: clamp(1.05rem, 1.8vw, 1.45rem);
    line-height: 1.55;
    margin-bottom: 34px;
}

.index-photo-cta {
    padding: 17px 34px;
    border-radius: 14px;
}

.index-photo-hero-image {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.index-photo-hero-image img {
    display: block;
    width: 100%;
    height: clamp(320px, 32vw, 520px);
    object-fit: cover;
    object-position: center;
}

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

    .index-photo-hero {
        padding: 44px 0 60px;
    }

    .index-photo-hero-image {
        order: -1;
    }

    .index-photo-hero h1 {
        font-size: clamp(3rem, 14vw, 5.5rem);
    }
}

@media (max-width: 600px) {
    .index-photo-hero-image img {
        height: 280px;
    }

    .index-photo-cta {
        width: 100%;
        justify-content: center;
    }
}

/* Version 026: reduzierte Index-Seite */
.index-main-v026 {
    background: #d6d6d6;
}

.index-hero-v026 {
    background: #d6d6d6;
    padding: clamp(62px, 8vw, 118px) 0 clamp(52px, 7vw, 96px);
}

.index-hero-v026-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
    gap: clamp(32px, 7vw, 86px);
    align-items: center;
}

.index-eyebrow-v026 {
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: clamp(0.82rem, 1vw, 1rem);
    margin-bottom: 18px;
}

.index-hero-v026 h1 {
    color: #050505;
    font-size: clamp(3rem, 6.5vw, 6.6rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    margin-bottom: 26px;
}

.index-hero-v026 h1 span {
    color: var(--accent);
}

.index-hero-v026-lead {
    max-width: 680px;
    color: #222222;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.6;
    margin-bottom: 30px;
}

.index-hero-v026-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.index-secondary-v026 {
    background: #ffffff;
    color: var(--navy) !important;
    border: 1px solid rgba(0,0,0,0.08);
}

.index-hero-v026-image {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.index-hero-v026-image img {
    display: block;
    width: 100%;
    height: clamp(330px, 33vw, 520px);
    object-fit: cover;
    object-position: center;
}

.index-trustbar-v026 {
    background: var(--navy);
    color: #ffffff;
    padding: 18px 0;
}

.index-trustbar-v026-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.index-trustbar-v026 div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 800;
}

.index-trustbar-v026 i {
    color: var(--gold);
}

.index-section-v026,
.index-explain-v026 {
    padding: clamp(52px, 7vw, 88px) 0;
}

.index-section-v026:nth-of-type(odd) {
    background: #ffffff;
}

.index-section-heading-v026 {
    max-width: 850px;
    margin-bottom: 30px;
}

.index-section-heading-v026 h2,
.index-explain-v026 h2,
.index-news-v026 h2,
.index-final-cta-v026 h2 {
    color: var(--navy);
}

.index-topic-grid-v026 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.index-topic-card-v026 {
    display: block;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    border: 1px solid rgba(176,176,176,0.32);
    color: var(--text-dark);
}

.index-topic-card-v026:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
}

.index-topic-card-v026 i {
    color: var(--accent);
    font-size: 1.85rem;
    margin-bottom: 14px;
}

.index-topic-card-v026 h3 {
    color: var(--navy);
    margin-bottom: 8px;
}

.index-explain-v026 {
    background: #f4f4f4;
}

.index-explain-v026-grid,
.index-news-v026-grid,
.index-final-cta-v026-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 34px;
    align-items: center;
}

.index-explain-box-v026 {
    background: var(--navy);
    color: #ffffff;
    border-radius: 22px;
    padding: 28px;
    display: grid;
    gap: 14px;
}

.index-explain-box-v026 div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
}

.index-explain-box-v026 i {
    color: var(--gold);
}

.index-news-v026 {
    background: #ffffff;
}

.index-news-list-v026 {
    display: grid;
    gap: 12px;
}

.index-news-list-v026 a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f1f5f9;
    border: 1px solid #e6ebf1;
    font-weight: 800;
}

.index-news-list-v026 a::after {
    content: "→";
    color: var(--accent);
    font-weight: 900;
}

.index-news-list-v026 a:hover {
    background: var(--accent);
    color: #ffffff;
}

.index-news-list-v026 a:hover::after {
    color: #ffffff;
}

.index-text-link-v026 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-weight: 800;
    margin-top: 16px;
}

.index-final-cta-v026 {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #ffffff;
    padding: 56px 0;
}

.index-final-cta-v026 h2 {
    color: #ffffff;
}

.index-final-cta-v026 p {
    color: rgba(255,255,255,0.84);
}

.index-final-cta-v026 .btn {
    justify-self: end;
    background: var(--gold);
    color: var(--navy) !important;
}

@media (max-width: 1000px) {
    .index-hero-v026-grid,
    .index-explain-v026-grid,
    .index-news-v026-grid,
    .index-final-cta-v026-grid {
        grid-template-columns: 1fr;
    }

    .index-hero-v026-image {
        order: -1;
    }

    .index-topic-grid-v026 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .index-final-cta-v026 .btn {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .index-hero-v026 {
        padding: 40px 0 52px;
    }

    .index-hero-v026 h1 {
        font-size: clamp(3rem, 15vw, 5.1rem);
    }

    .index-hero-v026-image img {
        height: 285px;
    }

    .index-hero-v026-actions {
        flex-direction: column;
    }

    .index-trustbar-v026-grid,
    .index-topic-grid-v026 {
        grid-template-columns: 1fr;
    }

    .index-trustbar-v026 div {
        justify-content: flex-start;
    }

    .index-topic-card-v026 {
        padding: 20px;
    }

    .index-final-cta-v026 .btn,
    .index-hero-v026-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Version 027: Index-Hero Bild vollständig sichtbar und ohne Überlagerung */
.index-hero-v026 {
    overflow: visible;
}

.index-hero-v026-grid {
    align-items: center !important;
}

.index-hero-v026-text {
    position: relative;
    z-index: 2;
}

.index-hero-v026-image {
    position: relative;
    z-index: 1;
    background: #ffffff;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-hero-v026-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 560px;
    object-fit: contain !important;
    object-position: center !important;
    background: #ffffff;
}

@media (max-width: 1000px) {
    .index-hero-v026-grid {
        gap: 28px !important;
    }

    .index-hero-v026-image {
        order: 0 !important;
        margin-top: 10px;
    }

    .index-hero-v026 h1 {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .index-hero-v026-image img {
        height: auto !important;
        max-height: none;
    }

    .index-hero-v026 {
        padding-top: 34px;
    }
}

/* Version 029: Index-Hero wiederhergestellt, Schrift/Bild sauber getrennt */
.index-hero-v026-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr) !important;
    gap: clamp(42px, 8vw, 110px) !important;
}

.index-hero-v026 h1 {
    font-size: clamp(2.65rem, 5.2vw, 5.45rem) !important;
    line-height: 1.08 !important;
    max-width: 680px;
}

.index-hero-v026-lead {
    max-width: 620px;
}

.index-hero-v026-image {
    margin-left: 0;
}

.index-hero-v026-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 1000px) {
    .index-hero-v026-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    .index-hero-v026-image {
        order: 0 !important;
    }

    .index-hero-v026 h1 {
        font-size: clamp(2.8rem, 12vw, 4.8rem) !important;
    }
}

@media (max-width: 700px) {
    .index-hero-v026 h1 {
        font-size: clamp(2.55rem, 13vw, 4.1rem) !important;
    }
}

/* Version 030: Index visuell geglättet und mobil optimiert */
.index-hero-v026 {
    padding: clamp(44px, 6vw, 84px) 0 clamp(42px, 5.5vw, 76px) !important;
}

.index-hero-v026-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(440px, 1.22fr) !important;
    gap: clamp(46px, 8vw, 120px) !important;
    align-items: center !important;
}

.index-hero-v026 h1 {
    font-size: clamp(2.7rem, 4.6vw, 4.95rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    max-width: 620px !important;
    margin-bottom: 22px !important;
}

.index-hero-v026-lead {
    max-width: 590px !important;
    font-size: clamp(1rem, 1.35vw, 1.18rem) !important;
    line-height: 1.55 !important;
    margin-bottom: 26px !important;
}

.index-hero-v026-actions {
    gap: 12px !important;
}

.index-hero-v026-image {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.16) !important;
    background: transparent !important;
}

.index-hero-v026-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.index-trustbar-v026 {
    padding: 16px 0 !important;
}

.index-trustbar-v026-grid div {
    font-size: 0.98rem !important;
}

.index-section-v026,
.index-explain-v026 {
    padding: clamp(46px, 6vw, 72px) 0 !important;
}

.index-section-heading-v026 {
    margin-bottom: 26px !important;
}

.index-section-heading-v026 h2,
.index-explain-v026 h2,
.index-news-v026 h2,
.index-final-cta-v026 h2 {
    font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
    line-height: 1.15 !important;
}

.index-topic-grid-v026 {
    gap: 20px !important;
}

.index-topic-card-v026 {
    min-height: 100% !important;
    padding: 22px !important;
    border-radius: 16px !important;
}

.index-topic-card-v026 h3 {
    font-size: 1.18rem !important;
}

.index-topic-card-v026 p {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
}

.index-explain-v026-grid,
.index-news-v026-grid,
.index-final-cta-v026-grid {
    gap: 30px !important;
}

.index-explain-box-v026 {
    padding: 24px !important;
    border-radius: 18px !important;
}

.index-news-list-v026 a {
    padding: 13px 15px !important;
    border-radius: 13px !important;
}

.index-final-cta-v026 {
    padding: 48px 0 !important;
}

@media (max-width: 1000px) {
    .index-hero-v026-grid {
        grid-template-columns: 1fr !important;
        gap: 26px !important;
    }

    .index-hero-v026-text {
        max-width: 760px !important;
    }

    .index-hero-v026-image {
        order: 0 !important;
        max-width: 760px !important;
    }

    .index-hero-v026 h1 {
        font-size: clamp(2.55rem, 8vw, 4.2rem) !important;
        max-width: 760px !important;
    }

    .index-hero-v026-lead {
        max-width: 720px !important;
    }

    .index-topic-grid-v026 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .index-explain-v026-grid,
    .index-news-v026-grid,
    .index-final-cta-v026-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .index-hero-v026 {
        padding: 30px 0 42px !important;
    }

    .index-eyebrow-v026 {
        font-size: 0.76rem !important;
        letter-spacing: 0.12em !important;
        margin-bottom: 12px !important;
    }

    .index-hero-v026 h1 {
        font-size: clamp(2.35rem, 11vw, 3.35rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 16px !important;
    }

    .index-hero-v026-lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .index-hero-v026-actions {
        flex-direction: column !important;
    }

    .index-hero-v026-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .index-hero-v026-image img {
        max-height: none !important;
    }

    .index-trustbar-v026-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .index-trustbar-v026-grid div {
        justify-content: flex-start !important;
        font-size: 0.96rem !important;
    }

    .index-topic-grid-v026 {
        grid-template-columns: 1fr !important;
    }

    .index-topic-card-v026 {
        padding: 18px !important;
    }

    .index-section-v026,
    .index-explain-v026 {
        padding: 38px 0 !important;
    }

    .index-explain-box-v026 {
        padding: 20px !important;
    }

    .index-news-list-v026 a {
        align-items: flex-start !important;
    }

    .index-final-cta-v026 {
        padding: 40px 0 !important;
    }

    .index-final-cta-v026 .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 380px) {
    .index-hero-v026 h1 {
        font-size: 2.18rem !important;
    }
}

/* Version 036: Nur Index-Hero sauber getrennt */
body .index-main-v026 .index-hero-v026 {
    overflow: hidden !important;
}

body .index-main-v026 .index-hero-v026-grid {
    grid-template-columns: minmax(300px, 0.40fr) minmax(520px, 0.60fr) !important;
    column-gap: clamp(64px, 9vw, 140px) !important;
    align-items: center !important;
}

body .index-main-v026 .index-hero-v026-text {
    max-width: 520px !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

body .index-main-v026 .index-hero-v026 h1 {
    max-width: 500px !important;
    font-size: clamp(2.65rem, 4.2vw, 4.65rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 22px !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body .index-main-v026 .index-hero-v026 h1 span {
    display: inline-block !important;
}

body .index-main-v026 .index-hero-v026-lead {
    max-width: 500px !important;
    font-size: clamp(1rem, 1.25vw, 1.12rem) !important;
    line-height: 1.55 !important;
}

body .index-main-v026 .index-hero-v026-image {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    position: relative !important;
    z-index: 1 !important;
    transform: none !important;
    margin-left: 0 !important;
}

body .index-main-v026 .index-hero-v026-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

@media (max-width: 1100px) {
    body .index-main-v026 .index-hero-v026-grid {
        grid-template-columns: minmax(280px, 0.42fr) minmax(420px, 0.58fr) !important;
        column-gap: 42px !important;
    }

    body .index-main-v026 .index-hero-v026 h1 {
        font-size: clamp(2.35rem, 4.2vw, 3.65rem) !important;
        max-width: 430px !important;
    }
}

@media (max-width: 900px) {
    body .index-main-v026 .index-hero-v026-grid {
        grid-template-columns: 1fr !important;
        row-gap: 28px !important;
    }

    body .index-main-v026 .index-hero-v026-text,
    body .index-main-v026 .index-hero-v026 h1,
    body .index-main-v026 .index-hero-v026-lead {
        max-width: 100% !important;
    }

    body .index-main-v026 .index-hero-v026-image {
        max-width: 760px !important;
        justify-self: start !important;
    }
}

@media (max-width: 700px) {
    body .index-main-v026 .index-hero-v026 {
        padding-top: 34px !important;
    }

    body .index-main-v026 .index-hero-v026 h1 {
        font-size: clamp(2.3rem, 10vw, 3.2rem) !important;
        line-height: 1.1 !important;
    }
}

/* Version 037: strukturell getrennter Index-Hero ohne Überlagerung */
.index-hero-v037 {
    background: #d6d6d6;
    padding: clamp(46px, 6vw, 82px) 0;
    overflow: hidden;
}

.index-hero-v037-inner {
    display: grid;
    grid-template-columns: minmax(280px, 440px) minmax(520px, 1fr);
    gap: clamp(72px, 9vw, 150px);
    align-items: center;
}

.index-hero-v037-copy {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.index-hero-v037-eyebrow {
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.9rem;
    margin: 0 0 18px;
}

.index-hero-v037 h1 {
    color: #050505;
    font-size: clamp(2.6rem, 3.7vw, 4.15rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 22px;
    max-width: 440px;
}

.index-hero-v037 h1 span {
    color: var(--accent);
}

.index-hero-v037-lead {
    color: #222222;
    font-size: clamp(1rem, 1.18vw, 1.12rem);
    line-height: 1.55;
    margin: 0 0 26px;
    max-width: 430px;
}

.index-hero-v037-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.index-hero-v037-secondary {
    background: #ffffff;
    color: var(--navy) !important;
    border: 1px solid rgba(0,0,0,0.08);
}

.index-hero-v037-media {
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0,0,0,0.16);
    background: #ffffff;
}

.index-hero-v037-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 1100px) {
    .index-hero-v037-inner {
        grid-template-columns: minmax(260px, 390px) minmax(420px, 1fr);
        gap: 48px;
    }

    .index-hero-v037-copy {
        max-width: 390px;
    }

    .index-hero-v037 h1 {
        max-width: 390px;
        font-size: clamp(2.35rem, 3.6vw, 3.45rem);
    }
}

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

    .index-hero-v037-copy {
        max-width: 100%;
    }

    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 100%;
    }

    .index-hero-v037-media {
        max-width: 760px;
    }
}

@media (max-width: 650px) {
    .index-hero-v037 {
        padding: 34px 0 42px;
    }

    .index-hero-v037-eyebrow {
        font-size: 0.76rem;
        letter-spacing: 0.12em;
        margin-bottom: 12px;
    }

    .index-hero-v037 h1 {
        font-size: clamp(2.2rem, 10vw, 3.1rem);
        line-height: 1.1;
        margin-bottom: 16px;
    }

    .index-hero-v037-lead {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .index-hero-v037-actions {
        flex-direction: column;
    }

    .index-hero-v037-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Version 045: Datenschutz-Link im Formular sichtbarer */
.privacy-link {
    color: var(--accent) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 700;
}

.privacy-link:hover {
    color: var(--navy) !important;
}

/* Version 055: BU-Rentenbedarf-Rechner */
.bu-neu-rechner .calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
    gap: 28px;
    align-items: start;
}

.bu-neu-rechner .calculator-inputs,
.bu-neu-rechner .calculator-result {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    border: 1px solid rgba(176,176,176,0.28);
}

.bu-neu-rechner label {
    display: block;
    margin-bottom: 16px;
}

.bu-neu-rechner label span {
    display: block;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 7px;
}

.bu-neu-rechner input,
.bu-neu-rechner select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d7dde5;
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    background: #ffffff;
}

.bu-neu-rechner .input-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.bu-neu-rechner .input-wrapper span {
    margin: 0;
    color: var(--text-muted);
    font-weight: 800;
}

.kt-result-box {
    display: grid;
    gap: 10px;
}

.kt-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid #e6ebf1;
}

.kt-line span {
    color: var(--text-dark);
}

.kt-line strong {
    white-space: nowrap;
    color: var(--navy);
}

.kt-line.total {
    font-weight: 900;
}

.kt-line.final {
    margin-top: 8px;
    padding: 16px;
    border-radius: 14px;
    background: #f1f5f9;
    border-bottom: 0;
}

.kt-line.final strong {
    color: var(--accent);
    font-size: 1.35rem;
}

.result-hint {
    margin-top: 16px;
    color: var(--text-muted);
    line-height: 1.55;
}

.result-hint.warning {
    color: #7a4d00;
    background: #fff7e6;
    border-radius: 12px;
    padding: 12px 14px;
}

@media (max-width: 900px) {
    .bu-neu-rechner .calculator-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bu-neu-rechner .calculator-inputs,
    .bu-neu-rechner .calculator-result {
        padding: 18px;
    }

    .kt-line {
        flex-direction: column;
        gap: 4px;
    }

    .kt-line strong {
        white-space: normal;
    }
}

/* Version 059: BU-Mindestempfehlung */
.warning-box {
    border-left: 5px solid #b7791f;
    background: #fff7e6;
}

.warning-box h4 {
    color: #7a4d00;
}


/* Logo Update 061 */
@media (max-width: 768px) {
  .logo {
    gap: 9px !important;
  }
  .logo i {
    font-size: 1.8rem !important;
    color: var(--gold, var(--color-gold)) !important;
  }
  .logo-name {
    font-size: 1.18rem !important;
    color: var(--text-dark, #1d1d1d) !important;
  }
  .logo-sub {
    font-size: 0.62rem !important;
    letter-spacing: 0.09em !important;
    color: var(--text-dark, #1d1d1d) !important;
  }
}


/* V067: Header responsiv breiter, Body bleibt unverändert */
nav .nav-container {
    width: min(92vw, 1400px) !important;
    max-width: none !important;
}

@media (max-width: 1200px) {
    nav .nav-container {
        width: 100% !important;
        max-width: none !important;
    }
}


/* V071: Seitliche Untermenüs im Versicherungen-Dropdown zuverlässig anzeigen */
.dropdown-content {
    overflow: visible !important;
}

.nested-dropdown {
    position: relative !important;
}

.nested-dropdown-content {
    display: none;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    z-index: 5000 !important;
    background: var(--white) !important;
}

.nested-dropdown:hover > .nested-dropdown-content {
    display: block !important;
}

@media (max-width: 1200px) {
    .nested-dropdown-content {
        position: static !important;
        left: auto !important;
        top: auto !important;
    }
}

/* V075: Einheitliche Kartenoptik mit oberem blauem Rand */
.card,
.bento-card,
.kb-card,
.info-box,
.overview-card,
.index-topic-card-v026 {
    border-top: 4px solid var(--navy) !important;
    border-radius: var(--radius) !important;
}

.card:hover,
.bento-card:hover,
.kb-card:hover,
.info-box:hover,
.overview-card:hover,
.index-topic-card-v026:hover {
    border-top-color: var(--accent) !important;
}

.overview-page-header {
    background: var(--navy);
    color: var(--white);
    padding: 100px 20px 60px;
    text-align: center;
}

.overview-page-header h1 {
    color: var(--white);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
}

.overview-page-header p {
    font-size: 1.2rem;
    color: #dcdcdc;
    max-width: 900px;
    margin: 0 auto;
}

.overview-content-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin: 40px auto;
}

.overview-card {
    background: var(--white);
    border: 1px solid #b0b0b0;
    padding: 30px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    color: var(--text-dark);
    display: block;
}

.overview-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.overview-card h3 {
    color: var(--navy);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.overview-card i {
    color: var(--accent);
    font-size: 1.7rem;
    margin-bottom: 15px;
    display: block;
}

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

/* V076: Zusätzliche Link-/Themenkarten optisch wie Bento-Karten */
.pkv-topic-card,
.pkv-topic-group,
.topic-card,
.topic-group,
.link-card,
.overview-card,
.index-topic-card-v026,
.bento-card,
.card {
    border-top: 4px solid var(--navy) !important;
    border-radius: var(--radius) !important;
    transition: var(--transition) !important;
}

.pkv-topic-card:hover,
.pkv-topic-group:hover,
.topic-card:hover,
.topic-group:hover,
.link-card:hover,
.overview-card:hover,
.index-topic-card-v026:hover,
.bento-card:hover,
.card:hover {
    border-top-color: var(--accent) !important;
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow) !important;
}

/* Häufige Karten auf der PKV-Seite: einzelne weiße Themenblöcke */
.private-krankenversicherung-page a[class*="card"],
.private-krankenversicherung-page div[class*="card"],
.private-krankenversicherung-page a[class*="topic"],
.private-krankenversicherung-page div[class*="topic"],
section[id*="pkv"] a[class*="card"],
section[id*="pkv"] div[class*="card"],
section[id*="pkv"] a[class*="topic"],
section[id*="pkv"] div[class*="topic"] {
    border-top: 4px solid var(--navy) !important;
    transition: var(--transition) !important;
}

.private-krankenversicherung-page a[class*="card"]:hover,
.private-krankenversicherung-page div[class*="card"]:hover,
.private-krankenversicherung-page a[class*="topic"]:hover,
.private-krankenversicherung-page div[class*="topic"]:hover,
section[id*="pkv"] a[class*="card"]:hover,
section[id*="pkv"] div[class*="card"]:hover,
section[id*="pkv"] a[class*="topic"]:hover,
section[id*="pkv"] div[class*="topic"]:hover {
    border-top-color: var(--accent) !important;
    transform: translateY(-5px) !important;
}


/* ============================================================
   V081 CSS-Basis: zentrale Standardklassen für neue Seiten
   Zweck:
   - neue Unterseiten einheitlich aufbauen
   - weniger neue Inline-Styles nötig
   - bestehende Seiten bleiben optisch möglichst unverändert
   ============================================================ */

/* Standard-Seitenkopf für normale Unterseiten */
.site-page-header {
    background: var(--navy);
    color: var(--white);
    padding: 100px 20px 60px;
    text-align: center;
}

.site-page-header h1 {
    color: var(--white);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
}

.site-page-header p {
    color: #dcdcdc;
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Standard-Inhaltsbreite für normale Unterseiten */
.site-content {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Standard-Abschnitte */
.site-section {
    padding: 60px 20px;
}

.site-section-main {
    background-color: var(--bg-main);
}

.site-section-light {
    background-color: var(--bg-light);
}

.site-section-white {
    background-color: var(--white);
}

.site-section-header {
    max-width: 760px;
    margin: 0 0 36px;
    text-align: left;
}

.site-section-header.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.site-section-header h2 {
    color: var(--navy);
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1.15;
    margin-bottom: 12px;
}

.site-section-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Standard-Kartenraster */
.site-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 36px auto 0;
}

.site-card-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-card {
    display: block;
    background: var(--white);
    border: 1px solid #b0b0b0;
    border-top: 4px solid var(--navy);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
    color: var(--text-dark);
    transition: var(--transition);
}

.site-card:hover {
    border-color: var(--accent);
    border-top-color: var(--accent);
    transform: translateY(-5px);
}

.site-card i {
    color: var(--accent);
    font-size: 1.7rem;
    margin-bottom: 15px;
    display: block;
}

.site-card h3,
.site-card h4 {
    color: var(--navy);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.site-card p {
    color: var(--text-muted);
    line-height: 1.55;
}

/* Bestehende Karten optisch an die Standardkarten angleichen */
.card,
.bento-card,
.kb-card,
.overview-card,
.index-topic-card-v026 {
    border-top: 4px solid var(--navy);
    transition: var(--transition);
}

.card:hover,
.bento-card:hover,
.kb-card:hover,
.overview-card:hover,
.index-topic-card-v026:hover {
    border-top-color: var(--accent);
    transform: translateY(-5px);
}

/* Mobile Standards */
@media (max-width: 900px) {
    .site-content,
    .site-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-card-grid,
    .site-card-grid.two {
        grid-template-columns: 1fr;
    }

    .site-section-header,
    .site-section-header.center {
        max-width: 100%;
    }
}


/* ============================================================
   V082: Globale Schriftgrößen-Beruhigung
   Ziel:
   - Unterseiten-H1 im blauen Balken kleiner
   - blaue Unterseitenköpfe kompakter
   - Abschnittsüberschriften einheitlicher
   - Kartenüberschriften einheitlicher
   - kein Sticky, keine Inhaltsänderungen
   ============================================================ */

/* Unterseiten-Kopf kompakter */
.page-header,
.site-page-header,
.overview-page-header {
    padding: 60px 20px 42px !important;
}

/* Unterseiten-Hauptüberschrift im blauen Balken */
.page-header h1,
.site-page-header h1,
.overview-page-header h1 {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
}

/* Erklärungstext im blauen Unterseitenkopf */
.page-header p,
.site-page-header p,
.overview-page-header p {
    font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
    line-height: 1.5 !important;
}

/* Abschnittsüberschriften vereinheitlichen */
.section-header h2,
.index-section-heading-v026 h2,
.site-section-header h2,
.content-section h2,
.overview-content-container h2 {
    font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
    line-height: 1.18 !important;
}

/* Kartenüberschriften vereinheitlichen */
.card h3,
.bento-card h4,
.overview-card h3,
.index-topic-card-v026 h3,
.site-card h3,
.site-card h4,
.kb-card h3,
.kb-card h4 {
    font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
    line-height: 1.25 !important;
}

/* Normaler Fließtext bleibt ruhig und lesbar */
p,
li {
    font-size: 1rem;
}

/* Mobil: Unterseitenkopf noch kompakter */
@media (max-width: 768px) {
    .page-header,
    .site-page-header,
    .overview-page-header {
        padding: 42px 16px 32px !important;
    }

    .page-header h1,
    .site-page-header h1,
    .overview-page-header h1 {
        font-size: clamp(1.6rem, 7vw, 2rem) !important;
    }

    .section-header h2,
    .index-section-heading-v026 h2,
    .site-section-header h2,
    .content-section h2,
    .overview-content-container h2 {
        font-size: clamp(1.55rem, 6vw, 2rem) !important;
    }
}


/* ============================================================
   V083: Unterseitenkopf kompakter + Breadcrumb vereinheitlicht
   ============================================================ */

.page-header,
.site-page-header,
.overview-page-header {
    padding: 42px 20px 30px !important;
}

.page-header h1,
.site-page-header h1,
.overview-page-header h1 {
    margin-bottom: 10px !important;
}

.page-header p,
.site-page-header p,
.overview-page-header p {
    margin-top: 0 !important;
}

.breadcrumb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    margin-bottom: 22px !important;
    color: #dcdcdc !important;
}

.breadcrumb a {
    color: var(--gold) !important;
}

.breadcrumb span {
    color: #dcdcdc !important;
}

@media (max-width: 768px) {
    .page-header,
    .site-page-header,
    .overview-page-header {
        padding: 34px 16px 24px !important;
    }

    .breadcrumb {
        margin-bottom: 16px !important;
        font-size: 0.85rem !important;
    }
}


/* ============================================================
   V087: Globaler Header-Fix
   Zweck:
   - Header funktioniert auch auf neu erstellten Seiten ohne altes Inline-CSS
   - einheitlicher Header auf allen HTML-Seiten
   ============================================================ */

nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 2000;
    border-bottom: 1px solid #b0b0b0;
}

nav .nav-container,
.nav-container {
    width: min(92vw, 1400px);
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo {
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

.logo i {
    color: var(--gold);
    font-size: 2.15rem;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: 0.01em;
}

.logo-sub {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
}

.nav-wrapper {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    margin-left: 40px;
}

.nav-center {
    display: flex;
    justify-content: center;
    flex: 1;
    gap: 25px;
    align-items: center;
}

.nav-right {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    white-space: nowrap;
}

.nav-center > a,
.dropbtn {
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
}

.nav-center a.active,
.dropbtn.active,
.nested-dropbtn.active,
.dropdown-content a.active,
.nested-dropdown-content a.active {
    color: var(--accent) !important;
    font-weight: 700;
}

.dropdown {
    position: relative;
    padding: 25px 0;
}

.dropbtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-dark);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 280px;
    box-shadow: var(--shadow);
    z-index: 3000;
    border-radius: 8px;
    padding: 10px 0;
    top: 100%;
    left: 0;
    border: 1px solid #b0b0b0;
    overflow: visible;
}

.dropdown:hover > .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: var(--text-dark);
    padding: 12px 20px;
    display: block;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: var(--bg-main);
    color: var(--accent);
    padding-left: 25px;
}

.nested-dropdown {
    position: relative;
}

.nested-dropbtn {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nested-dropdown-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: var(--white);
    min-width: 280px;
    box-shadow: var(--shadow);
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid #b0b0b0;
    z-index: 5000;
}

.nested-dropdown:hover > .nested-dropdown-content {
    display: block;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-dark);
}

@media (max-width: 1200px) {
    nav .nav-container,
    .nav-container {
        width: 100%;
        max-width: none;
    }

    .hamburger {
        display: block;
    }

    .nav-wrapper {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--white);
        padding: 20px;
        box-shadow: var(--shadow);
        margin-left: 0;
    }

    .nav-wrapper.active {
        display: flex;
    }

    .nav-center,
    .nav-right {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 15px;
        margin-left: 0;
    }

    .nav-right {
        margin-top: 20px;
        border-top: 1px solid #b0b0b0;
        padding-top: 20px;
        justify-content: flex-start;
        width: 100%;
    }

    .dropdown {
        padding: 0;
        width: 100%;
    }

    .dropdown-content,
    .nested-dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background: #f4f4f4;
        padding-left: 20px;
        min-width: 0;
        width: 100%;
    }

    .dropdown.mobile-active > .dropdown-content,
    .nested-dropdown.mobile-active > .nested-dropdown-content {
        display: block;
    }
}



/* V171: Professionelle Datenschutz- und Einwilligungsbox im Kontaktformular */
.privacy-consent-box {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid rgba(110, 165, 224, 0.35);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    box-shadow: 0 12px 30px rgba(52, 73, 94, 0.08);
}

.privacy-consent-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.privacy-consent-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(110, 165, 224, 0.14);
    color: var(--accent, var(--color-blue-light));
    border: 1px solid rgba(110, 165, 224, 0.22);
}

.privacy-consent-header h3 {
    margin: 0 0 6px;
    color: var(--navy, var(--color-blue-dark));
    font-size: clamp(1.08rem, 1.8vw, 1.22rem);
}

.privacy-consent-header p {
    margin: 0;
    color: var(--text-muted, #333333);
    font-size: 0.95rem;
    line-height: 1.65;
}

.privacy-note {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 4px solid var(--gold, var(--color-gold));
    border-radius: 0 12px 12px 0;
    background: rgba(194, 170, 79, 0.12);
    color: var(--text-dark, #000000);
    font-size: 0.94rem;
    line-height: 1.55;
}

.consent-options {
    display: grid;
    gap: 12px;
}

.lead-form .consent-option {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px;
    border: 1px solid #d8e2ef;
    border-radius: 14px;
    background: #ffffff;
    font-weight: 400 !important;
    cursor: pointer;
    transition: var(--transition, all 0.3s ease);
}

.lead-form .consent-option:hover {
    border-color: var(--accent, var(--color-blue-light));
    box-shadow: 0 10px 22px rgba(52, 73, 94, 0.08);
}

.lead-form .consent-option input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
    margin-top: 3px;
    padding: 0 !important;
    border-radius: 5px;
    accent-color: var(--accent, var(--color-blue-light));
    cursor: pointer;
}

.consent-copy {
    display: grid;
    gap: 4px;
    line-height: 1.55;
}

.consent-copy strong {
    color: var(--navy, var(--color-blue-dark));
    font-size: 0.98rem;
}

.consent-copy span {
    color: var(--text-muted, #333333);
    font-size: 0.94rem;
}

.consent-copy a {
    color: var(--navy, var(--color-blue-dark));
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .privacy-consent-box {
        padding: 16px;
        border-radius: 16px;
    }

    .privacy-consent-header {
        gap: 12px;
    }

    .privacy-consent-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .lead-form .consent-option {
        padding: 13px 14px;
    }
}



/* V177: Hero-Text und Bild sauber trennen */
.index-hero-v037 {
    overflow: hidden!important;
}
.index-hero-v037-inner {
    display: grid!important;
    grid-template-columns: minmax(0, 560px) minmax(320px, 1fr)!important;
    gap: clamp(48px, 7vw, 120px)!important;
    align-items: center!important;
}
.index-hero-v037-copy {
    max-width: 560px!important;
    min-width: 0!important;
}
.index-hero-v037-eyebrow {
    max-width: 100%!important;
    white-space: normal!important;
    overflow-wrap: anywhere!important;
    word-break: normal!important;
    letter-spacing: clamp(0.12em, 0.8vw, 0.18em)!important;
}
.index-hero-v037 h1 {
    max-width: 560px!important;
    font-size: clamp(3rem, 5.8vw, 5.2rem)!important;
    line-height: 1.04!important;
    overflow-wrap: normal!important;
    word-break: normal!important;
}
.index-hero-v037 h1 span {
    display: inline-block!important;
    color: var(--accent)!important;
}
.index-hero-v037-lead {
    max-width: 520px!important;
    overflow-wrap: break-word!important;
}
.index-hero-v037-media {
    min-width: 0!important;
    max-width: 520px!important;
    justify-self: end!important;
}
.index-hero-v037-media img {
    max-width: 100%!important;
}
.index-hero-v037-actions {
    display: flex!important;
    flex-wrap: wrap!important;
    justify-content: center!important;
    gap: 14px!important;
    width: 100%!important;
}
@media (max-width: 1100px) {
    .index-hero-v037-inner {
        grid-template-columns: 1fr!important;
        gap: 34px!important;
    }
    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 760px!important;
    }
    .index-hero-v037-media {
        justify-self: start!important;
        max-width: 620px!important;
    }
}
@media (max-width: 650px) {
    .index-hero-v037 h1 {
        font-size: clamp(2.25rem, 10vw, 3.25rem)!important;
        line-height: 1.08!important;
    }
    .index-hero-v037-actions {
        flex-direction: column!important;
        align-items: stretch!important;
    }
    .index-hero-v037-actions .btn {
        width: 100%!important;
        justify-content: center!important;
    }
}



/* V178: Hero-Proportionen optimiert - Bild gleichwertiger, CTAs unter dem Text */
.index-hero-v037 {
    padding: clamp(42px, 5vw, 74px) 0 !important;
    overflow: hidden !important;
}
.container.index-hero-v037-inner,
.index-hero-v037-inner {
    width: min(calc(100% - 72px), 1460px) !important;
    max-width: 1460px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.55fr) minmax(430px, 0.45fr) !important;
    gap: clamp(48px, 5vw, 76px) !important;
    align-items: center !important;
}
.index-hero-v037-copy {
    width: 100% !important;
    max-width: 780px !important;
    min-width: 0 !important;
}
.index-hero-v037-eyebrow {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    letter-spacing: clamp(0.12em, 0.7vw, 0.18em) !important;
}
.index-hero-v037 h1 {
    max-width: 780px !important;
    font-size: clamp(3.6rem, 6.2vw, 6.25rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    margin-bottom: 24px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.index-hero-v037 h1 span {
    display: inline-block !important;
    color: var(--accent) !important;
}
.index-hero-v037-lead {
    max-width: 720px !important;
    margin-bottom: 30px !important;
    font-size: clamp(1.05rem, 1.45vw, 1.32rem) !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word !important;
}
.index-hero-v037-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 0 !important;
}
.index-hero-v037-actions .btn {
    min-height: 52px !important;
}
.index-hero-v037-media {
    width: 100% !important;
    max-width: 660px !important;
    justify-self: end !important;
    align-self: center !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(0,0,0,0.16) !important;
}
.index-hero-v037-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (max-width: 1180px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        grid-template-columns: minmax(0, 0.56fr) minmax(360px, 0.44fr) !important;
        gap: 42px !important;
        width: min(calc(100% - 48px), 1120px) !important;
    }
    .index-hero-v037 h1 {
        font-size: clamp(3.05rem, 5.7vw, 4.8rem) !important;
    }
    .index-hero-v037-media {
        max-width: 560px !important;
    }
}
@media (max-width: 900px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        width: min(calc(100% - 36px), 760px) !important;
    }
    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 760px !important;
    }
    .index-hero-v037-media {
        justify-self: start !important;
        max-width: 720px !important;
    }
}
@media (max-width: 650px) {
    .index-hero-v037 {
        padding: 34px 0 42px !important;
    }
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 28px), 100%) !important;
        gap: 24px !important;
    }
    .index-hero-v037-eyebrow {
        font-size: 0.74rem !important;
        letter-spacing: 0.1em !important;
    }
    .index-hero-v037 h1 {
        font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
        margin-bottom: 16px !important;
    }
    .index-hero-v037-lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 22px !important;
    }
    .index-hero-v037-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .index-hero-v037-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }
}


/* V179: Hero kompakter proportioniert - einheitlicher Rahmen, ruhigeres Bild/Text-Verhältnis */
.index-hero-v037 {
    padding: clamp(46px, 5.5vw, 82px) 0 clamp(52px, 6vw, 90px) !important;
    overflow: hidden !important;
}
.container.index-hero-v037-inner,
.index-hero-v037-inner {
    width: min(calc(100% - 72px), 1340px) !important;
    max-width: 1340px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr) !important;
    gap: clamp(42px, 4.6vw, 66px) !important;
    align-items: center !important;
}
.index-hero-v037-copy {
    width: 100% !important;
    max-width: 705px !important;
    min-width: 0 !important;
}
.index-hero-v037-eyebrow {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(0.82rem, 1.05vw, 1.02rem) !important;
    letter-spacing: clamp(0.11em, 0.58vw, 0.16em) !important;
    margin-bottom: clamp(24px, 3vw, 36px) !important;
}
.index-hero-v037 h1 {
    max-width: 705px !important;
    font-size: clamp(3.2rem, 5.15vw, 5.45rem) !important;
    line-height: 1.01 !important;
    letter-spacing: -0.052em !important;
    margin-bottom: clamp(20px, 2.4vw, 28px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.index-hero-v037 h1 span {
    display: block !important;
    color: var(--accent) !important;
    font-size: 0.92em !important;
    line-height: 1.02 !important;
}
.index-hero-v037-lead {
    max-width: 630px !important;
    margin-bottom: 28px !important;
    font-size: clamp(1.02rem, 1.25vw, 1.18rem) !important;
    line-height: 1.62 !important;
    overflow-wrap: break-word !important;
}
.index-hero-v037-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 0 !important;
}
.index-hero-v037-actions .btn {
    min-height: 50px !important;
    padding-inline: clamp(18px, 2vw, 26px) !important;
}
.index-hero-v037-media {
    width: 100% !important;
    max-width: 590px !important;
    justify-self: end !important;
    align-self: center !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.14) !important;
}
.index-hero-v037-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (max-width: 1366px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 56px), 1240px) !important;
        grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr) !important;
        gap: 42px !important;
    }
    .index-hero-v037-copy {
        max-width: 660px !important;
    }
    .index-hero-v037 h1 {
        max-width: 660px !important;
        font-size: clamp(3.05rem, 5vw, 4.75rem) !important;
    }
    .index-hero-v037-lead {
        max-width: 600px !important;
    }
    .index-hero-v037-media {
        max-width: 540px !important;
    }
}
@media (max-width: 1040px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        width: min(calc(100% - 44px), 820px) !important;
    }
    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 820px !important;
    }
    .index-hero-v037-media {
        justify-self: stretch !important;
        max-width: 820px !important;
    }
}
@media (max-width: 650px) {
    .index-hero-v037 {
        padding: 34px 0 44px !important;
    }
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 28px), 100%) !important;
        gap: 24px !important;
    }
    .index-hero-v037-eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 0.09em !important;
        margin-bottom: 20px !important;
    }
    .index-hero-v037 h1 {
        font-size: clamp(2.15rem, 9.6vw, 3.15rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
        margin-bottom: 16px !important;
    }
    .index-hero-v037-lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 22px !important;
    }
    .index-hero-v037-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .index-hero-v037-actions .btn {
        width: 100% !important;
        min-height: 50px !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .index-hero-v037-media {
        border-radius: 14px !important;
    }
}

/* V180: seitliche Hero-Ausrichtung korrigiert - gemeinsamer zentrierter Inhaltscontainer */
.index-hero-v037 {
    padding: clamp(44px, 5vw, 74px) 0 clamp(50px, 5.6vw, 82px) !important;
    overflow: hidden !important;
}
.container.index-hero-v037-inner,
.index-hero-v037-inner {
    width: min(calc(100% - clamp(40px, 6vw, 88px)), 1260px) !important;
    max-width: 1260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr) !important;
    gap: clamp(34px, 4vw, 54px) !important;
    align-items: center !important;
}
.index-hero-v037-copy {
    width: 100% !important;
    max-width: 650px !important;
    min-width: 0 !important;
}
.index-hero-v037-eyebrow {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(0.78rem, 0.92vw, 0.96rem) !important;
    letter-spacing: clamp(0.1em, 0.46vw, 0.145em) !important;
    margin-bottom: clamp(22px, 2.5vw, 32px) !important;
}
.index-hero-v037 h1 {
    max-width: 650px !important;
    font-size: clamp(2.85rem, 4.45vw, 4.95rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
    margin-bottom: clamp(18px, 2vw, 26px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}
.index-hero-v037 h1 span {
    display: block !important;
    color: var(--accent) !important;
    font-size: 0.9em !important;
    line-height: 1.03 !important;
}
.index-hero-v037-lead {
    max-width: 590px !important;
    margin-bottom: 26px !important;
    font-size: clamp(1rem, 1.08vw, 1.13rem) !important;
    line-height: 1.58 !important;
    overflow-wrap: break-word !important;
}
.index-hero-v037-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 0 !important;
}
.index-hero-v037-actions .btn {
    min-height: 48px !important;
    padding-inline: clamp(16px, 1.8vw, 24px) !important;
}
.index-hero-v037-media {
    width: 100% !important;
    max-width: 540px !important;
    justify-self: end !important;
    align-self: center !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.14) !important;
}
.index-hero-v037-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}
@media (max-width: 1366px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 52px), 1180px) !important;
        max-width: 1180px !important;
        grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr) !important;
        gap: 36px !important;
    }
    .index-hero-v037-copy,
    .index-hero-v037 h1 {
        max-width: 610px !important;
    }
    .index-hero-v037 h1 {
        font-size: clamp(2.75rem, 4.25vw, 4.45rem) !important;
    }
    .index-hero-v037-lead {
        max-width: 560px !important;
    }
    .index-hero-v037-media {
        max-width: 505px !important;
    }
}
@media (max-width: 1040px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        width: min(calc(100% - 44px), 820px) !important;
        max-width: 820px !important;
    }
    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 820px !important;
    }
    .index-hero-v037-media {
        justify-self: stretch !important;
        max-width: 820px !important;
    }
}
@media (max-width: 650px) {
    .index-hero-v037 {
        padding: 34px 0 44px !important;
    }
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 28px), 100%) !important;
        gap: 24px !important;
    }
    .index-hero-v037-eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 0.09em !important;
        margin-bottom: 20px !important;
    }
    .index-hero-v037 h1 {
        font-size: clamp(2.05rem, 9.2vw, 3.05rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.04em !important;
        margin-bottom: 16px !important;
    }
    .index-hero-v037-lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 22px !important;
    }
    .index-hero-v037-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .index-hero-v037-actions .btn {
        width: 100% !important;
        min-height: 50px !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }
    .index-hero-v037-media {
        border-radius: 14px !important;
    }
}

/* ============================================================
   V181: Mobile-Basisoptimierung gesamtes Projekt
   Ziel:
   - keine horizontalen Überläufe auf Handy/Tablet
   - einspaltige Karten- und Inhaltsbereiche
   - größere Touch-Ziele für Buttons/Navigation/Formulare
   - Hero, Header, Tabellen, Bilder und Footer mobil stabilisieren
   ============================================================ */

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* lange Fachbegriffe, URLs und Buttontexte dürfen mobil nicht ausbrechen */
h1, h2, h3, h4, h5, h6,
p, li, a, span,
.btn, button,
.card, .bento-card, .overview-card, .site-card, .kb-card, .index-topic-card-v026 {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container,
    .content-container,
    .overview-content-container,
    .site-container,
    .section .container,
    .page-header .container,
    .site-page-header .container,
    .overview-page-header .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(16px, 4vw, 28px) !important;
        padding-right: clamp(16px, 4vw, 28px) !important;
    }

    /* Mehrspaltige Layouts mobil konsequent einspaltig darstellen */
    .grid-2,
    .grid-3,
    .grid-4,
    .bento-grid,
    .card-grid,
    .cards-grid,
    .site-card-grid,
    .overview-grid,
    .overview-card-grid,
    .content-grid,
    .content-layout,
    .two-column,
    .two-col,
    .calculator-grid,
    .kt-result-grid,
    .contact-layout,
    .form-grid,
    .index-topic-grid-v026,
    .index-explain-v026-grid,
    .index-news-v026-grid,
    .index-final-cta-v026-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(16px, 4vw, 28px) !important;
    }

    .card,
    .bento-card,
    .overview-card,
    .site-card,
    .kb-card,
    .index-topic-card-v026,
    .calculator-card,
    .contact-form-card,
    .contact-info-card,
    .info-box,
    .content-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Header/Burger-Menü: volle Breite, keine gequetschten Elemente */
    nav .nav-container,
    .nav-container {
        height: 72px !important;
        padding-left: clamp(14px, 4vw, 22px) !important;
        padding-right: clamp(14px, 4vw, 22px) !important;
        gap: 12px !important;
    }

    .logo {
        min-width: 0 !important;
        gap: 10px !important;
    }

    .logo i {
        font-size: 1.8rem !important;
    }

    .logo-name {
        font-size: clamp(1.12rem, 5vw, 1.35rem) !important;
    }

    .logo-sub {
        font-size: clamp(0.56rem, 2.4vw, 0.68rem) !important;
        letter-spacing: 0.08em !important;
    }

    .hamburger {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    .nav-wrapper {
        top: 72px !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-center a,
    .nav-right a,
    .dropbtn,
    .nested-dropbtn,
    .dropdown-content a,
    .nested-dropdown-content a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    .nav-right .btn,
    .nav-wrapper .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Startseiten-Hero: mobil kompakt, textorientiert, Bild darunter */
    .index-hero-v037 {
        padding: clamp(30px, 7vw, 48px) 0 clamp(34px, 8vw, 54px) !important;
    }

    .index-hero-v037-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(22px, 6vw, 34px) !important;
        align-items: start !important;
        max-width: 100% !important;
    }

    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 100% !important;
    }

    .index-hero-v037-eyebrow,
    .index-eyebrow-v026 {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        letter-spacing: 0.11em !important;
    }

    .index-hero-v037 h1 {
        font-size: clamp(2.25rem, 10vw, 3.55rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
    }

    .index-hero-v037-lead {
        font-size: 1rem !important;
        line-height: 1.58 !important;
    }

    .index-hero-v037-actions,
    .hero-actions,
    .cta-actions,
    .button-group,
    .actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .index-hero-v037-actions .btn,
    .hero-actions .btn,
    .cta-actions .btn,
    .button-group .btn,
    .actions .btn {
        min-height: 46px !important;
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .index-hero-v037-media {
        width: 100% !important;
        max-width: 760px !important;
        justify-self: stretch !important;
        border-radius: 16px !important;
    }

    .index-hero-v037-media img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    /* Tabellen und Vergleichsbereiche gegen seitliche Überläufe sichern */
    table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap;
    }

    th,
    td {
        white-space: normal;
    }

    .table-wrap,
    .comparison-table,
    .pricing-table,
    .data-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Formulare mobil: volle Breite und Touch-Ziele */
    input,
    select,
    textarea,
    button,
    .btn {
        max-width: 100% !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    textarea {
        min-height: 120px !important;
    }

    .privacy-check,
    .lead-form .consent-option {
        align-items: flex-start !important;
    }

    /* Footer mobil: Links nicht nebeneinander quetschen */
    footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(16px, 4vw, 28px) !important;
        padding-right: clamp(16px, 4vw, 28px) !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .footer-links a {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    .section,
    .site-section,
    .index-section-v026,
    .index-explain-v026,
    .index-news-v026,
    .index-final-cta-v026,
    .content-section {
        padding-top: clamp(34px, 9vw, 48px) !important;
        padding-bottom: clamp(34px, 9vw, 48px) !important;
    }

    h1,
    .page-header h1,
    .site-page-header h1,
    .overview-page-header h1 {
        font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
        line-height: 1.12 !important;
    }

    h2,
    .section-header h2,
    .site-section-header h2,
    .content-section h2,
    .overview-content-container h2,
    .index-section-heading-v026 h2,
    .index-explain-v026 h2,
    .index-news-v026 h2,
    .index-final-cta-v026 h2 {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.16 !important;
    }

    h3,
    .card h3,
    .site-card h3,
    .overview-card h3,
    .index-topic-card-v026 h3,
    .kb-card h3 {
        font-size: clamp(1.08rem, 5vw, 1.32rem) !important;
        line-height: 1.25 !important;
    }

    p,
    li {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .btn,
    button,
    input[type="submit"] {
        width: 100% !important;
        min-height: 46px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        white-space: normal !important;
    }

    .card,
    .bento-card,
    .overview-card,
    .site-card,
    .kb-card,
    .index-topic-card-v026,
    .info-box,
    .calculator-card,
    .contact-form-card,
    .contact-info-card {
        padding: clamp(18px, 5vw, 24px) !important;
        border-radius: 16px !important;
    }

    .index-hero-v037 h1 {
        font-size: clamp(2.15rem, 11vw, 3.05rem) !important;
    }

    .index-hero-v037-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

@media (max-width: 380px) {
    nav .nav-container,
    .nav-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .logo i {
        font-size: 1.55rem !important;
    }

    .logo-name {
        font-size: 1.05rem !important;
    }

    .logo-sub {
        font-size: 0.52rem !important;
        letter-spacing: 0.06em !important;
    }

    .index-hero-v037 h1 {
        font-size: 2.05rem !important;
    }
}

/* =====================================================================
   V186: Robuste Umbrüche für Karten, Boxen, Badges und Überschriften
   Ziel: Lange deutsche Fachbegriffe bleiben innerhalb ihrer Container.
   ===================================================================== */
.card,
.bento-card,
.site-card,
.overview-card,
.kb-card,
.info-box,
.table-card,
.feature-card,
.calculator-card,
.contact-form-card,
.contact-info-card,
.index-topic-card-v026,
[class*="card"],
[class*="box"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.card *,
.bento-card *,
.site-card *,
.overview-card *,
.kb-card *,
.info-box *,
.table-card *,
.feature-card *,
.calculator-card *,
.contact-form-card *,
.contact-info-card *,
.index-topic-card-v026 *,
[class*="card"] *,
[class*="box"] * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.bento-card h1,
.bento-card h2,
.bento-card h3,
.bento-card h4,
.card h1,
.card h2,
.card h3,
.card h4,
.site-card h1,
.site-card h2,
.site-card h3,
.site-card h4,
.overview-card h1,
.overview-card h2,
.overview-card h3,
.overview-card h4,
.kb-card h1,
.kb-card h2,
.kb-card h3,
.kb-card h4,
.info-box h1,
.info-box h2,
.info-box h3,
.info-box h4,
.table-card h1,
.table-card h2,
.table-card h3,
.table-card h4,
.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
[class*="card"] h1,
[class*="card"] h2,
[class*="card"] h3,
[class*="card"] h4,
[class*="box"] h1,
[class*="box"] h2,
[class*="box"] h3,
[class*="box"] h4 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.22 !important;
}

.btn,
button,
.badge,
.tag,
.pill,
.chip,
[class*="badge"],
[class*="tag"],
[class*="pill"],
[class*="chip"] {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

.bento-grid,
.card-grid,
.cards-grid,
.overview-grid,
.kb-grid,
.content-grid,
[class*="grid"] {
    min-width: 0 !important;
}

.table-wrap,
.table-wrapper,
.comparison-table,
.pricing-table,
[class*="table"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .bento-card h3,
    .bento-card h4,
    .card h3,
    .card h4,
    .site-card h3,
    .site-card h4,
    .overview-card h3,
    .overview-card h4,
    .kb-card h3,
    .kb-card h4,
    .info-box h3,
    .info-box h4,
    .table-card h3,
    .table-card h4,
    .feature-card h3,
    .feature-card h4,
    [class*="card"] h3,
    [class*="card"] h4,
    [class*="box"] h3,
    [class*="box"] h4 {
        font-size: clamp(1.05rem, 5vw, 1.36rem) !important;
        line-height: 1.24 !important;
        letter-spacing: -0.01em !important;
    }

    .btn,
    button,
    .badge,
    .tag,
    .pill,
    .chip,
    [class*="badge"],
    [class*="tag"],
    [class*="pill"],
    [class*="chip"] {
        line-height: 1.25 !important;
    }
}

/* V188: Feste Header-Navigation und Anker-Abstand */
:root {
    --fixed-header-height: 80px;
    --fixed-header-offset: 96px;
}

html {
    scroll-padding-top: var(--fixed-header-offset);
}

body {
    padding-top: var(--fixed-header-height);
}

body > nav,
nav:first-of-type {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(52, 73, 94, 0.18) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
    isolation: isolate;
}

body > nav .nav-container,
nav:first-of-type .nav-container {
    min-height: var(--fixed-header-height) !important;
    height: var(--fixed-header-height) !important;
}

body > nav .dropdown-content,
body > nav .nested-dropdown-content,
nav:first-of-type .dropdown-content,
nav:first-of-type .nested-dropdown-content {
    z-index: 9500 !important;
}

section[id],
[id].content-section,
[id].section,
[id].page-header,
[id].cta-section,
main[id],
div[id] {
    scroll-margin-top: var(--fixed-header-offset);
}

@media (max-width: 1200px) {
    :root {
        --fixed-header-height: 66px;
        --fixed-header-offset: 82px;
    }

    body > nav .nav-container,
    nav:first-of-type .nav-container {
        min-height: var(--fixed-header-height) !important;
        height: var(--fixed-header-height) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body > nav .nav-wrapper,
    nav:first-of-type .nav-wrapper {
        top: 100% !important;
        max-height: calc(100vh - var(--fixed-header-height)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 9200 !important;
    }
}

@media (max-width: 640px) {
    :root {
        --fixed-header-height: 62px;
        --fixed-header-offset: 78px;
    }

    body > nav .nav-container,
    nav:first-of-type .nav-container {
        min-height: var(--fixed-header-height) !important;
        height: var(--fixed-header-height) !important;
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body > nav .logo,
    nav:first-of-type .logo {
        min-width: 0 !important;
        max-width: calc(100vw - 78px) !important;
    }

    body > nav .logo-name,
    nav:first-of-type .logo-name {
        font-size: 1.18rem !important;
        line-height: 1.05 !important;
    }

    body > nav .logo-sub,
    nav:first-of-type .logo-sub {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
        margin-top: 3px !important;
    }

    body > nav .logo i,
    nav:first-of-type .logo i {
        font-size: 1.45rem !important;
    }

    body > nav .hamburger,
    nav:first-of-type .hamburger {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }
}

/* V191: Fixed-Header-Abstand gezielter setzen und Startseiten-Hero wieder bündig ausrichten */
body {
    padding-top: 0 !important;
}

body > nav + main,
body > nav + header.page-header {
    margin-top: var(--fixed-header-height) !important;
}

body > nav + header.page-header + main {
    padding-top: 0 !important;
}

body > nav + main.index-main-v026 {
    margin-top: var(--fixed-header-height) !important;
}

.index-main-v026 .index-hero-v037 {
    padding-top: clamp(40px, 4.6vw, 70px) !important;
}

.container.index-hero-v037-inner,
.index-hero-v037-inner {
    align-items: start !important;
}

.index-hero-v037-media {
    align-self: start !important;
}

@media (max-width: 1040px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        align-items: start !important;
    }
}

@media (max-width: 650px) {
    .index-main-v026 .index-hero-v037 {
        padding-top: 28px !important;
    }
}

/* V192: Startseiten-Hero vertikal zurücknehmen, horizontales Raster bündiger setzen */
:root {
    --index-page-max: 1280px;
    --index-page-gutter: clamp(24px, 3.5vw, 48px);
}

.index-main-v026 .index-hero-v037 {
    padding-top: clamp(42px, 5vw, 74px) !important;
}

.container.index-hero-v037-inner,
.index-hero-v037-inner {
    width: min(calc(100% - (var(--index-page-gutter) * 2)), var(--index-page-max)) !important;
    max-width: var(--index-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
}

.index-hero-v037-media {
    align-self: center !important;
    padding-top: 0 !important;
}

.index-main-v026 .index-trustbar-v026 > .container,
.index-main-v026 .index-section-v026 > .container,
.index-main-v026 .index-explain-v026 > .container,
.index-main-v026 .index-news-v026 > .container,
.index-main-v026 .index-final-cta-v026 > .container {
    width: min(calc(100% - (var(--index-page-gutter) * 2)), var(--index-page-max)) !important;
    max-width: var(--index-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 900px) {
    :root {
        --index-page-gutter: clamp(16px, 4vw, 28px);
    }

    .container.index-hero-v037-inner,
    .index-hero-v037-inner,
    .index-main-v026 .index-trustbar-v026 > .container,
    .index-main-v026 .index-section-v026 > .container,
    .index-main-v026 .index-explain-v026 > .container,
    .index-main-v026 .index-news-v026 > .container,
    .index-main-v026 .index-final-cta-v026 > .container {
        width: calc(100% - (var(--index-page-gutter) * 2)) !important;
        max-width: none !important;
    }
}

/* V193: Startseite wieder auf schmaleres gemeinsames Raster setzen */
:root {
    --index-page-max: 1180px;
    --index-page-gutter: clamp(22px, 3vw, 40px);
}

.index-main-v026 .index-hero-v037 {
    padding-top: clamp(42px, 5vw, 74px) !important;
}

.container.index-hero-v037-inner,
.index-hero-v037-inner {
    width: min(calc(100% - (var(--index-page-gutter) * 2)), var(--index-page-max)) !important;
    max-width: var(--index-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, 0.96fr) !important;
    gap: clamp(32px, 3.8vw, 48px) !important;
    align-items: center !important;
}

.index-hero-v037-copy {
    max-width: 610px !important;
}

.index-hero-v037 h1 {
    max-width: 610px !important;
}

.index-hero-v037-lead {
    max-width: 560px !important;
}

.index-hero-v037-media {
    max-width: 505px !important;
    justify-self: end !important;
    align-self: center !important;
    padding-top: 0 !important;
}

.index-main-v026 .index-trustbar-v026 > .container,
.index-main-v026 .index-section-v026 > .container,
.index-main-v026 .index-explain-v026 > .container,
.index-main-v026 .index-news-v026 > .container,
.index-main-v026 .index-final-cta-v026 > .container {
    width: min(calc(100% - (var(--index-page-gutter) * 2)), var(--index-page-max)) !important;
    max-width: var(--index-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 1040px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        width: min(calc(100% - 44px), 820px) !important;
        max-width: 820px !important;
        align-items: start !important;
    }

    .index-hero-v037-copy,
    .index-hero-v037 h1,
    .index-hero-v037-lead {
        max-width: 820px !important;
    }

    .index-hero-v037-media {
        justify-self: stretch !important;
        max-width: 820px !important;
        align-self: center !important;
    }
}

@media (max-width: 900px) {
    :root {
        --index-page-gutter: clamp(16px, 4vw, 28px);
    }

    .index-main-v026 .index-trustbar-v026 > .container,
    .index-main-v026 .index-section-v026 > .container,
    .index-main-v026 .index-explain-v026 > .container,
    .index-main-v026 .index-news-v026 > .container,
    .index-main-v026 .index-final-cta-v026 > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--index-page-gutter) !important;
        padding-right: var(--index-page-gutter) !important;
    }
}

@media (max-width: 650px) {
    .container.index-hero-v037-inner,
    .index-hero-v037-inner {
        width: min(calc(100% - 28px), 100%) !important;
        gap: 24px !important;
    }
}

/* V194: Startseite exakt auf das bestehende Standard-Content-Raster zurückführen
   Erkanntes Standardraster aus Bestand: .container/.content-container mit max-width: 1000px
   plus responsiver Außenabstand über width: min(100% - 40px, ...). */
:root {
    --standard-content-max: 1000px;
    --standard-content-gutter: 40px;
    --standard-content-gutter-tablet: 28px;
    --standard-content-gutter-mobile: 22px;
}

.index-main-v026 .container.index-hero-v037-inner,
.index-main-v026 .index-hero-v037-inner,
.index-main-v026 .index-trustbar-v026 > .container,
.index-main-v026 .index-section-v026 > .container,
.index-main-v026 .index-explain-v026 > .container,
.index-main-v026 .index-news-v026 > .container,
.index-main-v026 .index-final-cta-v026 > .container {
    width: min(calc(100% - var(--standard-content-gutter)), var(--standard-content-max)) !important;
    max-width: var(--standard-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.index-main-v026 .container.index-hero-v037-inner,
.index-main-v026 .index-hero-v037-inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr) !important;
    gap: clamp(28px, 3.2vw, 42px) !important;
    align-items: center !important;
}

.index-main-v026 .index-hero-v037-copy,
.index-main-v026 .index-hero-v037 h1 {
    max-width: 560px !important;
}

.index-main-v026 .index-hero-v037-lead {
    max-width: 520px !important;
}

.index-main-v026 .index-hero-v037-media {
    max-width: 460px !important;
    justify-self: end !important;
    align-self: center !important;
    padding-top: 0 !important;
}

@media (max-width: 1040px) {
    .index-main-v026 .container.index-hero-v037-inner,
    .index-main-v026 .index-hero-v037-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        align-items: center !important;
    }

    .index-main-v026 .index-hero-v037-copy,
    .index-main-v026 .index-hero-v037 h1,
    .index-main-v026 .index-hero-v037-lead,
    .index-main-v026 .index-hero-v037-media {
        max-width: var(--standard-content-max) !important;
    }

    .index-main-v026 .index-hero-v037-media {
        justify-self: stretch !important;
    }
}

@media (max-width: 768px) {
    .index-main-v026 .container.index-hero-v037-inner,
    .index-main-v026 .index-hero-v037-inner,
    .index-main-v026 .index-trustbar-v026 > .container,
    .index-main-v026 .index-section-v026 > .container,
    .index-main-v026 .index-explain-v026 > .container,
    .index-main-v026 .index-news-v026 > .container,
    .index-main-v026 .index-final-cta-v026 > .container {
        width: calc(100% - var(--standard-content-gutter-tablet)) !important;
        max-width: var(--standard-content-max) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 650px) {
    .index-main-v026 .container.index-hero-v037-inner,
    .index-main-v026 .index-hero-v037-inner,
    .index-main-v026 .index-trustbar-v026 > .container,
    .index-main-v026 .index-section-v026 > .container,
    .index-main-v026 .index-explain-v026 > .container,
    .index-main-v026 .index-news-v026 > .container,
    .index-main-v026 .index-final-cta-v026 > .container {
        width: calc(100% - var(--standard-content-gutter-mobile)) !important;
        max-width: var(--standard-content-max) !important;
    }
}