/* =====================================================
   News-Bereich + nachgeladene Inhalte
   Gestaltung folgt dem bestehenden Seitenbild:
   Canela für Überschriften, Inter für Fließtext,
   Ocker (--yellow) als Akzent, Reispapier als Fläche.
   ===================================================== */

/* Für Screenreader und Suchmaschinen sichtbar, optisch nicht */
.visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

/* ---------- Hauptnavigation: jetzt vier Punkte ---------- */
#links ul {
   max-width: 440px;
   gap: 6px;
}

#links li {
   width: auto;
   flex: 1 1 0;
   text-align: center;
}

@media (min-width: 1250px) {
   #links ul { max-width: 32vw; }
}

@media (min-width: 1606px) {
   #links ul { max-width: 30vw; }
}

/* ---------- Abschnitt ---------- */
#news {
   background: var(--ricepaper);
}

#news[hidden] {
   display: none !important;
}

.news-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(20px, 2.4vw, 34px);
   margin-top: clamp(26px, 3vw, 44px);
   text-align: left;
}

.news-list.is-single {
   grid-template-columns: minmax(0, 1fr);
   max-width: 620px;
   margin-left: auto;
   margin-right: auto;
}

.news-state {
   grid-column: 1 / -1;
   text-align: center;
   color: #6d6a63;
   font-family: var(--alt-font);
   font-size: .9em;
}

/* ---------- Vorschaukarte ---------- */
.news-card-item {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: var(--radius-card);
   overflow: hidden;
   transition: transform .35s ease;
}

.news-card-item:hover {
   transform: translateY(-5px);
}

.news-card-media {
   position: relative;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: var(--ricepaper);
}

.news-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .6s ease;
}

.news-card-item:hover .news-card-media img {
   transform: scale(1.04);
}

.news-card-body {
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: clamp(22px, 2.2vw, 34px);
}

.news-card-date {
   font-family: var(--alt-font);
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .72em;
   font-weight: 600;
   color: var(--couch);
   margin-bottom: 1.1em;
}

.news-card-heading {
   font-family: 'Canela Web', serif;
   font-weight: 300;
   font-size: 1.55em;
   line-height: 1.3;
   margin: 0 0 .6em;
   /* main.css setzt h3 global auf Versalien – hier nicht erwünscht */
   text-transform: none;
   letter-spacing: 0;
}

.news-card-teaser {
   margin: 0 0 1.6em;
   text-align: left !important;
   hyphens: auto;
}

.news-card-more {
   margin-top: auto;
   align-self: flex-start;
   font-family: var(--alt-font);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   font-size: .82em;
   color: var(--couch);
   text-decoration: none;
   padding-bottom: 4px;
   border-bottom: 2px solid var(--yellow);
   transition: color .3s ease, border-color .3s ease;
}

.news-card-more:hover {
   color: var(--ink);
   border-color: var(--couch);
}

/* ---------- Detailansicht im Overlay ---------- */
.news-detail-date {
   display: block;
   text-align: center;
   font-family: var(--alt-font);
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .72em;
   font-weight: 600;
   color: var(--couch);
   margin-bottom: 2.5em;
}

.news-detail-image {
   margin: 0 0 2.2em;
}

.news-detail-image img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--radius-media);
}

.news-detail-lead {
   font-size: 1.1em;
   line-height: 1.6;
}

/* ---------- Bausteine eines Beitrags ---------- */
.news-block {
   margin-bottom: 1.6em;
}

.news-block:last-child {
   margin-bottom: 0;
}

.news-block-text p:last-child {
   margin-bottom: 0;
}

.news-block-image {
   margin: 2em 0;
}

.news-block-image img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--radius-media);
}

.news-block-image figcaption {
   margin-top: .7em;
   font-family: var(--alt-font);
   font-size: .82em;
   color: #6d6a63;
}

.news-block-list ul,
.news-block-list ol {
   margin: 0;
   padding-left: 1.35em;
}

.news-block-list li {
   margin-bottom: .55em;
   padding-left: .2em;
}

