/**
 * HIT Theme – Grundgerüst
 *
 * Alles, was jede Seite braucht: Variablen, sanfte Zurücksetzung, Raster,
 * Kopf mit Menü, Fuss, Zugänglichkeit, Wartungsseite. Die Gestaltung von
 * Beiträgen, Kommentaren und Formularen liegt in content.css und lässt sich
 * unter „Design → HIT Theme → Website" abschalten.
 *
 * Grundsatz: geringe Spezifität. Elementor gestaltet Seiten über seine
 * Website-Einstellungen (.elementor-kit-N); die Regeln hier sollen darunter
 * bleiben, nicht dagegen anlaufen. Wo Elemente gestaltet werden, geschieht
 * das in :where(), das keine Spezifität mitbringt.
 *
 * Die Variablen lassen sich im eigenen CSS oder in einem Child-Theme
 * überschreiben; --hit-content-width setzt das Theme aus den Einstellungen.
 *
 * Schreibrichtung: Abstände und Positionen stehen als logische Eigenschaften
 * (margin-inline-start, inset-inline-end …), nicht als left/right. Damit
 * läuft dasselbe Stylesheet in Sprachen von rechts nach links richtig; was
 * sich so nicht ausdrücken lässt, steht in rtl.css.
 */

:root {
    --hit-content-width: 1200px;
    --hit-gutter: clamp(16px, 4vw, 40px);
    --hit-section-gap: clamp(32px, 6vw, 72px);

    /* Farben, helles Schema. Die dunklen Werte stehen im @supports-Block
       darunter als light-dark(): Browser, die das kennen (seit 2024),
       nehmen beide Werte; ältere bleiben bei diesen hier. */
    --hit-color-text: #1f2933;
    --hit-color-muted: #616e7c;
    --hit-color-bg: #ffffff;
    --hit-color-surface: #f5f7fa;
    --hit-color-border: #e4e7eb;
    --hit-color-primary: #2563eb;
    --hit-color-primary-dark: #1d4ed8;
    --hit-color-on-primary: #ffffff;
    --hit-color-footer-bg: #111827;
    --hit-color-footer-text: #d1d5db;
    --hit-color-footer-muted: #9ca3af;
    --hit-color-footer-strong: #ffffff;
    --hit-color-footer-line: rgba(255, 255, 255, 0.1);
    --hit-shadow-color: rgba(16, 24, 40, 0.06);

    --hit-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hit-font-heading: var(--hit-font-body);
    --hit-font-size: 1rem;
    --hit-line-height: 1.6;
    --hit-heading-weight: 700;
    --hit-heading-transform: none;

    --hit-radius: 8px;
    --hit-button-transform: none;
    --hit-logo-height: 64px;
    --hit-header-height: 76px;
    --hit-shadow: 0 1px 2px var(--hit-shadow-color), 0 6px 20px var(--hit-shadow-color);
    --hit-transition: 0.18s ease;
}

/* -------------------------------------------------------------- Farbschema */

/*
 * Hell und dunkel in einer Zeile je Farbe. Welche Seite gilt, entscheidet
 * color-scheme auf <html>: "light dark" folgt dem System, "light" und "dark"
 * legen es fest – gesetzt über data-hit-scheme (Frontend\ColorScheme).
 * Ein Child-Theme ändert eine Farbe für beide Schemata mit einer Zeile:
 *
 *     :root { --hit-color-primary: light-dark(#0f766e, #5eead4); }
 */
