/* ==========================================================================
   ansiba.at – Design-Vorschlag "Caipirinha" für Cassiopeia (Joomla 6)
   Hell, ruhig, viel Weißraum; Grün als Hauptfarbe, Lime nur als Akzent.
   Alle Text-/Hintergrund-Kombinationen erfüllen WCAG 2.2 AA (meist AAA).
   ========================================================================== */

:root {
  /* Palette */
  --ab-ink: #1c2321;            /* Fließtext            16.0:1 auf Weiß */
  --ab-muted: #56615c;          /* Nebentext             6.4:1 */
  --ab-bg: #d4dec9;             /* Seitenhintergrund (Salbei); Text 11.5:1, Links 4.6:1 */
  --ab-surface: #f3f5ec;        /* Karten, Inhalt, Kopfbereich (Creme); Text 14.5:1 */
  --ab-border: #dce3d2;
  --ab-tint: #e5ecd8;           /* Hover-Flächen; Links darauf 5.3:1 */
  --ab-primary: #2f5d3a;        /* Buttons, aktive Menüpunkte  7.6:1 */
  --ab-primary-dark: #1f3d27;   /* Überschriften, Hover       12.0:1 */
  --ab-link: #3a6b16;           /* Links                       6.4:1 */
  --ab-link-hover: #244710;
  --ab-accent: #8dc63f;         /* Lime – nur dekorativ, nie als Textfarbe */
  --ab-warm: #9a4a12;           /* warmer Akzent für Labels    6.3:1 */
  --ab-footer-bg: #1f2e24;
  --ab-footer-text: #e6ede2;
  --ab-footer-link: #bfe08a;

  --ab-radius: 14px;
  --ab-radius-sm: 8px;
  --ab-shadow: 0 1px 2px rgba(28, 35, 33, .06), 0 8px 24px rgba(28, 35, 33, .10);
  --ab-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Cassiopeia / Bootstrap auf die Palette umstellen */
  --cassiopeia-color-primary: var(--ab-primary);
  --cassiopeia-color-link: var(--ab-link);
  --cassiopeia-color-hover: var(--ab-link-hover);
  --cassiopeia-font-family-body: var(--ab-font);
  --cassiopeia-font-family-headings: var(--ab-font);
  --link-color: var(--ab-link);
  --link-color-rgb: 58, 107, 22;
  --link-hover-color: var(--ab-link-hover);
  --link-hover-color-rgb: 36, 71, 16;
  --body-color: var(--ab-ink);
  --body-bg: var(--ab-bg);
}

