/* ===========================================================
   schickerling.cc – Custom CSS für Joomla 6 "Cassiopeia Extended"
   Datei: /media/templates/site/cassiopeia_extended/css/user.css
   =========================================================== */

/* ---- 1. Eigene Schriften (selbst gehostet, DSGVO-konform) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('/media/templates/site/cassiopeia_extended/fonts/fraunces-variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/media/templates/site/cassiopeia_extended/fonts/inter-variable.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --scc-primary: #C66005;      /* scc-Orange, Akzentfarbe */
  --scc-primary-wash: rgba(198,96,5,.09);  /* getönte Fläche, z. B. Statement-Band */
  --scc-primary-soft: rgba(198,96,5,.15);  /* etwas kräftiger, z. B. Hover-Zustände */
  --scc-ink: #292929;          /* Fließtext dunkel */
  --scc-muted: #757575;        /* Sekundärtext */
  --scc-muted-2: #A0A0A0;
  --scc-line: #e4dcc9;
  --scc-font-serif: 'Fraunces', Georgia, serif;
  --scc-font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* ---- 2. Grundschriften ---- */
body {
  font-family: var(--scc-font-sans);
  /* Sicherheitsnetz für den 100vw-Vollbild-Trick beim Kopfbild (Abschnitt 9):
     100vw kann minimal breiter sein als der sichtbare Viewport, wenn ein
     Scrollbalken Platz braucht – das würde sonst einen waagerechten
     Scrollbalken erzeugen. */
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--scc-font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- 3. Überschriften-Hierarchie (Ü1–Ü4) ----
   Größen für H1–H3 stehen im Reiter "Schrifteinstellungen" des Stils.
   H4 wird hier gesetzt, da dafür kein eigenes UI-Feld existiert. */
h1, .h1 { color: var(--scc-primary); }
h2, .h2 { color: var(--scc-primary); font-size: 1.5rem; }
h3, .h3 { color: var(--scc-ink); font-weight: 600; }
h4, .h4 {
  color: var(--scc-muted);
  font-family: var(--scc-font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- 4. Fließtext & Aufzählungen ohne Nummer (»-Marker) ---- */
p, li {
  hyphens: auto;
}
ul:not(.nav):not(.pagination):not(.mod-menu__sub):not(.scc-toc) {
  list-style: none;
  padding-left: 0;
}
ul:not(.nav):not(.pagination):not(.mod-menu__sub):not(.scc-toc) li {
  position: relative;
  padding-left: 2.1em;
  margin-bottom: 0.6em;
}
/* Kleiner Kreis, gleiche Bauweise wie die TOC-Nummern-Kreise (Abschnitt 10),
   aber bewusst deutlich kleiner (1.5em statt 48px) – Hierarchie-Signal:
   gleiche Familie, aber klar als "einfache Liste" statt "wichtige,
   nummerierte Karte" erkennbar. Flex-Zentrierung statt Zeilenbasis löst
   auch den vorherigen Vertikal-Versatz durch die größere Schrift. */
ul:not(.nav):not(.pagination):not(.mod-menu__sub):not(.scc-toc) li::before {
  content: "\00bb";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--scc-primary-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--scc-primary);
  font-weight: 700;
  font-size: 0.8em;
}

/* ---- 5. Nummerierte Liste (für Leistungs-Listen o. Ä.) ----
   Textstart einheitlich bei 66px ab Kastenkante – derselbe Wert wie bei
   den Kreis-Karten (Abschnitt 10) und der Statement-Variante weiter unten,
   damit der Fließtext bei allen Nummerierungs-Varianten auf derselben
   senkrechten Linie beginnt, unabhängig von Kreis/Zahl/Kasten. */
ol {
  counter-reset: scc-num;
  list-style: none;
  padding-left: 0;
}
ol > li {
  counter-increment: scc-num;
  position: relative;
  padding-left: 66px;
  margin-bottom: 0.9em;
}
ol > li::before {
  content: counter(scc-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.1em;
  font-family: var(--scc-font-serif);
  font-weight: 600;
  color: var(--scc-primary);
  font-size: 1.1rem;
}

/* ---- 6. Zitate ---- */
blockquote {
  font-family: var(--scc-font-serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-left: 0;
  padding-left: 0;
  color: var(--scc-ink);
}
blockquote p::before {
  content: "\201C";
  color: var(--scc-primary);
  font-weight: 700;
  font-size: 1.3em;
  margin-right: 0.05em;
}
blockquote footer,
blockquote .cite {
  font-family: var(--scc-font-sans);
  color: var(--scc-muted);
  font-size: 0.9rem;
}

/* ---- 7. Navigation: »-Hover-Marker, ›-Marker für Unter-Navigation ---- */
ul.nav li a {
  padding-left: 1.1em;
  position: relative;
}
ul.nav li a::before {
  content: "\00bb";
  position: absolute;
  left: 0;
  color: var(--scc-primary);
  opacity: 0;
  transition: opacity .15s ease;
}
ul.nav li a:hover::before,
ul.nav li a:focus::before {
  opacity: 1;
}
ul.nav li a:hover,
ul.nav li a:focus {
  color: var(--scc-primary);
}
ul.nav li ul li a {
  padding-left: 1.1em;
}
ul.nav li ul li a::before {
  content: "\203a"; /* › */
}

/* ---- 8. Footer: schlichte Fußzeile ----
   Position: ".container-bottom-b" – NICHT bottom-a. Seit das Kontakt-Modul
   (Abschnitt 15) in bottom-a liegt, wurde das Footer-Modul nach bottom-b
   verschoben (siehe Modul-Verwaltung). Falls die Reihenfolge/Positionen
   nochmal geändert werden, müssen diese Selektoren entsprechend
   mitwandern. Laut Mustervorlage stehen vor Footer-Links außerdem bewusst
   KEINE »-Marker (anders als Haupt-Navigation), daher hier nur eine
   Hover-Farbe, kein ::before. */
.container-bottom-b a {
  text-decoration: none;
  color: var(--scc-muted);
}
.container-bottom-b a:hover {
  color: var(--scc-primary);
}
/* Graue Umrandung entfernen – vermutlich Cassiopeias Modul-Chrome-Stil
   ("Card"/"Well"). Sauberer wäre, das direkt am Footer-Modul im Backend
   (Reiter "Erweitert" → "Modul-Stil" → "Kein") umzustellen; hier zur
   Sicherheit zusätzlich per CSS für die gängigen Bootstrap-Card-Klassen. */
.container-bottom-b,
.container-bottom-b .card,
.container-bottom-b .moduletable {
  border: none !important;
  box-shadow: none !important;
}
/* Die vollbreite orange Trennlinie sitzt am unteren Rand des
   Kontaktbereichs (Abschnitt 15, .scc-contact), nicht hier am Footer
   selbst – so trennt sie sauber Kontaktbereich und Footer-Links,
   unabhängig davon, in welcher Position welches Modul steht. Dieser
   padding-top ist der Abstand zwischen der Linie und den Footer-Links
   darunter. Gleicher Wert wie figure.item-image margin-top (Abschnitt 9),
   damit Abstand oben (Nav → Bild) und unten (Linie → Footer) exakt
   übereinstimmen. */
.container-bottom-b {
  padding-top: 2.5rem;
}

/* ---- 9. Kopfbild-Bereich (Masthead) ruhig rahmen ---- */
/* Korrektur: ".mod-custom.banner-overlay" trifft nichts – das Kopfbild liegt
   in "figure.item-image". */
figure.item-image {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  /* War 0 (verließ sich auf Cassiopeias eigenen, unbekannten Abstand
     zwischen Nav-Zeile und Inhalt). Jetzt fest auf denselben Wert wie
     .container-bottom-b (Abschnitt 8) gesetzt, damit der Abstand oben
     (Nav → Bild) und unten (Linie → Footer) nachweisbar identisch sind,
     statt sich auf einen unbekannten Theme-Default zu verlassen. */
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-top: 3px solid var(--scc-primary);
  border-bottom: 3px solid var(--scc-primary);
  overflow: hidden;
}
figure.item-image img {
  display: block;
  width: 100%;
  height: auto;
}
/* dezente Tönung von links – rein optisch, keine neue Datei nötig */
figure.item-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(198,96,5,.20) 0%, rgba(198,96,5,.02) 45%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Auf Mobil würde das feste 4:1-Panoramaformat zu einem kaum erkennbaren
   Streifen gestaucht (siehe Konzeptdokument, Kapitel 4.2) – hier stattdessen
   ein ruhiger Bildausschnitt in fester Höhe statt Stauchung. Ein pro Bild
   eigens gewählter Ausschnitt (Art-Direction) wäre der nächste, feinere
   Schritt, sobald die Bildauswahl dafür ansteht. */
@media (max-width: 640px) {
  figure.item-image img {
    height: 200px;
    object-fit: cover;
    object-position: center;
  }
}

/* ---- 10. Nummerierte Leistungs-Karten (»TOC-Look«) ----
   Für Aufzählungen, die als Karten mit runder Nummer wirken sollen, statt
   als einfache »-Liste (Abschnitt 4 bleibt für normale Aufzählungen ohne
   Nummer bestehen). Anwendung: der <ol> im Artikel-Editor (Code-Ansicht)
   die Klasse "scc-toc" geben – die gewohnte Schreibweise
   "<li><strong>Titel: </strong>Text</li>" bleibt dabei unverändert.
   Bewusst <ol>, nicht <ul>: Die Einträge sind nummeriert (01, 02, 03 …),
   semantisch ist das eine geordnete Liste. Technisch ändert das nichts an
   der Zählweise (die kam schon vorher aus CSS-Countern, nicht aus dem
   Tag) – nur die Auszeichnung wird jetzt korrekt. Bereits bestehende
   Artikel mit "<ul class="scc-toc">" müssen einmalig manuell auf <ol>
   umgestellt werden, sonst greifen die Kreis-Regeln nicht mehr. */
ol.scc-toc {
  list-style: none;
  padding-left: 0;
  border-top: 1px solid var(--scc-line);
  margin: 1.5rem 0;
  counter-reset: scc-toc;
}
/* Hinweis: bewusst KEIN CSS-Grid für den Listeneintrag – sobald "strong"
   dort zu display:block wird, würde Grid daraus ein drittes, eigenständiges
   Grid-Feld machen (neben Kreis und Fließtext), obwohl nur zwei Spalten
   definiert sind, und den nachfolgenden Text in die schmale Kreis-Spalte
   zwingen. Der Kreis wird deshalb frei positioniert, der Fließtext läuft
   ganz normal darunter/dahinter, eingerückt per padding-left. */
ol.scc-toc li {
  counter-increment: scc-toc;
  position: relative;
  padding: 1.2rem 0 1.2rem 66px;
  min-height: 48px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--scc-line);
}
ol.scc-toc li::before {
  content: counter(scc-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--scc-primary-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--scc-font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--scc-primary);
  transition: background .15s ease;
}
ol.scc-toc li strong {
  display: block;
  font-family: var(--scc-font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--scc-ink);
  margin-bottom: 0.2em;
  transition: color .15s ease;
}
ol.scc-toc li:hover::before { background: var(--scc-primary-soft); }
ol.scc-toc li:hover strong { color: var(--scc-primary); }
/* Optionaler Pfeil beim Hover – wirkt nur, wenn der Listeneintrag selbst
   ein Link ist, z. B. "<li><a href="..."><strong>Titel: </strong>Text</a></li>" */
ol.scc-toc li a {
  text-decoration: none;
  color: inherit;
}
ol.scc-toc li a::after {
  content: "\00bb";
  position: absolute;
  right: 0;
  top: 1.3rem;
  color: var(--scc-primary);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .18s ease;
}
ol.scc-toc li a:hover::after { opacity: 1; transform: translateX(0); }
@media (max-width: 620px) {
  ol.scc-toc li { padding-left: 56px; }
  ol.scc-toc li::before { width: 40px; height: 40px; }
}

/* ---- 11. Statement-Band (Leitsatz, Zitat, "Stimmen zum Buch") ----
   Getönte Fläche mit einem hervorgehobenen Satz. Mehrere Blöcke
   hintereinander möglich (z. B. für mehrere Stimmen zu einem Buch).
   Anwendung im Artikel-Editor (Code-Ansicht):
   <div class="scc-statement">
     <p>Der Leitsatz oder das Zitat.</p>
     <cite>– Name, Funktion</cite>
   </div> */
.scc-statement {
  background: var(--scc-primary-wash);
  border-radius: 4px;
  padding: 1.8rem 2rem;
  margin: 1.5rem 0;
}
.scc-statement p {
  font-family: var(--scc-font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--scc-ink);
  margin: 0;
}
.scc-statement cite {
  display: block;
  font-style: normal;
  font-family: var(--scc-font-sans);
  color: var(--scc-muted);
  font-size: 0.9rem;
  margin-top: 0.8em;
}
.scc-statement + .scc-statement { margin-top: -0.5rem; }

/* Variante, entstanden aus einer Verwechslung, aber gut genug zum Behalten:
   getönte Fläche (wie oben) plus normale nummerierte Liste (Abschnitt 5)
   statt Zitat-Absatz. Anwendung: <ol class="scc-statement"> mit den
   gewohnten <li><strong>Titel: </strong>Text</li>-Zeilen.
   Linkes Kastenpolster bewusst fest in px (32px, deckt sich mit den
   übrigen Seiten des Kastens) statt dem geerbten "2rem" – nur so lässt
   sich der Rest exakt bis zur gemeinsamen 66px-Textlinie ausrechnen,
   unabhängig von der Root-Schriftgröße. */
ol.scc-statement {
  padding-left: 32px;
}
ol.scc-statement > li {
  padding-left: 34px; /* 32px Kastenpolster + 34px = 66px, wie überall sonst */
  margin-bottom: 1.1rem;
}
ol.scc-statement > li:last-child {
  margin-bottom: 0;
}

/* Gleiche Kombination, aber mit Kreis-Nummerierung statt einfacher Zahl:
   <ol class="scc-toc scc-statement"> mit den gewohnten
   "<li><strong>Titel: </strong>Text</li>"-Zeilen. Anders als bei
   ol.scc-statement (oben) soll der Kreis hier NICHT am Rand kleben,
   daher – anders als dort – das linke Innenpolster der Fläche gezielt
   wiederhergestellt: ol.scc-toc setzt padding-left:0 mit höherer
   Spezifität als .scc-statement und würde es sonst kassieren. */
ol.scc-toc.scc-statement {
  padding-left: 2rem;
}

/* Dritte Kombination: getönte Fläche mit der einfachen »-Kreismarkierung
   aus Abschnitt 4 (kein Nummern-/TOC-Bezug) – für nicht-sequenzielle
   Aufzählungen, die trotzdem hervorgehoben werden sollen, z. B.
   "Das ist enthalten:". Anwendung: <ul class="scc-statement"> mit
   normalen <li>-Zeilen. Gleicher Grund für die Zeile wie oben: die
   generische Aufzählungs-Regel (Abschnitt 4) setzt padding-left:0 mit
   höherer Spezifität als .scc-statement und würde das Innenpolster sonst
   kassieren. */
ul.scc-statement {
  padding-left: 2rem;
}

/* ---- 12. Zweispaltiger Abschnitt (Text + Bild) ----
   Für Kontaktbereiche, Vorstellungen o. Ä. – auf Mobil einspaltig.
   Anwendung im Artikel-Editor (Code-Ansicht):
   <div class="scc-split">
     <div>… Überschrift, Text, Links …</div>
     <figure><img src="…" alt="…"></figure>
   </div> */
.scc-split {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 2rem;
  align-items: center;
  margin: 2rem 0;
}
.scc-split figure { margin: 0; }
.scc-split img {
  width: 100%;
  border-radius: 10px;
  display: block;
  box-shadow: 0 14px 30px rgba(28,26,23,.14);
}
@media (max-width: 760px) {
  .scc-split { grid-template-columns: 1fr; }
  .scc-split figure { order: -1; max-width: 320px; }
}

/* ---- 13. Kopf-Navigation: horizontal + Dropdown + mobiles Drawer ----
   Voraussetzung: Das Menü-Modul wurde im Backend von "sidebar-right" auf
   dieselbe Position wie das Logo-Modul verschoben (siehe Anleitung), mit
   verborgenem Modul-Titel. ".container-nav" ist die stabile Grid-Position
   aus Cassiopeia Extended, kein modulspezifischer Selektor. */
.header.position-sticky {
  z-index: 200;
}
.container-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: nowrap;
}
/* Logo auf ein Header-taugliches Maß bringen – ohne CSS rendert es nahe
   seiner nativen Größe von 300×70px, viel zu dominant neben der Nav-Zeile. */
.container-nav .mod-custom:first-child img {
  height: 44px;
  width: auto;
  display: block;
}

/* -- horizontales Hauptmenü (Desktop) --
   margin-left:auto statt justify-content:space-between auf dem Container:
   So hängt sich die Nav an den rechten Rand, unabhängig davon, ob danach
   im DOM noch unsichtbare Module (Burger-Wrapper, Chat-Widget-Script)
   folgen, die bei space-between sonst selbst die "letzte Position"
   beanspruchen und die Nav von der Kante wegschieben würden. */
.container-nav .mod-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
  flex-wrap: nowrap !important;
}
.container-nav .mod-menu > li { position: relative; flex-shrink: 0 !important; }
.container-nav .mod-menu a {
  white-space: nowrap !important;
  hyphens: none;
}
.container-nav .mod-menu__toggle-sub {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--scc-muted);
  padding: 0 0 0 .3em;
  vertical-align: middle;
}
.container-nav .mod-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--scc-line);
  border-radius: 4px;
  padding: .35rem 0;
  width: max-content;
  max-width: 280px;
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
  display: none;
  z-index: 60;
  list-style: none;
}
.container-nav .mod-menu__toggle-sub[aria-expanded="true"] ~ .mod-menu__sub,
.container-nav .mod-menu > li:hover > .mod-menu__sub {
  display: block;
}
/* Eigenständig definiert, unabhängig von Abschnitt 7 – im offenen Panel
   soll der Marker immer sichtbar sein, kein Hover-Fade pro Zeile. */