@supports (color: light-dark(#000, #fff)) {
    :root {
        --hit-color-text: light-dark(#1f2933, #e5e7eb);
        --hit-color-muted: light-dark(#616e7c, #9aa4b2);
        --hit-color-bg: light-dark(#ffffff, #0f172a);
        --hit-color-surface: light-dark(#f5f7fa, #1e293b);
        --hit-color-border: light-dark(#e4e7eb, #334155);
        --hit-color-primary: light-dark(#2563eb, #60a5fa);
        --hit-color-primary-dark: light-dark(#1d4ed8, #93c5fd);
        --hit-color-on-primary: light-dark(#ffffff, #0b1220);
        --hit-color-footer-bg: light-dark(#111827, #020617);
        --hit-color-footer-text: light-dark(#d1d5db, #cbd5e1);
        --hit-color-footer-muted: light-dark(#9ca3af, #94a3b8);
        --hit-color-footer-strong: light-dark(#ffffff, #f8fafc);
        --hit-color-footer-line: light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.08));
        --hit-shadow-color: light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.45));
    }
}

:root {
    color-scheme: light dark;
}

:root[data-hit-scheme="light"] {
    color-scheme: light;
}

:root[data-hit-scheme="dark"] {
    color-scheme: dark;
}

/* Elemente, die nur in einem Schema erscheinen sollen (etwa zwei Logos) */
:root[data-hit-scheme="dark"] .hit-light-only,
:root[data-hit-scheme="light"] .hit-dark-only {
    display: none !important;
}

/* "auto" ohne JavaScript: das System entscheidet */
@media (prefers-color-scheme: dark) {
    :root:not([data-hit-scheme]) .hit-light-only {
        display: none !important;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-hit-scheme]) .hit-dark-only {
        display: none !important;
    }
}

/* Der Umschalter (Frontend\ColorScheme::toggle()) */
.mode-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hit-color-border);
    border-radius: 50%;
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    cursor: pointer;
    transition: background-color var(--hit-transition), border-color var(--hit-transition), color var(--hit-transition);
}

.mode-toggle:hover,
.mode-toggle:focus {
    border-color: var(--hit-color-primary);
    color: var(--hit-color-primary);
}

.mode-toggle__icon {
    display: block;
    width: 20px;
    height: 20px;
}

/* Gezeigt wird das Symbol des Schemas, zu dem gewechselt wird */
.mode-toggle__icon--sun {
    display: none;
}

:root[data-hit-scheme="dark"] .mode-toggle__icon--sun {
    display: block;
}

:root[data-hit-scheme="dark"] .mode-toggle__icon--moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-hit-scheme]) .mode-toggle__icon--sun {
        display: block;
    }

    :root:not([data-hit-scheme]) .mode-toggle__icon--moon {
        display: none;
    }
}

.mode-toggle--floating {
    position: fixed;
    inset-inline-start: 20px;
    bottom: 20px;
    z-index: 90;
    width: 44px;
    height: 44px;
    box-shadow: var(--hit-shadow);
}

/* Bilder und Einbettungen im dunklen Schema leicht abdunkeln */
:root[data-hit-scheme="dark"] .entry-content img,
:root[data-hit-scheme="dark"] .entry-content iframe {
    filter: brightness(0.92);
}

/* ------------------------------------------------------------ Zurücksetzung */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Sprungmarken landen unter dem feststehenden Kopf (Wert setzt theme.js) */
    scroll-padding-top: var(--hit-scroll-offset, 0px);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    font-family: var(--hit-font-body);
    font-size: var(--hit-font-size);
    line-height: var(--hit-line-height);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

:where(img, video, svg, iframe, embed, object) {
    max-width: 100%;
}

:where(img, video) {
    height: auto;
}

:where(a) {
    color: var(--hit-color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

:where(a:hover, a:focus) {
    color: var(--hit-color-primary-dark);
}

:focus-visible {
    outline: 2px solid var(--hit-color-primary);
    outline-offset: 2px;
}

/* -------------------------------------------------------------- Zugänglichkeit */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    border: 0;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    position: absolute !important;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 100000;
    display: block;
    width: auto;
    height: auto;
    padding: 12px 20px;
    clip: auto !important;
    clip-path: none;
    border-radius: var(--hit-radius);
    background: var(--hit-color-bg);
    color: var(--hit-color-primary);
    box-shadow: var(--hit-shadow);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

/* -------------------------------------------------------------------- Raster */

.container,
.site-main.container {
    width: 100%;
    max-width: calc(var(--hit-content-width) + 2 * var(--hit-gutter));
    margin-inline: auto;
    padding-inline: var(--hit-gutter);
}

/* Gerahmt: die ganze Website als Kasten auf der Flächenfarbe */
.is-boxed {
    background: var(--hit-color-surface);
}

.is-boxed .site {
    max-width: calc(var(--hit-content-width) + 2 * var(--hit-gutter));
    margin-inline: auto;
    background: var(--hit-color-bg);
    box-shadow: var(--hit-shadow);
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1 0 auto;
}

.site-main {
    padding-top: var(--hit-section-gap);
    padding-bottom: var(--hit-section-gap);
}

/* Elementor-Vorlagen als Kopf/Fuss brauchen keinen Aussenabstand. */
.hit-location {
    width: 100%;
}

/* Seitenleiste: zwei Spalten ab Tablet-Breite */
.has-sidebar .site-main.container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hit-section-gap);
}

.has-sidebar .site-main.container > .breadcrumbs,
.has-sidebar .site-main.container > .page-header {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .has-sidebar .site-main.container {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }

    .has-sidebar-left .site-main.container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .has-sidebar-left .site-main.container > .content-area {
        order: 2;
    }
}

/* Seiten aus Elementor mit Layout „Volle Breite" laufen ohne Begrenzung. */
.elementor-template-full-width .site-main,
.site-main--full-width .entry-content,
.site-main--blank {
    max-width: none;
    padding-inline: 0;
}

.site-main--full-width {
    padding-top: 0;
    padding-bottom: 0;
}

.site-main--full-width .page-header {
    max-width: var(--hit-content-width);
    margin: var(--hit-section-gap) auto 0;
    padding: 0 var(--hit-gutter);
}

/* --------------------------------------------------------------- Obere Leiste */

/* Unter dem Kopf im Stapel: das Off-Canvas-Menü des Kopfs liegt darüber */
.topbar {
    position: relative;
    z-index: 49;
    font-size: 0.875rem;
}

.topbar--dark {
    background: var(--hit-color-footer-bg);
    color: var(--hit-color-footer-text);
}

.topbar--light {
    background: var(--hit-color-surface);
    color: var(--hit-color-text);
    border-bottom: 1px solid var(--hit-color-border);
}

.topbar--primary {
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
}

.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 24px;
    min-height: 36px;
    padding-block: 6px;
}

.topbar__contact,
.topbar__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
}

.topbar a {
    color: inherit;
    text-decoration: none;
}

.topbar a:hover,
.topbar a:focus {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- Kopf */

.site-header {
    position: relative;
    z-index: 50;
    background: var(--hit-color-bg);
    border-bottom: 1px solid var(--hit-color-border);
}

/* Transparent: der Kopf liegt über dem Anfang der Seite. Er bleibt im
   Fluss und zieht sich um seine eigene Höhe nach oben, damit der Inhalt
   darunter beginnt – so bleibt auch „feststehend" möglich. */
.has-transparent-header .site-header {
    margin-bottom: calc(-1 * var(--hit-header-height));
    background: transparent;
    border-bottom-color: transparent;
}

.has-transparent-header .site-header.is-scrolled {
    background: var(--hit-color-bg);
    border-bottom-color: var(--hit-color-border);
}

.transparent-header-light .site-header:not(.is-scrolled) {
    --hit-color-text: #ffffff;
    --hit-color-muted: rgba(255, 255, 255, 0.75);
    --hit-color-surface: rgba(255, 255, 255, 0.14);
    --hit-color-border: rgba(255, 255, 255, 0.35);
    --hit-color-bg: transparent;
    color: #ffffff;
}

.transparent-header-light .site-header:not(.is-scrolled) .main-navigation a:hover,
.transparent-header-light .site-header:not(.is-scrolled) .main-navigation a:focus {
    color: #ffffff;
}

.transparent-header-light .site-header:not(.is-scrolled) .header-button.button--outline {
    border-color: #ffffff;
    color: #ffffff;
}

.transparent-header-light .site-header:not(.is-scrolled) .header-search__toggle,
.transparent-header-light .site-header:not(.is-scrolled) .mode-toggle,
.transparent-header-light .site-header:not(.is-scrolled) .menu-toggle {
    background: transparent;
}

.has-transparent-header .page-hero__inner,
.has-transparent-header .site-main--full-width,
.has-transparent-header .hit-location--header + #content > .site-main {
    padding-top: calc(var(--hit-section-gap) + var(--hit-header-height));
}

.has-sticky-header .site-header {
    position: sticky;
    top: 0;
}

.admin-bar.has-sticky-header .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar.has-sticky-header .site-header {
        top: 46px;
    }
}

