/* P2-039 · Referenztreue Qualitaetsuebersicht · 0.4.1 Build 12
   Bewusst getrennt von den allgemeinen Oberflaechenregeln. */

.nav button,
.nav .nav-external {
  position: relative;
  display: grid;
  min-height: 48px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.nav .nav-external:hover {
  color: var(--text);
  border-color: rgba(72, 215, 233, .13);
  background: rgba(72, 215, 233, .06);
}

.nav .nav-external > span { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.nav .nav-external > small { color: var(--cyan); font-size: 15px; }

.quality-overview { gap: 18px; }

.quality-gauge {
  background: conic-gradient(from -90deg, var(--gauge-start) 0deg, var(--gauge-end) var(--gauge-fill), rgba(118, 145, 167, .28) var(--gauge-fill));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gauge-color) 24%, transparent),
    0 0 26px color-mix(in srgb, var(--gauge-color) 18%, transparent);
}

.quality-gauge::before {
  width: calc(100% - 17px);
  height: calc(100% - 17px);
  border-color: rgba(157, 191, 220, .13);
  background: radial-gradient(circle at 42% 35%, #153a59, #081a2b 68%);
}

.quality-gauge strong { color: #f7fbff; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.quality-gauge small { color: #9eb3c6; text-transform: none; letter-spacing: 0; }

.quality-hero {
  min-height: 176px;
  grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr);
  gap: 26px;
  align-items: center;
  padding: 20px 28px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--quality-accent) 10%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(8, 38, 65, .98), rgba(7, 30, 52, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.18);
}

.quality-hero-score { grid-template-columns: 146px minmax(0, 1fr); gap: 22px; }
.quality-hero .quality-gauge.large { width: 136px; height: 136px; }
.quality-hero .quality-gauge.large strong { font-size: 39px; }
.quality-hero-identity h2 { margin: 0 0 8px; font-size: clamp(25px, 2.45vw, 34px); }
.quality-hero-identity .quality-value { display: grid; gap: 4px; }
.quality-hero-identity .quality-value strong { color: var(--quality-score-color, var(--quality-accent)); font-size: 20px; }
.quality-hero-identity .quality-value span { display: none; }
.quality-hero-identity .quality-trend { margin-top: 14px; }
.quality-hero-open { top: 10px; right: 10px; background: transparent; }

.quality-hero > .quality-short-notes {
  height: 118px;
  align-items: stretch;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quality-hero > .quality-short-notes .quality-short-note {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 8px 12px;
  text-align: center;
}

.quality-hero > .quality-short-notes .ui-icon {
  width: 29px;
  height: 29px;
  grid-row: auto;
  color: var(--note-color);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--note-color) 28%, transparent));
}

.quality-hero > .quality-short-notes small { color: #d2dce5; font-size: 11px; }
.quality-hero > .quality-short-notes strong { color: var(--note-color); font-size: 24px; }

.quality-controls { margin: -2px 0 0; }
.quality-controls:not([open]) { display: none; }

.quality-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.quality-card {
  min-height: 206px;
  padding: 15px 14px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--quality-accent) 9%, transparent), transparent 38%),
    linear-gradient(145deg, rgba(9, 38, 64, .96), rgba(7, 29, 49, .93));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.17);
}

.quality-card-head strong { font-size: 16px; }
.quality-card-body {
  display: grid;
  min-width: 0;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 12px;
}

.quality-card-score { display: grid; min-width: 0; justify-items: center; gap: 7px; }
.quality-card-score > strong { display: none; color: var(--quality-score-color, var(--quality-accent)); font-size: 11px; line-height: 1.2; text-align: center; }
.quality-card .quality-gauge { width: 92px; height: 92px; }
.quality-card .quality-gauge::before { width: calc(100% - 14px); height: calc(100% - 14px); }
.quality-card .quality-gauge strong { font-size: 27px; }
.quality-card .quality-gauge small { font-size: 9px; }