.container-nav .mod-menu__sub li a {
  display: block;
  position: relative;
  padding: .5rem 1.2rem .5rem 2.1rem;
  font-size: .92rem;
  line-height: 1.3;
  white-space: nowrap;
  /* !important bestätigt nötig: Ursache war vermutlich eine Cassiopeia-
     eigene Regel mit heller/weißer Schriftfarbe (für ein dunkles
     Dropdown gedacht), die auf unserem weißen Panel unlesbar wirkte. Die
     genaue Gegenregel wurde nie identifiziert (per DevTools kaum prüfbar,
     da schon das Anklicken zum Inspizieren Hover auslöst und die Zeile
     scheinbar "repariert") – das Erzwingen der Farbe hat das Problem aber
     nachweislich behoben. */
  color: var(--scc-ink) !important;
  text-decoration: none;
}
.container-nav .mod-menu__sub li a::before {
  content: "\203a";
  position: absolute;
  left: 1.1rem;
  top: .5rem;
  color: var(--scc-primary);
  font-weight: 700;
  opacity: 1;
}
.container-nav .mod-menu__sub li a:hover {
  background: var(--scc-primary-wash);
  color: var(--scc-primary);
}

/* -- Burger-Button (nur mobil sichtbar) --
   Drei echte <span>-Elemente statt einem Span + zwei generierten
   Pseudo-Elementen – robuster, falls ::before/::after mit leerem Inhalt
   im aktuellen Theme/Browser Probleme machen (siehe Hero-Akzent). */
