/* Echtzeitnetz – Menüzeile, Kästen, Kastenrahmen und Steampunk-Rohrrahmen
   Braucht echtzeitnetz-designs.css (Farbvariablen) und steampunk/frame.svg neben dieser Datei.
   HTML-Gerüst:
     <header class="topbar"><div class="wrap topbar-inner">
       <a class="brand" href="/"><span class="brand-mark">EZ</span><span>Echtzeitnetz</span></a>
       <nav class="mainnav"><a class="active" aria-current="page">Marktplatz</a><a>Postfach <span class="count">3</span></a></nav>
     </div></header>
     <section class="panel"><h2>Titel</h2>…</section>     <article class="card"><h3>…</h3><p>…</p></article> */

/* ---------- Menüzeile (alle Designs) ---------- */
.topbar { background: var(--card); border-bottom: 3px solid var(--red); position: sticky; top: 0; z-index: 10; }
.topbar-inner { display: flex; align-items: center; gap: 20px; min-height: 60px; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font); font-weight: 700; font-size: 1.1rem; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--red); color: #fff; font-size: .9rem; letter-spacing: -.02em; }
.mainnav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
/* Menüschrift: Systemschrift, 0.95rem, normal; aktiv halbfett in der Systemfarbe */
.mainnav a, .linkbtn { font-family: var(--font); font-size: .95rem; font-weight: 400; color: var(--ink-2); text-decoration: none; padding: 7px 10px; border-radius: 7px; }
.mainnav a:hover, .linkbtn:hover { background: var(--line-2); color: var(--ink); }
.mainnav a.active { color: var(--red); background: var(--red-soft); font-weight: 600; }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 20px; }

/* ---------- Kästen und Karten (Standard; Grundlage für alle Designs) ---------- */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.panel + .panel { margin-top: 20px; }
.panel h2 { margin: 0 0 14px; font-size: 1.2rem; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); transition: border-color .15s; }
.card:hover { border-color: var(--red); }
.card h3 { margin: 0; font-size: 1.08rem; }
.card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.card .meta { margin-top: auto; padding-top: 8px; font-size: .82rem; color: var(--ink-3); }
/* Bereichsrahmen in Formularen (Projektverwaltung) */
.form-section { border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; margin: 0 0 20px; background: var(--paper); }
.form-section legend { padding: 4px 12px; font-weight: 700; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 999px; }

/* ---------- Steampunk: Leder-Menüzeile mit Messingkante ---------- */
:root[data-design="steampunk"] .topbar {
  background: linear-gradient(180deg, var(--sp-leather-1), var(--sp-leather-2));
  border-bottom: 4px solid var(--sp-brass-2);
  box-shadow: 0 2px 0 var(--sp-brass-3), 0 6px 16px rgba(30, 15, 5, .35);
}
:root[data-design="steampunk"] .topbar a,
:root[data-design="steampunk"] .topbar .linkbtn,
:root[data-design="steampunk"] .brand { color: #f3e3bd; }
:root[data-design="steampunk"] .mainnav a.active,
:root[data-design="steampunk"] .mainnav a:hover { background: rgba(240, 207, 126, .16); color: #ffe7a8; }
:root[data-design="steampunk"] .brand-mark {
  background: radial-gradient(circle at 35% 30%, var(--sp-brass-1), var(--sp-brass-2) 55%, var(--sp-brass-3));
  color: #2b190d; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(43, 25, 13, .55), 0 0 0 2px var(--sp-brass-3);
}

/* ---------- Steampunk: Kupferrohr-Rahmen mit Bögen und Messing-Muffen ---------- */
:root[data-design="steampunk"] .panel,
:root[data-design="steampunk"] .card,
.sp-frame {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #fff8e6), var(--card));
  border-style: solid;
  border-width: 16px;
  border-image: url(steampunk/frame.svg) 22 round;
  background-clip: padding-box;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  filter: drop-shadow(0 5px 6px rgba(50, 25, 8, .28));
}
:root[data-design="steampunk"] .card:hover { filter: drop-shadow(0 8px 10px rgba(50, 25, 8, .38)); }
@media (prefers-color-scheme: dark) {
  :root[data-design="steampunk"]:not([data-theme="light"]) .panel,
  :root[data-design="steampunk"]:not([data-theme="light"]) .card { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
}
:root[data-design="steampunk"][data-theme="dark"] .panel,
:root[data-design="steampunk"][data-theme="dark"] .card { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
@media (max-width: 600px) {
  :root[data-design="steampunk"] .panel, :root[data-design="steampunk"] .card, .sp-frame { border-width: 11px; }
}

/* ---------- Forschung: himmelblaue Menüzeile ---------- */
:root[data-design="forschung"] .topbar { background: var(--fo-himmel); border-bottom: 2px solid var(--fo-tuerkis); }
:root[data-design="forschung"] .topbar a,
:root[data-design="forschung"] .topbar .linkbtn,
:root[data-design="forschung"] .brand { color: #0b1a2e; }
:root[data-design="forschung"] .mainnav a.active,
:root[data-design="forschung"] .mainnav a:hover { background: rgba(3, 38, 43, .1); color: var(--fo-on); }
:root[data-design="forschung"] .count { background: var(--fo-on); color: var(--fo-himmel); }
:root[data-design="forschung"] .brand-mark {
  background: radial-gradient(circle at 35% 30%, #9ff4fa, var(--fo-tuerkis) 55%, #00707a);
  color: var(--fo-on); border-radius: 50%;
  box-shadow: 0 0 0 2px var(--fo-on), 0 0 10px rgba(0, 201, 216, .6);
}