:root{
  --neon-cyan:#00f2ff;
  --neon-green:#39a134;
  --navy:#071425;
}

/* Background */
body{
  padding-top: 62px;
  background:
    linear-gradient(rgba(10,20,30,.55), rgba(5,10,15,.75)),
    url('../img/bg-road-3400x1440.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.heading-font{font-family:'Orbitron',system-ui,sans-serif;}

/* 45° corners */
.octagon-clip{
  clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
}

/* Glass frame container */
.glass-container{
  position:relative;
  padding:1px;
  background: rgba(0,242,255,0.22);
}

/* Shimmer auf Kartenhintergrund */
.glass-card{
  background: rgba(7,20,37,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  height:100%;
  width:100%;
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:55%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  transform: skewX(-25deg);
  animation: shine 6s infinite;
  animation-delay: var(--shimmer-delay, 0s);
  pointer-events:none;
  z-index:0;
}
.glass-card > *{ position:relative; z-index:1; }
.frame-shimmer{ position:relative; }

@keyframes shine{
  0%  { left:-120%; }
  20% { left: 120%; }
  100%{ left: 120%; }
}

/* =====================================================
   NAV – 40px hoch, transparenter Hintergrund
   ===================================================== */
.nav-shell{
  width: min(2560px, 95vw);
  height: 45px;
}

.nav-clip{
  clip-path: polygon(
    10px 0%,
    100% 0%,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0% calc(100% - 10px),
    0% 10px
  );
  height: 100%;
}

.nav-bg{
  background: rgba(0,51,102,0.95);
  height: 100%;
  display: flex;
  align-items: center;
}

.neon-bottom{ position:relative; }
.neon-bottom::after{
  content:"";
  position:absolute;
  left:40px; right:40px; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, rgba(57,161,52,.9), rgba(0,242,255,.95), rgba(31,139,255,.9));
  filter: drop-shadow(0 0 8px rgba(0,242,255,.55));
  opacity:.38;
}

.nav-link:hover{
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  height: 28px;
  width: auto;
}

/* =====================================================
   MITMACHEN-Button – 40px hoch
   ===================================================== */
.mitmachen-btn{
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  width: 156px;
  flex-shrink: 0;
}
.mitmachen-img{
  height: 40px;
  width: 156px;
  display: block;
}
.mitmachen-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Orbitron',system-ui,sans-serif;
  font-weight: 900;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 12px rgba(0,255,160,.28);
  pointer-events:none;
}

/* =====================================================
   HERO: Logo + Text auf max 884px zentriert
   ===================================================== */
.lmd-logo-text-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 884px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 700px){
  .lmd-logo-text-row{ flex-wrap: wrap; gap: 24px; }
}

/* HERO-Titel: kompakter Zeilenabstand */
.hero-title-block{
  line-height: 1.0;
  text-align: center;
}
.hero-title-block .kicker{
  margin: 0 0 4px;
  letter-spacing: .4em;
  font-size: .75rem;
  opacity: .8;
}
.hero-title-block h1{
  margin: 2px 0 4px;
  line-height: 0.95;
}
.hero-title-block .subtitle{
  margin: 2px 0 0;
  line-height: 1.2;
}

/* Utility */
.text-soft{ color:rgba(255,255,255,.82); }

@media (max-width: 900px){
  .mitmachen-img{ height: 40px; }
  .mitmachen-btn{ height: 40px; }
  .nav-shell{ height: 40px; }
}

/* =====================================================
   HAMBURGER MENÜ – Mobile Navigation
   ===================================================== */

/* Burger Icon Bars */
.lmd-burger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(0, 242, 255, 0.85);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Burger → X Animation */
#lmd-burger.lmd-burger-open .lmd-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#lmd-burger.lmd-burger-open .lmd-burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#lmd-burger.lmd-burger-open .lmd-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Dropdown */
#lmd-mobile-menu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: 0 2.5vw;
}

#lmd-mobile-menu.lmd-menu-open {
  display: block;
}

#lmd-mobile-menu-inner {
  background: rgba(7, 20, 37, 0.97);
  border: 1px solid rgba(0, 242, 255, 0.25);
  border-top: 2px solid rgba(0, 242, 255, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  padding: 0.5rem 0;
  animation: lmd-menu-slide-in 0.25s ease forwards;
}

@keyframes lmd-menu-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lmd-mobile-link {
  display: block;
  padding: 0.85rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 220, 235, 0.85);
  border-bottom: 1px solid rgba(0, 242, 255, 0.07);
  transition: color 0.2s, background 0.2s;
  text-decoration: none;
}

