html {
  font-size: 14px;
}

@include media-breakpoint-up(sm) {
  html {
	font-size: 16px;
  }
}

@include media-breakpoint-up(md) {
  html {
	font-size: 20px;
  }
}

@include media-breakpoint-up(lg) {
  html {
	font-size: 28px;
  }
}

.top {
  display: flex;
  flex-direction: row;
}

.type .type__list:after {
	content: "";
	clear: both
}

.type .type__list {
  flex: 2;
}

.type .type__item {
	float: left;
	display: block;
	margin-right: 0px;
}

.type .type__item .type__anchor {
	background: url("../images/sort_icon.gif") 3px 5px no-repeat
}

.type .type__item:first-child {
	margin-right: 20px;
	margin-left: 0px;
}

.type .type__item:first-child .type__anchor {
	background: url("../images/sort_icon.gif") 3px -95px no-repeat
}

.type .type__anchor {
	display: block;
	border: 1px solid #bebebe;
	background: #f7f7f7;
	height: 34px;
	width: 87px;
	font-size: 11px;
	color: #000;
	line-height: 34px;
	text-align: left;
	padding-left: 40px
}

#extented__table_wrapper {
	padding: 30px 15px;
}

.dataTables_wrapper .dataTables_filter {
 	float: right;
  	flex: 4;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  	padding: 0rem 0rem;
}

@media (max-width: 767.99px) {
	.dataTables_wrapper .bottom .dataTables_length {
		display: none;
  	}
  	.type {
		display: none;
  	}
  	.dataTables_wrapper .dataTables_filter {
		flex: 0;
  	}
}

#bwextented__main .card {
	margin-bottom: 15px;
}

.bwextented__deceased {
	background-color: black !important;
	color: white;
}


/* ---------------------------------------------------------- Karte und Consent
 *
 * Der Vorschalter steht dort, wo sonst die Karte waere. Er soll nicht wie eine
 * Fehlermeldung aussehen, sondern wie eine Frage: es fehlt nur die Zustimmung.
 */
.bw-vorschalter {
    padding: 1.5rem;
    background: #f7f8fa;
    border: 1px dashed #b9bfc7;
    border-radius: 8px;
    text-align: center;
}

.bw-vorschalter-titel {
    margin-bottom: .5rem;
    font-size: 1.05rem;
}

.bw-vorschalter p {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}

.bw-vorschalter-fuss {
    margin-bottom: 0;
    font-size: .85rem;
    color: #5b6470;
}

.bw-karte-flaeche {
    /* Ohne Hoehe zeigt Leaflet nichts - das Element hat von sich aus keine. */
    height: 32rem;
    max-height: 75vh;
    border-radius: 8px;
    z-index: 0;
}

.bw-karte-fuss {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: #5b6470;
}

.bw-karte-gesperrt,
.bw-karte-entfallen {
    padding: 1.5rem;
    background: #f7f8fa;
    border-left: 3px solid #a50010;
    border-radius: 0 6px 6px 0;
}

@media (max-width: 36rem) {
    .bw-karte-flaeche {
        height: 22rem;
    }
}

/* ------------------------------------------------------------ Medienkacheln
 *
 * Für Elemente, deren ganzer Inhalt eine verlinkte Überschrift ist: die 28
 * Video-, Artikel- und Tonverweise auf „Videos / Links / Songs und Sounds".
 *
 * Vorher standen sie als nackte Textlinks in ihren Spaltenzellen - drei Spalten
 * waren schon da (layout 4201), aber ohne sichtbare Fassung, und klickbar war
 * nur die Zeile selbst. Ausgezeichnet werden sie über frame_class, weil das
 * genau dafür gedacht ist und die Spaltenbreite in `layout` unberührt bleibt.
 *
 * Die Art des Ziels erkennt das CSS am href - dafür braucht es kein
 * JavaScript. Nur die Domain unter dem Titel setzt das Skript ein, weil sie
 * nicht im Markup steht.
 */
.frame-medienkachel {
    height: 100%;
}

.frame-medienkachel > .frame-container,
.frame-medienkachel > * {
    height: 100%;
}

/* Die Kachel selbst. Das Element bringt seine Überschrift mit, mehr ist nicht
   darin - deshalb hängt die Gestaltung am Rahmen. */
