/* =====================================================================
   style.css – Farben und Details des Layouts „Phosphor“
   (dunkler Grund, Phosphorgrün, Scanlines, Cursor; zentriertes Logo in
   Special Elite, Bereiche als Reiter darunter, Seitenleiste nur mit dem
   aktuellen Bereich). Das Grundgerüst steht in basis.css.
   Schriften: Space Grotesk (Titel), IBM Plex Sans (Text), JetBrains Mono (Code, Marken).
   ===================================================================== */
:root {
    --grund:        #0b0f0c;
    --grund-2:      #111813;
    --grund-3:      #0d1310;
    --text:         #d7e3da;
    --text-leise:   #8ea394;
    --linie:        #22312a;
    --akzent:       #4cf08a;
    --akzent-hell:  rgba(76, 240, 138, .12);
    --link:         #86f0b0;
    --markierung:   #3a4d12;
    --radius:       4px;
    --radius-gross: 6px;
    --schrift:      "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-titel: "Space Grotesk", "IBM Plex Sans", sans-serif;
    --mono:         "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    --inhalt-breite: 50rem;
    --leiste-breite: 17rem;
    --kopf-hoehe:   1rem;
    --hero-overlay: linear-gradient(to top, rgba(11, 15, 12, .96) 15%, rgba(11, 15, 12, .35) 70%, rgba(11, 15, 12, .2)),
                    linear-gradient(rgba(76, 240, 138, .1), rgba(76, 240, 138, .1));
    --hero-text:    #e6f5ea;
    color-scheme: dark;
}
body { background: var(--grund) radial-gradient(ellipse at top, rgba(76, 240, 138, .07), transparent 55%) no-repeat; }
::selection { background: var(--akzent); color: var(--grund); }

