/* =====================================================================
   eye-buy Studio für Augenoptik · Solingen – Hauptstil
   3-iQ Werbeagentur Solingen · TYPO3 14 Sitepackage

   Nachbau der alten Site (bundle.css / 3iq-t3.css, Bootstrap 3) mit den
   ORIGINALEN Maßen, Farben, Schriften und Klassennamen – ohne jQuery,
   Bootstrap-Komponenten, FontAwesome, slick, owl, jarallax, slim-lightbox.
   Symbole kommen als SVG-Masken, Slider von Swiper, Lightbox/Akkordeon
   aus 3iq.js.

   Bewusste Abweichungen (Barrierefreiheit, von Sascha gewünscht):
     * Blau (--eb-blau) #0e7aae statt var(--eb-blau) (15.10.2026, WAVE-Fehler
       live): weiße Schrift auf dem alten Blau erreichte nur 3,1:1.
       20 px bei Gewicht 600 zählt NICHT als „großer Text" (dafür wären
       700 oder 24 px nötig), also gelten 4,5:1 – #0e7aae liefert 4,8:1.
       Alle Verwendungen laufen über die Variable, damit es eine Stelle bleibt.
     * Blau-Verlauf der Flächen: hellster Punkt ebenfalls #0e7aae (4,8:1)
       statt #0f8ac5 (3,8:1) bzw. original #1598d4; dunkler Rand #056f9f.
     * Schaltflächen-Schrift 600 statt 400.
     * Link-Hover #666 statt #999, Fokusrahmen sichtbar (Tastatur).
   ===================================================================== */

