/*
Theme Name: OKTAFON
Theme URI: https://deutscheindustrieprodukte.de/oktafon
Author: As
Author URI: https://deutscheindustrieprodukte.de
Description: Dunkles Instrumententafel-Theme im OKTAFON-Hausstil. Headerbild mit Fokus-Steuerung, Inhalt wahlweise als Raster oder Vollbild, Layout folgt der Bildschirmbreite, sieben umschaltbare Farbschalen. Keine externen Abhaengigkeiten, keine Build-Kette, kein Netzwerkverkehr.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oktafon
Tags: one-column, two-columns, grid-layout, custom-header, custom-logo, custom-menu, custom-colors, featured-images, full-width-template, block-styles, wide-blocks, translation-ready, accessibility-ready, blog
*/

/* ------------------------------------------------------------------
   OKTAFON — Hausstil-Theme
   (DE) Konzept, Komposition und Gestaltungsrichtung: As, Kiel.
        Technische Umsetzung: Claude (Anthropic).
        Nutzung frei mit Hinweis auf deutscheindustrieprodukte.de.
        Uebernommene Funktionen bleiben kostenlos nutzbar.
        Bei erheblichen Erloesen wird faire Beteiligung erwartet.
   (EN) Concept, composition and art direction: As, Kiel, Germany.
        Technical implementation: Claude (Anthropic).
        Free to use with attribution to deutscheindustrieprodukte.de.
        Derived features stay free of charge.
        Fair participation is expected on substantial revenue.
   ------------------------------------------------------------------ */

/* =========================================================
   1) TOKENS — Grundschale "default" (graphite)
   Weitere Schalen werden von inc/shells.php als
   [data-schale="..."] in den Kopf geschrieben.
   ========================================================= */
:root {
	/* Ebenen dunkel -> hell */
	--bg0: #0b0d13;
	--bg1: #0f1219;
	--bg2c: #151a25;
	--bg3: #1c2231;
	--bg3h: #232b3d;

	/* Linien */
	--line: #2a3348;
	--line2: #2a3348;
	--line3: #39445f;
	--hairline: rgba(255, 255, 255, .05);

	/* Well-Familie (eingelassene Flaechen) */
	--well: #141926;
	--wellLine: #2a3145;
	--wellTxt: #8a93ab;
	--wellDeep: #1b2130;
	--wellDeep2: #2a3346;

	/* Text-Rampe */
	--ink: #eef2f8;
	--t1: #aeb7ca;
	--t2: #98a1b5;
	--dim: #8a93a8;

	/* Familienfarben — eine Farbe, eine Bedeutung */
	--amber: #f2a13c;  /* Komposition / wichtigste Aktion */
	--grn: #6fd39a;    /* Klang / bestaetigte Zustaende */
	--blau: #6fb1f7;   /* Raum / Struktur */
	--cyan: #3fd0dd;   /* AUSSCHLIESSLICH: gesetzter Wert, Eingriff */
	--vio: #a795ff;    /* Effekte */
	--mag: #e0648e;    /* Akzent */

	/* Status */
	--ok: #58c98a;
	--warn: #e0b34a;
	--err: #e5655f;

	/* Abstaende */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 20px;
	--s6: 28px;

	/* Radien */
	--r1: 6px;
	--r2: 10px;
	--r3: 14px;

	/* Schriftgroessen Bedienoberflaeche */
	--fz-micro: 9px;
	--fz-label: 10.5px;
	--fz-body: 12.5px;
	--fz-value: 11px;
	--fz-lead: 13.5px;

	/* Schriftgroessen Lesetext (Erweiterung fuer Fliesstext,
	   die Tafel-Rampe ist fuer Langtext zu klein) */
	--fz-read: 16.5px;
	--fz-read-s: 14px;
	--fz-h1: clamp(26px, 4.4vw, 44px);
	--fz-h2: clamp(21px, 2.8vw, 30px);
	--fz-h3: 19px;
	--zeile: 1.62;

	--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

	--ring: 0 0 0 2px rgba(63, 208, 221, .55);

	/* Mass — die Buehne folgt dem Bildschirm, nicht einer festen Zahl.
	   --buehne-max wird vom Customizer gesetzt (voll / 1440 / 1180). */
	--buehne-max: 100%;
	--buehne-pad: clamp(12px, 2.4vw, 40px);
	--lese: 68ch;
	--kopf-h: 54px;

	/* Referenz-Kalibrierung */
	--ref-cal: 8.0447;
}

