/* =========================
   TOKENS / BASIS
   ========================= */
:root{
  /* Logo-Maße */
  --logo-w: 204px;
  --logo-h: 40px;

  /* Logo-Bars unter dem Logo */
  --logo-bars-height: 10px;
  --logo-bars-offset: 20px;
  --logo-bars-gap: .25rem;
  --logo-bar-length: 1;            /* 1 = volle Breite, 0.92 = leicht kürzer */

  /* Viewport-Brandbars */
  --nav-bars-height: 8px;

  /* Brandfarben (Basis + Text) */
  --brand-1:#f17a23; --brand-1-text:#fff;
  --brand-2:#f26422; --brand-2-text:#fff;
  --brand-3:#e9c72d; --brand-3-text:#000;
  --brand-4:#00a550; --brand-4-text:#000;
  --brand-5:#1c9dd8; --brand-5-text:#000;
  --brand-6:#2058a8; --brand-6-text:#fff;
  --brand-7:#ed278b; --brand-7-text:#000;
  --brand-8:#a02664; --brand-8-text:#fff;

  /* Timeline-Farben: solide + „soft“ */
  --timeline-color-1: var(--brand-1) !important;
  --timeline-color-1-soft: color-mix(in srgb, var(--brand-1) 30%, transparent)!important;

  --timeline-color-2: var(--brand-2)!important;
  --timeline-color-2-soft: color-mix(in srgb, var(--brand-2) 30%, transparent)!important;

  --timeline-color-3: var(--brand-3)!important;
  --timeline-color-3-soft: color-mix(in srgb, var(--brand-3) 30%, transparent)!important;

  --timeline-color-4: var(--brand-4)!important;
  --timeline-color-4-soft: color-mix(in srgb, var(--brand-4) 30%, transparent)!important;

  --timeline-color-5: var(--brand-5)!important;
  --timeline-color-5-soft: color-mix(in srgb, var(--brand-5) 30%, transparent)!important;

  --timeline-color-6: var(--brand-6)!important;
  --timeline-color-6-soft: color-mix(in srgb, var(--brand-6) 30%, transparent)!important;

  --timeline-color-7: var(--brand-7)!important;
  --timeline-color-7-soft: color-mix(in srgb, var(--brand-7) 30%, transparent)!important;

  --timeline-color-8: var(--brand-8)!important;
  --timeline-color-8-soft: color-mix(in srgb, var(--brand-8) 30%, transparent)!important;

  /* Aktives Segment (Viewport-Brandbars) */
  --brandbar-active-outline:#fff;
  --brandbar-active-shadow:rgba(0,0,0,.2);

  /* Typo-Base (Option B aus vorhin) */
  --bs-body-font-size: 1.25rem;

  /* Preloader */
  --preloader-bg: #d4a017;
  --preloader-size: clamp(120px, 22vmin, 280px);
  --preloader-speed: 1.5s;
  --preloader-ease: linear;
  --pre-angle: -45deg;
  --pre-stripe: 250px;
}

/* Body & Headings proportional */
body { font-size: var(--bs-body-font-size); }
h1 { font-size: calc(var(--bs-body-font-size) * 2.5); }
h2 { font-size: calc(var(--bs-body-font-size) * 2.0); }
h3 { font-size: calc(var(--bs-body-font-size) * 1.75); }
h4 { font-size: calc(var(--bs-body-font-size) * 1.5); }
h5 { font-size: calc(var(--bs-body-font-size) * 1.25); }
h6 { font-size: var(--bs-body-font-size); }

/* Kleinere Screens: Logo minimal anpassen */
@media (max-width:576px){
  :root{
    --logo-w: 180px;
    --logo-h: 36px;
  }
}

/* =========================
   NAV-LAYOUT
   ========================= */
.container.container-mainnavigation{
  display:flex;
  align-items:center;
  overflow:visible;
}
.navbar-brand.navbar-brand-stack.navbar-brand-image{
  top: -15px;
}
.container-mainnavigation > .navbar-brand{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  margin-right:1rem;
  padding:0;
  min-width: var(--logo-w);
  min-height: calc(var(--logo-h) + var(--logo-bars-offset) + var(--logo-bars-height));
}
.container-mainnavigation > .navbar-collapse{
  flex:1 1 auto;
  min-width:0;
}

