/* ─── ROOT & THEME VARIABLES ─── */
:root {
  --bg: #050b18;
  --media: #121212;
  --surface: #0b1628;
  --surface2: #101f38;
  --surface3: #162540;
  --border: #1c2f4a;
  --border2: #243d5e;
  --text: #ccd8e8;
  --text-muted: #24c1c1;
  --text-dim: #2e4a68;
  --cyan: #0080ff;
  --cyan2: #00a8d0;
  --cyan3: #005878;
  --orange: #ff7c35;
  --orange2: #c05a20;
  --orange3: #ff4500; 
  --green: #3dffb8;
  --green2: #22a878;
  --green3: #009900;
  --red: #ff4560;
  --yellow: #ffdf50;
  --yellow2:#ffff00;
  --purple: #b080ff;
  --terminal-code: #44F626;


  --font-head: 'JetBrains Mono', sans-serif;
  --font-body: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  
  --r: 10px;
  --r2: 6px;

  /* Typografie für Docs */
  --font-size-base: 16px;
  --h1: calc(var(--font-size-base) * 2.6);
  --h2: calc(var(--font-size-base) * 2.0);
  --h3: calc(var(--font-size-base) * 1.4);
  --h4: calc(var(--font-size-base) * 1.2);
  --font-mono-size: calc(var(--font-size-base) * 0.88);
  --a-txt-link: calc(var(--font-size-base) * 0.98);
  

/* Media Player */
	--plyr-color-main: var(--orange3);  
/* Rundung der Ecken */
	--plyr-control-radius: 8px;
	--plyr-audio-controls-background: var(--media);
	--plyr-video-controls-background: var(--media); 
}

/* 1. Der Variable Font für normales Schriftbild (alle Gewichte) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://brain-pain.de/fonts/jetbrainsmono/JetBrainsMono-wght.woff2') format('woff2');
    font-weight: 100 800; /* Definiert die gesamte Bandbreite von Thin bis ExtraBold */
    font-style: normal;
    font-display: swap;
}

/* 2. Der Variable Font für Kursiv (alle Gewichte) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('https://brain-pain.de/fonts/jetbrainsmono/JetBrainsMono-Italic-wght.woff2') format('woff2');
    font-weight: 100 800;
    font-style: italic;
    font-display: swap;
}

body[data-theme="light"] {
  --bg: #f3f7fc;
  --surface: #ffffff;
  --surface2: #edf3fa;
  --surface3: #dfe8f2;
  --border: #d5e1ee;
  --border2: #c1d3e4;
  --text: #000000;
  --text-muted: #222222;
  --text-dim: #333333;
  --cyan3: #cfeefe;
}

/* ─── RESET & BODY ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.85;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,216,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,216,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="light"]::before {
  background-image:
    linear-gradient(rgba(0, 120, 160, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 120, 160, 0.04) 1px, transparent 1px);
}

body[data-theme="light"] .header-text h1,
body[data-theme="light"] .doc-header h1 { color: #0c1b2f; }
body[data-theme="light"] .drop-btn:hover { color: #0c1b2f; }

/* ─── LAYOUT (90% Desktop, 95% Mobile) ─── */
.page, .doc-page {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 0 40px;
  width: 90%;
  max-width: 1600px;
}

@media (max-width: 1199px) {
  .page, .doc-page { width: 95%; }
}

/* ─── HEADER (Sticky & Fixiert) ─── */
.header, .doc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
  box-shadow: 0 10px 15px -10px rgba(0,0,0,0.3);
}

body[data-theme="light"] .header,
body[data-theme="light"] .doc-header {
  background: var(--bg);
  box-shadow: 0 10px 15px -10px rgba(0,120,160,0.1);
}

/* Verhindert Transparenz beim Scrollen durch den Grid-Background */
.header::before, .doc-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: -1;
}

.header-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--cyan3), var(--cyan2));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0,216,255,0.25);
}

.header-icon svg { width: 28px; height: 28px; }

.header-text h1 {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  line-height: 1.2;
}
.header-text h1 span { color: var(--cyan); }
.header-text p { font-size: 15px; color: var(--text-muted); margin-top: 3px; font-weight: 400; }

