/* === FONTS === */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('/build/fonts/roboto/Roboto-Regular.woff2') format('woff2'), url('/build/fonts/roboto/Roboto-Regular.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('/build/fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('/build/fonts/roboto/Roboto-Bold.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 600;
	src: url('/build/fonts/noto/NotoSans-SemiBold.woff2') format('woff2'), url('/build/fonts/noto/NotoSans-SemiBold.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	src: url('/build/fonts/noto/NotoSans-Bold.woff2') format('woff2'), url('/build/fonts/noto/NotoSans-Bold.ttf') format('truetype');
	font-display: swap;
}
body {font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: "Noto Sans", "Roboto", sans-serif;}
p, li, a {font-size: 1.1rem;}
h1.text-center {padding-top: 0;}
h2 {margin-bottom: 1rem; margin-top: 1rem;}
h3 {margin-bottom: 1rem; margin-top: 1.4rem;}

/* END Font and Size */

/* === HEADER & NAVIGATION === */
.navbar {border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0; height: 100%; transition: box-shadow 0.3s, border-color 0.3s;}
.navbar.navbar-scrolled {border-bottom-color: #0096c7; box-shadow: 0 2px 12px rgba(0,0,0,0.1);}
header.fixed-top.scrolled::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent);}
.navbar .container-fluid {padding: 0!important; background-color: #00b4d8; max-width: 100%;}
.nav-link {color: rgba(255,255,255,0.9)!important; padding-right: 0.8rem; padding-left: 0.8rem; font-size: 0.95rem; transition: color 0.15s, border-color 0.15s;}
.navbar-nav > .nav-item > .nav-link {border-bottom: 2px solid transparent; padding-bottom: 0.3rem;}
.navbar-nav > .nav-item > .nav-link:hover {color: #fff!important; border-bottom-color: #fff;}
.nav-link.aktiv, .dropdown-item.aktiv {color: #fff!important; background-color: transparent;}
.navbar-nav > .nav-item > .nav-link.aktiv {border-bottom-color: #fff;}
.dropdown-item.rechner::before {content: "\F1C0"; font-family: "bootstrap-icons"; margin-right: 4px; color: rgba(255,255,255,0.5); transition: color 0.15s;}
.dropdown-item.rechner:hover::before {color: #fff;}
.show {background-color: #0096c7; border-left: 1px solid rgba(255,255,255,0.2);}
.dropdown-menu {background-color: #0096c7; border-color: rgba(255,255,255,0.2);}
.dropdown-menu .row {flex-wrap: nowrap;}
.dropdown-item {color: rgba(255,255,255,0.9)!important; font-size: 0.85rem;}
.dropdown-item:hover {background-color: rgba(255,255,255,0.15); color: #fff!important;}
.dropdown-menu .list-group-flush .dropdown-item {padding: 6px 12px; line-height: 1.4; min-height: 36px; display: flex; align-items: center;}
.navbar-brand {margin-right: 0!important;}
.navbar-brand p {font-size: 0.8rem; margin-bottom: 0; color: rgba(255,255,255,0.7);}
.navbar-toggler {border-color: rgba(255,255,255,0.4)!important; margin-right: 12px; margin-left: auto;}
.navbar-toggler-icon {filter: invert(1);}
.erstinfo {color: rgba(255,255,255,0.7);}
.erstinfo:hover {color: #fff;}
#eKomiWidget_default {position: absolute; top: 190px; right: 80px; width: 200px; height: 200px; z-index: 10;}

/* Move down content because we have a fixed navbar */
.container-fluid {padding: 4.5rem 0 0 0;}
.container-fluid > .produkt-section:first-child, .container-fluid > .produkt-hero:first-child {padding-top: 2.5rem;}
.container-fluid > .container.start, .container-fluid > .container-fluid.start, .container-fluid > .table-responsive.start {padding-top: 1.5rem;}
.container-fluid > .container.start h1, .container-fluid > .container-fluid.start h1 {margin-bottom: 1rem;}
.container-fluid > .container.begriff {margin-top: -2rem;}

/* === CUSTOMERSERVICE BAR === */
.customerservice-modern {
    background: #0096c7;
    padding: 6px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}
.customerservice-modern a {color: #fff; text-decoration: none; font-weight: 500; font-size: 0.8rem;}
.customerservice-modern a:hover {color: rgba(255,255,255,0.9);}
.customerservice-modern i {color: rgba(255,255,255,0.7); font-size: 0.75rem;}
.customerservice-modern .topbar-divider {width: 1px; height: 14px; background: rgba(255,255,255,0.25); display: inline-block;}

/* === HERO (Ken-Burns) === */
@keyframes heroZoom {
    0% {transform: scale(1) translate(0, 0);}
    100% {transform: scale(1.15) translate(-3%, -0.5%);}
}
.hero-start {
    position: relative;
    aspect-ratio: 6.4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1.5rem;
}
.hero-start-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroZoom 14s ease-in-out infinite alternate;
    will-change: transform;
}
.hero-start::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,150,199,0.15) 0%, rgba(0,150,199,0.3) 100%);
    z-index: 1;
}
.hero-start-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 40px 24px;
    max-width: 800px;
}
.hero-start-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 8px;
}
.hero-start-content h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    color: #fff;
    padding-top: 0;
}

/* === HERO PAGE (Unterseiten) === */
.hero-page {
    position: relative;
    aspect-ratio: 6.4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1rem;
}
.hero-page-bg {
    position: absolute;
    inset: 0;
    background: var(--hero-bg) center/cover no-repeat;
    animation: heroZoom 14s ease-in-out infinite alternate;
    will-change: transform;
}
.hero-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,150,199,0.2) 0%, rgba(0,150,199,0.4) 100%);
    z-index: 1;
}
.hero-page-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 40px 24px;
    max-width: 800px;
}
.hero-page-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    color: #fff;
    padding-top: 0;
}

