/* =============================================================================
   Wanted Home – Beitragsseite /news/<slug> (ab 0.19.1, E61)
   Variante B „Zwei Spalten“: rechts Kopf und Text, links das Bild, Oberkante
   bündig mit dem ersten Absatz, beim Scrollen stehend. Smartphone einspaltig.
   ============================================================================= */
@layer seiten {
  .beitrag {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    max-width: var(--breite);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) var(--rand) 0;
  }
  .beitrag__kopf { grid-column: 2; grid-row: 1; }
  .beitrag__bild {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
    margin: 2rem 0 0;
  }
  .beitrag__text { grid-column: 2; grid-row: 2; margin-top: 2rem; }

  .beitrag__zurueck {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 1.5rem;
    color: var(--braun);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
  }
  .beitrag__zurueck::before { content: "←"; transition: transform var(--dauer) var(--kurve); }
  .beitrag__zurueck:hover { color: var(--rot-tief); }
  .beitrag__zurueck:hover::before { transform: translateX(-0.2em); }
  @media (prefers-reduced-motion: reduce) { .beitrag__zurueck::before { transition: none; } }

  .beitrag__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0 0 0.75rem;
    color: var(--rot-tief);
    font-size: var(--text-s);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .beitrag__titel {
    margin: 0;
    font-size: var(--titel-m);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  .beitrag__anriss { max-width: 34rem; margin: 1.25rem 0 0; font-size: var(--text-l); line-height: 1.4; }

  .beitrag__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
  .beitrag__quelle { margin-top: 0.5rem; color: var(--grau); font-size: var(--text-s); }

  .beitrag__knoepfe { margin-top: 2rem; }
  .beitrag__knoepfe[data-knoepfe="1"] { --knoepfe: 1; }

  .beitrag__weitere { margin-top: var(--abstand-abschnitt); }

  /* „Weitere News“ kleiner als die Übersicht (ab 0.19.4, E64): Überschrift
     titel-s, Karten in vier Spalten (unter 64 rem zwei, unter 30 rem eine),
     kleinere Titel und Texte, weniger Innenabstand der Fläche */
  .beitrag__weitere.abschnitt--flaeche { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .beitrag__weitere .abschnitt__titel { margin-bottom: 1.25rem; font-size: var(--titel-s); }
  .beitrag__weitere .karten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 2rem);
  }
  .beitrag__weitere .news-karte__meta { margin-top: 0.9rem; }
  .beitrag__weitere .karte__titel { margin-bottom: 0.35rem; font-size: var(--text-l); line-height: 1.1; }
  .beitrag__weitere .karte p:not(.news-karte__meta) { font-size: var(--text-s); }

  /* Videos (ab 0.33.0, E87): eigenes Video spielt im Beitrag, Anbieter-Video nur als Link */
  .video { margin: 2rem 0 0; }
  .video__flaeche { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--braun); color: var(--papier); }
  .video__eigen { display: block; width: 100%; height: auto; background: var(--braun); }
  .video--hochkant .video__flaeche { max-width: min(100%, 24rem); }
  .video--hochkant .video__unterschrift { max-width: min(100%, 24rem); }
  .video__start { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: rgb(68 47 41 / 0.12); color: var(--papier); cursor: pointer; }
  .video__start[hidden] { display: none; }
  .video__zeichen { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; padding-left: 0.2rem; border-radius: 50%; background: var(--rot); box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); transition: transform var(--dauer) var(--kurve); }
  .video__start:hover .video__zeichen, .video__start:focus-visible .video__zeichen,
  .video--extern .video__flaeche:hover .video__zeichen { transform: scale(1.08); }
  .video__start:focus-visible { outline: 3px solid var(--papier); outline-offset: -6px; border-radius: var(--radius); }

  .video--extern .video__flaeche { aspect-ratio: 16 / 9; }
  .video--extern .video__bild, .video--extern .video__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
  .video--extern .video__flaeche:hover .video__bild img { transform: scale(1.03); }
  .video--extern .video__zeichen { position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%; }
  .video__anbieter { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 1; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: var(--braun); font-size: var(--text-s); font-weight: 600; line-height: 1.2; }

  .video__unterschrift { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.6rem; font-size: var(--text-s); }
  .video__titel { font-weight: 600; }
  .video__dauer { color: var(--braun-75); }
  .video__link { color: var(--braun); font-weight: 600; text-decoration: none; }
  .video__link::after { content: " ↗"; }
  .video__link:hover { color: var(--rot-tief); }
  @media (prefers-reduced-motion: reduce) {
    .video__zeichen, .video--extern .video__bild img { transition: none; }
  }

  /* Ohne Bild: eine Spalte in Lesebreite */
  .beitrag--ohne-bild { grid-template-columns: minmax(0, 46rem); }
  .beitrag--ohne-bild .beitrag__kopf,
  .beitrag--ohne-bild .beitrag__text { grid-column: 1; }

  @media (max-width: 64rem) {
    .beitrag__weitere .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 30rem) {
    .beitrag__weitere .karten { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 48rem) {
    .beitrag { grid-template-columns: minmax(0, 1fr); }
    .beitrag__kopf, .beitrag__bild, .beitrag__text { grid-column: 1; grid-row: auto; }
    .beitrag__bild { position: static; }
  }
}