/* =========================================================================
 * moonflow-components.css
 * -------------------------------------------------------------------------
 * Moonflow Design System — Component Layer
 *
 * Zweck:
 *   Enthält alle wiederverwendbaren UI-Komponenten im Moonflow-Stil:
 *     - Buttons (mf-btn in Varianten)
 *     - Inputs (Light + Dark)
 *     - Headlines (Pink-Balken, Grey-Balken, Story-Titel, Kategorie)
 *     - Cards (News-Item, Event-Item, TV-Guide-Item)
 *     - Info-Bar (mit Weiterlesen-Pill + Scheuerleiste)
 *     - Dark-Panel (Userbit-Dropdown-Stil)
 *     - Tables (.mf-table)
 *     - Dividers
 *     - Utilities (clearfix etc.)
 *
 * Abhängigkeiten:
 *   moonflow-tokens.css MUSS vorher eingebunden werden.
 *
 * Namensschema:
 *   Alle neuen Komponenten nutzen den Präfix `mf-` (BEM-artig):
 *     .mf-btn, .mf-btn--primary, .mf-btn--ghost
 *     .mf-card, .mf-card__image, .mf-card__title
 *   Legacy-Selektoren wie .moonflowbtn, .newsItem, .mainHeadline-purple
 *   werden als Aliasse mitgeliefert, damit neues und altes Markup
 *   nebeneinander existieren können.
 * ========================================================================= */


/* -------------------------------------------------------------------------
 * 1) RESET / BASE — minimal, nicht invasiv
 * ------------------------------------------------------------------------- */

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

body {
    margin: 0;
    font-family: var(--mf-font-body);
    font-size:   var(--mf-font-size-base);
    line-height: var(--mf-line-normal);
    color:       var(--mf-color-text-strong);
    background:  var(--mf-color-bg);
}