.header-badge {
  margin-left: auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 1px;
}

.header-tools { display: flex; align-items: center; gap: 10px; }

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
  width: 36px; height: 36px;
  font-size: 15px;
}
.theme-toggle:hover { border-color: var(--cyan2); color: var(--cyan); }

/* ─── FOOTER ─── */
.footer {
  text-align: center;
  padding: 40px 20px;
  color: var(--orange);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 60px;
  line-height: 1.6;
}

/* ─── NAV ─── */
.nav-h2 { color: var(--orange); text-decoration: none; font-size: var(--h2); margin-top: 2rem;}
.nav-p { color: var(--text-muted); margin-bottom: 1rem;}
.main-nav {
  display: flex; align-items: left; justify-content: left; gap: 12px;
  padding: 0 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 32px; flex-wrap: wrap;
}
.nav-btn {
  display: inline-flex; align-items: left; gap: 8px; padding: 10px 22px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 999px;
  color: var(--text-muted); font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 0.4px; text-decoration: none; transition: all 0.2s ease; cursor: pointer;
}
.nav-btn:hover { background: var(--surface2); border-color: var(--cyan2); color: var(--cyan); }
.nav-btn--active {
  background: linear-gradient(135deg, var(--cyan3), rgba(0, 130, 180, 0.35));
  border-color: var(--cyan2); color: var(--orange); box-shadow: 0 0 14px rgba(0, 128, 255, 0.15);
}


a.txt-link,
a.txt-link-int {
    color: var(--green3);
    font-weight: 600;
    text-decoration: none; 
    font-size: var(--a-txt-link);
    display: inline-block; 
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

a.txt-link:hover,
a.txt-link-int:hover {
    color: var(--terminal-code);
    font-weight: 680;
    transition: color 0.3s ease;
}


a.txt-link::before,
a.txt-link-int::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 8px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
}

a.txt-link::before {background-image: url("../media/pics/txt-link-before-extern.svg");}
a.txt-link-int::before {background-image: url("../media/pics/txt-link-before-intern.svg");}


a.wave {
    background-image: linear-gradient(to right, var(--green3), transparent);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1.4px;
    transition: background-size 0.5s;
    display: inline-block;
    text-decoration: none;
}

