/* DropScore – gemeinsame Marke: Schriften (selbst gehostet, SIL OFL), Farben aus dem Logo, Wortmarke, Knopf. */
@font-face { font-family: "Saira"; src: url("/static/fonts/saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; }
/* Feste Breite fuer Stellen, die "font:" als Kurzschreibweise nutzen (die setzt font-stretch zurueck) */
@font-face { font-family: "Saira Semi"; src: url("/static/fonts/saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 87.5%; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #0b0b0c; --coal: #141416; --coal-2: #1c1c1f; --rule: #28282d; --rule-2: #3b3b43;
  --bone: #f2f2f4; --fog: #cfcfd6; --ash: #a2a2ac; --dim: #8a8a94;
  --red: #ec1c26; --red-hi: #ff343d; --red-ink: #c50f19;
  --red-btn: #e01a24;   /* Knoepfe mit weisser Schrift: Kontrast >= 4,5:1 (Logo-Rot #ec1c26 schafft nur 4,4) */
  --paper: #ebebee; --paper-rule: #cdcdd4; --paper-ink: #141418; --paper-mute: #52525b;
  --gold: #f5c518; --silver: #c9cbd0; --bronze: #cd7f32;
  --f-display: "Saira", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-semi: "Saira Semi", "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --f-text: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Wortmarke: DS-Zeichen + DROPSCORE wie im Logo */
.ds-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--bone); text-decoration: none; white-space: nowrap; }
.ds-lockup img { display: block; height: 28px; width: auto; }
.ds-word { font-family: var(--f-display); font-weight: 900; font-stretch: 110%; font-size: 21px; line-height: 1; text-transform: uppercase; }
.ds-word b { color: var(--red); font-weight: inherit; }
.ds-tag { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 500; font-size: 11px; line-height: 1;
  letter-spacing: .36em; text-transform: uppercase; color: var(--fog); }
.ds-tag::before, .ds-tag::after { content: ""; width: 26px; height: 2px; background: var(--red); flex: none; }

/* Hauptknopf mit abgeschnittener Ecke (wie das D im Logo) */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 28px 8px 26px;
  border: 0; cursor: pointer; text-align: center; text-decoration: none; background: var(--red-btn); color: #fff;
  font-family: var(--f-display); font-weight: 800; font-stretch: 105%; font-size: 17px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); transition: background-color .15s; }
.ds-btn:hover { background: var(--red-hi); }
.ds-btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.ds-btn:disabled { opacity: .6; cursor: wait; }

/* Support-Knopf: Discord */
.ds-discord { display: inline-flex; align-items: center; gap: 11px; min-height: 46px; margin-top: 10px; padding: 8px 22px 8px 18px; background: var(--red-btn); color: #fff !important;
  text-decoration: none !important; font-family: var(--f-display); font-weight: 800; font-size: 15px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background-color .15s, transform .15s; }
.ds-discord svg { width: 22px; height: 22px; flex: none; }
.ds-discord { max-width: 100%; }   /* in schmalen Spalten (z.B. Login bei Tablet-Breite) nie ueber den Rand */
@media (max-width: 1100px) { .ds-discord { white-space: normal; text-align: left; } }
.ds-discord:hover { background: var(--red-hi); transform: translateY(-1px); }
.ds-discord:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.ds-discord.sm { min-height: 38px; font-size: 13px; padding: 6px 16px 6px 13px; gap: 9px; }
.ds-discord.sm svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .ds-discord { transition: none; } .ds-discord:hover { transform: none; } }

/* Rechtliche Links (Impressum, Datenschutz, AGB, Widerrufs- und Kuendigungsbutton) - auf jeder Seite */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px auto 0; font-size: 12.5px; line-height: 1.4; }
.legal-links a { color: var(--ash, #a2a2ac); text-decoration: none; }
.legal-links a:hover { color: var(--bone, #f2f2f4); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.legal-links a:focus-visible { outline: 2px solid var(--bone, #f2f2f4); outline-offset: 2px; }

/* Handy (alle Seiten): iOS zoomt beim Antippen von Feldern unter 16 px hinein -> Felder mind. 16 px;
   Links im Fussbereich und "Zurueck"-Links mit genug Flaeche zum Antippen (mind. ca. 40 px hoch). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea { font-size: 16px !important; }
  .legal-links { gap: 0 4px; }
  .legal-links a, .foot nav a { display: inline-block; padding: 10px 4px; }
  .foot nav { margin-left: -4px; }   /* Innenabstand der Links ausgleichen: Text buendig mit dem Rest */
  a.back { display: inline-block; padding: 10px 0; }
  .ds-discord { max-width: 100%; white-space: normal; text-align: left; }   /* lange Beschriftung bricht um statt ueber den Rand zu ragen */
}