/* ==========================================================================
   dc5 — Dance-Charts Template fuer Joomla 5
   Nachbau des J3-Templates (Shape5 Vertex) ohne dessen Framework.

   Farben, Groessen und Abstaende stammen aus dem Prod-Template bzw. dessen
   Vertex-Parametern — gemessen, nicht geschaetzt.

   Zwei bewusste Abweichungen vom Original:
   1. Headerbild und Menueleiste laufen ueber die volle Fensterbreite, nur ihre
      Inhalte sind zentriert (statt eines 955px-Kastens auf grauem Grund).
   2. Die Untermenues sind Panels, die sich bei Bedarf in Spalten teilen.
   ========================================================================== */

/* --- Schriften -----------------------------------------------------------
   Deckungsgleich mit Prod. Das Template selbst nutzt nur Roboto; die
   uebrigen Familien stehen fuer Module und Musicbase-Ausgaben bereit. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/roboto.woff2') format('woff2');}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/arimo.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/opensans.woff2') format('woff2');}
@font-face{font-family:'Viga';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/viga.woff2') format('woff2');}
@font-face{font-family:'Allan';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/allan.woff2') format('woff2');}

/* --- Design-Tokens ------------------------------------------------------- */
:root{
	/* --dc-brand, --dc-header-image und --dc-width setzt index.php */
	--dc-brand-dark:  #6d0100;
	--dc-text:        #272727;
	--dc-text-soft:   #5a5a5a;
	--dc-border:      #cccccc;
	--dc-border-soft: #e6e6e6;
	--dc-bg:          #ffffff;
	--dc-bg-soft:     #f5f5f5;

	--dc-nav-bg:      rgba(51,51,51,.8);
	--dc-nav-solid:   #333333;
	--dc-nav-height:  63px;   /* auf Prod gemessen */
	--dc-head-veil:   rgba(255,255,255,.80);

	--dc-side:        300px;   /* auf Prod gemessen (der Vertex-Parameter 238 stimmt nicht) */
	--dc-gap:         20px;

	--dc-font:        'Roboto', sans-serif;
	--dc-font-head:   Helvetica, Arial, sans-serif;

	--dc-radius:      6px;
}

/* --- Basis --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

body{
	margin:0;
	color:var(--dc-text);
	background:var(--dc-bg);
	font-family:var(--dc-font);
	font-size:1.125rem;
	line-height:1.475em;
}

h1,h2,h3,h4,h5,h6{
	font-family:var(--dc-font-head);
	line-height:1.2;
	text-wrap:balance;
	margin:0 0 .6em;
}
h1{font-size:1.9em;font-weight:700;}
h2{font-size:1.5em;}
h3{font-size:1.25em;}
h4{font-size:1.1em;}

p{margin:0 0 1em;}

a{color:var(--dc-brand);text-decoration:none;}
a:hover,a:focus{text-decoration:underline;}

img{max-width:100%;height:auto;}

:focus-visible{outline:2px solid var(--dc-brand);outline-offset:2px;}

.dc-visually-hidden{
	position:absolute;width:1px;height:1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- Layout -------------------------------------------------------------- */
/* Eine gemeinsame Kante fuer Kopf, Menue, Kacheln, News und Inhalt.
   Seitliches Polster erst, wenn das Fenster schmaler wird als der Container. */
.dc-inner{
	width:100%;
	max-width:var(--dc-width,1200px);
	margin-inline:auto;
	padding-inline:0;
}
@media (max-width:1240px){
	.dc-inner{padding-inline:var(--dc-gap);}
}

.dc-content{padding:calc(var(--dc-gap) * 1.5) 0 80px;}

.dc-grid{display:block;}
@media (min-width:1000px){
	.dc-grid--side{
		display:grid;
		grid-template-columns:1fr var(--dc-side);
		gap:calc(var(--dc-gap) * 1.8);
		align-items:start;
	}
}

/* --- Kopfbereich ---------------------------------------------------------
   Das Headerbild deckt die volle Breite; darueber liegt ein heller Schleier,
   damit Logo und Bedienelemente lesbar bleiben — wie im Original. */
/* Headerbild 1920x480 (4:1) — gross genug fuer die volle Fensterbreite.
   Es liegt auf .dc-top, also auf Kopfbereich UND Menueleiste zusammen: nur so
   scheint das Bild durch die halbtransparente Leiste, wie im Original. */
.dc-top{
	position:relative;
	background-image:var(--dc-header-image);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	background-color:#1a1418;
}
/* Das Headerbild ist 4:1. Über die volle Fensterbreite ist der Streifen sonst
   so flach, dass nur ein Viertel der Bildhöhe übrig bleibt — auf der
   Live-Seite sieht man mehr, weil der Kopfbereich dort schmaler ist. Statt
   das Bild zu beschneiden bekommt der Kopfbereich hier mehr Höhe. */