a.wave:hover {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cstyle type='text/css'%3E.ekg{animation:shift .8s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff4500' stroke-width='1' class='ekg' d='M0,7 L10,7 L12,1 L15,9 L18,7 L40,7'/%3E%3C/svg%3E");
    
    background-size: auto 10px; /* Höhe etwas erhöht für die Zacken */
    background-position: 0 100%;
    background-repeat: repeat-x;
}

mark,
.intro-section li > strong { background: linear-gradient(135deg, var(--orange3), rgba(255, 255, 204, 0.9)); color: black; border-radius: 3px; padding: 1px 5px; font-weight: 800; }
 
/* ─── INTRO ─── */
.intro-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 32px; margin-bottom: 28px; position: relative; overflow: hidden;
}
.intro-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan2), transparent);
}
.intro-section h2 { font-family: var(--font-head); font-size: var(--h2); font-weight: 700; color: var(--orange); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.intro-section h2::before { content: ''; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--cyan); }
.intro-section p { color: var(--text); font-size: 16px; line-height: 2.2; max-width: 900px; }
.intro-section strong { color: var(--cyan); font-weight: 600; }
.intro-terms { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.intro-term { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 14px; font-size: 16px; }
.intro-term strong { font-family: var(--font-mono); color: var(--cyan); font-weight: 500; display: block; }
.intro-term span { color: var(--text-muted); font-size: 14px; }
.intro-section > h3 { margin: 3rem 0 1.4rem 0;}
.intro-section > h3::before { content: ''; position: absolute; left: 0; color: var(--orange); font-size: 12px; top: 6px; }
.intro-section > h3::after { content: ''; position: absolute; left: 0; color: var(--orange); font-size: 12px; top: 6px; }

/* ─── UPLOAD ZONE ─── */
.upload-section { margin-bottom: 28px; }
.upload-section h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--orange); letter-spacing: 1.5px; text-transform: uppercase; margin: 3rem 0 1.6rem 0; }
#dropZone {
  border: 2px dashed var(--border2); border-radius: var(--r); background: var(--surface);
  padding: 52px 40px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
}
#dropZone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,216,255,0.03) 0%, transparent 70%); transition: opacity 0.3s; }
#dropZone:hover, #dropZone.drag-over { border-color: var(--cyan2); background: var(--surface2); }
#dropZone:hover::before, #dropZone.drag-over::before { background: radial-gradient(ellipse at center, rgba(0,216,255,0.08) 0%, transparent 70%); }
#dropZone.drag-over { border-color: var(--cyan); }
.drop-icon { width: 56px; height: 56px; margin: 0 auto 20px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
#dropZone:hover .drop-icon { background: var(--cyan3); border-color: var(--cyan2); }
.drop-icon svg { width: 26px; height: 26px; color: var(--cyan); }
.drop-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.drop-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.drop-btn {
  display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--cyan3), rgba(0,130,180,0.4));
  border: 1px solid var(--cyan2); color: var(--cyan); padding: 10px 22px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.drop-btn:hover { background: linear-gradient(135deg, var(--cyan2), var(--cyan3)); color: #fff; }
#fileInput { display: none; }

/* ─── TYPOGRAPHY & DOCS (XRF) ─── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.6; }
.doc-page h2 { font-size: var(--h2); color: #fff; margin: 3.5rem 0 1.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); position: relative; }
.doc-page h2::before { content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 2px; background: var(--cyan); }
.doc-page h3 { font-size: var(--h3); color: var(--cyan); margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.doc-page h3::before { content: ''; width: 4px; height: 16px; background: var(--orange); border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 8px rgba(0,128,255,0.4); }
.doc-page h4 { font-size: var(--h4); color: var(--orange); margin: 2rem 0 0.8rem; }
.doc-page p { color: var(--text); margin: 0.9rem 0; }
.doc-page strong { color: var(--cyan); font-weight: 600; }
.doc-page mark { background: var(--orange); color: black; border-radius: 3px; padding: 1px 5px; font-weight: 700; }
.doc-page a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(0,128,255,0.35); transition: border-color 0.2s, color 0.2s; }
.doc-page a:hover { color: #fff; border-color: var(--cyan); }

/* Code & Pre */
pre { background: black; border: 1px solid var(--orange); border-radius: var(--r); padding: 20px 24px; margin: 1.5rem 0; overflow-x: auto; position: relative; }
pre::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border2), transparent); }
pre code { font-family: var(--font-mono); font-size: var(--font-mono-size); line-height: 1.7; color: var(--terminal-code); }
span.token.punctuation { color: #8aaccc; }
span.token.string { color: var(--terminal-code); }
span.token.number { color: var(--green); }
span.token.boolean { color: var(--cyan); }
span.token.keyword { color: var(--purple); }
span.token.comment { color: var(--text-dim); font-style: italic; }
span.token.function { color: var(--green); }
code:not(pre code) { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface2); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 7px; color: var(--cyan); }

/* Lists & Blockquotes */
ul, ol { padding-left: 0; margin: 1rem 0 1.4rem; list-style: none; }
ul > li, ol > li { color: var(--text); padding: 4px 0 4px 24px; position: relative; }
ul > li::before { content: '▸'; position: absolute; left: 0; color: var(--orange); font-size: 12px; top: 6px; }
blockquote { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 0 var(--r2) var(--r2) 0; padding: 20px 24px; margin: 2.5rem 0; position: relative; overflow: hidden; }
blockquote::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--cyan2), transparent); }

/* ─── UI COMPONENTS (Cards, Tabs, Buttons) ─── */
.download-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.dl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; transition: all 0.2s; text-decoration: none; }
.dl-btn-pdf { background: rgba(176,128,255,0.1); border: 1px solid rgba(176,128,255,0.4); color: var(--purple); }
.dl-btn-pdf:hover { background: rgba(176,128,255,0.2); border-color: var(--purple); }
.dl-btn-txt { background: rgba(0,216,255,0.05); border: 1px solid var(--border2); color: var(--cyan); }
.dl-btn-txt:hover { background: rgba(0,216,255,0.12); border-color: var(--cyan2); }
.dl-btn svg { width: 16px; height: 16px; }