/* --- Grundlayout -------------------------------------------------------- */
body.site {
  background: var(--ab-bg);
  color: var(--ab-ink);
  font-family: var(--ab-font);
  font-size: 1.0625rem;            /* 17px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.site-grid {
  background: transparent;
  row-gap: 0;
}
::selection {
  background: var(--ab-tint);
  color: var(--ab-ink);
}
:focus-visible {
  outline: 3px solid var(--ab-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Links ---------------------------------------------------------------- */
a {
  color: var(--ab-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
a:hover,
a:focus {
  color: var(--ab-link-hover);
}

/* --- Überschriften ------------------------------------------------------- */
h1, h2, h3, h4,
.page-header h1, .page-header h2 {
  font-family: var(--ab-font);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--ab-primary-dark);
}
h1, .page-header h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2, .page-header h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
h3 { font-size: 1.2rem; }
.page-header h2 a,
.item-title a {
  color: inherit;
  text-decoration: none;
}
.page-header h2 a:hover,
.item-title a:hover {
  color: var(--ab-link);
  text-decoration: underline;
}

/* --- Kopfbereich: weiß, schlank, dezente Linie ---------------------------- */
.container-header {
  background: var(--ab-surface);
  background-image: none;
  color: var(--ab-ink);
  border-bottom: 1px solid var(--ab-border);
  box-shadow: 0 2px 12px rgba(28, 35, 33, .04);
}
.container-header .grid-child {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.container-header .navbar-toggler {
  color: var(--ab-ink);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-sm);
}

/* Hauptmenü: kompakter als Cassiopeia-Standard, damit alles in eine Zeile passt */
.container-header .metismenu.mod-menu .metismenu-item.level-1 {
  padding: .55em .7em;
  font-size: 1rem;
  font-weight: 500;
}
/* Cassiopeia setzt color:#fff auf die Liste, Links erben per currentColor -> an der Liste umstellen */
.container-header .mod-menu,
.container-header .mod-menu a,
.container-header .mod-menu button {
  color: var(--ab-ink);
}
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > button:hover {
  color: var(--ab-primary);
}
/* aktiver Punkt: grüne Schrift + Lime-Strich statt Unterstreichung */
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.active > button {
  color: var(--ab-primary);
  text-decoration: none;
}
.container-header .metismenu > li > a:after,
.container-header .metismenu > li > button:before {
  height: 3px;
  border-radius: 3px;
  opacity: 1;
}
.container-header .metismenu > li > a:hover:after,
.container-header .metismenu > li > button:hover:before,
.container-header .metismenu > li.active > a:after,
.container-header .metismenu > li.active > button:before {
  background: var(--ab-accent);
}

/* Dropdowns */
.metismenu.mod-menu .mm-collapse {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius-sm);
  box-shadow: var(--ab-shadow);
  padding: .35rem;
  min-width: 14rem;
}
.metismenu.mod-menu .mm-collapse > li {
  padding: 0;
  font-size: .975rem;
}
.metismenu.mod-menu .mm-collapse > li > a {
  display: block;
  width: 100%;
  padding: .45rem .75rem;
  border-radius: 6px;
  color: var(--ab-ink);
  text-decoration: none;
}
.metismenu.mod-menu .mm-collapse > li > a:hover,
.metismenu.mod-menu .mm-collapse > li.active > a {
  background: var(--ab-tint);
  color: var(--ab-primary-dark);
}

/* --- Inhalt als helle Karte ---------------------------------------------- */
/* Cassiopeia: .container-component enthält Brotkrümel, main-top-Module, <main>, main-bottom.
   Nur <main> wird zur Karte, damit keine Karten ineinander verschachtelt werden. */
.container-component > main {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow);
  padding: clamp(1.1rem, 2.5vw, 2.25rem);
  margin-top: 1em;
  margin-bottom: 1em;
}
/* Home: der Kategorie-Blog ist absichtlich leer (Spruch steht links) -> leere Karte ausblenden,
   Systemmeldungen (z. B. nach der Anmeldung) bleiben sichtbar */
.itemid-435 .container-component > main:not(:has(joomla-alert, .alert, .blog-item)) {
  display: none;
}
/* Aktuelles (938), Index (571), Postings (573) zeigen einen leeren Platzhalter-Beitrag (ID 223);
   der Inhalt kommt aus dem Modul darüber */
.itemid-938 .container-component > main:not(:has(joomla-alert, .alert)),
.itemid-571 .container-component > main:not(:has(joomla-alert, .alert)),
.itemid-573 .container-component > main:not(:has(joomla-alert, .alert)) {
  display: none;
}
.mod-breadcrumbs {
  margin: 1em 0 0;
  background: transparent;
}
.container-component img,
.mod-randomimage img {
  border-radius: var(--ab-radius-sm);
  max-width: 100%;
}
/* Blog: Beiträge durch feine Linien trennen */
.blog-items .blog-item + .blog-item,
.com-content-category-blog__items + .com-content-category-blog__items {
  border-top: 1px solid var(--ab-border);
  padding-top: 1.5rem;
}
.article-info,
.article-info a,
.breadcrumb,
.breadcrumb a {
  color: var(--ab-muted);
  font-size: .9rem;
}
.readmore .btn,
.btn-primary {
  --btn-bg: var(--ab-primary);
  --btn-border-color: var(--ab-primary);
  --btn-hover-bg: var(--ab-primary-dark);
  --btn-hover-border-color: var(--ab-primary-dark);
  --btn-color: #fff;
  --btn-hover-color: #fff;
  background-color: var(--ab-primary);
  border-color: var(--ab-primary);
  color: #fff;
  border-radius: var(--ab-radius-sm);
}
.btn-primary:hover,
.readmore .btn:hover {
  background-color: var(--ab-primary-dark);
  border-color: var(--ab-primary-dark);
  color: #fff;
}
blockquote {
  border-left: 4px solid var(--ab-accent);
  padding: .25rem 0 .25rem 1rem;
  color: var(--ab-muted);
}

