/* Eigenständige Gestaltung; ausschließlich lokale Assets und Systemschriften. */
:root {
  --ink:#202c36;
  --muted:#65727c;
  --cyan:#6cd4ed;
  --blue:#08768f;
  --line:#dce3e7;
  --paper:#f3f5f6;
  --dark:#14202a;
  --white:#fff;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input {
  font:inherit
}

button,a,input {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

a {
  color:inherit
}

button:disabled {
  cursor:not-allowed
}

button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px
}

[hidden] {
  display:none!important
}

.shell {
  width:min(1320px,calc(100% - 96px));
  margin-inline:auto
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:absolute;
  z-index:20;
  top:8px;
  left:20px;
  background:white;
  padding:12px;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:translateY(0)
}

.masthead {
  background:#fff;
  border-top:3px solid var(--cyan)
}

.masthead-inner {
  height:77px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:15px;
  text-decoration:none;
  font-size:18px;
  letter-spacing:1px
}

.brand strong {
  font-weight:650
}

.brand strong>span {
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--muted);
  margin-left:12px
}

.brand-mark {
  width:25px;
  height:27px;
  position:relative;
  display:block;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:var(--blue)
}

.brand-mark::after {
  content:"";
  position:absolute;
  inset:6px 5px 4px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:#fff
}

.header-label {
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:28px
}

.tiny-cross {
  font-size:25px;
  font-weight:200;
  color:#9eabb4
}

.system-panel {
  color:#fff;
  background:linear-gradient(120deg,#121d27 30%,#223440 100%);
  position:relative;
  overflow:hidden
}

.system-panel::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(125deg,transparent 67%,#7cddf009 67%,#7cddf009 67.1%,transparent 67.1%),linear-gradient(125deg,transparent 81%,#7cddf00b 81%,#7cddf00b 81.1%,transparent 81.1%)
}

.system-panel>.shell {
  position:relative
}

.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:325px;
  gap:48px;
  padding:42px 0 35px
}

.eyebrow {
  font-size:10px;
  font-weight:650;
  letter-spacing:2.3px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 17px;
  color:var(--blue)
}

.hero-copy .eyebrow {
  color:var(--cyan)
}

.line-marker {
  width:23px;
  height:2px;
  background:var(--cyan)
}

h1 {
  font-size:clamp(34px,3vw,46px);
  font-weight:350;
  line-height:1.15;
  letter-spacing:-1px;
  margin:0
}

h1>span {
  color:#9caebc
}

.hero-description {
  font-size:14px;
  color:#c5d0d9;
  margin:19px 0 26px
}

.system-state {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:Consolas,"Courier New",monospace;
  font-size:10px;
  letter-spacing:.8px;
  color:#d4e4eb
}

.system-state>span:last-child {
  color:#97abb8
}

.state-separator {
  margin:0 5px;
  color:#607785
}

.status-light {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px #6cd4ed12;
  animation:status-pulse 3s ease-in-out infinite
}

@keyframes status-pulse {
  50% {
    box-shadow:0 0 0 6px #6cd4ed08
  }
}

.system-emblem {
  width:290px;
  text-align:center;
  margin-right:35px;
  flex-shrink:0
}

.emblem-label,.emblem-bottom {
  font-family:Consolas,"Courier New",monospace;
  font-size:8px;
  letter-spacing:2.2px;
  color:#98afbd
}

.orbit {
  width:184px;
  height:184px;
  border:1px solid #6cd4ed3d;
  border-radius:50%;
  margin:17px auto;
  position:relative;
  display:grid;
  place-items:center
}

.orbit::before {
  content:"";
  position:absolute;
  inset:-9px;
  border:1px solid transparent;
  border-left-color:#6cd4ed80;
  border-right-color:#6cd4ed80;
  border-radius:50%;
  transform:rotate(35deg)
}

.orbit::after {
  content:"";
  position:absolute;
  inset:9px;
  border:1px dashed #6cd4ed30;
  border-radius:50%
}

.orbit-inner {
  width:145px;
  height:145px;
  border:1px solid #6cd4ed15;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px
}

.orbit strong {
  font-size:24px;
  font-weight:500;
  letter-spacing:3px
}

.orbit strong>span {
  font-weight:300;
  color:#a6c4d2
}

.orbit small {
  font-size:7px;
  letter-spacing:2px;
  color:#90acbb
}

.orbit i {
  position:absolute;
  right:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cyan)
}

.core-symbol {
  width:25px;
  height:23px;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  background:var(--cyan);
  margin-bottom:1px
}

.hardware-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0;
  padding:0 0 30px;
  gap:0
}

.hardware-grid>div {
  padding:18px 24px;
  border-top:1px solid #ffffff18;
  border-left:1px solid #ffffff18
}

