/* =====================================================================
   LANWERKER – custom.css für Template tp_business (Astroid, Joomla 6)
   Fassung 13, 2026-10-17 (h2 ruhiger: 22–24 px statt 26–32 px; Fassung 12 war der verworfene Logo-Filter)

   Ablage im Template: templates/tp_business/css/custom.css
   Grundlage: LANWERKER Design System (Tokens Farben, Abstände, Ecken,
   Schatten, Bewegung). Schrift vorläufig Systemschrift, Tausch über
   --lw-font-display / --lw-font-body (eine Zeile je Rolle).

   Aufbau
   1. Tokens
   2. Bootstrap- und Astroid-Variablen auf Tokens umbiegen
   3. Grundtypografie
   4. Kopfbereich, Menü, Infoleiste
   5. Schaltflächen
   6. Karten (UIkit und eigene)
   7. Farbbänder, Fußzeile
   8. Hilfsklassen für Inhalte (lw-…)
   9. Bewegung
   10. Seitenrahmen und Abstände
   ===================================================================== */


/* 1. Tokens ----------------------------------------------------------- */
:root {
  /* Markenfarben (verbindlich) */
  --lw-blue:  #00305a;   /* Blau, PANTONE 540 C */
  --lw-green: #82bd00;   /* Grün, PANTONE 134-1-6 C */

  /* Abstufungen aus dem Design System */
  --lw-blue-50:  #eef4f9;
  --lw-blue-100: #dbe8f2;
  --lw-blue-200: #b3cce0;
  --lw-blue-500: #1a5c95;
  --lw-blue-600: #0a4576;
  --lw-blue-800: #002949;
  --lw-blue-900: #001c36;
  --lw-green-400: #9bce2e;
  --lw-green-600: #78ab00;
  --lw-green-700: #6a9a00;

  --lw-gray-50:  #f6f8fa;
  --lw-gray-100: #eceff2;
  --lw-gray-200: #dbe0e5;
  --lw-gray-300: #bcc4cc;
  --lw-gray-500: #737f8c;
  --lw-gray-800: #232f3f;

  /* Schrift – vorläufig Systemschrift, nichts wird von außen geladen */
  --lw-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lw-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lw-font-mono:    Consolas, ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Ecken: flach und kantig */
  --lw-radius-sm: 3px;
  --lw-radius-md: 5px;
  --lw-radius-lg: 8px;

  /* Schatten: weich, kühl, nie farbig */
  --lw-shadow-sm: 0 1px 3px rgba(13, 21, 32, .08), 0 1px 2px rgba(13, 21, 32, .04);
  --lw-shadow-md: 0 4px 12px rgba(13, 21, 32, .10);
  --lw-shadow-lg: 0 12px 28px rgba(13, 21, 32, .14);

  /* Bewegung: sachlich */
  --lw-ease: cubic-bezier(.2, 0, .2, 1);
  --lw-fast: 120ms;
  --lw-base: 200ms;

  /* Raster */
  --lw-container: 1200px;
  --lw-narrow: 760px;
}


/* 2. Bootstrap- und Astroid-Variablen -------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--lw-blue);
  --bs-primary-rgb: 0, 48, 90;
  --bs-secondary: var(--lw-green);
  --bs-secondary-rgb: 130, 189, 0;
  --bs-info: var(--lw-blue-500);
  --bs-info-rgb: 26, 92, 149;

  --bs-body-font-family: var(--lw-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--lw-gray-800);
  --bs-body-bg: #fff;
  --bs-heading-color: var(--lw-blue);
  --bs-font-monospace: var(--lw-font-mono);

  --bs-link-color: var(--lw-blue-600);
  --bs-link-color-rgb: 10, 69, 118;
  --bs-link-hover-color: var(--lw-green-700);
  --bs-link-hover-color-rgb: 106, 154, 0;

  --bs-border-color: var(--lw-gray-200);
  --bs-border-radius: var(--lw-radius-md);
  --bs-border-radius-sm: var(--lw-radius-sm);
  --bs-border-radius-lg: var(--lw-radius-lg);
  --bs-border-radius-xl: var(--lw-radius-lg);
  --bs-border-radius-pill: 999px;

  /* Astroid: Kopf und Menü */
  --as-header-bg: #fff;
  --as-stick-header-bg-color: rgba(255, 255, 255, .96);
  --as-main-menu-link-color: var(--lw-blue);
  --as-main-menu-link-hover-color: var(--lw-green-700);
  --as-main-menu-link-active-color: var(--lw-green-700);
  --as-stick-header-menu-link-color: var(--lw-blue);
  --as-stick-header-menu-link-hover-color: var(--lw-green-700);
  --as-stick-header-menu-link-active-color: var(--lw-green-700);
  --as-dropdown-bg-color: #fff;
  --as-dropdown-link-color: var(--lw-blue);
  --as-dropdown-menu-link-hover-color: var(--lw-green-700);
  --as-dropdown-menu-hover-bg-color: var(--lw-gray-50);
  --as-dropdown-menu-active-link-color: var(--lw-green-700);
  --as-mobile-menu-link-color: var(--lw-blue);
  --as-mobile-menu-active-link-color: var(--lw-green-700);
  --as-mobilemenu-menu-link-color: var(--lw-blue);
  --as-mobilemenu-menu-active-link-color: var(--lw-green-700);
  --as-contact-info-icon-color: var(--lw-green);
}