.frame-medienkachel {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid #d6d9de;
    border-radius: 8px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.frame-medienkachel:hover,
.frame-medienkachel:focus-within {
    border-color: #a50010;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

/*
 * Die GANZE Kachel klickbar: der Link liegt über der Fläche. Das war die
 * Beschwerde - vorher traf man nur die Textzeile.
 *
 * Der Link bleibt ein normaler Link: Tastatur, Kontextmenü, „in neuem Tab
 * öffnen" funktionieren weiter. Ein Klick-Zuhörer am Kasten hätte das alles
 * nicht.
 */
.frame-medienkachel a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

/* Die Redaktion hat h5 gewaehlt - deshalb alle Ebenen, nicht h1 bis h4. */
.frame-medienkachel h1,
.frame-medienkachel h2,
.frame-medienkachel h3,
.frame-medienkachel h4,
.frame-medienkachel h5,
.frame-medienkachel h6 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 600;
}

.frame-medienkachel a {
    color: #1c2530;
    text-decoration: none;
}

.frame-medienkachel:hover a,
.frame-medienkachel a:focus-visible {
    color: #a50010;
}

.frame-medienkachel a:focus-visible {
    outline: none;
}

.frame-medienkachel:focus-within {
    outline: 2px solid #a50010;
    outline-offset: 2px;
}

/*
 * Das Zeichen für die Art des Ziels, erkannt am href. Ein Video springt zu
 * YouTube, ein Artikel auf eine fremde Seite, eine Tondatei wird geladen - das
 * sollte man vor dem Klick wissen.
 */
.frame-medienkachel a::before {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #7a828e;
    content: "\2197";                 /* Pfeil nach außen: fremde Seite */
}

.frame-medienkachel a[href*="youtube.com"]::before,
.frame-medienkachel a[href*="youtu.be"]::before {
    content: "\25B6";                 /* Dreieck: Video */
    color: #a50010;
}

.frame-medienkachel a[href$=".mp3"]::before,
.frame-medienkachel a[href$=".wav"]::before,
.frame-medienkachel a[href$=".m4a"]::before,
.frame-medienkachel a[href*="/fileadmin/"]::before {
    content: "\2913";                 /* Pfeil nach unten: Datei */
    color: #1e7b45;
}

/* Die Quelle, vom Skript eingesetzt. Bei elf fremden Artikeln ist sie die
   wichtigste Angabe vor dem Klick. */
/*
 * Der Kern rendert auch bei leerem Element einen Container fuer Bild und Text.
 * Leer belegt er Platz und schiebt die Quelle nach unten.
 */
.frame-medienkachel .ce-textpic:empty,
.frame-medienkachel .ce-bodytext:empty,
.frame-medienkachel header {
    margin: 0;
}

.frame-medienkachel .ce-textpic:empty,
.frame-medienkachel .ce-bodytext:empty {
    display: none;
}

.frame-medienkachel .bw-kachel-quelle {
    margin-top: auto;
    padding-top: .6rem;
    font-size: .8rem;
    color: #5b6470;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .frame-medienkachel {
        transition: none;
    }

    .frame-medienkachel:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------- Linkliste
 *
 * Das Inhaltselement „Linkliste": ein Element, viele Verweise. Ersetzt seit dem
 * 2026-08-31 die Reihe einzelner Elemente mit verlinkter Überschrift - auf der
 * Seite „Videos / Links / Songs und Sounds" waren das 28 je Sprache.
 *
 * Die Einträge tragen zusätzlich die Klasse frame-medienkachel und damit deren
 * Gestaltung: Kasten, ganze Fläche klickbar, Zeichen je Art des Ziels. Hier
 * steht nur, was die Liste selbst braucht - das Raster.
 */
.bw-linkliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.bw-linkliste__titel {
    margin-bottom: .75rem;
}

/*
 * Die Einträge sind <li>. Ihre Gestaltung kommt aus .frame-medienkachel, das
 * für Inhaltselemente gedacht war - deshalb hier die Ergänzungen, die ein
 * Listeneintrag braucht.
 */
.bw-linkliste__eintrag {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.bw-linkliste__eintrag > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.bw-linkliste__titel,
.bw-linkliste__eintrag .bw-linkliste__titel {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.bw-linkliste__bild {
    width: 100%;
    height: auto;
    margin-bottom: .6rem;
    border-radius: 6px;
    object-fit: cover;
}

.bw-linkliste__text {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: #5b6470;
}

.bw-linkliste__leer {
    color: #5b6470;
    font-style: italic;
}

@media (max-width: 36rem) {
    .bw-linkliste {
        grid-template-columns: 1fr;
    }
}