/* ========================
   Globale Styles überschreiben das Original
   ======================== */

/* Globale Linkfarbe (auch besucht, hover, etc.) */



a,
a:visited,
a:hover {
  color: #3abfed;
  text-decoration: none;
}

/* ========================
.overlay {
  background-color: rgba(0, 0, 0, 0.98) !important;
}
======================== */

/* Bullets im Overlay-Menü Ausblenden */
.toggler::before {
  display: none !important;
}

.search-result p {
  font-size: 90%;
}
/* ========================
   Start: Karten-Layout auf feste Höhe
   Die Beiträge müssten vom Bild únd Inhalt auf ein ähnliches Format gebracht werden,
   damit die Karten gleich hoch sind.
   Überlegung für die Zukunft, ob das Layout den Aufwand rechtfertigt

.card {
  height: 700px;
  overflow: hidden; 
}
 
/* ========================
   Ende: Karten-Layout auf feste Höhe
   ======================== */

 .year-toggle {
  cursor: pointer !important;
}

/* ========================
   Start: Archive nach Jahren gruppiert
   ======================== */
ul.archives,
ul.archives ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important; /* entfernt Bullets */
}

ul.archives > li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

ul.archives ul {
  padding-left: 1em !important; /* Einrückung für Monate */
}
ul.archives ul li {
  margin: 0.1em 0 !important;
  line-height: 1.2 !important;
}

.archives .month-list {
  display: none; /* eingeklappt */
}

.archives .year-item.expanded .month-list {
  display: block; /* nur im expanded-Zustand sichtbar */
}

/* ========================
   Ende: Archive nach Jahren gruppiert
   ======================== */

/* Blaue Hinweisboxen (!!! blue) */
.notices.blue {
  background-color: #e6f7ff;
  border-left: 10px solid #3ABFED !important;
  padding: 1em;
}

/* Überschrift der Karten / Titel */
.card-title h5.p-name {
    font-size: 160% !important;
}

/* ========================
   Start: Shortcode Styles
   ======================== */
.adresse-shortcode-box { 
  border-collapse: collapse;
}

.adresse-shortcode-icon {
  vertical-align: top;
}

.adresse-shortcode-icon img {
  width: 12px;
  height: 19px;
  margin-top: 6px;
}

.adresse-shortcode-link {
  vertical-align: top;
}

.adresse-shortcode-link a {
  display: block;
  padding-left: 6px;
  color: #3b3a3a;
  text-decoration: none;
}

.bild-shortcode,
.video-shortcode {
  margin: 2em 0;
}

.bild-shortcode img,
.video-shortcode video {
  width: 100%;
  height: auto;
  display: block;
}

.bild-shortcode figcaption,
.video-shortcode figcaption {
  background-color: #eff0f0;
  padding: 0.5em 1em;
  font-size: 0.9em;        /* 90 % der Standardschriftgröße */
  line-height: 1.1em;      /* 140 % der Schriftgröße */
  font-style: italic;
  text-align: left;
}
/* ========================
   Ende: Shortcode Styles
   ======================== */

 
   /* ========================
   Start: Links in den Kategorien
   ======================== */ 
.label,
.label-rounded,
.label-secondary { 
  background: none !important;
  color: #3ABFED !important;
  text-transform: none !important; /* normale Schreibweise */
  padding: 0 !important;
  font-size: 100%; /* normale Textgröße */
  margin-right: 4px;
  border: none;
  border-radius: 0;
  text-decoration: none; /* wie ein klassischer Link */
}
/* ========================
   Ende: Linkls in den Kategorien
   ======================== */ 

/* ========================
   Start: Links Vorheriger - Nächster Beitrag
   ======================== */   
.prev-next .btn {
  color: #3ABFED !important;        /* Textfarbe */
  border: 1px solid #3ABFED !important; /* Rahmenfarbe */
  background: none !important;      /* kein Hintergrund */
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
}

.prev-next .btn:hover {
  background: #3ABFED; /* Hintergrund bei Hover */
  color: #3ABFED !important; /* Textfarbe weiß bei Hover */
}
/* ========================
   Ende: Links Vorheriger - Nächster Beitrag
   ======================== */   
   
/* ========================
   Start: Formularfelder Desktop und Responsitiv
   ======================== */

/* Entfernt den roten Rahmen bei Validierungsfehlern */
input:invalid,
textarea:invalid {
  border-color: #ccc !important;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea,
.form-field .captcha {
  max-width: 400px;
  width: 100%;
}

/* Entfernt gelben Autofill-Hintergrund in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px #f5fffa inset; /* Überlagerung durch inneren Schatten */
}

/* Gültige Eingabe */
input:valid:not(:focus),
textarea:valid:not(:focus),
select:valid:not(:focus) {
  background-color: #f5fffa; /* hellgrün (Mint Cream #f5fffa) */
}