/* 3. Grundtypografie -------------------------------------------------- */
/* Astroid schreibt seine Typografie-Einstellungen als .astroid-framework …
   bzw. für den Fließtext als body.astroid-framework (höhere Gewichtung).
   Deshalb tragen die folgenden Regeln diese Klasse mit. */
body, .astroid-framework, body.astroid-framework {
  font-family: var(--lw-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lw-gray-800);
  -webkit-font-smoothing: antialiased;
}
.astroid-framework small { font-family: var(--lw-font-body); color: inherit; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.astroid-framework h1, .astroid-framework h2, .astroid-framework h3,
.astroid-framework h4, .astroid-framework h5, .astroid-framework h6,
.astroid-framework .h1, .astroid-framework .h2, .astroid-framework .h3, .astroid-framework .h4,
.uk-card-title, .module-title, .uk-heading-medium, .uk-heading-large {
  font-family: var(--lw-font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--lw-blue);
  text-wrap: balance;
}
h1, .h1, .astroid-framework h1, .astroid-framework .h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
/* Fassung 13: h2 ruhiger (vorher clamp(1.625rem, 3vw, 2rem) = 26–32 px). Untergrenze 22 px,
   damit sie auch auf dem Handy über den h3 (20 px) bleibt. */
h2, .h2, .astroid-framework h2, .astroid-framework .h2 { font-size: clamp(1.375rem, 2vw, 1.5rem); }
h3, .h3, .astroid-framework h3, .astroid-framework .h3 { font-size: 1.25rem; }   /* Fassung 13: wie in Karten und Beiträgen, nie größer als h2 */
h4, .h4, .astroid-framework h4, .astroid-framework .h4 { font-size: 1.25rem; }

/* Überschriften auf dunklem Grund */
.astroid-framework .bg-primary h1, .astroid-framework .bg-primary h2, .astroid-framework .bg-primary h3,
.astroid-framework .lw-band h1, .astroid-framework .lw-band h2, .astroid-framework .lw-band h3,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.uk-light h1, .uk-light h2, .uk-light h3,
.lw-band h1, .lw-band h2, .lw-band h3 { color: #fff; }

p { text-wrap: pretty; }

a { transition: color var(--lw-fast) var(--lw-ease); }

/* Links im Beitragstext: Astroid färbt sie fast schwarz und setzt
   a { text-decoration: none !important }, daher hier
   ausdrücklich blau und unterstrichen, damit man sie als Link erkennt. */
.astroid-framework .astroid-article-text a:not(.btn):not(.uk-button),
.astroid-framework .com-content-article__body a:not(.btn):not(.uk-button) {
  color: var(--lw-blue-600);
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.astroid-framework .astroid-article-text a:not(.btn):not(.uk-button):hover,
.astroid-framework .com-content-article__body a:not(.btn):not(.uk-button):hover {
  color: var(--lw-green-700);
}
.astroid-framework .lw-band a:not(.btn):not(.uk-button) { color: #fff; }

code, kbd, pre, samp, .lw-mono { font-family: var(--lw-font-mono); font-size: .92em; }

/* Fließtext nicht zu breit */
.item-page [itemprop="articleBody"],
.com-content-article__body { max-width: var(--lw-narrow); }


/* 4. Kopfbereich, Menü, Infoleiste ----------------------------------- */
.astroid-header-section {
  background: #fff;
  border-bottom: 1px solid var(--lw-gray-200);
}

.astroid-framework .astroid-nav > li > .as-menu-item,
.astroid-header-section .nav-link,
.astroid-nav .nav-link,
.megamenu-item-link {
  font-family: var(--lw-font-display);
  font-weight: 600;
  font-size: .9375rem;
  text-transform: none;
  letter-spacing: 0;
}

/* aktiver Menüpunkt: dünne grüne Linie statt Farbfläche */
.astroid-nav > li > .nav-link.active {
  box-shadow: inset 0 -3px 0 var(--lw-green);
}

/* Infoleiste ganz oben (Telefon, Mail, Zeiten) */
section.astroid-section.bg-primary:first-child,
.astroid-wrapper > .astroid-section.bg-primary:first-child {
  background: var(--lw-blue-900) !important;
  font-size: .875rem;
}
.astroid-wrapper > .astroid-section.bg-primary:first-child a { color: #fff; }
.astroid-wrapper > .astroid-section.bg-primary:first-child a:hover { color: var(--lw-green-400); }
.astroid-wrapper > .astroid-section.bg-primary:first-child i { color: var(--lw-green); }

/* Dropdown */
.megamenu-container, .nav-submenu, .dropdown-menu {
  border: 1px solid var(--lw-gray-200);
  border-top: 3px solid var(--lw-green);
  border-radius: 0 0 var(--lw-radius-lg) var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-md);
}
/* Spalten im Megamenü sind ebenfalls .nav-submenu: dort graue Box mit
   Haarlinie, aber ohne grüne Kante, sonst wird es zu grün */
.megamenu-container .megamenu-submenu-level-1 {
  border: 1px solid var(--lw-gray-200);
  border-radius: var(--lw-radius-lg);
  box-shadow: none;
  background: #fff;
  height: 100%;
}
.megamenu-container .nav-submenu-static {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Suchfeld */
.astroid-header-section input[type="search"],
.astroid-header-section input[type="text"],
.mod-finder input {
  border: 1px solid var(--lw-gray-300);
  border-radius: var(--lw-radius-md);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: var(--lw-green) !important;
  box-shadow: 0 0 0 3px rgba(130, 189, 0, .35) !important;
  outline: 0;
}


/* 5. Schaltflächen ---------------------------------------------------- */
.btn, .uk-button, .astroid-framework .btn, .astroid-framework .uk-button {
  font-family: var(--lw-font-display);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: var(--lw-radius-md) !important;
  transition: background-color var(--lw-fast) var(--lw-ease),
              border-color var(--lw-fast) var(--lw-ease),
              color var(--lw-fast) var(--lw-ease);
}
.btn:active, .uk-button:active { transform: translateY(1px); }

/* Standard-Aktion: Blau */
.btn-primary, .uk-button-primary {
  --bs-btn-bg: var(--lw-blue);
  --bs-btn-border-color: var(--lw-blue);
  --bs-btn-hover-bg: var(--lw-blue-800);
  --bs-btn-hover-border-color: var(--lw-blue-800);
  --bs-btn-active-bg: var(--lw-blue-900);
  --bs-btn-active-border-color: var(--lw-blue-900);
  background-color: var(--lw-blue);
  border-color: var(--lw-blue);
  color: #fff !important;
}
.btn-primary:hover, .uk-button-primary:hover {
  background-color: var(--lw-blue-800);
  border-color: var(--lw-blue-800);
}

/* Lauteste Aktion: Grün mit dunkler Schrift, sparsam einsetzen */
.btn-secondary, .btn-accent, .lw-btn-accent, .uk-button-secondary {
  --bs-btn-bg: var(--lw-green);
  --bs-btn-border-color: var(--lw-green);
  --bs-btn-hover-bg: var(--lw-green-600);
  --bs-btn-hover-border-color: var(--lw-green-600);
  background-color: var(--lw-green);
  border-color: var(--lw-green);
  color: var(--lw-blue-900) !important;
}
.btn-secondary:hover, .btn-accent:hover, .lw-btn-accent:hover, .uk-button-secondary:hover {
  background-color: var(--lw-green-600);
  border-color: var(--lw-green-600);
}

/* Zurückhaltend: Rahmen */
.btn-outline-primary, .uk-button-default {
  background: transparent;
  color: var(--lw-blue) !important;
  border: 1px solid var(--lw-gray-300);
}
.btn-outline-primary:hover, .uk-button-default:hover {
  background: var(--lw-blue-50);
  border-color: var(--lw-blue);
}

/* Schaltflächen auf dunklem Grund */
.bg-primary .uk-button-default, .lw-band .uk-button-default,
.bg-primary .btn-outline-primary, .lw-band .btn-outline-primary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35);
}
.bg-primary .uk-button-default:hover, .lw-band .uk-button-default:hover,
.bg-primary .btn-outline-primary:hover, .lw-band .btn-outline-primary:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
}

/* Nach-oben-Knopf */
#astroid-backtotop {
  background: var(--lw-blue) !important;
  border-radius: var(--lw-radius-md) !important;
}
#astroid-backtotop:hover { background: var(--lw-green) !important; color: var(--lw-blue-900) !important; }


/* 6. Karten ----------------------------------------------------------- */
/* Erkennungsmerkmal: 3 px grüne Oberkante */
.uk-card-default,
.uk-card-white,
.card,
.lw-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--lw-gray-200);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--lw-base) var(--lw-ease),
              border-color var(--lw-base) var(--lw-ease);
}
.uk-card-default::before,
.uk-card-white::before,
.card::before,
.lw-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lw-green);
  z-index: 1;
}
a.uk-card-default:hover, a.lw-card:hover,
.uk-card-hover:hover, .lw-card-hover:hover {
  box-shadow: var(--lw-shadow-lg);
  border-color: var(--lw-gray-300);
}
.lw-card { padding: 1.5rem; }
.lw-card > :last-child { margin-bottom: 0; }

