/* IT-Klimt – eigenes Stylesheet – Fassung 2026-09-18g FINAL
/* ===================================================================
   IT-Klimt - eigene Ergaenzungen
   Wird als letztes Stylesheet geladen und ueberschreibt das Theme.
   Enthaelt: Hinweisbanner, Barrierefreiheit, Formular, Responsive-
   Korrekturen, weichere Uebergaenge.
   =================================================================== */

:root {
    --itk-blue:        #0068A2;   /* Logo-Mittelblau */
    --itk-blue-dark:   #003654;   /* Logo-Navy */
    --itk-blue-light:  #1BA3DE;   /* Logo-Hellblau, nur Flächen */
    --itk-yellow:      #f9c322;
    --itk-ink:         #12212C;   /* Text, aus dem Navy abgeleitet */
    --itk-muted:       #5A6B7A;   /* Nebentext, 5,5:1 auf Weiß */
    --itk-line:        #DEE6ED;
    --itk-radius:      10px;
    --itk-ease:        cubic-bezier(.4, 0, .2, 1);
    --itk-speed:       .25s;
}

/* -------------------------------------------------------------------
   1. Barrierefreiheit
   ------------------------------------------------------------------- */

.itk-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--itk-blue);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--itk-radius) 0;
    text-decoration: none;
}
.itk-skiplink:focus {
    left: 0;
    color: #fff;
}

/* Sichtbarer Fokus fuer Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--itk-blue-light);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Aktiver Menuepunkt */
.navigation-menu > ul > li > a.is-current > span,
.navigation-menu .submenu li a.is-current span,
.offcanvas-navigation a.is-current span {
    color: var(--itk-blue);
    font-weight: 700;
}
.navigation-menu > ul > li > a.is-current::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--itk-blue);
    border-radius: 2px;
    margin-top: 3px;
}

/* Menue-Button als echtes button-Element */
.itk-burger {
    background: none;
    border: 0;
    padding: 6px 10px;
    color: var(--itk-ink);
    cursor: pointer;
    line-height: 1;
}

/* -------------------------------------------------------------------
   2. Hinweisbanner (Urlaub, Feiertage, Stoerungen)
   ------------------------------------------------------------------- */

.itk-notice {
    position: relative;
    z-index: 999;
    color: #fff;
    font-size: .9375rem;
    line-height: 1.5;
    animation: itk-slide-down .4s var(--itk-ease) both;
}
.itk-notice--urlaub  { background: linear-gradient(90deg, #0068A2, #1BA3DE); }
.itk-notice--hinweis { background: linear-gradient(90deg, #0d7a5f, #14a37a); }
.itk-notice--warnung { background: linear-gradient(90deg, #a4262c, #d1414a); }

.itk-notice__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.itk-notice__icon {
    flex: 0 0 auto;
    display: flex;
    opacity: .9;
}
.itk-notice__text {
    margin: 0;
    flex: 1 1 auto;
    color: #fff;
}
.itk-notice__text strong { color: #fff; }
.itk-notice__close {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .15);
    border: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background var(--itk-speed) var(--itk-ease);
}
.itk-notice__close:hover { background: rgba(255, 255, 255, .3); }

@keyframes itk-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@media (max-width: 575px) {
    .itk-notice__inner { padding: 10px 14px; gap: 9px; align-items: flex-start; }
    .itk-notice        { font-size: .875rem; }
    .itk-notice__close { width: 26px; height: 26px; }
}

/* -------------------------------------------------------------------
   3. Kopfbereich
   ------------------------------------------------------------------- */

.top-message a {
    color: var(--itk-blue);
    font-weight: 600;
    text-decoration: none;
}
.top-message a:hover { text-decoration: underline; }
.itk-sep { margin: 0 8px; color: var(--itk-muted); }

@media (max-width: 575px) {
    .header-top-wrap .top-message { font-size: .8125rem; line-height: 1.6; }
    .itk-sep { display: block; height: 0; overflow: hidden; margin: 0; }
}

/* Logo nicht ueberdimensionieren */
.header__logo img { max-height: 52px; width: auto; }
@media (max-width: 991px) { .header__logo img { max-height: 42px; } }
@media (max-width: 400px) { .header__logo img { max-height: 34px; } }

/* -------------------------------------------------------------------
   4. Kontaktformular
   ------------------------------------------------------------------- */

.itk-field { margin-bottom: 18px; }

.itk-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--itk-ink);
    margin-bottom: 6px;
}
.itk-label .itk-req { color: #c0392b; margin-left: 2px; }

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--itk-line);
    border-radius: var(--itk-radius);
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
    color: var(--itk-ink);
    transition: border-color var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
    border-color: var(--itk-blue);
    box-shadow: 0 0 0 3px rgba(0, 67, 149, .12);
    outline: none;
}
.contact-form-wrap textarea { min-height: 160px; resize: vertical; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots sichtbar */
.itk-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.itk-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--itk-muted);
    margin: 18px 0 6px;
}
.itk-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--itk-blue);
    cursor: pointer;
}
.itk-consent a { color: var(--itk-blue); text-decoration: underline; }

.form-messege {
    margin-top: 16px;
    padding: 0;
    font-size: .9375rem;
    line-height: 1.55;
}
.form-messege:not(:empty) {
    padding: 13px 16px;
    border-radius: var(--itk-radius);
}
.form-messege.success {
    background: #e7f6ee;
    color: #146c43;
    border: 1px solid #a7dcc0;
}
.form-messege.error {
    background: #fdecea;
    color: #a4262c;
    border: 1px solid #f3bcb9;
}

/* Absende-Button mit Ladezustand */
.submit-btn .ht-btn[disabled] { opacity: .65; cursor: progress; }

/* Fehlerhafte Felder */
.contact-form-wrap input.error,
.contact-form-wrap textarea.error { border-color: #d1414a; }
.contact-form-wrap label.error {
    display: block;
    color: #a4262c;
    font-size: .8125rem;
    margin-top: 5px;
    font-weight: 500;
}

/* -------------------------------------------------------------------
   5. Kontaktseite: Infoblöcke
   ------------------------------------------------------------------- */

.itk-infocard {
    background: #fff;
    border: 1px solid var(--itk-line);
    border-radius: 14px;
    padding: 26px 28px;
    height: 100%;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-infocard:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(21, 33, 54, .08);
}
.itk-infocard h3 {
    font-size: 1.0625rem;
    margin: 0 0 14px;
    color: var(--itk-ink);
}
.itk-infocard ul { list-style: none; margin: 0; padding: 0; }
.itk-infocard li {
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #f1f4f8;
    font-size: .9375rem;
}
.itk-infocard li:last-child { border-bottom: 0; }
.itk-infocard li span:last-child { color: var(--itk-muted); text-align: right; }
.itk-infocard address { font-style: normal; line-height: 1.7; margin: 0; }

.itk-note {
    background: #f4f7fb;
    border-left: 3px solid var(--itk-blue);
    padding: 14px 18px;
    border-radius: 0 var(--itk-radius) var(--itk-radius) 0;
    font-size: .9375rem;
    color: var(--itk-muted);
    margin-top: 18px;
}

/* -------------------------------------------------------------------
   6. Fußbereich
   ------------------------------------------------------------------- */

.itk-address { font-style: normal; line-height: 1.75; margin: 0; }

.itk-hours li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    font-size: .9375rem;
}
.itk-hours li span:last-child { color: var(--itk-muted); white-space: nowrap; }

.itk-hours-note {
    font-size: .8125rem;
    color: var(--itk-muted);
    margin: 12px 0 18px;
    line-height: 1.55;
}
.itk-treelabel { display: inline-block; }
.itk-treelabel {
    display: inline-block;
    margin-top: 6px;
    transition: transform var(--itk-speed) var(--itk-ease), opacity var(--itk-speed) var(--itk-ease);
}
.itk-treelabel:hover { transform: translateY(-2px); }
.itk-treelabel img { max-width: 230px; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 767px) { .itk-treelabel img { max-width: 200px; } }

.footer-widget__title { font-size: 1rem; font-weight: 700; }

.copyright-text { font-size: .8125rem; line-height: 1.7; color: var(--itk-muted); }

@media (max-width: 767px) {
    .footer-widget { margin-bottom: 34px; }
    .footer-copyright-area .col-md-5 { margin-top: 16px; }
}

/* -------------------------------------------------------------------
   7. Weiche Uebergaenge
   ------------------------------------------------------------------- */