/* ---------- Masthead ---------- */
.iz-kopf {
    background: var(--grund-3);
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
    border-bottom: 1px solid var(--linie);
}
.iz-kopfzeile { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1.7rem 1.5rem 1rem; position: relative; }
.iz-logo { font-family: "Special Elite", Georgia, serif; font-size: 2.7rem; color: var(--text); letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.iz-logo:hover { text-decoration: none; }
.iz-logo .iz-z { color: var(--akzent); text-shadow: 0 0 16px rgba(76, 240, 138, .8), 0 0 2px rgba(76, 240, 138, .9); }
.iz-logo::after { content: "_"; color: var(--akzent); margin-left: .05em; animation: iz-blink 1.1s steps(1) infinite; }
@keyframes iz-blink { 50% { opacity: 0; } }
.iz-slogan { margin: .35rem 0 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.iz-kopfnav { display: flex; align-items: center; gap: 1rem; max-width: calc(var(--leiste-breite) + var(--inhalt-breite) + 6rem); margin: 0 auto; padding: 0 1.5rem; border-top: 1px solid var(--linie); }
.iz-hauptnav { display: flex; flex-wrap: nowrap; flex: 1; overflow-x: auto; scrollbar-width: none; }
.iz-hauptnav a { display: block; padding: .6rem .7rem; font-family: var(--schrift-titel); font-weight: 700; font-size: .88rem; white-space: nowrap; color: var(--text); border-bottom: 3px solid transparent; }
.iz-hauptnav a:hover { text-decoration: none; color: var(--akzent); }
.iz-hauptnav li.aktiv a { border-bottom-color: var(--akzent); color: var(--akzent); text-shadow: 0 0 10px rgba(76, 240, 138, .4); }
.iz-hauptnav-material a { color: var(--text-leise); }
.iz-kopfsuche { display: flex; align-items: center; gap: .4rem; font-family: var(--mono); }
.iz-kopfsuche::before { content: "/"; color: var(--akzent); font-weight: 700; }
.iz-kopfsuche input { width: 11rem; padding: .3rem .5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund); color: var(--text); font: inherit; font-size: .85rem; }
.iz-kopfsuche input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.iz-kopfsuche button { display: none; }
.iz-menueknopf { position: absolute; left: 1rem; top: 1.3rem; }
.iz-seitenleiste { top: 1rem; max-height: none; }

/* ---------- Navigation (Seitenleiste zeigt nur den Bereich) ---------- */
.iz-bereichsnav-titel { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); padding-bottom: .5rem; border-bottom: 1px solid var(--linie); }
.iz-bereichsnav-titel a { color: inherit; }
.iz-nav a:hover { background: var(--akzent-hell); }
.iz-nav li.aktiv > a { background: var(--akzent-hell); box-shadow: inset 2px 0 0 var(--akzent); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- Seitenkopf, Marken ---------- */
h1 { font-weight: 700; letter-spacing: -.02em; }
.iz-startkopf { font-family: "Special Elite", Georgia, serif; font-weight: 400; }
.iz-tag { border-color: var(--linie); color: var(--text-leise); }
.iz-tag-video { color: #ffb86b; border-color: rgba(255, 184, 107, .35); }
.iz-tag-folien { color: #8ec5ff; border-color: rgba(142, 197, 255, .35); }
.iz-tag-uebungen { color: var(--akzent); border-color: rgba(76, 240, 138, .4); }
.iz-tag-szenario { color: #c9a7ff; border-color: rgba(201, 167, 255, .4); }
.iz-tag-test { color: #ff8fa3; border-color: rgba(255, 143, 163, .4); }
.iz-chip-datum { background: var(--grund-2); }
/* Themen-Hashtags: eine Farbe je Gruppe (Themengebiet, Sprache, Werkzeug & Notation, Konzept) */
.iz-thema-gebiet   { color: var(--akzent); }
.iz-thema-sprache  { color: #ffd479; }
.iz-thema-werkzeug { color: #7fd8ff; }
.iz-thema-konzept  { color: #d5b3ff; }
.iz-thema-unbekannt { color: #ff8fa3; text-decoration: line-through; }   /* Tippfehler im Kopfblock fällt so auf */
.iz-themengruppe-gebiet .iz-themengruppe-titel   { border-bottom-color: rgba(76, 240, 138, .5); }
.iz-themengruppe-sprache .iz-themengruppe-titel  { border-bottom-color: rgba(255, 212, 121, .5); }
.iz-themengruppe-werkzeug .iz-themengruppe-titel { border-bottom-color: rgba(127, 216, 255, .5); }
.iz-themengruppe-konzept .iz-themengruppe-titel  { border-bottom-color: rgba(213, 179, 255, .5); }
.iz-themenpanel { background: var(--grund-3); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); }
.iz-themenpanel .iz-themengruppe-titel { border-bottom: 1px solid var(--linie); padding-bottom: .25rem; }
.iz-hauptnav-themen a { color: var(--text-leise); }
.iz-hauptnav-themen a[aria-expanded="true"] { color: var(--akzent); }
.iz-hauptnav-themen a::after { content: " ▾"; font-size: .8em; }

/* ---------- Hero mit Scanlines ---------- */
.iz-hero { border: 1px solid var(--linie); box-shadow: 0 0 40px rgba(76, 240, 138, .08); }
.iz-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); pointer-events: none; }
.iz-hero-text { z-index: 1; }
.iz-hero-vorzeile { color: var(--akzent); }
.iz-hero .iz-startkopf { font-size: 3rem; }
.iz-hero .iz-z { text-shadow: 0 0 16px rgba(76, 240, 138, .8); }

/* ---------- Karten ---------- */
.iz-karte { background: var(--grund-2); }
.iz-karte:hover { box-shadow: 0 0 0 1px var(--akzent), 0 0 24px rgba(76, 240, 138, .15); }
.iz-karte-bild { filter: saturate(.6) contrast(1.05); border-bottom: 1px solid var(--linie); position: relative; }
.iz-karte-bild::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }
.iz-karte-titel { color: var(--text); }
.iz-karte-bereich .iz-karte-titel { font-size: 1.25rem; }
.iz-tag-anzahl { color: var(--text-leise); }

/* ---------- Inhalt ---------- */
.iz-text > h2::before { content: "## "; color: var(--akzent); font-family: var(--mono); font-weight: 400; opacity: .7; }
.iz-box { background: var(--grund-2); }
.iz-text pre { box-shadow: inset 0 0 0 1px rgba(76, 240, 138, .08); }

/* ---------- Fuß ---------- */
.iz-fuss { background: var(--grund-3); }
.iz-fuss .iz-logo { font-size: 1.2rem; }
.iz-fuss .iz-logo::after { display: none; }

/* Startseite und Seiten ohne Bereich (Themen, Suche, Aktuelles): keine Seitenleiste, volle Breite, drei Kartenspalten */
.iz-start .iz-inhalt, .iz-ohne-leiste .iz-inhalt { max-width: none; }
.iz-ohne-leiste .iz-seitenleiste { display: none; }
.iz-start .iz-karten-bereiche { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

/* Mittlere Breiten (Tablet quer, kleine Laptops): Reiter enger, Suchfeld schmaler,
   notfalls dürfen die Reiter in eine zweite Zeile umbrechen statt abgeschnitten zu werden */
@media (max-width: 1150px) and (min-width: 901px) {
    .iz-hauptnav { flex-wrap: wrap; overflow: visible; }
    .iz-hauptnav a { padding: .55rem .5rem; font-size: .82rem; }
    .iz-kopfsuche input { width: 8rem; }
}

/* ---------- Schmale Bildschirme: Burger-Menü statt Reiter ----------
   Der Knopf (.iz-menueknopf, Gerüst in basis.css) setzt per iz.js die Klasse
   "iz-menue-offen" auf <body>. Dann klappen unter dem Kopf nacheinander auf:
   Suchfeld, die Bereiche (untereinander statt als Reiter) und die Seitenleiste
   mit dem aktuellen Bereich. Ohne die Klasse ist beides ausgeblendet. */
@media (max-width: 900px) {
    .iz-kopfzeile { padding: 1rem 3.5rem .8rem; }              /* Platz für den Knopf links */
    .iz-logo { font-size: 1.8rem; }
    .iz-slogan { font-size: .6rem; letter-spacing: .1em; text-align: center; }
    .iz-menueknopf { left: .9rem; top: 1rem; }
    .iz-kopfnav { display: none; flex-direction: column; align-items: stretch; gap: .6rem; padding: .8rem 1rem 1rem; }
    body.iz-menue-offen .iz-kopfnav { display: flex; }
    .iz-kopfsuche { order: -1; }                                 /* Suche zuoberst */
    .iz-kopfsuche input { flex: 1; width: auto; }
    .iz-hauptnav { flex-direction: column; overflow: visible; }
    .iz-hauptnav a { padding: .55rem .6rem; border-bottom: 1px solid var(--linie); border-left: 3px solid transparent; }
    .iz-hauptnav li.aktiv a { border-bottom-color: var(--linie); border-left-color: var(--akzent); background: var(--akzent-hell); }
    .iz-hauptnav li:last-child a { border-bottom: none; }
    .iz-seitenleiste { padding: .5rem 0 1rem; }
    .iz-bereichsnav-titel { margin-top: .5rem; }
}