/* Generated by Resources/Private/Build/build-frontend.py. */

/* Source: css/nt-frontend-tweaks.css */
/*
 * General frontend tweaks (light + dark). Small, buildless layout corrections
 * that don't warrant an SCSS rebuild.
 */

/* Subpage hero caption sits directly inside a .row without a .col, so Bootstrap's
   negative row margin pulls it flush to the edge. Restore the column gutter so the
   heading/text keep a small distance from the viewport edge (esp. on mobile). */
.banner-header .caption {
    padding-left: 15px;
    padding-right: 15px;
}

/* "Vorlesen"-Icon in der Navbar (links neben der Sprachwahl). Verdrahtung durch
   tts.js über das data-nt-tts-Attribut. */
.nt-tts-navbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    line-height: 0;
    cursor: pointer;
    color: inherit;
    vertical-align: middle;
}
.nt-tts-navbar:hover,
.nt-tts-navbar:focus-visible,
.nt-tts-navbar.is-reading { color: #ff4e00; }
.nt-tts-navbar:focus-visible { outline: 2px solid #ff4e00; outline-offset: 2px; }
/* Icon + Sprachwahl als eine Einheit: eine Flex-Zeile, die auch im mobilen
   Spaltenmenü nebeneinander bleibt (statt zu stapeln). nt-lingua bringt einen
   eigenen margin-left:auto mit → hier neutralisiert, kleiner Abstand zum Icon. */
.nt-tts-lang-group { display: flex; align-items: center; }
.nt-tts-lang-group .nt-lingua-dropdown { margin-left: 0.4rem !important; }
/* Nur auf Desktop die Gruppe rechts ausrichten; darunter im Menü natürlich fließen. */
@media (min-width: 992px) {
    .navbar-collapse .nt-tts-lang-group { margin-left: auto; }
    /* Die Sprachliste rechtsbündig unter der Schaltfläche öffnen. Bootstrap 4
       positioniert Dropdowns in der Navbar nicht per Popper, und 4.0.0 kennt
       noch keine CSS-Regel für .dropdown-menu-right → left:0, die Liste lief
       auf dem iPad (1024 px) rechts aus dem Bild. */
    .nt-lingua-dropdown .dropdown-menu-right { left: auto; right: 0; }
}
/* Im aufgeklappten Hamburger-Menü steht die Liste statisch im Fluss; nt-lingua
   macht den Container zur Flex-Zeile, dadurch landete sie neben der Schaltfläche.
   Umbrechen lassen, damit sie darunter steht. */
@media (max-width: 991.98px) {
    .nt-tts-lang-group { align-items: flex-start; }
    .nt-lingua-desktop.nt-lingua-dropdown { flex-wrap: wrap; width: auto !important; flex: 1 1 auto; }
    .nt-lingua-desktop.nt-lingua-dropdown .dropdown-menu { flex-basis: 100%; }
}
/* Ausblenden, wenn die Vorlesefunktion deaktiviert ist. */
html[data-nt-tts-enabled="0"] .nt-tts-navbar,
html[data-nt-tts-enabled=""] .nt-tts-navbar { display: none; }

/* ── Kontrast der Icon-Buttons (Suche, Vorlesen) in der Navbar ────────────
   Über dem Hero ist die Navbar transparent — currentColor-Icons sind je nach
   Bildmotiv kaum erkennbar (WCAG 1.4.11). Daher: weißes Icon auf dunklem
   Halbtransparenz-Kreis, lesbar auf jedem Motiv (die Sprachwahl bringt ihre
   eigene weiße Box mit). Im weißen Sticky-Header (.nav-scroll) stattdessen
   dunkle Icons ohne Kreis. */
.navbar .nt-search-navbar,
.navbar .nt-tts-navbar {
    width: 34px;
    height: 34px;
    /* Im eingeklappten Mobilmenü staucht der Flex-Container die Breite sonst
       unter 34px → aus dem Kreis wird ein Oval. Schrumpfen unterbinden. */
    flex: 0 0 auto;
    min-width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    backdrop-filter: blur(2px);
}
.navbar .nt-search-navbar:hover,
.navbar .nt-search-navbar:focus-visible,
.navbar .nt-tts-navbar:hover,
.navbar .nt-tts-navbar:focus-visible,
.navbar .nt-tts-navbar.is-reading {
    color: #ff9d73;
    background: rgba(0, 0, 0, 0.55);
}
.navbar .nt-search-navbar + .nt-tts-navbar { margin-left: 6px; }

/* Sticky-Header (weißer Balken): dunkle Icons, kein Kreis nötig. */
.nav-scroll .nt-search-navbar,
.nav-scroll .nt-tts-navbar {
    color: #444;
    background: transparent;
    backdrop-filter: none;
}
.nav-scroll .nt-search-navbar:hover,
.nav-scroll .nt-search-navbar:focus-visible,
.nav-scroll .nt-tts-navbar:hover,
.nav-scroll .nt-tts-navbar:focus-visible,
.nav-scroll .nt-tts-navbar.is-reading {
    color: #ff4e00;
    background: rgba(0, 0, 0, 0.06);
}
/* Dunkler Sticky-Header im Dark-Mode: helle Icons. */
html[data-nt-theme="dark"] .nav-scroll .nt-search-navbar,
html[data-nt-theme="dark"] .nav-scroll .nt-tts-navbar {
    color: #e7e8ec;
}

/* Dropdown-Untermenü (z. B. „Leistungen"): das Theme erhöht beim Hover
   padding-left von 15px auf 20px, wodurch der Eintrag horizontal springt. Wir
   halten das padding konstant — die Hover-Rückmeldung bleibt die orange Farbe. */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    padding-left: 15px;
}

/* ── WCAG 1.4.3 Textkontrast ──────────────────────────────────────────────
   Das Theme setzt Fließtext auf #888 → 3,54:1 auf Weiß (AA verlangt 4,5:1).
   #6a6a6a erreicht ≈5:1 und ist visuell kaum dunkler. Der html-Präfix hebt
   die Spezifität nur über die Typ-Selektoren des Themes (body/p/inputs) —
   Klassen-Regeln (z. B. weißer Footer-Text) gewinnen weiterhin. Die
   transparente Hero-Navbar (weiße Links auf Bild) bleibt bewusst unberührt. */
html body,
html p,
html input[type="password"], html input[type="email"], html input[type="text"],
html input[type="file"], html textarea,
html [data-overlay-light] p {
    color: #6a6a6a;
}
html input::placeholder,
html textarea::placeholder {
    color: #6a6a6a;
}
/* Gleiche #888-Korrektur für Theme-Komponenten mit Klassen-Selektoren
   (a-Typ hebt die Spezifität um eins über die Theme-Regel). */
.team .info p,
.sidebar .services ul li,
.sidebar .services ul li a,
html .projects-prev-next a,
.frame-type-netthinks_citation .testimonial .testimonial-author p,
.price .item .feat li,
html .accordion-box .block .content,
.testimonials-box .head-box h6,
.nopixel-blog .content .date .month,
.nopixel-blog .content .cont .more,
.nopixel-blog .content .info h6,
html .nopixel-pagination-wrap li a,
.nopixel-comment-section h6 span,
html .nopixel-post-prev-next a,
.dropdown-menu a.dropdown-item,
.sub-menu a.dropdown-item,
.nav-scroll .navbar-collapse a.nav-link {
    color: #6a6a6a;
}

/* ── WCAG 1.3.1 Überschriften-Hierarchie ─────────────────────────────────
   Die Referenz-Karten (ReferenceBox) nutzten <h5> direkt unter der <h2> der
   Sektion (Sprung H2→H5). Das Markup ist jetzt <h3 class="project-card-title">;
   diese Regel repliziert exakt die Theme-Optik von .project-container h5,
   damit sich das Design nicht ändert. */
.project-container h3.project-card-title,
.project-texts h3.project-card-title {
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5em;
    color: #fff;
    margin: 0 0 0 0;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ── Mobile: Meta-Fußzeile von schwebenden Icons freihalten ───────────────
   A11y-Launcher (unten links), Cookie-Badge und Zurück-nach-oben (unten
   rechts) überlagern auf schmalen Viewports die Impressum/Datenschutz-Zeile.
   Zusätzliche Bodenfreiheit schiebt die Links über die Icon-Zone. */
@media (max-width: 991px) {
    .main-footer .sub-footer {
        /* Icon-Zone links (Launcher über Cookie-Badge) reicht bis ~175px über
           den Viewport-Boden — gemessen, nicht geraten. */
        padding-bottom: 180px;
    }
}

/* ── Header-Breite im Tablet-Landscape (Bootstrap lg: 992–1199px) ──────────
   navbar-expand-lg expandiert ab 992px, der .container ist dort aber nur 960px
   breit → Logo + Navigation + Suche + Vorlesen + Sprachwahl brechen um
   (z. B. „Über uns"). In diesem Bereich läuft der Header nahezu voll breit,
   damit alle Elemente in einer Zeile bleiben. Ab 1200px greift der normale
   Container wieder. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #navbar > .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Menü-Labels im expandierten Zustand nie innerhalb eines Punkts umbrechen
   („Referenzen", „Über uns"): Flex staucht die Items sonst so weit, dass der
   Text selbst zweizeilig wird. Nowrap hält jedes Label einzeilig. */
@media (min-width: 992px) {
    #navbar .navbar-nav .nav-link { white-space: nowrap; }
}

/* ── Lange Hero-Überschriften auf schmalen Viewports sauber umbrechen ───────
   Die Hero-Caption (.banner-header .caption) ist absolut positioniert und
   schrumpft auf ihre Inhaltsbreite. overflow-wrap:break-word reduziert die
   intrinsische Wortbreite NICHT, daher sprengt ein langes Wort (z. B.
   „Dienstleistungen") die Caption und erzeugt horizontalen Seiten-Overflow.
   hyphens:auto (das <html> trägt lang="de") trennt solche Wörter an
   Silbengrenzen und lässt die Box auf Viewport-Breite schrumpfen; bei kurzen
   Wörtern greift die Trennung nicht. */
.banner-header .caption h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* ── „Aus unserem Blog"-Teaser + CTA-Band über dem Footer ───────────────────
   Ersetzt die früheren durchlaufenden Kundenstimmen. Bewusst buildless:
   Bootstrap-Grid trägt das Layout, hier nur Kartenoptik, Abstände und der
   Marken-Akzent (#ff4e00). Farben aus den vorhandenen Tokens ableitbar zu
   halten wäre schöner, aber die Site pflegt keine CSS-Variablen-Palette. */
.nt-footer-blog {
    position: relative;
    padding: 60px 0 50px;
    /* Bündig an den dunklen Footer: kein weißer Body-Zwischenraum. */
    margin-bottom: 0;
}
/* Inhalt über das dunkle Overlay (data-overlay-dark) heben. */
.nt-footer-blog > .container {
    position: relative;
    z-index: 2;
}
/* Markante Sektionsüberschrift im Stil der übrigen Section-Header (Oswald,
   Versalien, Sperrung) mit orangem Akzent-Unterstrich. */
.nt-footer-blog__heading {
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.1;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid #ff4e00;
}
.nt-footer-blog__all {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}
/* Etwas Luft zwischen Label und Pfeil. */
.nt-footer-blog__all span {
    margin-left: 8px;
}
/* Pfeil + Text zuverlässig orange bei Hover/Fokus (Theme-a:hover überbieten). */
.nt-footer-blog__all:hover,
.nt-footer-blog__all:focus,
.nt-footer-blog__all:hover span,
.nt-footer-blog__all:focus span {
    color: #ff4e00 !important;
}
.nt-blog-card {
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    /* Kein transform beim Hover: das Anheben ließ die Karten und den Footer
       darunter „springen". Nur ein dezenter Schatten als Rückmeldung. */
    transition: box-shadow .2s ease;
}
.nt-blog-card:hover,
.nt-blog-card:focus-within {
    /* Glow in Markenfarbe statt Titel-Unterstreichung (die den Text umbrechen
       und die Box „springen" ließ). Kein Layout-Einfluss. */
    border-color: rgba(255, 78, 0, .55);
    box-shadow: 0 0 0 1px rgba(255, 78, 0, .45), 0 6px 26px rgba(255, 78, 0, .30);
}
.nt-blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Explizit dunkel: die Parallax-Sektion (.background) setzt weiße Schrift,
       die sonst per inherit den Titel auf der weißen Karte unsichtbar macht. */
    color: #1b1b1b;
    text-decoration: none;
}
.nt-blog-card__link:hover,
.nt-blog-card__link:focus {
    color: #1b1b1b;
    text-decoration: none;
}
.nt-blog-card__title {
    color: #1b1b1b;
}
/* Block + line-height:0: verhindert die baseline-Lücke unter dem Bild, die
   sich beim Hover (Theme verändert die Zeilenbox des Links) um ~8 px änderte
   und den Karten-Body verschob. */
.nt-blog-card__media {
    display: block;
    line-height: 0;
    font-size: 0;
}
.nt-blog-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.nt-blog-card__body {
    display: block;
    padding: 16px 18px 18px;
}
.nt-blog-card__date {
    display: block;
    font-size: .8rem;
    color: #ff4e00;
    font-weight: 600;
    margin-bottom: 4px;
}
.nt-blog-card__title {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}
/* Keine Titel-Unterstreichung beim Hover — der Glow um die Karte ist die
   Rückmeldung. */
.nt-blog-card__text {
    display: block;
    font-size: .9rem;
    color: #555;
}

/* Oranger „Kontakt"-Button unter dem Service-Menü im Footer. */
.nt-footer-contact-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 22px;
    background: #ff4e00;
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s ease;
}
.nt-footer-contact-btn:hover,
.nt-footer-contact-btn:focus {
    background: #e04600;
    color: #fff;
    text-decoration: none;
}

/* Dunkles Theme: Karten an die dunkle Fläche anpassen. */
body.nt-dark .nt-blog-card,
.nt-dark-theme .nt-blog-card {
    background: #14161a;
    border-color: #2a2e35;
}
body.nt-dark .nt-blog-card__text,
.nt-dark-theme .nt-blog-card__text {
    color: #b8bec9;
}

/* Die Parallax-Sektion (.background) färbt allen Text weiß. Die weißen
   Blog-Karten sind aber helle Inseln — Titel/Anriss müssen dunkel bleiben.
   Gescopet + !important, um die Theme-Sektionsregel sicher zu überbieten. */
.nt-footer-blog .nt-blog-card__link,
.nt-footer-blog .nt-blog-card__body,
.nt-footer-blog .nt-blog-card__title {
    color: #1b1b1b !important;
}
.nt-footer-blog .nt-blog-card__text {
    color: #555 !important;
}
.nt-footer-blog .nt-blog-card__date {
    color: #ff4e00 !important;
}

/* ── Google-Rezensionen: statisches Karten-Raster (ContentBlock GoogleReviews) ─ */
.nt-greviews {
    padding: 20px 0;
    /* Abstand oben (zum Inhalt darüber) und unten (zu Logo-Wand/Footer).
       tx_t3b_spacing greift bei ContentBlocks nicht in den data-Scope, daher
       hier fest gesteuert. */
    margin-top: 60px;
    margin-bottom: 50px;
}
.nt-greviews__heading {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 12px;
}
.nt-greviews__intro {
    margin-bottom: 20px;
}
.nt-greviews__summary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 2px 0 30px;
    font-family: "Oswald", sans-serif;
}
.nt-greviews__score {
    font-size: 2.1rem;
    font-weight: 700;
    color: #005262;
    line-height: 1;
}
.nt-greviews__summary-stars {
    color: #fbbc04;
    font-size: 1.4rem;
    letter-spacing: 2px;
}
.nt-greviews__summary-stars .star--empty { color: #dadce0; }
.nt-greviews__count {
    font-size: .95rem;
    color: #777;
    letter-spacing: .3px;
}
/* Zentriertes Flex-Raster: gleich breite Karten, unvollständige Zeilen werden
   mittig ausgerichtet. So steht die 5. Rezension nicht mehr verwaist links,
   sondern zentriert unter der Viererzeile (statt eines starren 4-Spalten-Grids). */
.nt-greviews__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.nt-greviews__card {
    flex: 0 1 260px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
@media (max-width: 575px) { .nt-greviews__card { flex-basis: 100%; } }
.nt-greviews__top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nt-greviews__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.nt-greviews__meta { display: flex; flex-direction: column; min-width: 0; }
.nt-greviews__author { font-weight: 700; line-height: 1.2; }
.nt-greviews__time { font-size: .8rem; color: #777; }
.nt-greviews__glogo {
    margin-left: auto;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    color: #4285F4;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.nt-greviews__stars { color: #fbbc04; font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 8px; }
.nt-greviews__stars .star--empty { color: #dadce0; }
.nt-greviews__text { font-size: .92rem; color: #444; margin: 0; }

/* Dunkles Theme */
body.nt-dark .nt-greviews__card,
.nt-dark-theme .nt-greviews__card { background: #14161a; border-color: #2a2e35; }
body.nt-dark .nt-greviews__text,
.nt-dark-theme .nt-greviews__text { color: #c3c9d4; }
body.nt-dark .nt-greviews__score,
.nt-dark-theme .nt-greviews__score { color: #4db6c9; }
body.nt-dark .nt-greviews__count,
.nt-dark-theme .nt-greviews__count { color: #9aa3af; }

/* ── Kontaktformular (EXT:form) ───────────────────────────────────────────── */
/* Select „Ihr Anliegen" lief nur inhaltsbreit (Bootstrap-.form-select-Breite
   fehlt in der geladenen CSS) → volle Breite wie die Textfelder, Label sitzt
   dadurch sichtbar als eigene Zeile darüber. */
.form-container .form-select,
.form-container select {
    width: 100%;
}
/* DSGVO-Link doppelt unterstrichen: das Theme kombiniert die orange
   border-bottom (label a) mit einer blauen text-decoration
   (.form-check-label a). Die blaue Linie entfernen — der orange Marken-
   Unterstrich (inkl. Hover-Animation) bleibt. */
.form-container .form-check-label a {
    text-decoration: none;
}

/* ── Kontaktseite: Kontaktdaten- und Rückruf-Block optisch aufwerten/trennen ──
   Linke Spalte hat drei Text-Elemente: Adresse (c1939), „Rufen Sie an!"
   (c1940) und Rückruf (c2054). Adresse + Anruf werden zu EINER Karte
   zusammengefasst, Rückruf als eigener, orange akzentuierter Block darunter
   klar abgesetzt. IDs = die stabilen Inhaltselemente dieser Seite. */
#c1939.frame-type-text,
#c1940.frame-type-text {
    background: #f5f6f8;
    border: 1px solid #e6e8ec;
    padding-left: 22px;
    padding-right: 22px;
}
#c1939.frame-type-text {
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding-top: 22px;
    padding-bottom: 6px;
    margin-bottom: 0;
}
#c1940.frame-type-text {
    border-radius: 0 0 12px 12px;
    padding-top: 6px;
    padding-bottom: 22px;
    margin-top: 0;
    margin-bottom: 30px;
}
#c2054.frame-type-text {
    background: #fff;
    border: 1px solid #ffd6c4;
    border-left: 4px solid #ff4e00;
    border-radius: 12px;
    padding: 22px;
}
/* Überschriften der drei Blöcke etwas kompakter an die Karten anpassen. */
#c1939 > header,
#c1940 > header,
#c2054 > header { margin-bottom: 6px; }

/* ── Referenz-Logo-Wand (ContentBlock ReferenceLogos) ─────────────────────── */
/* Abstand nach unten zum (dunklen) Footer. */
.nt-logowall { padding: 20px 0; margin-bottom: 120px; }
.nt-logowall__heading {
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 24px;
}
.nt-logowall__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 5 statt 6 Spalten: macht die Zellen (und damit die Logos, deren
       Größe von der Zellbreite abhängt) rund 25 % größer. */
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: center;
}
@media (max-width: 991px) { .nt-logowall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .nt-logowall__grid { grid-template-columns: repeat(2, 1fr); } }
/* Jede Zelle voll ausfüllen, damit die gesamte Fläche die Hover-/Klickfläche
   ist — nicht nur das (bei flachen Logos sehr niedrige) Bild selbst. */
.nt-logowall__item {
    display: flex;
}
/* Selektor bewusst mit .nt-logowall__item davor: Das Theme setzt global
   "a { display: inline-block }" UND "a:hover { display: inline-block }"
   (style.css). Letzteres ist Typ+Pseudoklasse und damit spezifischer als
   eine einzelne Klasse — genau beim Hover kippte dadurch display zurück auf
   inline-block, die Flex-Zentrierung griff nicht mehr, und das Logo landete
   linksbündig im Blockfluss (wirkte wie ein Sprung nach links/oben). Zwei
   Klassen schlagen Klasse+Typ - kein !important noetig (siehe auch
   .banner-header .nt-post-date weiter unten für dasselbe Muster). */
.nt-logowall__item .nt-logowall__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 84px;
    padding: 10px;
}
.nt-logowall__link img {
    /* max-height zusätzlich zu max-width: quadratische/hochformatige Logos
       (z. B. runde Embleme) würden sonst über die volle Zellbreite skaliert
       und dadurch viel höher als die überwiegend querformatigen Wortmarken
       wirken. Mit width/height:auto UND beiden max-Werten skaliert der
       Browser auf die jeweils knappere Grenze — alle Logos landen optisch
       auf vergleichbarer Höhe. 64px = verfügbare Höhe der Link-Box
       (min-height 84px abzüglich 2× 10px Padding). */
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    /* Ruhiges Gesamtbild in Graustufen; Hover/Fokus blendet zur Originalfarbe
       zurück (siehe unten). Bei Logos mit sehr hellen Farbteilen (z. B.
       Ruchs hellblauer Kreis) ist der helle Rand dann gegen Weiß kaum noch
       zu erkennen — bewusst in Kauf genommen, da der Effekt nur beim Hover
       greift und der Rest des Logos lesbar bleibt. */
    filter: grayscale(100%);
    opacity: .85;
    transition: opacity .2s ease, filter .2s ease;
}
.nt-logowall__link:hover img,
.nt-logowall__link:focus img {
    /* Bewusst KEIN transform:scale() mehr: Ein Zoom auf einem Bild, dessen
       Größe bereits durch max-width/max-height an der Zellgrenze geklemmt
       ist, verschiebt sich beim Skalieren minimal (Rendering-Rundung bei
       transform-origin auf geclampten Ersatzelementen) — genau das wurde
       zweimal als „Logo springt beim Hover" gemeldet. Farbe/Opacity als
       Hover-Hinweis reicht und bewegt nichts. */
    opacity: 1;
    filter: grayscale(0%);
}

/* Rotation der Logo-Auswahl (logowall-rotate.js): Zellen (li) wechseln nach
   dem initialen Setup NIE mehr ihre display:none-Zugehörigkeit — sonst
   rutschen bei jedem Tausch alle nachfolgenden Grid-Zellen nach, weil CSS
   Grid display:none-Elemente aus dem Fluss nimmt. Rotiert wird nur der
   Link-Inhalt eines Slots, per Opacity weich ein-/ausgeblendet. */
.nt-logowall__item--hidden {
    display: none;
}
.nt-logowall__link.nt-logowall__item--fade-out {
    opacity: 0;
    transition: opacity .4s ease;
}
.nt-logowall__link.nt-logowall__item--fade-in {
    opacity: 0;
}
/* Markiert ein frisch eingetauschtes Logo kurz mit Rahmen/Schatten, damit
   der Wechsel auffällt statt beiläufig zu passieren — verschwindet danach
   von selbst wieder (Klasse wird per JS nach der Transition entfernt). */
.nt-logowall__link.nt-logowall__link--new {
    box-shadow: 0 0 0 2px #ff4e00, 0 6px 16px rgba(0, 0, 0, .18);
    border-radius: 4px;
    transition: box-shadow 1.4s ease;
}
.nt-logowall__link.nt-logowall__link--new.nt-logowall__link--fading {
    box-shadow: 0 0 0 2px rgba(255, 78, 0, 0), 0 6px 16px rgba(0, 0, 0, 0);
}

/* ── Blogbeitrag: Veroeffentlichungsdatum im Seitenkopf ──────────────────────
   Steht unter Titel/Subline auf dem abgedunkelten Hero-Bild, daher heller Ton
   statt der Akzentfarbe (die auf dem Bild zu wenig Kontrast haette).
   Selektor bewusst mit .banner-header davor: die Theme-Regel ".banner-header p"
   ist spezifischer als eine einzelne Klasse und wuerde Groesse und Farbe sonst
   ueberschreiben. Zwei Klassen schlagen Klasse+Typ - kein !important noetig. */
.banner-header .nt-post-date {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .85);
}

/* ── Codeblöcke und Inline-Code im Inhalt ───────────────────────────────────
   Das Theme bringt keine Auszeichnung für pre/code mit, Befehle standen daher
   unformatiert im Fließtext. Bewusst auf main beschraenkt, damit Backend- und
   Plugin-Ausgaben unberuehrt bleiben. */
main pre {
    margin: 1rem 0;
    padding: .9rem 1.1rem;
    background: #f5f6f7;
    border: 1px solid #e2e5e8;
    border-left: 3px solid #ff4e00;
    border-radius: 4px;
    overflow-x: auto;          /* lange Befehle scrollen im Block, nicht die Seite */
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre;
    color: #24292f;
}
main pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
/* Inline-Code: nur ausserhalb von pre, sonst doppelte Rahmen */
main :not(pre) > code {
    padding: .12em .4em;
    background: #f5f6f7;
    border: 1px solid #e2e5e8;
    border-radius: 3px;
    font-size: .9em;
    color: #b33800;
}

/* ------------------------------------------------------------------
   Mehrfachauswahl in Formularen (EXT:form)

   Anlass: Benutzermeldung Allgaier. Die Gruppenbeschriftung kam als
   <legend> in Ueberschriftengroesse (24px) daher und wirkte dadurch wie
   eine Zwischenueberschrift statt wie das Feldlabel, das sie ist. Und
   zehn Optionen untereinander ergaben eine unnoetig lange Liste.
   ------------------------------------------------------------------ */

/* Die Gruppenbeschriftung genauso setzen wie ein normales Feldlabel:
   gleiche Groesse, gleiche Auszeichnung. Sie beschriftet ein Feld, sie
   gliedert nicht die Seite. */
.form-element-multicheckbox > legend,
.form-element-radiobutton > legend,
.form-element-multicheckbox legend,
.form-element-radiobutton legend {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .5rem;
    float: none;
    width: auto;
    /* Auch die Farbe angleichen: Groesse und Schnitt allein genuegen nicht,
       die Legende kam in Grau (#6a6a6a) und wirkte dadurch weiterhin wie
       etwas anderes als die uebrigen Feldbeschriftungen (#203040). */
    color: #203040;
}

/* Optionen im Raster statt in CSS-Spalten.

   CSS-Spalten (column-count) fuellen SENKRECHT und gleichen die Hoehe aus:
   Bei zehn Eintraegen ergab das 3/4/3 statt gleichmaessiger Reihen, und beim
   Ein- und Ausblenden sprangen die Eintraege in andere Spalten. Ein Raster
   fuellt zeilenweise, die Spalten sind gleich breit und nichts wandert.

   auto-fit + minmax: Der Browser nimmt so viele Spalten, wie bei 15rem
   Mindestbreite hineinpassen - auf dem Handy also eine, ohne eigene
   Umbruchpunkte. */
.form-element-multicheckbox [role="group"],
.form-element-radiobutton [role="radiogroup"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .5rem .75rem;
}

/* Kompakter und mittig: Das Kaestchen liegt absolut positioniert am oberen
   Rand, das Label trug zusaetzlich 8px Abstand nach unten - zusammen ergab
   das 54px hohe Kaesten mit oben klebendem Haken. */
.form-element-multicheckbox [role="group"] > .form-check,
.form-element-radiobutton [role="radiogroup"] > .form-check {
    display: flex;
    align-items: center;
    margin: 0;                    /* Abstaende macht jetzt das Raster */
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.form-element-multicheckbox [role="group"] > .form-check > label,
.form-element-radiobutton [role="radiogroup"] > .form-check > label {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
}

.form-element-multicheckbox [role="group"] > .form-check input[type="checkbox"],
.form-element-radiobutton [role="radiogroup"] > .form-check input[type="radio"] {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

/* ------------------------------------------------------------------
   Promo-Kasten: volle Spaltenhoehe nur dort, wo sie gemeint ist

   style.css streckt jeden Promo-Kasten in einer Spalte auf 100 % Hoehe,
   damit zwei Kaesten nebeneinander gleich hoch sind. Steht ueber dem
   Kasten aber noch anderer Inhalt - auf /leistungen/domains-hosting ein
   Textabsatz -, bezieht sich die Hoehe trotzdem auf die GESAMTE Spalte.
   Der Kasten wird dann so hoch wie Text und Kasten zusammen und ragt
   unten aus dem Abschnitt heraus: gemessen 595px Kasten bei 268px
   Inhalt, also 327px Leerraum bis in den grauen Bereich hinein.

   Unterscheidungsmerkmal ist, ob der Kasten allein in seiner Spalte
   steht. Nur dann ist das Gleichziehen gemeint.
   ------------------------------------------------------------------ */
.row > [class*="col-"] > div:not(:only-child) > .promo,
.row > [class*="col-"] > div:not(:only-child):has(> .promo) {
    height: auto;
}

/* ------------------------------------------------------------------
   Hover-Balken der .btn-curve-Buttons ragt bei breiten Buttons herein

   Der Balken (::after) wartet um -5 Grad gedreht oberhalb des Buttons.
   Das Theme dreht ihn um seine Mitte: Das linke Ende sinkt dabei um
   rund 4,4 % der Buttonbreite. Bei kurzen Buttontexten bleibt das
   ausserhalb, ab etwa 300 px Breite schiebt sich links oben eine
   angeschnittene Ecke in den Button (gemessen: 461 px breit, 9 px
   sichtbar). Dreht der Balken um seine linke untere Ecke, kann links
   nichts mehr absinken; das rechte Ende hebt sich nur weiter weg.
   Der Hover-Verlauf (Drehung auf 0, Balken faehrt herunter) bleibt.
   ------------------------------------------------------------------ */
.btn-curve::after {
    transform-origin: left bottom;
}

/* ------------------------------------------------------------------
   Outline-Wort der Abschnittsueberschrift sprengt schmale Bildschirme

   h2.section-title steht fest auf 50 px mit 5 px Buchstabenabstand. Ein
   einzelnes langes Wort ("Digitalagentur", 410 px breit) passt bei
   390 px Fensterbreite nicht in die Spalte und laesst die ganze Seite
   seitlich scrollen. Auf schmalen Bildschirmen richtet sich die Groesse
   deshalb nach der Fensterbreite; der Abstand skaliert mit (0.1em), sonst
   bliebe er als fester Sockel stehen. Ab 576 px gilt wieder das Theme.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    h2.section-title {
        font-size: min(50px, calc((100vw - 30px) * 0.118));
        letter-spacing: 0.1em;
        overflow-wrap: anywhere;
    }
}

/* ------------------------------------------------------------------
   PromoBox: Bildlaufband unter dem Text (Feld "Bildlaufband")

   Reines CSS-Laufband; die Bildfolge steht doppelt im Markup, die
   Verschiebung um die halbe Bandbreite ergibt den nahtlosen Umlauf.
   Bewegte Inhalte muessen anhaltbar sein (WCAG 2.2.2): Zeiger darueber,
   Tastaturfokus oder der Knopf halten das Band an. Wer reduzierte
   Bewegung eingestellt hat, bekommt gar keinen Lauf, sondern eine
   Reihe zum Selbstscrollen - ohne die doppelte Folge.
   ------------------------------------------------------------------ */
.promo-gallery {
    margin-top: 2rem;
}
.promo-gallery__viewport {
    overflow: hidden;
    border-radius: 3px;
}
.promo-gallery__viewport:focus-visible {
    outline: 2px solid #ff4e00;
    outline-offset: 3px;
}
.promo-gallery__track {
    display: flex;
    gap: 12px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: nt-promo-gallery var(--nt-promo-gallery-duration, 48s) linear infinite;
}
.promo-gallery__item {
    flex: 0 0 auto;
    width: clamp(180px, 34cqw, 300px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.promo-gallery__link {
    display: block;
    cursor: zoom-in;
    border-radius: 3px;
}
.promo-gallery__link:focus-visible {
    outline: 2px solid #ff4e00;
    outline-offset: 2px;
}
.promo-gallery__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 3px;
}
.promo-gallery:hover .promo-gallery__track,
.promo-gallery:focus-within .promo-gallery__track,
.promo-gallery.is-paused .promo-gallery__track {
    animation-play-state: paused;
}
/* Halbe Bandbreite plus ein halber Zwischenraum: Die zweite Folge landet
   exakt dort, wo die erste begonnen hat. */
@keyframes nt-promo-gallery {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 6px)); }
}
.promo-gallery__toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .15em;
}
.promo-gallery__toggle[hidden] {
    display: none;
}
.promo-gallery__toggle:focus-visible {
    outline: 2px solid #ff4e00;
    outline-offset: 3px;
}
.promo-gallery__toggle-icon {
    width: 10px;
    height: 12px;
    border-left: 3px solid #ff4e00;
    border-right: 3px solid #ff4e00;
}
.promo-gallery.is-paused .promo-gallery__toggle-icon {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 10px solid #ff4e00;
    border-right: 0;
}
@media (prefers-reduced-motion: reduce) {
    .promo-gallery__track {
        animation: none;
    }
    .promo-gallery__viewport {
        overflow-x: auto;
    }
    .promo-gallery__item[aria-hidden="true"],
    .promo-gallery__toggle {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Bild neben einer PromoBox: so hoch wie der Kasten

   Steht in einer Zeile eine Spalte nur mit einem Bild neben einer Spalte
   mit PromoBox, bestimmt der Kasten die Hoehe der Zeile, das Bild behaelt
   aber sein eigenes Seitenverhaeltnis - unten blieb ein Versatz (gemessen
   457 px Bild neben 520 px Kasten). Das Bild fuellt deshalb die Spalte
   und wird beschnitten statt verzerrt.
   Zwischen Spalte und <img> liegen acht Huellelemente des Bild-Elements;
   statt jedem eine Hoehe durchzureichen, wird das Bild direkt an der
   Spalte ausgerichtet. Nur ab md: Gestapelt hat die Spalte keine Hoehe
   vom Nachbarn, das Bild soll dort normal fliessen.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) {
        position: relative;
    }
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) .frame-type-image *:not(img) {
        position: static;
    }
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) .frame-type-image img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        width: calc(100% - var(--bs-gutter-x, 1.5rem));
        height: 100%;
        object-fit: cover;
    }
}

