/* X-MAGAZIN — gemeinsames Layout, 0,1%-Fassung III (Session 045, 11.08.2026)
   GESTALTUNGSPRINZIP (Ziusudra): Der Hintergrund ist EIN GESCHLOSSENES
   KUNSTWERK; die verschiedenen Bereiche werden in dieses Prinzip
   integriert — sie sind Zonen EINES Bildes, nicht drei Kästen.
   Umsetzung: eine einzige, festliegende Bildebene über die GANZE Fläche
   (Fluchtpunkt hinter dem Logo, durchlaufender Schwung, Lichtfeld).
   Kopf, Leiste und Inhaltsfeld sind durchscheinend — das Bild läuft
   ohne Bruch durch alle drei. Frame-Prinzip (2004): oben fest, links
   fest und je Rubrik austauschbar, nur der Inhalt scrollt.
   Je Rubrik wechselt die FARBE DES GANZEN BILDES. */

:root {
  --hausblau: #2E6B97;
  --gold:     #DFB13C;
  --feld:     #14132e;          /* Grundton des Bildes, je Rubrik anders */
  --tief:     #07061a;          /* Tiefe / Fluchtpunkt-Umfeld */
  --marke:    #DFB13C;          /* Leitfarbe der Rubrik */
}

/* ---- DAS BILD IN VIER STIMMUNGEN ---- */
body.feld-start      { --feld:#14132e; --tief:#07061a; --marke:#DFB13C; }
body.feld-grundlagen { --feld:#2B2352; --tief:#120d29; --marke:#DFB13C; }
body.feld-natur      { --feld:#0A1B33; --tief:#030a18; --marke:#55C0E8; }
body.feld-geistes    { --feld:#5A1F14; --tief:#250806; --marke:#E8A05A; }
body.feld-angewandt  { --feld:#123028; --tief:#04140f; --marke:#6FD3A6; }
body.feld-impressum  { --feld:#2E2A66; --tief:#0e0b24; --marke:#C9C3E8; }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: #000; color: #c8c8c8;
}

/* ================= DAS GESCHLOSSENE BILD =================
   Eine Ebene, ganze Fläche, hinter allem — Fluchtpunkt liegt hinter
   dem Logo (oben links), von dort strahlen die Linien in alle Zonen. */
/* SCHWARZ. Die Bilder laufen am Rand ins Schwarze aus — auf schwarzem
   Grund verschwindet jede Kante, und Kopf, Leiste und Feld werden
   optisch EIN Bild. (Die früheren Licht- und Bogenebenen sind
   deshalb ausgebaut.) */
body::before { content: none; }
body::after  { content: none; }

/* ---- ZONE 1 — KOPF: der ConcertNews-Grund, Schriftzug entfernt ----
   1100 x 120, linksbündig; rechts davon läuft Schwarz weiter. */
header.xm-kopf {
  position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 20;
  background: #000 url('xm_kopf_leer.png') no-repeat 0 0;
  overflow: visible;
}
/* Das X-Magazin-Logo sitzt dort, wo der alte Schriftzug stand
   (dessen Kasten: x 120–525, y 11–77). */
header.xm-kopf img.logo {
  display: block; position: absolute; left: 120px; top: 21px; height: 47px;
}                                   /* 2/3 von 70 = 46,7 → 47 */

/* Die waagrechte Linkzeile ist entfernt — über dem Bild steht kein
   eigener Text. Die Führung in die Bereiche kommt später über die
   Tasten im Bild selbst. */
nav.xm-oben { display: none; }
nav.xm-oben a {
  color: #d5d0ec; text-decoration: none; font-size: 11.5px;
  letter-spacing: .5px; white-space: nowrap;
}
nav.xm-oben a::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--marke); margin-right: 7px;
}
nav.xm-oben a:hover { color: var(--marke); }
nav.xm-oben a.aktiv { color: var(--marke); font-weight: bold; }

/* ---- ZONE 2 — LINKE LEISTE: der originale ConcertNews-Block ----
   121 x 680, beginnt direkt unter dem Kopf (y = 120), damit die Form
   ohne Bruch weiterläuft; darunter läuft Schwarz weiter.
   Die eigenen Einträge sind in diesem Schritt AUS — erst soll der
   alte Aufbau stehen (Tasten News · Dates · Search · Archiv · Print ·
   Login noch unverlinkt, Verlinkung ist der nächste Schritt). */
nav.xm-links {
  position: fixed; top: 120px; left: 0; bottom: 0; width: 121px; z-index: 10;
  background: #000 url('_leiste.jpg') no-repeat 0 0;
  padding: 0; overflow: hidden;
}
nav.xm-links > * { display: none; }
nav.xm-links h2 {
  font-family: "Arial Black", Arial, sans-serif; font-size: 13px;
  color: var(--marke); margin: 0 0 16px; letter-spacing: 3px;
  text-transform: uppercase;
}
nav.xm-links a {
  display: block; color: #ece9f5; text-decoration: none;
  font-size: 14px; padding: 6px 0; margin-bottom: 4px;
}
nav.xm-links a::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  background: var(--marke); margin-right: 11px;
}
nav.xm-links a:hover, nav.xm-links a.aktiv { color: var(--marke); text-decoration: underline; }
nav.xm-links .geist {
  position: absolute; right: 2px; top: 60px;
  writing-mode: vertical-rl; font-family: "Arial Black", Arial, sans-serif;
  font-size: 30px; letter-spacing: 4px; color: #fff; opacity: .06;
  pointer-events: none; user-select: none;
}
nav.xm-links .zurueck { margin-top: 30px; font-size: 12px; color: #9a94c2; }
nav.xm-links .zurueck a { display: inline; font-size: 12px; color: #9a94c2; padding: 0; }
nav.xm-links .zurueck a::before { display: none; }
nav.xm-links .zurueck a:hover { color: var(--marke); }

/* ---- ZONE 3 — INHALT: das einzige, was scrollt; kein eigener Grund ---- */
main.xm-inhalt {
  position: relative; z-index: 5;
  margin: 120px 0 0 121px; padding: 0;
  min-height: calc(100% - 120px);
  background: #000;
}

/* ---- DIE TITELSEITE: ein Blatt im DIN-A4-Verhältnis (1 : 1,4142) ----
   Wie die Titelseite eines Printmagazins: eine Seite, keine Bahn.
   Höhe = sichtbarer Bereich, Breite folgt dem Seitenverhältnis. */
.titelseite {
  width: 700px;                  /* rechte Kante bei x = 821, also knapp
                                    rechts neben der Taste „Team" (bis 802) */
  height: 990px;                 /* 700 × 1,4142 — DIN-A4-Verhältnis */
  position: relative; overflow: hidden;
  background: #d9d9d9;          /* ARBEITSFARBE: hellgrau, damit das Blatt
                                   während des Gestaltens sichtbar ist.
                                   Am Ende auf transparent bzw. auf die
                                   gestaltete Titelseite umstellen. */
}
.titelseite .marke   { position:absolute; left:6%; top:4%; width:62%; }
.titelseite .ausgabe { position:absolute; right:5%; top:5.5%;
  font-size:11px; letter-spacing:2px; color:#DFB13C; text-align:right;
  line-height:1.6; text-transform:uppercase; }
.titelseite .bildfeld {
  position:absolute; left:0; right:0; top:22%; bottom:16%;
  background:
    radial-gradient(60% 55% at 30% 25%, rgba(255,255,255,.10) 0%, transparent 60%),
    linear-gradient(160deg, #1b1a3d 0%, #2B2352 55%, #0A1B33 100%);
}
.titelseite .platzhalter {
  position:absolute; left:8%; top:26%; width:60%;
  font-size:12px; line-height:1.7; color:#6f6a95; letter-spacing:1px;
}
.titelseite .zeilen { position:absolute; left:8%; right:8%; bottom:9%; }
.titelseite .zeilen h2 {
  font-family:"Arial Black", Arial, sans-serif; font-size:19px; color:#fff;
  margin:0 0 14px; letter-spacing:.5px;
}
.titelseite .zeilen p {
  margin:0 0 9px 0; padding-left:20px; position:relative;
  font-size:13.5px; color:#ece9f5; font-weight:bold;
}
.titelseite .zeilen p::before {
  content:""; position:absolute; left:0; top:4px;
  width:9px; height:9px; background:var(--gold);
}
.titelseite .zeilen span {
  display:block; font-weight:normal; font-size:12px; color:#b7b1d6;
  margin-top:2px;
}
.titelseite .fuss {
  position:absolute; left:0; right:0; bottom:0; height:22px;
  background:#DFB13C; color:#14132e; font-size:10.5px; letter-spacing:3px;
  display:flex; align-items:center; justify-content:center;
}
main.xm-inhalt h1 {
  font-family: "Arial Black", Arial, sans-serif;
  color: #fff; font-size: 27px; letter-spacing: 1px; margin: 0 0 6px;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
main.xm-inhalt h1 em { color: var(--marke); font-style: italic; }
main.xm-inhalt .unterzeile {
  color: var(--marke); font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 30px;
}
main.xm-inhalt article {
  max-width: 800px; line-height: 1.62; font-size: 14.5px;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
main.xm-inhalt h3 {
  font-family: "Arial Black", Arial, sans-serif; font-size: 15px;
  color: var(--marke); margin: 28px 0 6px; letter-spacing: .5px;
}
main.xm-inhalt .gold { color: var(--marke); font-weight: bold; }
main.xm-inhalt a { color: var(--marke); }

/* ---- DIE HEFTÜBERSICHT: Beiträge, dicht und lesbar ---- */
.uebersicht { max-width: 860px; margin-top: 6px; }
.beitrag {
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.beitrag .bereich {
  font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.beitrag h2 {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 19px; margin: 0 0 5px; letter-spacing: .3px;
}
.beitrag h2 a { color: #fff; text-decoration: none; }
.beitrag h2 a:hover { text-decoration: underline; }
.beitrag p { margin: 0; font-size: 14px; line-height: 1.55; color: #d6d1ea; }
.beitrag .zeile { font-size: 12.5px; color: #9a94c2; margin-top: 6px; }

/* Bereichsfarben für die Marken in der Übersicht */
.b-grundlagen { color: #DFB13C; }
.b-natur      { color: #55C0E8; }
.b-geistes    { color: #E8A05A; }
.b-angewandt  { color: #6FD3A6; }

/* ---- DAS X ALS WEGWEISER — gehört in die Grundlagen ---- */
.x-karte { max-width: 560px; margin: 10px 0 26px; display: block; }
.x-karte text {
  font-family: "Arial Black", Arial, sans-serif;
  fill: #ece9f5; font-size: 21px;
}
.x-karte a:hover text { fill: var(--gold); }
.x-karte .legende { font-family: Arial, sans-serif; font-size: 13px; fill: #9a94c2; }