@media (min-width:1000px){
	.dc-header__overlay{
		min-height:128px;
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
}
.dc-header{background:none;}
.dc-header__overlay{background:var(--dc-head-veil);}

/* Servicezeile: Login / Registrieren / Kontakt */
.dc-header__service{
	display:flex;justify-content:flex-end;align-items:center;
	gap:1.1rem;min-height:32px;padding:14px 0 0;
	font-size:13px;
}
/* 12px Abstand — an der Live-Seite gemessen (dort steht die Zeile ohne Flex,
   die Luecke zwischen LOGOUT und Kontakt betraegt genau 12px). */
.dc-header__service ul{display:flex;gap:12px;list-style:none;margin:0;padding:0;}
/* Masse und Farben an der Live-Seite gemessen: 13px/700, Text #333,
   REGISTRIEREN in #8c1f1d. */
.dc-header__service a{color:#333;font-weight:700;}
.dc-header__service a:hover{color:var(--dc-brand);}
.dc-header__service [data-dc-register]{color:#8c1f1d;}
/* <strong> rechnet bolder auf die 700 des Links drauf und landet bei 900. */
.dc-header__service [data-dc-register] strong{font-weight:inherit;}
.dc-header__service [data-dc-register]:hover{color:#6d0100;}

/* align-items:flex-start statt center: bei center halbiert die Zentrierung
   jede Verschiebung des Logos, wodurch sich der transparente Rand der Datei
   nicht sauber herausrechnen laesst. */
.dc-header__row{
	display:flex;align-items:flex-start;justify-content:space-between;
	gap:var(--dc-gap);padding:0 0 22px;flex-wrap:wrap;
}

.dc-brand{display:block;text-decoration:none;}
/* Auch nach einem Klick (Fokus) bleibt der Markenblock ohne Unterstrich. */
.dc-brand:hover,.dc-brand:focus,.dc-brand:focus-visible{text-decoration:none;}
/* Die Logodatei (537x78) traegt 23px transparenten Rand links und rechts,
   16px oben. Ohne Ausgleich saesse das sichtbare "D" 23px hinter der
   Kante von Menue und Kacheln — die Box ist buendig, das Motiv nicht. */
.dc-brand__logo{
	display:block;width:537px;max-width:100%;height:auto;
	/* Der transparente Rand der Datei wird herausgerechnet, damit die
	   SICHTBARE Wortmarke buendig sitzt: links mit Menue und Kacheln,
	   oben mit den Social-Symbolen. */
	margin-left:-23px;margin-top:-16px;
}
/* Auf Live gemessen: der Claim ueberlappt die Logo-Box um 10px (dort per
   inline top:-17px geloest) und steht in 18,4px. Die Logodatei traegt unten
   transparenten Rand, deshalb wirkt der Text sonst abgesetzt. */
.dc-brand__claim{
	display:block;margin-top:-10px;
	color:var(--dc-text);font-size:18.4px;line-height:1.2;
}

.dc-header__right{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;}

.dc-social ul{display:flex;gap:.7rem;list-style:none;margin:0;padding:0;}
/* Die Icons sind Inline-SVG mit fill:currentColor und wuerden sonst die
   Linkfarbe (rot) erben — auf Prod sind sie schwarz. */
.dc-social a{display:block;color:#272727;line-height:0;}
.dc-social a:hover{color:var(--dc-brand);}
.dc-social svg{width:30px;height:30px;display:block;}
.dc-social img{width:32px;height:32px;}

.dc-search form{display:flex;gap:0;}
.dc-search input[type="text"],
.dc-search input[type="search"]{
	padding:9px 14px;border:1px solid var(--dc-border);border-right:0;
	border-radius:var(--dc-radius) 0 0 var(--dc-radius);
	font:inherit;font-size:.95rem;background:#fff;min-width:230px;
}
.dc-search button{
	padding:9px 16px;border:0;cursor:pointer;
	border-radius:0 var(--dc-radius) var(--dc-radius) 0;
	background:var(--dc-brand);color:#fff;font:inherit;font-weight:700;
}

/* --- Navigation ----------------------------------------------------------
   Zweizeilig wie im Original: Titel plus Untertitel aus dem Feld "Notiz".
   Der aktive Punkt bekommt die Markenfarbe als Flaeche, nicht nur einen
   Unterstrich — so steht er auch auf der dunklen Leiste sofort im Blick. */
/* Am 26.07. auf der Live-Seite gemessen (#s5_menu_outer_wrap):
   rgba(51,51,51,.8), 63px hoch, KEIN backdrop-filter, KEIN Schatten.
   Der Weichzeichner machte die Leiste milchig statt klar durchscheinend. */
.dc-nav{
	background:var(--dc-nav-bg);
	position:relative;z-index:99999;
}
/* Fixiert unveraendert — Prod wechselt beim Scrollen weder Farbe noch
   Schatten, die Leiste bleibt schlicht halbtransparent. */
.dc-nav.is-fixed{
	position:fixed;top:0;left:0;right:0;
	background:var(--dc-nav-bg);
}
.dc-nav .dc-inner{display:flex;align-items:stretch;}

.dc-nav ul{list-style:none;margin:0;padding:0;}
.dc-nav .mod-menu{display:flex;align-items:stretch;}
.dc-nav .mod-menu > li{position:relative;display:flex;}

/* Trennlinien zwischen den Hauptpunkten */
.dc-nav .mod-menu > li + li::before{
	content:"";position:absolute;left:0;top:12px;bottom:12px;
	width:1px;background:rgba(255,255,255,.16);
}

.dc-nav .mod-menu > li > a,
.dc-nav .mod-menu > li > .mod-menu__heading{
	display:flex;flex-direction:column;justify-content:center;
	min-height:var(--dc-nav-height);
	padding:8px 18px;
	color:#fff;text-decoration:none;
	transition:background-color .15s;
}
.dc-nav .dc-nav__title{
	font-size:.98rem;font-weight:700;line-height:1.15;white-space:nowrap;
}
.dc-nav .dc-nav__note{
	margin-top:2px;
	font-size:.72rem;font-weight:400;line-height:1.15;
	color:rgba(255,255,255,.62);white-space:nowrap;
}

.dc-nav .mod-menu > li > a:hover,
.dc-nav .mod-menu > li:focus-within > a{background:rgba(255,255,255,.10);text-decoration:none;}

/* Aktiver Punkt — Flaeche in der Markenfarbe */
.dc-nav .mod-menu > li.current > a,
.dc-nav .mod-menu > li.active > a{background:var(--dc-brand);}
.dc-nav .mod-menu > li.current > a:hover,
.dc-nav .mod-menu > li.active > a:hover{background:var(--dc-brand-dark);}
.dc-nav .mod-menu > li.current > a .dc-nav__note,
.dc-nav .mod-menu > li.active > a .dc-nav__note{color:rgba(255,255,255,.8);}
.dc-nav .mod-menu > li.current + li::before,
.dc-nav .mod-menu > li.active + li::before{background:transparent;}

/* Panel */
.dc-nav .mod-menu__sub{
	position:absolute;top:100%;left:0;
	display:none;
	min-width:240px;width:max-content;max-width:min(760px,92vw);
	padding:14px;
	background:#fff;
	border:1px solid var(--dc-border);
	border-top:3px solid var(--dc-brand);
	border-radius:0 0 var(--dc-radius) var(--dc-radius);
	box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.dc-nav .mod-menu > li:hover > .mod-menu__sub,
.dc-nav .mod-menu > li:focus-within > .mod-menu__sub{display:block;}

/* Lange Listen brechen automatisch um: ab 9 Eintraegen zwei, ab 13 drei Spalten.
   Genau der Fall, an dem das alte einspaltige Dropdown gescheitert ist. */
/* Allgemein bleibt es bei neun Eintraegen (Genre-Charts hat zwoelf). */
.dc-nav .mod-menu__sub:has(> li:nth-child(9)){columns:2;column-gap:26px;}
/* User-Area: die wichtigen Punkte gehoeren nach links, deshalb genau DREI
   Zeilen je Spalte. Mit columns:2 waere die Aufteilung bei sieben Eintraegen
   immer 4+3 — das Raster erlaubt die gewuenschten 3+4. */
/* 🔴 NUR im aufgeklappten Zustand: eine unbedingte display-Angabe wuerde das
   display:none von oben ueberschreiben — dann bleibt das Untermenue staendig
   sichtbar und erscheint auch unter benachbarten Menuepunkten. */
.dc-nav .mod-menu > li.item-191:hover > .mod-menu__sub,
.dc-nav .mod-menu > li.item-191:focus-within > .mod-menu__sub{
	display:grid;grid-template-columns:max-content max-content;column-gap:26px;
}
/* Feste Platzierung: drei Punkte links, vier rechts. Ein blosser Zeilen-
   umbruch wuerde 4+3 machen, ein grid-auto-flow drei Spalten. */
.dc-nav .item-191 .mod-menu__sub > li:nth-child(1){grid-area:1/1;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(2){grid-area:2/1;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(3){grid-area:3/1;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(4){grid-area:1/2;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(5){grid-area:2/2;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(6){grid-area:3/2;}
.dc-nav .item-191 .mod-menu__sub > li:nth-child(7){grid-area:4/2;}
.dc-nav .mod-menu__sub:has(> li:nth-child(13)){columns:3;}

.dc-nav .mod-menu__sub li{break-inside:avoid;}
.dc-nav .mod-menu__sub a{
	display:block;padding:7px 10px;
	color:var(--dc-text);font-size:.92rem;line-height:1.35;
	border-radius:4px;
}
.dc-nav .mod-menu__sub a:hover,
.dc-nav .mod-menu__sub a:focus{
	background:var(--dc-bg-soft);color:var(--dc-brand);text-decoration:none;
}

/* Trenner werden zu Gruppenueberschriften. Im J3-Menue mussten blosse Striche
   ("-----") die Gliederung tragen, weil im einspaltigen Dropdown kein Platz
   fuer mehr war. Hier tragen sie einen Namen und gliedern wirklich. */
.dc-nav .mod-menu__separator{
	display:block;
	margin:14px 0 4px;padding:0 10px 5px;
	color:var(--dc-text-soft);
	font-size:.72rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;
	border-bottom:1px solid var(--dc-border-soft);
}
.dc-nav .mod-menu__sub > li:first-child .mod-menu__separator{margin-top:0;}

/* Panels der letzten Punkte nach innen klappen */
.dc-nav .mod-menu > li:nth-last-child(-n+3) .mod-menu__sub{left:auto;right:0;}

/* Hamburger — erst mobil sichtbar */
.dc-nav__toggle{
	display:none;
	align-items:center;justify-content:center;gap:4px;flex-direction:column;
	width:46px;min-height:var(--dc-nav-height);
	margin-left:auto;background:none;border:0;cursor:pointer;
}
.dc-nav__toggle span:not(.dc-visually-hidden){
	display:block;width:22px;height:2px;background:#fff;border-radius:2px;
}

/* --- Banner / Breadcrumbs ------------------------------------------------- */
.dc-banner{padding:var(--dc-gap) 0 0;}
.breadcrumb{
	display:flex;flex-wrap:wrap;gap:.4rem;
	list-style:none;margin:0 0 1.2rem;padding:0;
	font-size:.85rem;color:var(--dc-text-soft);
}
.breadcrumb a{color:var(--dc-text-soft);}

/* --- Inhalt / Seitenspalte ------------------------------------------------ */
.dc-main{min-width:0;}

.dc-side{min-width:0;}
.dc-side > *{margin-bottom:calc(var(--dc-gap) * 1.4);}
.dc-side > *:last-child{margin-bottom:0;}

/* Modultitel in der Spalte */
.dc-side .card-header,
.dc-side h3,
.dc-side .moduletable > h3{
	font-size:1.02em;font-weight:700;
	font-family:var(--dc-font-head);
	margin:0 0 .7em;padding-bottom:.45em;
	border-bottom:2px solid var(--dc-brand);
}

/* Eingebettete Player fuellen die Spalte; die Hoehe kommt aus dem
   height-Attribut des Moduls (Prod: 2225px fuer die volle Playlist). */
.dc-side iframe{
	display:block;width:100%;border:0;
	border-radius:12px;background:#f0f0f0;
}
.dc-side p{margin:0;}

/* Anmeldeformular */
.dc-side input[type="text"],
.dc-side input[type="password"],
.dc-side input[type="email"]{
	width:100%;padding:9px 12px;
	border:1px solid var(--dc-border);border-radius:var(--dc-radius);
	font:inherit;font-size:.95rem;background:#fff;
}
.dc-side .btn,
.dc-side button[type="submit"],
.dc-side input[type="submit"]{
	display:inline-block;padding:9px 18px;
	border:0;border-radius:var(--dc-radius);cursor:pointer;
	background:var(--dc-brand);color:#fff;font:inherit;font-weight:700;font-size:.95rem;
}
.dc-side .btn:hover,
.dc-side button[type="submit"]:hover{background:var(--dc-brand-dark);}
.dc-side ul{list-style:none;margin:.8em 0 0;padding:0;font-size:.9rem;}
.dc-side li{margin-bottom:.35em;}
.dc-side label{display:block;font-size:.88rem;margin:.6em 0 .2em;}

/* --- Fuss ---------------------------------------------------------------- */
.dc-footer{
	background:var(--dc-nav-solid);
	color:#d8d8d8;
	padding:30px 0;
	font-size:.9rem;
}
.dc-footer a{color:#fff;}
.dc-footer__menu ul{
	display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;
	list-style:none;margin:0 0 1rem;padding:0;
}

/* --- Schmalere Fenster ---------------------------------------------------- */
@media (max-width:1100px){
	.dc-nav .mod-menu > li > a{padding-inline:12px;}
	.dc-nav .dc-nav__title{font-size:.92rem;}
	.dc-nav .dc-nav__note{font-size:.68rem;}
}

@media (max-width:999px){
	.dc-nav .dc-inner{flex-wrap:wrap;}
	.dc-nav__toggle{display:flex;}

	.dc-nav__list{display:none;order:2;flex-basis:100%;padding-bottom:12px;}
	.dc-nav__list.is-open{display:block;}

	.dc-nav .mod-menu{display:block;}
	.dc-nav .mod-menu > li{display:block;}
	.dc-nav .mod-menu > li + li::before{display:none;}
	.dc-nav .mod-menu > li > a{
		min-height:0;padding:11px 4px;
		border-bottom:1px solid rgba(255,255,255,.12);
	}

	/* Panels mobil im Fluss, nicht schwebend */
	.dc-nav .mod-menu__sub,
	.dc-nav .mod-menu > li:hover > .mod-menu__sub{
		position:static;display:block;
		min-width:0;max-width:none;width:auto;columns:auto;
		margin:0 0 6px;padding:4px 0 4px 14px;
		background:none;border:0;box-shadow:none;
	}
	.dc-nav .mod-menu__sub a{color:rgba(255,255,255,.85);}
	.dc-nav .mod-menu__sub a:hover{background:rgba(255,255,255,.10);color:#fff;}
	.dc-nav .mod-menu__separator{color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.15);}

	/* Fixiertes Menue mobil abschalten — dort kostet es zu viel Bildhoehe */
	.dc-nav.is-fixed{position:relative;}

	.dc-header__row{padding-block:8px 14px;}
	.dc-brand__logo{width:380px;}
	/* Nur das sichtbare Feld — im Ajax-Suchmodul liegen daneben zwei Felder,
   die das Modul selbst auf 0x0 haelt (Vorschlag und Kategorie). */
.dc-search input:not([name="searchwordsugg"]):not([name="ordering"]){min-width:0;}
	.dc-header__right{width:100%;}
}

@media (prefers-reduced-motion:reduce){
	*{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* --- Teaser-Block der Startseite -----------------------------------------
   Sechs Kacheln wie auf Prod: eine grosse mit Anrisstext, zwei daneben,
   drei darunter. Jede Kachel ist ein eigenes RAXO-Modul mit genau einem
   Beitrag; die Reihenfolge macht deren count_skip.

   Das Markup kommt aus unserem eigenen Layout allmode-dctile.php — die
   mitgelieferten RAXO-Layouts bringen Tabellen und eigenes (hier zusaetzlich
   modifiziertes) CSS mit, gegen das anzustylen unweigerlich schiefgeht.
   Deshalb eigener Klassen-Praefix .dc-tile.

   12-Spalten-Raster, weil obere Reihe (6/3/3) und untere (4/4/4) sich sonst
   nicht in dasselbe Grid fuegen. */
.dc-teaserwrap{padding-top:var(--dc-gap);}
.dc-teaser{
	display:grid;
	grid-template-columns:repeat(12,1fr);
	gap:14px;
}
.dc-teaser__a{grid-column:span 6;}
.dc-teaser__b,
.dc-teaser__c{grid-column:span 3;}
.dc-teaser__d,
.dc-teaser__e,
.dc-teaser__f{grid-column:span 4;}

/* RAXOs Wrapper traegt hier nichts bei */
.dc-teaser .allmode-box{margin:0;padding:0;border:0;background:none;}

.dc-tile{
	position:relative;
	display:flex;flex-direction:column;justify-content:flex-end;
	overflow:hidden;
	border-radius:8px;
	background:#1a1a1a;
	height:100%;
}
/* Bildmasse geben die Hoehe vor — so springt nichts, bevor die Bilder da sind */
.dc-teaser__a .dc-tile{aspect-ratio:720/400;}
.dc-teaser__b .dc-tile,
.dc-teaser__c .dc-tile{aspect-ratio:360/400;}
.dc-teaser__d .dc-tile,
.dc-teaser__e .dc-tile,
.dc-teaser__f .dc-tile{aspect-ratio:480/270;}

.dc-tile__media{position:absolute;inset:0;}
.dc-tile__media a{display:block;width:100%;height:100%;}
.dc-tile__media img{
	display:block;width:100%;height:100%;object-fit:cover;
	transition:transform .35s ease;
}
.dc-tile:hover .dc-tile__media img{transform:scale(1.04);}

/* Verlauf, damit die Schrift auf jedem Bild lesbar bleibt */
.dc-tile::after{
	content:"";position:absolute;left:0;right:0;bottom:0;
	height:70%;pointer-events:none;z-index:1;
	background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 100%);
}

.dc-tile__cat{
	position:absolute;top:13px;left:13px;z-index:3;
	padding:7px 10px 5px;
	background:#8c1f1d;   /* Prod-Wert der Kategorie-Fahne, etwas heller als die Markenfarbe */
	color:#fff;font-size:11px;font-weight:700;line-height:1;
	border-radius:4px;
}

.dc-tile__body{position:relative;z-index:2;padding:0 18px 15px;}

.dc-tile__title{
	margin:0;
	font-family:var(--dc-font-head);
	font-size:20px;font-weight:700;line-height:1.25;
	text-wrap:balance;
}
.dc-tile__title a{color:#fff;text-decoration:none;}
.dc-tile__title a:hover{text-decoration:underline;}

.dc-tile__text{
	margin:.5em 0 0;
	color:rgba(255,255,255,.88);
	font-size:13px;line-height:1.5;
}

.dc-teaser__a .dc-tile__body{padding:0 22px 20px;}
.dc-teaser__a .dc-tile__title{font-size:28px;}

@media (max-width:1100px){
	.dc-teaser__a{grid-column:span 12;}
	.dc-teaser__b,.dc-teaser__c{grid-column:span 6;}
	.dc-teaser__b .dc-tile,
	.dc-teaser__c .dc-tile{aspect-ratio:480/270;}
	.dc-teaser__a .dc-tile__title{font-size:22px;}
}
@media (max-width:700px){
	.dc-teaser__b,.dc-teaser__c,
	.dc-teaser__d,.dc-teaser__e,.dc-teaser__f{grid-column:span 12;}
	.dc-teaser__a .dc-tile{aspect-ratio:16/10;}
	.dc-teaser__a .dc-tile__text{display:none;}
}

/* --- News-Liste unter den Kacheln ----------------------------------------
   Bild links, rechts Untertitel / Titel / Anriss — wie auf Prod.

   Der Untertitel kommt aus dem Custom Field "untertitel". Auf Prod steckt er
   noch im Joomla-Feld xreference, das J4 ersatzlos gestrichen hat; hier liegt
   er schon so, wie er nach der Migration liegen muss. */
/* Steht in der Hauptspalte, neben der rechten Spalte */
.dc-newswrap{padding-top:0;}

.dc-news{display:flex;flex-direction:column;}
.dc-news__item{
	display:grid;
	grid-template-columns:300px 1fr;
	gap:calc(var(--dc-gap) * 1.5);
	align-items:start;
	padding:var(--dc-gap) 0;
	border-bottom:1px solid var(--dc-border-soft);
}
.dc-news__item:first-child{padding-top:0;}
.dc-news__item:last-child{border-bottom:0;}

.dc-news__media{position:relative;border-radius:8px;overflow:hidden;background:#1a1a1a;}
.dc-news__media a{display:block;}
.dc-news__media img{
	display:block;width:100%;height:auto;aspect-ratio:350/197;object-fit:cover;
	transition:transform .35s ease;
}
.dc-news__item:hover .dc-news__media img{transform:scale(1.04);}

/* Datumsfahne unten rechts im Bild, wie auf Prod */
.dc-news__date,
.dc-news__media .allmode-img-text,
.dc-news__media .allmode-img-text-ajax{
	position:absolute;right:0;bottom:0;z-index:2;
	padding:5px 11px;
	background:#8c1f1d;color:#fff;
	font-size:11px;font-weight:700;line-height:1;
	border-radius:4px 0 0 0;
}

.dc-news__body{min-width:0;}

/* Die Dachzeile — auf Prod die "Schlüsselreferenz" des Artikels */
.dc-news__sub{
	margin:0 0 .3em;
	color:var(--dc-brand);
	font-size:.85rem;font-weight:700;line-height:1.3;
}

.dc-news__title{
	margin:0 0 .5em;
	font-family:var(--dc-font-head);
	font-size:1.5rem;font-weight:700;line-height:1.25;
	text-wrap:balance;
}
.dc-news__title a{color:var(--dc-text);text-decoration:none;}
.dc-news__title a:hover{color:var(--dc-brand);}

.dc-news__text{
	margin:0;
	color:var(--dc-text);font-size:1rem;line-height:1.55;
}

@media (max-width:1100px){
	.dc-news__item{grid-template-columns:240px 1fr;}
	.dc-news__title{font-size:1.3rem;}
}
@media (max-width:800px){
	.dc-news__item{grid-template-columns:1fr;gap:var(--dc-gap);}
	.dc-news__title{font-size:1.25rem;}
	.dc-news__media img{aspect-ratio:16/9;}
}

/* --- Artikelseite ---------------------------------------------------------
   Nachbau der Prod-Seite. Alle Werte am 26.07. auf der Live-Seite gemessen:
   .subhead .85em/700 · .s5_authortext .615em/#969696 · .reading-time
   .815em/bold · .artnavi2 mit 1px schwarzen Linien oben und unten, 33px hoch
   · span.wf_caption auf #e6e6e6 mit vollbreitem Bild. */

/* Artikel-Navigation — auf Live gemessen: KEIN Rahmen am Container, sondern
   zwei helle Kaesten (#f8f9fa, 1px #eee, Radius 8px, 12/15 Polster, 33px hoch)
   mit roten Pfeilen (#d32f2f). Meine erste Fassung hatte eine ueberschriebene
   Altregel aus dem CSS erwischt (schwarze Linien oben und unten). */
.dc-artnav{
	display:flex;justify-content:space-between;gap:16px;
	margin:3px 0 20px;padding:0;border:0;
}
.dc-artnav a{
	display:flex;align-items:center;gap:8px;
	flex:1 1 0;min-width:0;
	height:33px;padding:0 15px;
	background:#f8f9fa;border:1px solid #eee;border-radius:8px;
	color:#333;font-size:14px;font-weight:600;text-decoration:none;
	transition:border-color .15s;
}
.dc-artnav a:hover{border-color:var(--dc-border);text-decoration:none;}
.dc-artnav__next{justify-content:flex-end;}
/* Die Pfeile sind auf Prod rot */
.dc-artnav a span[aria-hidden]{color:#d32f2f;font-size:16px;line-height:1;}

/* Kopf des Artikels.
   Abstaende am 26.07. auf der Live-Seite nachgemessen: 14px zwischen
   Untertitel und Titel, 8px bis zur Autorzeile, 9px bis zur Lesezeit.
   Entscheidend ist die Zeilenhoehe: das Template vererbt 26,55px auf alle
   drei Zeilen, live stehen sie auf normal (~1,2). Dadurch waren die
   Kaesten hier 27px statt 14–18px hoch und die Abstaende verschoben. */
.dc-articlehead{margin-bottom:9px;}
.dc-articlehead .subhead{
	margin:0;
	font-weight:700;font-size:.85em;line-height:normal;
	color:var(--dc-text);
}
.com-content-article .contentheading,
.com-content-article h1{
	margin:14px 0 8px;
	font-family:var(--dc-font);   /* auf Prod Roboto, nicht Helvetica */
	font-size:26px;font-weight:700;line-height:29.9px;
	text-wrap:balance;
}
.s5_authortext{
	margin:0;
	font-size:11.07px;font-weight:700;line-height:normal;color:#969696;
}
/* Die Lesezeit liefert das Plugin (div.reading-time mit eigenem style). */
.reading-time{
	margin:0 0 1.1em;
	font-weight:700;font-size:.815em;line-height:normal;
}

/* Fliesstext */
/* Prod arbeitet mit padding statt margin: p{margin:0;padding:5px 0} */
.com-content-article__body{font-size:18.4px;line-height:31.28px;}
.com-content-article__body p{margin:0;padding:5px 0;}
.com-content-article__body h2,
.com-content-article__body h4{
	font-family:var(--dc-font);
	font-size:27px;font-weight:400;line-height:32.4px;
	/* Auf Live gemessen: die Luecke zwischen Absatz und Ueberschrift ist 0.
	   Der Rhythmus entsteht allein aus dem 5px-Polster der Absaetze. */
	margin:0;
}
.com-content-article__body h3{font-size:22px;font-weight:400;margin:0;}

/* Hausformat: erster Absatz fett */
.black_box{font-weight:700;}
/* Auf Prod sind Links hier weiss (#fff) — Relikt aus der Zeit mit dunklem
   Kasten. Auf hellem Grund waeren sie unsichtbar, deshalb Markenfarbe. */
.black_box a{color:var(--dc-brand);font-weight:700;text-decoration:underline;}

/* Hausformat: Fazit-Kasten — Werte 1:1 aus dem Live-Template (wdj.css Z. 823).
   Der Sienna-Standard war grau und eckig; Live ueberschreibt ihn seit
   Langem mit dem Hausrot und runden Ecken. */
/* Der Kasten ist meist ein <p>; „.com-content-article__body p" wiegt
   schwerer als eine einzelne Klasse und hat Polster und Abstand
   ueberschrieben (5px statt 20px). Deshalb hier dasselbe Gewicht. */
.com-content-article__body .s5_graybox,
.s5_graybox{
	margin:1.6em 0;padding:20px;
	background-color:rgb(140,31,29);
	color:#fff;border:none;border-radius:12px;
	line-height:1.70em;font-size:1.15rem;
}
.s5_graybox a{color:#fff !important;text-decoration:underline !important;}
.s5_graybox span{color:#fff !important;}
.s5_graybox p:last-child{margin-bottom:0;}

/* Bild mit Unterschrift — auf Prod ein span.wf_caption auf grauem Grund.
   Am 26.07. nachgemessen: 11px/15,4px in #333, Polster 5/10, linksbuendig,
   Kasten 25px hoch. Hier war die Zeile 43px hoch, weil die Zeilenhoehe des
   Fliesstextes (31,28px) durchschlug, und der Text stand rechts — die
   Ausrichtung kam von aussen und braucht deshalb Vorrang. */
span.wf_caption{
	display:block !important;width:100% !important;max-width:100% !important;
	margin:0 0 1.2em;
	background-color:#e6e6e6;
	font-size:11px;color:#333;line-height:15.4px;text-align:left !important;
}
span.wf_caption img{
	display:block !important;width:100% !important;height:auto !important;margin:0 !important;
}
span.wf_caption span{
	display:block;padding:5px 10px;
	font-size:11px;line-height:15.4px;color:#333;text-align:left !important;
}

/* Bilder mit width="0" NUR auf Systemseiten ausblenden.
   Achtung: Auf Prod sind solche Bilder in normalen Beitraegen sichtbar —
   dort hebt das CSS die Nullbreite ebenfalls auf (am 26.07. an Beitrag
   8007 nachgemessen: 428x31 sichtbar). Eine pauschale Ausblendung haette
   1.195 Beitraege betroffen. Gemeint ist allein die Trendchart-Seite, wo
   das Bild nur als Platzhalter im Text steht. */
.com-content-article__body img{height:auto;max-width:100%;}
.com-content-article__body figure{margin:1.4em 0;}
.com-content-article__body figcaption{
	padding:6px 10px;background:#e6e6e6;font-size:.78em;color:#444;
}

/* Eingebettete Player behalten ihre Breite */
.com-content-article__body iframe{
	display:block;width:100%;max-width:100%;border:0;margin:1.2em 0;
}

.com-content-article__body ul,
.com-content-article__body ol{margin:0 0 1em;padding-left:1.4em;}
.com-content-article__body li{margin-bottom:.3em;}
.com-content-article__body blockquote{
	margin:1.4em 0;padding:.2em 0 .2em 1.1em;
	border-left:3px solid var(--dc-brand);
	color:var(--dc-text-soft);font-style:italic;
}
.com-content-article__body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem;}
.com-content-article__body th,
.com-content-article__body td{padding:8px 10px;border-bottom:1px solid var(--dc-border-soft);text-align:left;}
.com-content-article__body th{background:var(--dc-bg-soft);font-weight:700;}
/* Tabellen wie auf Live: display:block zerlegte die Tabellengeometrie (tbody schrumpfte auf Inhaltsbreite, Set-Zeiten-Tabellen 27.07.) — Regel entfernt */
.com-content-article__body{overflow-wrap:break-word;}

/* Teilen-Leiste */
.dc-share{
	display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
	margin:22px 0 4px;padding:0;
	justify-content:center;
}
.dc-share__label{font-size:13px;color:var(--dc-text-soft);margin-right:.2rem;}
.dc-share__btn{
	display:inline-flex;align-items:center;gap:.45rem;
	padding:8px 14px;
	border:1px solid var(--dc-border);border-radius:99px;
	background:#fff;color:#444;
	font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
	text-decoration:none;
	transition:border-color .15s, color .15s;
}
.dc-share__btn:hover{border-color:var(--dc-brand);color:var(--dc-brand);text-decoration:none;}
.dc-share__btn svg{flex:0 0 auto;}

/* Breadcrumb — auf Prod eine Leiste mit ►-Trennern */
.dc-breadcrumb{
	background:var(--dc-nav-solid);
	font-size:.8rem;
}
.dc-breadcrumb .breadcrumb,
.dc-breadcrumb ul{
	display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
	list-style:none;margin:0;padding:7px 0;
	color:rgba(255,255,255,.75);
}
.dc-breadcrumb a{color:#fff;text-decoration:none;}
.dc-breadcrumb a:hover{text-decoration:underline;}
.dc-breadcrumb .divider,
.dc-breadcrumb li + li::before{content:"►";margin:0 .1rem;opacity:.6;font-size:.75em;}
.dc-breadcrumb .divider{display:none;}
.dc-breadcrumb li{display:flex;align-items:center;gap:.35rem;}
.dc-breadcrumb .mod-breadcrumbs__here{display:none;}

@media (max-width:700px){
	.com-content-article .contentheading,
	.com-content-article h1{font-size:1.5rem;}
	.dc-share{justify-content:flex-start;}
}

/* --- "Weitere Artikel zum Thema" ------------------------------------------
   Auf Prod ein RAXO-Related-Modul, das die Verwandtschaft ueber das Feld
   metakey ermittelt (relation_type=keywords) — deshalb steht in der
   CLAUDE.md, dieses Feld nie anzufassen. 9 Beitraege, Bilder 240x135. */
.dc-rel{
	margin-top:2em;padding-top:1.4em;
	border-top:1px solid var(--dc-border-soft);
}
.dc-rel__name{
	margin:0 0 16px;
	font-family:var(--dc-font);
	font-size:17px;font-weight:400;color:#1a1a1a;
}
.dc-rel__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
	gap:14px;
}
.dc-rel__item{
	border:1px solid var(--dc-border-soft);
	border-radius:3px;overflow:hidden;
	background:#fcfcfc;
	display:flex;flex-direction:column;
	transition:border-color .15s;
}
.dc-rel__item:hover{border-color:var(--dc-brand);}
.dc-rel__media{line-height:0;}
.dc-rel__media img{
	display:block;width:100%;height:auto;aspect-ratio:240/135;object-fit:cover;
}
.dc-rel__title{
	margin:0;padding:10px 11px 12px;
	font-family:var(--dc-font);
	font-size:13px;font-weight:700;line-height:1.3;
}
.dc-rel__title a{color:var(--dc-text);text-decoration:none;}
.dc-rel__item:hover .dc-rel__title a{color:var(--dc-brand);}

/* --- Bewertungs-Kasten ----------------------------------------------------
   Auf Prod liefert das com_itemrating (Joomunited, stark angepasst und laut
   Sebastian 1:1 mitzunehmen). Hier ist nur die Huelle gestaltet, damit die
   Seite vollstaendig aussieht; die Komponente selbst ist noch nicht portiert. */
.dc-rating{
	display:flex;align-items:center;gap:1.2rem;
	margin:1.6em 0 0;padding:16px 18px;
	background:#ededed;border-radius:6px;
}
.dc-rating__text{flex:1;min-width:0;}
.dc-rating__frage{margin:0 0 .3em;font-size:1.05rem;font-weight:700;}
.dc-rating__hinweis{margin:0;font-size:.82rem;color:var(--dc-text-soft);line-height:1.45;}
.dc-rating__wert{
	flex:0 0 auto;width:86px;height:86px;border-radius:50%;
	display:grid;place-items:center;
	background:var(--dc-brand);color:#fff;
	font-size:1.15rem;font-weight:700;
}

/* --- Kategorieansicht -----------------------------------------------------
   Ersetzt die Prod-Konstruktion "Artikel + untergelegtes RAXO-Modul" durch
   einen Kategorie-Blog-Menuepunkt. Optik nach den Messwerten der Prod-Seite
   (allmode-columns): vierspaltig, Bilder 256x144, Titel 16px/700 in #0b4c8c,
   Anriss 14px in #505050. */
.dc-kat__titel{
	margin:0 0 .4em;
	font-family:var(--dc-font);
	font-size:26px;font-weight:700;line-height:29.9px;
}
.dc-kat__einleitung{
	font-size:18.4px;line-height:31.28px;
}
.dc-kat__einleitung p{margin:0;padding:5px 0;}

.dc-kat__grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(256px,1fr));
	gap:28px;
	margin-top:1.4em;
}
.dc-kat__item{display:flex;flex-direction:column;padding:0 0 6px;}

.dc-kat__media{display:block;line-height:0;border-radius:3px;overflow:hidden;background:#f0f0f0;}
.dc-kat__media img{
	display:block;width:100%;height:auto;aspect-ratio:256/144;object-fit:cover;
	border-radius:3px;
	transition:transform .3s ease;
}
.dc-kat__item:hover .dc-kat__media img{transform:scale(1.03);}
.dc-kat__leerbild{display:block;aspect-ratio:256/144;background:#e6e6e6;}

.dc-kat__item-titel{
	margin:8px 0;padding:0 4px;
	font-family:var(--dc-font);
	font-size:16px;font-weight:700;line-height:1.25;
}
.dc-kat__item-titel a{color:#0b4c8c;text-decoration:none;}
.dc-kat__item-titel a:hover{color:var(--dc-brand);}

.dc-kat__sub{
	margin:0 0 4px;padding:0 4px;
	font-size:12px;font-weight:700;color:var(--dc-brand);line-height:1.3;
}
.dc-kat__text{
	margin:0;padding:0 4px;
	font-size:14px;color:#505050;line-height:1.45;
}

.dc-kat__leer{color:var(--dc-text-soft);font-style:italic;}

.dc-kat__seiten{
	margin-top:2em;padding-top:1.2em;
	border-top:1px solid var(--dc-border-soft);
}
.dc-kat__seiten ul{
	display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;
	justify-content:center;
}
.dc-kat__seiten a,
.dc-kat__seiten span{
	display:inline-block;padding:6px 12px;
	border:1px solid var(--dc-border);border-radius:4px;
	color:var(--dc-text);font-size:.9rem;text-decoration:none;
}
.dc-kat__seiten .active span{background:var(--dc-brand);border-color:var(--dc-brand);color:#fff;}

@media (max-width:700px){
	.dc-kat__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
	.dc-kat__titel{font-size:1.5rem;}
}

/* --- Chart-Seiten ---------------------------------------------------------
   Der Chartcode aus djcharts2/ bringt sein eigenes CSS mit (Zeilenfarben,
   Cover, Spotify-Leisten). Was hier steht, sind die Regeln, die auf Prod aus
   dem Vertex-Template kamen und dort mitgeliefert wurden — auf Prod gemessen. */

/* Ueberschrift ueber der Tabelle: klein, fett, zentriert — nicht die
   Artikel-H1 des Templates. */
.dc-charts h1{
	font-size:18px;
	font-weight:700;
	line-height:normal;
	text-align:center;
	color:#272727;
	margin:0;
	text-transform:none;
	letter-spacing:normal;
}
.dc-charts .charts_topheader{
	font-size:18px;font-weight:700;text-align:center;color:#272727;
}

/* Tabellenkopf: dunkler Balken mit weisser Schrift */
.dc-charts #charts > tbody > tr:first-child > td,
.dc-charts #charts > tbody > tr:first-child > th,
.dc-charts #charts > thead td,
.dc-charts #charts > thead th{
	background-color:#333;
	color:#fff;
	border:1px solid #333;
	font-size:13px;
	font-weight:700;
	padding:2px;
	text-align:center;
}

/* Zellenrahmen — die Zeilenfarben setzt der Chartcode selbst */
.dc-charts .dcart-table td{
	border:1px solid #ccc;
	color:#000;
	font-family:'Roboto',sans-serif;
	font-size:12px;
	padding:7px;
}

/* Sidebar "Weitere Dance-Charts" — auf Prod gemessen: 43px hohe Kaesten,
   nahtlos gestapelt, halbtransparentes Dunkelgrau. */
.more-charts-row{display:block;}
.more-charts-text{margin:0;padding:0;}
.more-charts-text a{
	display:block;
	background:rgba(51,51,51,.8);
	color:#fff;
	font-size:16px;
	font-weight:700;
	line-height:19px;
	padding:12px;
	text-decoration:none;
}
.more-charts-text a:hover{background:rgba(51,51,51,.95);}
.more-charts-text .fa{float:right;}

/* YouTube-Verweis in den Charts: auf der Live-Seite schwarz, nicht in der
   Akzentfarbe des Templates. */
.dc-charts .youtube_info a,
.dc-charts .youtube_info a:hover,
.dc-charts a .fa-youtube,
.dc-charts .fa-youtube{color:#000;}

/* Modulkopf der Chart-Sidebar — auf der Live-Seite im dunklen Balken,
   zentriert, 14px/700 mit 8px Innenabstand. */
body.com_djcharts .dc-side .moduletable > h3,
body.com_djcharts .dc-side .moduletable > h2{
	background:#333;
	color:#fff;
	font-size:14px;
	font-weight:700;
	text-align:center;
	padding:8px;
	margin:0 0 2px;
	border:0;
	text-transform:none;
	letter-spacing:normal;
}
.more-charts-text{margin:0 0 2px;}
.more-charts-text a:hover{background:var(--dc-brand,#8b1a1a);}
.more-charts-row > div:not(.more-charts-text){height:12px;}

/* --- Anmeldefenster -------------------------------------------------------
   Werte auf der Live-Seite gemessen: 600px auf #f5f5f5, Kopfbild ueber die
   volle Breite, Titel 28px/700 mit 50/50/30 Innenabstand, Formular 0/50/50,
   Felder 1px #333 mit 15px Innenabstand, Knopf #8C1F1D in 18px/700. */
.dc-login{
	width:600px;
	max-width:90%;
	padding:0;
	border:0;
	border-radius:0;
	background:#f5f5f5;
	color:#272727;
	/* Einblenden wie auf Prod: der Hintergrund dunkelt nach, der Kasten
	   kommt leicht von oben. Ein <dialog> springt sonst hart auf, weil
	   display von none auf block wechselt — dafuer allow-discrete und
	   @starting-style, sonst gibt es keinen Anfangswert zum Ueberblenden. */
	opacity:0;
	transform:translateY(-12px) scale(.98);
	transition:opacity .5s ease, transform .5s ease,
	           overlay .5s ease allow-discrete, display .5s ease allow-discrete;
}
.dc-login[open]{opacity:1;transform:none;}
@starting-style{
	.dc-login[open]{opacity:0;transform:translateY(-12px) scale(.98);}
}
.dc-login::backdrop{
	background:rgba(0,0,0,0);
	transition:background .5s ease,
	           overlay .5s ease allow-discrete, display .5s ease allow-discrete;
}
.dc-login[open]::backdrop{background:rgba(0,0,0,.55);}
@starting-style{
	.dc-login[open]::backdrop{background:rgba(0,0,0,0);}
}
@media (prefers-reduced-motion:reduce){
	.dc-login,.dc-login::backdrop{transition:none;}
	.dc-login{transform:none;}
}

.dc-login__zu{position:absolute;top:0;right:0;}
.dc-login__zu button{
	background:none;border:0;cursor:pointer;
	font-size:30px;line-height:1;padding:8px 14px;color:#fff;
	text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.dc-login__bild img{display:block;width:100%;height:auto;}

.dc-login__titel h4{
	color:#000;
	font-size:28px;
	font-weight:700;
	padding:50px 50px 30px;
	margin:0;
	text-align:center;
}
.dc-login__fehler{
	margin:0 50px 18px;
	padding:12px 14px;
	background:#fdecea;
	border-left:4px solid #8C1F1D;
	color:#8C1F1D;
	font-size:15px;
}
#dc-login-form{padding:0 50px 50px;margin:0;}
#dc-login-form input[type=text],
#dc-login-form input[type=password]{
	background:#fff;
	border:1px solid #333;
	box-shadow:none;
	width:100%;
	box-sizing:border-box;
	padding:15px;
	font-size:16px;
	margin-bottom:12px;
}
#dc-login-form input:focus{outline:none;}
#dc-login-form button[type=submit]{
	background:#8C1F1D;
	color:#fff;
	font-size:18px;
	font-weight:700;
	padding:13px;
	border:0;
	border-radius:0;
	width:100%;
	cursor:pointer;
}
#dc-login-form button[type=submit]:hover{background:#731917;}

.dc-login__unten{margin-top:15px;}
.dc-login__reg,.dc-login__pw{display:inline-block;width:49%;}
.dc-login__reg{text-align:left;}
.dc-login__pw{text-align:right;}
.dc-login a{color:#969696;font-size:16px;font-weight:700;text-decoration:none;}
.dc-login a:hover{color:#000;}

.dc-login__oder{
	display:flex;align-items:center;gap:12px;
	margin:0 50px 12px;color:#aaa;font-size:13px;
}
.dc-login__oder span{flex:1;height:1px;background:#ddd;}

.dc-login__google{
	display:flex;align-items:center;justify-content:center;gap:10px;
	height:46px;width:calc(100% - 100px);margin:0 50px 50px;
	border:1px solid #ccc;border-radius:4px;background:#fff;
	color:#333;font-size:15px;font-weight:600;
}
.dc-login__google[disabled]{opacity:.55;cursor:not-allowed;}

/* --- Ajax-Suchfeld --------------------------------------------------------
   Das Modul (Universal AJAX Live Search) bringt eigenes Markup und CSS mit.
   Die Regeln oben stammen vom Platzhalter-Suchfeld und wuerden es zerlegen —
   hier stehen die auf der Live-Seite gemessenen Werte. */
/* Das Modul baut den Rahmen als farbigen Container um das Feld herum
   (Theme-Wert searchboxborder = 8b0200). Auf der Live-Seite ueberschreibt das
   Template ihn zu einem schlichten grauen Rand — hier genauso. */
.dc-search .offlajn-ajax-search-container,
.dc-search div.offlajn-ajax-search-container{
	width:300px;
	max-width:100%;
	background:transparent !important;
	padding:0 !important;
	border-radius:3px !important;
	box-shadow:none !important;
}
.dc-search .offlajn-ajax-search-inner{background:transparent !important;}
/* NUR das sichtbare Suchfeld ansprechen. Der Container enthaelt zwei
   weitere Eingabefelder (Vorschlag und Kategorie), die das Modul auf 0x0
   haelt — eine pauschale Regel auf "input" macht sie sichtbar und legt sie
   ueber das eigentliche Feld. */
.dc-search .offlajn-ajax-search-container input.search-caption-on,
.dc-search .offlajn-ajax-search-container input[name="searchword"]{
	width:100% !important;
	min-width:0;
	height:35px !important;
	box-sizing:border-box !important;
	background:#fff !important;
	color:#999 !important;
	font-size:13px !important;
	font-weight:400;
	padding:7px 50px 6px 10px !important;
	border:1px solid #ccc !important;
	border-radius:3px !important;
}
/* Der Suchknopf ist live ein schlichtes Feld mit Lupe, kein roter Kasten —
   das Modul-Theme setzt dort einen Verlauf (searchbuttongradient). */
.dc-search .offlajn-ajax-search-inner > div:not(.ajax-clear){
	background-image:none !important;
	background-color:transparent !important;
}
.dc-search .offlajn-ajax-search-container .fa-search{color:#333;}
/* Der Suchknopf des Moduls ist ein Symbol im Feld, kein eigener Kasten. */
.dc-search .offlajn-ajax-search-container button{
	padding:0;
	background:none;
	border-radius:0;
}


/* Player-Container in den Genre- und Neueinsteiger-Charts.
   Das Top-100-Template begrenzt ihn auf 80px und schneidet den Rest ab; die
   beiden anderen Vorlagen tun das nicht, dort zieht der Spotify-Rahmen die
   Zeile auf. Gleiche Werte, nur der obere Abstand bleibt wie dort gesetzt. */
body.com_djcharts.view-genrecharts #charts td.info,
body.com_djcharts.view-newlist #charts td.info{
	/* Die Zelle ist so hoch wie das Cover daneben; der Textblock steht oben,
	   der Player fuellt den Rest und schliesst damit buendig ab — statt einer
	   festen Hoehe, die je nach Titellaenge daneben liegt. */
	height:150px;
	vertical-align:top;
}
body.com_djcharts.view-genrecharts #charts td.info > .info-top-row,
body.com_djcharts.view-newlist #charts td.info > .info-top-row{
	display:flex;
}
/* 26.07. auf der Live-Seite gemessen und hier 1:1 nachgebaut: der Player steht
   dort statisch im Fluss (margin-top 5px, Hoehe waechst mit dem iframe), der
   iframe ist 80px hoch. Spotifys kompakte Fassung braucht genau diese 80px —
   bei 70px scrollt sie im Rahmen. Absolute Positionierung hat hier vorher den
   Ueberstand nach rechts erzeugt. */
body.com_djcharts.view-genrecharts #djcharts .dci-sample,
body.com_djcharts.view-newlist #djcharts .dci-sample{
	position:static;
	display:block;
	width:100%;
	height:auto;
	/* Live sind es 5px; dort ist der Textblock hoeher. Hier endete der Player
	   damit 7px vor der Cover-Unterkante (26.07. gemessen). */
	/* 16px: der iframe sass bei 12px rechnerisch buendig, der sichtbare Player
	   endet aber 4px vor der iframe-Kante (Spotify rendert innen einen Rand).
	   Sebastian hat am Bildschirm nachgemessen. */
	margin-top:16px;
	overflow:visible;
	border-radius:12px;
	padding:0 !important;
	border:none !important;
}
body.com_djcharts.view-genrecharts #djcharts iframe.spotframe,
body.com_djcharts.view-newlist #djcharts iframe.spotframe{
	position:static !important;
	width:100% !important;
	height:80px !important;
	border:0 !important;
	margin:0 !important;
	padding:0 !important;
}

/* Textblock in den Chart-Zeilen (Interpret / Titel / Label).
   Die grosszuegige Zeilenhoehe des Templates (1,7) zieht die Zeilen auf; live
   steht dort durchgaengig 1,3 und alle drei Angaben sind fett. Gemessen:
   14px/18,2 — 13px/16,9 — 11px/14,3, Block zusammen 65px statt 190px. */
.dc-charts #charts td.info,
.dc-charts #charts .infobox,
.dc-charts #charts .info-top-row{
	line-height:1.3;
}
.dc-charts #charts .infobox a,
.dc-charts #charts .infobox span,
.dc-charts #charts .infobox div{
	line-height:1.3;
	font-weight:700;
}

/* Player in Genre-/Neueinsteiger-Charts: keine Sonderregeln.
   26.07. auf der Live-Seite gemessen — dort steht der Player statisch im Fluss
   (position:static, margin-top:5px, iframe 80px). Jeder Versuch, ihn hier per
   absoluter Positionierung auszurichten, hat an anderer Stelle etwas zerlegt
   (Scrollleiste bei 70px, Ueberstand nach rechts). Das Chart-Template bringt
   die Werte selbst mit. */

/* Das Krizalys-Breadcrumb stellt dem Pfad ein leeres <li> mit Orts-Icon voran.
   Der Prototyp nutzt Joomlas Standardmodul, das dieses Element nicht kennt —
   ohne die Regel steht der Pfad ein paar Pixel weiter rechts. */
.dc-breadcrumb .krizalys_breadcrumb > li:first-child:not([itemscope]) {
	display: none;
}

/* "Weitere Artikel zum Thema" (RAXO-Bricks).
   Am 26.07. auf der Live-Seite gemessen: Titelzeile 16px/18px in einem auf
   55px festgenagelten Kasten, Bild im Verhaeltnis 16:9. Hier lief die
   Zeilenhoehe auf 19,2px — dadurch brachen die Titel anders um — und die
   Bildhoehen schwankten, weshalb die Kacheln unterschiedlich hoch wurden. */
.raxo-bricks .raxo-title{
	font-size:16px;line-height:18px;
	height:55px;min-height:55px;max-height:55px;overflow:hidden;
}
.raxo-bricks .raxo-title a{font-size:16px;line-height:18px;}
.raxo-bricks .raxo-img,
.raxo-bricks .raxo-img a{display:block;}
.raxo-bricks .raxo-img img{
	display:block;width:100%;height:auto;
	aspect-ratio:16/9;object-fit:cover;
}
/* Trennlinie zwischen Bewertung und Themenblock — steht so auch auf Prod. */
.raxo-related-articles{
	border-top:1px solid var(--dc-border,#e0e0e0);
	padding-top:22px;margin-top:26px;
}

/* RAXO-Kachelraster (dj-promotion, Rankings, Kolumnen, Musikvideos …)
   Die Modulvorlage ordnet die Kacheln als Floats an und gibt ihnen per
   Skript eine feste Hoehe von 317px. Der Inhalt braucht bis zu 330px —
   deshalb war bei zweizeiligen Titeln die letzte Textzeile angeschnitten.
   (Auf der Live-Seite trifft es 42 der 60 Kacheln, dort bis 342px.)
   Als Raster bestimmt die hoechste Kachel jeder Zeile die Hoehe, und die
   Spaltenzahl folgt weiter den Breitenklassen des Moduls. */
.allmode-columns .allmode-topbox,
.allmode-columns .allmode-itemsbox{
	display:grid;grid-template-columns:repeat(2,1fr);
}
.allmode-columns .lt320 .allmode-topbox,
.allmode-columns .lt320 .allmode-itemsbox{grid-template-columns:1fr;}
.allmode-columns .gt640 .allmode-topbox,
.allmode-columns .gt640 .allmode-itemsbox{grid-template-columns:repeat(3,1fr);}
.allmode-columns .gt880 .allmode-topbox,
.allmode-columns .gt880 .allmode-itemsbox{grid-template-columns:repeat(4,1fr);}
/* Die feste Hoehe steht in der Modulvorlage als
   „.allmode-columns .gt880 .allmode-wrapper{height:317px !important}" —
   dagegen kommt nur eine Regel mit mehr Gewicht an. Das Skript setzt den
   Wert zusaetzlich direkt ins Element; auch das schlaegt !important. */
.allmode-box.allmode-columns .allmode-container .allmode-wrapper{
	float:none !important;width:auto !important;height:auto !important;
}
.allmode-columns .allmode-wrapper > article{height:100%;}

/* Kachel-Feinheiten wie auf der Live-Seite nachgemessen (27.07.2026):
   Titel im Hausrot statt im blauen Standard-Linkton, Bild ohne Rahmen. */
/* Die Modulvorlage setzt „.allmode-columns a{color:#0b4c8c !important}" —
   das laesst sich nur mit demselben Gewicht ueberschreiben. */
.allmode-columns .allmode-title a,
.allmode-columns .allmode-title a:visited{color:#8c1f1d !important;}
.allmode-columns .allmode-img{padding:0;border:0;background:none;}