/* =========================
   LOGO (Bootstrap entscheidet!)
   ========================= */
.navbar-brand img{
  max-width: none;
  height: auto;
}
.navbar-transition img.navbar-brand-logo-normal {
  display: block !important;
}

/* =========================
   LOGO-BARS (2×4) UNTER DEM LOGO
   ========================= */
.navbar-brand .logo-bars{
  position:absolute;
  left:0; right:0;
  top: calc(var(--logo-h) + var(--logo-bars-offset));
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:var(--logo-bars-height);
  gap:var(--logo-bars-gap);
  margin:0; padding:0; line-height:0;
  background:none; outline:0;
  pointer-events:none;
}
.navbar-brand .logo-bars .logo-bar{
  width:100%;
  height:var(--logo-bars-height);
  border-radius:3px;
  transform-origin:left center;
  transform:scaleX(var(--logo-bar-length));
}
/* Farben */
.logo-bar.bar-1{ background:var(--brand-1); }
.logo-bar.bar-2{ background:var(--brand-2); }
.logo-bar.bar-3{ background:var(--brand-3); }
.logo-bar.bar-4{ background:var(--brand-4); }
.logo-bar.bar-5{ background:var(--brand-5); }
.logo-bar.bar-6{ background:var(--brand-6); }
.logo-bar.bar-7{ background:var(--brand-7); }
.logo-bar.bar-8{ background:var(--brand-8); }

/* =========================
   VIEWPORT-BRANDBARS (8 farbige Streifen)
   ========================= */
