/* Shared action surfaces. Build paths are resolved by build_cockpit_look.py and website_content.py.
   The dark scrim stays above the artwork; white text never depends on the image's brightness. */
.button, .button.secondary, .k, .k.gold, .k.leise, .los:not(.k), .knoepfe button.haupt,
.game-client button:not(.item-tile):not(.faction-card):not(.planet-pick):not(.zoom):not(.space-label):not([data-tab]):not([aria-pressed]):not(.resource-hit):not(.danger) {
  --action-accent: #89dce9; --action-border: rgba(137, 220, 233, .44);
  position: relative; isolation: isolate; min-height: 44px; border-radius: 12px;
  border: 1px solid var(--action-border); color: #f4fbff;
  background-color: rgba(10, 24, 39, .88);
  background-image: linear-gradient(180deg, rgba(225, 246, 255, .08), transparent 48%, rgba(2, 8, 18, .16)),
    linear-gradient(110deg, rgba(7, 19, 33, .94), rgba(7, 19, 33, .72)), var(--action-image, none);
  background-position: center, center, var(--action-position, 50% 44%);
  background-size: cover; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(230, 250, 255, .18), inset 0 -1px 0 rgba(2, 7, 16, .45), 0 5px 16px rgba(0, 0, 0, .24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85); font-weight: 650;
  letter-spacing: .015em; line-height: 1.4; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), border-color 160ms ease, box-shadow 160ms ease;
}
.button { gap: 14px; padding: 13px 22px; max-width: 100%; text-align: center; }
.button:not(.secondary), .k.gold, .los:not(.k), .knoepfe button.haupt,
.game-client form button:not([type="button"]):not(.secondary):not(.danger),
.game-client #claim-submit {
  --action-image: url("../web-client/assets/backgrounds.command.webp");
  --action-border: rgba(137, 220, 233, .65);
  box-shadow: inset 0 1px 0 rgba(230, 250, 255, .23), inset 0 -1px 0 rgba(2, 7, 16, .5), 0 6px 22px rgba(34, 128, 162, .17);
}
/* Download: ocean planet. Entry: command deck. Learning: violet nebula. */
.button[href*="releases/download"], .button[href$=".apk"], .button[href$=".zip"] {
  --action-image: url("../web-client/assets/planets.leben_ozean.webp");
  --action-accent: #bfcaff; --action-border: rgba(172, 192, 255, .62); --action-position: 50% 32%;
}
.hero-actions .button.secondary, .button[href*="Sternenepoche-Start"], .button[href*="Sternenepoche-Handbuch"] {
  --action-image: url("../web-client/assets/backgrounds.nebula.webp");
  --action-accent: #c8bdff; --action-border: rgba(182, 164, 244, .42);
}
.game-client #forschen button:not(.item-tile):not(.secondary) { --action-image: url("../web-client/assets/backgrounds.research.webp"); --action-border: rgba(179, 171, 255, .55); }
.game-client #werft button:not(.item-tile):not(.secondary), .k.gold.gross { --action-image: url("../web-client/assets/backgrounds.hangar.webp"); }
.game-client #flotten form button:not(.secondary) { --action-image: url("../web-client/assets/backgrounds.shipyard.webp"); }
.game-client #aktionen form button:not(.secondary) { --action-image: url("../web-client/assets/backgrounds.market.webp"); }
.button.secondary, .k.leise { --action-border: rgba(169, 206, 229, .28); font-weight: 550; }
.button.small, .k.klein { border-radius: 10px; }
.button:focus-visible, .k:focus-visible, .los:focus-visible, .knoepfe button:focus-visible,
.game-client button:focus-visible { outline: 2px solid #b7efff; outline-offset: 3px; }
.button:active:focus-visible, .k:active:focus-visible, .los:active:focus-visible, .game-client button:active:focus-visible { transform: none; transition: none; }
.button:active:not([aria-disabled="true"]), .k:active:not(:disabled), .los:active:not(:disabled),
.knoepfe button.haupt:active:not(:disabled) { transform: scale(.97); filter: none; }
.button[aria-disabled="true"], .k:disabled, .los:disabled, .knoepfe button.haupt:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.k.rot { --action-border: #f093a3; background: linear-gradient(180deg, #672536, #451b2c); color: #fff; }
.rat-play, .haus-play { color: #f4fbff; background: linear-gradient(145deg, #2f6077, #102538); border: 1px solid #8ddbeb70; box-shadow: inset 0 1px #e1f8ff30; }
.game-client #tabs button[data-tab][aria-selected="true"] { color: #c0f2ff; border-color: #7fd3ff42; background: linear-gradient(100deg, #7fd3ff20, #7fd3ff06); }
.game-client #tabs button[data-tab][aria-selected="true"]::after { background: #7fd3ff; box-shadow: 0 0 10px #7fd3ff50; }
.game-client .comm-tabs button[aria-pressed="true"], .rat-volk button.an { color: #e8f8ff; border-color: #7fd3ff80; background: linear-gradient(180deg, #7fd3ff20, #7fd3ff08); }
@media (hover: hover) and (pointer: fine) {
  .button:hover, .k:hover:not(:disabled), .los:hover:not(:disabled), .knoepfe button.haupt:hover:not(:disabled) {
    border-color: var(--action-accent); filter: none;
    box-shadow: inset 0 1px 0 rgba(230, 250, 255, .3), 0 6px 22px rgba(55, 136, 180, .22);
  }
  .game-client button:not(.item-tile):not(.faction-card):not(.planet-pick):not(.zoom):not(.space-label):not([data-tab]):not([aria-pressed]):not(.resource-hit):hover:not(:disabled) { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .k, .los, .knoepfe button.haupt { transition: none; }
  .button:active:not([aria-disabled="true"]), .k:active:not(:disabled), .los:active:not(:disabled), .knoepfe button.haupt:active:not(:disabled) { transform: none; }
}
@media (max-width: 580px) {
  .game-client header { min-height: 46px; gap: 6px; padding: 7px 10px; }
  .game-client #account-strip, .game-client #world-time, .game-client #connection { padding: 3px 7px; font-size: 10px; }
  .game-client header .brand { font-size: 12px; letter-spacing: .12em; gap: 7px; }
  .game-client header .brand span { font-size: 8px; letter-spacing: .12em; }
}
@media (prefers-contrast: more) {
  .button, .button.secondary, .k, .k.gold, .k.leise, .los:not(.k), .knoepfe button.haupt,
  .game-client button:not(.item-tile):not(.faction-card):not(.planet-pick):not(.zoom):not(.space-label):not([data-tab]):not([aria-pressed]):not(.resource-hit):not(.danger) { background: #081321; border-color: #c5efff; color: #fff; text-shadow: none; }
}
@media (forced-colors: active) {
  .button, .button.secondary, .k, .k.gold, .k.leise, .los:not(.k), .knoepfe button.haupt,
  .game-client button:not(.item-tile):not(.faction-card):not(.planet-pick):not(.zoom):not(.space-label):not([data-tab]):not([aria-pressed]):not(.resource-hit):not(.danger) { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; text-shadow: none; }
}

/* Kopfleiste der Website – eigene Klassen (sk-*), damit sie neben dem Technologiebaum (web-client/techbaum) bestehen. */
@font-face{font-family:Oxanium;font-weight:500;font-display:swap;src:url("../web-client/fonts/oxanium-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:Oxanium;font-weight:600;font-display:swap;src:url("../web-client/fonts/oxanium-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:Oxanium;font-weight:700;font-display:swap;src:url("../web-client/fonts/oxanium-latin-700-normal.woff2") format("woff2")}
:root{color-scheme:dark;
 --grund:#040913;--grund2:#060c18;--glas:rgba(9,20,34,.84);--glas2:rgba(13,28,46,.9);--rand:rgba(150,190,230,.18);--rand2:rgba(150,190,230,.34);
 --text:#dfe8f1;--leise:#93a8bc;--gold:#e2bd62;--gold2:#f6dc9a;--blau:#8fd0ff;--blau2:#3fa9e0;--gruen:#56d27c;--orange:#f2a43a;--rot:#ff6464;
 --aurelianer:#ffcf33;--krath:#ff4a2e;--veyari:#5dff7a;--syntheten:#5ab8ff;
 --titel:Oxanium,"Segoe UI",system-ui,sans-serif;--lese:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
 --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;--r:6px;--breite:1240px;--ease:cubic-bezier(.22,1,.36,1)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.springen{position:fixed;left:16px;top:-80px;z-index:200;background:var(--gold);color:#0a0f18;padding:10px 16px;border-radius:4px;font-weight:650}
.springen:focus{top:10px}
.sk-rahmen{width:min(var(--breite),calc(100% - 32px));margin-inline:auto}
/* ---------- Kopfleiste ---------- */
.sk-kopf{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(5,11,21,.97),rgba(5,11,21,.86));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rand)}
.sk-kopf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(226,189,98,.6),rgba(143,208,255,.4),transparent)}
.sk-innen{display:flex;align-items:center;gap:18px;min-height:64px}
.sk-marke{display:inline-flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none;font:700 15px/1 var(--titel);letter-spacing:.26em;white-space:nowrap}
.sk-marke img{width:30px;height:30px}
.sk-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.sk-nav a{position:relative;padding:8px 10px;color:#b9cadb;text-decoration:none;font:500 13.5px/1 var(--titel);letter-spacing:.03em;border-radius:3px;white-space:nowrap}
.sk-nav a:hover{color:#fff;background:rgba(143,208,255,.07)}
.sk-nav a[aria-current="page"]{color:var(--gold2)}
.sk-nav a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--gold)}
.sk-kopf .button{min-height:40px;padding:8px 16px;font:600 13px/1 var(--titel)}
.sk-menue{display:none;margin-left:auto}
.sk-menue summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--rand2);border-radius:4px;color:var(--text);font:600 13px/1 var(--titel);cursor:pointer;background:var(--glas)}
.sk-menue summary::-webkit-details-marker{display:none}
.sk-menue summary::before{content:"";width:16px;height:10px;border-block:2px solid currentColor;box-shadow:inset 0 4px 0 -2px currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.sk-menue[open] summary{border-color:var(--gold)}
.sk-menue nav{position:absolute;left:0;right:0;top:100%;display:grid;gap:2px;padding:10px 16px 16px;background:rgba(5,11,21,.98);border-bottom:1px solid var(--rand2);max-height:calc(100vh - 64px);overflow:auto}
.sk-menue nav a{display:flex;justify-content:space-between;padding:12px 10px;color:var(--text);text-decoration:none;font:500 15px/1.2 var(--titel);border-bottom:1px solid var(--rand)}
.sk-menue nav a small{color:var(--leise);font:400 12px/1.2 var(--lese)}
.sk-menue nav a[aria-current="page"]{color:var(--gold2)}

/* ---------- Knöpfe (Ergänzung zu action-surfaces.css) ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-family:var(--titel);font-size:14.5px}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:1180px){.sk-nav{display:none}.sk-menue{display:block}.sk-kopf .button.spielen{display:none}}