/* ==========================================================
   Kolpingsfamilie Schloß Neuhaus
   Child-Template auf Basis von Cassiopeia
   ========================================================== */


/* ==========================================================
   1. Farben und zentrale Maße
   ========================================================== */

:root {
  /* Markenfarben */
  --kolping-orange: #f58200;
  --kolping-blau: #0c1882;
  --kolping-blau-dunkel: #08115f;

  /* Flächen */
  --aussenrand: #515151;
  --seitenstreifen: #ffeabf;
  --inhalt-hintergrund: #f3f3f3;
  --karten-hintergrund: #ffffff;

  /* Texte und Linien */
  --textfarbe: #252525;
  --textfarbe-hell: #555555;
  --linienfarbe: #d8d8d8;

  /* Maße */
  --max-inhaltsbreite: 1320px;
  --seitenstreifen-breite: 18px;
  --karten-radius: 5px;

  /* Schatten */
  --karten-schatten:
    0 2px 5px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   2. Allgemeine Seitengestaltung
   ========================================================== */

html {
  background-color: var(--aussenrand);
}

body.site {
  margin: 0;
  background-color: var(--aussenrand);
  color: var(--textfarbe);
}


/* Links im normalen Inhalt */

.site-grid a {
  color: var(--kolping-blau);
}

.site-grid a:hover,
.site-grid a:focus {
  color: var(--kolping-orange);
}


/* ==========================================================
   3. Kopfbereich und Logo
   ========================================================== */

.container-header {
  position: relative;
  background-color: #ffffff;
  background-image: none;
  box-shadow: none;
}


/* Logo-Zeile zentrieren */

.container-header .grid-child:first-child {
  justify-content: center;
  text-align: center;
}


/* Logo-Container */

.container-header .navbar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
}


/* Logo-Größe */

.container-header .navbar-brand img {
  display: block;
  width: auto;
  max-width: min(650px, 90vw);
  max-height: 180px;
  margin: 0 auto;
}


/* ==========================================================
   4. Hauptmenü
   ========================================================== */

.container-header .container-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.2rem 1rem;
  background-color: var(--kolping-blau);
}


/* Dünner orangefarbener Streifen unter dem Menü */

.container-header .container-nav::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 4px;
  background-color: var(--kolping-orange);
  content: "";
}


/* Horizontales Menü */

.container-header .mod-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  gap: 1.2rem;
}


/* Einzelne Menüpunkte */

.container-header .mod-menu > li {
  display: flex;
  align-items: center;
}


/* Menülinks */

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  display: block;
  padding: 0.55rem 0.35rem;
  color: #ffffff;
  text-decoration: none;
}


/* Menü beim Überfahren und aktiver Menüpunkt */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus,
.container-header .mod-menu > li.active > a,
.container-header .metismenu > li.active > a {
  color: #ffffff;
  text-decoration-line: underline;
  text-decoration-color: var(--kolping-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}


/* ==========================================================
   5. Zentraler Inhaltsbereich
   ========================================================== */

.site-grid {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--seitenstreifen-breite));
  max-width: var(--max-inhaltsbreite);
  margin: 4px auto 0;
  padding: 2.25rem;
  background-color: var(--inhalt-hintergrund);

  /*
   * Der Schatten erzeugt links und rechts den warmen,
   * hellorangefarbenen Innenstreifen.
   */
  box-shadow:
    calc(-1 * var(--seitenstreifen-breite)) 0 0
      var(--seitenstreifen),
    var(--seitenstreifen-breite) 0 0
      var(--seitenstreifen);

  align-content: start;
}


/* Keine unnötigen Abstände oberhalb des Inhalts */

main,
.container-component,
.com-content-article,
.blog,
.blog-featured {
  margin-top: 0;
}


/* Modulbereiche ebenfalls zentral begrenzen */

.container-below-top,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--seitenstreifen-breite));
  max-width: var(--max-inhaltsbreite);
  margin-right: auto;
  margin-left: auto;
}


/* ==========================================================
   6. Breadcrumbs
   ========================================================== */

.mod-breadcrumbs {
  margin-bottom: 1.75rem;
}