/* =========================================================
   2) GRUNDLAGE
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg0);
	color: var(--t1);
	font-family: var(--font-ui);
	font-size: var(--fz-read);
	line-height: var(--zeile);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe,
embed,
object { max-width: 100%; height: auto; }

figure { margin: 0 0 var(--s4); }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cyan); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r1); }

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-weight: 600;
	line-height: 1.22;
	margin: 0 0 var(--s3);
	overflow-wrap: break-word;
}

h1 { font-size: var(--fz-h1); letter-spacing: -.012em; }
h2 { font-size: var(--fz-h2); }
h3 { font-size: var(--fz-h3); }
h4, h5, h6 { font-size: var(--fz-lead); text-transform: uppercase; letter-spacing: .1em; color: var(--t1); }

p, ul, ol, dl, table, pre, blockquote { margin: 0 0 var(--s4); }

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--s6) 0;
}

code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--fz-read-s); }

pre {
	background: var(--wellDeep);
	border: 1px solid var(--wellLine);
	border-radius: var(--r2);
	padding: var(--s4);
	overflow: auto;
	color: var(--ink);
}

code { background: var(--well); border: 1px solid var(--wellLine); border-radius: var(--r1); padding: 1px 5px; color: var(--grn); }
pre code { background: none; border: 0; padding: 0; color: inherit; }

blockquote {
	border-left: 2px solid var(--amber);
	padding: var(--s1) 0 var(--s1) var(--s4);
	color: var(--t1);
	font-style: normal;
}

blockquote cite { display: block; font-size: var(--fz-label); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); font-style: normal; margin-top: var(--s2); }

table { width: 100%; border-collapse: collapse; font-size: var(--fz-read-s); }
th, td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; }
th { background: var(--wellDeep); color: var(--ink); font-size: var(--fz-label); text-transform: uppercase; letter-spacing: .1em; }

/* Barrierefreiheit */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--amber);
	color: #0b0d13;
	padding: var(--s2) var(--s4);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .12em;
	border-radius: 0 0 var(--r1) 0;
}

.sprung:focus { left: 0; }

/* =========================================================
   3) BAUSTEINE
   ========================================================= */
.buehne {
	width: 100%;
	max-width: var(--buehne-max, 100%);
	margin: 0 auto;
	padding: 0 var(--buehne-pad);
}

/* Lesestrecken bekommen zusaetzlich eine Obergrenze, sonst laufen Zeilen
   auf breiten Schirmen aus dem Auge. Listen und Raster nicht. */
.buehne--lesen { max-width: min(var(--buehne-max, 100%), 1040px); }

.panel {
	background: linear-gradient(180deg, var(--bg2c), var(--bg1));
	border: 1px solid var(--line);
	border-radius: var(--r2);
	padding: var(--s4) var(--s5);
	break-inside: avoid;
}

.marke-mikro,
.feld-kopf {
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--amber);
	margin: 0 0 var(--s2);
}

.dienst {
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--dim);
}

/* Pillen (Bedienschalter) */
.pille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 25px;
	min-width: 53px;
	padding: 0 var(--s2);
	background: var(--bg3);
	border: 1px solid var(--line3);
	border-radius: var(--r1);
	color: var(--t2);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .12em;
	cursor: pointer;
	line-height: 1;
}

.pille:hover { background: var(--bg3h); color: var(--ink); }
.pille[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); background: var(--wellDeep); }
.pille--breit { min-width: 59px; }

/* Chip = gesetzter Wert / Eingriff (immer cyan) */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s1);
	height: 22px;
	padding: 0 var(--s2);
	border: 1px solid var(--cyan);
	border-radius: 999px;
	color: var(--cyan);
	background: var(--wellDeep);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .12em;
	text-decoration: none;
}

.chip::before { content: "\25C6"; font-size: 8px; }

