/* ── Design Tokens (abgeleitet aus der abgenickten Design-Vorlage) ── */
:root {
    /* Marke */
    --c-blue:        #1a4480;
    --c-blue-deep:   #0f2e5c;
    --c-blue-soft:   #e8eef7;
    --c-blue-hover:  #143768;

    /* Neutrale Töne */
    --c-bg:          #ffffff;
    --c-bg-alt:      #f4f6f9;   /* helle Sektions-/Strip-Hintergründe → list-background-gray */
    --c-bg-blue:     #0f2e5c;
    --c-bg-deep:     #0f1b2d;   /* dunkler Footer/Banner → list-background-blue (Navy) */
    --c-text:        #0e1b2c;
    --c-text-muted:  #4a5568;
    --c-text-dim:    #6b7686;
    --c-border:      #e3e7ed;
    --c-border-dark: #cfd6df;

    /* Typografie */
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Maße */
    --radius: 4px;
    --max-w:  1200px;
}

/* Schriften */

/* source-sans-3-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/source-sans-3-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/source-sans-3-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
}   /* statt fix 16px → respektiert die Browser-Schriftgröße des Nutzers */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }   /* sanftes Scrollen nur, wenn der Nutzer Animationen nicht abgeschaltet hat */
}

body {
    font-family: var(--font-body);
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--c-blue);
    text-decoration: none;
    transition: color .15s;
}
a:hover {
    color: var(--c-blue-hover);
}

/* Zentrale Breitenbegrenzung (das innere .container im hg_element-Wrapper) */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 28px;
}

/* ── Basis-Typografie ── */
h1, h2, h3, h4 {
    color: var(--c-text);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
}
h3 {
    font-size: 1.2rem;
}
p  {
    color: var(--c-text-muted);
}

/* ── Listen im Inhalt (global) ───────────────────────────────────────── */
/* Nur klassenlose Listen = was der Redakteur im Text tippt. Struktur-Listen */
/* tragen Klassen und bleiben unberührt. Gilt für ul UND ol (z. B. Branchen).*/
ul:not([class]),
ol:not([class]) {
  padding-left: 1.4em;
  margin: 18px 0;
}
ul:not([class]) > li,
ol:not([class]) > li {
  margin-bottom: 8px;
}
ul:not([class]) > li::marker {
  color: var(--c-blue);
}

/* ── Tabellen im Inhalt (global) ─────────────────────────────────────── */
/* Klassenlose Tabellen aus dem Beitragstext: randlos, luftig, lesbar.      */
/* Echte Datentabellen können später eine eigene Klasse + Rahmen bekommen.  */
table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}
table:not([class]) td,
table:not([class]) th {
  padding: 0 0 16px;
  vertical-align: top;
  text-align: left;
}


/* ── Skip-Link (Tastatur/Screenreader: Header+Nav überspringen, WCAG 2.4.1) ── */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;          /* über dem sticky-Header (z-index: 100) */
  padding: 10px 18px;
  background: var(--c-blue);
  color: #fff;
  border-radius: var(--radius);
  transform: translateY(-150%);   /* off-screen geparkt */
  transition: transform .15s;
}
.skip-link:focus {
  transform: translateY(0);       /* bei Tastaturfokus sichtbar einblenden */
}



/** Anker **/
/* Eyebrow-Anker sitzen zu hoch → etwas tiefer landen lassen */
#Leistungen,
#Geraeteentwicklung,
#Branchen,
#Prozess,
#Standort,
#Kontakt {
  scroll-margin-top: 300px; 
}







/* ── Header ── */
header {
  position: sticky;
  
  top: 0;
  z-index: 1001; /* muss über der phoca map bzw. den Klassen von leaflet-top und .leaflet-bottom liegen */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
/**/      box-shadow: 0 0 15px var(--c-blue-soft); /* Abhebung vor weißem Hintergrund beim Scrollen */
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 24px;
}

/* Logo-Bereich: zwei Custom-Module (Bild + Standort) nebeneinander */
.logo {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--c-text);
}
.logo img { height: 46px; width: auto; }