a,
.ht-btn,
.btn,
.social-link,
.ht-box-images,
.ht-box-icon,
.brand-logo img,
.itk-infocard {
    transition: color var(--itk-speed) var(--itk-ease),
                background-color var(--itk-speed) var(--itk-ease),
                border-color var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease),
                opacity var(--itk-speed) var(--itk-ease);
}

.ht-btn:hover,
.btn--secondary:hover { transform: translateY(-2px); }

.ht-box-images.style-01:hover { transform: translateY(-5px); }


html { scroll-behavior: smooth; }

/* Nutzer, die weniger Bewegung wollen, bekommen keine */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------------
   8. Responsive-Korrekturen
   ------------------------------------------------------------------- */

/* Kein horizontales Scrollen */
/* overflow-x: clip statt hidden - hidden macht position:sticky wirkungslos,
   weil es einen eigenen Scrollbereich erzeugt. clip verhindert seitliches
   Scrollen genauso, ohne die mitlaufende Kopfleiste zu zerstoeren. */
html, body { overflow-x: clip; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* Ueberschriften auf kleinen Geraeten nicht zu gross */
@media (max-width: 991px) {
    .infotechno-hero-text h1 { font-size: 2.25rem; line-height: 1.25; }
    .section-title .heading,
    .section-title-wrap .heading { font-size: 1.75rem; line-height: 1.3; }
}
@media (max-width: 575px) {
    .infotechno-hero-text h1 { font-size: 1.75rem; }
    .section-title .heading,
    .section-title-wrap .heading,
    .section-title-wrapper .section-title { font-size: 1.5rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3125rem; }
    .call-us { font-size: 1.5rem; }
    .call-us a { word-break: break-word; }
}

/* Abstaende auf Mobilgeraeten reduzieren */
@media (max-width: 767px) {
    .section-space--ptb_100 { padding-top: 56px;  padding-bottom: 56px; }
    .section-space--ptb_120 { padding-top: 56px;  padding-bottom: 56px; }
    .section-space--pt_100  { padding-top: 56px; }
    .section-space--pb_100  { padding-bottom: 56px; }
    .section-space--pb_70   { padding-bottom: 40px; }
    .section-space--ptb_80  { padding-top: 48px;  padding-bottom: 48px; }
    .section-space--mb_60   { margin-bottom: 34px; }
    .section-space--mt_60   { margin-top: 34px; }
}

/* Hero auf Tablet/Smartphone stapeln */
@media (max-width: 991px) {
    .infotechno-hero .row { flex-direction: column-reverse; }
    .infotechno-hero-text { text-align: center; margin-top: 28px; }
    .infotechno-hero-inner-images { text-align: center; }
    .infotechno-hero-inner-images img { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .infotechno-hero-inner-images img { max-width: 190px; }
    .infotechno-hero { padding-top: 34px; }
}

/* Touch-Ziele mindestens 44px */
@media (max-width: 991px) {
    .offcanvas-navigation a,
    .footer-widget__list a,
    .ht-social-networks .social-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .footer-widget__list li { padding: 2px 0; }
}

/* Mobilmenue: Kontaktbutton */
.itk-mobile-contact {
    padding: 24px 20px 40px;
    border-top: 1px solid var(--itk-line);
    margin-top: 20px;
}
.itk-mobile-contact .ht-btn { width: 100%; text-align: center; }

/* Tabellen auf schmalen Bildschirmen scrollbar machen */
@media (max-width: 767px) {
    .itk-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .itk-scroll-x table { min-width: 520px; }
}

/* Rechtstexte lesbar halten */
.itk-legal { max-width: 860px; margin: 0 auto; text-align: left; }
.itk-legal h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.itk-legal h3 { font-size: 1.1875rem; margin: 28px 0 10px; }
.itk-legal h4 { font-size: 1.0625rem; margin: 22px 0 8px; }
.itk-legal p,
.itk-legal li { line-height: 1.75; color: #3c4a60; }
.itk-legal ul { padding-left: 22px; margin-bottom: 18px; }
.itk-legal li { margin-bottom: 7px; }
.itk-legal a { color: var(--itk-blue); text-decoration: underline; word-break: break-word; }
.itk-legal address { font-style: normal; line-height: 1.8; }
.itk-legal .itk-legal-lead {
    background: #f4f7fb;
    padding: 20px 24px;
    border-radius: var(--itk-radius);
    margin-bottom: 30px;
}
@media (max-width: 575px) {
    .itk-legal h2 { font-size: 1.3125rem; }
    .itk-legal h3 { font-size: 1.0625rem; }
}

/* Partner-/Leistungskacheln gleich hoch */
.feature-list__one .ht-box-icon,
.feature-images__one .ht-box-images { height: 100%; }

/* Logo-Slider: Bilder nicht verzerren */
.brand-logo__image img,
.brand-logo__image-hover img { max-height: 60px; width: auto; object-fit: contain; }

/* Bilder in Karten sauber beschneiden */
.itk-media {
    border-radius: 14px;
    overflow: hidden;
    background: #f4f7fb;
}
.itk-media img { width: 100%; display: block; }

/* Vorlader nur kurz zeigen, damit die Seite nicht blockiert wirkt */
.open_tm_preloader { transition: opacity .3s var(--itk-ease), visibility .3s var(--itk-ease); }

/* Druckansicht */
@media print {
    .header-area, .mobile-menu-overlay, .scroll-top, .itk-notice,
    .footer-area-wrapper .ht-social-networks, .itk-cookie { display: none !important; }
    body { font-size: 11pt; color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* -------------------------------------------------------------------
   9. Kundenbewertungen
   ------------------------------------------------------------------- */
.testimonial-slider__rating {
    color: var(--itk-yellow);
    font-size: 1.0625rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.testimonial-subject { margin-bottom: 10px; color: var(--itk-ink); }
.testimonial-slider__author .name { margin-bottom: 2px; }
.itk-review-source {
    font-size: .8125rem;
    color: var(--itk-muted);
    margin-top: 18px;
}

/* -------------------------------------------------------------------
   10. Kicker-Zeile
   Optisch wie zuvor, semantisch aber ein Absatz statt einer
   Überschrift – Screenreader lesen sonst eine Gliederungsebene vor,
   die es gar nicht gibt.
   ------------------------------------------------------------------- */
p.section-sub-title {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--itk-blue);
    margin-bottom: 14px;
}

.itk-hero-kicker {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--itk-blue);
    margin-bottom: 12px;
}
.ht-list.style-auto-numbered-02 .title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--itk-ink);
    line-height: 1.45;
}

.itk-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--itk-blue);
    margin-top: 14px;
}


/* -------------------------------------------------------------------
   11. Sichtbarkeit nicht von JavaScript abhängig machen
   Die Bibliothek WOW.js blendet Elemente mit der Klasse "wow" per
   Inline-Stil aus und zeigt sie erst beim Scrollen wieder an. Fällt das
   Skript aus oder wird es blockiert, bleiben ganze Abschnitte
   unsichtbar. Inhalte müssen aber auch ohne JavaScript lesbar sein.
   ------------------------------------------------------------------- */