/* Knopf */
.knopf,
button,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: 34px;
	padding: var(--s2) var(--s4);
	background: var(--bg3);
	border: 1px solid var(--line3);
	border-radius: var(--r1);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .12em;
	cursor: pointer;
	text-decoration: none;
}

.knopf:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover { background: var(--bg3h); border-color: var(--amber); color: var(--amber); }

.knopf--haupt { border-color: var(--amber); color: var(--amber); }
.knopf--vorlage { border-color: var(--grn); color: var(--grn); }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 34px;
	padding: var(--s2) var(--s3);
	background: var(--wellDeep);
	border: 1px solid var(--wellLine);
	border-radius: var(--r1);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--fz-read-s);
}

textarea { min-height: 140px; }

input::placeholder,
textarea::placeholder { color: var(--dim); }

label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--t2);
	margin-bottom: var(--s1);
}

/* =========================================================
   4) KOPF
   ========================================================= */
.kopf {
	background: linear-gradient(180deg, var(--bg1), var(--bg0));
	border-bottom: 1px solid var(--line);
	position: relative;
	z-index: 20;
}

.kopf__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3) var(--s4);
	min-height: var(--kopf-h);
	max-width: var(--buehne-max, 100%);
	margin: 0 auto;
	padding: var(--s2) var(--buehne-pad);
}

.marke { display: flex; align-items: center; gap: var(--s3); margin-right: auto; min-width: 0; }
.marke__bild img { display: block; max-height: 36px; width: auto; }

.marke__titel {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fz-lead);
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--amber);
	line-height: 1.1;
}

.marke__titel a { color: inherit; text-decoration: none; }
.marke__titel a:hover { color: var(--ink); }
.marke__unter { margin: 2px 0 0; font-size: var(--fz-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-family: var(--font-mono); }

.navi ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0; padding: 0; }
.navi li { position: relative; }

.navi a {
	display: block;
	padding: var(--s2) var(--s3);
	color: var(--t1);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .12em;
	border: 1px solid transparent;
	border-radius: var(--r1);
}

.navi a:hover { color: var(--ink); background: var(--bg3); }
.navi .current-menu-item > a,
.navi .current_page_item > a { color: var(--cyan); border-color: var(--line3); }

/* Untermenues */
.navi ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	flex-direction: column;
	background: var(--bg2c);
	border: 1px solid var(--line);
	border-radius: var(--r2);
	padding: var(--s1);
	z-index: 30;
}

.navi li:hover > ul,
.navi li:focus-within > ul { display: flex; }
.navi ul ul ul { top: 0; left: 100%; }

.werkzeuge { display: flex; align-items: center; gap: var(--s1); }
.werkzeuge__gruppe { display: flex; gap: 2px; }

.schale-wahl {
	width: auto;
	min-height: 25px;
	height: 25px;
	padding: 0 var(--s2);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .1em;
	background: var(--bg3);
	border-color: var(--line3);
	color: var(--t2);
}

.navi-schalter { display: none; }

/* =========================================================
   5) HEADERBILD
   ========================================================= */
.haupt-bild {
	position: relative;
	background: var(--bg1);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.haupt-bild__figur { margin: 0; position: relative; }

.haupt-bild__bild {
	display: block;
	width: 100%;
	height: var(--bild-h, clamp(200px, 34vw, 420px));
	object-fit: cover;
	object-position: var(--bild-pos, 50% 50%);
}

.haupt-bild__schleier {
	position: absolute;
	inset: 0;
	/* Staerke kommt aus dem Customizer (--schleier, 0 bis 0.95).
	   Alphawerte ueber 1 werden vom Browser geklemmt. */
	background: linear-gradient(180deg,
		rgba(3, 5, 9, calc(var(--schleier, .62) * .3)) 0%,
		rgba(3, 5, 9, var(--schleier, .62)) 62%,
		rgba(3, 5, 9, calc(var(--schleier, .62) * 1.4)) 100%);
	pointer-events: none;
}

.haupt-bild__text {
	position: absolute;
	inset: auto 0 0 0;
	max-width: var(--buehne-max, 100%);
	margin: 0 auto;
	padding: var(--s5) var(--buehne-pad);
}

.haupt-bild__marke {
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--amber);
	margin: 0 0 var(--s2);
	display: flex;
	align-items: center;
	gap: var(--s2);
}