/* Standort-Modul = das ohne Bild; Trenner als Border statt eigenem Element */
.logo .mod-custom:not(:has(img)) {
  padding-left: 18px;
  border-left: 1px solid var(--c-border);
}
.logo .mod-custom:not(:has(img)) a {
  color: var(--c-text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.logo .mod-custom:not(:has(img)) strong {
  color: var(--c-text);
  font-weight: 600;
}

/* Hauptnavigation: Flex jetzt auf der <ul> des Menü-Moduls */
nav.primary > ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
nav.primary a {
  display: block;
  color: var(--c-text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}
nav.primary a:hover,
nav.primary a:focus-visible {
  color: var(--c-text);
  background: var(--c-bg-alt);
}
/* Kontakt-Button (Link-Klasse "blue" am Menüeintrag) */
nav.primary a.blue {
  background: var(--c-blue);
  color: #fff;
  padding: 10px 20px;
  margin-left: 12px;
}
nav.primary a.blue:hover,
nav.primary a.blue:focus-visible {
  background: var(--c-blue-hover);
  color: #fff;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--c-text);
  cursor: pointer;
  padding: 8px;
}



/* ── Header mobil (≤920px) ── */
@media (max-width: 920px) {
  nav.primary { display: none; }
  .mobile-toggle { display: block; }


  /* Aufgeklappt – wird vom Mini-JS (nächster Schritt) per .open aktiviert */
  nav.primary.open {
    display: block;
    position: absolute;
    top: 80px;
    left: 20px;
    right: 20px;
    background: #fff;
    padding: 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 46, 92, .10);
  }
  nav.primary.open > ul { flex-direction: column; align-items: stretch; }
  nav.primary.open a.blue { margin-left: 0; margin-top: 8px; text-align: center; }
}

/* ── Header mobil (≤320px) ── */
@media (max-width: 320px) {
  .logo .mod-custom:not(:has(img)) { display: none; }
}


/* ── Globale Komponenten (erstmals im Hero genutzt, gelten überall) ── */
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--c-blue);
  color: #fff;
  border: 1px solid var(--c-blue);
  transition: background .18s, color .18s, border-color .18s;
  margin: 15px 5px 15px 0; /* Buttons kleben ansonsten zu sehr am Text */
}
.btn:hover,
.btn:focus-visible {
  background: var(--c-blue-hover);
  border-color: var(--c-blue-hover);
  color: #fff;
}
/* Sekundär-Variante: Outline (Projekt-Name "inverted" statt "btn-secondary") */
.btn.inverted {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border-dark);
}
.btn.inverted:hover,
.btn.inverted:focus-visible {
  background: transparent;
  border-color: var(--c-blue);
  color: var(--c-blue);
}

/* ── Hero (einziges Inhalts-Modul, einzige <h1>) ── */
.hero {
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--c-border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}
.hero h1 { margin: 16px 0 24px; }
.hero h1 .hl { color: var(--c-blue); }   /* blau hervorgehobener Teil der Headline */
.hero-lede {
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 560px;
}   /* Farbe kommt schon global von p → nicht neu setzen */
.hero-actions { 
}
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.credentials-card {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  padding: 18px 22px;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 46, 92, .10);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  align-items: center;
}
.credentials-card .cc-num {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1;
}
.credentials-card .cc-lbl {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  line-height: 1.3;
}

/* Hero einspaltig ab der Mobil-Schwelle (gleicher 920er-Breakpoint wie der Header,
   bewusst eigener Block zur Komponenten-Kohäsion) */
@media (max-width: 920px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}



/* ── Sektions-Wrapper (Kategorieblog-Override: hg_element > container) ── */
/* Full-Width-Band; die Breitenbegrenzung macht das innere .container.
   Vertikaler Rhythmus hier, damit jede Sektion gleich atmet. Der Hero hat
   eigenes Padding und ist NICHT .hg_element → bleibt unberührt. */
.hg_element > .container {
  padding-block: clamp(48px, 7vw, 84px);
}

/* Hintergrund-Modifier (Feld list-background).
   "standard" bekommt bewusst KEINE Regel → transparent = weißer Body. */
.list-background-gray {
  background: var(--c-bg-alt);
}
.list-background-blue {
  background: var(--c-bg-blue);
  color: #fff;
}
.list-background-blue p {
  color: rgba(255, 255, 255, 0.82);
}

/* Standard-Button auf dunklem Band: heller Rahmen + weißer Text */
.list-background-blue .btn {
  background: #fff;
  opacity: 1;
  color: var(--c-blue);
  transition: 0.35s all;
  
}
.list-background-blue .btn:hover,
.list-background-blue .btn:focus-visible {
  opacity: 0.9;
  transition: 0.35s all;
}