.quality-card .quality-short-notes {
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quality-card .quality-short-note {
  grid-template-columns: 15px minmax(0, 1fr) auto;
  gap: 5px;
  justify-items: start;
  padding: 4px 0;
  border-right: 0;
  border-bottom: 1px solid rgba(157, 191, 220, .08);
  text-align: left;
}

.quality-card .quality-short-note:last-child { border-bottom: 0; }
.quality-card .quality-short-note .ui-icon { display: block; width: 14px; height: 14px; grid-row: auto; color: #70d7e8; }
.quality-card .quality-short-note small { width: auto; color: #c3d0db; font-size: 8px; }
.quality-card .quality-short-note strong {
  min-width: 26px;
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--note-color);
  background: color-mix(in srgb, var(--note-color) 13%, transparent);
  font-size: 10px;
  text-align: center;
}

.quality-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 10px;
}

.quality-legend span { display: inline-flex; gap: 6px; align-items: center; }
.quality-legend i { width: 9px; height: 9px; border-radius: 50%; }
.quality-legend i.critical { background: #ff4f5f; }
.quality-legend i.weak { background: #ff902f; }
.quality-legend i.solid { background: #f3c629; }
.quality-legend i.good { background: #70d886; }
.quality-legend i.excellent { background: #28c96d; }
.quality-legend b { color: #d5dee7; font-weight: 650; }

.mobile-more-links .nav-external,
.mobile-more-links button {
  display: grid;
  min-height: 52px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: rgba(255,255,255,.035);
  text-align: left;
  text-decoration: none;
}

.mobile-more-links .nav-external > small { color: var(--cyan); }

@media (max-width: 1280px) and (min-width: 1051px) {
  .quality-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quality-card { padding-inline: 12px; }
  .quality-card-body { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
  .quality-card .quality-gauge { width: 78px; height: 78px; }
  .quality-card .quality-gauge strong { font-size: 23px; }
  .quality-card .quality-short-note small { font-size: 7px; }
}

@media (max-width: 1050px) and (min-width: 761px) {
  .quality-hero { grid-template-columns: 1fr; }
  .quality-hero > .quality-short-notes { height: 96px; }
  .quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-card { min-height: 212px; }
}

@media (max-width: 760px) {
  .quality-overview { gap: 12px; }
  .quality-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 14px 12px 11px;
    border-radius: 14px;
  }
  .quality-hero-score { grid-template-columns: 134px minmax(0, 1fr); gap: 14px; }
  .quality-hero .quality-gauge.large { width: 126px; height: 126px; }
  .quality-hero .quality-gauge.large strong { font-size: 35px; }
  .quality-hero-identity { padding-right: 20px; }
  .quality-hero-identity h2 { margin: 0 0 7px; font-size: 22px; }
  .quality-hero-identity .quality-value strong { font-size: 16px; line-height: 1.25; }
  .quality-hero-identity .quality-trend { margin-top: 10px; }
  .quality-hero > .quality-short-notes { height: 108px; border-top: 1px solid rgba(157, 191, 220, .12); }
  .quality-hero > .quality-short-notes .quality-short-note { gap: 6px; padding: 9px 2px 5px; }
  .quality-hero > .quality-short-notes .ui-icon { width: 23px; height: 23px; }
  .quality-hero > .quality-short-notes small { font-size: 8px; }
  .quality-hero > .quality-short-notes strong { font-size: 18px; }

  .quality-controls { padding: 10px 13px; }
  .quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quality-card {
    min-height: 224px;
    padding: 12px 10px 10px;
    border-radius: 13px;
  }
  .quality-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 156px; }
  .quality-card-head strong { font-size: 14px; line-height: 1.15; }
  .quality-card-body { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .quality-card-score { grid-template-columns: 80px minmax(0, 1fr); justify-items: start; gap: 6px; }
  .quality-card-score > strong { display: block; overflow-wrap: normal; hyphens: none; color: var(--quality-score-color, var(--quality-accent)); font-size: 10px; line-height: 1.15; text-align: left; }
  .quality-card .quality-gauge { width: 78px; height: 78px; }
  .quality-card .quality-gauge strong { font-size: 22px; }
  .quality-card .quality-gauge small { font-size: 8px; }
  .quality-card .quality-short-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(157, 191, 220, .1); }
  .quality-card .quality-short-note {
    grid-template-columns: 1fr;
    gap: 4px;
    justify-items: center;
    padding: 7px 2px 1px;
    border-right: 1px solid rgba(157, 191, 220, .08);
    border-bottom: 0;
    text-align: center;
  }
  .quality-card .quality-short-note:nth-child(n+4) { display: none; }
  .quality-card .quality-short-note:nth-child(3) { border-right: 0; }
  .quality-card .quality-short-note .ui-icon { display: none; }
  .quality-card .quality-short-note small { width: 100%; color: #c9d5df; font-size: 8px; }
  .quality-card .quality-short-note strong { padding: 0; color: var(--note-color); background: transparent; font-size: 14px; }

  .quality-card:last-child:nth-child(odd) .quality-card-body { grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); align-items: center; }
  .quality-card:last-child:nth-child(odd) .quality-card-score { grid-template-columns: 80px minmax(0, 1fr); }
  .quality-legend { display: none; }
  .quality-calculation-note { padding-inline: 2px; }
}

@media (max-width: 370px) {
  .quality-hero-score { grid-template-columns: 108px minmax(0, 1fr); }
  .quality-hero .quality-gauge.large { width: 102px; height: 102px; }
  .quality-hero > .quality-short-notes .ui-icon { width: 20px; height: 20px; }
  .quality-card { min-height: 214px; padding-inline: 8px; }
  .quality-card-score { grid-template-columns: 68px minmax(0, 1fr); }
  .quality-card .quality-gauge { width: 66px; height: 66px; }
  .quality-card .quality-gauge strong { font-size: 21px; }
  .quality-card-score > strong { font-size: 10px; }
}

@media (max-width: 340px) {
  .quality-grid { grid-template-columns: 1fr; }
  .quality-card:last-child:nth-child(odd) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .nav .nav-external { transition: none; }
}