.haupt-bild__marke::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	display: inline-block;
}

.haupt-bild__titel { margin: 0; color: var(--ink); }
.haupt-bild__unter { margin: var(--s2) 0 0; color: var(--t1); font-size: var(--fz-lead); max-width: 68ch; }
.haupt-bild__meta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* Liegt ein Bild an, ist das Kopffenster in JEDER Schale dunkel — wie das
   Messfenster der Tafel. Nur so bleibt Schrift auf dem Foto lesbar, auch
   in den hellen Schalen Papier und Labor. */
.haupt-bild {
	--bild-schrift: #f2f6fb;
	--bild-ruhig: #cbd5e2;
	--bild-fern: #adb8c7;
	--bild-marke: #f2a13c;
	background: #07090e;
}

.haupt-bild .haupt-bild__titel {
	color: var(--bild-schrift);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}

.haupt-bild .haupt-bild__unter {
	color: var(--bild-ruhig);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.haupt-bild .haupt-bild__marke {
	color: var(--bild-marke);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.haupt-bild .meta,
.haupt-bild .meta a { color: var(--bild-fern); }
.haupt-bild .meta__trenner { color: var(--bild-fern); opacity: .6; }

/* Statuszeile unter dem Bild */
.zustand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3);
	max-width: var(--buehne-max, 100%);
	margin: 0 auto;
	padding: var(--s2) var(--buehne-pad);
	border-bottom: 1px solid var(--hairline);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dim);
}

.zustand__wert { color: var(--cyan); }

/* =========================================================
   6) INHALT — RASTER / VOLLBILD
   ========================================================= */
.haupt { padding: var(--s6) 0; }
.ohne-kopfbild .haupt { padding-top: var(--s5); }

/* Eine Auszeichnung, zwei Ansichten: die Body-Klasse entscheidet.
   So schaltet der Umschalter ohne Neuladen um. */
.liste { list-style: none; margin: 0; padding: 0; min-width: 0; }

.ansicht-raster .liste {
	display: grid;
	/* min() haelt die Spalte auf schmalen Schirmen im Rahmen,
	   auto-fill fuellt breite Schirme bis zum Rand. */
	grid-template-columns: repeat(auto-fill, minmax(min(var(--raster-min, 300px), 100%), 1fr));
	gap: var(--s3);
	align-items: start;
}

.ansicht-vollbild .liste {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	max-width: 1440px;
	margin: 0 auto;
}

.eintrag {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, var(--bg2c), var(--bg1));
	border: 1px solid var(--line);
	border-radius: var(--r2);
	overflow: hidden;
	min-width: 0;
}

.eintrag:hover { border-color: var(--line3); }
.ansicht-vollbild .eintrag { border-radius: var(--r3); }

.eintrag__bild {
	display: block;
	margin: 0;
	background: var(--wellDeep);
	border-bottom: 1px solid var(--hairline);
	overflow: hidden;
}

.eintrag__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ansicht-raster .eintrag__bild { aspect-ratio: 16 / 10; }
.ansicht-vollbild .eintrag__bild img { height: clamp(200px, 28vw, 420px); }

.eintrag__bild--leer {
	background:
		repeating-linear-gradient(135deg, var(--hairline) 0 1px, transparent 1px 12px),
		var(--wellDeep);
}

.ansicht-vollbild .eintrag__bild--leer { min-height: 110px; }

.eintrag__koerper { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s4); }
.ansicht-vollbild .eintrag__koerper { padding: var(--s5); max-width: var(--lese); }
.eintrag__titel { margin: 0; font-size: var(--fz-h3); }
.ansicht-vollbild .eintrag__titel { font-size: var(--fz-h2); }
.eintrag__titel a { color: var(--ink); text-decoration: none; }
.eintrag__titel a:hover { color: var(--amber); }
.eintrag__auszug { margin: 0; font-size: var(--fz-read-s); color: var(--t2); }
.ansicht-vollbild .eintrag__auszug { font-size: var(--fz-read); }

.eintrag__fuss {
	margin-top: auto;
	padding-top: var(--s2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s2);
	border-top: 1px solid var(--hairline);
}