/* Outline-Button auf dunklem Band: heller Rahmen + weißer Text */
.list-background-blue .btn.inverted {
  background: var(--c-blue);
    border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: 0.35s all;
}
.list-background-blue .btn.inverted:hover,
.list-background-blue .btn.inverted:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
  transition: 0.35s all;
}


/* Sektions-Überschrift (h2 / h3 / strong teilen sich die Klasse;
   Größe kommt vom jeweiligen Tag, hier nur Fluss + Abstand). */
.section-title {
  display: block;            /* damit auch <strong> als eigene Zeile sitzt */
  margin-bottom: 0.75em;
}
/* Überschriften auf dunklem Band: Basis-Typo setzt h1–h4 fest auf dunkel,
   geerbtes Weiß greift nicht → hier explizit aufhellen. */
.list-background-blue :is(h1, h2, h3, h4) {
  color: #fff;
}


/* ── list-style: strip (Trust-Strip) ───────────────────────────────── */
/* Gegen die echte Override-Ausgabe gebaut: ul.card-list > li.card >      */
/* div.card-body > strong.card-title + p.card-text. Optik der Vorlage:    */
/* vier Items nebeneinander, je mit blauem Akzent-Strich links.           */

/* Kompakteres Band als der Sektions-Standard (Strip ist ein schmaler
   Streifen). Höhere Spezifität (.hg_element.list-style-strip) → schlägt
   die Basis-padding-Regel unabhängig von der Datei-Reihenfolge. */
.hg_element.list-style-strip > .container {
  padding-block: clamp(36px, 4vw, 52px);
}

/* Items als responsive Reihe – wrappt von selbst, kein Breakpoint nötig */
.list-style-strip .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  list-style: none;          /* ul-Punkte aus (Reset nullt nur margin/padding) */
}

/* Blauer Akzent-Strich links. Die Karten strecken sich im Grid auf gleiche
   Höhe (align-items: stretch ist Default) → alle Striche bündig. */
.list-style-strip .card {
  border-left: 2px solid var(--c-blue);
  padding-left: 20px;
}

/* Titel: <strong> als eigene Zeile. Farbe (dunkel) + Bold erbt strong
   global → hier nur Block-Fluss, Größe, Abstand. */
.list-style-strip .card-title {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 6px;
}

/* Text: <p> → Muted-Farbe kommt global, hier nur Feinabstimmung. */
.list-style-strip .card-text {
  font-size: 0.92rem;
  line-height: 1.5;
}


/* ── Globale Chip-Komponente (cards.tags UND Joomla-Tags) ────────────── */
/* EINE Optik für alle Tag-Kontexte. Joomla-Tags später hier angleichen. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: 14px;
}
.chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
}

/* ── list-style: big_cards (Service-Grid) ────────────────────────────── */
.list-style-big_cards .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 28px;
  list-style: none;
}
.list-style-big_cards .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;             /* Bild bündig in die runden Ecken */
  background: var(--c-bg);
}
.list-style-big_cards .card-media { aspect-ratio: 16 / 10; }
.list-style-big_cards .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list-style-big_cards .card-body { padding: 24px; }
.list-style-big_cards .card-title { margin-bottom: 10px; }



/* ── list-style: steps (Prozess) ─────────────────────────────────────── */
/* Gerahmtes Raster mit Trennlinien (Vorlage). Trick: 1px gap + Container-
   Hintergrund in Linienfarbe → die Lücke wird zur Linie, in JEDER Spalten-
   zahl (auch beim Umbruch), ohne :first-child-Logik. Schrittnummer per
   Counter: Umsortieren im Backend nummeriert neu. */