#results { display: none; }
#results.visible { display: block; animation: fadeIn 0.5s ease; }

.study-tabs { display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
.study-tab { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font-size: 13px; color: var(--text-muted); transition: all 0.2s; font-family: var(--font-body); font-weight: 500; }
.study-tab:hover { border-color: var(--border2); color: var(--text); }
.study-tab.active { border-color: var(--cyan2); color: var(--cyan); background: var(--surface2); }
.study-tab-dot { width: 8px; height: 8px; border-radius: 50%; }

.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; position: relative; overflow: hidden; transition: border-color 0.2s; }
.card:hover { border-color: var(--border2); }
.card-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.card-label-dot { width: 6px; height: 6px; border-radius: 50%; }
.card-rows { display: flex; flex-direction: column; gap: 6px; }
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-row-key { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.card-row-value { font-family: var(--font-mono); font-size: 12px; color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }

/* File chips */
.file-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.file-chip { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 6px 12px 6px 10px; font-size: 12px; color: var(--text); animation: fadeIn 0.3s ease; }
.file-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.file-chip-remove { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px; transition: color 0.2s; }
.file-chip-remove:hover { color: var(--red); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── TABLES ─── */
.tags-section, .events-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.tags-header, .events-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.tags-header h3, .events-header h3 { font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }

.tags-table-wrap, .events-table-wrap { overflow-x: auto; }
.tags-table, .events-table { width: 100%; border-collapse: collapse; }
.tags-table th, 
.events-table th { 
	padding: 10px 16px; 
	text-align: left; 
	font-size: 10px; 
	font-weight: 700; 
	letter-spacing: 1.5px; 
	text-transform: uppercase; 
	color: var(--green); 
	background: var(--surface2); 
	border-bottom: 1px solid var(--border); 
	white-space: nowrap; }
.tags-table th { 
	position: sticky; 
	top: 0; 
	z-index: 2; 
	}
.tags-table td, 
.events-table td { 
	padding: 10px 16px; 
	font-size: 12px; 
	border-bottom: 1px solid var(--border); 
	vertical-align: middle; 
	}
.tags-table tbody tr:hover, .events-table tbody tr:hover { background: var(--surface2); }
.tags-table tbody tr:last-child td, .events-table tbody tr:last-child td { border-bottom: none; }
.tags-table td:first-child { font-family: var(--font-mono); color: var(--cyan); font-size: 11px; }

/* ─── LANDING PAGE STYLES ─── */
.landing-intro { text-align: center; margin: 60px auto 40px; max-width: 800px; }
.landing-intro h2 { color: var(--cyan); font-size: 2.2rem; margin-bottom: 20px; font-family: var(--font-head); font-weight: 800; }
.landing-intro p { color: var(--text); font-size: 1.1rem; line-height: 1.8; text-align: left;}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 6rem 0 8rem;
}
.landing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 40px 24px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.landing-card:hover {
  background: var(--surface2);
  border-color: var(--orange);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 128, 255, 0.1);
}
.landing-card-icon { margin-bottom: 20px; color: var(--cyan); width: 48px; height: 48px; }
.landing-card h3 { color: var(--orange); margin-bottom: 12px; font-family: var(--font-head); font-size: 1.4rem; }
.landing-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

@media (max-width: 900px) {
  .landing-grid { grid-template-columns: 1fr; }
}