/* Gestapelt (unter md) stand das Hochkant-Bild in voller Breite vor dem
   Kasten: 360 x 645 px, mehr als eine Bildschirmhoehe vor dem ersten Wort.
   Dort genuegt ein flacher Ausschnitt; der Schwerpunkt liegt oben, wo bei
   Portraets das Motiv sitzt. */
@media (max-width: 767.98px) {
    /* Die Huellen des Bild-Elements schrumpfen auf die Bildbreite (inline-block
       um das <img>); ohne volle Breite der Kette blieben vom 100 %-Bild nur
       die 123 px, die sich aus 220 px Hoehe und dem Seitenverhaeltnis ergeben. */
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) .frame-type-image :is(.ce-gallery, figure, figure div, a, picture) {
        display: block;
        width: 100%;
    }
    /* <picture> bekommt vom Bild-Element per Inline-Style mit ID-Selektor das
       Seitenverhaeltnis der Originaldatei (#picture-<uid>-0 { aspect-ratio }).
       Als Block hielte es damit die volle Hochkant-Hoehe frei. Gegen einen
       ID-Selektor hilft keine Klassenkette, daher ausnahmsweise !important. */
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) .frame-type-image picture {
        aspect-ratio: auto !important;
    }
    .row:has(> [class*="col-"] > div > .promo) > [class*="col-"]:has(> .frame-type-image:only-child) .frame-type-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        object-position: center 22%;
    }
}


