/* ==========================================================================
   BRAWone – kleines Logo für fremde Seiten (Footer, Credits)
   Passt sich an: Grösse = Schriftgrösse der Umgebung, Farbe über Variablen.
   In Ruhe zurückhaltend, beim Darüberfahren hell, Punkte in der Akzentfarbe
   der jeweiligen Seite. Das Logo bleibt an Ort und Stelle.
   Einbinden: <link rel="stylesheet" href="brawone-mark/brawone-mark.css">
   Anpassen pro Seite, z. B.:
     .bw-mark { --bwm-ink: …; --bwm-ink-hover: …; --bwm-accent: …; --bwm-bg: …; }
   Schrift Inter liegt in fonts/ (SIL Open Font License), keine Anfrage an Google.
   ========================================================================== */
@font-face {
  font-family: "BW Inter";
  src: url("fonts/Inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@property --bwm-dot {
  syntax: "<color>";
  inherits: true;
  initial-value: #5a5852;
}

.bw-mark {
  --bwm-ink: rgba(255, 255, 255, .4);     /* Logo in Ruhe */
  --bwm-ink-hover: #f1efea;               /* Logo beim Darüberfahren */
  --bwm-dot-rest: #5a5852;                /* Punkte in Ruhe */
  --bwm-accent: #f2a900;                  /* Punkte beim Darüberfahren */
  --bwm-bg: #0a0a0a;                      /* Seitenhintergrund (für das «b» im Icon) */
  --bwm-dot: var(--bwm-dot-rest);

  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-family: "BW Inter", "Inter", system-ui, sans-serif;
  font-variation-settings: "opsz" 32;
  font-kerning: none;
  font-size: 1em;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--bwm-ink);
  text-decoration: none;
  border-radius: 6px;
  transition: color .3s ease, --bwm-dot .35s ease;
}
.bw-mark .bw-braw { font-weight: 800; }
.bw-mark .bw-ne { font-weight: 500; text-transform: uppercase; }

/* Icon: abgerundetes Quadrat mit «b» */
.bw-mark .bw-icon {
  position: relative; display: inline-block; flex: none;
  font-size: 1.1277em; width: 1em; height: 1em; margin-right: 0.284em;
  border-radius: 0.22em; background: currentColor;
}
.bw-mark .bw-icon::before,
.bw-mark .bw-icon::after { content: ""; position: absolute; box-sizing: border-box; }
.bw-mark .bw-icon::before {
  left: 0.24em; top: 0.16em; width: 0.13em; height: 0.685em;
  border-radius: 0.065em 0.065em 0 0; background: var(--bwm-bg);
}
.bw-mark .bw-icon::after {
  left: 0.245em; top: 0.315em; width: 0.53em; height: 0.53em;
  border: 0.13em solid var(--bwm-bg); border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--bwm-dot) 43.9%, transparent 45.4%);
}
/* «O» als Ring mit Punkt */
.bw-mark .bw-o {
  display: inline-block; box-sizing: border-box;
  width: 0.7494em; height: 0.7494em; margin: 0 0.075em 0 0.065em;
  border: 0.1084em solid currentColor; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--bwm-dot) 45%, transparent 46.4%);
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bw-mark .bw-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Hover / Fokus */
.bw-mark:hover, .bw-mark:focus-visible {
  color: var(--bwm-ink-hover);
  --bwm-dot: var(--bwm-accent);
}
.bw-mark:hover .bw-o, .bw-mark:focus-visible .bw-o { transform: scale(1.12); }
.bw-mark:focus-visible { outline: 2px solid var(--bwm-accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bw-mark, .bw-mark .bw-o { transition: color .2s ease; }
  .bw-mark:hover, .bw-mark:focus-visible { transform: none; }
  .bw-mark:hover .bw-o, .bw-mark:focus-visible .bw-o { transform: none; }
}