/*
 * Breadcrumbs bitte nicht grundsätzlich per CSS verstecken.
 * Das Modul kann in Joomla gezielt nur auf der Startseite
 * ausgeblendet werden.
 */


/* ==========================================================
   7. Überschrift „Aktuelles“
   ========================================================== */

/*
 * Im Menüpunkt Home:
 *
 * Seitenanzeige
 * → Seitenüberschrift anzeigen: Ja
 * → Seitenüberschrift: Aktuelles
 */

.blog > .page-header,
.blog-featured > .page-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.75rem;
  text-align: center;
}


/* Linien links und rechts der Überschrift */

.blog > .page-header::before,
.blog > .page-header::after,
.blog-featured > .page-header::before,
.blog-featured > .page-header::after {
  height: 1px;
  background-color: var(--kolping-orange);
  content: "";
  flex: 1;
}


/* Überschrift selbst */

.blog > .page-header h1,
.blog-featured > .page-header h1 {
  margin: 0;
  color: var(--kolping-orange);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1.2;
}


/* ==========================================================
   8. Drei Artikel als Karten
   ========================================================== */

/*
 * Im Menüpunkt Home unter Blog-Layout:
 *
 * Führende Beiträge: 0
 * Einleitungsbeiträge: 3
 * Spalten: 3
 * Links: 0
 */

.blog-items.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}


/* Einzelne Karte */

.blog-items .blog-item {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linienfarbe);
  border-radius: var(--karten-radius);
  background-color: var(--karten-hintergrund);
  box-shadow: var(--karten-schatten);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


/* Dezente Bewegung beim Überfahren */

.blog-items .blog-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.09),
    0 12px 26px rgba(0, 0, 0, 0.09);
}


/* Karteninhalt */

.blog-items .blog-item .item-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1.25rem;
}


/* Falls Cassiopeia keinen item-content-Container ausgibt */

.blog-items .blog-item > *:not(figure):not(.item-image) {
  box-sizing: border-box;
}


/* ==========================================================
   9. Einleitungsbilder der Artikel
   ========================================================== */

.blog-items .blog-item figure,
.blog-items .blog-item .item-image {
  overflow: hidden;
  width: 100%;
  margin: 0;
}


/* Einheitliche Bildhöhe */

.blog-items .blog-item figure img,
.blog-items .blog-item .item-image img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 300ms ease;
}


/* Leichte Bildvergrößerung beim Überfahren */

.blog-items .blog-item:hover figure img,
.blog-items .blog-item:hover .item-image img {
  transform: scale(1.025);
}


/* Bildunterschriften ausblenden, sofern nicht benötigt */

.blog-items .blog-item figcaption {
  padding: 0.4rem 0.75rem;
  color: var(--textfarbe-hell);
  font-size: 0.85rem;
}


/* ==========================================================
   10. Kartentitel
   ========================================================== */

.blog-items .blog-item .page-header {
  margin: 0 0 0.75rem;
}


/* Überschrift */

.blog-items .blog-item .page-header h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}


/* Verlinkte Überschrift soll wie normaler Text aussehen */

.blog-items .blog-item .page-header h2 a {
  color: var(--textfarbe);
  text-decoration: none;
}


/* Beim Überfahren orange */

.blog-items .blog-item .page-header h2 a:hover,
.blog-items .blog-item .page-header h2 a:focus {
  color: var(--kolping-orange);
}


/* ==========================================================
   11. Einleitungstext und Metadaten
   ========================================================== */

.blog-items .blog-item p {
  color: var(--textfarbe);
  line-height: 1.55;
}


/* Beitragseigenschaften sicherheitshalber ausblenden */

.blog-items .article-info,
.blog-items .article-info-term,
.blog-items .icons {
  display: none;
}


/* Bearbeiten-Link für eingeloggte Administratoren */

.blog-items .blog-item .icons {
  margin-left: auto;
}


/* ==========================================================
   12. Weiterlesen-Link
   ========================================================== */

.blog-items .blog-item .readmore {
  margin-top: auto;
  padding-top: 1rem;
}


/* Standard-Schaltfläche in einfachen Textlink umwandeln */