/* ─── UTILITIES & OTHERS ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan3); }

/* Restliche Modulspezifische Klassen (zB Charts, Dose Bars) */
.dose-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; margin-bottom: 24px; position: relative; overflow: hidden; }
.dose-summary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--cyan2), transparent); }
.dose-summary-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; }
.dose-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.dose-metric { display: flex; flex-direction: column; gap: 4px; }
.dose-metric-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.dose-metric-value { font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1.1; }
.dose-metric-unit { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.dose-cyan { color: var(--cyan); } .dose-orange { color: var(--orange); } .dose-green { color: var(--green); } .dose-purple { color: var(--purple); } .dose-yellow { color: var(--yellow); }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.chart-card-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.chart-card-title-accent { width: 3px; height: 14px; background: var(--cyan); border-radius: 2px; }
.chart-card-title-accent.orange { background: var(--orange); }
.chart-card-title-accent.green { background: var(--green); }
.chart-wrap { position: relative; width: 100%; }
.chart-full { grid-column: 1 / -1; }

.compare-view { display: none; }
.compare-view.visible { display: block; animation: fadeIn 0.4s ease; }
.compare-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.compare-header { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.compare-header h3 { font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.compare-chart-wrap { padding: 24px; }

.viewer-grid { display: grid; grid-template-columns: auto 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
@media (max-width: 1000px) { .viewer-grid { grid-template-columns: 1fr; } }
.viewer-image-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; min-width: 300px; max-width: 500px; }
@media (max-width: 1000px) { .viewer-image-panel { max-width: 100%; } }
.image-panel-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.image-panel-title { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.image-meta-badge { font-family: var(--font-mono); font-size: 10px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; padding: 3px 10px; color: var(--cyan); }
.image-canvas-wrap { padding: 16px; display: flex; align-items: center; justify-content: center; background: #000; min-height: 200px; position: relative; }

/* Utilities */
.section-divider { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.section-divider h2 { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }



.orange-left > h2,
h3.orange-left {
	text-align: left;
	margin: 2.6rem 0 1.2rem;
	color: var(--orange);
	font-size: var(--h3);
}

.orange-left > h2 {font-size: var(--h2);}

.orange-left > p,
.orange-left h3 {
	margin-top: 1.6rem;
}

.orange-left h3 {color: var(--cyan);}

.orange-left h3::before,
h3.orange-left.podcast::before,
h3.orange-left.video::before {
	content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: 8px;
    vertical-align: middle;
	background-size: contain;
    background-repeat: no-repeat;
}

.orange-left h3::before {background-image: url("../media/pics/time.svg");}
h3.orange-left.podcast::before {background-image: url("../media/pics/podcast.svg");}
h3.orange-left.video::before {background-image: url("../media/pics/play.svg");}

 
p.info::before,
p.media > strong::before	{
	content: "";
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
	margin-right: 6px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
}

p.info::before {background-image: url("../media/pics/info.svg");}
p.media > strong::before	{background-image: url("../media/pics/time.svg");}


p.media > strong {
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--orange3);
	border-radius: var(--r);
	
}

div.audio > p + p,
div.video > p + p { 
	margin-top: 1.8rem;
}

p.center  {
	text-align: center;
	font-size: var(--h4);
	margin: 5rem 8rem;
}

.audio .note,
.video .note,
.note {
	color: var(--text-muted);
	font-size: var(--font-mono-size);
	margin: 2rem 0;
	padding-left: 1.4rem;
}


.orange-left strong,
.page strong {
	color: var(--cyan); font-weight: 600;
}

.li-links li {
	margin: 2rem 0;
}

.download-button {
	margin: 4rem 0;
}

em {color: var(--text-muted);}

/* Generelles Styling für beide Plyr-Container */
.plyr {
    margin: 2rem 0;
    border-radius: var(--r); /* Kann in :root angepasst werden */
    overflow: hidden; /* Sonst werden die Kanten vom Video angezeigt */
	border: 1px solid var(--orange3);
    
}

.plyr--audio,
.plyr--video {
	width: 100%;
	background: var(--media);
	margin: 2rem 0 4rem;
}

/* Spezifische Breite für den Audio-Player */
.plyr--audio {            
    max-width: 400px; /* Breite nach Wunsch anpassen */
	padding: 18px; 	
}

/* Spezifische Breite für den Video-Player */
.plyr--video { 
    max-width: 600px; /* Video nutzt die volle Breite, oder z.B. 800px eintragen */
	padding: 8px;
}

.plyr__controls__item.plyr__time--current.plyr__time {color: var(--orange); font-weight: 700; font-size: var(--h4);}
.plyr__controls__item.plyr__control {color: var(--orange);}
.plyr__control {color: var(--orange);}