.hardware-grid>div:nth-child(3n+1) {
  padding-left:0;
  border-left:0
}

.hardware-grid dt {
  font-size:9px;
  font-weight:500;
  letter-spacing:1.6px;
  color:#a6b6c1;
  margin-bottom:8px
}

.hardware-grid dt span {
  color:#75d4e7;
  margin-right:10px;
  font-family:Consolas,monospace;
  font-size:9px
}

.hardware-grid dd {
  font-size:14px;
  margin:0;
  line-height:1.6;
  font-weight:500
}

.hardware-grid dd small {
  font-size:12px;
  color:#a6b6c1;
  font-weight:400;
  margin-left:8px
}

.hardware-grid>div:nth-child(4) small,.hardware-grid>div:nth-child(5) small {
  display:block;
  margin:0
}

.archive {
  padding-top:42px;
  padding-bottom:58px;
  scroll-margin-top:20px
}

.archive-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px
}

.archive-heading .eyebrow {
  margin-bottom:8px;
  font-size:9px
}

h2 {
  font-weight:400;
  font-size:29px;
  letter-spacing:-.8px;
  margin:0
}

h2>span {
  color:var(--blue)
}

.archive-index {
  font-family:Consolas,monospace;
  font-size:10px;
  letter-spacing:1.2px;
  color:#7e8d97
}

.notice {
  display:flex;
  align-items:center;
  gap:13px;
  background:#e8f1f4;
  border:1px solid #d3e5eb;
  border-left:3px solid #44a5bf;
  padding:13px 16px;
  margin:0 0 30px;
  font-size:12px;
  color:#465b67;
  line-height:1.6
}

.notice p {
  margin:0
}

.notice strong {
  font-weight:600;
  margin-right:10px
}

.notice-icon {
  border:1px solid #6299a8;
  width:16px;
  height:16px;
  border-radius:50%;
  font-size:11px;
  line-height:14px;
  text-align:center;
  flex-shrink:0
}

.notice-tag {
  margin-left:auto;
  font-size:8px;
  letter-spacing:1.3px;
  color:#376f80;
  white-space:nowrap
}

.archive-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:34px
}

.category-panel {
  padding-top:5px
}

.category-panel h3 {
  font-size:9px;
  letter-spacing:1.8px;
  margin:0 0 17px 14px;
  color:var(--muted);
  font-weight:650
}

.category-filters {
  display:flex;
  flex-direction:column;
  gap:5px
}

.category-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:transparent;
  border:1px solid transparent;
  border-left:2px solid transparent;
  text-align:left;
  padding:12px;
  font-size:12px;
  color:#55626d;
  transition:background .18s,color .18s
}

.category-button:hover {
  background:#e5edf0;
  color:var(--ink)
}

.category-button[aria-pressed="true"] {
  background:#e1edf1;
  border-color:#d2e3e9;
  border-left-color:var(--blue);
  color:#155c70;
  font-weight:600
}

.category-count {
  font-family:Consolas,monospace;
  font-size:10px;
  color:#6c818c
}

.sidebar-note {
  margin:32px 14px 0;
  border-top:1px solid var(--line);
  padding-top:27px
}

.small-triangle {
  display:block;
  width:20px;
  height:18px;
  background:#b4c8d0;
  clip-path:polygon(50% 0,100% 100%,0 100%)
}

.sidebar-note p {
  font-size:18px;
  font-weight:350;
  line-height:1.4;
  margin:13px 0 9px;
  color:#576e7a
}

.sidebar-note small {
  font-size:11px;
  line-height:1.7;
  color:#75848e
}

.search {
  background:#fff;
  border:1px solid #cdd8de;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
  min-height:49px;
  transition:border-color .2s
}

.search:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 1px var(--blue)
}

.search svg {
  height:20px;
  width:20px;
  color:#708896;
  flex-shrink:0
}

.search input {
  border:0;
  outline:0;
  background:transparent;
  min-width:0;
  width:100%;
  height:47px;
  font-size:12px;
  color:var(--ink)
}

.search input:focus-visible {
  outline:0
}

.search input::placeholder {
  color:#75838d;
  opacity:1
}

.search input::-webkit-search-cancel-button {
  -webkit-appearance:none
}

.search button {
  border:0;
  background:transparent;
  font-size:22px;
  color:var(--muted);
  min-width:32px;
  min-height:32px
}

.results-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:24px 0 15px
}

.results-bar h3 {
  margin:0;
  font-size:12px;
  font-weight:600
}

.results-bar p {
  margin:0;
  font-family:Consolas,"Courier New",monospace;
  font-size:10px;
  color:var(--muted)
}

.driver-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px
}

