/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* Fonts */
body {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 14px;
  /* Standardgröße der alten Joomla-Templates */
  line-height: 1.5;
  /* Verhindert, dass der Text zu weit auseinandergezogen wird */
  letter-spacing: -0.01em;
  /* Macht das Schriftbild minimal kompakter, typisch für Tahoma */
}
h1, h2, h3, h4, h5, h6 {
  font-family: Tahoma, Arial, sans-serif;
  font-weight: 200;
  /* Macht die Schrift kräftig und markant fett */
  letter-spacing: -0.02em;
  /* Schiebt die Buchstaben bei großen Titeln minimal enger zusammen */
  color: #2698de;
}
.g-title, h3 {
  color: #2698de;
  /* Das klassische, strahlende Gantry-Blau aus alten Templates */
}
/* 2. Speziell für die große Überschrift "Vereinssitzungen" */
h2, .item-page h2 {
  font-size: 28px !important;
  /* Vergrößert die Überschrift wie links */
  margin-bottom: 15px !important;
}
/* 3. Das hellblaue "Aktuelles"*/
/* (Je nachdem, welches Element das neue Template nutzt, fangen wir beide Varianten ab) */
h3, .moduletable h3, .g-block h3 {
  color: #2380ca !important;
  font-size: 20px !important;
  font-weight: normal !important;
  /* "Aktuelles" ist links nicht ganz so fett */
  margin-bottom: 10px !important;
}
/* 4. Die dünne graue Trennlinie unter "Aktuelles" */
h3, .moduletable h3 {
  border-bottom: 1px solid #e5e5e5 !important;
  padding-bottom: 8px !important;
}
/* 5. Fließtext-Größe anpassen */
body, p {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #444444 !important;
}
/* Menu */
ul.g-sublevel .g-menu-item {
  font-size: 15px !important;
}
/* Box mit sehr unauffälligem Rand */
.mod-articlesnews__item {
  border: 1px solid #f0f0f0;
  /* Sehr heller, fast unsichtbarer Rand */
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 30px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  /* Schatten gibt Struktur statt der Linie */
  transition: all 0.3s ease;
}
/* Der Hover-Effekt bleibt präsent, wirkt aber durch den Kontrast edler */
.mod-articlesnews__item:hover {
  border-color: #e0e0e0;
  /* Wird beim Hover nur minimal dunkler */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}
