/* ChrAfD Material Flat – Mobile First */
/* Farben nach WordPress-Preset-Namen */

:root {
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--contrast: #111111;
  --wp--preset--color--accent-4: #686868;
  --wp--preset--color--accent-5: #fbfaf3;
  --wp--preset--color--custom-chr-af-d-blau: #01a0e2;
  --wp--preset--color--custom-chr-af-d-rot: #e31e25;

  --chrafd-border: #d7e1e7;
  --chrafd-surface-variant: #f4f8fb;

  --chrafd-radius-sm: 4px;
  --chrafd-radius-md: 6px;
  --chrafd-radius-lg: 8px;

  --chrafd-shadow-1: 0 1px 3px rgba(0, 0, 0, .10);
  --chrafd-shadow-2: 0 3px 10px rgba(0, 0, 0, .12);
}

/* Grundfläche */

body {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

.site-grid {
  background: var(--wp--preset--color--base);
}

/* Header kompakt */

.container-header {
  background: var(--wp--preset--color--custom-chr-af-d-blau);
  border-bottom: 4px solid var(--wp--preset--color--custom-chr-af-d-blau);
  box-shadow: var(--chrafd-shadow-1);
}

.container-header .navbar-brand img,
.container-header .brand-logo img,
.container-header .logo img {
  max-height: 72px;
  width: auto;
}

.container-header .container-nav {
  background: var(--wp--preset--color--base);
}

/* Menü */

.container-header .mod-menu a,
.container-header .navbar-nav .nav-link {
  color: var(--wp--preset--color--contrast);
  border-radius: var(--chrafd-radius-md);
  padding: .55rem .75rem;
}

.container-header .mod-menu a:hover,
.container-header .navbar-nav .nav-link:hover,
.container-header .mod-menu .active > a {
  background: rgba(1, 160, 226, .10);
  color: var(--wp--preset--color--custom-chr-af-d-blau);
}

/* Hauptbereich */

.com-content-category-blog,
.com-content-featured,
.com-content-article {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Titel */

.page-header h1,
.page-header h2,
.blog-item h2,
.blog-item h2 a,
.item-title,
.item-title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  line-height: 1.1;
}

/* Blogkarten */

.blog-items,
.com-content-category-blog__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.blog-item,
.com-content-category-blog__item {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--chrafd-border);
  border-radius: var(--chrafd-radius-lg);
  padding: 1rem;
  box-shadow: var(--chrafd-shadow-1);
  overflow: hidden;
}

.blog-item:hover,
.com-content-category-blog__item:hover {
  box-shadow: var(--chrafd-shadow-2);
  transform: translateY(-1px);
  transition: box-shadow .15s ease, transform .15s ease;
}


/* Erster Beitrag */

.blog-item:first-child,
.com-content-category-blog__item:first-child {
  border-top: 5px solid var(--wp--preset--color--custom-chr-af-d-blau);
}

/* Bilder */

/* Beitragsbilder: volle Breite, vollständiges Bild, kein Zuschnitt */

.blog-item img,
.com-content-category-blog__item img,
.com-content-featured img,
.item-image img,
.intro-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: var(--chrafd-radius-md);
  margin-bottom: .75rem;
}

.blog-item img,
.com-content-category-blog__item img,
.com-content-featured img,
.item-image img,
.intro-image img {
  aspect-ratio: auto !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Text */

.blog-item p,
.com-content-category-blog__item p {
  color: var(--wp--preset--color--contrast);
  font-size: 1rem;
  line-height: 1.6;
}

/* auf Startseite zu lange Volltexte optisch kappen */

.blog-item p:nth-of-type(n+3),
.com-content-category-blog__item p:nth-of-type(n+3) {
  display: none;
}

/* Metadaten */

.article-info {
  color: var(--wp--preset--color--accent-4);
  font-size: .78rem;
  margin-block: .35rem .75rem;
}

/* Buttons */

.readmore a,
.btn,
.btn-primary,
button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .6rem 1rem;
  border: 0;
  border-radius: var(--chrafd-radius-md);
  background: var(--wp--preset--color--custom-chr-af-d-blau);
  color: var(--wp--preset--color--base);
  text-decoration: none;
  box-shadow: none;
}

.readmore a:hover,
.btn:hover,
.btn-primary:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--wp--preset--color--custom-chr-af-d-rot);
  color: var(--wp--preset--color--base);
}

/* Pagination */

.pagination {
  justify-content: center;
  gap: .35rem;
  margin-block: 2rem;
}

.page-link {
  border-radius: var(--chrafd-radius-md);
  border: 1px solid var(--chrafd-border);
  color: var(--wp--preset--color--custom-chr-af-d-blau);
}

.active > .page-link,
.page-link.active {
  background: var(--wp--preset--color--custom-chr-af-d-blau);
  border-color: var(--wp--preset--color--custom-chr-af-d-blau);
  color: var(--wp--preset--color--base);
}

/* Tablet/Desktop */

@media (min-width: 760px) {
  .blog-items,
  .com-content-category-blog__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-item:first-child,
  .com-content-category-blog__item:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .blog-items,
  .com-content-category-blog__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}