.list-style-steps .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;                          /* wird zur Trennlinie */
  list-style: none;
  counter-reset: step;               /* eigener Counter + Pflicht-Reset */
  background: var(--c-border);       /* Linienfarbe scheint durch den Gap */
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;                  /* runde Ecken auch auf den Eck-Zellen */
  margin: 56px 0 0;      
}
.list-style-steps .card {
  counter-increment: step;
  background: var(--c-bg);           /* deckt alles außer dem 1px-Gap ab */
  padding: 28px 24px;
}
.list-style-steps .card-title {
  display: block;                    /* <strong> als eigene Zeile */
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.list-style-steps .card-title::before {
  content: "Schritt " counter(step, decimal-leading-zero);  /* → "Schritt 01" */
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 8px;
}
.list-style-steps .card-text {
  font-size: 0.92rem;
  line-height: 1.5;
}


/* ── Joomla-Tags an die globale Chip-Optik angleichen ────────────────── */
/* Native Tag-Ausgabe (joomla.content.tags): ul.tags.list-inline > li >    */
/* a.btn.btn-sm.btn-info. Kein Override — nur optisch an .chip angeglichen. */
/* Gilt für Leistungsbanner UND Kernkompetenz (border) zugleich.           */
.tags.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.tags.list-inline > li { margin: 0; }
/* Bootstrap-Button-Look überschreiben → Chip. Verlinkung bleibt erhalten. */
.tags.list-inline .btn {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  border: none;
}



/* ── list-style: banner (dunkles Band, Text links / Chips rechts) ────── */
/* HTML-Reihenfolge ist ul.tags → h3 → p (Joomla setzt Tags vor den Body). */
/* Grid + order: Text in Spalte 1, Tags per order nach Spalte 2 rechts.    */
.list-style-banner .item-content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px 48px;
}
.list-style-banner h3 { grid-column: 1; }
.list-style-banner p  { grid-column: 1; margin: 0; }
.list-style-banner .tags.list-inline {
  grid-column: 2;
  grid-row: 1 / span 2;        /* Tags-Block über Titel+Text rechts */
  order: 0;
  margin: 0;
  justify-content: flex-end;
  max-width: 360px;
}

/* einspaltig auf schmalen Screens: Chips wieder unter den Text */
@media (max-width: 720px) {
  .list-style-banner .item-content { grid-template-columns: 1fr; }
  .list-style-banner .tags.list-inline {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
}



/* ── list-style: tools (schmaler heller Streifen) ────────────────────── */
/* Struktur: ul.fields-container > li.block-1 (Tool-Liste) + li.block-2    */
/* (TÜV-Siegel). Block-Felder auto-eingebunden, KEIN Override. Links Tools,*/
/* rechts Siegel.                                                          */

/* schmaler als Standard-Sektion (Streifen, kein volles Band) */
.hg_element.list-style-tools > .container {
  padding-block: clamp(28px, 3.5vw, 40px);
}

.list-style-tools .fields-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  list-style: none;
  margin: 0;
}

/* list-style auf den eigenen feldern entfernen */
li.field-entry { list-style: none; }


.list-style-tools .field-entry { margin: 0; }

/* links: Tool-Liste – Eyebrow steht, dahinter die Tools inline statt Bullets */
.list-style-tools .block-1 .field-value > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 6px 0 0;
}
.list-style-tools .block-1 .field-value > ul > li {
  font-weight: 600;
  color: var(--c-text);
}

/* rechts: TÜV-Siegel – Bild ist 1902px breit → auf Siegelhöhe begrenzen */
.list-style-tools .block-2 img {
  height: auto;
  max-height: 56px;
  width: auto;
}



/* ── list-style: tools (schmaler heller Streifen) ────────────────────── */
/* ⚠ KOMPROMISS/TECH-SCHULD: hängt an .block-1/.block-2 (Slot-Position) —  */
/* zu speziell, widerspricht dem Slot-Prinzip. Nur aus Zeitgründen so.     */
/* Eigentlich: Layout an semantische/redakteursvergebene Klassen.          */

.hg_element.list-style-tools > .container {
  padding-block: clamp(28px, 3.5vw, 40px);
}

/* eine Zeile: Tools links, Siegel rechts */
.list-style-tools .fields-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  list-style: none;
  margin: 0;
}
.list-style-tools .field-entry { margin: 0; }

/* block-1: Eyebrow + Tool-Boxen in EINER Reihe */
.list-style-tools .block-1 .field-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.list-style-tools .block-1 .eyebrow { margin: 0; }   /* globalen 14px-Abstand hier aus */
.list-style-tools .block-1 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
}
.list-style-tools .block-1 ul > li {        /* Tool-Namen als helle umrandete Boxen */
  padding: 7px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-text);
}