/* --- Seitenleisten: Karten mit Label-Überschrift ------------------------- */
.sidebar-left.card,
.sidebar-right.card,
.main-top.card {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow);
  overflow: hidden;
}
.sidebar-left.card + .sidebar-left.card,
.sidebar-right.card + .sidebar-right.card {
  margin-top: 1rem;
}
.main-top.card {
  margin-top: 1em;
}
.sidebar-left .card-header,
.sidebar-right .card-header,
.main-top .card-header {
  background: transparent;
  border-bottom: 0;
  padding: 1rem 1.1rem .25rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ab-warm);
}
.sidebar-left .card-header::before,
.sidebar-right .card-header::before,
.main-top .card-header::before {
  content: "";
  display: inline-block;
  width: .9rem;
  height: 3px;
  margin-right: .5rem;
  vertical-align: middle;
  border-radius: 3px;
  background: var(--ab-accent);
}
.sidebar-left .card-body,
.sidebar-right .card-body {
  padding: .5rem 1.1rem 1rem;
  font-size: .975rem;
}
/* Link-Listen in Kästen (Kategorien, Beitragslisten, Menüs): grün = als Link erkennbar,
   kleiner Pfeil davor, Hover-Fläche */
.card-body ul.mod-list:not(.mod-articles-items),
.card-body ul.categories-module,
.card-body ul.category-module,
.card-body ul.latestnews {
  list-style: none;
  margin: 0;
  padding: 0;
}
.card-body ul.mod-list:not(.mod-articles-items) li a,
.card-body ul.categories-module li a,
.card-body ul.category-module li a,
.card-body ul.latestnews li a {
  display: block;
  position: relative;
  padding: .35rem .5rem .35rem 1.3rem;
  margin: 0 -.5rem;
  border-radius: 6px;
  color: var(--ab-link);
  font-weight: 500;
  text-decoration: none;
}
.card-body ul.mod-list:not(.mod-articles-items) li a::before,
.card-body ul.categories-module li a::before,
.card-body ul.category-module li a::before,
.card-body ul.latestnews li a::before {
  content: "›";
  position: absolute;
  left: .45rem;
  color: var(--ab-accent);
  font-weight: 700;
}
.card-body ul.mod-list:not(.mod-articles-items) li a:hover,
.card-body ul.categories-module li a:hover,
.card-body ul.category-module li a:hover,
.card-body ul.latestnews li a:hover,
.card-body ul li.active > a,
.card-body ul li.current > a {
  background: var(--ab-tint);
  color: var(--ab-link-hover);
  text-decoration: underline;
}

/* Neueste Beiträge (mod_articles, Kachel-Ansicht) */
.mod-articles-items.mod-articles-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem;
}
/* Listen-Ansicht (Aktuelles): Einträge untereinander mit Abstand */
.mod-articles-items:not(.mod-articles-grid) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mod-articles-items:not(.mod-articles-grid) > li + li {
  margin-top: .75rem;
}
.mod-articles-item {
  height: 100%;
  padding: 1rem 1.1rem;
  background: #fbfcf8;
  border: 1px solid var(--ab-border);
  border-top: 3px solid var(--ab-accent);
  border-radius: var(--ab-radius-sm);
  transition: box-shadow .15s, transform .15s;
}
.mod-articles-item:hover {
  box-shadow: var(--ab-shadow);
  transform: translateY(-2px);
}
.mod-articles-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 .4rem;
}
.mod-articles-title a {
  color: var(--ab-primary-dark);
  text-decoration: none;
}
.mod-articles-title a:hover {
  color: var(--ab-link);
  text-decoration: underline;
}
.mod-articles-item dl {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .9rem;
  margin: 0 0 .5rem;
  font-size: .85rem;
  color: var(--ab-muted);
}
.mod-articles-item dd {
  margin: 0;
}
.mod-articles-item p {
  font-size: .95rem;
  margin-bottom: .5rem;
}
.mod-articles-item img {
  display: none;              /* Bilder im Einleitungstext würden die Kacheln sprengen */
}
.mod-articles-item .readmore .btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ab-link);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.mod-articles-item .readmore .btn:hover {
  color: var(--ab-link-hover);
  background: none;
}
/* Spruch des Jahres (Modul-Klasse "spruch", nur auf Home) */
.card.spruch .card-body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ab-primary-dark);
}
.card.spruch .card-body center {
  border-left: 3px solid var(--ab-accent);
  padding-left: .85rem;
}
.card.spruch .card-body p {
  margin: 0 0 .4rem;
}
.card.spruch .card-body p:last-child {
  margin-bottom: 0;
}
/* Die Spruch-Beiträge bringen eine feste 400px-Box mit eigenen Farben/Schriften mit
   (<center><h3>Spruch 2026</h3><div style="width:400px ..."><h3>Zitat</h3><h3>Autor</h3></div></center>)
   -> an die Spaltenbreite und das Design anpassen */
