/*
Theme Name: Media Unfiltered
Theme URI: https://media-unfiltered.de
Author: Sven Metz
Description: Analysen zu Media, Programmatic und Data. Schwarz, ein Signalrot, drei Schriften, keine Dekoration.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: media-unfiltered
Tags: blog, one-column, editor-style, custom-menu, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@110..125,400..700&family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --mu-ink:    #0D0C0C;  /* Grundfläche */
  --mu-signal: #E8412A;  /* Signalrot — genau eine Aussage pro Fläche */
  --mu-paper:  #F5F3F0;
  --mu-text:   #D6D2CE;
  --mu-grey:   #9A9490;
  --mu-meta:   #5C5754;
  --mu-line:   #211F1E;
}

/* ---------- Grundlage ---------- */

body,
.wp-site-blocks {
  background: var(--mu-ink);
  color: var(--mu-text);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--mu-signal); color: var(--mu-ink); }

a { color: var(--mu-signal); text-decoration: none; }
a:hover { color: var(--mu-paper); }

/* ---------- Typografie ---------- */

h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 700;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mu-paper);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .wp-block-post-title { font-size: clamp(44px, 8vw, 92px); margin: 0 0 28px; }
h2 { font-size: clamp(28px, 4vw, 44px); margin: 56px 0 20px; }
h3 { font-size: clamp(22px, 3vw, 30px); font-variation-settings: 'wdth' 118, 'wght' 600; margin: 40px 0 16px; }

p { margin: 0 0 26px; text-wrap: pretty; max-width: 68ch; }

strong, b { color: var(--mu-paper); font-weight: 700; }

/* Anriss / Excerpt direkt unter der Headline */
.wp-block-post-excerpt__excerpt,
.entry-content > p:first-of-type {
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--mu-text);
}

/* ---------- Pull-Quote: der Satz, der zitiert wird ---------- */

.wp-block-pullquote,
.wp-block-pullquote.mu-quote {
  background: none;
  border: none;
  padding: 18px 0;
  margin: 40px 0;
  text-align: left;
}

.wp-block-pullquote blockquote { border: none; margin: 0; padding: 0; }

.wp-block-pullquote p {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wdth' 118, 'wght' 600;
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--mu-signal);
  margin: 0;
  max-width: none;
}

.wp-block-quote {
  border-left: 3px solid var(--mu-signal);
  padding-left: 28px;
  margin: 34px 0;
  font-style: normal;
  color: var(--mu-paper);
}

/* ---------- Drei Fragen: die nummerierte Liste am Textende ---------- */

.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  counter-reset: mu;
}

.wp-block-list li {
  counter-increment: mu;
  position: relative;
  border-top: 1px solid var(--mu-line);
  padding: 20px 0 0 52px;
  margin-bottom: 18px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--mu-paper);
  text-wrap: pretty;
}

.wp-block-list li::before {
  content: counter(mu, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 25px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--mu-meta);
}

/* ---------- Meta, Trennlinien, Tags ---------- */

.wp-block-separator {
  border: none;
  border-top: 1px solid var(--mu-line);
  margin: 56px 0 40px;
  opacity: 1;
}

.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author,
.wp-block-post-time-to-read,
.post-meta,
.entry-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mu-meta);
  text-transform: none;
}

.wp-block-post-terms a { color: var(--mu-grey); }
.wp-block-post-terms a:hover { color: var(--mu-signal); }

/* Quellenzeile: letzter Absatz eines Beitrags */
.entry-content > p:last-child {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--mu-meta);
}

/* ---------- Archiv / Beitragsliste ---------- */

.wp-block-post-template { gap: 0; }

.wp-block-post-template > li,
.wp-block-post {
  border-top: 1px solid var(--mu-line);
  padding: 44px 0;
  transition: background 120ms ease;
}

.wp-block-post-template > li:hover { background: #131211; }

.wp-block-post-template .wp-block-post-title {
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 0.92;
  margin: 14px 0 16px;
}

.wp-block-post-template .wp-block-post-title a { color: var(--mu-paper); }
.wp-block-post-template .wp-block-post-title a:hover { color: var(--mu-signal); }

.wp-block-post-template .wp-block-post-excerpt {
  color: var(--mu-grey);
  font-size: 19px;
}

/* ---------- Buttons, Formulare, Newsletter ---------- */

.wp-block-button__link,
button,
input[type="submit"] {
  background: var(--mu-signal);
  color: var(--mu-ink);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 2px;
  padding: 16px 26px;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover { background: var(--mu-paper); color: var(--mu-ink); }

input[type="text"],
input[type="email"],
textarea {
  background: #131211;
  border: 1px solid #2A2726;
  border-radius: 0;
  color: var(--mu-paper);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 16px 18px;
}

input:focus, textarea:focus { outline: none; border-color: var(--mu-signal); }

/* ---------- Header & Footer ---------- */

.wp-site-blocks > header,
.site-header {
  border-bottom: 1px solid var(--mu-line);
  background: rgba(13, 12, 12, 0.92);
  backdrop-filter: blur(12px);
}

.wp-block-site-title a,
.site-title a {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 15px;
  text-transform: none;
  color: var(--mu-signal);
}

.wp-block-navigation a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--mu-grey);
}
.wp-block-navigation a:hover { color: var(--mu-paper); }

.wp-site-blocks > footer,
.site-footer {
  border-top: 1px solid var(--mu-line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mu-meta);
}

.site-footer a { color: var(--mu-meta); }
.site-footer a:hover { color: var(--mu-signal); }

/* ---------- Breiten ---------- */

.entry-content,
.wp-block-post-content { max-width: 840px; margin-inline: auto; }