.wow,
.wow.move-up,
.move-up,
.move-up-x {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Slider, der nicht initialisiert wurde, trotzdem lesbar darstellen */
.swiper-container:not(.swiper-container-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    transform: none !important;
}
.swiper-container:not(.swiper-container-initialized) .swiper-slide {
    width: auto;
    flex: 1 1 300px;
    max-width: 100%;
}
.brand-logo-slider__container:not(.swiper-container-initialized) .swiper-slide {
    flex: 0 0 auto;
    width: 150px;
}

/* -------------------------------------------------------------------
   12. Hero-Grafik und Kopflogo
   Der Würfel liegt eng zugeschnitten in der Datei. Ohne Begrenzung
   füllt er den halben Bildschirm und drückt die Überschrift an den
   Rand. Er wird deshalb hier auf eine sinnvolle Größe gebracht.
   ------------------------------------------------------------------- */
.infotechno-hero-inner-images {
    text-align: center;
}
.infotechno-hero-inner-images img {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
@media (max-width: 1199px) {
    .infotechno-hero-inner-images img { max-width: 340px; }
}
@media (max-width: 575px) {
    .infotechno-hero-inner-images img { max-width: 260px; }
}

/* Kopflogo: etwas größer, damit Schriftzug und ® lesbar bleiben */
.header__logo img {
    max-height: 40px;
    max-width: 210px;
    width: auto;
    height: auto;
}
@media (max-width: 991px) {
    .header__logo img { max-height: 34px; max-width: 175px; }
}
@media (max-width: 400px) {
    .header__logo img { max-height: 28px; max-width: 150px; }
}

/* Referenzlogos etwas kräftiger – im Ruhezustand waren sie kaum zu erkennen */
.brand-logo__image img { opacity: .75; }
.brand-logo--slider .swiper-slide:hover .brand-logo__image img { opacity: 1; }

/* -------------------------------------------------------------------
   13. Hauptmenü bei mittleren Breiten
   Mit elf Einträgen wurde das Menü zwischen 1200 und 1600 Pixeln
   zweizeilig und Begriffe brachen mitten im Wort um.
   ------------------------------------------------------------------- */
.navigation-menu > ul > li > a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1699px) {
    .navigation-menu > ul > li > a { padding-left: 11px; padding-right: 11px; font-size: .9375rem; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .navigation-menu > ul > li > a { padding-left: 8px; padding-right: 8px; font-size: .875rem; }
    .header__logo img { max-height: 34px; max-width: 170px; }
}

/* Eigene Abschnittsgrafiken */
.itk-figure {
    display: block;
    max-width: 460px;
    margin: 0 auto;
}
.itk-figure svg { width: 100%; height: auto; display: block; }
@media (max-width: 991px) { .itk-figure { max-width: 320px; margin-bottom: 24px; } }


/* -------------------------------------------------------------------
   14. Aufklappbare Fragen auf der Startseite
   Nutzt <details>/<summary> - funktioniert ohne JavaScript und ist
   mit der Tastatur bedienbar.
   ------------------------------------------------------------------- */
.itk-faq__item {
    border: 1px solid var(--itk-line);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-faq__item[open] { box-shadow: 0 6px 22px rgba(21, 33, 54, .07); }

.itk-faq__frage {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 52px 18px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--itk-ink);
    list-style: none;
    position: relative;
    transition: background var(--itk-speed) var(--itk-ease);
}
.itk-faq__frage::-webkit-details-marker { display: none; }
.itk-faq__frage:hover { background: #f4f7fb; }
.itk-faq__frage:focus-visible { outline: 3px solid var(--itk-blue-light); outline-offset: -3px; }

.itk-faq__nr {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--itk-blue);
    background: #eaf2fb;
    border-radius: 6px;
    padding: 5px 9px;
}

/* Pfeil rechts */
.itk-faq__frage::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--itk-blue);
    border-bottom: 2px solid var(--itk-blue);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--itk-speed) var(--itk-ease);
}
.itk-faq__item[open] .itk-faq__frage::after { transform: translateY(-30%) rotate(-135deg); }

.itk-faq__antwort {
    padding: 0 20px 20px 20px;
    color: #3c4a60;
    line-height: 1.7;
}
.itk-faq__antwort p { margin-bottom: 14px; }

@media (max-width: 575px) {
    .itk-faq__frage { font-size: .9375rem; padding: 15px 44px 15px 15px; gap: 11px; }
    .itk-faq__antwort { padding: 0 15px 16px 15px; font-size: .9375rem; }
}

/* -------------------------------------------------------------------
   15. Kopfbereich entzerren
   Der Kopf wirkte gedrängt: wenig Höhe, enge Menüabstände, und der
   Hero-Text klebte direkt unter der Leiste.
   ------------------------------------------------------------------- */
.header-bottom-wrap .header { padding-top: 14px; padding-bottom: 14px; }
.header-top-wrap .top-message { padding: 4px 0; }