.news-block-list ul {
   list-style: none;
   padding-left: 0;
}

.news-block-list ul li {
   position: relative;
   padding-left: 1.4em;
}

.news-block-list ul li::before {
   content: '';
   position: absolute;
   left: 0;
   top: .62em;
   width: 8px;
   height: 2px;
   background: var(--yellow);
}

/* ---------- Faktenkarte ---------- */
.news-card {
   background: var(--ricepaper);
   border-left: 3px solid var(--yellow);
   border-radius: 0 var(--radius-card) var(--radius-card) 0;
   padding: clamp(20px, 2vw, 30px);
   margin: 2.2em 0;
}

.news-card-title {
   font-family: var(--alt-font);
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .78em;
   font-weight: 600;
   color: var(--couch);
   margin: 0 0 1.2em;
}

.news-card-list {
   margin: 0;
   display: grid;
   gap: .1em;
}

.news-fact {
   display: flex;
   flex-wrap: wrap;
   gap: .3em 1.2em;
   padding: .62em 0;
   border-bottom: 1px solid rgba(25, 26, 32, .1);
}

.news-fact:last-child {
   border-bottom: 0;
   padding-bottom: 0;
}

.news-fact dt {
   flex: 0 0 34%;
   min-width: 120px;
   font-family: var(--alt-font);
   font-weight: 600;
   font-size: .88em;
}

.news-fact dd {
   flex: 1;
   margin: 0;
   min-width: 0;
}

/* ---------- Link-Baustein ---------- */
.news-block-link {
   margin: 2em 0;
}

.news-link-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--yellow);
   color: var(--couch);
   font-family: var(--alt-font);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   font-size: .9em;
   text-decoration: none;
   padding: 1.05em 1.6em;
   border-radius: var(--radius-button);
   transition: background .4s ease, color .4s ease;
}

.news-link-button:hover {
   background: var(--couch);
   color: var(--yellow);
}

.news-link-text {
   font-family: var(--alt-font);
   font-weight: 600;
   color: var(--couch);
   text-decoration: none;
   border-bottom: 2px solid var(--yellow);
   padding-bottom: 3px;
}

.news-link-text:hover {
   border-color: var(--couch);
}

/* ---------- Hinweis auf den neuesten Beitrag ---------- */
.news-teaser {
   position: fixed;
   left: clamp(14px, 2vw, 30px);
   bottom: clamp(14px, 2vw, 30px);
   z-index: 900;
   display: flex;
   align-items: stretch;
   width: min(360px, calc(100vw - 28px));
   background: #35363d;
   color: #fff;
   border-radius: var(--radius-card);
   overflow: hidden;
   opacity: 0;
   transform: translateY(16px);
   transition: opacity .4s ease, transform .4s ease;
}

.news-teaser.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.news-teaser-link {
   display: flex;
   align-items: center;
   gap: 14px;
   flex: 1;
   min-width: 0;
   padding: 14px 8px 14px 14px;
   text-decoration: none;
   color: #fff;
}

.news-teaser-thumb {
   flex: 0 0 auto;
   width: 58px;
   height: 58px;
   border-radius: var(--radius-media);
   overflow: hidden;
   background: rgba(255, 255, 255, .12);
}

.news-teaser-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.news-teaser-text {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
}

.news-teaser-label {
   font-family: var(--alt-font);
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .62rem;
   font-weight: 600;
   color: var(--yellow);
}