/* === PRODUKT HERO === */
.produkt-hero {padding: 2.5rem 0 2rem; background: linear-gradient(135deg, #e0f7fa 0%, #f5f7fa 100%); position: relative;}
.produkt-hero-logo-mobile {display: none;}
.produkt-hero h1 {font-size: 1.8rem; margin-bottom: 0.3rem; color: #1a1a2e;}
.produkt-hero-sub {color: #555; font-size: 1.05rem; margin-bottom: 1rem; font-style: italic;}
.produkt-hero-highlights {display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1rem;}
.produkt-hero-preis, .produkt-hero-sb {display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; background: #e0f7fa; border: 1px solid #b2ebf2; border-radius: 20px; font-weight: 600; font-size: 0.95rem; color: #0096c7;}
.produkt-hero-preis .bi, .produkt-hero-sb .bi {color: #00b4d8; font-size: 1.3rem;}
.produkt-hero p {line-height: 1.6; color: #444;}
.produkt-hero-cta {display: inline-block; padding: 12px 32px; background-color: #00b4d8; border: 1px solid #00b4d8; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 1.05rem; margin-top: 0.5rem; transition: background-color 0.15s, border-color 0.15s;}
.produkt-hero-cta:hover {background-color: #0096c7; border-color: #0096c7; color: #fff;}
.produkt-hero-cta .bi {font-size: 1.3rem; vertical-align: middle; margin-right: 4px;}
.produkt-hero-card {background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); text-align: center;}
.produkt-hero-card h2 {font-size: 1.2rem; margin-bottom: 1rem; color: #1a1a2e;}
.produkt-hero-links {display: flex; flex-direction: column; gap: 8px;}
.produkt-hero-links a, .produkt-hero-card a {display: block; padding: 12px 16px; background: #f5f7fa; border: 1px solid #e8e8e8!important; border-radius: 6px; color: #1a1a2e!important; text-decoration: none; font-size: 1.05rem; text-align: left; transition: background-color 0.15s, border-color 0.15s;}
.produkt-hero-links a:hover, .produkt-hero-card a:hover {background-color: #e0f7fa; border-color: #00b4d8!important; color: #1a1a2e!important;}
.produkt-hero-card a.d-block {background: #fff; border: none!important; padding: 0;}
.produkt-hero-links a .bi {color: #00b4d8; margin-right: 8px; font-size: 1.5rem; vertical-align: middle;}

/* === ACCORDION === */
.accordion-button {font-size: 1rem; font-weight: 600; color: #1a1a2e; text-decoration: none;}
.accordion-button:not(.collapsed) {background-color: #e0f7fa; color: #0096c7; box-shadow: none;}
.accordion-button:hover {background-color: #f5f7fa; color: #1a1a2e;}
.accordion-button:focus {box-shadow: none;}
.accordion-item {border-color: #e8e8e8;}
.accordion-body {font-size: 0.95rem; line-height: 1.7; color: #444;}

/* === PRODUKT SEKTIONEN === */
.produkt-section {padding: 1.5rem 0;}
.produkt-section-alt {background-color: #f5f7fa;}
.produkt-section h2 {font-size: 1.4rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #00b4d8; color: #1a1a2e;}
.produkt-section h3 {font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: 0.6rem; color: #1a1a2e;}
.produkt-section p {line-height: 1.7; color: #333;}
.produkt-section p a, .produkt-section li a, .produkt-section dd a {color: #0096c7; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s;}
.produkt-section p a:hover, .produkt-section li a:hover, .produkt-section dd a:hover {color: #007ba7; border-bottom-color: #007ba7;}
.produkt-hero p a {color: #0096c7; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s;}
.produkt-hero p a:hover {color: #007ba7; border-bottom-color: #007ba7;}
.produkt-section ul:not(.list-group) {padding-left: 1.2rem;}
.produkt-section li {line-height: 1.7; color: #333; margin-bottom: 0.3rem;}


/* === PRODUCT CARDS === */
.product-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}
.product-card {
    background: #f5f7fa;
    border: 2px solid #e0f7fa;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    min-width: 200px;
    flex: 1;
    max-width: 360px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #1a1a2e;
    position: relative;
    overflow: hidden;
}
.product-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(0,180,216,0.15), transparent 70%);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,180,216,0.15);
    border-color: #00b4d8;
    background: #fff;
    color: #1a1a2e;
    text-decoration: none;
}
.product-card:hover::before {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0,180,216,0.25), transparent 70%);
}
.product-card .product-icon {
    position: relative;
    margin-bottom: 12px;
}
.product-card .product-icon .bi {
    font-size: 2.5rem;
    color: #00b4d8;
}
.product-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 8px;
    position: relative;
}
.product-card-sub {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
    position: relative;
}
.product-card-price {
    font-size: 0.9rem;
    color: #0096c7;
    font-weight: 600;
    margin: 6px 0 0;
    position: relative;
}

/* === INSURER CARDS === */
.insurer-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
}
.insurer-card:hover {
    box-shadow: 0 8px 24px rgba(0,180,216,0.15);
    transform: translateY(-2px);
    border-color: #00b4d8;
}
.insurer-logo {
    background: #f5f5f5;
    border-radius: 8px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px;
}
.insurer-logo img {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}
.insurer-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: #222;
}
.insurer-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    flex: 1;
}
.insurer-card li {
    padding: 4px 0;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.4;
    border-bottom: 1px solid #f0f0f0;
}
.insurer-card li:last-child {
    border-bottom: none;
}
.insurer-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}
.btn-primary-drohnen {
    background: transparent;
    color: #0096c7;
    border: 1px solid #00b4d8;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}
.btn-primary-drohnen:hover {background: #f0f0f0; border-color: #00b4d8; color: #333; text-decoration: none;}
.btn-outline-drohnen {
    background: #00b4d8;
    color: #fff;
    border: 1px solid #00b4d8;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s;
    display: block;
}
.btn-outline-drohnen:hover {background: #0096c7; border-color: #0096c7; color: #fff; text-decoration: none;}
.btn-primary-drohnen .bi {margin-right: 4px; color: #00b4d8;}
.btn-outline-drohnen .bi {margin-right: 4px; color: #fff;}

/* === VERGLEICHSTABELLE === */
.vergleich-tabelle {font-size: 0.9rem;}
.vergleich-tabelle thead {background-color: #f0fafe; border-bottom: 3px solid #00b4d8;}
.vergleich-tabelle thead th {vertical-align: bottom; padding: 12px 10px; border: none;}
.vergleich-tabelle thead img {display: block; margin: 0 auto 6px;}
.vergleich-merkmal {min-width: 180px; font-weight: 600; color: #1a1a2e;}
.vergleich-tabelle td {vertical-align: middle; padding: 10px;}
.vergleich-ja {color: #0a8754; font-weight: 600;}
.vergleich-ja .bi {font-size: 1.1rem;}
.vergleich-nein {color: #999; font-style: italic;}
.vergleich-nein .bi {color: #cc3333; font-size: 1.1rem; font-style: normal;}
.vergleich-cta-row td {padding: 16px 10px; border-top: 2px solid #00b4d8;}
.vergleich-cta-row .btn-primary-drohnen, .vergleich-cta-row .btn-outline-drohnen {font-size: 0.8rem; padding: 6px 10px;}

/* === CONTENT BASICS === */
.btn-light {background-color: #f5f7fa; border-color: #e8e8e8;}
.btn {white-space: normal;}
.active {color: #fff; text-decoration: none; background-color: #00b4d8;}
.container {max-width: 1320px;}
.container a {color: #0096c7; text-decoration: none; transition: color 0.15s;}
.container a:hover {color: #007ba7;}
.container a.produkt-hero-cta {color: #fff;}
.container a.produkt-hero-cta:hover {color: #fff;}
.container a.btn-outline-drohnen {color: #fff;}
.container a.btn-outline-drohnen:hover {color: #fff;}
.bi {color: #555;}
a:hover .bi {color: #00b4d8;}

/* === FORMULARE === */
legend {margin-left: 1rem; margin-bottom: 1rem;}
form .btn-light {border: 1px solid #ccc;}
.kontakt-email-schutz {padding: 10px; background: #f8f8f8; border: 1px solid #eee; border-radius: 6px;}
.kontakt-email-label {color: #666; font-size: 0.95rem;}
.kontakt-email-btn {background-color: #00b4d8; border: 1px solid #00b4d8; color: #fff; padding: 6px 16px; border-radius: 6px; font-size: 0.95rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s;}
.kontakt-email-btn:hover {background-color: #0096c7; border-color: #0096c7;}
.kontakt-email-btn .bi {color: #00b4d8; margin-right: 4px; vertical-align: middle;}
.kontakt-card {background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06);}
.kontakt-header {text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #00b4d8;}
.kontakt-header h1 {font-size: 1.6rem; margin: 0 0 0.5rem 0;}
.kontakt-header h1 .bi {color: #00b4d8; margin-right: 6px;}
.kontakt-header p {color: #666; font-size: 0.95rem; margin: 0;}
.kontakt-card .form-floating textarea.form-control {min-height: 150px;}
.kontakt-card .form-control:focus, .kontakt-card .form-select:focus {border-color: #00b4d8; box-shadow: 0 0 0 0.2rem rgba(0,180,216,0.25);}
.kontakt-footer {text-align: center; padding-top: 0.5rem; border-top: 1px solid #f0f0f0; margin-top: 0.5rem;}
.kontakt-datenschutz {display: inline-block; font-size: 0.85rem; color: #666; margin-bottom: 1rem; padding: 6px 14px; background-color: #f8f8f8; border: 1px solid #eee; border-radius: 4px;}
.kontakt-datenschutz a {color: #0096c7; text-decoration: none; font-weight: 600;}
.kontakt-datenschutz a:hover {color: #007ba7; text-decoration: underline;}
.kontakt-card .btn-primary {background-color: #00b4d8; border-color: #00b4d8; color: #fff; padding: 8px 30px;}
.kontakt-card .btn-primary:hover {background-color: #0096c7; border-color: #0096c7; color: #fff;}

/* === FOOTER === */
footer {padding-bottom: 80px; background-color: #1a1a2e; color: rgba(255,255,255,0.6);}
footer p {font-size: 0.85rem; color: rgba(255,255,255,0.6);}
footer p a {color: #48cae4; text-decoration: none; font-size: 0.85rem; transition: color 0.15s;}
footer p a:hover {color: #90e0ef;}
.note {font-size: 0.75rem!important; color: rgba(255,255,255,0.5);}
.note a {font-size: 0.75rem!important; color: #48cae4!important;}

/* === STICKY CTA BAR === */
.sticky-cta {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background-color: #0096c7; border-top: none; box-shadow: 0 -2px 10px rgba(0,0,0,0.15); padding: 10px 0; transform: translateY(100%); transition: transform 0.3s ease;}
.sticky-cta.visible {transform: translateY(0);}
.sticky-cta-inner {max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 0 16px;}
.sticky-cta-text {font-size: 0.95rem; color: #fff;}
.sticky-cta-text .bi {color: #fff; font-size: 2.2rem; vertical-align: middle; margin-right: 6px;}
.sticky-cta-btn {display: inline-block; padding: 10px 28px; background-color: #fff; border: 1px solid #fff; color: #00b4d8; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background-color 0.15s, border-color 0.15s;}
.sticky-cta-btn:hover {background-color: #e0f7fa; border-color: #e0f7fa; color: #0096c7;}

/* Nach oben Button */
#btn-to-top {position: fixed; bottom: 90px; right: 40px; display: none; background-color: #00b4d8; border: 1px solid #00b4d8; color: #fff;}
#btn-to-top:hover {background-color: #0096c7; border-color: #0096c7;}

/* Bootstrap Icons Adjustments */
.btn .bi {vertical-align: middle; margin-right: 2px;}
.list-group-item .bi {margin-right: 8px; color: #00b4d8;}

/* === LEXIKON === */
.container.begriff {margin-top: -2rem;}

/* === FORM VALIDATION === */
.form-control.is-invalid, .was-validated .form-control:invalid {border-color: #333;}
.form-select.is-invalid, .was-validated .form-select:invalid {border-color: #333;}


/* === INFO BLOCKS (Startseite) === */
.info-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 24px 0;
}
.info-icon-item {
    background: #fff;
    border-radius: 10px;
    padding: 24px 16px;
    text-align: center;
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.2s;
}
.info-icon-item:hover {
    box-shadow: 0 4px 16px rgba(0,180,216,0.1);
}
.info-icon-item .bi {
    font-size: 2rem;
    color: #00b4d8;
    margin-bottom: 10px;
    display: block;
}
.info-icon-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}
.info-icon-item p {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.info-highlight-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e8e8e8;
}
.info-highlight-box:last-child {
    border-bottom: none;
}
.info-highlight-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #e0f7fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-highlight-icon .bi {
    font-size: 1.2rem;
    color: #00b4d8;
}
.info-highlight-box h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}
.info-highlight-box p {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

.info-vs-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}
.info-vs-column {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.info-vs-column h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-vs-column h4 .bi {
    color: #00b4d8;
    font-size: 1.3rem;
}
.info-vs-column ul {
    padding-left: 1.2rem;
    margin: 0;
}
.info-vs-column li {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 4px;
}

.info-notice-box {
    background: #f5f7fa;
    border-left: 4px solid #00b4d8;
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin: 20px 0;
}
.info-notice-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-notice-box h4 .bi {
    color: #00b4d8;
    font-size: 1.2rem;
}
.info-notice-box p, .info-notice-box li {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
}

.info-tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.info-tag {
    background: #e0f7fa;
    color: #0096c7;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.info-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.info-cta-item {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    text-decoration: none;
    color: #1a1a2e;
    transition: all 0.2s;
    display: block;
}
.info-cta-item:hover {
    border-color: #00b4d8;
    box-shadow: 0 4px 16px rgba(0,180,216,0.1);
    color: #1a1a2e;
    text-decoration: none;
}
.info-cta-item .bi {
    font-size: 2rem;
    color: #00b4d8;
    margin-bottom: 10px;
    display: block;
}
.info-cta-item h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.info-cta-item p {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

/* === KEY FACTS (Produktseiten) === */
.key-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0;
}
.key-facts-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.4;
}
.key-facts-item .bi {
    color: #00b4d8;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE BREAKPOINTS (Bootstrap 5 aligned)
   ============================================ */

/* --- Below xl (< 1200px) --- */
@media screen and (max-width: 1199.98px) {
    #eKomiWidget_default {width: 190px;}
}

/* --- Below lg (< 992px): Tablets --- */
@media screen and (max-width: 991.98px) {
    .container-fluid {margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;}
    .dropdown-menu hr {margin-top: 0; margin-bottom: 0;}
    .navbar-toggler {margin-right: 3px; margin-left: auto;}
    #eKomiWidget_default {display: none!important;}
    .produkt-hero-cta {display: table; margin: 1rem auto 0.5rem; text-align: center;}
    .produkt-hero-logo-mobile {display: block; position: absolute; top: 2.5rem; right: 1.5rem; z-index: 2;}
    .produkt-hero-logo-mobile img {max-height: 55px; max-width: 160px; object-fit: contain;}
    .produkt-hero-card {display: none;}
    .customerservice-modern .topbar-kontakt {display: none;}
}

/* --- Below md (< 768px): Mobile --- */
@media screen and (max-width: 767.98px) {
    /* Navigation */
    .logo img {width: 80%;}
    .navbar {padding: 0;}
    .dropdown-menu {padding: 0!important;}
    .dropdown-menu .row {flex-wrap: wrap;}
    .dropdown-menu .row div {margin-bottom: 0!important;}
    .dropdown-menu .nav-link {margin: 0; padding: 4px 12px;}
    .navbar-brand {margin-right: 0!important;}
    .navbar-brand img {margin-left: 0;}
    .navbar-toggler {margin-right: 3px;}

    /* Customerservice */
    .customerservice-modern {flex-wrap: wrap; gap: 8px 16px; justify-content: center; padding: 6px 12px;}
    .customerservice-modern .topbar-company {display: none;}
    h1.text-center {padding-top: 1rem;}

    .key-facts-grid {grid-template-columns: 1fr;}

    /* Sticky CTA */
    .sticky-cta-text {display: none;}
    .sticky-cta-inner {justify-content: center;}
    .sticky-cta-btn {width: 100%; text-align: center; padding: 12px 20px;}

    /* Hero Start */
    .hero-start {aspect-ratio: 2.5;}
    .hero-start-content h1 {font-size: 1.1rem; margin-bottom: 8px;}
    .hero-start-label {font-size: 0.75rem; letter-spacing: 2px; margin-bottom: 4px;}

    /* Hero Page */
    .hero-page {aspect-ratio: 2.5;}
    .hero-page-content h1 {font-size: 1.3rem;}

    /* Product Cards */
    .product-grid {max-width: 100%; flex-direction: column; align-items: center;}
    .product-card {min-width: 160px; max-width: 100%; flex: 0 1 100%; padding: 20px 16px;}
    .product-card::before {display: none;}

    /* Produkt Hero */
    .produkt-hero-logo-mobile {top: 1.1rem;}
    .produkt-hero-logo-mobile img {max-height: 35px; max-width: 100px;}
    .produkt-hero {padding: 1.5rem 0;}
    .produkt-hero h1 {font-size: 1.3rem;}
    .produkt-hero p {margin-bottom: 0.5rem;}
    .produkt-hero-sub {margin-bottom: 0.8rem;}
    .produkt-hero-highlights {gap: 8px; margin-bottom: 0.8rem;}
    .produkt-hero-preis, .produkt-hero-sb {font-size: 0.85rem; padding: 4px 10px;}
    .produkt-hero-card {padding: 1rem; margin-top: 1.5rem;}

    /* Info Blocks */
    .info-icon-grid {grid-template-columns: repeat(2, 1fr);}
    .info-vs-box {grid-template-columns: 1fr;}
    .info-cta-grid {grid-template-columns: 1fr;}
}

/* --- Below sm (< 576px): Small Mobile --- */
@media screen and (max-width: 575.98px) {
    .container-fluid {padding: 5.5rem 0 0 0;}
    .company {display: none;}
    h1.text-center {padding-top: 2rem;}

    /* Hero Start */
    .hero-start {aspect-ratio: 2.5;}
    .hero-start-content h1 {font-size: 0.9rem; margin-bottom: 8px;}
    .hero-start-label {font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 4px;}

    /* Product Cards */
    .product-card {padding: 16px 12px;}
    .product-card h3 {font-size: 0.9rem;}

    /* Produkt Hero */
    .produkt-hero h1 {font-size: 1.1rem;}
    .produkt-hero-sub {font-size: 0.9rem;}
    .produkt-hero-cta {padding: 10px 20px; font-size: 0.95rem;}
    .produkt-hero-logo-mobile {top: 5rem;}

    /* Info Blocks */
    .info-icon-grid {grid-template-columns: 1fr;}
}

/* === LEXIKON === */
.lexikon-alphabet {background-color: #f8f9fa; border-bottom: 2px solid #00b4d8; flex-wrap: wrap; gap: 2px; padding: 6px 8px;}
.lexikon-alphabet .nav-link {color: #333!important; font-size: 0.85rem; font-weight: 600; padding: 4px 7px; border-radius: 4px; transition: background-color 0.15s, color 0.15s;}
.lexikon-alphabet .nav-link:hover {color: #fff!important; background-color: #00b4d8;}
.lexikon-alphabet .nav-link.active {color: #fff!important; background-color: #0077b6; border-radius: 4px;}
.lexikon-alphabet .lexikon-suche input {border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; padding: 4px 8px; color: #333;}
.lexikon-alphabet .lexikon-suche input:focus {border-color: #00b4d8; outline: none; box-shadow: 0 0 0 2px rgba(0,180,216,0.2);}

/* === PRINT === */
@media print {
    .noprint {display: none!important;}
}

/* === BUERGSCHAFTSVERSICHERUNG24: Logo-Anpassung ===
   Eigenstaendige CSS (entkoppelt von drohnen-versicherung.com.css).
   Header/Navigation/Farben sind an drohnen-versicherung.com angelehnt.
   Das Logo ist hier eine dunkle Wortmarke (288x60) auf transparentem Grund.
   Auf der cyan Navbar braucht sie ein weisses Chip, damit sie lesbar bleibt. */
.navbar-brand {background: #fff; padding: 6px 14px; display: inline-flex; align-items: center;}
.navbar-brand img {height: 34px; width: auto; max-width: 100%;}
@media (max-width: 575.98px) {.navbar-brand {padding: 4px 10px;} .navbar-brand img {height: 28px;}}

/* === BUERGSCHAFTSVERSICHERUNG24: Sprungmarken-Pill-Leiste (Hilfsmenue) ===
   Kompakte, zentrierte Pills statt der alten Vollbreiten-Listengruppe.
   Klebt unter dem fixed Header (top = Header-Hoehe), Inhalt nimmt volle Breite.
   Mobil kleiner; bei wenig Platz horizontal scrollbar statt Umbruch. */
.kaution-jumpnav {
    position: sticky;
    top: 4.5rem;
    z-index: 1020;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.kaution-jumpnav-pill {
    flex: 0 0 auto;
    padding: 6px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #00b4d8;
    color: #0096c7;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s, color 0.15s;
}
.kaution-jumpnav-pill:hover, .kaution-jumpnav-pill:focus {
    background: #00b4d8;
    color: #fff;
}
@media (max-width: 575.98px) {
    .kaution-jumpnav {top: 0; gap: 6px; padding: 6px 8px; justify-content: flex-start;}
    .kaution-jumpnav-pill {padding: 5px 16px; font-size: 0.9rem;}
}

/* === BUERGSCHAFTSVERSICHERUNG24: Cyan-Aktionsbutton (Berechnen) ===
   Gefuellter Markenfarben-Button fuer die primaere Rechner-Aktion. */
.btn-kaution-calc {background-color: #00b4d8; border-color: #00b4d8; color: #fff;}
.btn-kaution-calc:hover, .btn-kaution-calc:focus, .btn-kaution-calc:active {background-color: #0096c7; border-color: #0096c7; color: #fff;}

/* === BUERGSCHAFTSVERSICHERUNG24: Anker-Ziele unter dem fixed Header ===
   Scroll-Offset auf das jeweils angesprungene Anker-Ziel, damit es nicht hinter
   dem fixierten Header verschwindet (CSS-Fallback/Ergaenzung zum Smooth-Scroll-JS,
   das die exakte Header-Hoehe nutzt). ~Header-Hoehe ≈ 6rem.
   Hinweis: NICHT zusaetzlich scroll-padding-top auf html setzen (Offsets addieren sich). */
:target { scroll-margin-top: 6rem; }