.card.spruch .card-body center {
  display: block;
  text-align: left;
}
.card.spruch .card-body center[style] {
  border-left: 3px solid var(--ab-accent) !important;   /* falls ein Spruch inline-Styles am <center> hat */
}
.card.spruch .card-body [style] {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
}
.card.spruch .card-body center > h3:first-child {
  display: none;                  /* "Spruch 2026" – steht schon im Kastentitel */
}
.card.spruch .card-body h3 {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--ab-primary-dark);
  margin: 0;
}
/* Autorenzeile; [style]-Variante nötig, weil die allgemeine [style]-Regel oben sonst gewinnt */
.card.spruch .card-body h3 + h3,
.card.spruch .card-body h3[style] + h3[style] {
  margin-top: .6rem !important;
  font-family: var(--ab-font) !important;
  font-size: .9rem !important;
  font-style: normal;
  color: var(--ab-muted) !important;
}
.card.spruch .card-body h3 + h3::before {
  content: "— ";
}

/* Suche in der Seitenleiste */
.mod-finder .form-control {
  border-radius: var(--ab-radius-sm) 0 0 var(--ab-radius-sm);
  border-color: var(--ab-border);
}
.mod-finder .btn {
  border-radius: 0 var(--ab-radius-sm) var(--ab-radius-sm) 0;
}

/* --- Schriften in Inhalten vereinheitlichen -------------------------------
   Die Beiträge enthalten ~1.900 feste Schriftangaben aus alten Editoren/Word/Outlook
   (Arial, Trebuchet, Benguiat, Trendy, Calibri, Times …; Größen 8pt–22px).
   Statt die Beiträge zu ändern, werden die Angaben hier neutralisiert:
   - Schriftart: immer die Seitenschrift
   - Größe: kleine/normale Angaben -> normale Textgröße; große Angaben -> einheitlich etwas größer
   - Überschriften im Text: gemäßigte Größen
   (rem statt em, damit verschachtelte <span>s sich nicht aufaddieren) */
:is(.com-content-article__body, .com-content-category-blog__item, .category-desc,
    .mod-custom, .mod-articles-item) :is([style*="font-family"], font[face]) {
  font-family: inherit !important;
}
:is(.com-content-article__body, .com-content-category-blog__item, .category-desc,
    .mod-custom, .mod-articles-item) :is([style*="font-size"], font[size]) {
  font-size: inherit !important;
}
:is(.com-content-article__body, .com-content-category-blog__item, .category-desc, .mod-custom)
  :is([style*="font-size: 16px"], [style*="font-size:16px"],
      [style*="font-size: 18px"], [style*="font-size:18px"],
      [style*="font-size: 20px"], [style*="font-size:20px"],
      [style*="font-size: 22px"], [style*="font-size:22px"],
      [style*="font-size: 12pt"], [style*="font-size:12pt"],
      [style*="font-size: 13.5pt"], [style*="font-size:13.5pt"],
      [style*="font-size: 14pt"], [style*="font-size:14pt"],
      [style*="font-size: 18pt"], [style*="font-size:18pt"],
      [style*="font-size: large"], [style*="font-size:large"],
      [style*="font-size: x-large"], [style*="font-size:x-large"],
      font[size="4"], font[size="5"], font[size="6"], font[size="7"]) {
  font-size: 1.25rem !important;
  line-height: 1.45;
}
/* Wingdings-Aufzählungszeichen aus Outlook würden als "l" / "Ø" erscheinen */
:is(.com-content-article__body, .com-content-category-blog__item) [style*="ingdings"] {
  display: none;
}
/* Überschriften innerhalb von Beiträgen */
:is(.com-content-article__body, .com-content-category-blog__item .item-content) h1 { font-size: 1.55rem; }
:is(.com-content-article__body, .com-content-category-blog__item .item-content) h2 { font-size: 1.35rem; }
:is(.com-content-article__body, .com-content-category-blog__item .item-content) h3 { font-size: 1.2rem; }
:is(.com-content-article__body, .com-content-category-blog__item .item-content) :is(h4, h5, h6) {
  font-size: 1.05rem;
}
:is(.com-content-article__body, .com-content-category-blog__item .item-content) :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.4em 0 .5em;
}
/* Blog-Titel (page-header) behalten ihre Größe */
.com-content-category-blog__item .page-header h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  margin: 0 0 .5rem;
}
pre, code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
}