.news-teaser-title {
   font-family: 'Canela Web', serif;
   font-weight: 300;
   font-size: 1.05rem;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.news-teaser-more {
   font-family: var(--alt-font);
   font-size: .72rem;
   font-weight: 600;
   color: #fff;
   border-bottom: 2px solid var(--yellow);
   align-self: flex-start;
   padding-bottom: 1px;
   margin-top: 2px;
}

.news-teaser-link:hover .news-teaser-more {
   color: var(--yellow);
}

.news-teaser-close {
   flex: 0 0 auto;
   align-self: flex-start;
   border: 0;
   background: none;
   color: rgba(255, 255, 255, .6);
   font-size: 1.3rem;
   line-height: 1;
   padding: 10px 12px 10px 6px;
   cursor: pointer;
}

.news-teaser-close:hover,
.news-teaser-close:focus-visible {
   color: var(--yellow);
}

@media (max-width: 574px) {
   .news-teaser {
      left: 14px;
      right: 14px;
      width: auto;
   }

   .news-teaser-thumb {
      width: 50px;
      height: 50px;
   }

   .news-teaser-title {
      font-size: .98rem;
      -webkit-line-clamp: 2;
   }
}

@media (prefers-reduced-motion: reduce) {
   .news-teaser {
      transition: opacity .2s ease;
      transform: none;
   }
}

/* ---------- Vorschau-Hinweis (nur für die Redaktion) ---------- */
.news-preview-bar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000000001;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .35em 1.2em;
   flex-wrap: wrap;
   padding: .85em 1.4em;
   background: var(--couch);
   color: #fff;
   font-family: var(--alt-font);
   font-size: .85rem;
   line-height: 1.4;
   text-align: center;
}

.news-preview-bar strong {
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--yellow);
   font-weight: 600;
}

.news-preview-bar a {
   color: #fff;
   font-weight: 600;
   text-decoration: none;
   border-bottom: 2px solid var(--yellow);
   padding-bottom: 2px;
}

/* Platz schaffen, damit der Balken nichts verdeckt */
body.has-preview-bar {
   padding-bottom: 64px;
}

/* ---------- Nachgeladene Rechtstexte ---------- */
.remote-state {
   text-align: center;
   font-family: var(--alt-font);
   font-size: .9em;
   color: #6d6a63;
   padding: 4em 0;
}

.remote-state a {
   color: var(--couch);
}

.remote-target > .tagline {
   margin-top: max(70px, 5vw);
}

/* ---------- Mobil ---------- */
@media (max-width: 766px) {
   .news-list {
      grid-template-columns: minmax(0, 1fr);
      margin-top: 26px;
   }

   .news-card-heading {
      font-size: 1.35em;
   }

   .news-fact dt {
      flex: 1 1 100%;
      min-width: 0;
   }

   .news-fact dd {
      flex: 1 1 100%;
   }

   #links ul {
      max-width: 350px;
      gap: 8px;
   }

   #links li {
      font-size: .92em;
      letter-spacing: .05em;
   }
}

@media (max-width: 380px) {
   #links ul {
      gap: 6px;
   }

   #links li {
      font-size: .84em;
      letter-spacing: .04em;
   }
}

/* =====================================================
   Ergänzungen September 2026
   Seminar-Ausschreibungen: neue Bausteine, Entwurfs-Kennzeichen
   im privaten Vorschau-Link, dreispaltige Kartenreihe.
   ===================================================== */

/* ---------- Drei Karten nebeneinander ---------- */
@media (min-width: 992px) {
   .news-list.is-three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .news-list.is-three .news-card-heading {
      font-size: 1.4em;
   }
}

/* ---------- Datum + Entwurf in einer Zeile ---------- */
.news-card-meta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: .5em .9em;
   margin-bottom: 1.1em;
}

.news-card-meta .news-card-date {
   margin-bottom: 0;
}

.news-card-draft {
   font-family: var(--alt-font);
   font-size: .66em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--couch);
   background: rgba(230, 191, 115, .35);
   border-radius: var(--radius-button);
   padding: .35em .7em;
   line-height: 1;
}

/* ---------- Zwischenüberschrift ---------- */
.news-detail-content .news-block-heading {
   font-family: var(--alt-font);
   font-size: .8em;
   font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: var(--couch);
   text-align: left;
   margin-top: 3em;
   margin-bottom: 1.1em;
   padding-top: 1.6em;
   border-top: 1px solid rgba(25, 26, 32, .1);
}

.news-detail-content .news-block-heading:first-child {
   margin-top: 0;
   padding-top: 0;
   border-top: 0;
}