/* Akkordeon */
.uk-accordion-title {
  font-family: var(--lw-font-display);
  font-weight: 600;
  color: var(--lw-blue);
}
.uk-accordion > li { border-top: 1px solid var(--lw-gray-200); padding-top: 1rem; }

/* Punkte-Navigation an Slidern */
.uk-dotnav > * > * { border-color: var(--lw-gray-300); }
.uk-dotnav > .uk-active > * { background: var(--lw-green); border-color: var(--lw-green); }


/* 7. Farbbänder, Fußzeile -------------------------------------------- */
.bg-primary { background-color: var(--lw-blue) !important; }

.astroid-footer-section,
.astroid-footer-section.bg-primary {
  background: var(--lw-blue-900) !important;
  color: var(--lw-blue-100);
  font-size: .875rem;
  border-top: 3px solid var(--lw-green);
}
.astroid-footer-section a { color: #fff; }
.astroid-footer-section a:hover { color: var(--lw-green-400); }


/* 8. Hilfsklassen für Inhalte ---------------------------------------- */
/* Vorspann in Versalien über Überschriften, z. B.
   <p class="lw-eyebrow">IT-Systemhaus · Gießen</p> */
.lw-eyebrow {
  display: block;
  margin: 0 0 .5rem;
  font-family: var(--lw-font-display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lw-green-700);
}
.bg-primary .lw-eyebrow, .lw-band .lw-eyebrow, .lw-hero .lw-eyebrow { color: var(--lw-green-400); }

/* kurze grüne Akzentlinie */
.lw-rule {
  width: 48px;
  height: 3px;
  margin: 1rem 0 1.5rem;
  border: 0;
  background: var(--lw-green);
  opacity: 1;
}

/* Startbild ohne Foto: blaue Fläche mit angeschnittenem Pfeil-Zeichen.
   Das Zeichen als Datei /images/lanwerker/lanwerker-mark.png ablegen. */
.lw-hero {
  position: relative;
  overflow: hidden;
  background: var(--lw-blue);
  color: var(--lw-blue-100);
  padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
}
.lw-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: 50%;
  width: 360px;
  height: 360px;
  transform: translateY(-50%);
  background: url("/images/lanwerker/lanwerker-mark.png") no-repeat center / contain;
  opacity: .10;
  pointer-events: none;
}
.lw-hero > * { position: relative; z-index: 1; max-width: 720px; }
.lw-hero h1, .lw-hero .h1, .astroid-framework .lw-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.08;
  margin: 1rem 0 1.25rem;
}
.lw-hero h1 em, .lw-hero h1 strong { font-style: normal; color: var(--lw-green-400); }
.lw-hero p { font-size: 1.1875rem; max-width: 620px; }