/* ------------------------------------------------------------------
   Leistungs-Karten auf weissem Abschnitt

   Die Karten (.services .item) sind weiss und hoben sich bisher nur vom
   grauen Abschnittshintergrund ab. Steht der Abschnitt auf Weiss (ohne
   .bg-color), verschwinden die Kartenkanten und die Karten wirken wie
   lose Textbloecke. Dann bekommen sie denselben feinen Rahmen wie die
   PromoBox (.promo-border). Auf Grau bleibt alles wie gehabt.
   ------------------------------------------------------------------ */
.services:not(.bg-color) .item {
    border: 1px solid #E5E5E5;
    border-radius: 3px;
}

/* ------------------------------------------------------------------
   Wechselwort in Überschriften (rotate-words.js)
   Das Wort steht in einer eigenen Zeile und darf nicht umbrechen, sonst
   springt alles darunter bei jedem Wechsel.
   ------------------------------------------------------------------ */
.nt-rotate-wrap {
    position: relative;
}
.nt-rotate {
    white-space: nowrap;
}
.nt-rotate .nt-rotate__word {
    display: inline-block;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.nt-rotate .nt-rotate__word.is-leaving {
    opacity: 0;
    transform: translateY(-0.35em);
}
.nt-rotate .nt-rotate__word.is-entering {
    opacity: 0;
    transform: translateY(0.35em);
    transition: none;
}
.nt-rotate-wrap .nt-rotate__toggle {
    position: absolute;
    top: 0.9rem;
    right: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #C8C8C8;
    border-radius: 50%;
    color: #6B6B6B;
    cursor: pointer;
}
/* Schmal reicht die erste Zeile bis an den Rand; der Knopf rückt dann
   neben die Dachzeile darüber. */
@media (max-width: 575.98px) {
    .nt-rotate-wrap .nt-rotate__toggle {
        top: -2.1rem;
    }
}
.nt-rotate-wrap .nt-rotate__toggle:hover {
    border-color: #ff4e00;
    color: #ff4e00;
}
.nt-rotate-wrap .nt-rotate__toggle:focus-visible {
    outline: 2px solid #ff4e00;
    outline-offset: 2px;
}
.nt-rotate__toggle-icon {
    width: 0.6rem;
    height: 0.7rem;
    border-left: 0.2rem solid currentColor;
    border-right: 0.2rem solid currentColor;
}
.nt-rotate-wrap.is-paused .nt-rotate__toggle-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.4rem 0 0.4rem 0.65rem;
    border-color: transparent transparent transparent currentColor;
    margin-left: 0.15rem;
}