/* Unter 600 Pixeln steht die Werkzeugleiste von WordPress nicht mehr fest
   (admin-bar.css: position: absolute) – sie scrollt mit der Seite weg.
   Bliebe der Kopf auf 46 Pixeln stehen, klaffte darüber ein leerer
   Streifen. */
@media (max-width: 600px) {
    .admin-bar.has-sticky-header .site-header {
        top: 0;
    }
}

.has-sticky-header .site-header.is-scrolled {
    box-shadow: var(--hit-shadow);
}

/* Beim Scrollen: schrumpfen oder nach oben aus dem Bild fahren. Beides
   gibt es nur mit feststehendem Kopf – sonst scrollt er ohnehin weg. */
.site-header--scroll-hide,
.site-header--scroll-shrink {
    transition: transform 0.25s ease, box-shadow 0.2s ease;
}

.site-header--scroll-hide.is-hidden {
    transform: translateY(-100%);
}

/* Der feststehende Kopf sitzt unter der Werkzeugleiste – er muss deren Höhe
   mitfahren, sonst bleibt ein Streifen von ihm sichtbar. Die Leiste ist auf
   dem Handy höher und unter 600 Pixeln gar nicht mehr feststehend. */
.admin-bar .site-header--scroll-hide.is-hidden {
    transform: translateY(calc(-100% - 32px));
}