.meta {
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dim);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	align-items: center;
}

.meta a { color: var(--dim); text-decoration: none; }
.meta a:hover { color: var(--cyan); }
.meta__trenner { color: var(--line3); }

.weiter {
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--amber);
	text-decoration: none;
	white-space: nowrap;
}

.weiter:hover { color: var(--ink); }
.weiter::after { content: " \2192"; }

/* Einzelbeitrag / Seite */
.beitrag { }
.beitrag__kopf { margin-bottom: var(--s5); }
/* Nicht der Kasten wird verengt, sondern die Textzeile. So folgen Bilder,
   Einbettungen, Tabellen und Blockraster dem Schirm, waehrend Fliesstext
   lesbar schmal bleibt. */
.beitrag__inhalt { font-size: var(--fz-read); color: var(--t1); }

.beitrag__inhalt > p,
.beitrag__inhalt > ul,
.beitrag__inhalt > ol,
.beitrag__inhalt > dl,
.beitrag__inhalt > h1,
.beitrag__inhalt > h2,
.beitrag__inhalt > h3,
.beitrag__inhalt > h4,
.beitrag__inhalt > h5,
.beitrag__inhalt > h6,
.beitrag__inhalt > blockquote,
.beitrag__inhalt > .wp-block-paragraph,
.beitrag__inhalt > .wp-block-heading,
.beitrag__inhalt > .wp-block-list,
.beitrag__inhalt > .wp-block-quote,
.beitrag__inhalt > .wp-block-pullquote {
	max-width: var(--lese);
}

/* Alles, was Flaeche braucht, darf sie nehmen. */
.beitrag__inhalt > figure,
.beitrag__inhalt > iframe,
.beitrag__inhalt > table,
.beitrag__inhalt > pre,
.beitrag__inhalt > .wp-block-image,
.beitrag__inhalt > .wp-block-embed,
.beitrag__inhalt > .wp-block-gallery,
.beitrag__inhalt > .wp-block-columns,
.beitrag__inhalt > .wp-block-group,
.beitrag__inhalt > .wp-block-table,
.beitrag__inhalt > .wp-block-media-text,
.beitrag__inhalt > .wp-block-cover {
	max-width: none;
}

/* Ein Absatz, in dem eine Einbettung oder ein Bild steckt, ist kein Fliesstext
   und darf nicht auf Zeilenmasz verengt werden. Genau das quetschte
   Bandcamp-Reihen aus klassischem HTML in eine schmale Spalte. */
.beitrag__inhalt > p:has(iframe),
.beitrag__inhalt > p:has(img),
.beitrag__inhalt > p:has(video),
.beitrag__inhalt > p:has(audio),
.beitrag__inhalt > p:has(embed),
.beitrag__inhalt > p:has(object),
.beitrag__inhalt > p:has(canvas),
.beitrag__inhalt > div:has(iframe),
.beitrag__inhalt > div:has(img) { max-width: none; }

/* Einbettungen stehen auf der Textgrundlinie und reissen sonst eine
   Luecke von einer Zeilenhoehe zwischen zwei Reihen auf. */
.beitrag__inhalt iframe,
.beitrag__inhalt embed,
.beitrag__inhalt object,
.beitrag__inhalt video { vertical-align: top; }

/* Fest breite Einbettungen (Bandcamp, Soundcloud, YouTube) duerfen nie
   ueber den Rand laufen; die Breitenangabe im Markup wird gedeckelt. */
.beitrag__inhalt iframe,
.beitrag__inhalt embed,
.beitrag__inhalt object,
.beitrag__inhalt video {
	max-width: 100%;
}

/* Reihen aus fest breiten Kacheln brechen um, statt zu ueberlaufen. */
.beitrag__inhalt .wp-block-columns { flex-wrap: wrap; }
.beitrag__inhalt > *:last-child { margin-bottom: 0; }
.beitrag__inhalt a { color: var(--blau); }
.beitrag__fuss { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.beitrag__bild { margin: 0 0 var(--s5); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.beitrag__bild img { display: block; width: 100%; }

/* Vollbild-Seitenvorlage */
.vollbild .beitrag__inhalt,
.vollbild .beitrag__inhalt > * { max-width: none; }

/* Blattnavigation */
.blaettern { margin-top: var(--s6); }
.blaettern .nav-links { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }

.blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--r1);
	color: var(--t1);
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: var(--fz-label);
}