.scc-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 4px;
  border: 1px solid var(--scc-line);
  background: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex: 0 0 auto;
}
.scc-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--scc-ink);
}

/* -- Off-Canvas-Drawer (mobil) -- */
.scc-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(84vw, 340px);
  background: #fff;
  box-shadow: -12px 0 32px rgba(0,0,0,.14);
  transform: translateX(100%);
  transition: transform .3s ease;
  z-index: 100;
  padding: 26px 24px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--scc-primary);
}
.scc-drawer.scc-open { transform: translateX(0); }
.scc-drawer a {
  text-decoration: none;
  color: var(--scc-ink);
  font-size: 16px;
  padding: 13px 4px 13px 1.6em;
  border-bottom: 1px solid var(--scc-line);
  font-weight: 500;
  position: relative;
}
.scc-drawer a::before {
  content: "\00bb";
  position: absolute;
  left: 0.3em;
  color: var(--scc-primary);
  font-weight: 700;
}
.scc-drawer a.scc-sub {
  padding: 10px 4px 10px 2.8em;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--scc-muted);
  background: var(--scc-primary-wash);
  border-bottom-color: transparent;
}
.scc-drawer a.scc-sub::before {
  content: "\203a";
  left: 1.6em;
}
.scc-drawer a.scc-sub + a:not(.scc-sub) {
  margin-top: 8px;
}
.scc-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}
.scc-scrim.scc-show { opacity: 1; pointer-events: auto; }