.alignwide  { max-width: 1180px; }
.alignfull  { max-width: none; }

/* ---------- Bilder ---------- */

img, .wp-block-image img { border-radius: 0; }
figcaption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mu-meta);
}

/* ---------- Theme-Layout ---------- */

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

.mu-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.mu-narrow { max-width: 840px; margin: 0 auto; padding: 0 40px; }

.mu-bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13,12,12,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mu-line);
}
.mu-bar-inner {
  max-width: 1180px; margin: 0 auto; padding: 20px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.mu-brand {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 15px;
  color: var(--mu-signal); text-transform: none;
}
.mu-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 30px; flex-wrap: wrap;
  font-size: 14px; font-weight: 400;
}
.mu-nav a { color: var(--mu-grey); }
.mu-nav a:hover, .mu-nav .current-menu-item > a { color: var(--mu-paper); }
.mu-nav li:last-child a {
  background: var(--mu-signal); color: var(--mu-ink);
  font-weight: 600; padding: 11px 20px; border-radius: 2px;
}
.mu-nav li:last-child a:hover { background: var(--mu-paper); }

.mu-hero { padding: 110px 0 80px; border-bottom: 1px solid var(--mu-line); }
.mu-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mu-meta);
  margin-bottom: 40px;
}
.mu-hero h1 {
  font-size: clamp(56px, 11vw, 128px); line-height: 0.86;
  letter-spacing: -0.015em; margin: 0;
}
.mu-hero h1 span { color: var(--mu-signal); }
.mu-hero-foot {
  margin-top: 48px; display: flex; flex-wrap: wrap; gap: 56px;
  align-items: flex-end; justify-content: space-between;
}
.mu-claim {
  margin: 0; max-width: 620px;
  font-size: clamp(21px, 3.2vw, 29px); line-height: 1.35; color: var(--mu-text);
}
.mu-claim b { color: var(--mu-paper); font-weight: 600; }
.mu-stats { display: flex; gap: 52px; flex-wrap: wrap; }
.mu-stat { display: flex; flex-direction: column; gap: 6px; }
.mu-stat-n {
  font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: 40px; line-height: 1; color: var(--mu-paper);
}
.mu-stat-n em { font-style: normal; color: var(--mu-signal); }
.mu-stat-l {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu-meta);
}

.mu-section-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mu-meta);
  padding: 72px 0 24px;
}

/* Archiv-Zeile */
.mu-row {
  border-top: 1px solid var(--mu-line); padding: 44px 0;
  display: grid; grid-template-columns: 90px minmax(0,1fr) minmax(0,230px); gap: 36px;
  align-items: start; transition: background 120ms ease;
}
.mu-row:hover { background: #131211; }
.mu-row-meta {
  display: flex; flex-direction: column; gap: 10px;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mu-meta);
}
.mu-row-num { color: var(--mu-signal); }
.mu-row-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mu-grey);
  margin-bottom: 16px;
}
.mu-row h2 {
  margin: 0 0 16px; font-size: clamp(34px, 5.6vw, 58px); line-height: 0.92;
}
.mu-row h2 a { color: var(--mu-paper); }
.mu-row h2 a:hover { color: var(--mu-signal); }
.mu-row p { margin: 0; max-width: 540px; font-size: 19px; color: var(--mu-grey); }
.mu-row-fig { display: flex; flex-direction: column; gap: 14px; padding-top: 32px; }
.mu-fig-n {
  font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 112, 'wght' 600;
  font-size: 42px; line-height: 1; color: var(--mu-signal);
}
.mu-fig-l { font-size: 15px; color: var(--mu-meta); line-height: 1.4; }
.mu-more {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mu-paper);
  border-bottom: 1px solid var(--mu-signal); padding-bottom: 3px; align-self: flex-start;
  margin-top: 6px;
}

/* Filter-Chips */
.mu-filter { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 8px; }
.mu-chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  padding: 9px 16px; border: 1px solid #2A2726; color: var(--mu-grey);
}
.mu-chip:hover { border-color: var(--mu-signal); color: var(--mu-paper); }
.mu-chip.is-on { background: var(--mu-signal); border-color: var(--mu-signal); color: var(--mu-ink); }

/* Artikelkopf */
.mu-article-head { padding: 76px 0 0; }
.mu-back {
  display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--mu-grey); margin-bottom: 48px;
}
.mu-back:hover { color: var(--mu-signal); }
.mu-article-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mu-signal);
  margin-bottom: 24px;
}
.mu-article-meta {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 42px 0 58px; padding-bottom: 26px; border-bottom: 1px solid var(--mu-line);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mu-meta);
}
.mu-article-meta a { color: var(--mu-grey); }

.mu-box { border: 1px solid #2A2726; padding: 40px; margin: 60px 0 0; }

.mu-footer { border-top: 1px solid var(--mu-line); margin-top: 90px; }
.mu-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 44px 40px;
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mu-meta);
}
.mu-footer-inner .mu-brand { font-size: 13px; }
.mu-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.mu-footer-nav a { color: var(--mu-meta); }
.mu-footer-nav a:hover { color: var(--mu-signal); }

.mu-pagination { display: flex; gap: 18px; padding: 40px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; }
.mu-pagination .page-numbers { color: var(--mu-grey); }
.mu-pagination .current { color: var(--mu-signal); }

@media (max-width: 860px) {
  .mu-row { grid-template-columns: 1fr; gap: 20px; }
  .mu-row-fig { padding-top: 0; }
  .mu-wrap, .mu-narrow, .mu-bar-inner, .mu-footer-inner { padding-left: 24px; padding-right: 24px; }
}