/* ------------------------------------------------------------------
   Markenschutz-Span in Abschnittsüberschriften
   nt-lingua umschließt „Net." mit <span data-nt-notranslate>, damit es
   nicht übersetzt wird. Das Theme zeichnet aber jedes span in der
   Überschrift als blasse Kontur – „NET." war dadurch kaum lesbar. Der
   Schutz-Span soll aussehen wie der Text um ihn herum.
   ------------------------------------------------------------------ */
h2.section-title span[data-nt-notranslate] {
    font-weight: inherit;
    color: inherit;
    -webkit-text-stroke: 0;
    opacity: 1;
}

/* ------------------------------------------------------------------
   Kontakt-CTA mit Themen-Einstiegen (.nt-cta)
   Dunkle Fläche als Gegenpol zu den hellen Abschnitten: Überschrift mit
   einem per Wellenlinie unterstrichenen Wort, ein Hauptknopf und darunter
   vier Einstiege für Besucher, die ihr Anliegen noch nicht benennen können.
   ------------------------------------------------------------------ */
.nt-cta {
    padding: 90px 0;
}
.nt-cta__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: 6px;
    background: #1b1b1b;
    color: #d6d6d6;
    text-align: center;
}
/* Zwei angeschnittene Kreise als ruhiger Hintergrund, rein dekorativ. */
.nt-cta__panel::before,
.nt-cta__panel::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 78, 0, .22);
    border-radius: 50%;
    pointer-events: none;
}
.nt-cta__panel::before { width: 620px; height: 620px; right: -220px; top: -260px; }
.nt-cta__panel::after  { width: 900px; height: 900px; right: -420px; top: -300px; border-color: rgba(255, 255, 255, .07); }
.nt-cta__panel > * {
    position: relative;
    z-index: 1;
}
.nt-cta h2.nt-cta__title {
    margin: 0 0 1.25rem;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.7rem, 4.2vw, 2.9rem);
    font-weight: 600;
    /* Zeilenhöhe trägt die Wellenlinie: bei umbrechender Markierung liefe sie sonst in die Folgezeile. */
    line-height: 1.45;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
}
.nt-cta .nt-cta__title .nt-cta__mark {
    /* Das Theme setzt Spans in Überschriften auf inline-block; dann bräche ein folgendes Satzzeichen allein um. */
    display: inline;
    font-weight: inherit;
    opacity: 1;
    -webkit-text-stroke: 0;
    color: #ff4e00;
    text-decoration: underline wavy #ff4e00;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
    text-decoration-skip-ink: none;
}
.nt-cta__lead {
    max-width: 46rem;
    margin: 0 auto 2rem;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #d6d6d6;
}
.nt-cta .nt-cta__button,
.nt-cta .nt-cta__button:hover,
.nt-cta .nt-cta__button:focus {
    display: inline-block;
    padding: .95rem 2.4rem;
    border: 2px solid #fff;
    border-radius: 3px;
    font-family: "Oswald", sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
}
/* Knopf im stärksten Kontrast der Fläche: weiß auf Dunkel, Anthrazit auf Hell.
   Dunkle Schrift auf Orange (5:1) wirkte in der schmalen Versalschrift flau;
   Orange bleibt dem Hover vorbehalten. */