/* --- BASIS-DESIGN (Desktop) --- */
/* --- UNIVERSAL-DESIGN (Beitrag & Blog) --- */
/* Triggert, wenn ein aktiver Menüpunkt 'my-custom-layout' hat */
body:has(.active.my-custom-layout) .com-content-article, body:has(.active.my-custom-layout) .blog-item, body:has(.active.my-custom-layout) .com-content-category-blog__item, body:has(.active.my-custom-layout) .item-page {
  background: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  margin-bottom: 30px;
  line-height: 1.8;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
/* Großer Anfangsbuchstabe für alle Ansichten */
body:has(.active.my-custom-layout) .com-content-article__body > p:first-of-type::first-letter, body:has(.active.my-custom-layout) .blog-item p:first-of-type::first-letter, body:has(.active.my-custom-layout) .com-content-category-blog__item p:first-of-type::first-letter, body:has(.active.my-custom-layout) .item-page p:first-of-type::first-letter {
  font-size: 3.5rem;
  font-weight: bold;
  float: left;
  line-height: 0.85;
  margin: 8px 12px 4px 0;
  color: #2698de;
  font-family: Georgia, serif;
}
/* Bilder-Styling */
body:has(.active.my-custom-layout) img {
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  margin: 20px;
}
/* Spezifisches Design für die Bücherliste (ItemID 177) */
body.itemid-177 .com-content-article {
  background: #f4f7f9;
  padding: 40px;
}
body.itemid-177 .com-content-article__body p {
  background: #ffffff;
  padding: 20px 25px 20px 50px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  border-left: 4px solid #2698de;
}
body.itemid-177 .com-content-article__body p::before {
  content: "📚";
  position: absolute;
  left: 15px;
  top: 20px;
}
body.itemid-177 .com-content-article__body p strong {
  color: #2698de;
}
/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 768px) {
  body:has(.g-menu-item.active.my-custom-layout) .com-content-article {
    padding: 20px;
    margin: 10px;
    box-shadow: none;
    border: 1px solid #eee;
  }
  body:has(.g-menu-item.active.my-custom-layout) .com-content-article__body > p:first-of-type::first-letter {
    font-size: 3.5rem;
  }
  body:has(.g-menu-item.active.my-custom-layout) .com-content-article__body img {
    float: none !important;
    display: block;
    margin: 20px auto !important;
    max-width: 100%;
    height: auto;
  }
}
/* Mobile Menu*/
.fa-fw {
  color: #333;
  margin: 0px;
  font-size: 16px;
}
.g-offcanvas-toggle {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  border: 1px solid #333;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  width: 40px;
  height: 40px;
  justify-content: center;
  border-width: 1px;
}
img {
  width: auto;
  height: auto;
  display: block;
  object-fit: cover;
  max-width: 100%;
}
.g-container {
  max-width: none;
  padding: 0px;
  width: 100%;
}
.g-content {
  padding: 15px;
  margin: 10px;
  display: block;
  width: auto;
}
#g-header a {
  display: block;
  width: 100%;
}
/* End Mobile Menu*/
/* Header Bild
/* Container mit 10px Rand und Zentrierung 
#logo-9292-particle {
    padding: 10px !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
}
*/
/* Findet das Blog-Item, das einen Link zum Kaffee-Verkauf (ID 27) enthält */
.blog-item:has(a[href*="/27-verkauf-von-kaffee"]) img {
  display: block !important;
  float: right !important;
  clear: right !important;
  margin: 20px !important;
  max-width: 80% !important;
}
/* Nur auf der Seite mit ItemID 119 (Aktuelles) anwenden */
body.itemid-119 .com-content-article {
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
  border: 1px solid #eee;
}
body.itemid-119 .com-content-article__body {
  font-size: 16px;
  line-height: 1.8;
}
body.itemid-119 .default-style {
  padding: 12px 20px;
  margin-bottom: 8px;
  background: #f8fbfd;
  border-left: 5px solid #2698de;
  border-radius: 0 6px 6px 0;
  display: block;
}
/* Anhänge Tabelle Größe festlegen */
/* 1. Die Tabelle muss schrumpfen dürfen */
#attachmentsList_com_content_article_23 table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 0 !important;
  /* WICHTIG: Hebt die 720px auf */
  max-width: 100% !important;
}
/* 2. Die erste Spalte (Dateiname) */
.at_filename {
  width: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 3. Die zweite Spalte (Dateigröße) */
.at_file_size {
  width: 80px !important;
  /* Kleinerer Wert, damit mehr Platz für Namen bleibt */
  white-space: nowrap;
  text-align: right;
}
/* DOWNLOAD SECTIONEN */
/* Container-Bereich für die Anhänge */
.attachmentsList, .attachments {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  /* Abstand zwischen den Dateien */
  width: 100% !important;
  margin: 20px 0 !important;
}
/* Verwandelt Tabellenzeilen in "Cards" */
.attachmentsList tr, .attachments tr {
  background: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
  /* Sanfter Schatten */
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
}
/* Hover-Effekt für Interaktivität */
.attachmentsList tr:hover, .attachments tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
  background: #fdfdfd !important;
}
/* Tabellenzellen (Icons, Dateiname, Größe) ausrichten */
.attachmentsList td, .attachments td {
  padding: 16px 20px !important;
  border: none !important;
  /* Entfernt die alten Trennlinien */
  vertical-align: middle !important;
}
/* Der Link / Dateiname */
.attachmentsList td a, .attachments td a {
  font-weight: 500 !important;
  color: #3180c2 !important;
  /* Nutze hier das Blau deines Logos */
  text-decoration: none !important;
  font-size: 1.05rem;
}
.attachmentsList td a:hover, .attachments td a:hover {
  color: #005177 !important;
  text-decoration: underline !important;
}
/* Dateigröße und Meta-Angaben (z.B. "842 kB") dezent im Hintergrund halten */
.attachmentsList .attachmentSize, .attachmentsList td:nth-child(3), .attachments td:nth-child(3) {
  color: #777777 !important;
  font-size: 0.9rem !important;
  font-family: monospace;
  /* Schick für technische Daten */
  background: #f5f5f5;
  padding: 4px 8px !important;
  border-radius: 4px;
}
/* Erlaubt Zeilenumbrüche in der Dateiliste und passt die Schriftgröße an */
td.at_filename {
  white-space: normal !important;
}
td.at_filename a.at_icon {
  display: inline-block;
  white-space: normal !important;
  font-size: 0.85rem;
  /* Schriftgröße nach Bedarf anpassen */
  line-height: 1.3;
  word-break: break-word;
  /* Verhindert, dass extrem lange Wörter das Layout sprengen */
}
/* --- SMART-LIST DESIGN (Aktivierbar über Menü-Klasse 'my-list-layout') --- */
body:has(.active.my-list-layout) .com-content-article {
  background: #f4f7f9;
  padding: 40px;
  border-radius: 8px;
}
body:has(.active.my-list-layout) .com-content-article__body p {
  background: #ffffff;
  padding: 20px 25px 20px 50px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  border-left: 4px solid #2698de;
  line-height: 1.7;
}
/* Standard-Icon für die Liste */
body:has(.active.my-list-layout) .com-content-article__body p::before {
  content: "🔹";
  position: absolute;
  left: 15px;
  top: 20px;
  font-size: 1.2rem;
}
/* Speziell für die Bücher-Seite (ItemID 177) nutzen wir weiterhin das Buch-Icon */
body.itemid-177:has(.active.my-list-layout) .com-content-article__body p::before {
  content: "📚";
}
body:has(.active.my-list-layout) .com-content-article__body p strong {
  color: #2698de;
}
/*# sourceMappingURL=custom_40.css.map */