@media (max-width: 820px) {
  /* !important nötig: Abschnitt 13 setzt "display: flex !important" auf
     .mod-menu (gegen das Umbrechen bei mittleren Breiten) – eine normale
     Regel könnte das nie überschreiben, unabhängig von der Fensterbreite.
     Das war die Ursache dafür, dass Menüzeile UND Burger gleichzeitig
     sichtbar waren. */
  .container-nav .mod-menu { display: none !important; }
  .container-nav .mod-custom:has(.scc-burger) { margin-left: auto; }
  .scc-burger { display: inline-flex; }
}

/* ---- 14. Seiten-Layout: Leseweite, Abstände, Hero-Akzent ----
   Seit die Sidebar weg ist, läuft der Artikeltext über die volle
   Grid-Breite – das ist für Fließtext zu breit für angenehmes Lesen.
   Bild bleibt bewusst volle Breite (Wirkung), nur der Text bekommt eine
   Lesebreite spendiert; linksbündig, nicht zentriert, damit Bildkante und
   Textkante auf einer Linie bleiben. */
.com-content-article__body {
  max-width: 720px;
}

/* Rhythmus: großzügige, einheitliche Abstände statt Default-Dichte */
.com-content-article__body h1 {
  margin: 0 0 0.6em;
}
.com-content-article__body p {
  margin: 0 0 1.3em;
  line-height: 1.7;
}
.com-content-article__body h3 {
  margin: 2rem 0 0.8em;
}
.com-content-article__body blockquote {
  margin: 1.6rem 0;
}
.com-content-article__body blockquote p {
  margin-bottom: 1rem;
}