.blog-items .blog-item .readmore .btn {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--kolping-orange);
  font-weight: 600;
  text-decoration: none;
}


/* Pfeil vor dem Link */

.blog-items .blog-item .readmore .btn::before {
  margin-right: 0.45rem;
  content: "→";
}


/* Hover */

.blog-items .blog-item .readmore .btn:hover,
.blog-items .blog-item .readmore .btn:focus {
  border: 0;
  background: transparent;
  color: var(--kolping-blau);
  text-decoration: underline;
}


/* Eventuell vorhandenen Joomla-Pfeil ausblenden */

.blog-items .blog-item .readmore .icon-chevron-right,
.blog-items .blog-item .readmore .icon-arrow-right {
  display: none;
}


/* ==========================================================
   13. Allgemeine Schaltflächen
   ========================================================== */

.btn-primary {
  border-color: var(--kolping-orange);
  background-color: var(--kolping-orange);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: var(--kolping-blau);
  background-color: var(--kolping-blau);
  color: #ffffff;
}


/* ==========================================================
   14. Tablet
   ========================================================== */

@media (max-width: 991px) {
  .blog-items.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-grid {
    padding: 1.75rem;
  }

  .container-header .mod-menu {
    gap: 0.65rem;
  }
}


/* ==========================================================
   15. Smartphone
   ========================================================== */

@media (max-width: 768px) {
  :root {
    --seitenstreifen-breite: 0px;
  }

  .container-header .navbar-brand {
    padding: 0.75rem;
  }

  .container-header .navbar-brand img {
    max-width: 95%;
    max-height: 130px;
  }

  .container-header .container-nav {
    justify-content: flex-start;
    padding: 0.3rem 1rem;
  }

  .container-header .mod-menu {
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .site-grid {
    width: 100%;
    padding: 1rem;
    box-shadow: none;
  }

  .container-below-top,
  .container-top-a,
  .container-top-b,
  .container-bottom-a,
  .container-bottom-b {
    width: 100%;
  }

  .blog-items.columns-3,
  .blog-items.columns-2 {
    grid-template-columns: 1fr;
  }

  .blog-items .blog-item figure img,
  .blog-items .blog-item .item-image img {
    height: 210px;
  }

  .blog > .page-header,
  .blog-featured > .page-header {
    gap: 0.75rem;
  }
}


/* ==========================================================
   16. Sehr kleine Displays
   ========================================================== */

@media (max-width: 480px) {
  .container-header .navbar-brand img {
    max-height: 105px;
  }

  .site-grid {
    padding: 0.75rem;
  }

  .blog-items .blog-item .item-content {
    padding: 1rem;
  }

  .blog-items .blog-item figure img,
  .blog-items .blog-item .item-image img {
    height: 190px;
  }
}

/* ==========================================================
   Nächste Termine – DPCalendar Horizontal
   ========================================================== */

/* Gesamter Terminbereich */
.container-bottom-a {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-inhaltsbreite);
  margin: 0 auto;
  padding: 2.5rem 3rem 2.75rem;
  background-color: #ffffff;
  box-shadow: none;
}

/* Eventuellen Joomla-Kartenrahmen entfernen */
.container-bottom-a .card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.container-bottom-a .card-header {
  padding: 0;
  border: 0;
  background: transparent;
}

.container-bottom-a .card-body {
  padding: 0;
}

/* Überschrift „Nächste Termine“ */
.container-bottom-a h2,
.container-bottom-a h3,
.container-bottom-a .card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0 0 2rem;
  color: var(--kolping-blau);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Linien links und rechts der Überschrift */
.container-bottom-a h2::before,
.container-bottom-a h2::after,
.container-bottom-a h3::before,
.container-bottom-a h3::after,
.container-bottom-a .card-header::before,
.container-bottom-a .card-header::after {
  height: 1px;
  background-color: var(--kolping-blau);
  content: "";
  flex: 1;
}

/* DPCalendar-Grundelement */
.container-bottom-a .mod-dpcalendar-upcoming-horizontal {
  width: 100%;
  margin: 0;
}

/* Die drei Termine als Raster */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__events {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
}