.driver-card {
  background:#fff;
  border:1px solid var(--line);
  padding:21px 22px 17px;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:border-color .2s,box-shadow .2s,transform .2s
}

.driver-card:hover {
  border-color:#abc9d4;
  box-shadow:0 5px 20px #243f5110;
  transform:translateY(-2px)
}

.card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px
}

.card-category {
  font-size:8px;
  font-weight:600;
  letter-spacing:1.15px;
  text-transform:uppercase;
  color:#637e8c;
  line-height:1.8
}

.badge {
  font-size:8px;
  line-height:1.5;
  font-weight:600;
  padding:3px 7px;
  border:1px solid;
  white-space:nowrap;
  letter-spacing:.1px
}

.status-recommended {
  color:#236577;
  background:#ecf7fa;
  border-color:#c4e2ea
}

.status-optional {
  color:#67617b;
  background:#f3f1f8;
  border-color:#e1dce9
}

.status-optional_archive {
  color:#676066;
  background:#f4f2f2;
  border-color:#ded9dc
}

.status-optional_firmware {
  color:#436477;
  background:#eef5f7;
  border-color:#cee0e7
}

.status-recovery_setup {
  color:#80613c;
  background:#fbf5ea;
  border-color:#ead9b9
}

.status-installed {
  color:#356b57;
  background:#edf6f1;
  border-color:#cfe4d8
}

.status-archive {
  color:#68666b;
  background:#f2f2f3;
  border-color:#dddde0
}

.status-new {
  color:#2465a0;
  background:#eaf3fd;
  border-color:#cedff2
}

.driver-card h4 {
  font-size:19px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.4px;
  margin:0 0 5px;
  overflow-wrap:anywhere
}

.card-maker {
  font-size:10px;
  color:var(--muted);
  margin:0 0 21px
}

.card-details,.file-details {
  font-size:11px;
  line-height:1.55;
  margin:0
}

.card-details>div {
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:8px;
  margin-bottom:8px
}

.card-details dt,.file-details dt {
  color:var(--muted)
}

.card-details dd,.file-details dd {
  margin:0;
  overflow-wrap:anywhere
}

.file-details {
  background:#f5f7f8;
  border-top:1px solid #edf0f2;
  padding:12px;
  margin-top:7px;
  font-size:10px
}

.file-details>div {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:8px
}

.file-details>div+div {
  margin-top:5px
}

.file-details dd {
  font-family:Consolas,"Courier New",monospace;
  color:#526975
}

.card-note {
  font-size:10px;
  color:#6b7780;
  line-height:1.6;
  margin:12px 0 19px
}

.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:15px;
  border-top:1px solid #edf0f2
}

.placeholder-label {
  font-size:7px;
  letter-spacing:1px;
  color:#687e89;
  line-height:1.5
}

.download-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #08768f;
  background:#08768f;
  color:white;
  padding:10px 14px;
  min-height:38px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.4px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s
}

.download-button:hover {
  background:#085d72
}

.download-button:disabled {
  background:#eaf0f3;
  color:#647e8b;
  border-color:#d4e0e6
}

.empty-state {
  text-align:center;
  padding:58px 25px;
  background:#fff;
  border:1px solid var(--line)
}

.empty-state>span {
  color:#6ba9ba;
  font-size:38px
}

.empty-state h3 {
  font-size:19px;
  font-weight:500
}

.empty-state p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7
}

.reset-button {
  background:transparent;
  border:1px solid #9bbec9;
  color:var(--blue);
  padding:11px 16px;
  margin-top:12px;
  font-size:12px
}

.reset-button:hover {
  background:#eaf3f6
}

.footer {
  border-top:1px solid #d4dde2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:23px;
  padding-bottom:27px;
  font-size:10px;
  color:#72818c
}

.footer>div {
  display:flex;
  align-items:center;
  gap:13px
}

.footer strong {
  font-weight:500;
  color:#405662
}

.footer-mark {
  font-size:20px;
  color:#51899a
}

.footer-divider {
  color:#b6c4cd
}

@media(min-width:1600px) {
  .hero-top {
    padding-block:48px
  }
  .hardware-grid {
    grid-template-columns:repeat(6,1fr);
    padding-bottom:30px
  }
  .hardware-grid>div {
    padding:20px 15px 0
  }
  .hardware-grid>div:nth-child(3n+1) {
    padding-left:15px;
    border-left:1px solid #ffffff18
  }
  .hardware-grid>div:first-child {
    padding-left:0;
    border-left:0
  }
  .hardware-grid dd {
    font-size:13px
  }
  .hardware-grid dd small {
    display:block;
    margin:0
  }
}

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 56px)
  }
  .archive-layout {
    grid-template-columns:205px minmax(0,1fr);
    gap:24px
  }
  .driver-card {
    padding:18px 16px
  }
  .card-top {
    flex-direction:column;
    gap:7px
  }
  .system-emblem {
    margin-right:10px
  }
  .card-details>div {
    grid-template-columns:90px minmax(0,1fr)
  }
  .card-bottom {
    flex-wrap:wrap
  }
  .header-label {
    font-size:8px;
    letter-spacing:1px
  }
  .hardware-grid dd {
    font-size:13px
  }
}