/* Links im Fließtext: kein Unterstrich, nur beim Hover orange hervorheben */
.com-content-article__body a {
  color: inherit;
  text-decoration: none;
}
.com-content-article__body a:hover {
  color: var(--scc-primary);
}

/* Hero-Akzent: kleiner Strich über der Artikel-Überschrift, wie im Entwurf.
   Fünf Anläufe mit ::before sind gescheitert, obwohl DevTools die Regel als
   greifend anzeigte – vermutlich eine Eigenart des Themes, die ich ohne
   Live-Zugriff nicht weiter eingrenzen kann. Deshalb jetzt als echtes,
   sichtbares Element statt Pseudo-Element: einmal manuell im Artikel (Code-
   Ansicht) direkt vor der Überschrift einfügen:
   <div class="scc-mark"></div> */
.scc-mark {
  display: block;
  width: 64px;
  height: 5px;
  background: var(--scc-primary);
  margin: 0 0 1.1rem;
}

/* ---- 15. Kontaktbereich vor dem Footer (Modul, alle Seiten) ----
   Kein Artikel-Baustein wie scc-toc/scc-statement, sondern für ein
   eigenes "Eigenes Modul" gedacht. Aktueller Stand: liegt in Position
   "bottom-a", das Footer-Modul (Abschnitt 8) wurde dafür nach "bottom-b"
   verschoben – bottom-b rendert bei Cassiopeia Extended NACH bottom-a,
   nicht davor, daher die Positionen so und nicht andersherum. Editor auf
   "Kein Editor" stellen, siehe Lehre vom Burger-Modul. Zweispaltig wie
   .scc-split, aber mit eigener Optik (Kicker, Trennlinie unten,
   Link-Pfeile statt Bild+Fließtext). Die vollbreite Trennlinie unten
   übernimmt die Rolle, die vorher am Footer selbst saß – sie trennt
   Kontaktbereich (bottom-a) und Footer-Links (bottom-b) unabhängig davon,
   in welchen Positionen beide Module tatsächlich stehen. HTML-Vorlage
   siehe separate Datei "kontakt-modul.html". */