/* block-2: Siegel rechts, kein Rahmen, Bild auf Siegelhöhe begrenzt */
.list-style-tools .block-2 {
  padding: 10px 16px;
}
.list-style-tools .block-2 img {
  height: auto;
  max-height: 48px;
  width: auto;
}

/* ── list-style: split (zwei Slots nebeneinander) ────────────────────── */
/* Generisch: legt die direkten Kinder der fields-container in zwei Spalten.
   Greift NICHT in den Slot-INHALT ein — egal was drin steht. Nennt block-*
   nicht. Wiederverwendbar für jeden Zweispalter (hier: Text | Karte). */
.list-style-split .fields-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  list-style: none;
  margin: 0;
}
.list-style-split .field-entry {
  margin: 0;
  min-width: 0;        /* erlaubt Schrumpfen → verhindert Grid-Overflow der Karte */
}
@media (max-width: 768px) {
  .list-style-split .fields-container { grid-template-columns: 1fr; }
}



/* Info-Karte auf dunklem Band. Greift jetzt am NAP-Modul-Kontext, weil die
   Modulklasse via {loadmoduleid} (Chrome "none") NICHT am Wrapper ankommt —
   daher Kontext-Selektor statt Klasse. .info-card bleibt als Hook erhalten. */
/* Info-Karte auf dunklem Band. Greift jetzt am NAP-Modul-Kontext, weil die
   Modulklasse via {loadmoduleid} (Chrome "none") NICHT am Wrapper ankommt —
   daher Kontext-Selektor statt Klasse. .info-card bleibt als Hook erhalten. */
.info-card,
.list-background-blue .mod-custom:has(.nap) {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.04);
}




/* ── list-style: register (nummeriertes Verzeichnis: Nr · Label · Norm) ─── */
/* Override-Ausgabe: ul.card-list > li.card > div.card-body >               */
/* strong.card-title + p.card-text. Optik der Vorlage: schmale, zentrierte  */
/* 2-Spalten-Liste mit Linien (oben + je Zeile unten; senkrecht nur links), */
/* KEIN Kasten. Letzte Zeile allein → volle Breite. Counter nummeriert beim */
/* Umsortieren im Backend automatisch neu.                                  */
.list-style-register .card-list {
  display: grid;
  grid-template-columns: 1fr 1fr;            /* Vorlage: fest 2-spaltig */
  list-style: none;
  counter-reset: branche;                    /* eigener Counter + Pflicht-Reset */
  max-width: 880px;                          /* Vorlage: Liste schmaler als Container */
  
  border-top: 1px solid var(--c-border);     /* obere Abschlusslinie */
  margin: 56px auto 0;                      /* Abstand zum Text */
}
.list-style-register .card {
  counter-increment: branche;
  padding: 20px 8px;
  border-bottom: 1px solid var(--c-border);  /* waagerechter Zeilentrenner */
}
.list-style-register .card:nth-child(odd) {  /* linke Spalte → senkrechte Mittellinie */
  border-right: 1px solid var(--c-border);
  padding-right: 32px;
}
.list-style-register .card:nth-child(even) { padding-left: 32px; }
.list-style-register .card:last-child:nth-child(odd) {  /* letzte Zeile allein → volle Breite */
  grid-column: 1 / -1;
  border-right: none;
  padding-right: 8px;
}
.list-style-register .card-body {
  display: grid;
  grid-template-columns: auto 1fr auto;      /* Nr · Label · Norm */
  gap: 18px;
  align-items: baseline;
}
.list-style-register .card-body::before {
  content: counter(branche, decimal-leading-zero);   /* → "01" */
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--c-blue);                      /* Vorlage: Nummern in Markenblau */
}
.list-style-register .card-title { font-size: 1.05rem; }   /* Label – ist schon <strong> */
.list-style-register .card-text {
  text-align: right;
  font-size: 0.85rem;
  color: var(--c-text-dim);
}

@media (max-width: 640px) {
  .list-style-register .card-list { grid-template-columns: 1fr; }
  .list-style-register .card:nth-child(odd) { border-right: none; padding-right: 8px; }
  .list-style-register .card:nth-child(even) { padding-left: 8px; }
}

/* allgemeine Textlängeneinschränkung */
.item-content > p {
  max-width: 70ch;
}