@media(max-width:800px) {
  .shell {
    width:calc(100% - 40px)
  }
  .brand strong>span {
    font-size:9px;
    letter-spacing:1px;
    margin-left:5px
  }
  .header-label {
    display:none
  }
  .masthead-inner {
    height:66px
  }
  .hero-top {
    gap:20px
  }
  .system-emblem {
    width:190px;
    margin:0
  }
  .orbit {
    width:154px;
    height:154px
  }
  .orbit-inner {
    width:125px;
    height:125px
  }
  .hero-description {
    line-height:1.7;
    max-width:290px
  }
  .system-state {
    flex-wrap:wrap;
    font-size:8px
  }
  .hardware-grid dd small {
    display:block;
    margin:0
  }
  .archive-layout {
    display:block
  }
  .category-panel {
    padding:0
  }
  .category-panel h3 {
    margin-left:0
  }
  .category-filters {
    flex-direction:row;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:22px
  }
  .category-button {
    width:auto;
    gap:14px;
    padding:9px 11px;
    border:1px solid #d6e0e5;
    font-size:11px;
    background:#edf1f3
  }
  .category-button[aria-pressed="true"] {
    border-color:#86b4c3
  }
  .sidebar-note {
    display:none
  }
  .card-top {
    flex-direction:row
  }
  .archive {
    padding-top:30px
  }
  .footer {
    flex-wrap:wrap
  }
  .notice-tag {
    display:none
  }
}

@media(max-width:540px) {
  .shell {
    width:calc(100% - 32px)
  }
  .hero-top {
    padding:32px 0;
    min-height:0
  }
  .system-emblem {
    display:none
  }
  h1 {
    font-size:36px
  }
  .hero-description {
    max-width:none;
    font-size:12px
  }
  .system-state {
    font-size:8px;
    letter-spacing:.4px
  }
  .hardware-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-bottom:19px
  }
  .hardware-grid>div,.hardware-grid>div:nth-child(3n+1) {
    padding:15px 12px;
    border-left:1px solid #ffffff18
  }
  .hardware-grid>div:nth-child(2n+1) {
    padding-left:0;
    border-left:0
  }
  .hardware-grid dt {
    font-size:8px;
    letter-spacing:.8px
  }
  .hardware-grid dt span {
    margin-right:4px
  }
  .hardware-grid dd {
    font-size:12px
  }
  .hardware-grid dd small {
    font-size:11px
  }
  h2 {
    font-size:27px
  }
  .archive-index {
    display:none
  }
  .notice {
    align-items:flex-start;
    font-size:11px;
    padding:12px;
    gap:9px;
    margin-bottom:24px
  }
  .notice-icon {
    margin-top:3px
  }
  .notice strong {
    display:block
  }
  .driver-list {
    grid-template-columns:1fr
  }
  .driver-card {
    padding:21px
  }
  .category-button {
    font-size:10px;
    padding:9px;
    gap:8px
  }
  .category-count {
    font-size:9px
  }
  .search {
    padding-inline:12px
  }
  .search input {
    font-size:11px
  }
  .results-bar p {
    font-size:9px
  }
  .card-details>div {
    grid-template-columns:108px minmax(0,1fr)
  }
  .card-bottom {
    flex-wrap:nowrap
  }
  .placeholder-label {
    font-size:8px
  }
  .footer>div {
    flex-wrap:wrap;
    gap:9px
  }
  .footer-divider {
    display:none
  }
  .footer>div>span:last-child {
    flex-basis:100%;
    padding-left:25px
  }
  .footer {
    font-size:10px;
    padding-bottom:24px
  }
  .archive {
    padding-bottom:35px
  }
}

.session-actions { display:flex; align-items:center; gap:24px }
.session-actions form { margin:0 }
.logout-button { border:1px solid #d4e0e6; background:transparent; color:#466c7c; padding:10px 12px; min-height:40px; font-size:9px; letter-spacing:1px; white-space:nowrap }
.logout-button:hover { background:#edf5f7 }
.logout-button span { margin-left:6px }
@media(max-width:540px) {
  .masthead-inner { gap:12px; height:auto; min-height:66px; flex-wrap:wrap; padding-block:14px }
  .session-actions { margin-left:auto }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .driver-card:hover {
    transform:none
  }
}