/* ==========================================================================
   Books by Trudy - "Wayback 2021" Override
   Ziel: booksbytrudy.com sieht aus wie der Snapshot vom 26.12.2021.
   Pfad: media/templates/site/bbt/css/booksbytrudy-2021.css
   Wird NACH booksbytrudy.css geladen (gleiche Spezifitaet, gewinnt durch
   Reihenfolge). Klassen bleiben .bbt-*, Markup unveraendert.
   ========================================================================== */

/* ---------- Fonts: Bitter lokal (OFL), Dateien in ../fonts/ ---------- */
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/bitter-400.woff2") format("woff2"); }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/bitter-700.woff2") format("woff2"); }

/* ---------- Token-Ebene: 2021-Farben ---------- */
:root {
  --bbt-cream:    #ffffff;              /* 2021: Seite weiss */
  --bbt-paper:    #ffffff;
  --bbt-ink:      #3c3b3b;              /* Anthrazit (Menue, Buttons) */
  --bbt-ink-soft: #444444;
  --bbt-text:     #666666;              /* Fliesstext */
  --bbt-line:     #dddddd;
  --bbt-accent:   #a2c831;              /* Olivgruen (Hover, Links, Aktiv) */
  --bbt-accent-2: #7ba301;              /* Dunkelgruen (aktive H1, Offen) */
  --bbt-radius:   3px;
  --bbt-font-serif: "Bitter", Georgia, serif;
  --bbt-font-sans:  Verdana, Geneva, Arial, Helvetica, sans-serif;
  /* 2021 war fixe Pixelwelt; wir lassen nur Mobil leicht kleiner werden */
  --bbt-step-0: clamp(12.5px, 1.3vw + 9px, 13px);   /* Text ~13px */
  --bbt-step-1: clamp(15px, 1.6vw + 10px, 17px);    /* Menue */
  --bbt-step-2: clamp(19px, 2vw + 12px, 21px);      /* Modul-H3 */
  --bbt-step-3: clamp(20px, 2.4vw + 13px, 24px);    /* Seitentitel */
}

/* ---------- Grundseite: Gitter-Hintergrund (bg.png) ---------- */
body.bbt {
  background-color: #ffffff;
  background-image: url("../images/bg.png");   /* 51x51, weiss/#f2f2f2 Hairline */
  color: var(--bbt-text);
  line-height: 1.7;
}

/* zentrierter Festbreiten-Container 1100px wie 2021 */
:root { --bbt-page: min(100% - 30px, 1100px); }

/* ---------- Header: NICHT sticky, Header-Bild ueber Menue ---------- */
.bbt-header {
  position: static;
  background: transparent;
  border-bottom: 0;
}
.bbt-brand__name { color: var(--bbt-ink); }
.bbt-brand__tag  { color: var(--bbt-text); letter-spacing: .06em; }

/* Das Custom-Modul mit dem Header-Bild sitzt IM Header-Bereich - sicherstellen,
   dass das Bild die volle Containerbreite nutzt und kein Rand bleibt. */
.bbt-header img[src*="header_books_by_trudy"] { display:block; width:100%; height:auto; margin:0; }
.bbt-header p { margin: 0; }

/* ---------- Menue: dunkler Balken #3c3b3b, Rahmen #a2c831 ---------- */
.bbt-nav {
  background: var(--bbt-ink);
  border: 1px solid var(--bbt-accent);
  flex-wrap: wrap;
}
.bbt-nav ul { gap: 0; }
.bbt-nav a, .bbt-nav .mod-menu__heading {
  font-family: var(--bbt-font-serif);
  font-size: var(--bbt-step-1);          /* 17px */
  font-weight: 400;
  color: #ffffff;
  padding: 14px 25px;
  border-bottom: 0;
  position: relative;
}
/* 3px-gruener Punkt-Trenner vor jedem Item ausser dem ersten
   (Ersatz fuer separator.png aus 2021) */