.scc-contact {
  position: relative;
  border-top: 1px solid var(--scc-line);
}
.scc-contact::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 3px;
  transform: translateX(-50%);
  background: var(--scc-primary);
}
.scc-contact-wrap {
  /* Bewusst KEIN eigenes max-width/margin:auto mehr – das zentrierte den
     Block unabhängig vom Seitenraster und stand dadurch nicht auf einer
     Linie mit H1/Fließtext/Footer-Links, die alle links im normalen
     Joomla-Container ausgerichtet sind. Ohne eigene Zentrierung übernimmt
     der Block automatisch dieselbe Breite/Ausrichtung wie der Rest der
     Seite. */
  /* unterer Wert bewusst größer als der obere – das ist der Abstand
     zwischen Fließtext/Links und der orangen Trennlinie darunter.
     Kein eigenes horizontales Padding mehr (war zusätzlich zum
     Container-Gutter, dadurch minimal weiter rechts als H1/Footer-Links) –
     jetzt übernimmt allein der native Container-Gutter die Seitenränder. */
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.scc-contact .scc-kicker {
  font-family: var(--scc-font-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scc-primary);
  font-weight: 700;
  margin-bottom: .5em;
  display: block;
}
.scc-contact h2 {
  /* bewusst dunkel statt der sonst global orangen H2 (Abschnitt 3) – der
     Kicker trägt hier schon die Akzentfarbe, zwei orange Elemente
     nebeneinander wirken unruhig, siehe Mustervorlage */
  color: var(--scc-ink);
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  max-width: 26ch;
  margin: 0;
}
.scc-contact .scc-contact-lead {
  color: var(--scc-muted);
  max-width: 52ch;
  margin: .6rem 0 1.4rem;
}
.scc-contact-links {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
}
/* Als Button statt Unterstrich-Link – passt besser zu einem CTA-Bereich,
   der aktiv zur Kontaktaufnahme auffordern soll. Bewusst NICHT die
   generische vollrunde Pille (das sieht auf vielen Agentur-Seiten gleich
   aus, u. a. bei pasamonik-schickerling.de) – stattdessen die eckige
   4px-Rundung, die auch .scc-statement nutzt, plus der »-Marker, der sich
   durch die ganze Seite zieht (Navigation, Listen, Drawer). Beides ist
   eindeutig scc-eigene Formsprache statt Standard-CTA-Button. */
.scc-contact .scc-link-arrow {
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding: .7em 1.5em .7em 2.1em;
  border: 1.5px solid var(--scc-primary);
  border-radius: 4px;
  color: var(--scc-primary);
  font-weight: 600;
  font-size: .95rem;
  transition: background .15s ease, color .15s ease;
}
.scc-contact .scc-link-arrow::before {
  content: "\00bb";
  position: absolute;
  left: .9em;
  font-weight: 700;
}
.scc-contact .scc-link-arrow:hover {
  background: var(--scc-primary);
  color: #fff;
}
.scc-contact figure {
  margin: 0;
}
.scc-contact img {
  width: 100%;
  border-radius: 10px;
  display: block;
  box-shadow: 0 14px 30px rgba(28,26,23,.14);
}
@media (max-width: 760px) {
  .scc-contact-wrap { grid-template-columns: 1fr; }
  .scc-contact figure { order: -1; max-width: 280px; margin: 0 auto; }
}