/* Form: Positive Message */
.toast.toast-success.green {
  max-width: 400px;
  width: 100%;
}
/* ========================
   Ende: Formularfelder Desktop und Responsitiv
   ======================== */

/* ==============================
   Start: Farben für Menü (Desktop & Mobile)
   ============================== */

/* Hamburger-Linien + Schließen-X */
#toggle span {
  background-color: #3ABFED !important;
}

/* Hover und aktive Links */
ul.treemenu li a:hover,
ul.treemenu li a.active,
ul.treemenu li.active > a {
  font-size: 120% !important;
  color: #d2d2d2 !important;   /* Akzentfarbe */
  border-bottom: none !important;
  text-decoration: none !important;
}
/* ==============================
   Ende: Farben für Menü (Desktop & Mobile)
   ============================== */


   
/* ==============================
   Start: Overlay Menü
   ============================== */

/* Grundsätzlich alle Listen-Bullets und Hintergründe entfernen */
.navbar-section ul,
.navbar-section ul li,
ul.treemenu,
ul.treemenu li {
  background: none !important;      /* Hintergrund weg */
  list-style: none !important;      /* Bullets weg */
}

/* Hover und aktiver Link für die Desktop-Ansicht */
.navbar-section ul li a:hover,
.navbar-section ul li a.active,
.navbar-section ul li.active > a,
#header.nav-open .navbar-section ul li a:hover,
#header.nav-open .navbar-section ul li a.active,
#header.nav-open .navbar-section ul li.active > a {
  color: #3ABFED !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: none !important;      /* Hintergrund weg */
}

/* Hover und aktiver Menüpunkt im mobilen Menü */
/* Normale Links */
ul.treemenu li a {
  font-size: 120% !important;
  color: #3ABFED !important;   /* Grundfarbe */
  border-bottom: none !important;
  text-decoration: none !important;
}
/* ==============================
   Ende: Overlay Menü
   ============================== */

/* ==============================
   Start: Formular Button
   ============================== */

button.btn {
  background-color: #ffffff; /* Grüner Hintergrund */
  color: #3ABFED; /* Schriftfarbe */
  border-color: #3ABFED;
  border-radius: 4px;
}

button.btn:hover {
  background-color: #3ABFED; /* Dunkleres Grün beim Hover */
  border-color: #3ABFED;
  color: #ffffff; /* Schriftfarbe */
}

  .captcha-hinweis p {
  font-size: 0.7em;
  color: #909090;
  margin-top: 2em;
  }

  .ellipsis {
  margin-left: 1em; /* Abstand von links */
  } 

/* ==============================
   Ende: Formularbutton
   ============================== */

/* ========================
   Start: Anpassung des Layout für responsives Format
   ======================== */
@media (max-width: 840px) {

  .adresse-shortcode-icon img {
  margin-left: 1em;
  }

  /* Überschrift der Karten / Titel */
  .card-title {
      font-size: 110% !important;
      margin-left: 0.2em;
  }
  
  .content-padding.simplesearch {
    margin-left: 1em;
    padding-right: 1em;
    }

  .card-subtitle {
    display: inline-block;
    margin-left: 0.3em; /* gewünschte Einrückung */
}

  .ellipsis {
    margin-bottom: 2em;
  } 

  body {
    font-size: 18px; /* Standard ist meist 16px, hier auf 18px erhöht */
  }

  /* Schatten zwischen Header und Card entfernen */
  .bricklayer .card {
    box-shadow: none;
  }

  .search-input {
    margin-top: 2em;
    max-width: 90%;       /* statt 100%, kleine Ränder links/rechts */
  }

  /* Trennlinie zwischen den Karten */
  .card-footer {
    background-color: #ffffff;
    border-bottom: 0.5px solid #ddd; /* sehr dezent */
  }

  .text-shortcode {
    margin-left: 1em;
    margin-right: 1em;
  }

  .card-body {
    padding: 0 !important;
  }

  #body-wrapper {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
  }

  .bricklayer-column {
    padding: 0 !important;
  }

  #sidebar {
    padding-left: 10%;
  }

  .form-field.eingerueckt {
    margin-left: 1em;
    margin-right: 1em;
  }

  button.eingerueckt {
    margin-left: 1.5em;
  }
  
  .captcha-hinweis p {
  margin-left: 1.5em; /* linker Abstand */
  }

  /* Form: Positive Message */
  .toast.toast-success.green {
    margin-left: 1em;  /* linker Abstand */
    margin-right: 2em; /* rechter Abstand */
    max-width: 400px;
    width: 100%;
  }

}
/* ========================
   Ende: Anpassung des Layout für responsives Format
   ======================== */