/* ruthner.at – nur die gemeinsame Kopf-/Fusszeile (fuer Seiten mit eigenem Design).
   Bewusst ohne Basis-Styles und ohne CSS-Variablen, damit nichts ins Seitendesign hineinwirkt. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/fraunces-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope";  font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope.woff2") format("woff2"); }

.tool-nav {
  position: sticky; top: 0; z-index: 2000;
  display: flex; align-items: center; gap: 16px; box-sizing: border-box;
  height: 60px; margin: 0; padding: 0 clamp(16px,4vw,48px); width: 100%;
  background: rgba(12,14,11,.92); border-bottom: 1px solid rgba(243,239,230,.12);
  font-family: "Manrope","Segoe UI",system-ui,sans-serif; font-size: 14px; line-height: 1.2; color: #f3efe6;
  text-align: left;
}
.tool-nav * { box-sizing: border-box; }
.tool-nav .brand { display: inline-flex; align-items: center; gap: 10px; color: #f3efe6; font-family: "Fraunces",Georgia,serif; font-size: 18px; font-weight: 600; text-decoration: none; margin: 0; }
.tool-nav .brand:hover { color: #f3efe6; text-decoration: none; }
.tool-nav .brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(217,180,90,.3)); margin: 0; border: 0; box-shadow: none; }
.tool-nav .brand em { color: #d9b45a; font-style: italic; font-weight: 400; }
.tool-nav .sep { width: 1px; height: 22px; background: rgba(243,239,230,.22); }
.tool-nav .page { font-size: 13.5px; color: #b3ae9f; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-nav .spacer { flex: 1; }
.tool-nav .back {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin: 0;
  font-size: 13px; font-weight: 700; color: #f3efe6; text-decoration: none; text-transform: none; letter-spacing: 0;
  padding: 8px 14px; border: 1px solid rgba(243,239,230,.22); border-radius: 999px; background: transparent; box-shadow: none;
  transition: border-color .25s, color .25s, background .25s;
}
.tool-nav .back:hover { border-color: #d9b45a; color: #e8cd86; background: rgba(217,180,90,.16); text-decoration: none; transform: none; }
@media (max-width: 640px) { .tool-nav .page, .tool-nav .sep { display: none; } .tool-nav .brand span { display: none; } }