/* 0. Variablen ------------------------------------------------------- */
:root {
    --eb-blau: #0e7aae;
    --eb-blau-dunkel: #056f9f;
    --eb-blau-verlauf: radial-gradient(#0e7aae 12%, #056f9f 87%);
    --eb-grau: #f1f1f1;
    --eb-stern: #f2c926;

    /* 3-iQ Standardbaukasten */
    --3iq-flaeche-neutral: #fff;
    --3iq-flaeche-akzent-hell: #f1f1f1;
    --3iq-flaeche-akzent-dunkel: var(--eb-blau-verlauf);
    --3iq-text-auf-akzent-dunkel: #fff;
    --3iq-linie-auf-akzent-dunkel: rgba(255, 255, 255, .32);
    --3iq-linie: #ddd;
    --3iq-abschnitt-abstand: 110px;
    --3iq-inhaltsbreite: 1200px;
    --3iq-seitenrand: 15px;
    --3iq-element-abstand: 0px;
    --3iq-absatz-abstand: 1.2em;
    --3iq-lichtkasten-grund: rgba(30, 30, 30, .9);
}

/* 1. Grundlagen (bundle.css: Base) ----------------------------------- */
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }  /* wie Bootstrap 3 (bundle.css) */
body {
    min-width: 320px;
    margin: 0;
    background: #fff;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.4;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: none;
    overflow-x: hidden;
}
@media (max-width: 1023px) { body { font-size: 18px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { body { font-size: 16px; } }

strong, b { font-weight: 600; }
img, video { max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: underline; transition: color .5s; }
a:hover, a:focus { color: #666; }
p { margin: 0 0 1.2em; }
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; }

/* Fokus nur bei Tastatur – Bedienelemente; Eingabefelder behalten ihn immer. */
:focus-visible { outline: 3px solid var(--eb-blau); outline-offset: 3px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
[id] { scroll-margin-top: 100px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 2000; padding: 12px 20px; background: var(--eb-blau-dunkel); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 16px; outline-color: #fff; }

.wrapper { position: relative; }
.main { display: block; }
.main--schmal .standard-section > .container, .main--schmal .sammelbox > .container { max-width: 880px; }
.text-center { text-align: center; }
.align-center { text-align: center; }

/* 2. Überschriften (bundle.css) -------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .6em; color: inherit; }
h1 { font-size: 36px; font-weight: 500; }
h2 { font-family: "Open Sans", sans-serif; font-size: 48px; font-weight: 400; line-height: 1.24; letter-spacing: .024em; margin-bottom: 40px; }
@media (max-width: 1023px) { h2 { font-size: 30px; margin-bottom: 20px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { h2 { font-size: 24px; } }
h3 { font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 200; }
header h3[class] { margin-top: -31px; margin-bottom: 36px; font-size: 30px; }
@media (max-width: 1023px) { h3 { font-size: 30px; } header h3[class] { margin-top: -11px; margin-bottom: 6px; font-size: 20px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { h3 { font-size: 20px; } }
h4 { font-family: "Raleway", sans-serif; font-size: 36px; font-weight: 200; padding-bottom: 10px; position: relative; text-transform: uppercase; line-height: 1.24; letter-spacing: .024em; }
@media (max-width: 1023px) { h4 { font-size: 30px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { h4 { font-size: 20px; } }
h5 { font-size: 21px; font-weight: 300; font-family: "Open Sans", sans-serif; }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { h5 { font-size: 17px; } }
h1[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-bottom: 0; }
.heading { margin-bottom: 0; }
.heading > h2, header > h2 { margin-bottom: 40px; }
@media (max-width: 1023px) { .heading > h2, header > h2 { margin-bottom: 20px; } }
.heading > h4, header > h4 { margin-bottom: .6em; }

/* 3. Flächen / Abschnitte (section-info, hfarbe1–3) ------------------ */
.standard-section { padding: 110px 0 101px; }
@media (max-width: 1199px) { .standard-section { padding: 50px 0 51px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .standard-section { padding: 40px 0 30px; } }
.standard-section > .container { max-width: 1200px; padding: 0 15px; }
.standard-section.sliderkopf { padding-bottom: 40px; }
.hintergrund-akzent-dunkel, .hfarbe3 { color: #fff; background: var(--eb-blau-verlauf); }
.hintergrund-akzent-rot { color: #fff; background: radial-gradient(circle, #cf0c0c 0%, #b00723 72%); }
/* Alt hatte JEDE Section-Info ihren vollen Abstand – auch zwei gleichfarbige
   direkt untereinander. Die Zusammenlegung aus 3iq.css greift hier deshalb nicht. */
.hintergrund-neutral + .hintergrund-neutral,
.hintergrund-akzent-hell + .hintergrund-akzent-hell,
.hintergrund-akzent-dunkel + .hintergrund-akzent-dunkel,
.hintergrund-akzent-rot + .hintergrund-akzent-rot { padding-top: 110px; }
@media (max-width: 1199px) { .hintergrund-neutral + .hintergrund-neutral, .hintergrund-akzent-hell + .hintergrund-akzent-hell, .hintergrund-akzent-dunkel + .hintergrund-akzent-dunkel, .hintergrund-akzent-rot + .hintergrund-akzent-rot { padding-top: 50px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .hintergrund-neutral + .hintergrund-neutral, .hintergrund-akzent-hell + .hintergrund-akzent-hell, .hintergrund-akzent-dunkel + .hintergrund-akzent-dunkel, .hintergrund-akzent-rot + .hintergrund-akzent-rot { padding-top: 40px; } }
.hintergrund-akzent-rot :is(h1, h2, h3, h4, h5, h6, p, li) { color: inherit; }

/* Absätze wie in .section-info */
.standard-section p { margin-bottom: 0; }
.standard-section p + p { margin-top: 29px; }
.standard-section h6 { padding: 3px 0; margin: 0; font-size: 20px; font-weight: 600; }
.standard-section h6 + p { margin-top: 27px; }
.standard-section p + h6 { margin-top: 30px; }
@media (max-width: 1023px) { .standard-section h6 { padding: 0; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .standard-section h6 { font-size: 18px; } }
.ce-bodytext p { margin-bottom: 0; }
.ce-bodytext p + p { margin-top: 29px; }
.ce-bodytext :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .6em; }
.ce-bodytext h2, .ce-bodytext > h2:last-child { margin-bottom: 40px; }  /* alt: auch als letztes Kind 40 px */
@media (max-width: 1023px) { .ce-bodytext h2, .ce-bodytext > h2:last-child { margin-bottom: 20px; } }
.ce-bodytext h4 { padding-bottom: 10px; }
.ce-bodytext a:not(.btn) { text-decoration: underline; }

/* Abstände vor/nach – alt gab es zusätzlich 55 px */
.frame-space-before-abstand55 { margin-top: 55px; }
.frame-space-after-abstand55 { margin-bottom: 55px; }

/* Raster (b13/container) – Spaltenabstand 30 px wie Bootstrap 3 */
.row { --bs-gutter-x: 30px; }
.raster .spalte > * + * { margin-top: 0; }

/* Bildblock 30/70 (alt: .section-blocks .block) */
.raster.frame-block > .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.raster.frame-block > .row > .spalte-1 { padding: 0; display: flex; }
.block__image { position: relative; width: 100%; height: 100%; padding-top: 40%; min-height: 250px; overflow: hidden; }
.block__image picture { display: block; position: absolute; inset: 0; }
.block__image .block__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fuellbild--oben .block__img { object-position: top; }
.fuellbild--unten .block__img { object-position: bottom; }
.fuellbild--links .block__img { object-position: left; }
.fuellbild--rechts .block__img { object-position: right; }
.raster.frame-block > .row > .spalte-2 { background: var(--eb-blau-verlauf); color: #fff; padding: 105px 80px 113px 30px; }
.raster.frame-block .spalte-2 > * { max-width: 1117px; }
.raster.frame-block .spalte-2 :is(h1, h2, h3, h4, h5, h6, p, li) { color: #fff; }
@media (max-width: 1023px) { .raster.frame-block > .row > .spalte-2 { padding: 60px 10px 60px 20px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .raster.frame-block > .row > .spalte-2 { padding: 30px 15px; } }

/* 4. Schaltflächen (bundle.css: Btn) --------------------------------- */
.btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    text-transform: uppercase;
    min-width: 218px;
    height: 57px;
    padding: 0 22px 0 10px;
    border: 1px solid var(--eb-blau);
    border-radius: 0;
    background: var(--eb-blau);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 55px;
    transition: background .3s, color .3s;
}
.btn > a, .btn > span { display: inline-block; padding: 0 15px; color: inherit; text-decoration: none; }
.btn.kontaktbutton > a { padding: 0 15px 0 7px; }
.btn.kontaktbutton::before {
    content: "";
    float: left;
    width: 22px;
    height: 55px;
    margin-left: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M288 144a110.9 110.9 0 0 0-31.2 5 55.4 55.4 0 0 1 7.2 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.2A111.7 111.7 0 1 0 288 144zm284.5 97.4C518.3 135.6 410.9 64 288 64S57.7 135.6 3.5 241.4a32.4 32.4 0 0 0 0 29.2C57.7 376.4 165.1 448 288 448s230.3-71.6 284.5-177.4a32.4 32.4 0 0 0 0-29.2zM288 400c-98.7 0-189.1-55-237.9-144C98.9 167 189.3 112 288 112s189.1 55 237.9 144C477.1 345 386.7 400 288 400z'/%3E%3C/svg%3E") center/22px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M288 144a110.9 110.9 0 0 0-31.2 5 55.4 55.4 0 0 1 7.2 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.2A111.7 111.7 0 1 0 288 144zm284.5 97.4C518.3 135.6 410.9 64 288 64S57.7 135.6 3.5 241.4a32.4 32.4 0 0 0 0 29.2C57.7 376.4 165.1 448 288 448s230.3-71.6 284.5-177.4a32.4 32.4 0 0 0 0-29.2zM288 400c-98.7 0-189.1-55-237.9-144C98.9 167 189.3 112 288 112s189.1 55 237.9 144C477.1 345 386.7 400 288 400z'/%3E%3C/svg%3E") center/22px no-repeat;
}
.btn:hover { border-color: var(--eb-blau); background-color: transparent; color: #000; }
.btn:hover a { text-decoration: none; }
.ce-bodytext .btn > a:not(.button) { text-decoration: none; }
.btn.blacko { background-color: transparent; color: #fff; }
.btn.blacko:hover { border-color: var(--eb-blau); background-color: var(--eb-blau); color: #fff; }
.btn:focus-within { outline: 3px solid #fff; outline-offset: 2px; }
.btn:focus-within:not(:has(:focus-visible)) { outline: none; }
@media (max-width: 420px) { .btn { font-size: 17px; } }
button.btn { line-height: 55px; }
/* Auf blauen Flächen (Verlauf, Bildblock-Spalte, Fußbereich) hob sich die
   Schaltfläche schon im Original kaum vom Grund ab (Button #169bd8 auf
   Verlauf ab #1598d4); mit dem dunkleren Blau wäre sie unsichtbar. Deshalb
   dort weißer Rand, Hover invertiert (weiß mit dunkelblauer Schrift, 5,5:1). */
.hintergrund-akzent-dunkel .btn, .hfarbe3 .btn, .raster.frame-block > .row > .spalte-2 .btn, .footer .btn { border-color: #fff; }
.hintergrund-akzent-dunkel .btn:hover, .hfarbe3 .btn:hover, .raster.frame-block > .row > .spalte-2 .btn:hover, .footer .btn:hover { color: var(--eb-blau-dunkel); background: #fff; border-color: #fff; }

/* FontAwesome-Ersatz: Sterne, Uhr, Auto, Lupe, Facebook als Masken */
.fas, .far, .fab { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor; }
.fa-star, .fa-star-half-alt, .fa-star-leer {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23000' d='M259.3 17.8 194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fa-star-half-alt { background: linear-gradient(90deg, currentColor 50%, rgba(128, 128, 128, .35) 50%); }
.fa-star-leer { background: rgba(128, 128, 128, .35); }
.fa-clock { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fa-car { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fa-search { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fa-facebook-square, .icon-facebook { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z'/%3E%3C/svg%3E") center/contain no-repeat; }
.fa-heart { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 5. Listen (bundle.css: list-checks / list-squares) ----------------- */
.list-checks, .ce-bodytext ul.list-checks { list-style-type: none; font-weight: 300; line-height: 1.4; padding-left: 0; margin: 20px 0; }
.list-checks li { position: relative; padding-left: 14px; margin-bottom: 0; }
.list-checks li:first-child { margin-top: 10px; }
.list-checks li::before {
    content: "";
    float: left;
    width: 17px;
    height: 17px;
    margin: 4px 9px 0 0;
    background: var(--eb-blau);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.list-checks li + li { margin-top: 15px; }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .list-checks li + li { margin-top: 10px; } }
.list-checks li strong { font-weight: 600; }
.hintergrund-akzent-dunkel .list-checks li::before, .hfarbe3 .list-checks li::before { background: #fff; }
.list-squares, .ce-bodytext ul.list-squares { list-style-type: none; line-height: 1.4; letter-spacing: -.02em; margin: 20px 20px 0 25px; padding-left: 0; }
.list-squares li { position: relative; padding-left: 9px; margin-bottom: 0; }
.list-squares li::before { content: ""; position: absolute; top: 10px; left: -19px; width: 6px; height: 7px; background: var(--eb-blau); }
.list-squares li + li { margin-top: 7px; }
.list-squares li > ul { padding-left: 10px; list-style-type: none; }
.list-squares li > ul > li::before { background: #4c4e50; }
.list-squares li > ul li + li { margin-top: 0; }

/* 6. Laufschrift (3iq-t3.css: topnews) ------------------------------- */
.topnews { display: block; overflow: hidden; color: #fff; background: #056f9f; padding: 3px 0; white-space: nowrap; }
.topnews p { margin: 0; display: inline-block; }
.topnews.topnews--lauf p { animation: marquee 30s linear infinite; }
.topnews:hover p, .topnews:focus-within p { animation-play-state: paused; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@media (max-width: 601px) { .topnews { display: none; } }

/* 7. Kopfbereich (bundle.css: Header, Navbar) ----------------------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 3; padding: 0; transition: box-shadow .3s, background .3s; }
.header .container { max-width: 1797px; width: 100%; padding: 0 15px; margin: 0 auto; }
.navbar { padding-right: 60px; display: flex; justify-content: space-between; align-items: flex-start; }
@media (max-width: 1800px) { .navbar { padding-right: 0; } }
@media (max-width: 1199px) { .navbar { margin-bottom: 10px; align-items: center; } }
.navbar-brand { height: auto; padding: 0; margin-top: -8px; transition: margin .3s; }
.navbar-brand a { display: block; }
.navbar-brand img { max-width: 245px; height: auto; transition: max-width .5s; display: block; }
@media (max-width: 1299px) { .navbar-brand img { max-width: 200px; } }
@media (max-width: 1199px) { .navbar-brand { max-width: 165px; margin-top: -2px; } .navbar-brand img { max-width: 165px; } }
@media (max-width: 600px) { .navbar-brand img { max-width: 110px; } }
.navbar-collapse { margin-left: auto; display: flex; flex-wrap: wrap; align-items: flex-start; }
.navbar-nav { padding: 94px 0 0; margin: 0; list-style-type: none; font-size: 18px; display: flex; transition: padding .3s; }
.navbar-nav > li { position: relative; }
.navbar-nav > li + li { margin-left: 23px; }
@media (max-width: 1390px) { .navbar-nav > li + li { margin-left: 10px; } }
.navbar-nav > li > a { display: inline-block; padding: 15px 0; line-height: 20px; color: #fff; font-size: 18px; font-family: "Open Sans", sans-serif; text-transform: uppercase; text-decoration: none; letter-spacing: .03em; transition: color .3s; }
@media (max-width: 1023px) { .navbar-nav > li > a { font-size: 16px; } }
.navbar-nav > li > a:hover, .navbar-nav > li:hover > a { color: #a2a2a2; }
.navbar-nav > li.active > a { text-decoration: underline; text-underline-offset: 6px; }
.is-active .navbar-nav > li > a:hover { color: #ddd; }
.navbar-nav .mobmein { display: none; }

/* Termin-Schaltfläche oben (alt: ab 1451 px, hier ab 1200 px) */
.btn.blacko.kontaktbutton.termin.toppinav { margin: 90px 0 0 20px; background: rgba(7, 108, 154, .39); transition: all .3s; }
.btn.blacko.kontaktbutton.termin.toppinav:hover { border-color: var(--eb-blau); background-color: var(--eb-blau); color: #fff; }
.header.is-active .btn.blacko.kontaktbutton.termin.toppinav { margin-top: 30px; }

.header__bar { display: none; }

/* Fester Kopf beim Scrollen (alt: .is-active) */
.header.is-active { background: rgba(7, 108, 154, .89); box-shadow: 0 0 5px rgba(0, 85, 139, .15); }
.header.is-active .navbar-brand { margin-top: -1px; }
.header.is-active .navbar-brand img { max-width: 149px; box-shadow: 0 0 5px rgba(0, 0, 0, .15); }
.header.is-active .navbar-nav { padding-top: 38px; }
.header.is-visible { background: rgba(0, 0, 0, .6); }

/* Burger (alt: .navbar-toggler) */
.navbar-toggler { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.navbar-toggler .navbar-toggler-icon { display: block; width: 30px; height: 30px; position: relative; transition: .4s ease-in-out; }
.navbar-toggler .navbar-toggler-icon span { position: absolute; left: 0; display: block; height: 3px; width: 100%; border-radius: 9px; background: #fff; opacity: 1; transition: .2s ease-in-out; }
.navbar-toggler .navbar-toggler-icon span:nth-child(1) { top: 4px; }
.navbar-toggler .navbar-toggler-icon span:nth-child(2) { top: 14px; }
.navbar-toggler .navbar-toggler-icon span:nth-child(3) { top: 24px; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(1) { top: 11px; transform: rotate(135deg); }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(2) { left: -60px; opacity: 0; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span:nth-child(3) { top: 11px; transform: rotate(-135deg); }

@media (max-width: 1199px) {
    .navbar-toggler { display: block; }
    .navbar-collapse {
        position: fixed; top: 134px; bottom: 0; right: 0; width: 400px; padding: 0 15px 30px 15px;
        display: block; background: #000; overflow-x: hidden; overflow-y: auto;
        transform: translateX(100%); transition: transform .3s; z-index: 4;
    }
    .navbar-collapse.in { transform: translateX(0); }
    .navbar-collapse.has-offset { top: 60px; }
    .header.is-active .navbar-brand { margin-top: 0; position: absolute; top: -1px; }
    .header.is-active .navbar-brand img { max-width: 119px; }
    .navbar-nav { display: block; float: none; padding-top: 30px; }
    .navbar-nav > li { float: none; }
    .navbar-nav > li + li { margin-left: 0; margin-top: 10px; }
    .navbar-nav > li > a { padding: 10px 0; font-size: 16px; }
    .btn.blacko.kontaktbutton.termin.toppinav { display: none; }
    .header__bar { display: flex; align-items: center; justify-content: flex-start; font-weight: 300; font-size: 18px; padding-top: 15px; width: 100%; }
    .header__bar-inner { padding-bottom: 10px; display: flex; flex-direction: column; align-items: flex-start; }
    .header__bar .kontinav { padding-top: 30px; }
    .header__bar .kontinav .btn { font-size: 17px; min-width: 279px; }
    body.is-active { overflow: hidden; }
    body.is-active::after { content: ""; position: fixed; inset: 0; z-index: 2; background: rgba(22, 155, 216, .5); }
}
@media (max-width: 790px) { .navbar-nav .mobmein { display: block; } .navbar-nav .mobmein .fas { font-size: 14px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) {
    .navbar-collapse { top: 133px; width: 100%; }
    .navbar-collapse.has-offset { top: 55px; }
    .navbar-nav { margin: 0; padding-top: 18px; }
    .header.is-active .navbar-brand img { max-width: 70px; }
}
@media (max-width: 600px) { .navbar-collapse { top: 93px; } .header.is-active .navbar-brand img { max-width: 90px; } }

/* 8. Kopfslider / Hero (bundle.css: Slider, Hero) -------------------- */
.hero { position: relative; background: #000; }
.slider { font-size: 0; }
.slider .slider__slide-image { position: relative; padding-top: calc(37% - 3px); overflow: hidden; background: #000; }
.hero--sliderniedrig .slider__slide-image { padding-top: calc(29% - 3px); }
@media (max-width: 1700px) { .hero--sliderniedrig .slider__slide-image { padding-top: calc(37% - 3px); } }
@media (max-width: 1000px) { .hero--sliderniedrig .slider__slide-image { padding-top: calc(46% - 3px); } }
.slider .slider__slide-image picture, .slider .slider__slide-image > img, .slider__slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.slider .slider__slide-image::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #000; opacity: .48; }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) {
    .slider .slider__slide-image { padding-top: calc(89% + 38px); margin-bottom: -38px; background-color: #f7f7f9; }
    .hero--sliderniedrig .slider__slide-image { padding-top: calc(69% - 3px); margin-bottom: 0; }
}
.hero .container { width: 100%; max-width: none; position: absolute; left: 0; bottom: 90px; z-index: 2; padding: 0 15px; }
@media (max-width: 600px) { .hero .container { bottom: 97px; } }
.hero__inner { max-width: 1765px; margin: 0 auto; color: #fff; font-size: 20px; }
.hero h5 { font-size: 72px; font-weight: 300; text-transform: none; margin: 10px 0 0; line-height: 1.2; }
@media (max-width: 1390px) { .hero h5 { font-size: 57px; } }
@media (max-width: 900px) { .hero h5 { font-size: 37px; } }
@media (max-width: 600px) { .hero h5 { font-size: 24px; } }
.hero__kicker { font-size: 24px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.hero__text { margin: 12px 0 0; max-width: 760px; }
.hero__actions { margin-top: 16px; }
.hero .container .btn { background-color: transparent; text-transform: none; }
.hero .btn:hover { border-color: var(--eb-blau); background: rgba(14, 122, 174, .39); color: #fff; transition: all .3s; }
@media (max-width: 900px) { .hero .container .btn { font-size: 27px; } }
@media (max-width: 600px) { .hero .container .btn { font-size: 16px; min-width: 118px; height: 57px; padding: 0; } .hero__actions { display: none; } }
.hero .ebra26-frist { margin-bottom: 16px; }

/* Punkte wie slick (12 × 12, rechts unten) */
.hero .swiper-pagination.slick-dots { position: absolute; left: auto; right: 60px; bottom: 26px; width: auto; display: flex; gap: 5px; z-index: 3; }
.hero .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0; border-radius: 0; background: transparent; border: 1px solid #fff; opacity: 1; }
.hero .swiper-pagination-bullet-active, .hero .swiper-pagination-bullet:hover { border-color: var(--eb-blau); }
.hero__pause { position: absolute; right: 16px; bottom: 60px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 1px solid #fff; background: rgba(0, 0, 0, .35); color: #fff; font-size: 11px; cursor: pointer; }
.hero__pause[aria-pressed="true"] span[aria-hidden] { font-size: 0; }
.hero__pause[aria-pressed="true"] span[aria-hidden]::before { content: "▶"; font-size: 11px; }

/* 9. Bewertungskasten (bundle.css: #newsletterbanner) --------------- */
#newsletterbanner { position: absolute; z-index: 2; top: 300px; right: 0; background: #fff; padding: 10px; max-width: 210px; box-shadow: -2px 0 5px rgba(0, 0, 0, .1); animation: slide 1.1s forwards; animation-delay: .5s; overflow: hidden; transform: translateX(100%); font-size: 16px; }
@keyframes slide { 100% { transform: translateX(0); } }
#newsletterbanner h4 { font-family: "Raleway", sans-serif; font-size: 16px; font-weight: 600; margin: 0; padding: 0; text-align: center; text-transform: uppercase; line-height: 1.3; letter-spacing: 0; }
#newsletterbanner .stars { text-align: center; font-size: 16px; padding: 5px; color: #f2c926; }
#newsletterbanner .bewertungsname { text-align: center; font-size: 14px; }
#newsletterbanner .jbewerten { font-size: 14px; padding: 9px 0 11px; text-align: center; }
#newsletterbanner .thebutton { text-align: center; }
#newsletterbanner .btn { font-size: 14px; padding: 0 5px 0 0; min-width: 100px; line-height: 40px; height: auto; }
#newsletterbanner .btn.kontaktbutton > a { padding: 0 5px 0 6px; }
#newsletterbanner .btn.kontaktbutton::before { height: 40px; width: 16px; margin-left: 8px; -webkit-mask-size: 16px; mask-size: 16px; }
@media (max-width: 1290px) { #newsletterbanner { top: 190px; } }
@media (max-width: 1130px) { #newsletterbanner { top: 140px; } }
@media (max-width: 790px) { #newsletterbanner { display: none; } }

/* 10. Markenlogos (bundle.css) ---------------------------------------- */
.markenlogos .row { --bs-gutter-x: 30px; }
.markenlogodiv { padding-bottom: 13px; text-align: center; }
.markenlogodiv img { max-width: 225px; width: 100%; height: auto; }
.markenlogodiv a { display: inline-block; }

/* 11. Kundenslider (bundle.css: slider, gesamthoschies) ------------- */
.gesamthoschies .container { padding-bottom: 80px; max-width: 1200px; }
@media (min-width: 1400px) { .gesamthoschies .container { width: 1277px; max-width: 1277px; padding-bottom: 100px; } }
.gesamthoschies .slider { font-size: 20px; }
.gesamthoschies .slider { position: relative; }
.gesamthoschies .slider__clip { position: relative; }
.brillenhoschies { padding: 0; position: relative; overflow: hidden; }
.brillenhoschies .swiper-slide { padding: 18px; box-sizing: border-box; }
.slider .slider__image { position: relative; overflow: hidden; }
.slider .slider__image a { display: block; width: 100%; height: 100%; }
.slider .slider__image img { display: block; width: 100%; height: auto; aspect-ratio: 421 / 507; object-fit: cover; margin: 0; }
.slider .slider__image-overlay { width: 100%; height: 0; background-color: rgba(17, 122, 170, .5); position: absolute; bottom: 0; left: 0; transition: height .4s; overflow: hidden; }
.slider .slider__image:hover .slider__image-overlay { height: 100%; }
.slider .slider__image-overlay span { position: absolute; top: 45%; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; color: #fff; opacity: .3; }
@media (max-width: 1199px) { .slider .slider__image-overlay span { width: 52px; height: 52px; } }
.slider .slider__image-overlay p { width: 100%; position: absolute; top: 100%; padding: 0 10px; margin: 0; text-align: center; font-size: 20px; color: #fff; transition-delay: .4s; }
.slider .slider__image:hover .slider__image-overlay p { top: 55%; transition: top .3s .2s; }
.gesamthoschies .swiper-knopf { position: absolute; top: 41%; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--eb-blau); cursor: pointer; transition: color .4s; }
.gesamthoschies .swiper-knopf::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23000' d='M4.2 247.5 151 100.7c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L65.1 256l122.7 118.5c4.7 4.7 4.7 12.3 0 17L168 411.3c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath fill='%23000' d='M4.2 247.5 151 100.7c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17L65.1 256l122.7 118.5c4.7 4.7 4.7 12.3 0 17L168 411.3c-4.7 4.7-12.3 4.7-17 0L4.2 264.5c-4.7-4.7-4.7-12.3 0-17z'/%3E%3C/svg%3E") center/contain no-repeat; }
.gesamthoschies .swiper-knopf--weiter::before { transform: scaleX(-1); }
.gesamthoschies .swiper-knopf--zurueck { left: -10px; }
.gesamthoschies .swiper-knopf--weiter { right: -10px; }
.gesamthoschies .swiper-knopf:hover { color: #5cb8e2; }
@media (max-width: 900px) { .gesamthoschies .swiper-knopf--zurueck { left: 5px; } .gesamthoschies .swiper-knopf--weiter { right: 5px; } }
.gesamthoschies .swiper-pagination { position: absolute; bottom: 54px; left: 0; width: 100%; display: flex; justify-content: center; gap: 5px; }
@media (min-width: 1400px) { .gesamthoschies .swiper-pagination { bottom: 74px; } }
.gesamthoschies .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0; border-radius: 0; background: transparent; border: 1px solid #ddd; opacity: 1; }
.gesamthoschies .swiper-pagination-bullet-active, .gesamthoschies .swiper-pagination-bullet:hover { border-color: var(--eb-blau); }

/* 12. Galerie (alt: .row > .col-sm-3.col-md-6 + Lightbox) ----------- */
.galerie .galerie__eintrag { margin-bottom: 0; }  /* alt: Bilder ohne Zeilenabstand */
.galerie .galerie__eintrag a { display: block; }
.galerie .galerie__eintrag img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .galerie--3 .galerie__eintrag { width: 33.3333%; } .galerie--4 .galerie__eintrag { width: 25%; } }

/* 13. Parallax-Band (3iq-t3.css: parallax-fenster, paraslogan) ------ */
.jarallax { position: relative; z-index: 0; overflow: hidden; }
.jarallax picture { display: block; position: absolute; inset: 0; z-index: -1; }
.jarallax .jarallax-img { position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.jarallax--fest .jarallax-img { height: 160%; top: -30%; will-change: transform; }
.parallax-fenster { min-height: 400px; background: #000; border-top: 1px solid var(--eb-blau); }
.parallax-fenster::before { content: ""; background: #000; opacity: .72; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.parallax-fenster .container { position: relative; max-width: 1200px; padding: 0 15px; }
.paraslogan { position: relative; z-index: 2; text-align: center; padding: 70px 10px; color: #fff; font-size: 30px; }
.paraslogan h2 { margin-bottom: 40px; }
.paraslogan p { margin: 0 0 36px; font-weight: 300; }
.paraslogan p.btn { margin: 0; font-weight: 600; }
.paraslogan__kicker { font-size: 20px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1020px) { .paraslogan { font-size: 24px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .paraslogan { font-size: 18px; padding: 70px 10px 10px; } }

/* 14. Karte mit Einwilligung (3iq-t3.css: media) --------------------- */
.media { position: relative; margin: 0 auto; font-size: 18px; line-height: 1.2; color: rgba(0, 0, 0, .3); background-image: url("../img/map.jpg"); background-position: center center; background-size: cover; text-align: center; min-height: 386px; max-height: 450px; overflow: hidden; }
.media.media--yt::before { content: ""; background: #fff; opacity: .72; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.media p { color: #000; }
.media p a { color: #000 !important; text-decoration: underline; padding-top: 3px; }
.media .media__inner { padding: 0 0 56.25%; }
.media .media__content { position: absolute; top: 50%; left: 0; right: 0; padding: 15px 20px; transform: translateY(-50%); transition: all .4s ease; }
.media .media__video { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 5; pointer-events: none; transition: all .4s ease .2s; }
.media .media__video iframe { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border: 0; }
.media--geladen .media__content { opacity: 0; pointer-events: none; }
.media--geladen .media__video { opacity: 1; pointer-events: all; }
.media--geladen.media--yt::before { opacity: 0; }
.media .media__actions { margin-top: 12px; }
.media .btn .fa-car { margin-right: 8px; }
@media (max-width: 767px) { .media { font-size: 15px; } }

/* 15. Video ----------------------------------------------------------- */
.video-element { position: relative; margin: 0; }
.video-element video { display: block; width: 100%; height: auto; background: #000; }
.video-element figcaption { font-size: 14px; padding: 9px 2px 10px; }
.video-element--hintergrund video { aspect-ratio: 16 / 9; object-fit: cover; }
.video-element__pause { position: absolute; right: 16px; bottom: 12px; z-index: 6; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #000; font-size: 11px; cursor: pointer; }

/* 16. Akkordeon (bundle.css: accordion-type-2, panel) ---------------- */
.accordion-rahmen .accordion { display: flex; flex-direction: column; gap: 5px; }
.accordion__section { border: none; background: rgba(255, 255, 255, .4); border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); overflow: hidden; }
.accordion__head { position: relative; padding: 16px 15px 10px 56px; background-color: var(--eb-blau); color: #fff; border: 0; border-radius: 0; font-family: "Raleway", sans-serif; font-size: 18px; font-weight: 500; text-transform: uppercase; line-height: 1.24; transition: background .4s; display: block; width: 100%; text-align: left; cursor: pointer; }
.accordion__head > span { display: block; }
.accordion__head:hover, .accordion__head:focus-visible { background-color: var(--eb-blau-dunkel); } /* #3b85b7 hatte nur 4,0:1 */
.accordion__head:focus-visible { outline-color: #fff; outline-offset: -4px; }
.accordion__icon { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: #fff; transition: transform .4s; }
.accordion__icon::after { transform: rotate(90deg); }
.accordion__head[aria-expanded="true"] .accordion__icon::after { transform: rotate(0); }
.accordion__body { padding: 15px; font-weight: 300; font-size: 16px; line-height: 1.375; color: inherit; }
.accordion__body > * + * { margin-top: 15px; }
.hintergrund-akzent-dunkel .accordion__section, .hfarbe3 .accordion__section { background: #f2f2f2; }
.hintergrund-akzent-dunkel .accordion__body, .hfarbe3 .accordion__body { color: #666; background: #f2f2f2; }
.hintergrund-akzent-dunkel .accordion__body :is(h1, h2, h3, h4, h5, h6, p, li) { color: #666; }
@media (max-width: 1199px) { .accordion__head { font-size: 16px; } }

/* 17. Text/Bild (fluid_styled_content) -------------------------------- */
.ce-textpic .ce-gallery figure, .ce-gallery figure { margin: 0; }
.ce-gallery img { display: block; max-width: 100%; height: auto; }
.ce-border img { border: 1px solid #ccc; }
.ce-gallery figcaption { font-size: 14px; padding: 9px 2px 10px; display: table-caption; caption-side: bottom; }
.ce-above .ce-gallery { margin-bottom: 10px; }
.ce-intext.ce-left .ce-gallery { margin-right: 10px; }
.ce-intext.ce-right .ce-gallery { margin-left: 10px; }
.ce-gallery .ce-row + .ce-row { margin-top: 10px; }
.ce-center .ce-gallery { margin-left: auto; margin-right: auto; }

/* 18. Fußbereich (bundle.css: Footer) ------------------------------- */
.footer { padding: 35px 0 0; background: var(--eb-blau-verlauf); color: #fff; font-size: 16px; }
.footer .container { max-width: 1273px; width: 100%; padding: 0 15px; margin: 0 auto; }
.footer :is(h1, h2, h3, h4, h5, h6, p, li) { color: #fff; }
.footer a { color: #fff; text-decoration: underline; }
.footer a:hover, .footer a:focus { color: #ddd; }
.footer strong { font-weight: 600; text-transform: uppercase; }
.footer .footer__logo { display: block; text-decoration: none; }
.footer .footer__logo img { display: block; width: 245px; height: auto; max-width: 100%; }
@media (max-width: 1023px) { .footer .footer__logo { width: 130px; padding-bottom: 20px; } .footer .footer__logo img { width: 130px; } }
@media (max-width: 767px), screen and (max-width: 812px) and (orientation: landscape) { .footer .footer__logo { margin: 0 auto; } }
.footer .raster .row { --bs-gutter-x: 30px; }
.footer .ce-bodytext p { margin-bottom: 1.2em; }
.footer .iq3 { font-size: 13px; padding-top: 26px; }
.footer .iq4 .icon-facebook, .footer .iq4 .fab { width: 1.1em; height: 1.1em; margin-right: 4px; }
.iq3b { font-size: 13px; }


/* 20. Ray-Ban-Aktion im Kopf (3iq-t3.css: .ebra26, 1:1 übernommen) ------ */
.ebra26 { --ebra26-bg: url("/fileadmin/eyebuy/aktion-eye-buy.jpg"); --ebra26-kopfraum: clamp(140px, 15vh, 240px); --ebra26-hoehe: clamp(600px, 78vh, 900px); --ebra26-black: #111111; --ebra26-sand: #f2f0ed; --ebra26-signal: #c8102e; --ebra26-white: #ffffff; }
.ebra26 * { box-sizing: border-box; }
.ebra26 .container { max-width: 1200px; padding: 0 15px; margin: 0 auto; }
.ebra26-buehne { position: relative; display: flex; align-items: flex-end; min-height: var(--ebra26-hoehe); padding-top: var(--ebra26-kopfraum); background-color: var(--ebra26-black); background-image: var(--ebra26-bg); background-size: cover; background-position: center right; background-repeat: no-repeat; }
.ebra26-buehne::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .22) 38%, rgba(10, 10, 10, .88) 100%); }
.ebra26-buehne > .container { position: relative; z-index: 1; }
.ebra26-buehne__inner { max-width: 900px; padding: 48px 0 52px; color: var(--ebra26-white); }
.ebra26-frist { display: inline-flex; align-items: center; background: var(--ebra26-signal); color: var(--ebra26-white); font-size: clamp(16px, 1.2vw, 21px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; padding: 10px 18px; margin: 0 0 26px; }
.ebra26-frist i { margin-right: 10px; font-size: .9em; }
.ebra26-kicker { font-size: clamp(20px, 1.9vw, 32px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; color: rgba(255, 255, 255, .85); margin: 0 0 10px; }
.ebra26-title { font-family: inherit; font-size: clamp(46px, 6vw, 96px); font-weight: 700; line-height: .98; letter-spacing: -.01em; text-transform: uppercase; color: var(--ebra26-white); margin: 0 0 18px; padding: 0; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.ebra26-lead { font-size: clamp(19px, 1.5vw, 27px); font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, .92); max-width: 760px; margin: 0; }
.ebra26-lead strong { color: var(--ebra26-white); font-weight: 700; }
.ebra26-riegel { background: #cf0c0c; background: radial-gradient(circle, rgba(207, 12, 12, 1) 0%, rgba(176, 7, 35, 1) 72%); color: var(--ebra26-white); padding: 34px 0 20px; }
.ebra26-riegel__grid { display: flex; flex-wrap: wrap; align-items: center; margin: -16px -26px; }
.ebra26-riegel__preise { display: flex; flex-wrap: wrap; align-items: center; }
.ebra26-riegel__item { padding: 16px 26px; }
.ebra26-riegel__cta { padding: 16px 26px; margin-left: auto; }
.ebra26-riegel__label { font-size: clamp(15px, 1.1vw, 20px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: rgba(255, 255, 255, .68); margin: 0 0 8px; }
.ebra26-riegel__preis { display: flex; align-items: baseline; margin: 0; line-height: 1; }
.ebra26-riegel__preis b { font-size: clamp(46px, 3.8vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ebra26-white); }
.ebra26-riegel__alt { margin-left: 14px; font-size: clamp(18px, 1.35vw, 25px); font-weight: 400; color: rgba(255, 255, 255, .6); }
.ebra26-riegel__alt s { text-decoration-color: #ffffff; text-decoration-thickness: 2px; }
.ebra26-cta { display: inline-block; background: var(--ebra26-white); color: var(--ebra26-black); border: 2px solid var(--ebra26-white); font-size: clamp(16px, 1.2vw, 21px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; padding: 20px 44px; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.ebra26-cta:hover, .ebra26-cta:focus { background: transparent; color: var(--ebra26-white); text-decoration: none; }
.ebra26-cta:focus-visible { outline: 3px solid var(--ebra26-signal); outline-offset: 3px; }
.ebra26-fein { background: #cf0c0c; background: radial-gradient(circle, rgba(207, 12, 12, 1) 0%, rgba(176, 7, 35, 1) 72%); color: #eee; font-size: 16px; line-height: 1.5; padding: 0 0 22px; }
.ebra26-fein p { margin: 0; }
.ebra26-fein strong { color: #eee; font-weight: 700; }
@media (max-width: 992.98px) {
    .ebra26-buehne__inner { padding: 28px 0 26px; }
    .ebra26-title { font-size: clamp(34px, 9vw, 54px); }
    .ebra26-kicker { font-size: clamp(16px, 4vw, 22px); letter-spacing: .16em; }
    .ebra26-riegel__preise { width: 100%; }
    .ebra26-riegel__item { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; }
    .ebra26-riegel__label { margin: 0; }
    .ebra26-riegel__preis b { font-size: 38px; }
    .ebra26-riegel__cta { flex: 1 1 100%; margin-left: 0; }
    .ebra26-cta { display: block; text-align: center; }
}
@media (max-width: 570.98px) { .ebra26-buehne { background-position: 80% 50%; } .ebra26-riegel__preis b { font-size: 18px; } }

/* 19. Bewegung, Druck ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .topnews p { animation: none; padding-left: 15px; white-space: normal; display: block; }
    #newsletterbanner { animation: none; transform: none; }
}
@media print {
    .header, .navbar-toggler, #newsletterbanner, .skip-link, .swiper-knopf, .swiper-pagination, .hero__pause, .topnews { display: none !important; }
    body { color: #000; }
    .standard-section, .footer, .hfarbe3 { background: none !important; color: #000 !important; }
}