.nt-cta .nt-cta__button {
    background: #fff;
    color: #1b1b1b;
    transition: background-color .2s ease, border-color .2s ease;
}
.nt-cta .nt-cta__button:hover,
.nt-cta .nt-cta__button:focus {
    border-color: #ff4e00;
    background: #ff4e00;
    color: #1b1b1b;
}
.nt-cta__divider {
    height: 1px;
    margin: 2.75rem 0 2.25rem;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22) 20%, #ff4e00 50%, rgba(255, 255, 255, .22) 80%, transparent);
}
.nt-cta__hint {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    color: #fff;
    text-align: left;
}
.nt-cta__paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.nt-cta .nt-cta__paths .nt-cta__path,
.nt-cta .nt-cta__paths .nt-cta__path:hover,
.nt-cta .nt-cta__paths .nt-cta__path:focus {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
    font-size: 1.05rem;
    line-height: 1.4;
    color: #fff;
    text-decoration: none;
}
.nt-cta .nt-cta__paths .nt-cta__path {
    background: rgba(255, 255, 255, .04);
    transition: border-color .2s ease, background-color .2s ease;
}
.nt-cta .nt-cta__paths .nt-cta__path:hover,
.nt-cta .nt-cta__paths .nt-cta__path:focus {
    border-color: #ff4e00;
    background: rgba(255, 78, 0, .1);
}
.nt-cta__path-icon {
    flex: 0 0 auto;
    font-size: 1.5rem;
    color: #ff4e00;
}
.nt-cta__path-text {
    flex: 1 1 auto;
}
.nt-cta__path-arrow {
    flex: 0 0 auto;
    color: #ff4e00;
    transition: transform .2s ease;
}
.nt-cta .nt-cta__path:hover .nt-cta__path-arrow,
.nt-cta .nt-cta__path:focus .nt-cta__path-arrow {
    transform: translateX(4px);
}
.nt-cta .nt-cta__button:focus-visible,
.nt-cta .nt-cta__path:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
@media (max-width: 767.98px) {
    .nt-cta { padding: 60px 0; }
    .nt-cta__paths { grid-template-columns: 1fr; }
    .nt-cta h2.nt-cta__title { letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .nt-cta .nt-cta__button,
    .nt-cta .nt-cta__path,
    .nt-cta__path-arrow { transition: none; }
}

/* Helle Variante des Kontakt-CTA: gleiche Struktur auf hellgrauer Fläche. */
.nt-cta--light .nt-cta__panel {
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    color: #444;
}
.nt-cta--light .nt-cta__panel::before { border-color: rgba(255, 78, 0, .28); }
.nt-cta--light .nt-cta__panel::after  { border-color: rgba(0, 0, 0, .07); }
.nt-cta--light h2.nt-cta__title { color: #1b1b1b; }
.nt-cta--light .nt-cta__lead { color: #444; }
.nt-cta--light .nt-cta__hint { color: #1b1b1b; }
.nt-cta--light .nt-cta__button {
    border-color: #1b1b1b;
    background: #1b1b1b;
    color: #fff;
}
.nt-cta--light .nt-cta__button:hover,
.nt-cta--light .nt-cta__button:focus {
    border-color: #ff4e00;
    background: #ff4e00;
    color: #1b1b1b;
}
.nt-cta--light .nt-cta__divider {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .16) 20%, #ff4e00 50%, rgba(0, 0, 0, .16) 80%, transparent);
}
.nt-cta--light .nt-cta__paths .nt-cta__path,
.nt-cta--light .nt-cta__paths .nt-cta__path:hover,
.nt-cta--light .nt-cta__paths .nt-cta__path:focus {
    border-color: #dcdcdc;
    color: #1b1b1b;
}
.nt-cta--light .nt-cta__paths .nt-cta__path { background: #fff; }
.nt-cta--light .nt-cta__paths .nt-cta__path:hover,
.nt-cta--light .nt-cta__paths .nt-cta__path:focus {
    border-color: #ff4e00;
    background: #fff6f1;
}
.nt-cta--light .nt-cta__button:focus-visible,
.nt-cta--light .nt-cta__path:focus-visible { outline-color: #1b1b1b; }
/* In einem Seiten-Container (z. B. im Blogartikel) bringt der Abschnitt keinen
   zweiten Container-Rand mit. */
.container .nt-cta > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
/* Im Seiten-Container steht der CTA zwischen anderen Inhalten; der große
   Abschnittsabstand der Startseite wäre dort zu viel. */
.container .nt-cta {
    padding: 40px 0;
}

/* ==========================================================================
   Kundenbereich: Kachel-Übersicht (.nt-portal-tile)
   ========================================================================== */
/* Die Kacheln sind Geschwister in einer Spalte; erst ihre Anwesenheit macht die Spalte zum Raster. */
:has(> .nt-portal-tile) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    align-content: start;
}
:has(> .nt-portal-tile) > :not(.nt-portal-tile) {
    grid-column: 1 / -1;
}
/* Verbund-Selektor wegen der Theme-Regel a:hover{display:inline-block}. */
a.nt-portal-tile,
a.nt-portal-tile:hover,
a.nt-portal-tile:focus {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.35rem;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: #fff;
    color: #1b1b1b;
    text-decoration: none;
}
a.nt-portal-tile {
    transition: border-color .2s ease, box-shadow .2s ease;
}
a.nt-portal-tile:hover,
a.nt-portal-tile:focus {
    border-color: #ff4e00;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
a.nt-portal-tile:focus-visible {
    outline: 2px solid #1b1b1b;
    outline-offset: 2px;
}
.nt-portal-tile__icon {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: 1.75rem;
    color: #ff4e00;
}
.nt-portal-tile__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.nt-portal-tile__title {
    font-family: "Oswald", sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.nt-portal-tile__text {
    font-size: .95rem;
    line-height: 1.45;
    color: #555;
}
.nt-portal-tile__arrow {
    flex: 0 0 auto;
    margin-top: .35rem;
    color: #ff4e00;
    transition: transform .2s ease;
}
a.nt-portal-tile:hover .nt-portal-tile__arrow,
a.nt-portal-tile:focus .nt-portal-tile__arrow {
    transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
    a.nt-portal-tile, .nt-portal-tile__arrow { transition: none; }
}

/* ==========================================================================
   Kundenbereich: Anmeldung
   ========================================================================== */
/* Abgemeldet ist die Kachel-Spalte leer. Dann die leere Spalte ausblenden und die
   Anmeldung mittig setzen, statt sie schmal an den rechten Rand zu drücken. */
.row:has(> [class*="col-"] > .frame-type-felogin_login) > [class*="col-"]:not(:has(*)) {
    display: none;
}
/* :has() darf nicht in :has() stehen, deshalb über die Geschwister-Beziehung: die
   Anmelde-Spalte, der eine leere Spalte vorausgeht. */
[class*="col-"]:not(:has(*)) ~ [class*="col-"]:has(> .frame-type-felogin_login) {
    flex: 0 0 auto;
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
}
.frame-type-felogin_login .alert {
    padding: 0;
    border: 0;
    background: none;
}
.frame-type-felogin_login .alert h2 {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    color: #1b1b1b;
}
.frame-type-felogin_login .alert p {
    margin: 0;
}
.frame-type-felogin_login .alert-error {
    padding: 1rem 1.25rem;
    border-left: 4px solid #b3261e;
    border-radius: 4px;
    background: #fdecea;
    color: #1b1b1b;
}
.frame-type-felogin_login .alert-error h2 {
    font-size: 1.25rem;
}
.frame-type-felogin_login form + a {
    display: inline-block;
    margin-top: 1rem;
}
/* Hilfetext unter der Anmeldung: als Fußnote der Karte, nicht als zweiter Inhaltsblock. */
.frame-type-felogin_login + .frame-type-text {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e2e2;
    font-size: .95rem;
}
.frame-type-felogin_login .nt-logout__user { margin-bottom: 1rem; }

/* ==========================================================================
   Quellschau-Hinweis mit Digest-Anmeldung (.nt-qs)
   ========================================================================== */
.nt-qs { padding: 40px 0; }
.nt-qs__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding: 2.25rem 2.5rem;
    border: 1px solid #e2e2e2;
    border-left: 4px solid #ff4e00;
    border-radius: 4px;
    background: #fff;
}
.nt-qs__eyebrow {
    margin: 0 0 .5rem;
    font-family: "Oswald", sans-serif;
    font-size: .85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #c23b00;
}
.nt-qs h2.nt-qs__title {
    margin: 0 0 .9rem;
    font-size: 1.7rem;
    line-height: 1.3;
    color: #1b1b1b;
    text-wrap: balance;
}
.nt-qs__text { margin: 0 0 1rem; color: #444; }
.nt-qs__link { margin: 0; }
.nt-qs .nt-qs__link a,
.nt-qs .nt-qs__link a:hover { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #c23b00; text-decoration: underline; text-underline-offset: .2em; }
.nt-qs .nt-qs__note a { color: #1b1b1b; text-decoration: underline; }
.nt-qs__form { padding: 1.5rem; background: #f7f7f7; border-radius: 4px; }
.nt-qs__form-title {
    margin: 0 0 .35rem;
    font-family: "Oswald", sans-serif;
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1b1b1b;
}
.nt-qs__form-text { margin: 0 0 1rem; font-size: .95rem; color: #444; }
.nt-qs__label { display: block; margin: 0 0 .3rem; font-size: .9rem; font-weight: 600; color: #1b1b1b; }
.nt-qs__row { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Verbund-Selektor: das Theme zeichnet Eingabefelder nur mit einer Unterlinie auf transparentem Grund. */
.nt-qs .nt-qs__form input.nt-qs__input,
.nt-qs .nt-qs__form input.nt-qs__input:focus {
    flex: 1 1 12rem;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 .85rem;
    border: 1px solid #767676;
    border-radius: 3px;
    background: #fff;
    color: #1b1b1b;
    box-shadow: none;
}
/* Verbund-Selektor: das Theme stylt button und button:hover global (u. a. border:none). */
.nt-qs .nt-qs__form button.nt-qs__button,
.nt-qs .nt-qs__form button.nt-qs__button:hover,
.nt-qs .nt-qs__form button.nt-qs__button:focus {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 1.4rem;
    border: 2px solid #1b1b1b;
    border-radius: 3px;
    font-family: "Oswald", sans-serif;
    font-size: .95rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}
.nt-qs .nt-qs__form button.nt-qs__button { background: #1b1b1b; color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.nt-qs .nt-qs__form button.nt-qs__button:hover,
.nt-qs .nt-qs__form button.nt-qs__button:focus { background: #ff4e00; border-color: #ff4e00; color: #1b1b1b; }
.nt-qs .nt-qs__form input.nt-qs__input:focus-visible,
.nt-qs .nt-qs__form button.nt-qs__button:focus-visible { outline: 2px solid #1b1b1b; outline-offset: 2px; }
/* Lockfeld für Formularfüller: für Menschen unsichtbar und nicht per Tab erreichbar. */
.nt-qs__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nt-qs__note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.5; color: #555; }
@media (max-width: 991.98px) {
    .nt-qs__panel { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .nt-qs .nt-qs__form button.nt-qs__button { transition: none; }
}


/* Source: css/nt-dark-theme.css */
/*
 * Native dark theme for the NET.THINKS site — FIRST PASS.
 *
 * Toggled by the nt-ai accessibility widget via html[data-nt-theme="dark"]
 * (replaces the earlier CSS-invert dark mode). Site-specific: the brand orange
 * (#ff4e00) is kept as the accent; primary surfaces are darkened and text is
 * lightened. Sections that carry their own background image (hero/slider) are
 * left untouched.
 *
 * This covers the main structural surfaces. Individual sections/components with
 * bespoke light backgrounds may still need per-case tuning — adjust here.
 */
html[data-nt-theme="dark"] {
    --nt-bg: #14161b;
    --nt-surface: #1d2027;
    --nt-elev: #252932;
    --nt-text: #e7e8ec;
    --nt-muted: #aab0ba;
    --nt-border: #333a45;
    --nt-link: #6fa8ff;
    --nt-link-hover: #9cc4ff;
    color-scheme: dark;
    background: var(--nt-bg);
}

html[data-nt-theme="dark"] body {
    background: var(--nt-bg) !important;
    color: var(--nt-text);
}

/* ── Surfaces: common light containers → dark ─────────────────────────── */
html[data-nt-theme="dark"] .bg-white,
html[data-nt-theme="dark"] .bg-light,
html[data-nt-theme="dark"] .bg-body,
/* Site-specific light surfaces (theme uses #f7f7f7). The .services SECTION is
   darkened too; only the cards (.services .item, white with dark text) keep their
   own look — excluded in the text/heading rules below. */
html[data-nt-theme="dark"] .bg-color,
html[data-nt-theme="dark"] .clients,
html[data-nt-theme="dark"] .team .info,
html[data-nt-theme="dark"] .sidebar .sidebar-widget .widget-inner,
html[data-nt-theme="dark"] .accordion-box .block.active-block,
html[data-nt-theme="dark"] .accordion-box .block .acc-btn.active,
html[data-nt-theme="dark"] main,
html[data-nt-theme="dark"] .card,
html[data-nt-theme="dark"] .list-group-item,
html[data-nt-theme="dark"] .dropdown-menu,
html[data-nt-theme="dark"] .modal-content,
html[data-nt-theme="dark"] .offcanvas,
html[data-nt-theme="dark"] .accordion-item,
html[data-nt-theme="dark"] .accordion-button,
html[data-nt-theme="dark"] .navbar.bg-white,
html[data-nt-theme="dark"] .navbar.bg-light,
html[data-nt-theme="dark"] .navbar-light {
    background-color: var(--nt-surface) !important;
    color: var(--nt-text);
}
/* A plain section with no background image inherits the dark canvas. */
html[data-nt-theme="dark"] section:not([style*="background-image"]):not([class*="bg-"]) {
    background-color: transparent;
}

/* ── Text ─────────────────────────────────────────────────────────────── */
/* Force dark/black text to light. !important + inline-element coverage so it also
   wins over deep theme rules and inline style="color:#..." on the text. The
   hero/header (image slider), the footer and the widget keep their own colours;
   buttons/badges are excluded so their labels stay intact. */
html[data-nt-theme="dark"] :is(p, li, dd, dt, blockquote, figcaption, td, th, label, span, strong, em, b, i, small, h1, h2, h3, h4, h5, h6):not(header *):not(.header *):not(.banner-header *):not(.main-footer *):not(.services .item *):not(.promo *):not(.nt-a11y-widget *):not(.btn):not([class*="btn"]):not(.badge):not([class*="badge"]) {
    color: var(--nt-text) !important;
}
html[data-nt-theme="dark"] :is(.text-muted, .text-secondary, small, .form-text):not(header *):not(.header *):not(.banner-header *):not(.main-footer *):not(.nt-a11y-widget *) {
    color: var(--nt-muted) !important;
}
/* Text utilities that force dark colours on a now-dark surface. */
html[data-nt-theme="dark"] :is(.text-dark, .text-black, .text-body):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *) {
    color: var(--nt-text) !important;
}
/* Headings in the content: simple #maincontent-scoped rule (no fragile :not()
   chains — #maincontent already excludes hero/nav/footer). Crucially sets
   -webkit-text-fill-color/-stroke-color too: the theme's .section-title uses an
   outlined-text effect (transparent fill / text-stroke) that plain `color`
   cannot override, which is why the headings stayed dark. */
html[data-nt-theme="dark"] #maincontent :is(h1, h2, h3, h4, h5, h6, .section-title, .section-title span):not(.services .item *):not(.promo *) {
    color: var(--nt-text) !important;
    -webkit-text-fill-color: var(--nt-text) !important;
    -webkit-text-stroke-color: var(--nt-text) !important;
}

/* ── Links ────────────────────────────────────────────────────────────── */
/* Footer links (.main-footer, already a dark section) keep their own colour;
   the hero and the widget are excluded too. */
html[data-nt-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.main-footer *):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *) {
    color: var(--nt-link);
}
html[data-nt-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.main-footer *):not(header *):not(.header *):not(.banner-header *):not(.nt-a11y-widget *):hover {
    color: var(--nt-link-hover);
}
html[data-nt-theme="dark"] .nav-link:not(header *):not(.header *):not(.banner-header *) { color: var(--nt-text); }
/* Untermenü-Einträge (Leistungen-Dropdown): hell statt Link-Blau; der Hover
   behält die orange Markenfarbe des Themes. */
html[data-nt-theme="dark"] .dropdown-menu .dropdown-item { color: var(--nt-text); }

/* ── Borders / dividers ───────────────────────────────────────────────── */
html[data-nt-theme="dark"] hr,
html[data-nt-theme="dark"] .border,
html[data-nt-theme="dark"] .border-top,
html[data-nt-theme="dark"] .border-bottom,
html[data-nt-theme="dark"] .card,
html[data-nt-theme="dark"] .list-group-item,
html[data-nt-theme="dark"] .dropdown-menu,
html[data-nt-theme="dark"] .table,
html[data-nt-theme="dark"] .table td,
html[data-nt-theme="dark"] .table th {
    border-color: var(--nt-border) !important;
}

/* ── Form controls ────────────────────────────────────────────────────── */
html[data-nt-theme="dark"] .form-control,
html[data-nt-theme="dark"] .form-select,
html[data-nt-theme="dark"] input:not([type="submit"]):not([type="button"]),
html[data-nt-theme="dark"] textarea,
html[data-nt-theme="dark"] select {
    background-color: var(--nt-elev);
    color: var(--nt-text);
    border-color: var(--nt-border);
}
html[data-nt-theme="dark"] .form-control::placeholder,
html[data-nt-theme="dark"] textarea::placeholder { color: #8b909a; }

/* ── Kontaktformular (.form-container) ────────────────────────────────────
   Das Theme definiert die --nt-form-*-Variablen lokal AUF .form-container
   (nicht auf :root), daher hier ebenfalls auf .form-container überschreiben —
   sonst bleiben Labels (#203040) und Rahmen im Dark-Mode dunkel. Zusätzlich
   sind Karten-Hintergrund (weißer Verlauf) und die Einwilligungs-Box (#fff)
   fest verdrahtet und werden explizit abgedunkelt. */
html[data-nt-theme="dark"] .form-container {
    --nt-form-bg: #1d2027;
    --nt-form-border: #3a3b42;
    --nt-form-text: #e7e8ec;
    --nt-form-focus: #6fa8ff;
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5) !important;
}
html[data-nt-theme="dark"] .form-container :is(.form-control, .form-select, textarea, select, input:not([type="submit"]):not([type="button"])),
html[data-nt-theme="dark"] .form-container :is(.form-control, .form-select, textarea, select):focus {
    background-color: var(--nt-elev) !important;
    color: var(--nt-text) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .form-container .form-check {
    background: var(--nt-elev) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .form-container :is(.form-label, .form-check-label) {
    color: var(--nt-text) !important;
}

/* ── Buttons: keep the brand orange; darken neutral/light variants ──────── */
html[data-nt-theme="dark"] .btn-light,
html[data-nt-theme="dark"] .btn-white,
html[data-nt-theme="dark"] .btn-outline-dark,
html[data-nt-theme="dark"] .btn-secondary {
    background-color: var(--nt-elev);
    color: var(--nt-text);
    border-color: var(--nt-border);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
html[data-nt-theme="dark"] .table { color: var(--nt-text); }
html[data-nt-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--nt-text);
}

/* Slightly dim content images so they don't glare on the dark canvas. The hero
   slider and the widget are excluded. */
html[data-nt-theme="dark"] img:not(.nt-a11y-widget img):not(header *):not(.header *):not(.banner-header *) { filter: brightness(0.92); }

/* ── Site-specific components in dark mode ────────────────────────────── */

/* Sticky header (.nav-scroll) is white by default → make it dark. The logo swap
   is handled in custom.js (light logo kept in dark mode); here only the bar
   background and the nav links change. */
html[data-nt-theme="dark"] .nav-scroll {
    background: var(--nt-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}
html[data-nt-theme="dark"] .nav-scroll .navbar-nav .nav-link,
html[data-nt-theme="dark"] .nav-scroll .navbar-nav .active > .nav-link {
    color: var(--nt-text) !important;
}

/* FAQ: the answer panel (.active-block) is #f7f7f7 → dark surface (handled in the
   surfaces block); the orange question button (.acc-btn) keeps its colour. Make
   sure the answer text is light. */
html[data-nt-theme="dark"] .accordion-box .block.active-block,
html[data-nt-theme="dark"] .accordion-box .block .acc-content,
html[data-nt-theme="dark"] .accordion-box .block .content {
    background-color: var(--nt-surface) !important;
}
/* Die eigentliche Antwortfläche ist .content (background:#f7f7f7; color:#888),
   NICHT das transparente .acc-content. */
html[data-nt-theme="dark"] .accordion-box .block .acc-content,
html[data-nt-theme="dark"] .accordion-box .block .acc-content *,
html[data-nt-theme="dark"] .accordion-box .block .content,
html[data-nt-theme="dark"] .accordion-box .block .content * {
    color: var(--nt-text) !important;
}

/* Featured Boxes (ContentBlock): die Karten sind im Theme fest background:#FFF
   und stehen nicht in der Surfaces-Liste → im Dark-Mode weiß & unleserlich.
   Karte abdunkeln, Text aufhellen; der orange Icon-Kreis (.icon-featured /
   .featured-box-primary) bleibt als Markenakzent unverändert. */
html[data-nt-theme="dark"] .featured-box,
html[data-nt-theme="dark"] .featured-box .box-content,
html[data-nt-theme="dark"] .featured-boxes-flat .featured-box .box-content {
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .featured-box :is(h1, h2, h3, h4, h5, h6, p, span, li, a):not(.icon-featured):not(.icon-featured *) {
    color: var(--nt-text) !important;
    -webkit-text-fill-color: var(--nt-text) !important;
}

/* Pricing-Tabelle (ContentBlock „Offer"): der Karten-Body ist .price .item
   (background:#fff), Überschriften/Features sind fest dunkel (#1b1b1b/#888).
   Karte abdunkeln, Texte aufhellen; der Preis (.value p) bleibt orange, ebenso
   der orange Rahmen des „Anfragen"-Buttons — nur dessen Label wird hell. */
html[data-nt-theme="dark"] .price .item {
    background: var(--nt-surface) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}
html[data-nt-theme="dark"] .price .item .type:after {
    background: var(--nt-surface) !important;
    border-color: var(--nt-border) !important;
}
html[data-nt-theme="dark"] .price .item :is(.type h5, .value .title, .feat li) {
    color: var(--nt-text) !important;
}
html[data-nt-theme="dark"] .price .item .btn-curve {
    color: var(--nt-text) !important;
}

/* „Clients"-Sektion (Logo-Leiste): fest #f7f7f7 → dunkel. */
html[data-nt-theme="dark"] .clients {
    background: var(--nt-surface) !important;
}

/* Service section & Promo box keep their original design (orange / light) — they
   are excluded from the surface and text rules above, so nothing to add here.
   This comment documents the intent. */

/* Seiten-Preloader / Überblend-Effekt: im Dark-Mode dunkel statt weiß, damit
   der Seitenwechsel nicht kurz weiß aufblitzt. Das Attribut wird zusätzlich früh
   (vor dem ersten Paint) per Inline-Script im Set gesetzt, siehe nt-ai. */
html[data-nt-theme="dark"] #preloader,
html[data-nt-theme="dark"] .preloader-bg,
html[data-nt-theme="dark"] .preloader {
    background-color: var(--nt-bg) !important;
}