/* ============================================================================
   template.css — Seitenaufbau, Navigation, Sektionen, Joomla-Integration
   Im HTML-Export standen diese Regeln als style="" direkt am Element und mit
   festen Pixelwerten für eine Bühne von 1440px. Hier sind sie Klassen mit
   clamp()/Breakpoints, damit die Seite von 320px bis 4K trägt.
   ========================================================================= */

html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }

.cg-page { display: flex; flex-direction: column; min-height: 100vh; }
.cg-main { flex: 1 0 auto; }

/* Bühne: begrenzt die Zeilenlänge auf sehr breiten Schirmen */
.cg-stage {
  width: 100%;
  max-width: var(--cg-maxwidth);
  margin-inline: auto;
}

/* — Sprungmarke für Tastaturnutzung — */
.cg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--color-accent-900); color: #fff;
}
.cg-skip:focus { left: 0; }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.cg-header {
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  z-index: 20;
}
.cg-header--sticky { position: sticky; top: 0; }
.cg-header__inner {
  display: flex; align-items: center; gap: var(--cg-gutter);
  padding: 16px var(--cg-gutter);
}
.cg-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(16px, 2vw, 20px);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05;
  max-width: 240px; margin-right: auto;
  color: inherit; text-decoration: none;
}
.cg-brand:hover { color: var(--color-accent); }

.cg-nav ul {
  display: flex; gap: clamp(14px, 2vw, 26px);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em;
}
.cg-nav a {
  color: inherit; text-decoration: none;
  padding: 4px 0; display: inline-block;
  border-bottom: 1px solid transparent;
}
.cg-nav a:hover,
.cg-nav .current > a,
.cg-nav .active > a { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Untermenü: nur eine Ebene, dezent aufklappend */
.cg-nav li { position: relative; }
.cg-nav ul ul {
  display: none; position: absolute; top: 100%; left: 0; z-index: 30;
  flex-direction: column; gap: 0; min-width: 220px;
  padding: 8px 0; background: var(--color-bg);
  border: 1px solid var(--color-divider);
}
.cg-nav li:hover > ul, .cg-nav li:focus-within > ul { display: flex; }
.cg-nav ul ul a { padding: 6px 16px; display: block; border: 0; }

/* Menüknopf mobil */
.cg-burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider); cursor: pointer;
}
.cg-burger span, .cg-burger span::before, .cg-burger span::after {
  content: ""; display: block; width: 20px; height: 1.5px; background: var(--color-text);
}
.cg-burger span { position: relative; }
.cg-burger span::before { position: absolute; top: -6px; }
.cg-burger span::after { position: absolute; top: 6px; }

.cg-offcanvas { background: var(--color-bg); }
.cg-offcanvas .cg-nav ul { flex-direction: column; gap: 4px; font-size: 20px; }
.cg-offcanvas .cg-nav ul ul { display: flex; position: static; border: 0; padding: 4px 0 4px 16px; }

@media (max-width: 991.98px) {
  .cg-header .cg-nav { display: none; }
  .cg-burger { display: inline-flex; }
}

/* ── Sektionen ─────────────────────────────────────────────────────────── */
.cg-section { padding: var(--cg-section-gap) var(--cg-gutter) 0; }
.cg-section--last { padding-bottom: var(--cg-section-gap); }
.cg-section--flush { padding-top: 0; }

.cg-eyebrow {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-weight: 400;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--color-accent-700);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
/* In Bühne und Farbband steht die Marke im Entwurf etwas enger am Titel */
.cg-hero .cg-eyebrow, .cg-band .cg-eyebrow { margin-bottom: 20px; }

/* Große Sektionsüberschrift im Stil des Exports.
   Die Modifikatoren stehen im Override und im Editor auch allein, deshalb
   erben sie hier mit — sonst fehlten ihnen Versalien und Laufweite. */
.cg-display, .cg-display--md, .cg-display--sm {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(38px, 8vw, var(--cg-display-max));
  line-height: 0.92; text-transform: uppercase; letter-spacing: 0.005em;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
}
.cg-display--md {
  font-size: clamp(30px, 5.5vw, 64px); line-height: 0.98;
  letter-spacing: -0.015em;   /* enger als die H1, wie im Entwurf */
  margin-bottom: 0;           /* sonst bricht die Unterkantenflucht im Band */
}
.cg-display--sm {
  font-size: clamp(26px, 4vw, 46px); line-height: 1.0;
  letter-spacing: -0.015em;
  margin: -8px 0 20px;        /* hebt die Versalhöhe auf die Bildoberkante */
}
.cg-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; max-width: 60ch; margin: 0; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.cg-hero { padding: clamp(36px, 5vw, 64px) var(--cg-gutter) 0; }
.cg-portrait { aspect-ratio: 3 / 4; }  /* kein overflow:hidden - sonst schneidet es die Eckmarken ab */
.cg-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Bildbereich der Bühne (mod_cg_hero) */
.cg-hero__media { margin: 0; }
.cg-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cg-hero__media--portrait { aspect-ratio: 3 / 4; }
.cg-hero__media--square { aspect-ratio: 1; }
.cg-hero__media--auto img { height: auto; object-fit: contain; }
.cg-hero--solo .cg-lead { max-width: 68ch; }
.cg-portrait-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Beitragspaar Bild/Text (Highlights) ───────────────────────────────── */
.cg-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 3.5vw, 44px); align-items: start; }
.cg-split + .cg-split { margin-top: clamp(40px, 6vw, 72px); }
.cg-split__media { margin: 0; aspect-ratio: 1; }
.cg-split__media img { width: 100%; height: 100%; object-fit: cover; }
.cg-split__media--pad { aspect-ratio: auto; padding: 20px; display: flex; align-items: center; }
.cg-split__media--pad img { height: auto; object-fit: contain; }
.cg-split__text > *:last-child { margin-bottom: 0; }
.cg-split__action { margin: 24px 0 0; }