@media (max-width: 782px) {
    .admin-bar .site-header--scroll-hide.is-hidden {
        transform: translateY(calc(-100% - 46px));
    }
}

@media (max-width: 600px) {
    .admin-bar .site-header--scroll-hide.is-hidden {
        transform: translateY(-100%);
    }
}

.site-header--scroll-shrink .site-header__inner,
.site-header--scroll-shrink .site-logo img,
.site-header--scroll-shrink .custom-logo {
    transition: min-height 0.2s ease, padding 0.2s ease, max-height 0.2s ease;
}

.site-header--scroll-shrink.is-compact {
    --hit-logo-height: var(--hit-logo-height-compact, 48px);
}

.site-header--scroll-shrink.is-compact .site-header__inner {
    min-height: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .site-header--scroll-hide,
    .site-header--scroll-shrink,
    .site-header--scroll-shrink .site-header__inner,
    .site-header--scroll-shrink .site-logo img,
    .site-header--scroll-shrink .custom-logo {
        transition: none;
    }
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    min-height: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.site-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.site-logo img,
.custom-logo {
    display: block;
    max-height: var(--hit-logo-height);
    width: auto;
}

.site-title {
    margin: 0;
    font-family: var(--hit-font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

.site-description {
    margin: 2px 0 0;
    color: var(--hit-color-muted);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------- Menü */

.main-navigation {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Suche, Farbschema, Kopf-Knopf, Menü-Knopf */
.main-navigation__tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

/* Anordnungen des Kopfs */
.site-header--centered .site-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 8px 32px;
    text-align: center;
}

.site-header--centered .site-branding {
    align-items: center;
}

.site-header--centered .main-navigation,
.site-header--stacked .main-navigation {
    flex: 1 0 100%;
    justify-content: center;
}

.site-header--stacked .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px 32px;
}

.site-header--stacked .main-navigation {
    justify-content: flex-start;
}

/* Kopf-Knopf – eigenständig gestaltet, damit er auch ohne content.css passt */
.header-button {
    display: inline-flex;
    align-items: center;
    padding: 0.55em 1.1em;
    border: 1px solid var(--hit-color-primary);
    border-radius: var(--hit-radius);
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
    font-weight: 600;
    text-decoration: none;
    text-transform: var(--hit-button-transform);
    white-space: nowrap;
    transition: background-color var(--hit-transition), border-color var(--hit-transition), color var(--hit-transition);
}

.header-button:hover,
.header-button:focus {
    border-color: var(--hit-color-primary-dark);
    background: var(--hit-color-primary-dark);
    color: var(--hit-color-on-primary);
}

.header-button.button--outline {
    background: transparent;
    color: var(--hit-color-primary);
}

.header-button.button--outline:hover,
.header-button.button--outline:focus {
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
}

/* Suche im Kopf */
.header-search {
    position: relative;
}

.header-search__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hit-color-border);
    border-radius: 50%;
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    cursor: pointer;
}

.header-search__toggle:hover,
.header-search__toggle:focus,
.header-search__toggle[aria-expanded="true"] {
    border-color: var(--hit-color-primary);
    color: var(--hit-color-primary);
}

.header-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 70;
    width: min(360px, calc(100vw - 2 * var(--hit-gutter)));
    padding: 12px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    background: var(--hit-color-bg);
    box-shadow: var(--hit-shadow);
}

