/* ===========================================================================
   rahmen.css

   Gleicht Kopfleiste und Fussbereich der Unterseiten an die neue Startseite
   an. Wird als LETZTE Stildatei geladen, nach der jeweiligen Seitendatei und
   nach basis.css, und veraendert ausschliesslich nav und footer.

   Der Inhaltsbereich bleibt vollstaendig unberuehrt. Das ist Absicht: auf
   /kas und /smd haengen mehrstufige Assistenten am Markup, jede Aenderung
   dort koennte sie kippen.

   Rueckgaengig machen: die eine Zeile
       <link rel="stylesheet" href="/css/rahmen.css">
   aus der betreffenden Seite entfernen. Dann sieht sie wieder aus wie zuvor.
   Es wurde keine bestehende Datei veraendert.

   Die Farbwerte kommen aus basis.css. Die Ersatzwerte dahinter greifen nur,
   falls basis.css einmal fehlen sollte.
   =========================================================================== */

:root{
  --rahmen-mono: ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;
  --rahmen-tief: #00182f;
  --rahmen-hell: #eef1f5;
  --rahmen-leise: rgba(238,241,245,.62);
  --rahmen-linie: rgba(238,241,245,.16);
}

/* ---- Kopfleiste ------------------------------------------------------- */

body nav{
  position:sticky; top:0; z-index:60;
  height:auto; padding:0;
  background:var(--bg-dark,var(--rahmen-tief));
  border-bottom:1px solid var(--rahmen-linie);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  display:block;
}

body nav .nav-inner{
  width:100%; max-width:1120px; margin:0 auto; padding:0 24px;
  height:68px; display:flex; align-items:center; gap:24px;
  justify-content:flex-start;
}

body nav .nav-logo{
  display:flex; align-items:baseline; gap:10px;
  color:var(--text-on-dark,var(--rahmen-hell)); text-decoration:none;
  font-size:.95rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
body nav .nav-logo b{
  font-size:.95rem; font-weight:600; letter-spacing:.02em;
  color:var(--text-on-dark,var(--rahmen-hell));
}

/* Das Kuerzel der Produktseite, jetzt als ruhige Beschriftung statt Pille */
body nav .nav-tag{
  background:none; border-radius:0; padding:0;
  font-family:var(--rahmen-mono); font-size:.7rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted-dark,var(--rahmen-leise));
}

body nav .nav-right{margin-left:auto; display:flex; align-items:center; gap:20px}

body nav .nav-back{
  font-size:.9rem; color:var(--text-muted-dark,var(--rahmen-leise));
  text-decoration:none; transition:color .2s ease;
}
body nav .nav-back:hover{color:var(--text-on-dark,var(--rahmen-hell))}

body nav .nav-cta{
  margin-left:auto;
  background:var(--text-on-dark,var(--rahmen-hell));
  color:var(--bg-dark,var(--rahmen-tief));
  font-size:.88rem; font-weight:600; text-decoration:none;
  padding:9px 17px; border-radius:10px; white-space:nowrap;
  transition:transform .25s ease, filter .25s ease;
}
body nav .nav-cta:hover{
  transform:translateY(-2px); filter:brightness(1.06);
  color:var(--bg-dark,var(--rahmen-tief));
}
body nav .nav-cta:active{transform:translateY(0)}

/* Sprachumschalter auf den Rechtstexten, muss auf dunklem Grund lesbar sein */
body nav .lang-switch{
  border:1px solid var(--rahmen-linie); background:transparent;
}
body nav .lang-btn{
  color:var(--text-muted-dark,var(--rahmen-leise)); background:transparent;
}
body nav .lang-btn.active{
  background:var(--text-on-dark,var(--rahmen-hell));
  color:var(--bg-dark,var(--rahmen-tief));
}
body nav .lang-btn:not(.active):hover{
  background:rgba(255,255,255,.08); color:var(--text-on-dark,var(--rahmen-hell));
}

/* ---- Fussbereich ------------------------------------------------------ */

body footer{
  background:var(--bg-dark,var(--rahmen-tief));
  color:var(--text-muted-dark,var(--rahmen-leise));
  padding:46px 0 40px; margin-top:72px; border-top:0;
  font-size:.9rem;
}

body footer .footer-inner{
  width:100%; max-width:1120px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}

body footer span{color:var(--text-muted-dark,var(--rahmen-leise))}

body footer a{
  color:var(--text-muted-dark,var(--rahmen-leise));
  text-decoration:none; transition:color .2s ease;
}
body footer a:hover{color:var(--text-on-dark,var(--rahmen-hell))}

body footer .footer-links{display:flex; gap:22px; flex-wrap:wrap}

/* ---- Schmale Bildschirme ---------------------------------------------- */

@media (max-width:620px){
  body nav .nav-inner{height:60px; padding:0 18px; gap:14px}
  body nav .nav-cta{padding:8px 13px; font-size:.82rem}
  body nav .nav-right{gap:14px}
  body footer{padding:36px 0 32px; margin-top:52px}
  body footer .footer-inner{padding:0 18px; justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  body nav .nav-cta{transition:none}
  body nav .nav-cta:hover{transform:none}
}