.bbt-nav li + li > a::before {
  content: "";
  position: absolute; left: -2px; top: 50%;
  width: 3px; height: 14px; transform: translateY(-50%);
  background: var(--bbt-accent);
}
.bbt-nav li.active > a,
.bbt-nav a:hover,
.bbt-nav li.current > a { background: var(--bbt-accent); color: var(--bbt-ink); border-bottom-color: transparent; }

/* Submenues: 2021 gruen, Eintrag hover anthrazit */
.bbt-nav li.deeper > ul {
  background: var(--bbt-accent);
  border: 1px solid var(--bbt-accent-2);
  border-radius: 0 0 var(--bbt-radius) var(--bbt-radius);
  box-shadow: none;
  padding: 0;
  min-width: 14rem;
}
.bbt-nav li.deeper > ul a {
  color: #ffffff;
  border-top: 1px dashed var(--bbt-ink);
  text-transform: lowercase;
  padding: .55rem 1rem;
}
.bbt-nav li.deeper > ul a:hover { background: var(--bbt-ink); color:#fff; text-decoration: none; }

/* Sprachumschalter 2021: gab es nicht im Header (nur im Menue als Unterpunkte).
   Bestehender Umschalter bleibt funktional, aber optisch im Balken ruhig. */
.bbt-nav .mod-languages a { border-color: rgba(255,255,255,.25); }
.bbt-nav .mod-languages li.lang-active a { background: var(--bbt-accent); color: var(--bbt-ink); border-color: var(--bbt-accent); }

/* Burger auf Mobil: weiss auf anthrazit */
.bbt-navtoggle { border-color: #fff; margin: 8px 0; }
.bbt-navtoggle__bar, .bbt-navtoggle__bar::before, .bbt-navtoggle__bar::after { background: #fff; }
@media (max-width: 52rem) {
  .bbt-nav { border: 1px solid var(--bbt-accent); }
  .bbt-nav a { border-bottom: 1px solid rgba(255,255,255,.12); }
  .bbt-nav li + li > a::before { display: none; }
  .bbt-nav li.deeper > ul { background: transparent; border: 0; padding-left: 1rem; }
  .bbt-nav li.deeper > ul a { color: #fff; }
}

/* ---------- Breadcrumb / Meta ---------- */
.bbt-crumbs { color: var(--bbt-text); }
.bbt-crumbs a { color: var(--bbt-accent); }

/* ---------- Typografie-Inhalt ---------- */
h1, h2, h3, .bbt-brand__name, .bbt-card__title {
  font-family: var(--bbt-font-serif);
  color: var(--bbt-ink-soft);
}
.page-header h2, h1 { color: var(--bbt-accent-2); }   /* 2021: aktive H1 in Dunkelgruen */
p, li { color: var(--bbt-text); font-size: var(--bbt-step-0); }

a { color: var(--bbt-accent); font-weight: 700; text-decoration: none; }
a:hover { color: var(--bbt-accent-2); text-decoration: underline; }
/* AA-Kompromiss dokumentiert: #a2c831 auf weiss ist nur 2.6:1 - deshalb fett +
   Underline beim Hover, Link bleibt farblich unabhaengig erkennbar. */

/* ---------- Content-Wrapper in 2021-Grau ---------- */
.bbt-main { background: #f4f4f4; }

/* ---------- Buchseite: Cover links, Trennlinie, Text rechts ----------
   2021: feine #ddd-Linie, kein Schatten-Card-Look. */
.bbt-book__text { border-left: 1px solid var(--bbt-line); }
.bbt-book__cover img { box-shadow: none; border: 1px solid var(--bbt-line); border-radius: 0; }
@media (max-width: 44rem) {
  .bbt-book__text { border-top: 1px solid var(--bbt-line); }
}

/* ---------- Buchregal-Karten: weiss, 1px-Rahmen, eckig ---------- */
.bbt-card {
  background: #ffffff;
  border: 1px solid var(--bbt-line);
  border-radius: 0;
  transition: none;
}
.bbt-card:hover, .bbt-card:focus-within { border-color: var(--bbt-accent); transform: none; }
.bbt-card__cover { box-shadow: none; border: 1px solid var(--bbt-line); border-radius: 0; }
.bbt-card__cover img { border-radius: 0; }
.bbt-card__title { font-size: var(--bbt-step-3); color: var(--bbt-ink-soft); }
.bbt-card__title a { color: inherit; }
.bbt-card__more {
  color: #fff; background: var(--bbt-ink);
  display: inline-block; padding: .5em .9em;
  font-family: var(--bbt-font-serif); font-size: 15px; letter-spacing: 0;
  text-transform: none; font-weight: 400; border-radius: var(--bbt-radius);
}
.bbt-card__more:hover { background: var(--bbt-accent); color: var(--bbt-ink); text-decoration: none; }

/* ---------- Buttons allgemein ---------- */
.bbt-btn { background: var(--bbt-ink); color: #fff; border-radius: var(--bbt-radius); font-family: var(--bbt-font-serif); font-weight: 400; }
.bbt-btn:hover { background: var(--bbt-accent); color: var(--bbt-ink); }

/* Fokus: sichtbar an jedem Element, kompatibel zur Palette */
:focus-visible { outline: 2px solid var(--bbt-accent-2); outline-offset: 2px; }

/* ---------- Footer: 2021 dunkel mit gruener Schrift ---------- */
.bbt-footer {
  background: var(--bbt-ink);
  border-top: 30px solid #f4f4f4;     /* wie 2021 */
  color: var(--bbt-accent);
  font-size: 13px;
}
.bbt-footer a { color: var(--bbt-accent); font-weight: 400; }
.bbt-footer a:hover { color: #fff; }
.bbt-footer__copy { color: #fff; }
.bbt-footer li::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--bbt-accent); border-radius: 50%; margin-right: .5em;
  vertical-align: 1px;
}

/* ---------- Prose-Feinschliff 2021 ---------- */
.bbt-prose blockquote { border-left: 2px solid var(--bbt-accent); font-family: var(--bbt-font-serif); color: var(--bbt-ink-soft); }
.bbt-prose hr { border-top: 1px solid var(--bbt-line); }

/* ---------- Fehler-Seite ---------- */
.bbt-error__code { color: var(--bbt-line); font-family: var(--bbt-font-serif); }

/* ---------- Print bleibt wie gehabt (Basis-CSS deckt das) ---------- */

/* ---------- Einbau coder-bot: Header-Bild 2021 + Menuebefund ----------
   Das Original-Header-Bild (1100x145, images/bbt/header_books_by_trudy.jpg)
   sitzt wie 2021 als eigene Zeile UEBER dem Menuebalken. Text-Brand entfaellt. */
.bbt-header__top { display: flex; align-items: flex-end; gap: 1rem; }
.bbt-brand { flex: 1; display: block; }
.bbt-header-img { display: block; width: 100%; height: auto; }
.bbt-navtoggle { flex: 0 0 auto; }
@media (min-width: 52.01rem) { .bbt-navtoggle { display: none; } .bbt-header__top { align-items: flex-end; } }

/* 2021-Menue: erstes Item 'Home' gross, folgende Items kleingeschrieben */
.bbt-nav .mod-menu > li + li > a { text-transform: lowercase; }

/* Menuebalken volle Containerbreite, Sprachwahl rechts im Balken */
.bbt-nav { justify-content: space-between; }
.bbt-nav > ul:first-child { flex: 1 1 auto; justify-content: flex-start; }

/* Basis-Overrides, die mit dem neuen Header kollidieren, neutralisieren */
.bbt-header { padding-top: 20px; }  /* Abstand ueber dem Banner (Robin 06.10.) */
.bbt-main { padding-block: var(--bbt-space) calc(var(--bbt-space) * 2); }

/* Fix coder-bot: Toggle sitzt neben dem Header-Bild auf WEISSEM Grund (nicht im
   dunklen Balken), deshalb anthrazit statt weiss - sonst unsichtbar auf Mobil. */
.bbt-navtoggle { border-color: var(--bbt-ink); }
.bbt-navtoggle__bar,
.bbt-navtoggle__bar::before,
.bbt-navtoggle__bar::after { background: var(--bbt-ink); }

/* Fix coder-bot: Menue-Trenner nur im Hauptmenue, nicht zwischen Sprachflaggen */
.bbt-nav .mod-languages li + li > a::before { display: none; }

/* =====================================================================
   Vollrestore 2021 (coder-bot, 06.10.): Unterseiten, Blog, Kontakt, Footer
   ===================================================================== */

/* Seitentitel als H2 wie 2021 (item-page > page-header > h2), 24px Bitter */
.bbt-page-title { font-family: var(--bbt-font-serif); font-size: 24px; font-weight: 400; color: var(--bbt-accent-2); margin: 0 0 .6em; line-height: 1.25; }
.bbt-home h1, .bbt-article h1 { display: none; }

/* Sprachauswahl: eigenstaendige Leiste ueber dem Menuebalken (NICHT im Dropdown) */
.bbt-langbar { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: 6px 0; }
.bbt-langbar .mod-languages { display: flex; align-items: center; gap: .6rem; }
.bbt-langbar .mod-languages p { margin: 0; }
.bbt-langbar .mod-languages ul { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.bbt-langbar .mod-languages a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 3px 8px; border: 1px solid var(--bbt-line); background: #fff; opacity: .6; border-radius: 0; }
.bbt-langbar .mod-languages li.lang-active a, .bbt-langbar .mod-languages a:hover, .bbt-langbar .mod-languages a:focus-visible { opacity: 1; border-color: var(--bbt-accent); background: #fff; }
.bbt-langbar .mod-languages li + li > a::before { display: none; }
.bbt-langbar img { display: block; width: 22px; height: auto; }

/* Hauptmenue: alle Items klein (2021: 'fiction', 'blog' ...), Home gross; Dropdown-Pfeil */
.bbt-nav .mod-menu > li > a { text-transform: none; }
.bbt-nav .mod-menu > li:not(:first-child) > a { text-transform: lowercase; }
.bbt-nav .mod-menu > li.deeper > a::after { content: ""; display: inline-block; margin-left: .55em; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: .15em; }
.bbt-nav li.deeper > ul a { text-transform: none; }
.bbt-nav > ul { flex: 1 1 auto; }
.bbt-nav li.alias-parent-active > a, .bbt-nav li.active > a { background: var(--bbt-accent); color: var(--bbt-ink); }

/* Kachel-Grid 2 Spalten (items-row cols-2 span6) fuer fiction + blog */
.bbt-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 10px; align-items: start; }
.bbt-card { grid-template-columns: 1fr; padding: 15px; gap: 10px; }
.bbt-card__cover { width: min(100%, 180px); aspect-ratio: auto; box-shadow: none; border: 0; }
.bbt-card__cover img { height: auto; object-fit: initial; border: 1px solid var(--bbt-line); }
.bbt-card__meta { margin: 0 0 .4rem; font-size: 12px; color: var(--bbt-text); }
.bbt-card__intro p { margin: 0 0 .7em; }
.bbt-card__more { margin-top: .4rem; }
@media (max-width: 44rem) { .bbt-shelf__grid { grid-template-columns: 1fr; } }
@container shelf (min-width: 46rem) { .bbt-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Artikelseiten: Published-Zeile wie article-info */
.bbt-meta { margin: -.3em 0 1em; font-size: 12px; color: var(--bbt-text); }
.bbt-meta dd { margin: 0; }

/* Blog-Einzelartikel / normale Artikel ohne Cover */
.bbt-article--plain { max-width: none; }
.bbt-prose img[src*="computer-books"], .bbt-prose img[src*="buecher.png"] { max-width: 250px; }

/* Home: Latest Blog / Blog Articles als zwei Module unter dem Inhalt */
.bbt-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 20px; background: #f4f4f4; }
.bbt-bottom .moduletable, .bbt-bottom > div, .bbt-bottom section { background: #fff; border: 1px solid var(--bbt-line); padding: 15px; }
.bbt-bottom h3 { font-size: 21px; margin: 0 0 .6em; color: var(--bbt-ink-soft); }
.bbt-bottom ul { list-style: none; margin: 0; padding: 0; }
.bbt-bottom li { padding: .25em 0; border-bottom: 1px dashed var(--bbt-line); }
.bbt-bottom .newsflash-title { font-size: 17px; margin: 0 0 .4em; }
.bbt-bottom a.readmore, .bbt-bottom .readmore a { display: inline-block; background: var(--bbt-ink); color: #fff; padding: .35em .8em; border-radius: var(--bbt-radius); font-weight: 400; }
.bbt-bottom a.readmore:hover { background: var(--bbt-accent); color: var(--bbt-ink); text-decoration: none; }
@media (max-width: 44rem) { .bbt-bottom { grid-template-columns: 1fr; } }

/* Footer 2021: "Now introducing" auf anthrazit, Links gruen, Bullets */
.bbt-footer__details { padding: 20px 0; color: #fff; }
.bbt-footer__details h3 { color: var(--bbt-accent); font-size: 21px; margin: 0 0 .5em; }
.bbt-footer__details h3 a { color: var(--bbt-accent); font-weight: 700; }
.bbt-footer__details p { color: #e6e6e6; font-size: 13px; }
.bbt-footer__details a { color: var(--bbt-accent); }
.bbt-footer__details a:hover { color: #fff; }
.bbt-footer__details .card, .bbt-footer__details .moduletable { background: transparent; border: 0; padding: 0; }
.bbt-footer__details .card-header, .bbt-footer__details h3.card-header { background: transparent; border: 0; padding: 0 0 .4em; }

/* Kontaktformular (FoxContact-Optik) */
.bbt-contact { max-width: 720px; }
.bbt-form .bbt-field { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; align-items: start; margin-bottom: 14px; }
.bbt-form .bbt-field > label, .bbt-form .bbt-field .control-label { font-weight: 700; color: var(--bbt-ink-soft); padding-top: .5em; }
.bbt-form .bbt-field .control-label label { font-weight: 700; }
.bbt-form .bbt-field input[type=text], .bbt-form .bbt-field input[type=email], .bbt-form .bbt-field textarea { width: 100%; border: 1px solid #ccc; border-radius: 0; background: #fff; padding: .55em .7em; font-family: inherit; font-size: 13px; color: var(--bbt-text); }
.bbt-form textarea { min-height: 172px; }
.bbt-form .bbt-field--check { grid-template-columns: 1fr; padding-left: 196px; }
.bbt-form .bbt-field--check label { font-weight: 400; display: flex; gap: .5em; align-items: center; padding: 0; }
.bbt-form .bbt-field > .bbt-btn, .bbt-form button.bbt-btn { grid-column: 2; justify-self: start; border: 0; padding: .6em 1.4em; cursor: pointer; font-size: 15px; }
.bbt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bbt-req { color: #b00; }
.bbt-form .star, .bbt-form .required { color: #b00; }
@media (max-width: 40rem) { .bbt-form .bbt-field { grid-template-columns: 1fr; } .bbt-form .bbt-field--check { padding-left: 0; } .bbt-form .bbt-field > .bbt-btn, .bbt-form button.bbt-btn { grid-column: 1; } }

/* Auswahl 2021 fuer Meldungen */
#system-message-container joomla-alert, .alert { border-radius: 0; border-left: 4px solid var(--bbt-accent-2); }

/* ---- Feinschliff nach Sichtpruefung ---- */
/* Menue einzeilig bei 1100px: Titel stehen schon 2021-konform in der DB (Home/ePolicy/Impressum gross), keine CSS-Verkleinschreibung */
.bbt-nav .mod-menu > li > a, .bbt-nav .mod-menu > li:not(:first-child) > a { text-transform: none; }
@media (min-width: 52.01rem) {
  .bbt-nav a, .bbt-nav .mod-menu__heading { padding: 14px 17px; font-size: 16px; white-space: nowrap; }
  .bbt-nav { flex-wrap: nowrap; }
}
/* Home/Artikel: volle Inhaltsbreite statt 68ch-Messlinie; Bild links, Text umfliesst sauber */
.bbt-home, .bbt-article--plain, .bbt-book__text { max-width: none; }
.bbt-home .custom, .bbt-prose { overflow: hidden; }
.bbt-main { padding-inline: 15px; box-sizing: border-box; width: var(--bbt-page); }
/* Blog-Teaser: Inline-Styles aus dem Original neutralisieren */
.bbt-card__intro, .bbt-card__intro * { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.bbt-card__intro p { margin: 0 0 .8em; }
.bbt-card__intro ul { margin: 0 0 .8em 1.2em; padding: 0; }

/* Blog-Module auf der Startseite: readmore-Button wie 2021 dunkel */
.bbt-bottom .readmore a, .bbt-bottom a.btn { background: var(--bbt-ink); color: #fff; display: inline-block; padding: .35em .8em; border-radius: var(--bbt-radius); font-weight: 400; }
.bbt-bottom .readmore a:hover { background: var(--bbt-accent); color: var(--bbt-ink); text-decoration: none; }
.bbt-bottom .mod-articlesnews, .bbt-bottom .latestnews { margin: 0; }

/* gleich hohe Kacheln pro Zeile, Read-more unten buendig */
.bbt-shelf__grid { align-items: stretch; }
.bbt-card { align-content: start; }
.bbt-card__body { display: flex; flex-direction: column; height: 100%; }
.bbt-card__more { margin-top: auto; align-self: flex-start; }

/* =====================================================================
   Home-Paritaet 2021 (06.10.): Orange "Latest Blog", Module untereinander
   Original: .jm-module.color2-ms .jm-module-in { background-color:#fb9300 }
   ===================================================================== */
.bbt-bottom { grid-template-columns: 1fr; gap: 20px; background: transparent; padding: 0 0 20px; }
.bbt-bottom .moduletable { border-radius: 0; }
.bbt-bottom .bbt-latest {
  background: rgb(251, 147, 0);               /* exakt aus Referenz-DOM gemessen */
  border: 0; border-top: 10px solid rgba(0, 0, 0, .1);
  padding: 7px 15px 27px; color: #fff;
}
.bbt-bottom .bbt-latest h3 { color: #fff; font-size: 21px; margin: 0 0 .5em; padding: 0; }
.bbt-bottom .bbt-latest .newsflash-title { color: #fff; font-size: 17px; margin: 0 0 .5em; }
.bbt-bottom .bbt-latest .newsflash-title a { color: #fff; font-weight: 700; text-decoration: none; }
.bbt-bottom .bbt-latest .newsflash-title a:hover { text-decoration: underline; }
.bbt-bottom .bbt-latest, .bbt-bottom .bbt-latest p, .bbt-bottom .bbt-latest .mod-articlesnews__item { color: #fff; font-size: 13px; }
.bbt-bottom .bbt-latest .readmore { text-align: right; margin: .6em 0 0; }
.bbt-bottom .bbt-latest .readmore a, .bbt-bottom .bbt-latest a.btn {
  background: #fff; color: #d05f00; font-weight: 700; font-size: 13px; border-radius: 5px; padding: 7px 14px; display: inline-block; text-decoration: none;
}
.bbt-bottom .bbt-latest .readmore a:hover { background: #f2efe8; color: #d05f00; }
.bbt-bottom .bbt-latest .icon-chevron-right { display: none; }
/* Dropdown-Pfeile weg (keine Untermenues mehr) */
.bbt-nav .mod-menu > li.deeper > a::after { content: none; }

.bbt-form #bbt-captcha { max-width: 8em; }

/* Trudy-Review: fiction hat wieder Untermenue english/nederlands -> Dropdown-Pfeil nur dort */
.bbt-nav .mod-menu > li.deeper > a::after { content: ""; display: inline-block; margin-left: .55em; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; vertical-align: .15em; }