.blaettern .page-numbers:hover { border-color: var(--amber); color: var(--amber); }
.blaettern .page-numbers.current { border-color: var(--cyan); color: var(--cyan); background: var(--wellDeep); }

.beitrag-navi { margin-top: var(--s6); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.beitrag-navi a { display: block; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r2); text-decoration: none; color: var(--t1); background: var(--bg1); }
.beitrag-navi a:hover { border-color: var(--line3); color: var(--ink); }
.beitrag-navi .nav-previous a::before { content: "\2190 "; color: var(--dim); }
.beitrag-navi .nav-next { text-align: right; }
.beitrag-navi .nav-next a::after { content: " \2192"; color: var(--dim); }

/* Kommentare */
.kommentare { margin-top: var(--s6); }
.kommentare__liste { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.kommentare__liste ol { list-style: none; padding-left: var(--s5); }
.kommentar { margin-bottom: var(--s3); }
.kommentar .comment-body { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); }
.kommentar .comment-meta { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-family: var(--font-mono); font-size: var(--fz-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.kommentar .avatar { border-radius: 50%; }
.kommentar .fn { color: var(--ink); font-style: normal; }
.kommentar .reply { font-size: var(--fz-micro); }
.comment-respond { background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s5); }
.comment-form > p { margin-bottom: var(--s3); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: var(--s2); }
.comment-form input[type="checkbox"] { width: auto; min-height: 0; }
.comment-form .comment-form-cookies-consent label { margin: 0; }

/* Suchformular */
.suche { display: flex; gap: var(--s2); align-items: stretch; }
.suche input[type="search"] { flex: 1; }
.suche .knopf { white-space: nowrap; }

/* Bereichsleisten */
.seiten-kopf {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin: 0 0 var(--s5);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--hairline);
}

.seiten-kopf__marke {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--amber);
}

.seiten-kopf__titel { margin: 0; }
.seiten-kopf__unter { margin: 0; color: var(--t2); max-width: var(--lese); }

.seiten-kopf__zahl {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dim);
}

.bereich-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); }
.bereich-kopf__titel { margin: 0; }
.bereich-kopf__zahl { font-family: var(--font-mono); font-size: var(--fz-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.hinweis { border: 1px solid var(--line); border-left: 2px solid var(--warn); border-radius: var(--r2); padding: var(--s4) var(--s5); background: var(--bg1); }

/* =========================================================
   7) WORDPRESS-KLASSEN
   ========================================================= */
.alignleft { float: left; margin: 0 var(--s5) var(--s3) 0; }
.alignright { float: right; margin: 0 0 var(--s3) var(--s5); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { margin-bottom: var(--s4); }

.beitrag__inhalt .alignwide {
	max-width: min(1440px, 94vw);
	margin-left: 50%;
	transform: translateX(-50%);
}

.beitrag__inhalt .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption {
	font-size: var(--fz-label);
	color: var(--dim);
	font-family: var(--font-mono);
	letter-spacing: .06em;
	margin-top: var(--s2);
	text-align: left;
}

.eintrag--fest { border-color: var(--amber); }
.eintrag--fest .eintrag__koerper::before {
	content: "\25C6 " attr(data-hinweis);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--amber);
}
.bypostauthor > .comment-body { border-color: var(--line3); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2); margin-bottom: var(--s4); }
.gallery-item { margin: 0; }
.gallery-icon img { display: block; width: 100%; border-radius: var(--r1); }

.wp-block-separator { border-top: 1px solid var(--line); }
.wp-block-pullquote { border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber); padding: var(--s5) 0; }
.wp-block-table td, .wp-block-table th { border-color: var(--line); }
.wp-block-code { background: var(--wellDeep); border: 1px solid var(--wellLine); border-radius: var(--r2); padding: var(--s4); }
.wp-block-quote { border-left: 2px solid var(--amber); padding-left: var(--s4); }
.wp-block-button__link { border-radius: var(--r1); }
.wp-block-search .wp-block-search__input { background: var(--wellDeep); border: 1px solid var(--wellLine); color: var(--ink); }