.header-search__panel[hidden] {
    display: none;
}

.header-search__panel .search-form {
    max-width: none;
}

.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 10px 14px;
    color: var(--hit-color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--hit-radius);
    transition: background-color var(--hit-transition), color var(--hit-transition);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
    color: var(--hit-color-primary);
    background: var(--hit-color-surface);
}

.main-navigation .sub-menu a,
.main-navigation .children a {
    font-weight: 400;
}

/* Umschalter für Untermenüs (wird per Skript eingefügt) */
.submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--hit-radius);
}

.submenu-toggle::before {
    content: "";
    width: 8px;
    height: 8px;
    /* Zwei Kanten eines Quadrats, um 45 Grad gedreht, ergeben den Winkel
       nach unten – in beiden Schreibrichtungen gleich. */
    border-right: 2px solid currentColor; /* rtl-ok */
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--hit-transition);
}

.submenu-toggle[aria-expanded="true"]::before {
    transform: translateY(2px) rotate(225deg);
}

/* Mobil: Menü eingeklappt, Umschalter sichtbar */
.menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.menu-toggle__bars {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}

.menu-toggle__bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--hit-transition), opacity var(--hit-transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 899px) {
    .main-navigation {
        flex: 1 0 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .main-navigation__tools {
        flex: 1 0 100%;
        justify-content: flex-end;
    }

    .site-header--stacked .main-navigation__tools,
    .site-header--stacked .main-navigation {
        justify-content: flex-start;
    }

    .site-header--centered .main-navigation__tools,
    .site-header--centered .main-navigation {
        justify-content: center;
    }

    .header-button {
        font-size: 0.875rem;
    }

    /* Aufklappen unter dem Kopf */
    .main-navigation__panel {
        display: none;
        flex: 1 0 100%;
        margin-top: 8px;
        padding: 8px 0 4px;
        border-top: 1px solid var(--hit-color-border);
    }

    .main-navigation.is-open .main-navigation__panel {
        display: block;
    }

    /* Seitlich einfahren (Off-Canvas) */
    .main-navigation--offcanvas .main-navigation__panel {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        z-index: 95;
        display: block;
        width: min(320px, 85vw);
        margin: 0;
        padding: 64px 16px 24px;
        border: 0;
        overflow-y: auto;
        background: var(--hit-color-bg);
        box-shadow: var(--hit-shadow);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--hit-transition), visibility var(--hit-transition);
    }

    .main-navigation--offcanvas.is-open .main-navigation__panel {
        transform: none;
        visibility: visible;
    }

    .menu-close {
        position: absolute;
        top: 12px;
        inset-inline-end: 12px;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--hit-color-border);
        border-radius: 50%;
        background: var(--hit-color-bg);
        color: var(--hit-color-text);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .is-offcanvas-open {
        overflow: hidden;
    }

    /* Der abgedunkelte Hintergrund gehört zum Menü selbst: der Kopf bildet
       einen eigenen Stapel (z-index), ein Hintergrund am body läge darüber. */
    .main-navigation--offcanvas.is-open::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 94;
        background: rgba(15, 23, 42, 0.45);
    }

    .main-navigation li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-navigation li > a {
        flex: 1 1 auto;
    }

    .main-navigation .sub-menu,
    .main-navigation .children {
        display: none;
        flex: 1 0 100%;
        padding-inline-start: 16px;
    }

    .main-navigation li.is-open > .sub-menu,
    .main-navigation li.is-open > .children {
        display: block;
    }
}

