/*
 * 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; }
}
/* 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;
}