@media (min-width: 1700px) {
    .navigation-menu > ul > li > a { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 1200px) and (max-width: 1699px) {
    .navigation-menu > ul > li > a { padding-left: 13px; padding-right: 13px; }
}

/* Luft zwischen Kopfleiste und Hero */
.infotechno-hero { padding-top: 64px; padding-bottom: 48px; }
@media (max-width: 991px) { .infotechno-hero { padding-top: 40px; padding-bottom: 36px; } }
@media (max-width: 575px) { .infotechno-hero { padding-top: 30px; padding-bottom: 28px; } }

/* -------------------------------------------------------------------
   16. Mobilmenü: Aufklapp-Pfeil gut treffbar machen
   ------------------------------------------------------------------- */
.mobile-menu-overlay__body .offcanvas-navigation .menu-expand {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mobile-menu-overlay__body .offcanvas-navigation .menu-expand:focus-visible {
    outline: 3px solid var(--itk-blue-light);
    outline-offset: -3px;
}

/* Mobilmenü: Untermenü sichtbar abgesetzt, Kontaktbutton nicht umbrechen */
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a {
    padding-left: 18px;
    font-size: .9375rem;
    opacity: .92;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu {
    background: rgba(0, 0, 0, .10);
    border-radius: 8px;
    margin: 4px 0 8px;
}
.itk-mobile-contact .ht-btn {
    white-space: nowrap;
    font-size: 1rem;
    padding-left: 14px;
    padding-right: 14px;
}
.mobile-navigation-close-icon { border: 0; background: transparent; }
.mobile-navigation-close-icon:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------
   17. Zwei-Klick-Karte
   ------------------------------------------------------------------- */
.itk-karte { border-radius: 14px; overflow: hidden; border: 1px solid var(--itk-line); }
.itk-karte__platzhalter {
    background: linear-gradient(135deg, #eef4f9 0%, #dfeaf3 100%);
    padding: 40px 24px;
    text-align: center;
    color: var(--itk-blue-dark);
}
.itk-karte__adresse { font-weight: 600; font-size: 1.0625rem; margin: 14px 0 8px; color: var(--itk-ink); }
.itk-karte__hinweis {
    font-size: .8125rem; color: var(--itk-muted); max-width: 460px;
    margin: 0 auto 20px; line-height: 1.6;
}
.itk-karte__btn {
    background: var(--itk-blue); color: #fff; border: 0; border-radius: 8px;
    padding: 12px 26px; font-size: .9375rem; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background var(--itk-speed) var(--itk-ease),
                                      transform var(--itk-speed) var(--itk-ease);
}
.itk-karte__btn:hover { background: var(--itk-blue-dark); transform: translateY(-2px); }
.itk-karte__btn:focus-visible { outline: 3px solid var(--itk-blue-light); outline-offset: 2px; }
.itk-karte__alt { font-size: .8125rem; margin: 16px 0 0; color: var(--itk-muted); }
.itk-karte__alt a { color: var(--itk-blue); text-decoration: underline; }
.itk-karte__flaeche { height: 380px; }
@media (max-width: 575px) {
    .itk-karte__flaeche { height: 280px; }
    .itk-karte__platzhalter { padding: 30px 16px; }
}

/* -------------------------------------------------------------------
   18. Kopfleiste beim Scrollen mitführen
   Reines CSS über position:sticky - kein JavaScript nötig. Die obere
   Kontaktzeile scrollt weg, die Navigation bleibt erreichbar.
   ------------------------------------------------------------------- */
/* Mitlaufende Kopfleiste.
   position:sticky scheidet aus, weil der umgebende Kopfbereich keine
   eigene Hoehe hat - ein klebendes Element haengt aber immer nur
   innerhalb seines Elternbereichs. Deshalb wird die Leiste per Skript
   fixiert, sobald sie nach oben herausgescrollt ist. Ein Platzhalter
   gleicher Hoehe verhindert dabei das Springen des Inhalts. */
.header-bottom-wrap.header-sticky.itk-fix {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: #fff;
    box-shadow: 0 2px 16px rgba(21, 33, 54, .10);
    animation: itk-kopf-ein .25s var(--itk-ease) both;
}
@keyframes itk-kopf-ein {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .header-bottom-wrap.header-sticky.itk-fix { animation: none; }
}

/* Sprungziele nicht unter der Leiste verstecken */
:target { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    .header-bottom-wrap.header-sticky { transition: none; }
}

/* -------------------------------------------------------------------
   19. Kontaktzeile im Kopfbereich
   Drei Ausführungen, umschaltbar im Adminbereich: aus, schlicht
   (heller Hintergrund) oder farbig (Markenblau).
   ------------------------------------------------------------------- */
.itk-top { border-bottom: 0; }
.itk-top .top-message {
    margin: 0;
    padding: 7px 0;
    font-size: .875rem;
    line-height: 1.4;
}
.itk-top--schlicht { background: #f4f7fb; border-bottom: 1px solid var(--itk-line); }
.itk-top--schlicht .top-message { color: var(--itk-muted); }

.itk-top--farbig { background: var(--itk-blue-dark); }
.itk-top--farbig .top-message,
.itk-top--farbig .itk-top__label { color: rgba(255, 255, 255, .82); }
.itk-top--farbig .top-message a { color: #fff; font-weight: 600; }
.itk-top--farbig .top-message a:hover { color: var(--itk-blue-light); text-decoration: none; }
.itk-top--farbig .itk-sep { color: rgba(255, 255, 255, .4); }

@media (max-width: 575px) {
    .itk-top .top-message { font-size: .8125rem; padding: 6px 0; }
    .itk-top__label { display: none; }        /* Platz sparen, Nummer bleibt */
    .itk-sep { margin: 0 6px; }
}

/* -------------------------------------------------------------------
   20. Mobilansicht: Lesbarkeit und Abstände
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Fließtext war zu klein und zu hell für kleine Displays */
    body, .text, .sub-heading, p { font-size: 1rem; line-height: 1.65; }
    .text, .sub-heading { color: #48576b; }

    /* Überschriften enger setzen, damit weniger Umbrüche entstehen */
    .section-title, .heading { line-height: 1.25; letter-spacing: -.01em; }

    /* Auf dem Handy zeigt der Kopf das Logo bereits - im Hero reicht der Text */
    .infotechno-hero-inner-images { display: none; }
    .infotechno-hero-text { text-align: left; }
    .infotechno-hero .section-title,
    .infotechno-hero h1 { text-align: left; }
    .infotechno-hero .itk-hero-kicker { text-align: left; }

    /* Referenzlogos waren kaum zu erkennen */
    .brand-logo__image img { opacity: 1; max-height: 44px; }
    .brand-logo-slider-area { padding-top: 34px !important; padding-bottom: 34px !important; }

    /* Karten und Kacheln bekommen mehr Innenabstand */
    .itk-infocard { padding: 22px 20px; }
    .ht-box-images.style-01 { padding: 26px 20px; }

    /* Aufzählungen luftiger */
    .check-list .list-item { margin-bottom: 10px; line-height: 1.6; }

    /* Buttons volle Breite - besser zu treffen */
    .ht-btn, .btn--secondary { width: 100%; text-align: center; }
    .contact-us-button .btn--secondary { width: auto; min-width: 220px; }
}

@media (max-width: 480px) {
    .container, .container-fluid { padding-left: 18px; padding-right: 18px; }
    .infotechno-hero .section-title,
    .infotechno-hero h1 { font-size: 1.6875rem; }
}

/* -------------------------------------------------------------------
   21. Etwas mehr Bewegung bei Symbolen und Karten
   Alles dezent und nur bei Bedienung - nichts blendet Inhalte aus.
   ------------------------------------------------------------------- */
.ht-box-icon .icon,
.ht-box-images .image,
.contact-info-one .icon {
    transition: transform .35s var(--itk-ease), color .35s var(--itk-ease);
}
.ht-box-icon:hover .icon,
.ht-box-images:hover .image,
.itk-infocard:hover .icon {
    transform: translateY(-6px) scale(1.06);
}
.ht-box-icon .svg-icon svg,
.ht-box-icon .icon svg {
    transition: transform .45s var(--itk-ease);
}
.ht-box-icon:hover .svg-icon svg { transform: rotate(-4deg) scale(1.08); }

.ht-box-icon.style-01 {
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
    border-radius: 14px;
}
.ht-box-icon.style-01:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(21, 33, 54, .09);
}

.btn-text .button-text i { transition: transform var(--itk-speed) var(--itk-ease); }
.btn-text:hover .button-text i { transform: translateX(5px); }

.testimonial-slider__single { transition: transform var(--itk-speed) var(--itk-ease); }
.testimonial-slider__single:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
    .ht-box-icon .icon, .ht-box-images .image, .contact-info-one .icon,
    .ht-box-icon .svg-icon svg, .ht-box-icon.style-01,
    .btn-text .button-text i, .testimonial-slider__single { transition: none; }
    .ht-box-icon:hover .icon, .ht-box-images:hover .image,
    .ht-box-icon:hover .svg-icon svg, .ht-box-icon.style-01:hover,
    .btn-text:hover .button-text i, .testimonial-slider__single:hover { transform: none; }
}

/* Menü bei 11 Punkten enger setzen */
@media (min-width: 1200px) and (max-width: 1799px) {
    .navigation-menu > ul > li > a { padding-left: 9px; padding-right: 9px; font-size: .875rem; }
}

/* Teamkarten */
.itk-teamkarte {
    background: #fff;
    border: 1px solid var(--itk-line);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-teamkarte:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(21,33,54,.09); }
.itk-teamkarte .team-image { background: #eef4f9; }
.itk-teamkarte .team-image img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.itk-teamkarte .team-info { padding: 20px 16px 24px; }
.itk-teamkarte .name { margin-bottom: 4px; }
.itk-teamkarte .position { color: var(--itk-muted); font-size: .875rem; line-height: 1.5; }
.itk-teamkontakt { margin-top: 10px; font-size: .8125rem; }
.itk-teamkontakt a { color: var(--itk-blue); word-break: break-word; }

/* Kopfzeile auf Mobilgeräten einzeilig halten */
@media (max-width: 575px) {
    .itk-top .top-message {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: .75rem;
    }
    .itk-top .top-message a { font-size: .75rem; }
}

/* Referenzlogos waren im Ruhezustand kaum zu erkennen */
.brand-logo__image img,
.brand-logo--slider .brand-logo__image img { opacity: .85 !important; }
.brand-logo--slider .swiper-slide:hover .brand-logo__image img { opacity: 1 !important; }
@media (max-width: 767px) {
    .brand-logo__image img,
    .brand-logo--slider .brand-logo__image img { opacity: 1 !important; max-height: 46px; }
}

/* -------------------------------------------------------------------
   22. Kontaktseite: drei gleichwertige Kontaktwege statt Seitenspalte
   ------------------------------------------------------------------- */
.itk-kontaktweg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    height: 100%;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--itk-line);
    border-radius: 14px;
    text-decoration: none;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease),
                border-color var(--itk-speed) var(--itk-ease);
}
.itk-kontaktweg:hover {
    transform: translateY(-4px);
    border-color: var(--itk-blue-light);
    box-shadow: 0 12px 30px rgba(21, 33, 54, .10);
    text-decoration: none;
}
.itk-kontaktweg__icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eaf3fa; color: var(--itk-blue); font-size: 1.0625rem;
    margin-bottom: 12px;
    transition: background var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-kontaktweg:hover .itk-kontaktweg__icon {
    background: var(--itk-blue); color: #fff; transform: scale(1.06);
}
.itk-kontaktweg__titel {
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--itk-muted);
}
.itk-kontaktweg__wert {
    font-size: 1.0625rem; font-weight: 600; color: var(--itk-ink);
    line-height: 1.4; word-break: break-word;
}
.itk-kontaktweg__zusatz { font-size: .8125rem; color: var(--itk-muted); line-height: 1.5; }

.itk-formularkarte {
    background: #fff;
    border: 1px solid var(--itk-line);
    border-radius: 16px;
    padding: 34px 34px 38px;
}

@media (max-width: 767px) {
    .itk-formularkarte { padding: 22px 18px 26px; border-radius: 12px; }
    .itk-kontaktweg { padding: 20px 18px; }
    /* Formularfelder auf dem Handy klar untereinander */
    .contact-form-wrap .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .contact-form-wrap input,
    .contact-form-wrap textarea { font-size: 16px; }  /* verhindert Zoom in iOS */
    .itk-field { margin-bottom: 15px; }
    .itk-consent { font-size: .8125rem; }
}

/* -------------------------------------------------------------------
   23. Produktkarten
   ------------------------------------------------------------------- */
.itk-produkt {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--itk-line); border-radius: 14px;
    overflow: hidden;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-produkt:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(21,33,54,.10); }