/* Kopf von register/steps: zentriert (Vorlage: .section-header.centered).
   Die Lesebreite (70ch) bekommt p schon aus der allgemeinen
   ".item-content > p"-Regel → hier nur noch die h2 kappen, plus Zentrierung
   für h2 + p. Der ">"-Kombinator schützt Liste (ul) und Karten-Texte
   (p in .card-body) — die sind keine direkten Kinder von .item-content. */
.list-style-register .item-content > h2,
.list-style-steps .item-content > h2 {
  max-width: 70ch;
}
.list-style-register .item-content > h2,
.list-style-register .item-content > p,
.list-style-steps .item-content > h2,
.list-style-steps .item-content > p {
  margin-inline: auto;
  text-align: center;
}
/* Eyebrow ist global inline-block → bliebe trotz text-align links.        */
/* Hier als block, damit das geerbte margin-inline:auto / center greift.   */
.list-style-register .item-content .eyebrow,
.list-style-steps .item-content .eyebrow {
  display: block;
}


/* ── list-style: border (umrandete Karte: Text links · Bild rechts) ──────── */
/* Kernkompetenz. Override-Ausgabe im .container: figure.item-image +          */
/* div.item-content (ul.tags → p.eyebrow → h3 → p,p). Vorlage: EINE umrandete  */
/* Karte, Text links / Bild rechts, Chips unten.                              */
/* Trick: das .container WIRD die Karte; dafür wandert das Band-Padding auf    */
/* die <section>, damit oben/unten der gewohnte Sektions-Rhythmus bleibt.      */

.hg_element.list-style-border {
  padding-block: clamp(48px, 7vw, 84px);     /* Band-Rhythmus wie alle Sektionen */
}

/* .container = Karte: Rahmen, Innenabstand, zwei Spalten */
.hg_element.list-style-border > .container {
  padding: clamp(28px, 4vw, 48px);           /* Karten-Innenabstand (überschreibt das Band-padding-block) */
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;        /* Text etwas breiter als Bild (Vorlage) */
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* HTML-Reihenfolge ist figure → item-content (Bild stünde sonst links).
   item-content bleibt order:0 (links), das Bild rückt per order nach rechts. */
.list-style-border .item-image { order: 1; }
.list-style-border .item-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Textspalte: Stapel; Chips ans Ende (Joomla rendert Tags zuoberst). */
.list-style-border .item-content {
  display: flex;
  flex-direction: column;
}
.list-style-border .item-content p  { margin-bottom: 14px; }   /* Abstand der zwei Absätze */
.list-style-border .item-content h3 { margin-bottom: 16px; }
.list-style-border .item-content .tags.list-inline {
  order: 1;                                  /* Chips unter Eyebrow/Titel/Text */
  margin-top: 24px;
}

/* einspaltig: Bild wieder oben (Quell-Reihenfolge), Text darunter */
@media (max-width: 768px) {
  .hg_element.list-style-border > .container { grid-template-columns: 1fr; }
  .list-style-border .item-image { order: 0; }
}

/* ── NAP-Block "Niederlassung" (ein Modul, mehrere Optiken) ──────────────── */
/* mod_custom: .mod-custom > h3.nap-title + dl.nap (dt Label · dd Wert).        */
/* Layout kontextfrei; Farben unten je Hintergrund. Footer-Optik (gestapelt,    */
/* ohne Labels/Firmenname/Zeiten) folgt mit dem Footer — gleiche Quelle.        */
.nap {
  display: grid;
  grid-template-columns: max-content 1fr;   /* Label | Wert, jedes Paar eine Zeile */
  column-gap: 28px;
  row-gap: 12px;
  align-items: start;                        /* Label oben an mehrzeiliger Adresse */
  margin: 0;
}
.nap dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nap dd { margin: 0; }
.nap-org { display: block; }                 /* Firmenname auf eigene Zeile */
.nap-title { margin-bottom: 18px; }          /* h3 ist auf Navy schon weiß (globale Regel) */

/* Optik auf Navy (Kontakt-Sektion) */
.list-background-blue .nap dt { color: rgba(255, 255, 255, 0.6); }   /* Label gedämpft, Kontrast ~6:1 */
.list-background-blue .nap a {               /* Links wären sonst Dunkelblau auf Navy → Kontrastbruch */
  color: #fff;
  text-decoration: underline;
}
.list-background-blue .nap a:hover {
    opacity: 0.9;
}


/* ── contact-card (Ansprechpartner-Modul, via Modulklasse) ───────────────── */
.contact-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);          /* weiße Karte auf grauem Band */
  padding: 22px 26px;
  margin-top: 32px;
}
.contact-card p { margin: 0; }
.contact-card .eyebrow { margin-bottom: 4px; }
.contact-card strong { font-size: 1.05rem; }   /* Name etwas kräftiger */