.lmd-mobile-link:hover {
  color: var(--neon-cyan);
  background: rgba(0, 242, 255, 0.05);
  text-shadow: 0 0 10px var(--neon-cyan);
}

.lmd-mobile-link:last-child {
  border-bottom: none;
}

/* Mitmachen im Mobile-Menü – hervorgehoben */
.lmd-mobile-mitmachen {
  color: rgba(0, 242, 255, 0.95) !important;
  font-weight: 700;
  border-top: 1px solid rgba(0, 242, 255, 0.15) !important;
  margin-top: 0.25rem;
}

.lmd-mobile-mitmachen:hover {
  background: rgba(0, 242, 255, 0.1) !important;
}

/* Favicon im <head> – kein CSS, nur Hinweis */
/* Favicon-Tags müssen in jedem <head> stehen */

/* =====================================================
   RESPONSIVE NAV – Desktop / Mobile Sichtbarkeit
   Breakpoint: 1024px
   ===================================================== */

/* Desktop Nav Links */
.lmd-nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Burger Button – auf Desktop unsichtbar */
.lmd-burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Burger Wrapper – kleinere 5px Ecken passend zur Button-Größe */
.lmd-burger-wrapper {
  position: relative;
  padding: 1px;
  background: rgba(0, 242, 255, 0.22);
  clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
  flex-shrink: 0;
  width: 42px;
  height: 33px;
  align-self: center;
}

.lmd-burger-inner {
  background: rgba(7, 20, 37, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
  position: relative;
  overflow: hidden;
}

/* Shimmer auf Burger */
.lmd-burger-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
  transform: skewX(-25deg);
  animation: shine 6s infinite;
  pointer-events: none;
}

/* Mobile-Only Elemente – auf Desktop versteckt */
.lmd-mobile-only {
  display: none;
}

/* Desktop-Only Elemente – auf Mobile versteckt */
.lmd-desktop-only {
  display: flex;
}

/* Ab 1024px abwärts: Desktop-Nav verstecken, Burger zeigen */
@media (max-width: 1023px) {
  .lmd-nav-links    { display: none; }
  .lmd-mobile-only  { display: flex; align-items: center; }
  .lmd-desktop-only { display: none !important; }
  .mitmachen-btn    { display: none !important; }
}

/* =====================================================
   FORM INPUT STYLES
   ===================================================== */
/* Eingabetext weiß */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
  color: #ffffff;
}

/* Platzhaltertext: helleres Grau für alle Felder */
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Pseudonym-Feld: Cyan-Platzhalter (Linkfarbe) */
input[name="pseudonym"]::placeholder {
  color: #00f2ff;
  opacity: 0.75;
}

/* Select: Optionen lesbarer */
select option {
  background: #0a1e32;
  color: #ffffff;
}

/* =====================================================
   STICKY NAV
   ===================================================== */
/* Nav glass-card deutlich undurchsichtiger */
.lmd-nav-sticky .glass-card {
  background: rgba(7, 20, 37, 1.00) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.lmd-nav-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: transparent !important;
  padding: 6px 0;
}
.lmd-nav-sticky.scrolled {
  background: transparent;
}