@media (min-width: 900px) {
    .menu-toggle,
    .menu-close {
        display: none;
    }

    /* Menü zuerst, dann Suche, Farbschema und Kopf-Knopf */
    .main-navigation__panel {
        order: 1;
    }

    .main-navigation__tools {
        order: 2;
        margin-inline-start: 8px;
    }

    .main-navigation .primary-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px;
    }

    /* Eintrag und Umschalter nebeneinander – auch in den Untermenüs */
    .main-navigation li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-navigation li > a {
        flex: 1 1 auto;
    }

    .main-navigation .primary-menu > li > .submenu-toggle {
        width: 24px;
        margin-inline-start: -8px;
    }

    /* Der Umschalter des Farbschemas steht bei den Werkzeugen hinter dem Menü */
    .main-navigation .mode-toggle {
        margin-inline-start: 4px;
    }

    .main-navigation .sub-menu,
    .main-navigation .children {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 60;
        min-width: 220px;
        padding: 6px;
        border: 1px solid var(--hit-color-border);
        border-radius: var(--hit-radius);
        background: var(--hit-color-bg);
        box-shadow: var(--hit-shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--hit-transition), transform var(--hit-transition), visibility var(--hit-transition);
    }

    .main-navigation .sub-menu .sub-menu,
    .main-navigation .children .children {
        top: -6px;
        inset-inline-start: 100%;
    }

    .main-navigation li:hover > .sub-menu,
    .main-navigation li:focus-within > .sub-menu,
    .main-navigation li.is-open > .sub-menu,
    .main-navigation li:hover > .children,
    .main-navigation li:focus-within > .children,
    .main-navigation li.is-open > .children {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .main-navigation .primary-menu > li:last-child > .sub-menu {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}

/* ---------------------------------------------------------------------- Fuss */

/* ------------------------------------------------------- Aktionsband */

.cta-band {
    padding-block: clamp(32px, 5vw, 56px);
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
}

.cta-band--surface {
    background: var(--hit-color-surface);
    color: var(--hit-color-text);
    border-block: 1px solid var(--hit-color-border);
}

.cta-band--dark {
    background: var(--hit-color-footer-bg);
    color: var(--hit-color-footer-text);
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: center;
    justify-content: space-between;
}

.cta-band__body {
    flex: 1 1 320px;
}

.cta-band__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.25;
    color: inherit;
}

.cta-band__text {
    margin: 8px 0 0;
    color: inherit;
    opacity: 0.9;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Auf farbigem Grund kehren sich die Knöpfe um: heller Knopf, klare Schrift */
.cta-band--primary .button,
.cta-band--dark .button {
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    border-color: transparent;
}

.cta-band--primary .button:hover,
.cta-band--primary .button:focus,
.cta-band--dark .button:hover,
.cta-band--dark .button:focus {
    background: var(--hit-color-surface);
    color: var(--hit-color-text);
}

.cta-band--primary .button--outline,
.cta-band--dark .button--outline {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.cta-band--primary .button--outline:hover,
.cta-band--primary .button--outline:focus,
.cta-band--dark .button--outline:hover,
.cta-band--dark .button--outline:focus {
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    border-color: transparent;
}

.site-footer {
    margin-top: auto;
    background: var(--hit-color-footer-bg);
    color: var(--hit-color-footer-text);
}

/* Heller Fuss: die Fussfarben zeigen auf die Flächenfarben */
.site-footer--light {
    --hit-color-footer-bg: var(--hit-color-surface);
    --hit-color-footer-text: var(--hit-color-text);
    --hit-color-footer-muted: var(--hit-color-muted);
    --hit-color-footer-strong: var(--hit-color-text);
    --hit-color-footer-line: var(--hit-color-border);
    border-top: 1px solid var(--hit-color-border);
}

.site-footer a {
    color: inherit;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--hit-color-footer-strong);
}

.footer-widgets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 40px;
    padding: var(--hit-section-gap) 0 calc(var(--hit-section-gap) * 0.6);
}