.nav-brand-bars{
  --bars:8;
  display:grid;
  grid-template-columns:repeat(var(--bars),1fr);
  height:var(--nav-bars-height);
  gap:0;
  margin:0;
}
.nav-brand-bars--full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.nav-brand-bars .nav-bar{
  display:block;
  height:100%;
  line-height:0;
  text-decoration:none;
  background:var(--bar-bg,#f17a23);
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
/* Farben 1..8 */
.nav-brand-bars .nav-bar[data-index="1"], .nav-brand-bars .nav-bar:nth-child(1){ --bar-bg:var(--brand-1); }
.nav-brand-bars .nav-bar[data-index="2"], .nav-brand-bars .nav-bar:nth-child(2){ --bar-bg:var(--brand-2); }
.nav-brand-bars .nav-bar[data-index="3"], .nav-brand-bars .nav-bar:nth-child(3){ --bar-bg:var(--brand-3); }
.nav-brand-bars .nav-bar[data-index="4"], .nav-brand-bars .nav-bar:nth-child(4){ --bar-bg:var(--brand-4); }
.nav-brand-bars .nav-bar[data-index="5"], .nav-brand-bars .nav-bar:nth-child(5){ --bar-bg:var(--brand-5); }
.nav-brand-bars .nav-bar[data-index="6"], .nav-brand-bars .nav-bar:nth-child(6){ --bar-bg:var(--brand-6); }
.nav-brand-bars .nav-bar[data-index="7"], .nav-brand-bars .nav-bar:nth-child(7){ --bar-bg:var(--brand-7); }
.nav-brand-bars .nav-bar[data-index="8"], .nav-brand-bars .nav-bar:nth-child(8){ --bar-bg:var(--brand-8); }
/* Hover / Focus */
.nav-brand-bars .nav-bar:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.nav-brand-bars .nav-bar:focus-visible{
  outline:2px solid currentColor;
  outline-offset:-2px;
}
/* Active-Highlight */
.nav-brand-bars[data-active-bar="1"] .nav-bar[data-index="1"],
.nav-brand-bars[data-active-bar="2"] .nav-bar[data-index="2"],
.nav-brand-bars[data-active-bar="3"] .nav-bar[data-index="3"],
.nav-brand-bars[data-active-bar="4"] .nav-bar[data-index="4"],
.nav-brand-bars[data-active-bar="5"] .nav-bar[data-index="5"],
.nav-brand-bars[data-active-bar="6"] .nav-bar[data-index="6"],
.nav-brand-bars[data-active-bar="7"] .nav-bar[data-index="7"],
.nav-brand-bars[data-active-bar="8"] .nav-bar[data-index="8"]{
  box-shadow: inset 0 0 0 3px var(--brandbar-active-outline),
              inset 0 -2px 4px 0 var(--brandbar-active-shadow);
  transform:translateY(-0.5px);
}

/* =========================
   ANIMATIONEN (Logo-Bars & Preloader)
   ========================= */
@media (prefers-reduced-motion: no-preference){
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar{
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform, opacity;
    animation: dbLogoBarsSoft .55s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(1){ animation-delay:.02s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(2){ animation-delay:.05s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(3){ animation-delay:.08s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(4){ animation-delay:.11s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(5){ animation-delay:.14s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(6){ animation-delay:.17s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(7){ animation-delay:.20s; }
  .container-mainnavigation > .navbar-brand .logo-bars .logo-bar:nth-child(8){ animation-delay:.23s; }
  @keyframes dbLogoBarsSoft{
    to{ opacity:1; transform: scaleX(1); }
  }

  .preloader{
    animation: dbStripesMove 18s linear infinite;
  }
  @keyframes dbStripesMove{
    from { background-position: 50% 50%; }
    to   { background-position: calc(50% + var(--pre-stripe)) calc(50% - var(--pre-stripe)); }
  }
}

.preloader{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(
      var(--pre-angle),
      var(--brand-1) 0               calc(1 * var(--pre-stripe)),
      var(--brand-2) calc(1 * var(--pre-stripe)) calc(2 * var(--pre-stripe)),
      var(--brand-3) calc(2 * var(--pre-stripe)) calc(3 * var(--pre-stripe)),
      var(--brand-4) calc(3 * var(--pre-stripe)) calc(4 * var(--pre-stripe)),
      var(--brand-5) calc(4 * var(--pre-stripe)) calc(5 * var(--pre-stripe)),
      var(--brand-6) calc(5 * var(--pre-stripe)) calc(6 * var(--pre-stripe)),
      var(--brand-7) calc(6 * var(--pre-stripe)) calc(7 * var(--pre-stripe)),
      var(--brand-8) calc(7 * var(--pre-stripe)) calc(8 * var(--pre-stripe))
    );
  background-position: 50% 50%;
  z-index: 9999;
}
.preloader.is-hidden{ opacity: 0; visibility: hidden; }
.preloader-svg{ width: var(--preloader-size); height: auto; }

/* Visually hidden helper */
.sr-only{
  position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@keyframes spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference){
  #Rad_links, #Rad_rechts{ transform-box: fill-box; transform-origin: center; animation: spin var(--preloader-speed) var(--preloader-ease) infinite; }
  #Rad_links{ animation-direction: normal; }
  #Rad_rechts{ animation-direction: reverse; }
}

/* =========================
   HEADER-HÖHEN (wegen Brandbars)
   ========================= */
@media (min-width: 1400px) { .navbar-mainnavigation { --mainnavigation-nav-height: 100px; } }
@media (min-width: 1200px) { .navbar-mainnavigation { --mainnavigation-nav-height: 100px; } }
@media (min-width:  992px) { .navbar-mainnavigation { --mainnavigation-nav-height:  90px; } }

/* Vertikale Zentrierung Logo + Logo-Bars im Header (ab Desktop) */
@media (min-width: 992px) {
  .navbar-mainnavigation {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .container.container-mainnavigation {
    min-height: var(--mainnavigation-nav-height);
    align-items: center !important;
  }
}

/* =========================
   CARDS & BUTTONS
   ========================= */
.card--edge .card-body,
.card--edge .card-footer{
  position: relative;
  box-shadow: inset var(--edge-thickness,6px) 0 0 0 var(--edge-color, var(--brand-1));
}
.card--edge { border-left: 0 !important; border-radius: inherit; position: relative; z-index: 0; }
.card--edge.card--edge--over{ position: relative; z-index: 0; }
.card--edge.card--edge--over::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: var(--edge-thickness,6px);
  background: var(--edge-color, var(--brand-1));
  pointer-events:none;
  z-index: 2;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* Button-Tokens je Slot */
.btn-brand-1 { --btn-bg: var(--brand-1); --btn-fg: var(--brand-1-text,#fff); }
.btn-brand-2 { --btn-bg: var(--brand-2); --btn-fg: var(--brand-2-text,#000); }
.btn-brand-3 { --btn-bg: var(--brand-3); --btn-fg: var(--brand-3-text,#000); }
.btn-brand-4 { --btn-bg: var(--brand-4); --btn-fg: var(--brand-4-text,#000); }
.btn-brand-5 { --btn-bg: var(--brand-5); --btn-fg: var(--brand-5-text,#000); }
.btn-brand-6 { --btn-bg: var(--brand-6); --btn-fg: var(--brand-6-text,#fff); }
.btn-brand-7 { --btn-bg: var(--brand-7); --btn-fg: var(--brand-7-text,#000); }
.btn-brand-8 { --btn-bg: var(--brand-8); --btn-fg: var(--brand-8-text,#fff); }

/* Solid-Buttons (robust mit Fallback) */
.btn[class*="btn-brand-"]{
  background-color: var(--btn-bg, var(--edge-color));
  border-color:     var(--btn-bg, var(--edge-color));
  color:            var(--btn-fg, #fff);
}
.btn[class*="btn-brand-"]:hover,
.btn[class*="btn-brand-"]:focus{
  filter: brightness(1.05);
  color: var(--btn-fg, #fff);
}

/* Outline-Buttons über BS-Variablen */
.btn.btn-outline-brand-1{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-1); --bs-btn-border-color: var(--brand-1);
  --bs-btn-hover-bg: var(--brand-1); --bs-btn-hover-border-color: var(--brand-1); --bs-btn-hover-color: var(--brand-1-text,#fff);
  --bs-btn-active-bg: var(--brand-1); --bs-btn-active-border-color: var(--brand-1); --bs-btn-active-color: var(--brand-1-text,#fff);
}
.btn.btn-outline-brand-2{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-2); --bs-btn-border-color: var(--brand-2);
  --bs-btn-hover-bg: var(--brand-2); --bs-btn-hover-border-color: var(--brand-2); --bs-btn-hover-color: var(--brand-2-text,#000);
  --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2); --bs-btn-active-color: var(--brand-2-text,#000);
}
.btn.btn-outline-brand-3{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-3); --bs-btn-border-color: var(--brand-3);
  --bs-btn-hover-bg: var(--brand-3); --bs-btn-hover-border-color: var(--brand-3); --bs-btn-hover-color: var(--brand-3-text,#000);
  --bs-btn-active-bg: var(--brand-3); --bs-btn-active-border-color: var(--brand-3); --bs-btn-active-color: var(--brand-3-text,#000);
}
.btn.btn-outline-brand-4{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-4); --bs-btn-border-color: var(--brand-4);
  --bs-btn-hover-bg: var(--brand-4); --bs-btn-hover-border-color: var(--brand-4); --bs-btn-hover-color: var(--brand-4-text,#000);
  --bs-btn-active-bg: var(--brand-4); --bs-btn-active-border-color: var(--brand-4); --bs-btn-active-color: var(--brand-4-text,#000);
}
.btn.btn-outline-brand-5{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-5); --bs-btn-border-color: var(--brand-5);
  --bs-btn-hover-bg: var(--brand-5); --bs-btn-hover-border-color: var(--brand-5); --bs-btn-hover-color: var(--brand-5-text,#000);
  --bs-btn-active-bg: var(--brand-5); --bs-btn-active-border-color: var(--brand-5); --bs-btn-active-color: var(--brand-5-text,#000);
}
.btn.btn-outline-brand-6{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-6); --bs-btn-border-color: var(--brand-6);
  --bs-btn-hover-bg: var(--brand-6); --bs-btn-hover-border-color: var(--brand-6); --bs-btn-hover-color: var(--brand-6-text,#fff);
  --bs-btn-active-bg: var(--brand-6); --bs-btn-active-border-color: var(--brand-6); --bs-btn-active-color: var(--brand-6-text,#fff);
}
.btn.btn-outline-brand-7{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-7); --bs-btn-border-color: var(--brand-7);
  --bs-btn-hover-bg: var(--brand-7); --bs-btn-hover-border-color: var(--brand-7); --bs-btn-hover-color: var(--brand-7-text,#000);
  --bs-btn-active-bg: var(--brand-7); --bs-btn-active-border-color: var(--brand-7); --bs-btn-active-color: var(--brand-7-text,#000);
}
.btn.btn-outline-brand-8{
  --bs-btn-bg: transparent; --bs-btn-color: var(--brand-8); --bs-btn-border-color: var(--brand-8);
  --bs-btn-hover-bg: var(--brand-8); --bs-btn-hover-border-color: var(--brand-8); --bs-btn-hover-color: var(--brand-8-text,#fff);
  --bs-btn-active-bg: var(--brand-8); --bs-btn-active-border-color: var(--brand-8); --bs-btn-active-color: var(--brand-8-text,#fff);
}
.btn[class*="btn-outline-brand-"]:focus-visible{
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-btn-color) 25%, transparent);
}

/* -------- FOOTER Social Icons --------- */
.footer-4 .row { padding-left: 20px; }
.footer-4 .col-2 { padding: 0; }
.socialicon, .socialicon img { width: 36px; height: 36px; }

/* Seite Aktuelles */
#c2250 .card-img-top {
  max-width: 100px;
  margin: auto;
}

/* =========================
   EXT:news list templates
   ========================= */
.news-list {
  display: grid;
  gap: 2rem;
}

.news-list-kachel,
.news-list-referenzen {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.news-list-kachel .news-kachel-item,
.news-list-referenzen .news-kachel-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-list-kachel .news-kachel-item:hover,
.news-list-referenzen .news-kachel-item:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}
.news-kachel-media {
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.news-kachel-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.news-kachel-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-inline: 1rem;
  padding-bottom: 1rem;
  flex: 1 1 auto;
  /* make content stretch so footers align across the row */
  display: flex;
  flex-direction: column;
}
.news-kachel-badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  background: var(--brand-6);
  color: var(--brand-6-text);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}
.news-kachel-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.25rem * 2);
  font-weight: 700;
}
.news-kachel-teaser {
  color: inherit;
  font-weight: 400;
  margin: 0;
  font-size: 1rem;
}
.news-kachel-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}
.news-kachel-more {
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--brand-6);
  color: var(--brand-6);
  background: transparent;
  border-radius: 0.375rem;
}

.news-kachel-date {
  color: rgba(0,0,0,0.55);
  font-size: 0.9rem;
}

/* Ensure pagination spans full width of the grid */
.news-list > .pagination,
.news-list .pagination,
.news-list nav,
.news-list .tx-pagination,
.news-list .tx_news_pagebrowser {
  grid-column: 1 / -1;
}

.news-list-editorial {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.news-editorial-item {
  display: block;
}
.news-editorial-grid {
  display: grid;
  gap: 1.5rem;
}
.news-editorial-media {
  overflow: hidden;
}
.news-editorial-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-editorial-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.news-editorial-badge {
  display: inline-flex;
  padding: 0.35rem 0.75rem;
  background: var(--brand-4);
  color: var(--brand-4-text);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
}
.news-editorial-date {
  font-size: 0.95rem;
  color: #666;
}
.news-editorial-title {
  margin: 0;
}
.news-editorial-teaser {
  line-height: 1.6;
}
.news-editorial-more {
  margin-top: auto;
  font-weight: 700;
  text-decoration: none;
}

.news-list-kompakt {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.news-kompakt-item {
  display: block;
}
.news-kompakt-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-columns: auto 1fr;
}
.news-kompakt-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.news-kompakt-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.news-kompakt-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.news-kompakt-date {
  font-size: 0.95rem;
  color: #666;
}
.news-kompakt-title {
  margin: 0;
}
.news-kompakt-teaser {
  color: inherit;
}
.news-kompakt-more {
  font-weight: 700;
  text-decoration: none;
}

.no-news-found {
  padding: 2rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .news-list-kachel,
  .news-list-referenzen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-editorial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .news-list-kachel,
  .news-list-referenzen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .news-kompakt-grid {
    grid-template-columns: 25% 1fr;
  }
}

@media (min-width: 1200px) {
  .news-list-kachel,
  .news-list-referenzen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}