/* Einzelner Termin */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__event {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-areas:
    "datum info"
    "datum beschreibung";
  column-gap: 1rem;
  align-content: start;
  min-width: 0;
  padding: 0 2rem;
  border-right: 1px solid #d7d7d7;
}

/* Erster Termin etwas weniger links einrücken */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__event:first-child {
  padding-left: 0;
}

/* Letzter Termin ohne rechte Linie */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__event:last-child {
  padding-right: 0;
  border-right: 0;
}

/* Datumskästchen */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__event
.dp-flatcalendar {
  grid-area: datum;
  align-self: start;
  width: 54px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  text-align: center;
}

/* Monat – vorhandene Inline-Farbe überschreiben */
.container-bottom-a
.dp-flatcalendar__month {
  display: block;
  padding: 0.28rem 0.25rem;
  border-radius: 4px 4px 0 0;
  background-color: var(--kolping-orange) !important;
  color: #ffffff !important;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Tag */
.container-bottom-a
.dp-flatcalendar__day {
  display: block;
  padding: 0.35rem 0.2rem;
  color: var(--textfarbe);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* Informationsbereich mit Titel und Uhrzeit */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__information {
  grid-area: info;
  min-width: 0;
}

/* Termintitel */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__information > a,
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__information .dp-link {
  color: var(--kolping-blau);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__information > a:hover,
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__information .dp-link:hover {
  color: var(--kolping-orange);
  text-decoration: underline;
}

/* Datum und Uhrzeit */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__date {
  margin-top: 0.3rem;
  color: var(--textfarbe-hell);
  font-size: 0.92rem;
}

/* Beschreibung */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__description {
  grid-area: beschreibung;
  margin-top: 0.8rem;
  color: var(--textfarbe);
  line-height: 1.5;
}

/* Leere Bereiche nicht anzeigen */
.container-bottom-a
.mod-dpcalendar-upcoming-horizontal__custom-text:empty {
  display: none;
}


/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 991px) {
  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__events {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event,
  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event:first-child,
  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event:last-child {
    padding: 0 0 1.5rem;
    border-right: 0;
    border-bottom: 1px solid #d7d7d7;
  }

  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}


/* ==========================================================
   Smartphone
   ========================================================== */

@media (max-width: 768px) {
  .container-bottom-a {
    width: 100%;
    padding: 2rem 1rem;
    box-shadow: none;
  }

  .container-bottom-a h2,
  .container-bottom-a h3,
  .container-bottom-a .card-header {
    gap: 0.75rem;
    font-size: 1.4rem;
  }

  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event {
    grid-template-columns: 50px minmax(0, 1fr);
    column-gap: 0.8rem;
  }

  .container-bottom-a
  .mod-dpcalendar-upcoming-horizontal__event
  .dp-flatcalendar {
    width: 50px;
  }
}

/* ==========================================================
   Footer
   ========================================================== */

/* Gesamter Footer */

.container-footer {
    margin-top: 4rem;
    padding: 3rem 2rem 1rem;

    background: var(--kolping-blau);

    border-top: 6px solid var(--kolping-orange);

    color: #ffffff;
}


/* Drei Spalten */

.container-footer .grid-child {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 3rem;

    max-width: var(--max-inhaltsbreite);

    margin: auto;

}


/* Überschriften */

.container-footer h3,
.container-footer .module-title {

    margin-bottom: 1rem;

    color: white;

    font-size: 1.2rem;

}


/* Text */

.container-footer p,
.container-footer li {

    color: rgba(255,255,255,.85);

    line-height:1.8;

}


/* Listen */

.container-footer ul{

    list-style:none;

    margin:0;

    padding:0;

}


/* Links */

.container-footer a{

    color:white;

    text-decoration:none;

}

.container-footer a:hover{

    color:var(--kolping-orange);

}


/* Copyright */

.container-footer .mod-custom:last-child{

    grid-column:1 / -1;

    margin-top:2rem;

    padding-top:1.5rem;

    border-top:1px solid rgba(255,255,255,.2);

    text-align:center;

}


/* Smartphone */

@media (max-width:768px){

.container-footer .grid-child{

grid-template-columns:1fr;

text-align:center;

}

}