/* Blaues Band, z. B. für Support/Fernwartung */
.lw-band {
  background: var(--lw-blue);
  color: var(--lw-blue-100);
  padding: 3rem 1.5rem;
  border-radius: var(--lw-radius-lg);
}
.lw-band a:not(.btn):not(.uk-button) { color: #fff; text-decoration: underline !important; text-underline-offset: 3px; }

/* Heller Abschnitt */
.lw-subtle { background: var(--lw-gray-50); }

/* Hinweisfeld mit grüner Oberkante */
.lw-note {
  background: var(--lw-gray-50);
  border: 1px solid var(--lw-gray-200);
  border-top: 3px solid var(--lw-green);
  border-radius: var(--lw-radius-lg);
  padding: 1rem 1.25rem;
}

/* Tabellen, z. B. Download-Liste */
.lw-table, .item-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.lw-table th, .item-page table th {
  text-align: left;
  font-family: var(--lw-font-display);
  font-weight: 700;
  color: var(--lw-blue);
  border-bottom: 2px solid var(--lw-green);
  padding: .625rem .75rem;
}
.lw-table td, .item-page table td {
  border-bottom: 1px solid var(--lw-gray-200);
  padding: .625rem .75rem;
  vertical-align: top;
}

/* Technisches in Consolas, z. B. IP-Adresse */
.lw-ip {
  font-family: var(--lw-font-mono);
  font-size: 1.25rem;
  color: var(--lw-blue);
  background: var(--lw-gray-50);
  border: 1px solid var(--lw-gray-200);
  border-radius: var(--lw-radius-md);
  padding: .25rem .625rem;
}


/* 9. Bewegung --------------------------------------------------------- */
/* Kein Federn, kein Hüpfen. Wer reduzierte Bewegung eingestellt hat,
   bekommt gar keine. Lenis (Smooth Scroll) wird in den Template-
   Einstellungen abgeschaltet, das geht nicht per CSS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 10. Seitenrahmen und Abstände (Fassung 5/6) ------------------------- */
/* Platz für die Bildlaufleiste immer reservieren, damit kurze Seiten
   (ohne Laufleiste) nicht seitlich springen */
html { scrollbar-gutter: stable; }

/* Fußzeile immer unten, auch bei kurzen Seiten */
.astroid-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.astroid-wrapper > .astroid-component-section { flex: 1 0 auto; }

/* Kopf: Logo mit Luft, Kopfzeile etwas höher */
.astroid-header-section .astroid-header {
  padding-top: .625rem !important;
  padding-bottom: .625rem !important;
}
.astroid-header-section .astroid-logo img,
.astroid-header-section .astroid-logo .site-logo,
.astroid-header-section .astroid-logo img.astroid-logo-default {
  height: 56px;
  width: auto;
  max-height: none;
}
/* Fassung 10: Astroid kopiert SVG-Logos als <svg> direkt in die Seite statt als
   <img>. Ohne diese Regel greifen Astroids Grenzen (max. 250 × 65 px) und das
   Logo sitzt größer und mittig im Kasten. Gilt für Standard-, Mobil- und
   Sticky-Logo. Seitenverhältnis wie die alte PNG (703 × 258).
   Fassung 11: 56 statt 48 px hoch, linke Kante bündig mit dem Banner. */
.astroid-logo svg.astroid-logo-default,
.astroid-logo svg.astroid-logo-mobile,
.astroid-logo svg.astroid-logo-sticky {
  height: 56px;
  width: auto;
  aspect-ratio: 703 / 258;
  max-height: none;
  max-width: none;
}

/* Inhaltsbereich: hellgrauer Grund, weiße Fläche mit Innenabstand */
#content.astroid-component-section,
.astroid-component-section {
  background: var(--lw-gray-50) !important;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.astroid-component-section .astroid-component {
  --lw-pad: clamp(1.25rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--lw-gray-200);
  border-radius: var(--lw-radius-lg);
  box-shadow: var(--lw-shadow-sm) !important;
  /* !important: Astroid setzt je Bildschirmbreite eigene Abstände per ID */
  padding: var(--lw-pad) !important;
  overflow: hidden;
}

/* Alle Seiten gleich breit wie die Startseite (Fassung 7). Fließtext bleibt
   für gute Lesbarkeit auf 760 px (Branding), Tabellen und Köpfe nutzen die volle Breite. */
.astroid-article-text > p,
.astroid-article-text > ul,
.astroid-article-text > ol { max-width: 760px; }

/* Randspalte „Auf dieser Seite“ (Variante E2): optional je Beitrag,
   <nav class="lw-aside"> direkt nach dem Seitenkopf einfügen. */
.astroid-article-text:has(> .lw-aside) {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(200px, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.astroid-article-text:has(> .lw-aside) > * { grid-column: 1; }
.astroid-article-text:has(> .lw-aside) > .lw-hero { grid-column: 1 / -1; }
.astroid-article-text > .lw-aside {
  grid-column: 2;
  grid-row: 2 / span 60;
  position: sticky;
  top: 1.5rem;
  justify-self: end;
  width: 100%;
  max-width: 260px;
  margin: .5rem 0 0;
  padding: .25rem 0 .25rem .5rem;
  border-left: 1px solid var(--lw-gray-200);
}
.lw-aside .lw-eyebrow {
  padding: 0 .75rem;
  margin-bottom: .5rem;
  font-size: .75rem;
  color: var(--lw-gray-500);
}
.lw-aside ul { list-style: none; margin: 0; padding: 0 !important; }
.lw-aside li { margin: 0 !important; }
.astroid-framework .astroid-article-text .lw-aside a:not(.btn) {
  display: block;
  padding: .4rem .75rem;
  font-family: var(--lw-font-display);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--lw-gray-800);
  text-decoration: none !important;
  border-radius: var(--lw-radius-md);
}
.astroid-framework .astroid-article-text .lw-aside a:not(.btn):hover {
  background: var(--lw-gray-50);
  color: var(--lw-green-700);
}
/* Sprungziele nicht direkt an den Fensterrand */
.astroid-article-text [id] { scroll-margin-top: 1.5rem; }

/* Unter 992 px: Randspalte steht als kurze Liste zwischen Kopf und Text */
@media (max-width: 991.98px) {
  .astroid-article-text:has(> .lw-aside) { display: block; }
  .astroid-article-text > .lw-aside {
    position: static;
    max-width: none;
    margin: 0 0 2rem;
  }
}

/* Startbild bzw. Seitenkopf bis an den Rand der weißen Fläche */
.astroid-component .lw-hero {
  margin: 0 calc(-1 * var(--lw-pad)) 2.5rem;
  padding-inline: var(--lw-pad);
}
/* Seiten mit eigenem Kopf: den Joomla-Seitentitel ausblenden, der Kopf hat seine eigene Überschrift */
.astroid-component:has(.lw-hero) .astroid-article-title { display: none; }

/* Knöpfe im Kopf: Abstand, auf schmalen Bildschirmen untereinander und gleich breit */
.lw-hero p:has(> .btn) {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
/* Gleiche Breite in jeder Fensterbreite: Beide Knöpfe wachsen von derselben
   Grundbreite aus und sind gleich gedeckelt. Nebeneinander teilen sie sich den
   Platz, untereinander nehmen beide dieselbe Breite. (Fassung 8) */
.lw-hero p:has(.btn) {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.lw-hero p:has(.btn) > .btn,
.lw-hero p:has(.btn) > joomla-hidden-mail {
  margin: 0;
  flex: 1 1 17.5rem;  /* breiter als der längste Knopftext, sonst werden sie ungleich */
  max-width: 20rem;
  text-align: center;
}
/* Joomla verschlüsselt Mail-Links gegen Spam und packt den Knopf dabei in
   <joomla-hidden-mail>. Der innere Knopf füllt dann die volle Breite. */
.lw-hero p:has(.btn) > joomla-hidden-mail > .btn {
  display: block;
  width: 100%;
  margin: 0;
}
/* Zweiter Knopf im Kopf: weiß gefüllt statt nur umrandet.
   Gut lesbar, auch wenn Browser-Erweiterungen wie Dark Reader umfärben. */
.lw-hero .btn-outline-light {
  background: #fff;
  border-color: #fff;
  color: var(--lw-blue);
}
.lw-hero .btn-outline-light:hover,
.lw-hero .btn-outline-light:focus {
  background: var(--lw-blue-50);
  border-color: var(--lw-blue-50);
  color: var(--lw-blue);
}

/* Kleinerer Kopf für Unterseiten: <section class="lw-hero lw-hero--sub"> */
.lw-hero.lw-hero--sub { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
/* Fassung 9: Alle Unterseiten-Köpfe gleich hoch, Inhalt senkrecht mittig.
   Ein- und zweizeilige Untertitel ergeben so dieselbe Kopfhöhe. */
.lw-hero.lw-hero--sub {
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Letzter Absatz im Kopf ohne Abstand nach unten, sonst sitzt der Text zu hoch */
.lw-hero > :last-child { margin-bottom: 0 !important; }
.lw-hero.lw-hero--sub h1,
.astroid-framework .lw-hero.lw-hero--sub h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: .5rem 0 .75rem; }
.lw-hero.lw-hero--sub p { font-size: 1.0625rem; }
.lw-hero.lw-hero--sub::after { width: 240px; height: 240px; right: -40px; }

/* Kopf mit Foto des TIG-Gebäudes, blauer Schutzschleier laut Branding */
.lw-hero.lw-hero--tig {
  background:
    linear-gradient(rgba(0, 48, 90, .72), rgba(0, 48, 90, .72)),
    url("/images/lanwerker/tig-winchesterstrasse.jpg") center 40% / cover no-repeat;
}
.lw-hero.lw-hero--tig::after { display: none; }

/* Links in blauen Flächen weiß (sonst greift die blaue Linkfarbe des Beitragstexts) */
.astroid-framework .astroid-article-text .lw-hero a:not(.btn):not(.uk-button),
.astroid-framework .astroid-article-text .lw-band a:not(.btn):not(.uk-button) { color: #fff; }
.astroid-framework .astroid-article-text .lw-hero a:not(.btn):not(.uk-button):hover,
.astroid-framework .astroid-article-text .lw-band a:not(.btn):not(.uk-button):hover { color: var(--lw-green-400); }

/* Große Überschrift im Kopf auf dem Handy etwas kleiner */
@media (max-width: 575.98px) {
  .lw-hero h1, .astroid-framework .lw-hero h1 { font-size: 1.875rem; }
}
.astroid-component .lw-band { margin-top: 1rem; }

/* Rhythmus im Beitragstext */
.astroid-article-text > :last-child,
.astroid-article-text > section:last-child { margin-bottom: 0 !important; }
.astroid-article-text h2 { margin-top: 2.75rem; margin-bottom: .5rem; }
.astroid-article-text h3 { margin-top: 2rem; margin-bottom: .5rem; font-size: 1.25rem; }
.astroid-article-text > h2:first-child,
.astroid-article-text > .lw-eyebrow:first-child + h2,
.astroid-article-text .lw-eyebrow + h2 { margin-top: 0; }
.astroid-article-text .lw-rule { margin: .75rem 0 1.25rem; }
.astroid-article-text table { margin: 1.5rem 0 2rem; }
.astroid-article-text ul { padding-left: 1.25rem; }
.astroid-article-text li { margin-bottom: .25rem; }
.item-page .page-header h1,
.item-page > h1,
.com-content-article > h1 { margin: 0 0 1.5rem; }

/* Fußzeile: etwas Luft, Links mit Abstand */
.astroid-footer-section { padding: 1.25rem 0; }
.astroid-footer-section .nav.menu { gap: 1.5rem; }
.astroid-footer-section .nav.menu a { padding: 0; }
/* Fußzeile: Menü und Copyright nebeneinander, solange Platz ist (Astroid
   stapelt die beiden Spalten sonst schon unter 992 px). (Fassung 8) */
.astroid-footer-section .astroid-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: .5rem;
  column-gap: 2rem;
}
.astroid-footer-section .astroid-row > .astroid-column {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
/* Das Template hängt an den aktiven Menüpunkt ein Pfeil-Symbol an, in der Fußzeile unerwünscht */
.astroid-footer-section li.current a span.nav-title::after { content: none !important; }

/* Überschriften am Anfang einer Spalte (z. B. Kontakt) ohne zusätzlichen Abstand oben */
.astroid-article-text .row > [class*="col"] > h2:first-child { margin-top: 0; }

/* Infoleiste: auf kleinen Bildschirmen nur Telefon und Mail */
@media (max-width: 767.98px) {
  .astroid-wrapper > .astroid-section.bg-primary:first-child .astroid-contact-info span:first-child,
  .astroid-wrapper > .astroid-section.bg-primary:first-child [class*="address"] { display: none; }
}

/* Startseite: Startbild schließt oben bündig an */
.astroid-component-section .astroid-component:has(.lw-hero) { padding-top: 0 !important; }

/* Leerer Platzhalter für Beitragsbilder erzeugt sonst 30 px Abstand */
.astroid-article-full-image:empty,
.astroid-article-full-image:not(:has(img)) { display: none; }