/* Text direkt unter einer Überschrift rückt näher heran */
.news-block-heading + .news-block {
   margin-top: 0;
}

/* ---------- Hervorhebung (z. B. Einstiegsfrage) ---------- */
.news-highlight {
   max-width: var(--popup-measure, 600px);
   margin: 0 auto 1.8em;
}

.news-highlight p {
   font-family: 'Canela Web', serif;
   font-weight: 100;
   font-size: clamp(1.45em, 2.2vw, 1.9em);
   line-height: 1.35;
   color: var(--ink);
   text-align: left !important;
   hyphens: manual !important;
   margin: 0 !important;
   padding-left: .9em;
   border-left: 3px solid var(--yellow);
}

/* ---------- Häkchen-Liste ---------- */
.news-block-list-check ul li {
   padding-left: 1.9em;
}

.news-block-list-check ul li::before {
   top: .2em;
   width: 1.15em;
   height: 1.15em;
   border-radius: 50%;
   background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%237b1c19' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat;
}

/* ---------- Kacheln ---------- */
.news-features {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
   gap: 14px;
   max-width: var(--popup-measure, 600px);
   margin: 1.8em auto 2em;
}

.news-feature {
   background: var(--ricepaper);
   border-radius: var(--radius-card);
   padding: 1.3em 1.2em 1.4em;
}

.news-feature-num {
   display: block;
   font-family: 'Canela Web', serif;
   font-weight: 100;
   font-size: 2em;
   line-height: 1;
   color: var(--yellow);
   margin-bottom: .45em;
}

.angebot_section .news-feature-title,
.news-feature-title {
   font-family: var(--alt-font);
   font-size: .95em;
   font-weight: 600;
   line-height: 1.35;
   opacity: 1;
   color: var(--ink);
   text-transform: none;
   letter-spacing: 0;
   max-width: none;
   margin: 0 0 .35em;
}

.angebot_section .news-feature-text,
.news-feature-text {
   font-size: .88em;
   line-height: 1.5;
   color: #4a4944;
   text-align: left !important;
   max-width: none;
   margin: 0 !important;
}

/* ---------- Anmeldebox ---------- */
.news-cta {
   max-width: var(--popup-measure, 600px);
   margin: 2.6em auto 0;
   background: #35363d;
   color: #fff;
   border-radius: var(--radius-card);
   padding: clamp(26px, 3vw, 40px);
   text-align: left;
}

.angebot_section .news-cta > * {
   max-width: none;
}

.angebot_section .news-cta-title,
.news-cta-title {
   font-family: 'Canela Web', serif;
   font-weight: 100;
   font-size: 1.9em;
   line-height: 1.25;
   text-transform: none;
   letter-spacing: 0;
   color: #fff;
   margin: 0 0 .5em;
}

.news-cta-text p {
   color: rgba(255, 255, 255, .85);
   text-align: left !important;
   margin-bottom: 1.4em !important;
}

.news-cta-text a {
   color: var(--yellow);
}

.news-cta .news-link-button:hover {
   background: #fff;
   color: var(--couch);
}

.angebot_section .news-cta-note,
.news-cta-note {
   margin: 1.2em 0 0 !important;
   font-size: .82em;
   color: rgba(255, 255, 255, .65);
   text-align: left !important;
}

.news-cta-note a {
   color: #fff;
   text-decoration: none;
   border-bottom: 1px solid var(--yellow);
}

@media (max-width: 574px) {
   .news-features {
      grid-template-columns: minmax(0, 1fr);
   }

   .news-cta .news-link-button {
      display: flex;
      width: 100%;
   }
}

/* Listen im Popup auf dieselbe Lesebreite wie der Fließtext setzen
   (vorher klebten sie am linken Rand des breiteren Containers) */
.angebot_section .news-block-list ul,
.angebot_section .news-block-list ol {
   margin-left: auto;
   margin-right: auto;
}

/* Vorschau-Balken darf das Ende des Beitrags nicht verdecken */
body.has-preview-bar #news-detail-body {
   padding-bottom: 90px;
}