.itk-produkt__bild { background: #eef4f9; overflow: hidden; }
.itk-produkt__bild img {
    width: 100%; height: auto; display: block;
    transition: transform .5s var(--itk-ease);
}
.itk-produkt:hover .itk-produkt__bild img { transform: scale(1.04); }
.itk-produkt__inhalt { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.itk-produkt__name { margin-bottom: 4px; }
.itk-produkt__untertitel { font-size: .875rem; color: var(--itk-muted); margin-bottom: 14px; }
.itk-produkt__punkte { list-style: none; padding: 0; margin: 0 0 14px; }
.itk-produkt__punkte li {
    position: relative; padding-left: 18px; margin-bottom: 7px;
    font-size: .9375rem; line-height: 1.55; color: #3c4a60;
}
.itk-produkt__punkte li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--itk-blue-light);
}
.itk-produkt__hinweis { font-size: .8125rem; color: var(--itk-muted); line-height: 1.55; }
.itk-produkt__preis {
    margin: auto 0 16px; font-size: 1.375rem; font-weight: 700; color: var(--itk-blue);
}
.itk-produkt__preis span { font-size: .75rem; font-weight: 500; color: var(--itk-muted); }
.itk-produkt .ht-btn { align-self: flex-start; }
@media (max-width: 767px) {
    .itk-produkt__inhalt { padding: 18px 18px 22px; }
    .itk-produkt .ht-btn { align-self: stretch; }
}

/* -------------------------------------------------------------------
   24. Kennzahlen auf der Startseite
   ------------------------------------------------------------------- */