/* Ab Tablet-Breite so viele Spalten, wie Bereiche Inhalt haben */
@media (min-width: 600px) {
    .footer-widgets--2,
    .footer-widgets--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-widgets--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .footer-widgets--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Eine Spalte doppelt so breit */
    .footer-widgets--2.footer-widgets--wide-first {
        grid-template-columns: 2fr 1fr;
    }

    .footer-widgets--2.footer-widgets--wide-last {
        grid-template-columns: 1fr 2fr;
    }

    .footer-widgets--3.footer-widgets--wide-first {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-widgets--3.footer-widgets--wide-last {
        grid-template-columns: 1fr 1fr 2fr;
    }

    .footer-widgets--4.footer-widgets--wide-first {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    .footer-widgets--4.footer-widgets--wide-last {
        grid-template-columns: 1fr 1fr 1fr 2fr;
    }
}

.footer-widgets .widget {
    margin: 0;
    font-size: 0.9375rem;
}

.footer-widgets .widget-title {
    margin: 0 0 12px;
    color: var(--hit-color-footer-strong);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-widgets ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-widgets li {
    margin: 0 0 8px;
}

.site-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0;
    border-top: 1px solid var(--hit-color-footer-line);
    color: var(--hit-color-footer-muted);
    font-size: 0.875rem;
}

.footer-widgets + .site-info {
    border-top-color: var(--hit-color-footer-line);
}

.site-info__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

.site-info .menu {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-info .menu a {
    text-decoration: none;
}

.site-info .menu a:hover,
.site-info .menu a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------ Social-Profile */

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-icons__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.15);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--hit-transition), color var(--hit-transition);
}

.social-icons__link:hover,
.social-icons__link:focus {
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
}

.social-icons__icon {
    width: 18px;
    height: 18px;
}

.social-icons__letter {
    font-size: 0.875rem;
    font-weight: 700;
}

.social-icons--topbar .social-icons__link {
    width: 28px;
    height: 28px;
}

.social-icons--topbar .social-icons__icon {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------- Kopfbild */

.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(240px, 42vh, 560px);
    background-color: var(--hit-color-footer-bg);
    background-position: center;
    background-size: cover;
    color: #ffffff;
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.1));
}

.page-hero__inner {
    position: relative;
    padding-block: var(--hit-section-gap);
}

.page-hero .page-header {
    margin: 0;
}

.page-hero .entry-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.15;
}

.page-hero .entry-meta,
.page-hero .entry-meta a {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------- Brotkrumen */

.breadcrumbs {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: var(--hit-color-muted);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    margin: 0 8px;
    opacity: 0.5;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    color: var(--hit-color-primary);
    text-decoration: underline;
}

/* ----------------------------------------------------------------- Nach oben */

.back-to-top {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
    font-size: 1.25rem;
    box-shadow: var(--hit-shadow);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--hit-transition), transform var(--hit-transition), background-color var(--hit-transition);
}

.back-to-top.is-visible {
    opacity: 1;
    transform: none;
}

.back-to-top:hover,
.back-to-top:focus {
    background: var(--hit-color-primary-dark);
}

.back-to-top[hidden] {
    display: none;
}

/* ------------------------------------------------------------- Wartungsseite */

.hit-maintenance {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.maintenance {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--hit-section-gap) var(--hit-gutter);
    background: var(--hit-color-surface);
    text-align: center;
}

.maintenance__inner {
    max-width: 560px;
}

.maintenance__logo img {
    max-height: 80px;
    width: auto;
    margin: 0 auto 32px;
}

.maintenance__site {
    margin: 0 0 32px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hit-color-muted);
}

.maintenance__title {
    margin: 0 0 16px;
    font-family: var(--hit-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.maintenance__text {
    color: var(--hit-color-muted);
    font-size: 1.0625rem;
}

/* ---------------------------------------------------------------------- Druck */

@media print {
    .topbar,
    .main-navigation,
    .header-search,
    .mode-toggle,
    .back-to-top,
    .footer-widgets,
    .footer-navigation,
    .breadcrumbs,
    .post-navigation,
    .posts-navigation,
    .navigation.pagination,
    .related-posts,
    .comments-area,
    .cta-band,
    .skip-link {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .site-header,
    .site-footer {
        background: transparent;
        color: inherit;
        border: 0;
        box-shadow: none;
        /* Ein ausgefahrener Kopf gehört trotzdem aufs Papier */
        transform: none;
    }

    .has-transparent-header .site-header {
        margin-bottom: 0;
    }

    .site-main {
        padding-block: 16px;
    }

    .entry-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}

/* ------------------------------------------------------------------ Elementor */

/* Der Elementor-Editor lädt die Seite in einem Rahmen; dort stört der
   feststehende Kopf nur. */
.elementor-editor-active .site-header {
    position: relative;
    top: auto;
}

/* Titel ausblenden (Elementor-Seiteneinstellung) – Rückfall, falls der
   PHP-Filter nicht greift. Elementor selbst zielt auf h1.entry-title. */
.elementor-page-title-hidden .page-header.entry-header {
    display: none;
}