a {
    color: var(--mf-color-primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }


/* -------------------------------------------------------------------------
 * 2) UTILITIES
 * ------------------------------------------------------------------------- */

.mf-clearfix::before,
.mf-clearfix::after { content: ""; display: table; line-height: 0; }
.mf-clearfix::after { clear: both; }

.mf-hidden        { display: none !important; }
.mf-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Legacy-Kompat */
.clearfix::before, .clearfix::after { content: ""; display: table; line-height: 0; }
.clearfix::after  { clear: both; }
.clear::before, .clear::after { content: ""; display: table; line-height: 0; }
.clear::after     { clear: both; }


/* -------------------------------------------------------------------------
 * 3) TYPOGRAPHY — Text-Bausteine
 * -------------------------------------------------------------------------
 * Diese Klassen entsprechen den Live-CSS-Klassen (1:1 übernommen), aber
 * mit Tokens neu verdrahtet. So können alte Seiten weiter funktionieren,
 * während neue Seiten dieselben Klassen mit dem neuen System nutzen.
 * ------------------------------------------------------------------------- */

/* Allgemeine "general" Text-Styles aus layout.css */
.generalHeadline {
    font-family: var(--mf-font-display-bold);
    font-size:   var(--mf-font-size-3xl);
    color:       var(--mf-color-primary);
}
.generalText {
    font-family: var(--mf-font-body);
    font-size:   var(--mf-font-size-lg);
    line-height: 16px;
    color:       var(--mf-color-text-faint);
}
.generalTextHighlight {
    font-family: var(--mf-font-body);
    font-size:   var(--mf-font-size-lg);
    line-height: 16px;
    color:       var(--mf-color-text-highlight);
}

/* Story-Typografie (Artikel-Detailseite) */
.mf-story-cat,      .storyCat {
    font-family: var(--mf-font-display-light);
    font-size:   var(--mf-font-size-5xl);
    color:       var(--mf-color-text-disabled);
    margin-bottom: var(--mf-space-3);
    display: block;
}
.mf-story-title,    .storyHeadline {
    font-family: var(--mf-font-display);
    font-size:   var(--mf-font-size-7xl);
    line-height: 48px;
    color:       var(--mf-color-primary);
    margin: 0 0 var(--mf-space-3) 0;
}
.mf-story-author,   .storyAutor {
    font-family: var(--mf-font-display-light);
    font-size:   var(--mf-font-size-xl);
    color:       var(--mf-color-text-disabled);
    margin-bottom: var(--mf-space-3);
}


/* -------------------------------------------------------------------------
 * 4) HEADLINES — Abschnittsüberschriften mit Balken-Hintergrund
 * -------------------------------------------------------------------------
 * Die Live-Seite nutzt ein Hintergrundbild (heading-fill.png), das einen
 * dünnen horizontalen Strich darstellt. Wir ersetzen das durch einen
 * reinen CSS-Gradient — so sind wir bildlos, skalierbar und retina-fit.
 * Der Text hat einen Hintergrund in der Seitenfarbe, damit er den Strich
 * optisch "überdeckt" — wie auf der Live-Seite.
 * ------------------------------------------------------------------------- */

/* Generisches Pattern */
.mf-section-heading {
    margin: 0 0 var(--mf-space-5) 0;
    font-family: var(--mf-font-display);
    /* Horizontaler Strich in der Mitte: per Gradient statt Bild */
    background-image:
            linear-gradient(to right, transparent 0, transparent 100%),
            linear-gradient(to bottom, transparent calc(50% - 1px),
            var(--mf-color-border) calc(50% - 1px),
            var(--mf-color-border) calc(50% + 1px),
            transparent calc(50% + 1px));
    background-repeat: no-repeat;
    background-position: left center, left center;
    overflow: hidden;
}
.mf-section-heading > span {
    display: inline-block;
    font-size: var(--mf-font-size-5xl);
    padding-right: var(--mf-space-2);
    background-color: var(--mf-color-bg);
}
.mf-section-heading .mf-section-heading__filter {
    float: right;
    font-size: var(--mf-font-size-lg);
    padding-left: var(--mf-space-2);
    background-color: var(--mf-color-bg);
}

/* Variante: Pink (Haupt) — entspricht .mainHeadline-purple */
.mf-section-heading--primary,
.mainHeadline-purple {
    margin: 0 0 var(--mf-space-5) 0;
    font-family: var(--mf-font-display);
    background-image: linear-gradient(to bottom, transparent calc(50% - 1px),
    var(--mf-color-border) calc(50% - 1px),
    var(--mf-color-border) calc(50% + 1px),
    transparent calc(50% + 1px));
    background-repeat: no-repeat;
    background-position: left center;
}
.mf-section-heading--primary > span,
.mainHeadline-purple > span {
    display: inline-block;
    font-size: var(--mf-font-size-5xl);
    padding-right: var(--mf-space-2);
    color: var(--mf-color-primary);
    background-color: var(--mf-color-bg-alt);
}
.mf-section-heading--primary .filter,
.mainHeadline-purple        .filter {
    font-size: var(--mf-font-size-lg);
    padding-left: var(--mf-space-2);
    background-color: var(--mf-color-bg-alt);
    color: var(--mf-color-primary);
    float: right;
    font-family: var(--mf-font-display);
}
.mainHeadline-purple .filter a { color: var(--mf-color-primary); text-decoration: none; font-size: var(--mf-font-size-lg); }
.mainHeadline-purple .filter a:hover { text-decoration: underline; }

/* Variante: Grey — entspricht .mainHeadline-grey */
.mf-section-heading--grey,
.mainHeadline-grey {
    margin: 0 0 var(--mf-space-5) 0;
    font-family: var(--mf-font-display);
    background-image: linear-gradient(to bottom, transparent calc(50% - 1px),
    var(--mf-color-border) calc(50% - 1px),
    var(--mf-color-border) calc(50% + 1px),
    transparent calc(50% + 1px));
    background-repeat: no-repeat;
    background-position: left center;
}
.mf-section-heading--grey > span,
.mainHeadline-grey > span {
    display: inline-block;
    font-size: var(--mf-font-size-5xl);
    padding-right: var(--mf-space-2);
    color: var(--mf-color-text-muted);
    background-color: var(--mf-color-bg);
}


/* -------------------------------------------------------------------------
 * 5) BUTTONS — Das Moonflow-Signaturelement
 * -------------------------------------------------------------------------
 * Asymmetrische Ecken (oben-links + unten-rechts). Ohne diese Eigenschaft
 * sieht ein Button NICHT nach Moonflow aus.
 * ------------------------------------------------------------------------- */

/* Basisklasse — strukturell */
.mf-btn {
    display: inline-block;
    border: 0;
    cursor: pointer;
    font-family: var(--mf-font-body);
    font-size: var(--mf-font-size-base);
    line-height: var(--mf-line-tight);
    text-align: center;
    text-decoration: none;
    padding: var(--mf-space-2) var(--mf-space-3);
    border-radius: var(--mf-radius-corners);        /* ← Signatur! */
    transition: background-color var(--mf-transition-base),
    color var(--mf-transition-base);
}
.mf-btn:focus-visible {
    outline: 2px solid var(--mf-color-primary);
    outline-offset: 2px;
}

/* Primär-Variante (Pink) */
.mf-btn--primary,
.moonflowbtn {                                       /* Legacy-Alias */
    background: var(--mf-color-primary-btn);
    color: var(--mf-dark-text);
    border: 0;
    cursor: pointer;
    padding: var(--mf-space-1) var(--mf-space-3);
    border-top-left-radius:    var(--mf-radius-asym);
    border-bottom-right-radius:var(--mf-radius-asym);
    font-family: var(--mf-font-body);
    transition: background-color var(--mf-transition-base);
}
.mf-btn--primary:hover,
.moonflowbtn:hover {
    background: var(--mf-color-primary-hover);
    color: var(--mf-dark-text);
    text-decoration: none;
}

/* Ghost-Variante (transparent, nur Rahmen) */
.mf-btn--ghost {
    background: transparent;
    color: var(--mf-color-primary);
    border: 1px solid var(--mf-color-primary);
}
.mf-btn--ghost:hover {
    background: var(--mf-color-primary);
    color: var(--mf-dark-text);
    text-decoration: none;
}

/* Pill-Variante — das kleine "weiterlesen" unter NewsItems */
.mf-btn--pill {
    background: var(--mf-color-primary);
    color: #fff;
    font-size: var(--mf-font-size-xs);
    padding: 0 var(--mf-space-3);
    height: 13px;
    line-height: 13px;
    min-width: 70px;
    display: inline-block;
    border-top-left-radius:     var(--mf-radius-asym);
    border-bottom-right-radius: var(--mf-radius-asym);
}
.mf-btn--pill a { color: #fff; text-decoration: none; }
.mf-btn--pill:hover { text-decoration: none; }


/* -------------------------------------------------------------------------
 * 6) FORM INPUTS
 * ------------------------------------------------------------------------- */

.mf-input {
    font-family: var(--mf-font-body);
    font-size: var(--mf-font-size-base);
    padding: 6px var(--mf-space-2);
    border: 1px solid var(--mf-color-border);
    background: var(--mf-color-bg);
    color: var(--mf-color-text);
    border-radius: 0;
}
.mf-input:focus {
    outline: 0;
    border-color: var(--mf-color-primary);
    box-shadow: 0 0 0 2px rgba(167, 0, 100, 0.15);
}
.mf-input::placeholder { color: var(--mf-color-text-placeholder); }


/* -------------------------------------------------------------------------
 * 7) DARK PANEL — Userbit / Dropdown / Auth-Formulare
 * -------------------------------------------------------------------------
 * Verwendung: Alles, was als "Über-Overlay" in der blau-grauen Slate-
 * Optik erscheinen soll (wie das Original-Loginmenü #userPMenue).
 * Selbst nicht als Modal zu verwechseln — es ist eine Farbvariante.
 * ------------------------------------------------------------------------- */

.mf-panel--dark {
    background: var(--mf-dark-bg);
    border: 1px solid var(--mf-dark-border);
    box-shadow: var(--mf-shadow-dropdown);
    color: var(--mf-dark-text-muted);
    font-family: var(--mf-font-body);
    font-size: var(--mf-font-size-base);
    padding: var(--mf-space-2);
}
.mf-panel--dark h1,
.mf-panel--dark .mf-panel__title {
    font-family: var(--mf-font-display-bold);
    color: var(--mf-dark-heading);
    font-size: var(--mf-font-size-xl);
    margin: 0 0 var(--mf-space-1) 0;
    padding: 3px 4px 2px 3px;
}
.mf-panel--dark h2,
.mf-panel--dark .mf-panel__subtitle {
    font-family: var(--mf-font-display-bold);
    color: var(--mf-dark-text);
    font-size: var(--mf-font-size-lg);
    margin: 0 0 var(--mf-space-2) 0;
    padding: 3px 2px 2px 2px;
}
.mf-panel--dark a,
.mf-panel--dark a:link,
.mf-panel--dark a:visited {
    color: var(--mf-dark-text);
    text-decoration: none;
}
.mf-panel--dark a:hover {
    color: var(--mf-dark-text-muted);
    text-decoration: underline;
}
.mf-panel--dark .mf-input,
.mf-panel--dark input[type="text"],
.mf-panel--dark input[type="password"],
.mf-panel--dark input[type="email"] {
    padding: 4px var(--mf-space-2);
    border: 1px solid var(--mf-dark-input-border);
    background: var(--mf-dark-slate);
    color: #fff;
    font-size: var(--mf-font-size-base);
    margin: 2px;
}
.mf-panel--dark .mf-input::placeholder,
.mf-panel--dark input::placeholder {
    color: var(--mf-dark-text-faint);
}


/* -------------------------------------------------------------------------
 * 8) CARD / NEWS-ITEM — Bild links, Titel + Text + Infobar rechts
 * -------------------------------------------------------------------------
 * Das Hauptlisting-Muster. Auf der Live-Seite fest auf 670px Breite
 * verdrahtet — hier flexibel (width: 100% bis max-width: 670px),
 * damit die Komponente auch in schmaleren Containern überlebt.
 * ------------------------------------------------------------------------- */

.mf-card {
    display: flex;
    gap: var(--mf-space-3);
    width: 100%;
    max-width: var(--mf-width-main);
    margin-bottom: var(--mf-space-5);
    align-items: stretch;
}
.mf-card__image {
    flex: 0 0 150px;
    width: 150px;
    height: 100px;
    background-color: var(--mf-color-bg-alt);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.mf-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mf-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mf-card__title {
    font-family: var(--mf-font-display-bold);
    color: var(--mf-color-primary);
    font-size: var(--mf-font-size-4xl);
    line-height: var(--mf-line-snug);
    margin: 0 0 var(--mf-space-1) 0;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--mf-color-border-divider);
}
.mf-card__title a {
    color: inherit;
    text-decoration: none;
}
.mf-card__title a:hover { text-decoration: underline; }

.mf-card__text {
    flex: 1;
    font-family: var(--mf-font-body);
    color: var(--mf-color-text-muted);
    font-size: var(--mf-font-size-base);
    line-height: 13px;
    padding: 2px 0;
    margin: 0 0 var(--mf-space-2) 0;
}

/* Infobar unter dem Card-Inhalt */
.mf-card__infobar {
    background-color: var(--mf-color-bg-infobar);
    border-top-left-radius:     var(--mf-radius-asym);
    border-bottom-right-radius: var(--mf-radius-asym);
    height: 13px;
    line-height: 13px;
    font-size: var(--mf-font-size-xs);
    font-family: var(--mf-font-body);
    color: var(--mf-color-text-subtle);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.mf-card__infobar-cta {
    background: var(--mf-color-primary);
    color: #fff;
    text-align: center;
    min-width: 70px;
    padding: 0 var(--mf-space-2);
    border-top-left-radius:     var(--mf-radius-asym);
    border-bottom-right-radius: var(--mf-radius-asym);
}
.mf-card__infobar-cta a { color: #fff; text-decoration: none; display: block; }
.mf-card__infobar-meta {
    padding-left: var(--mf-space-1);
    flex: 1;
}
.mf-card__infobar-highlight {
    color: var(--mf-color-text-highlight);
}
.mf-card__infobar-highlight a,
.mf-card__infobar-highlight a:link,
.mf-card__infobar-highlight a:visited,
.mf-card__infobar-highlight a:hover {
    color: var(--mf-color-text-highlight);
    text-decoration: none;
}


/* Legacy-Alias: .newsItem-Hierarchie aus dem Live-CSS */
.newsItem                                                  { width: 100%; max-width: var(--mf-width-main); min-height: 100px; display: block; margin-bottom: var(--mf-space-5); }
.newsItem::before, .newsItem::after                        { content: ""; display: table; }
.newsItem::after                                           { clear: both; }
.newsItem .newsItemImage                                   { width: 150px; height: 100px; float: left; background-color: var(--mf-color-bg-alt); background-repeat: no-repeat; background-size: cover; }
.newsItem .newsItemImage img                               { display: block; width: 100%; height: 100%; }
.newsItem .newsItemWrapper                                 { float: right; min-height: 100px; width: calc(100% - 150px - var(--mf-space-3)); display: block; }
.newsItem .newsItemWrapper .newsItemGeneralWrapper         { min-height: 87px; }
.newsItem .newsItemHeadline                                { font-family: var(--mf-font-display-bold); color: var(--mf-color-primary); font-size: var(--mf-font-size-4xl); border-bottom: 1px solid var(--mf-color-border-divider); line-height: var(--mf-font-size-4xl); min-height: var(--mf-font-size-4xl); }
.newsItem .newsItemHeadline a                              { color: inherit; text-decoration: none; }
.newsItem .newsItemHeadline a:hover                        { text-decoration: underline; }
.newsItem .newsItemInfotext                                { font-family: var(--mf-font-body); color: var(--mf-color-text-muted); font-size: var(--mf-font-size-base); line-height: 13px; padding: 2px 0; display: block; }
.newsItem .newsItemInfoBar                                 { height: 13px; background-color: var(--mf-color-bg-infobar); border-top-left-radius: var(--mf-radius-asym); border-bottom-right-radius: var(--mf-radius-asym); }
.newsItem .newsItemInfoBar .newsItemWeiterlesen            { width: 70px; background-color: var(--mf-color-primary); border-top-left-radius: var(--mf-radius-asym); border-bottom-right-radius: var(--mf-radius-asym); color: #fff; font-size: var(--mf-font-size-xs); text-align: center; float: left; line-height: 13px; height: 13px; }
.newsItem .newsItemInfoBar .newsItemWeiterlesen a          { color: #fff; text-decoration: none; }
.newsItem .newsItemInfoBar .newsItemScheuerleiste          { font-family: var(--mf-font-body); color: var(--mf-color-text-subtle); font-size: var(--mf-font-size-xs); float: right; display: block; padding-left: 5px; line-height: 13px; }
.newsItem .newsItemInfoBar .newsItemScheuerleiste .newsItemInfoHighlight { color: var(--mf-color-text-highlight); }


/* -------------------------------------------------------------------------
 * 9) LISTING DIVIDER — Dekorativer Strich zwischen Cards
 * ------------------------------------------------------------------------- */

.mf-listing-divider,
.listing-divider {
    width: 100%;
    max-width: var(--mf-width-main);
    height: 10px;
    margin-bottom: var(--mf-space-4);
    background: linear-gradient(to right,
    transparent 0%,
    var(--mf-color-border) 20%,
    var(--mf-color-border) 80%,
    transparent 100%) center / 100% 1px no-repeat;
}


/* -------------------------------------------------------------------------
 * 10) "ALLE ... »" – Link-Pill am Listingsende
 * ------------------------------------------------------------------------- */

.mf-more-link,
#morenews {
    display: block;
    width: 250px;
    height: 20px;
    line-height: 20px;
    background-color: var(--mf-color-primary);
    color: #fff;
    font-family: var(--mf-font-body);
    font-size: var(--mf-font-size-xs);
    text-align: center;
    border-top-left-radius:     var(--mf-radius-asym);
    border-bottom-right-radius: var(--mf-radius-asym);
    float: right;
}
.mf-more-link a,
#morenews a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    line-height: 20px;
}
.mf-more-link a:hover,
#morenews a:hover { text-decoration: none; color: #fff; }


/* -------------------------------------------------------------------------
 * 11) TABLES — .mf-table (entspricht Legacy .infotable)
 * ------------------------------------------------------------------------- */

.mf-table,
.infotable {
    width: 100%;
    border: 1px solid var(--mf-color-border-soft);
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0;
}
.mf-table td, .mf-table th,
.infotable td, .infotable th {
    border: 1px solid var(--mf-color-border-soft);
    padding: 6px var(--mf-space-2);
    text-align: left;
}
.mf-table th,
.infotable th {
    background: var(--mf-color-bg-alt);
    border-bottom: 1px solid var(--mf-color-border-strong);
    font-family: var(--mf-font-display-bold);
}
.mf-table tr:nth-child(even),
.mf-table tr:nth-child(odd),
.infotable tr:nth-child(even),
.infotable tr:nth-child(odd) {
    background: var(--mf-color-bg-zebra);
}


/* -------------------------------------------------------------------------
 * 12) BLOCKQUOTE — Deep-Slate Zitat im Story-Body
 * ------------------------------------------------------------------------- */

.mf-blockquote,
#storyMainContent #storyText blockquote {
    margin: var(--mf-space-3) 0;
    padding: 0;
    font-family: var(--mf-font-display-light);
    font-style: italic;
    font-size: var(--mf-font-size-6xl);
    line-height: 32px;
    color: var(--mf-dark-slate);
}


/* -------------------------------------------------------------------------
 * 13) TV-GUIDE / EVENT-ITEM (Sidebar) — kompakte Darstellung
 * -------------------------------------------------------------------------
 * Entspricht dem Muster aus sidebar.css: linker farbiger Tag mit Uhrzeit
 * oder Datum, rechts die Info-Kachel.
 * ------------------------------------------------------------------------- */

.mf-tvguide-item {
    display: flex;
    gap: var(--mf-space-2);
    align-items: center;
    margin-bottom: var(--mf-space-3);
}
.mf-tvguide-item__time {
    width: 69px;
    height: 26px;
    background: var(--mf-color-primary);   /* Standard = läuft gerade */
    color: #fff;
    font-family: var(--mf-font-display-bold);
    font-size: var(--mf-font-size-4xl);
    line-height: 26px;
    text-align: center;
    flex-shrink: 0;
    border-top-left-radius:     var(--mf-radius-asym);
    border-bottom-right-radius: var(--mf-radius-asym);
}
.mf-tvguide-item__time--inactive {
    background: var(--mf-color-text-highlight);  /* graphit-grau */
}
.mf-tvguide-item__body     { flex: 1; min-width: 0; }
.mf-tvguide-item__headline {
    font-family: var(--mf-font-display-bold);
    font-size: var(--mf-font-size-2xl);
    color: var(--mf-color-primary);
    line-height: 14px;
    margin: 0;
}
.mf-tvguide-item__info {
    font-family: var(--mf-font-body);
    font-size: var(--mf-font-size-xs);
    color: var(--mf-color-text-faint);
    line-height: 12px;
}


/* -------------------------------------------------------------------------
 * 14) FOCUS-RING — Konsistente Barrierefreiheit
 * ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--mf-color-primary);
    outline-offset: 2px;
}