/* =========================================================
   8) FUSS
   ========================================================= */
.fuss {
	border-top: 1px solid var(--line);
	background: linear-gradient(180deg, var(--bg1), var(--bg0));
	margin-top: var(--s6);
	padding: var(--s6) 0 var(--s5);
}

.fuss__spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--s5);
	margin-bottom: var(--s5);
}

.fuss .widget { font-size: var(--fz-read-s); }
.fuss .widget-title,
.widget-title {
	font-family: var(--font-mono);
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--amber);
	margin: 0 0 var(--s3);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 3px 0; border-bottom: 1px solid var(--hairline); }
.widget a { color: var(--t1); text-decoration: none; }
.widget a:hover { color: var(--cyan); }

.fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--s4);
	border-top: 1px solid var(--hairline);
	font-family: var(--font-mono);
	font-size: var(--fz-micro);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--dim);
}

.fuss__zeile a { color: var(--dim); text-decoration: none; }
.fuss__zeile a:hover { color: var(--amber); }
.fuss__sig { color: var(--wellTxt); }

/* =========================================================
   9) HANDY — ausschliesslich <= 680px
   ========================================================= */
@media (max-width: 680px) {
	:root {
		--fz-read: 16px;
		--buehne-max: 100%;
		--buehne-pad: var(--s3);
	}

	.kopf__zeile { gap: var(--s2); padding: var(--s2) var(--s3); }
	.marke { width: 100%; }

	.navi-schalter {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		min-width: 52px;
		order: 3;
	}

	.werkzeuge { order: 4; margin-left: auto; gap: var(--s2); }
	.werkzeuge .pille { height: 44px; min-width: 52px; }
	.schale-wahl { height: 44px; min-height: 44px; }

	.navi { order: 9; width: 100%; display: none; }
	.navi.offen { display: block; }
	.navi ul { flex-direction: column; align-items: stretch; gap: 0; }
	.navi a { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--hairline); border-radius: 0; }
	.navi ul ul { position: static; display: flex; border: 0; padding: 0 0 0 var(--s4); background: none; }

	.haupt-bild__bild { height: var(--bild-h-mob, clamp(180px, 52vw, 300px)); }
	.haupt-bild__text { padding: var(--s3); position: static; max-width: 100%; margin-top: -60px; background: linear-gradient(180deg, transparent, var(--bg0)); }
	.haupt-bild__text { background: linear-gradient(180deg, transparent 0, #07090e 55%); }
	.haupt-bild__schleier { background: linear-gradient(180deg, rgba(3, 5, 9, calc(var(--schleier, .62) * .35)), rgba(3, 5, 9, calc(var(--schleier, .62) * 1.2))); }
	.zustand { padding: var(--s2) var(--s3); gap: var(--s2); }

	.haupt { padding: var(--s5) 0; }
	.ansicht-raster .liste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
	.ansicht-raster .eintrag__koerper { padding: var(--s3); }
	.ansicht-raster .eintrag__titel { font-size: var(--fz-lead); }
	.ansicht-raster .eintrag__auszug { display: none; }
	.ansicht-vollbild .eintrag__koerper { padding: var(--s4) var(--s3); }
	.beitrag__inhalt .alignwide,
	.beitrag__inhalt .alignfull { max-width: 100%; width: 100%; margin-left: 0; transform: none; }

	.knopf, button, input[type="submit"], .wp-block-button__link { min-height: 52px; }
	input, textarea, select { min-height: 44px; font-size: 16px; }
	.blaettern .page-numbers { min-width: 44px; height: 44px; }
	.panel { padding: var(--s3); }
	.fuss__spalten { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 380px) {
	.ansicht-raster .liste { grid-template-columns: 1fr; }
}

/* =========================================================
   10) BEWEGUNG / DRUCK
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
	.kopf, .fuss, .werkzeuge, .blaettern, .haupt-bild__schleier { display: none !important; }
	body { background: #fff; color: #000; }
	.beitrag__inhalt { color: #000; }
}