.itk-kennzahlen { background: var(--itk-blue-dark); }
.itk-kennzahl { text-align: center; padding: 14px 10px; color: #fff; }
.itk-kennzahl__zahl {
    display: block; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800;
    line-height: 1.1; letter-spacing: -.02em; color: #fff;
}
.itk-kennzahl__text {
    display: block; margin-top: 8px; font-size: .875rem; line-height: 1.5;
    color: rgba(255,255,255,.78);
}
.itk-kennzahl__zahl { transition: transform var(--itk-speed) var(--itk-ease); }
.itk-kennzahl:hover .itk-kennzahl__zahl { transform: scale(1.06); }

/* -------------------------------------------------------------------
   25. Umweltgedanke bei Used IT – dezent grüner Akzent
   ------------------------------------------------------------------- */
.itk-gruen {
    background: linear-gradient(135deg, #eef7f1 0%, #e3f2ea 100%);
    border: 1px solid #cfe6da;
    border-radius: 14px;
    padding: 26px 26px 12px;
    margin-top: 34px;
    text-align: left;
}
.itk-gruen__zeile { display: flex; flex-wrap: wrap; gap: 22px; }
.itk-gruen__punkt {
    flex: 1 1 260px; display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 16px;
}
.itk-gruen__icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d2ead9; color: #1d7a4b;
    transition: transform var(--itk-speed) var(--itk-ease), background var(--itk-speed) var(--itk-ease);
}
.itk-gruen__punkt:hover .itk-gruen__icon { transform: translateY(-3px); background: #bfe0cb; }
.itk-gruen__punkt strong { display: block; color: #14532d; font-size: .9375rem; margin-bottom: 4px; }
.itk-gruen__punkt span { display: block; font-size: .875rem; line-height: 1.6; color: #3d5a4a; }
@media (max-width: 767px) {
    .itk-gruen { padding: 20px 18px 6px; margin-top: 26px; }
    .itk-gruen__zeile { gap: 0; }
}

/* Sanftes Aufblenden beim Laden – rein dekorativ, blendet nichts aus */
@media (prefers-reduced-motion: no-preference) {
    .itk-produkt, .itk-kontaktweg, .itk-teamkarte {
        animation: itk-auf .45s var(--itk-ease) both;
    }
}
@keyframes itk-auf { from { opacity: .001; transform: translateY(10px); } }

/* -------------------------------------------------------------------
   26. Referenzlogos größer und lesbar
   Sie waren im Ruhezustand kaum zu entziffern.
   ------------------------------------------------------------------- */
.brand-logo__image img,
.brand-logo--slider .brand-logo__image img {
    max-height: 96px !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    opacity: 1 !important;
    filter: grayscale(100%);
    transition: filter var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.brand-logo--slider .swiper-slide:hover .brand-logo__image img {
    filter: grayscale(0);
    transform: scale(1.05);
}
.brand-logo-slider-area { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 991px) {
    .brand-logo__image img,
    .brand-logo--slider .brand-logo__image img { max-height: 60px !important; filter: none; }
    .brand-logo-slider-area { padding-top: 38px; padding-bottom: 38px; }
}

/* Kennzahlen: feste Breite, damit beim Hochzählen nichts springt */
.itk-kennzahl__zahl { font-variant-numeric: tabular-nums; }

/* Sanftes Aufblenden für Abschnitte beim ersten Sichtkontakt entfällt bewusst –
   stattdessen nur Bewegung bei Bedienung, damit nie Inhalt verborgen bleibt. */

/* -------------------------------------------------------------------
   27. Leistungskacheln: ganze Karte klickbar
   Der freistehende runde Pfeil war absolut positioniert und rutschte
   dadurch unter den Abschnitt. Statt ihn zu reparieren, wird die
   ganze Kachel zur Schaltfläche - das ist heute ohnehin üblich.
   ------------------------------------------------------------------- */
.ht-box-images.style-01 .circle-arrow { display: none; }

.ht-box-images.style-01 { position: relative; }
.ht-box-images.style-01 .content > a[href]:not([href="#"]) {
    position: absolute;
    inset: 0;
    z-index: 2;
    font-size: 0;
    border-radius: inherit;
}
.ht-box-images.style-01 .content > a[href]:focus-visible {
    outline: 3px solid var(--itk-blue-light);
    outline-offset: 3px;
}

/* Dezenter Hinweis, dass die Kachel führt */
.ht-box-images.style-01 .content::after {
    content: "Mehr erfahren →";
    display: block;
    margin-top: 14px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--itk-blue);
    transition: transform var(--itk-speed) var(--itk-ease);
}
.ht-box-images.style-01:hover .content::after { transform: translateX(4px); }

/* Sicherheitsfrage im Kontaktformular */
.itk-captcha { background: #f4f7fb; border-radius: var(--itk-radius); padding: 16px 18px; }
.itk-captcha .itk-label { margin-bottom: 8px; }
.itk-captcha input[type="text"] { max-width: 220px; }
.itk-captcha__hinweis { font-size: .75rem; color: var(--itk-muted); margin: 8px 0 0; line-height: 1.5; }

/* Sprungmarken auf langen Seiten */
.itk-sprungmarken {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 30px;
}
.itk-sprungmarken a {
    padding: 8px 16px; border: 1px solid var(--itk-line); border-radius: 999px;
    font-size: .875rem; font-weight: 600; color: var(--itk-blue-dark);
    background: #fff; text-decoration: none;
    transition: background var(--itk-speed) var(--itk-ease),
                border-color var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-sprungmarken a:hover {
    background: var(--itk-blue); border-color: var(--itk-blue);
    color: #fff; transform: translateY(-2px);
}
section[id] { scroll-margin-top: 110px; }
@media (max-width: 575px) { .itk-sprungmarken a { font-size: .8125rem; padding: 7px 13px; } }

/* Freistehende Kreis-Pfeile aus dem Theme abschalten */
.circle-arrow, .middle-dot { display: none !important; }

/* -------------------------------------------------------------------
   28. Mobilmenü: Schaltfläche deutlich sichtbar
   ------------------------------------------------------------------- */
.itk-burger {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--itk-blue); color: #fff;
    border: 0; border-radius: 11px; padding: 0;
    box-shadow: 0 2px 10px rgba(0, 54, 84, .22);
    transition: background var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-burger:hover, .itk-burger:active { background: var(--itk-blue-dark); transform: translateY(-1px); }
.itk-burger i { font-size: 1.125rem !important; }
.itk-burger:focus-visible { outline: 3px solid var(--itk-blue-light); outline-offset: 3px; }

/* Untermenüs im Mobilmenü dauerhaft offen – niemand muss etwas suchen */
.mobile-menu-overlay__body .offcanvas-navigation li.itk-offen > ul.sub-menu { display: block !important; }
.mobile-menu-overlay__body .offcanvas-navigation li.itk-offen > .menu-expand { display: none !important; }
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a {
    padding-left: 22px;
    position: relative;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a::before {
    content: ""; position: absolute; left: 6px; top: 50%;
    width: 6px; height: 1px; background: currentColor; opacity: .45;
}

/* Schutz gegen Überlauf: die Navigation darf nie über den Rand hinauslaufen */
.header .header-midle-box { min-width: 0; }
.navigation-menu > ul { flex-wrap: nowrap; }
.navigation-menu > ul > li > a { white-space: nowrap; }

@media (min-width: 1200px) and (max-width: 1399px) {
    .navigation-menu > ul > li > a { padding-left: 8px; padding-right: 8px; font-size: .8438rem; }
    .header__logo img { max-height: 30px; max-width: 155px; }
}

/* -------------------------------------------------------------------
   29. Fernwartung
   Warmes Rot als Signalfarbe – deutlich abgesetzt vom Markenblau,
   damit der Knopf im Notfall sofort gefunden wird.
   ------------------------------------------------------------------- */
:root { --itk-signal: #C0392B; --itk-signal-dunkel: #96291D; }

.itk-fernwartung-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--itk-signal);
    color: #fff !important;
    border-radius: 9px;
    padding: 9px 18px;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(192, 57, 43, .28);
    transition: background var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-fernwartung-btn:hover {
    background: var(--itk-signal-dunkel);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(192, 57, 43, .34);
    text-decoration: none;
}
.itk-fernwartung-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.itk-fernwartung-btn__icon { display: inline-flex; }

/* Kleine Ausführung in der Kontaktzeile */
.itk-fernwartung-btn--klein {
    padding: 4px 12px;
    font-size: .8125rem;
    border-radius: 7px;
    margin-left: 12px;
    box-shadow: none;
}
.itk-fernwartung-btn__punkt {
    width: 7px; height: 7px; border-radius: 50%; background: #fff;
    animation: itk-puls 2.4s ease-in-out infinite;
}
@keyframes itk-puls { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .itk-fernwartung-btn__punkt { animation: none; } }

.itk-fernwartung-btn--gross { padding: 15px 32px; font-size: 1.0625rem; border-radius: 11px; }
.itk-fernwartung-hinweis { font-size: .8125rem; color: var(--itk-muted); margin-top: 12px; }

/* Kontaktkachel in Signalfarbe */
.itk-kontaktweg--fern .itk-kontaktweg__icon { background: #fbeae8; color: var(--itk-signal); }
.itk-kontaktweg--fern:hover { border-color: var(--itk-signal); }
.itk-kontaktweg--fern:hover .itk-kontaktweg__icon { background: var(--itk-signal); color: #fff; }

/* Warnkasten */
.itk-warnung {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fdf3e7; border: 1px solid #f2d3a8;
    border-left: 4px solid #e08a2e;
    border-radius: 12px; padding: 20px 22px;
    color: #6b4418; line-height: 1.65;
}
.itk-warnung__icon { flex: 0 0 auto; color: #d4790f; }
.itk-warnung strong { color: #5a3612; }

/* Ablaufschritte */
.itk-schritt {
    background: #fff; border: 1px solid var(--itk-line); border-radius: 14px;
    padding: 24px 22px; height: 100%;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-schritt:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(21,33,54,.09); }
.itk-schritt__nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: #eaf3fa; color: var(--itk-blue);
    font-weight: 700; font-size: 1.0625rem; margin-bottom: 14px;
}
.itk-schritt__titel { margin-bottom: 8px; }
.itk-schritt p { font-size: .9375rem; line-height: 1.6; color: #3c4a60; }

@media (max-width: 575px) {
    .itk-fernwartung-btn--gross { width: 100%; justify-content: center; }
}

/* Kopfzeile mit Fernwartungsknopf sauber ausrichten */
.itk-top .top-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.itk-fernwartung-btn--klein { margin-left: 4px; }
@media (max-width: 767px) {
    .itk-fernwartung-btn--klein { display: none !important; }
}


/* -------------------------------------------------------------------
   30. Aufklappmenüs schneller zeigen
   Die Vorgabe des Themes war so träge, dass ein zügiger Klick daneben
   ging. Jetzt praktisch sofort sichtbar, mit einer kurzen Bewegung.
   ------------------------------------------------------------------- */
.navigation-menu .submenu,
.navigation-menu ul ul.submenu {
    transition: opacity .12s var(--itk-ease), transform .12s var(--itk-ease),
                visibility 0s linear .12s !important;
    transition-delay: 0s !important;
}
.navigation-menu > ul > li:hover > .submenu,
.navigation-menu > ul > li.has-children:hover > .submenu {
    transition: opacity .12s var(--itk-ease), transform .12s var(--itk-ease),
                visibility 0s !important;
    transition-delay: 0s !important;
}
/* Unsichtbare Brücke, damit der Zeiger auf dem Weg nach unten nicht abreißt */
.navigation-menu > ul > li.has-children > .submenu::before {
    content: "";
    position: absolute;
    top: -14px; left: 0; right: 0; height: 14px;
}
.itk-treelabel__text {
    display: block;
    font-size: .75rem;
    color: var(--itk-muted);
    line-height: 1.5;
    margin-top: 8px;
    max-width: 240px;
}

/* -------------------------------------------------------------------
   31. Soziale Netzwerke im Fußbereich deutlicher zeigen
   ------------------------------------------------------------------- */
.itk-social-block { margin: 26px 0 22px; }
.itk-social-block__titel {
    display: block; font-size: .875rem; font-weight: 700;
    color: var(--itk-ink); margin-bottom: 12px;
}
.itk-social-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.itk-social-liste a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: #fff; border: 1px solid var(--itk-line);
    font-size: .8125rem; font-weight: 600; color: var(--itk-blue-dark);
    text-decoration: none;
    transition: background var(--itk-speed) var(--itk-ease),
                border-color var(--itk-speed) var(--itk-ease),
                color var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-social-liste a:hover {
    background: var(--itk-blue); border-color: var(--itk-blue);
    color: #fff; transform: translateY(-2px); text-decoration: none;
}
.itk-social-block__hinweis {
    font-size: .75rem; color: var(--itk-muted); margin: 12px 0 0; line-height: 1.5;
}

/* Kennzeichnung KI-erzeugter Bilder */
.itk-ki-hinweis {
    display: inline-block;
    margin-top: 6px;
    font-size: .6875rem;
    color: var(--itk-muted);
    background: #f1f4f8;
    border-radius: 4px;
    padding: 2px 7px;
    letter-spacing: .02em;
}

/* -------------------------------------------------------------------
   31. Soziale Netzwerke sichtbarer
   ------------------------------------------------------------------- */
.itk-top__social {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}
.itk-top--schlicht .itk-top__social { border-left-color: var(--itk-line); }
.itk-top__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .8125rem;
    transition: background var(--itk-speed) var(--itk-ease),
                color var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-top--schlicht .itk-top__social a { color: var(--itk-muted) !important; }
.itk-top__social a:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    transform: translateY(-1px);
}
@media (max-width: 991px) { .itk-top__social { display: none; } }

.itk-social-label {
    display: block; font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--itk-muted); margin-bottom: 10px;
}
.itk-social-gross .social-link {
    width: 44px !important; height: 44px !important;
    font-size: 1.0625rem !important;
    background: #fff; border: 1px solid var(--itk-line);
    transition: background var(--itk-speed) var(--itk-ease),
                border-color var(--itk-speed) var(--itk-ease),
                transform var(--itk-speed) var(--itk-ease);
}
.itk-social-gross .social-link:hover {
    background: var(--itk-blue); border-color: var(--itk-blue);
    color: #fff; transform: translateY(-3px);
}
.itk-social-gross .item { margin-left: 8px; }
@media (max-width: 767px) {
    .itk-social-label { margin-top: 20px; }
    .itk-social-gross { justify-content: center; }
    .itk-social-gross .item { margin: 0 4px; }
}

/* -------------------------------------------------------------------
   32. Geöffnet-Status und Notfallhinweis
   ------------------------------------------------------------------- */
.itk-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.itk-status__punkt {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
.itk-top--farbig .itk-status--offen { color: #5FD99B; }
.itk-top--farbig .itk-status--zu    { color: rgba(255, 255, 255, .62); }
.itk-top--schlicht .itk-status--offen { color: #147a4a; }
.itk-top--schlicht .itk-status--zu    { color: var(--itk-muted); }
.itk-status--offen .itk-status__punkt { animation: itk-puls 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .itk-status--offen .itk-status__punkt { animation: none; } }

.itk-notfall-fuss { margin: 14px 0 0; }
.itk-notfall-fuss a {
    display: block;
    background: #fdf1ef;
    border-left: 3px solid var(--itk-signal);
    border-radius: 0 var(--itk-radius) var(--itk-radius) 0;
    padding: 12px 15px;
    font-size: .8125rem;
    line-height: 1.55;
    color: #7a3229;
    text-decoration: none;
    transition: background var(--itk-speed) var(--itk-ease);
}
.itk-notfall-fuss a:hover { background: #fbe4e0; color: #7a3229; text-decoration: none; }
.itk-notfall-fuss strong { color: var(--itk-signal); }

@media (max-width: 575px) {
    .itk-status { font-size: .75rem; }
}

.itk-kontaktweg--notfall .itk-kontaktweg__icon { background: #fbeae8; color: var(--itk-signal); }
.itk-kontaktweg--notfall:hover { border-color: var(--itk-signal); }
.itk-kontaktweg--notfall:hover .itk-kontaktweg__icon { background: var(--itk-signal); color: #fff; }
.itk-kontaktweg .itk-status--offen { color: #147a4a; }
.itk-kontaktweg .itk-status--zu    { color: var(--itk-muted); }

/* Hinweis bei der Vorschau abgeschalteter Seiten */
.itk-vorschau {
    background: #fdf3e7;
    border-bottom: 2px solid #e08a2e;
    color: #6b4418;
    padding: 11px 20px;
    text-align: center;
    font-size: .875rem;
    line-height: 1.5;
}
.itk-vorschau strong { color: #a8600f; }
.itk-vorschau a { color: var(--itk-blue); text-decoration: underline; margin-left: 8px; }

/* -------------------------------------------------------------------
   33. Letzte Feinheiten
   ------------------------------------------------------------------- */

/* Beim Überfahren erschien unter dem Menüpunkt ein zweiter Strich –
   das sah aus wie ein leeres Aufklappmenü. Nur der aktive Punkt
   bekommt eine Linie, und zwar genau eine. */
.navigation-menu > ul > li > a::before,
.navigation-menu > ul > li > a::after { content: none !important; }
.navigation-menu > ul > li > a.is-current > span { position: relative; }
.navigation-menu > ul > li > a.is-current > span::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--itk-blue);
}
.navigation-menu > ul > li > a:hover > span { color: var(--itk-blue); }

/* Zeilenumbrüche gleichmäßig verteilen – verhindert einzelne Wörter
   am Zeilenende. Browser ohne Unterstützung ignorieren es einfach. */
.itk-notfall-fuss a,
.itk-kontaktweg__zusatz,
.itk-produkt__untertitel,
.sub-heading,
.itk-warnung div { text-wrap: pretty; }
.itk-notfall-fuss a { max-width: 30ch; }

/* ===================================================================
   34. Hauptmenü – Feinschliff
   Ein durchgehendes Bild auf allen Geräten: gleiche Farben, gleiche
   Bewegung, gleiche Abstände. Alle Übergänge sind kurz und laufen
   über transform und opacity, damit sie auch auf schwächeren Geräten
   flüssig bleiben.
   =================================================================== */

/* ---- Kopfmenü ---- */
.navigation-menu > ul > li > a {
    position: relative;
    padding-top: 26px;
    padding-bottom: 26px;
    color: var(--itk-ink);
    font-weight: 500;
    transition: color .18s var(--itk-ease);
}

/* Unterstrich wächst von der Mitte – nur eine Linie, nie zwei */
.navigation-menu > ul > li > a > span::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--itk-blue);
    transition: left .18s var(--itk-ease), right .18s var(--itk-ease);
}
.navigation-menu > ul > li > a:hover > span::after,
.navigation-menu > ul > li:hover > a > span::after,
.navigation-menu > ul > li > a.is-current > span::after { left: 0; right: 0; }

/* Pfeil bei Aufklappmenüs */
.navigation-menu > ul > li.has-children > a::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s var(--itk-ease);
    opacity: .55;
}
.navigation-menu > ul > li.has-children:hover > a::after {
    transform: translateY(1px) rotate(225deg);
    opacity: 1;
}

/* ---- Aufklappmenü ---- */
.navigation-menu .submenu {
    min-width: 232px;
    padding: 10px;
    border: 1px solid var(--itk-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(21, 33, 54, .12);
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s var(--itk-ease),
                transform .14s var(--itk-ease),
                visibility 0s linear .14s;
}
.navigation-menu > ul > li:hover > .submenu,
.navigation-menu > ul > li:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .14s var(--itk-ease),
                transform .14s var(--itk-ease),
                visibility 0s;
}
.navigation-menu .submenu li a {
    display: block;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: .875rem;
    letter-spacing: .01em;
    color: var(--itk-ink);
    transition: background .15s var(--itk-ease),
                color .15s var(--itk-ease),
                transform .15s var(--itk-ease);
}
.navigation-menu .submenu li a:hover,
.navigation-menu .submenu li a.is-current {
    background: #eef4fa;
    color: var(--itk-blue);
    transform: translateX(3px);
}
.navigation-menu .submenu li a span { color: inherit !important; }

/* ---- Mobilmenü ---- */
.mobile-menu-overlay__inner { box-shadow: -12px 0 44px rgba(0, 40, 64, .28); }

.mobile-menu-overlay__body .offcanvas-navigation > ul > li > a {
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    transition: color .15s var(--itk-ease), padding-left .15s var(--itk-ease);
}
.mobile-menu-overlay__body .offcanvas-navigation > ul > li > a:hover,
.mobile-menu-overlay__body .offcanvas-navigation a.is-current {
    color: #fff;
    padding-left: 6px;
}
.mobile-menu-overlay__body .offcanvas-navigation a.is-current::after {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--itk-yellow);
    margin-left: 9px;
    vertical-align: middle;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu {
    background: rgba(0, 0, 0, .14);
    border-radius: 10px;
    margin: 6px 0 10px;
    padding: 4px 0;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a {
    padding: 10px 14px 10px 24px;
    font-size: .9375rem;
    font-weight: 500;
    border-bottom: 0;
    opacity: .92;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a::before {
    top: 50%; left: 10px; width: 7px; opacity: .5;
}
.mobile-menu-overlay__body .offcanvas-navigation .sub-menu li a:hover { opacity: 1; padding-left: 28px; }

@media (prefers-reduced-motion: reduce) {
    .navigation-menu > ul > li > a,
    .navigation-menu > ul > li > a > span::after,
    .navigation-menu > ul > li.has-children > a::after,
    .navigation-menu .submenu,
    .navigation-menu .submenu li a,
    .mobile-menu-overlay__body .offcanvas-navigation a { transition: none !important; }
}

/* -------------------------------------------------------------------
   35. Korrekturen: Menüstrich und Notfallkasten
   ------------------------------------------------------------------- */

/* Der Strich saß weit unterhalb des Textes, weil die Menüpunkte viel
   Innenabstand haben. Er gehört direkt unter die Schrift. */
.navigation-menu > ul > li > a { padding-top: 22px; padding-bottom: 22px; }
.navigation-menu > ul > li > a > span::after { bottom: -4px; height: 2px; }

/* Der Notfallkasten war schmaler als die übrige Fußspalte und wirkte
   dadurch eingeklemmt. Er nutzt jetzt die volle Breite. */
.itk-notfall-fuss { margin: 18px 0 0; }
.itk-notfall-fuss a {
    max-width: none;
    display: block;
    position: relative;
    padding: 14px 16px 14px 44px;
    border-radius: var(--itk-radius);
    border-left-width: 4px;
    font-size: .8438rem;
}
.itk-notfall-fuss a::before {
    content: "";
    position: absolute;
    left: 16px; top: 15px;
    width: 18px; height: 18px;
    background: var(--itk-signal);
    -webkit-mask: var(--itk-blitz) center/contain no-repeat;
    mask: var(--itk-blitz) center/contain no-repeat;
}
:root {
    --itk-blitz: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 4.5 13.5H11l-.5 8.5L19 10.5h-6.5L13 2Z'/></svg>");
}
.itk-notfall-fuss strong { display: block; margin-bottom: 2px; }

@media (max-width: 767px) {
    .itk-notfall-fuss a { font-size: .875rem; }
}

/* Alte Hover-Linie des Themes am unteren Kopfrand abschalten –
   sie erschien zusätzlich zu unserem Unterstrich. */
.navigation-menu > ul > li::before,
.navigation-menu > ul > li::after,
.navigation-menu > ul > li > a > span::before { content: none !important; }
.navigation-menu > ul > li > a::before,
.navigation-menu > ul > li > a::after { background: none !important; }
.navigation-menu > ul > li.has-children > a::after {
    content: "" !important;
    background: none !important;
}

/* Bezugspunkt für den Unterstrich – ohne ihn richtet sich die Linie am
   Link samt Innenabstand aus und landet weit unter dem Text. */
.navigation-menu > ul > li > a > span { position: relative; display: inline-block; }

/* Hervorgehobene Zahl über dem Einleitungstext */
.itk-zahlband {
    display: inline-block;
    background: #eaf3fa;
    color: var(--itk-blue-dark);
    border-radius: 999px;
    padding: 8px 20px;
    font-size: .9375rem;
    margin: 18px 0 0;
}
.itk-zahlband strong { color: var(--itk-blue); }

/* Notfall als Knopf statt Textkasten */
.itk-notfall-fuss a {
    padding: 13px 16px 13px 42px;
    font-weight: 600;
    color: var(--itk-signal);
    border-left-width: 4px;
}
.itk-notfall-fuss a::before { top: 50%; margin-top: -9px; }
.itk-notfall-fuss a:hover { color: #7a3229; }

/* CO₂-Hinweis als grüner Rahmen, passend zum Used-IT-Kasten */
.itk-gruenband {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: linear-gradient(135deg, #eef7f1 0%, #e3f2ea 100%);
    border: 1px solid #cfe6da;
    border-left: 4px solid #1d7a4b;
    border-radius: var(--itk-radius);
    padding: 12px 16px;
    margin-top: 8px;
    text-decoration: none;
    transition: transform var(--itk-speed) var(--itk-ease),
                box-shadow var(--itk-speed) var(--itk-ease);
}
.itk-gruenband:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(29, 122, 75, .14);
    text-decoration: none;
}
.itk-gruenband__icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d2ead9; color: #1d7a4b; border-radius: 9px;
}
.itk-gruenband strong { display: block; color: #14532d; font-size: .875rem; }
.itk-gruenband span span,
.itk-gruenband > span:last-child { font-size: .75rem; color: #3d5a4a; line-height: 1.5; }

/* Fußbereich: zweite Zeile abgesetzt */
.itk-fuss-linie { border: 0; border-top: 1px solid var(--itk-line); margin: 10px 0 34px; }
.itk-fuss-text { font-size: .8125rem; color: var(--itk-muted); line-height: 1.6; margin: 12px 0 0; }
.itk-notfall-fuss { margin: 0; }
.itk-social-block { margin: 0; }
.itk-gruenband { margin-top: 0; }
@media (max-width: 767px) { .itk-fuss-linie { margin: 4px 0 24px; } }

/* ===================================================================
   36. Mobilmenü – endgültig ohne Theme-Skript
   Das Theme klappte Untermenüs per JavaScript ein und aus und setzte
   dabei display:none direkt am Element. Es bekommt die Liste jetzt
   nicht mehr zu sehen (Klasse "sub-menu" entfernt). Untermenüs sind
   dauerhaft offen, kein Pfeil, kein Zustand, nichts zum Verklemmen.
   =================================================================== */
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub {
    display: block !important;
    height: auto !important;
    background: rgba(0, 0, 0, .16);
    border-radius: 10px;
    margin: 6px 0 12px;
    padding: 4px 0;
}
.mobile-menu-overlay__body .offcanvas-navigation .menu-expand { display: none !important; }
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub li a {
    display: block;
    position: relative;
    padding: 11px 14px 11px 26px;
    font-size: .9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92) !important;
    border-bottom: 0;
}
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub li a::before {
    content: ""; position: absolute; left: 11px; top: 50%;
    width: 7px; height: 1px; background: currentColor; opacity: .5;
}

/* Aktive Seite: Weiß mit gelbem Punkt – nie Blau auf Blau */
.mobile-menu-overlay__body .offcanvas-navigation a,
.mobile-menu-overlay__body .offcanvas-navigation a span { color: rgba(255, 255, 255, .88) !important; }
.mobile-menu-overlay__body .offcanvas-navigation a.is-current,
.mobile-menu-overlay__body .offcanvas-navigation a.is-current span,
.mobile-menu-overlay__body .offcanvas-navigation a[aria-current="page"],
.mobile-menu-overlay__body .offcanvas-navigation a[aria-current="page"] span {
    color: #fff !important;
    font-weight: 700;
}
.mobile-menu-overlay__body .offcanvas-navigation a.is-current::after,
.mobile-menu-overlay__body .offcanvas-navigation a[aria-current="page"]::after {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--itk-yellow);
    margin-left: 9px; vertical-align: middle;
}

/* Fernwartung im Mobilmenü: immer Rot, egal was das Theme meint */
.mobile-menu-overlay__body .itk-fernwartung-btn,
.mobile-menu-overlay__body a.itk-fernwartung-btn {
    background: var(--itk-signal) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.mobile-menu-overlay__body .itk-fernwartung-btn:hover { background: var(--itk-signal-dunkel) !important; }
.itk-fernwartung-andere { font-size: .8125rem; color: var(--itk-muted); margin-top: 14px; }
.itk-fernwartung-andere a { color: var(--itk-blue); text-decoration: underline; margin-left: 8px; }

/* Mobil-Untermenü: sichtbar, im Fluss, nie absolut positioniert */
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    list-style: none;
}
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub li,
.mobile-menu-overlay__body .offcanvas-navigation ul.itk-mobil-sub li a {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Nummerierte Schrittliste (KI: Alles aus einer Hand) */
.itk-schritte {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px;
}
.itk-schritte li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; background: #f6f9fc; border-radius: 10px;
}
.itk-schritte__nr {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    background: var(--itk-blue); color: #fff; font-weight: 700; font-size: .8125rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.itk-schritte strong { display: block; color: var(--itk-ink); margin-bottom: 2px; }
.itk-schritte div > span { font-size: .875rem; color: #48576b; line-height: 1.55; }
@media (max-width: 767px) { .itk-schritte { grid-template-columns: 1fr; gap: 8px; } }
.itk-english { display: block; margin-top: 8px; font-size: .875rem; color: var(--itk-blue-dark); }

/* Korrektur: Textblock in der Schrittliste füllt immer die volle Breite */
.itk-schritte li { align-items: flex-start; text-align: left; }
.itk-schritte li > div { flex: 1 1 auto; min-width: 0; width: 100%; text-align: left; }
.itk-schritte li > div > strong,
.itk-schritte li > div > span { display: block; text-align: left; }
.itk-schritte__nr { margin-top: 1px; }
.itk-schritte li > div > span {
    float: none !important; text-align: left !important;
    margin: 0 !important; padding: 0 !important; width: auto !important;
    position: static !important;
}
.itk-schritte li > div { display: block; }

/* Kopfzeile mobil: Kurzformen, damit alles in eine Zeile passt */
.itk-top__tel { display: none; vertical-align: -2px; margin-right: 4px; }
.itk-top__anrufen { display: none; }
.itk-status__kurz { display: none; }
@media (max-width: 575px) {
    .itk-top__tel, .itk-top__anrufen { display: inline; }
    .itk-top__nummer { display: none; }
    .itk-status__lang { display: none; }
    .itk-status__kurz { display: inline; }
    .itk-top .top-message { flex-wrap: nowrap; white-space: nowrap; }
}

/* Mobil bei geschlossen: nur der Status, Anrufen-Link ausgeblendet. Eine Zeile erzwungen. */
@media (max-width: 575px) {
    .itk-top .top-message {
        display: flex; flex-wrap: nowrap; white-space: nowrap;
        overflow: hidden; justify-content: center;
        height: 30px; line-height: 30px; padding: 0;
    }
    .itk-top__link--zu, .itk-sep--zu { display: none !important; }
    .itk-top__label { display: none !important; }
    .itk-status__kurz { font-size: .8125rem; }
}

/* Kopfzeile: auf JEDER Breite genau eine Zeile. Was nicht passt, wird
   rechts abgeschnitten - niemals umgebrochen. */
.itk-top .top-message,
.itk-top--farbig .top-message,
.itk-top--schlicht .top-message {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    align-items: center;
    justify-content: center;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    max-width: 100%;
}
.itk-top .top-message > *,
.itk-top .top-message a,
.itk-top .top-message span { flex: 0 0 auto; white-space: nowrap !important; }
.itk-top__social { flex: 0 0 auto; }
.itk-top .itk-fernwartung-btn--klein { flex: 0 0 auto; }
@media (max-width: 575px) {
    .itk-top .top-message { height: 30px !important; line-height: 30px !important; }
}