/* amber-web-chrome.css — EINE Quelle fuer das Seiten-Chrome der Website.
   Auf JEDER Seite identisch: Reset, Grundfarben/Font, Kopfleiste, Wortmarke,
   Fusszeile. Frueher pro Seite inline kopiert (12x dieselben Regeln) -> Drift.
   Jetzt per <link>, nichts mehr dupliziert. */

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--bg0);
  color:var(--tx);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Kopfleiste + Wortmarke (amber schwarz, Suffix amberfarben — Suite-Kanon) */
.header{
  background:var(--surface);
  border-bottom:1px solid var(--brd);
  padding:0 32px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{ font-family:var(--mono); font-size:15px; letter-spacing:-.01em; text-decoration:none; }
.logo-base{ color:var(--tx); }
.logo-suffix{ color:var(--am); font-weight:500; text-transform:uppercase; }

/* "amber" inline im Fliesstext amberfarben hervorheben */
.amber-word{ color:var(--am2); font-weight:500; }

/* Fusszeile */
footer{
  padding:26px 32px;
  border-top:1px solid var(--brd);
  font-family:var(--mono);
  font-size:11px;
  color:var(--tx3);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
footer .lnk a{ color:var(--tx2); text-decoration:none; margin-right:16px; }
footer .lnk a:hover{ color:var(--am2); }
footer .langlink{ color:var(--am2); text-decoration:none; }
footer .langlink:hover{ text-decoration:underline; }

@media(max-width:640px){
  .header{ padding:0 18px; }
}