/* --- Breite Inhalte & Bilder (vor allem am Handy) -------------------------
   Beiträge enthalten feste Breiten (bis 900px), Text ohne Umbruch und Bilder mit fester Höhe. */
:is(.com-content-article__body, .com-content-category-blog__item .item-content, .category-desc) {
  overflow-wrap: break-word;
}
:is(.com-content-article__body, .com-content-category-blog__item .item-content, .category-desc)
  :is(div, p, table, iframe, video, embed, object, figure, .bild-fehlt) {
  max-width: 100% !important;
}
/* Text, der per white-space nicht umbrechen durfte */
:is(.com-content-article__body, .com-content-category-blog__item .item-content) [style*="white-space"] {
  white-space: normal !important;
}
/* Tabellen: bei Überbreite innerhalb der Tabelle scrollen statt die ganze Seite */
:is(.com-content-article__body, .com-content-category-blog__item .item-content) table {
  display: block;
  overflow-x: auto;
}
/* Bilder: Höhe automatisch -> Seitenverhältnis bleibt, auch wenn die Breite schrumpft */
:is(.com-content-article__body, .com-content-category-blog__item .item-content, .category-desc) img {
  max-width: 100%;
  height: auto !important;
}
/* Videos (YouTube) im 16:9-Format an die Spaltenbreite anpassen */
:is(.com-content-article__body, .com-content-category-blog__item .item-content)
  iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
/* Handy: Bilder nicht neben dem Text, sondern zentriert darüber */
@media (max-width: 575.98px) {
  :is(.com-content-article__body, .com-content-category-blog__item .item-content)
    :is(img[style*="float"], img[align], .bild-fehlt[style*="float"]) {
    float: none !important;
    display: block;
    margin: .75rem auto !important;
  }
}

/* --- Formate für Beiträge (im Editor unter "Formate" auswählbar, siehe editor-formate.css) ---
   Ersetzen die früheren festen Farben; Gestaltung nur hier ändern. */
.datum {
  font-weight: 700;
  color: var(--ab-warm);              /* 6.3:1 */
}
.einleitung {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ab-primary-dark);      /* 12:1 */
}
/* helles Etikett mit dunkler Schrift (weiße Schrift würde TinyMCE in der Formate-Vorschau
   weglassen -> dort sähe es grün mit schwarz aus) */
.ebook {
  display: inline-block;
  padding: .2rem .7rem;
  border: 1px solid #9fc37a;
  border-radius: 999px;
  background: #d3e6bc;
  color: var(--ab-primary-dark) !important;   /* 9.0:1 */
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
}
p.ebook {
  margin: .5rem 0;
}

/* Platzhalter für fehlende Bilder (placeholder_images.py); Größe/Float vom Originalbild bleiben */
.bild-fehlt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 8rem;
  min-height: 5rem;
  padding: .5rem;
  border: 2px dashed #b9c4ad;
  border-radius: var(--ab-radius-sm);
  background: var(--ab-tint);
  color: var(--ab-muted);
  font-size: .85rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
}
.bild-fehlt::before {
  content: "🖼";
  font-size: 1.6rem;
  margin-bottom: .25rem;
}

/* --- Fußzeile ------------------------------------------------------------ */
.container-footer {
  background: var(--ab-footer-bg);
  background-image: none;
  color: var(--ab-footer-text);
}
.container-footer a {
  color: var(--ab-footer-link);
}
.container-footer a:hover {
  color: #fff;
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .container-component > main {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-top: 0;
  }
  .container-header .metismenu.mod-menu .metismenu-item.level-1 {
    padding: .5em .25em;
  }
}

/* Bewegung reduzieren, wenn im System so eingestellt */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}