.nav-link-active { color: #00f2ff !important; border-bottom: 1px solid rgba(0,242,255,0.5); }

/* ═══════════════════════════════════════════════════════════
   SEITEN-SPEZIFISCHE STYLES (konsolidiert aus PHP-Dateien)
   ═══════════════════════════════════════════════════════════ */

/* ── aboutus.php ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .steckbrief-header { flex-direction: column !important; align-items: center !important; }
  .steckbrief-img    { display: flex; justify-content: center; margin-bottom: 1rem; }
  .steckbrief-text   { width: 100%; text-align: left; }
}

/* ── berlin.php – Galerie ────────────────────────────────── */
.berlin-col-span-2 { grid-column: span 2; }
@media (max-width: 767px) { .berlin-col-span-2 { grid-column: span 1; } }
.berlin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 580px) { .berlin-grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .berlin-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.berlin-img-card { overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.berlin-img-card:hover { transform: translateY(-3px); }
.berlin-img-card img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.3s; }
.berlin-img-card:hover img { transform: scale(1.05); }
.berlin-caption { padding: 12px 16px; font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.4; }
.berlin-lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; cursor: pointer; }
.berlin-lightbox.active { display: flex; }
.berlin-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border: 1px solid rgba(0,242,255,0.2); }
.berlin-lightbox-close { position: absolute; top: 20px; right: 24px; font-size: 2rem; color: rgba(255,255,255,0.7); cursor: pointer; background: none; border: none; font-family: inherit; }
.berlin-lightbox-close:hover { color: #00f2ff; }
.berlin-video { width: 100%; max-height: 500px; background: #000; }
.berlin-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.berlin-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.berlin-credit { font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(0,191,255,0.55); text-transform: uppercase; margin-bottom: 16px; }
.berlin-update-box { border-left: 3px solid rgba(0,242,255,0.5); padding-left: 16px; }
.berlin-gallery-viewer { position: relative; background: #000; overflow: hidden; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.berlin-gallery-viewer img { width: 100%; max-height: 500px; object-fit: contain; display: block; }
.berlin-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 2rem; padding: 12px 16px; cursor: pointer; z-index: 2; transition: background 0.2s; }
.berlin-gallery-nav:hover { background: rgba(0,242,255,0.3); }
.berlin-gallery-prev { left: 0; }
.berlin-gallery-next { right: 0; }
.berlin-gallery-counter { text-align: center; padding: 10px; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.berlin-gallery-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: thin; scrollbar-color: rgba(0,242,255,0.3) transparent; }
.berlin-gallery-thumb { width: 60px; height: 45px; object-fit: cover; cursor: pointer; opacity: 0.5; transition: opacity 0.2s; flex-shrink: 0; }
.berlin-gallery-thumb:hover, .berlin-gallery-thumb.active { opacity: 1; }

/* ── Petitionen (berlin + vmk) ───────────────────────────── */
.petition-cards { display: flex; flex-direction: column; gap: 8px; }
.petition-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: rgba(255,255,255,0.04); border-left: 3px solid rgba(0,242,255,0.4); text-decoration: none; color: #fff; transition: all 0.2s; gap: 12px; }
.petition-card:hover { background: rgba(0,242,255,0.1); border-left-color: #00f2ff; }
.petition-title { font-size: 0.85rem; }
.petition-count { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; color: #00f2ff; white-space: nowrap; }
@media (max-width: 580px) { .petition-card { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ── nlarchive.php ───────────────────────────────────────── */
.nl-archive-content { color: rgba(255,255,255,0.8); line-height: 1.7; }
.nl-archive-content h2 { font-size: 1.3rem; font-weight: bold; color: #00f2ff; margin: 16px 0 8px; }
.nl-archive-content h3 { font-size: 1.1rem; font-weight: bold; color: #00f2ff; margin: 12px 0 6px; }
.nl-archive-content p { margin: 8px 0; }
.nl-archive-content img { max-width: 100%; height: auto; margin: 12px 0; }
.nl-archive-content a { color: #00f2ff; }
.nl-archive-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }

/* ── rahmenplan.php ──────────────────────────────────────── */
.rp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 8px; }
.rp-table th { padding: 10px 14px; text-align: left; font-family: 'Orbitron', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid rgba(0,191,255,0.35); color: #00b4e6; white-space: nowrap; }
.rp-table td { padding: 10px 14px; color: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; line-height: 1.6; }
.rp-table tr:nth-child(odd) td { background: rgba(255,255,255,0.025); }
.rp-table tr:hover td { background: rgba(0,191,255,0.05); }
.td-head { background: rgba(0,191,255,0.06) !important; color: rgba(0,191,255,0.8); font-family: 'Orbitron', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; }
.td-law { color: rgba(255,255,255,0.65); font-size: 0.78rem; }
.td-law strong { color: rgba(255,255,255,0.9); font-size: 0.82rem; display: block; margin-bottom: 2px; }
.td-law em { color: rgba(200,200,255,0.5); font-style: normal; font-size: 0.72rem; }
.td-vogel { color: #adcc61; }
.td-vogel .lekt { font-family: 'Orbitron', sans-serif; font-size: 0.68rem; font-weight: 700; display: block; margin-bottom: 2px; }
.td-vogel .sub { color: rgba(173,204,97,0.7); font-size: 0.74rem; line-height: 1.55; }
.td-degener { color: #cf0000; }
.td-degener .lekt { font-family: 'Orbitron', sans-serif; font-size: 0.68rem; font-weight: 700; display: block; margin-bottom: 2px; }
.td-degener .sub { color: rgba(255,160,160,0.7); font-size: 0.74rem; line-height: 1.55; }
.rp-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; margin-top: 8px; }
.rp-label span { font-family: 'Orbitron', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: rgba(0,191,255,0.8); }
.rp-label .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,191,255,0.35), transparent); }
.rp-note { background: rgba(255,200,0,0.08); border: 1px solid rgba(255,200,0,0.25); border-left: 4px solid rgba(255,200,0,0.5); padding: 12px 18px; font-size: 0.82rem; color: rgba(255,230,150,0.85); line-height: 1.7; margin-bottom: 12px; }
.rp-logo-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.rp-logo-card { flex: 1; min-width: 200px; }
.rp-logo-card img { max-width: 170px; width: 100%; height: auto; opacity: 0.9; }

/* ── spielstrasse.php ────────────────────────────────────── */
.ss-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; margin-top: 8px; }
.ss-label-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: #00b4e6; letter-spacing: 0.1em; white-space: nowrap; }
.ss-label-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,191,255,0.45), transparent); }
.ss-badge-red  { display: inline-block; background: rgba(200,40,40,0.25); border: 1px solid rgba(220,60,60,0.5); color: #ff8080; font-size: 0.7rem; padding: 2px 10px; border-radius: 20px; margin-bottom: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.ss-badge-blue { display: inline-block; background: rgba(0,80,200,0.25); border: 1px solid rgba(0,130,255,0.5); color: #80b8ff; font-size: 0.7rem; padding: 2px 10px; border-radius: 20px; margin-bottom: 8px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.1em; }
.ss-sign-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: #00b4e6; letter-spacing: 0.06em; margin-bottom: 6px; }
.ss-sign-desc  { font-size: 0.875rem; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0; }
.ss-faq-q { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: #00e5ff; margin-bottom: 10px; letter-spacing: 0.04em; }
.ss-warn { background: rgba(255,160,0,0.12); border: 1px solid rgba(255,160,0,0.4); border-left: 4px solid #ffb300; border-radius: 0 8px 8px 0; padding: 14px 18px; margin-top: 14px; font-size: 0.875rem; color: rgba(255,255,255,0.85); line-height: 1.7; }
.merk-label { font-family: 'Bebas Neue', sans-serif; font-size: 0.75rem; letter-spacing: 0.25em; color: rgba(0,191,255,0.65); margin-bottom: 10px; text-align: center; }
.merk-text  { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: #00e5ff; letter-spacing: 0.05em; line-height: 1.5; text-align: center; }
.merk-sub   { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 10px; line-height: 1.65; text-align: center; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ss-table th { padding: 11px 14px; text-align: left; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.08em; border-bottom: 1px solid rgba(0,191,255,0.25); color: #00b4e6; }
.ss-table th:not(:first-child) { text-align: center; }
.ss-table td { padding: 11px 14px; color: rgba(255,255,255,0.82); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ss-table td:not(:first-child) { text-align: center; }
.ss-table tr:nth-child(odd) td { background: rgba(255,255,255,0.03); }
.td-blue { color: #80b8ff !important; }
.td-red  { color: #ff9090 !important; }
@media (max-width: 600px) { .ss-signs-grid { grid-template-columns: 1fr !important; } }

/* ── technik.php ─────────────────────────────────────────── */
.tech-section-label { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.tech-section-label strong { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.12em; color: #00b4e6; text-transform: uppercase; white-space: nowrap; }
.tech-section-label .tsl-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,191,255,0.4), transparent); }
.tech-card-outer { transition: transform 0.2s; }
.tech-card-outer:hover { transform: translateY(-3px); }
.tech-card-inner { display: flex; flex-direction: column; height: 100%; }
.tech-card-img { height: 185px; overflow: hidden; background: transparent; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tech-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s; }
.tech-card-outer:hover .tech-card-img img { transform: scale(1.05); }
.tech-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.tech-card-tag { font-family: 'Bebas Neue', sans-serif; font-size: 0.68rem; letter-spacing: 0.22em; color: rgba(0,191,255,0.50); margin-bottom: 5px; }
.tech-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: #00b4e6; margin-bottom: 10px; line-height: 1.2; }
.tech-card-desc { color: rgba(255,255,255,0.70); font-size: 0.875rem; line-height: 1.65; flex: 1; margin-bottom: 14px; }
.tech-card-link { font-family: 'Bebas Neue', sans-serif; font-size: 0.70rem; letter-spacing: 0.18em; color: rgba(0,191,255,0.65); text-decoration: none; transition: color 0.2s; margin-top: auto; }
.tech-card-link:hover { color: #00e5ff; }
.chain-box-body { padding: 22px; }
.chain-box-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; color: #00b4e6; letter-spacing: 0.1em; margin-bottom: 14px; }
.chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chain-node { background: rgba(7,28,52,0.85); border: 1px solid rgba(0,191,255,0.2); border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; color: rgba(255,255,255,0.85); text-align: center; line-height: 1.5; }
.chain-node small { display: block; font-size: 0.68rem; color: rgba(0,191,255,0.55); }
.chain-arrow { color: #00b4e6; font-size: 1.2rem; opacity: 0.65; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-top: 18px; }
.spec-item { background: rgba(7,28,52,0.85); border: 1px solid rgba(0,191,255,0.13); border-radius: 8px; padding: 14px 16px; }
.spec-label { font-size: 0.67rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,191,255,0.55); margin-bottom: 5px; }
.spec-value { font-size: 0.9rem; color: #fff; font-weight: 500; line-height: 1.4; }
.spec-value small { color: rgba(255,255,255,0.40); font-size: 0.78em; }
.tech-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
@media (max-width: 580px) { .tech-grid-2 { grid-template-columns: 1fr; } }
.tech-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; gap: 20px; margin-bottom: 20px; }

/* ── themen.php ──────────────────────────────────────────── */
.themen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 8px; }
@media (max-width: 640px) { .themen-grid { grid-template-columns: 1fr; } }
.themen-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.18s; }
.themen-card:hover { transform: translateY(-2px); }
.themen-card-inner { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.themen-emoji  { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.themen-title  { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; color: #00e5ff; margin-bottom: 4px; }
.themen-desc   { font-size: 0.875rem; color: rgba(255,255,255,0.72); line-height: 1.65; flex: 1; }
.themen-badge  { display: inline-block; align-self: flex-start; margin-top: 10px; font-family: 'Orbitron', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; padding: 3px 10px; clip-path: polygon(5px 0%,calc(100% - 5px) 0%,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0% calc(100% - 5px),0% 5px); }
.badge-unterricht { background: rgba(0,191,255,0.15); color: rgba(0,191,255,0.9); border: 1px solid rgba(0,191,255,0.3); }
.badge-sonstige   { background: rgba(180,80,255,0.15); color: rgba(200,130,255,0.9); border: 1px solid rgba(180,80,255,0.3); }
.themen-section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; margin-top: 8px; }
.themen-section-label span { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.themen-section-label .line { flex: 1; height: 1px; }
.label-unterricht span { color: rgba(0,191,255,0.8); }
.label-unterricht .line { background: linear-gradient(90deg, rgba(0,191,255,0.4), transparent); }
.label-sonstige span   { color: rgba(180,80,255,0.8); }
.label-sonstige .line  { background: linear-gradient(90deg, rgba(180,80,255,0.4), transparent); }

/* ── vmk.php ─────────────────────────────────────────────── */
.vmk-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 580px) { .vmk-stat-grid { grid-template-columns: 1fr; } }
.vmk-stat { background: rgba(0,242,255,0.06); border: 1px solid rgba(0,242,255,0.18); border-left: 4px solid rgba(0,191,255,0.6); padding: 14px 18px; }
.vmk-stat-val { font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 700; color: #00e5ff; line-height: 1.1; }
.vmk-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.vmk-warn { background: rgba(120,10,10,0.65); border: 1px solid rgba(200,50,50,0.4); border-left: 4px solid #e05050; padding: 14px 18px; font-size: 0.875rem; color: rgba(255,220,220,0.9); line-height: 1.7; margin-bottom: 12px; }
.vmk-warn strong { color: #ff8080; }
.vmk-ok { background: rgba(10,100,10,0.4); border: 1px solid rgba(50,180,50,0.3); border-left: 4px solid #50c050; padding: 14px 18px; font-size: 0.875rem; color: rgba(200,255,200,0.85); line-height: 1.7; margin-bottom: 12px; }
.vmk-quote { background: rgba(0,0,0,0.35); border-left: 4px solid rgba(0,191,255,0.5); padding: 16px 20px; font-style: italic; font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.75; margin: 12px 0; }
.vmk-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.75rem; color: rgba(0,191,255,0.7); font-family: 'Orbitron', sans-serif; letter-spacing: 0.05em; }
.vmk-section-label { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; margin-top: 8px; }
.vmk-section-label span { font-family: 'Orbitron', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: rgba(0,191,255,0.8); }
.vmk-section-label .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,191,255,0.35), transparent); }
.vmk-top-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 10px; }
.vmk-top-table th { padding: 9px 12px; text-align: left; font-family: 'Orbitron', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; border-bottom: 1px solid rgba(0,191,255,0.25); color: #00b4e6; }
.vmk-top-table td { padding: 9px 12px; color: rgba(255,255,255,0.8); border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.vmk-top-table tr:nth-child(odd) td { background: rgba(255,255,255,0.025); }
.td-hl { color: #00e5ff; font-weight: 700; }
.vmk-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.vmk-video-wrap video, .vmk-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }