/* Binckly Labs – Visitenkarten-Seite. Farben aus tokens.json, Schriften lokal (keine Google-Fonts-Verbindung). */
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("fonts/Unbounded-Bold.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("fonts/Unbounded-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 300; font-display: swap; src: url("fonts/Unbounded-Light.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"); }

:root {
  --ink: #0F2A4A;
  --mist: #F4F6FA;
  --muted: #64748B;
  --rule-light: #D5DCE5;
  --white: #FFFFFF;
  --display: "Unbounded", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--mist); color: var(--ink); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--mono); font-size: 15px; line-height: 1.6; }
a { color: var(--ink); text-underline-offset: 3px; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 48px 16px; }

/* Startseite: wie die Kartenrückseite – Ink vollflächig, Wortmarke in Mist */
body.marke { background: var(--ink); color: var(--mist); }
body.marke a { color: var(--mist); }
.buehne { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px; text-align: center; }
.wortmarke { margin: 0; font-size: clamp(44px, 12vw, 128px); line-height: 1; }
.wortmarke .binckly { display: block; font-family: var(--display); font-weight: 800; letter-spacing: 0; }
.wortmarke .strich { display: block; width: 68%; height: 0; margin: 0.22em auto 0.2em; border-top: max(1px, 0.012em) solid var(--mist); transform-origin: center; }
.wortmarke .labs { display: block; font-family: var(--mono); font-weight: 500; font-size: max(11px, 0.17em); letter-spacing: 0.7em; margin-right: -0.7em; }
.claim { margin: clamp(40px, 9vh, 88px) 0 0; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.04em; color: var(--rule-light); }
.firma { border-top: 1px solid rgba(213, 220, 229, 0.18); padding: 24px 16px 28px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--rule-light); }
.firma p { margin: 0; }
.firma p + p { margin-top: 14px; }
.firma a { color: var(--rule-light); }
.firma .recht a { margin: 0 8px; }

@media (prefers-reduced-motion: no-preference) {
  .wortmarke .strich { animation: ziehen 1.1s 0.3s cubic-bezier(.2, .7, .2, 1) both; }
  .wortmarke .labs, .claim { animation: erscheinen 1.2s 0.9s ease both; }
  .claim { animation-delay: 1.4s; }
}
@keyframes ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes erscheinen { from { opacity: 0; } to { opacity: 1; } }

/* Rechtstexte */
h1 { font-family: var(--display); font-weight: 700; font-size: 26px; margin: 0 0 24px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 32px 0 8px; }
.zurueck { display: inline-block; margin-bottom: 32px; font-size: 13px; }
.stand { color: var(--muted); font-size: 13px; margin-top: 40px; }

footer { border-top: 1px solid var(--rule-light); padding: 16px; text-align: center; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); margin: 0 8px; }