/* Avatar links, Text (Eyebrow/Name/Kontakt) rechts gestapelt */
.contact-card .mod-custom {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 2px;
  align-items: center;
}
.contact-card .mod-custom > p { grid-column: 2; }
.contact-card .mod-custom > p:has(.avatar) {   /* Avatar-Absatz: linke Spalte, über alle drei Zeilen */
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}
.contact-card .avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-blue);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}






/* ── Feature-Liste (Standort) — bewusste Ausnahme: Klasse vom Redakteur ──── */
/* gesetzt (wie .eyebrow), weil feste Design-Komponente, kein getippter Text. */
.feature-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--c-border);
}
.feature-list li:last-child { border-bottom: 1px solid var(--c-border); }
.feature-list li::before {          /* hohler Ring-Marker statt Punkt */
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.5em;
  border: 2px solid var(--c-blue);
  border-radius: 50%;
}

/* Icon im Marker ist eh kaputt, dann lieber ausblenden */
.phocamaps .fa-circle:before {
    display: none;
}



/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Vier eigene Module in Position "footer-item" (style none → je .mod-custom).  */
/* Überschriften als <h3> im Modulinhalt (wie NAP). NAP-Modul wiederverwendet → */
/* Footer-Optik: gestapelt, ohne Labels/Firmenname/Zeiten. Dunkles Band, Text/  */
/* Links/Headings für dunklen Grund aufgehellt (Kontrast geprüft).             */
footer {
  background: var(--c-bg-deep);
  color: rgba(255, 255, 255, 0.82);
}

/* Spaltenraster (Marke breiter), in Container-Breite zentriert */
.footer-box {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 28px;
}
.footer-item {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) { .footer-item { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-item { grid-template-columns: 1fr; } }

/* Text & Links lesbar auf dunklem Grund */
footer p { color: rgba(255, 255, 255, 0.72); margin: 0 0 8px; }
footer a { color: rgba(255, 255, 255, 0.72); }
footer a:hover,
footer a:focus-visible { color: #fff; }

/* Spaltenüberschriften (gebackene h3 inkl. NAP-Titel): klein, Versalien, gedämpft */
footer h3,
footer .nap-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 16px;
}

/* Marke: Logo + Kurztext */
.footer-item img {
    height: auto;
    width: 100%;
    margin-bottom: 14px;
    max-width: 300px;
}

/* NAP im Footer: gestapelt, ohne Labels/Firmenname/Zeiten */
footer .nap { display: block; }
footer .nap dt,
footer .nap-org,
footer .nap-hours { display: none; }
footer .nap dd { margin: 0 0 6px; }
footer .nap a { text-decoration: underline; }   /* Link im Adressblock erkennbar */

/* Copyright-Leiste (Webadrett-Credit bleibt) */
.footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
}
.footer-copyright .webadrett {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}
.footer-copyright img { height: 18px; width: auto; display: inline-block; vertical-align: middle; margin: 0; }



/* ── Einzelseiten (Artikel-Ansicht: Impressum, Datenschutz, Sitemap …) ──────── */
/* default.php: .container > .com-content-article.item-page. Eigener Wrapper →    */
/* greift NUR hier, NICHT auf der Startseite. Der Reset hat alle Abstände genullt */
/* → getipptem Inhalt den Rhythmus zurückgeben.                                   */
.com-content-article {
  padding-block: clamp(48px, 6vw, 88px);   /* Luft zu Header (oben) und Footer (unten) */
  max-width: 75ch;                          /* Lesespalte für langen Fließ-/Rechtstext */
}
.com-content-article .page-header { margin-bottom: 1.5em; }

.com-content-article__body :is(h2, h3, h4) { margin-top: 1.6em; margin-bottom: 0.4em; }
.com-content-article__body :is(h2, h3, h4):first-child { margin-top: 0; }
.com-content-article__body p { margin-bottom: 1em; }