/* Bild rechts: im Beitrag unter "Bilder und Links" die Ausrichtung auf
   "rechts" stellen */
.cg-split--flip { grid-template-columns: 7fr 5fr; }
.cg-split--flip .cg-split__media { order: 2; }
.cg-split--flip .cg-split__text { order: 1; }

/* Beitrag ohne Bild */
.cg-split--solo { grid-template-columns: 1fr; }
.cg-split--solo .cg-split__text { max-width: 72ch; }

/* Überschrift im Split verlinkt sich unauffällig */
.cg-split__text h1 a, .cg-split__text h2 a, .cg-split__text h3 a {
  color: inherit; text-decoration: none;
}
.cg-split__text h1 a:hover, .cg-split__text h2 a:hover, .cg-split__text h3 a:hover {
  color: var(--color-accent);
}

@media (max-width: 767.98px) {
  .cg-split, .cg-split--flip { grid-template-columns: 1fr; }
  .cg-split--flip .cg-split__media { order: 0; }
  .cg-split--flip .cg-split__text { order: 0; }
}

/* ── Farbband (Call to action / Open positions) ────────────────────────── */
.cg-band {
  margin-top: var(--cg-section-gap);
  background: var(--color-accent-900);
  color: var(--color-bg);
  padding: clamp(44px, 6vw, 72px) var(--cg-gutter);
}
.cg-band .cg-eyebrow { color: inherit; opacity: 0.7; }
.cg-band a { color: inherit; }
/* Der invertierte Knopf trägt seine eigene Farbe — sonst erbt er im Farbband
   den hellen Text und verschwindet auf seinem hellen Grund. */
.cg-band .cg-btn--invert { color: var(--color-accent-900); }
.cg-band p { font-size: 18px; margin-bottom: 24px; }
.cg-band p { opacity: 0.9; }

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.cg-footer {
  padding: clamp(28px, 4vw, 40px) var(--cg-gutter) clamp(36px, 5vw, 56px);
  display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap;
  font-size: 14px; line-height: 1.6; color: var(--color-neutral-700);
}
.cg-footer img { height: 40px; width: auto; }

/* Logo und Anschrift bilden eine eigene Zeile innerhalb der Fußzeile.
   Im Entwurf waren beide Geschwister im Flex-Kasten der Fußzeile selbst; das
   trägt nur, solange nichts dazwischenliegt. Sobald ein Modul eine Hülle um
   seinen Inhalt legt, wird aus zwei Flex-Elementen eines und das Logo rutscht
   in eine eigene Zeile. Diese Regel ist dagegen unempfindlich. */
.cg-footer__brand {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 36px);
  flex-wrap: wrap; min-width: 0;
}
.cg-footer__logo { flex: 0 0 auto; line-height: 0; }
.cg-footer__logo img { display: block; }
.cg-footer__address { min-width: 0; }
.cg-footer__end { margin-left: auto; color: var(--color-neutral-600); }
@media (max-width: 575.98px) { .cg-footer__end { margin-left: 0; } }

/* ── Modul-Titel (Chrome) ──────────────────────────────────────────────── */
/* Kein margin-top: die Polsterung von .cg-section liefert den Abstand bereits.
   Beides zusammen ergab 176px statt 88px zwischen den Sektionen. */
.cg-module__title { /* wird meist als .cg-eyebrow gerendert, siehe Chrome */ }

/* ── Joomla-Ausgabe einpassen ──────────────────────────────────────────── */
.com-content-article__body ul, .com-content-article__body ol { padding-left: 1.2em; }
.blog-items { display: grid; gap: clamp(20px, 3vw, 32px); }
.breadcrumb {
  font-family: var(--font-heading); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0; margin: 0 0 var(--space-4); background: transparent;
}
.pagination { gap: 6px; }
.pagination .page-link {
  border-radius: 0; border-color: var(--color-divider);
  color: var(--color-text); background: transparent;
}
.pagination .active .page-link { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.alert { border-radius: 0; }

/* Bootstrap-Grundfarben an das System angleichen */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-accent-700);
  --bs-link-hover-color: var(--color-accent);
  --bs-border-radius: 0;
  --bs-border-color: var(--color-divider);
}

/* ── Druck ─────────────────────────────────────────────────────────────── */
@media print {
  .cg-header, .cg-band, .cg-burger, .cg-offcanvas { display: none !important; }
  .cg-frame::before { content: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}