/* simko-it.de - Oberflaeche des Website-Tests
   ============================================================================
   Stand bis zum 06.09.2026 mitten in style.css. Herausgeloest, weil das CMS
   dieselbe Oberflaeche braucht: Unter "Eigene Tests" laeuft der Pruefbericht
   direkt im Reiter.

   Warum nicht einfach style.css im CMS mitladen: Die Datei bringt die
   komplette Gestaltung der oeffentlichen Seite mit und wuerde das CMS
   umlackieren. Und warum kein Rahmen (iframe) statt der Doppelnutzung: Die
   ausgelieferte Content-Security-Policy stammt von NPMplus, nicht aus
   html/inc/csp.php, und traegt "frame-src https://eixersee.de" ohne 'self' -
   ein Rahmen auf die eigene Seite bleibt damit leer. Nachweisbar daran, dass
   sogar /robots.txt diesen Header traegt, obwohl fuer statische Dateien eine
   ganz andere CSP in der .htaccess steht.

   Die Regeln stehen bewusst OHNE Praefix: Ausser .loading-bar und .sr-only
   benutzen sie ausschliesslich test-eigene Klassennamen, die es im CMS nicht
   gibt. Ein Praefix haette 550 Zeilen angefasst, ohne etwas zu verhindern.

   Die Farbwerte kommen aus Variablen, die im CMS anders heissen. Wer diese
   Datei dort einbindet, setzt sie auf einem Elternelement - siehe
   cmsadmin/inc/views/eigenetests.php. */

/* ---------- Speed-Test ---------- */
.speedtest {
  margin: 2.4rem 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.speedtest__row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.speedtest__row input {
  flex: 1 1 220px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm, 8px);
  font: inherit;
  color: var(--color-ink);
}
.speedtest__row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}
.speedtest__row .btn { flex: 0 0 auto; }
.speedtest__hint {
  display: block;
  margin-top: 0.7rem;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
/* Ohne Inhalt keinen Platz reservieren — sonst wirkt der Abstand unten in der
   Kachel größer als oben, solange noch keine Meldung angezeigt wird. */
.speedtest__hint:empty {
  margin-top: 0;
  min-height: 0;
}
.speedtest__hint.is-error { color: var(--color-error); }
.dsgvo-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.dsgvo-consent input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ---------- Start des Website-Berichts ----------
   Frueher standen hier drei Auswahlkacheln (Geschwindigkeit, DSGVO,
   kompletter Bericht). Seit nur noch der komplette Bericht angeboten wird,
   waere ein Raster mit einer einzigen Kachel eine Auswahl ohne Wahl - die
   Schaltflaeche steht deshalb fuer sich, mit dem Hinweis auf die Dauer
   direkt daneben. */
.test-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  margin-top: 1.4rem;
}
.test-start__btn {
  flex: 0 0 auto;
}
.test-start__note {
  flex: 1 1 16rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
/* Auf schmalen Schirmen nimmt die Schaltflaeche die volle Breite - ein
   halbbreiter Knopf neben umbrechendem Text wirkt dort wie ein Versehen. */
@media (max-width: 560px) {
  .test-start__btn { width: 100%; justify-content: center; }
  .test-start__note { flex-basis: 100%; }
}


/* ---------- Live-Datencheck ---------- */
.datencheck {
  margin-top: 2.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.datencheck__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--color-line);
}
.datencheck__scanline { color: var(--color-ink-soft); }
.datencheck__status { color: var(--color-ink-soft); font-weight: 600; }
.datencheck__status.is-done { color: var(--color-success); }
.datencheck__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2.4rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 640px) {
  .datencheck__grid { grid-template-columns: 1fr 1fr; }
}
.datencheck__group-title {
  grid-column: 1 / -1;
  margin: 1rem 0 -0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.datencheck__group-title:first-child { margin-top: 0; }
.datencheck__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-line);
}
.datencheck__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 0.8rem;
  font-weight: 700;
}
.datencheck__check.is-warn {
  background: var(--color-error-bg);
  color: var(--color-error);
}
.datencheck__check.is-caution {
  background: rgba(249, 115, 22, 0.16);
  color: var(--color-accent-dark);
}
/* Während geprüft wird: bewusst neutral - ein grüner Haken oder oranges
   Ausrufezeichen würde eine Bewertung suggerieren, die noch nicht feststeht. */
.datencheck__check.is-loading {
  background: var(--color-line);
  color: var(--color-ink-soft);
}
/* Fortschrittszeile: volle Breite unter Label/Wert, damit Balken und Prozent
   nicht mit dem Wert um den knappen Platz konkurrieren. */
.datencheck__progress {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.55rem;
}
.datencheck__progress .loading-bar {
  flex: 1 1 auto;
  margin-top: 0;
}
.datencheck__progress-label {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums; /* Prozentwert springt beim Zählen nicht */
}
.datencheck__label { flex: 1 1 auto; color: var(--color-ink); }
.datencheck__value {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  /* Sicherheitsnetz: lange Werte dürfen die Spalte nicht überlaufen. Die
     eigentliche Lösung sind kurze Werte + Details im "Zuerst angehen"-Block. */
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  /* Wert immer auf einer eigenen Zeile unter dem Label, nicht nur bei
     Platzmangel — sonst wirkt es auf schmalen Screens zusammengequetscht. */
  .datencheck__value {
    flex-basis: 100%;
    margin-left: calc(1.5rem + 0.7rem);
  }
}
.datencheck__result {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}
.report__scores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.9rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 640px) {
  .report__scores { grid-template-columns: 1fr; }
}
.report__score-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.report__score-strategy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-ink);
}
.report__score-strategy svg { flex: 0 0 auto; color: var(--color-ink-soft); }
.report__score-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  width: 100%;
}
.report__score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
}
.report__score-item strong { font-size: 1.25rem; font-weight: 800; }
.report__score-item.is-good strong { color: var(--color-success); }
.report__score-item.is-mid strong { color: var(--color-accent-dark); }
.report__score-item.is-bad strong { color: var(--color-error); }
.report__score-item small { color: var(--color-ink-soft); font-size: 0.72rem; text-align: center; }
.datencheck__verdict {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 1rem;
  text-align: center;
}

/* ---------- Ladeanzeige für Wartezustände ----------
   Bewusst "unbestimmt" (kein Prozentwert): Weder der Seiten-Scan noch die
   SSL-Labs-Bewertung melden einen Fortschritt zurück - ein gefüllter Balken
   waere also erfunden. Der laufende Streifen signalisiert nur "es passiert
   etwas", ohne eine Genauigkeit vorzutäuschen, die es nicht gibt. */
.loading-bar {
  position: relative;
  display: block;
  height: 3px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--color-line);
  overflow: hidden;
}
.loading-bar__fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: loadingSlide 1.5s ease-in-out infinite;
}
/* Mit bekanntem Fortschritt: fester Balken statt laufendem Streifen. Darüber
   wandert ein leichter Schimmer - ohne ihn wirkt der stehende Balken zwischen
   zwei Fortschritts-Updates (alle 10 s) eingefroren, obwohl noch geladen wird. */
.loading-bar--determinate .loading-bar__fill {
  background: var(--color-accent);
  animation: none;
  transition: width 0.4s ease;
  overflow: hidden;
}
.loading-bar--determinate .loading-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  animation: loadingShimmer 1.8s ease-in-out infinite;
}
@keyframes loadingShimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
/* Variante für den Einsatz direkt in einer Ergebniszeile (hinter dem Text) */
.loading-bar--inline {
  display: inline-block;
  width: 46px;
  margin: 0 0 0 0.5rem;
  vertical-align: middle;
}
@keyframes loadingSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* Ohne Bewegung: ruhiges Pulsieren statt laufendem Streifen */
@media (prefers-reduced-motion: reduce) {
  .loading-bar__fill {
    width: 100%;
    background: var(--color-accent);
    animation: loadingPulse 1.8s ease-in-out infinite;
  }
  /* Fortschrittsbalken bleibt ruhig stehen; der Schimmer entfällt komplett,
     statt ihn nur langsamer zu machen. Die Prozentbreite kommt als Inline-Style
     aus dem JS und hat ohnehin Vorrang vor dem width:100% oben. */
  .loading-bar--determinate .loading-bar__fill {
    animation: none;
    opacity: 1;
  }
  .loading-bar--determinate .loading-bar__fill::after { display: none; }
  @keyframes loadingPulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.7; }
  }
}

/* Kompakte Gesamtbewertung über dem Fazit */
.check-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin: 1.6rem 0 0.4rem;
  font-size: 0.95rem;
}
.check-score__main {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-ink);
}
.check-score__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
}
.check-score__tag::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}
.check-score__tag--warn { background: var(--color-error-bg); color: var(--color-error); }
.check-score__tag--caution { background: rgba(249, 115, 22, 0.16); color: var(--color-accent-dark); }
.check-score__tag--ok { background: var(--color-success-bg); color: var(--color-success); }

/* "Das solltest du zuerst angehen" - priorisierte Top-Befunde */
.prio-block {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}
.prio-block__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 0.9rem;
}
.prio-item {
  padding: 0.85rem 1rem;
  margin-bottom: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-line);
  background: var(--color-surface-2, rgba(127, 127, 127, 0.05));
}
.prio-item--warn { border-left-color: var(--color-error); }
.prio-item--caution { border-left-color: var(--color-accent-dark); }
.prio-item__head {
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 0.3rem;
}
/* Lange Aufzählung (fehlende Header, gefundene Dateien ...) - steht bewusst
   hier statt in der Ergebniszeile, wo sie das zweispaltige Raster sprengt. */
.prio-item__detail {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.82rem;
  color: var(--color-ink-soft, var(--color-ink));
  margin: 0 0 0.45rem;
  overflow-wrap: anywhere;
}
.prio-item__why {
  font-size: 0.9rem;
  color: var(--color-ink-soft, var(--color-ink));
  margin: 0 0 0.35rem;
}
.prio-item__fix {
  font-size: 0.9rem;
  color: var(--color-ink);
  margin: 0;
}
.prio-item__fix::first-line { font-weight: 600; }
.prio-note {
  font-size: 0.8rem;
  color: var(--color-ink-soft, var(--color-ink));
  text-align: center;
  margin: 0.9rem auto 0;
  max-width: 46rem;
  opacity: 0.85;
}

/* Lighthouse-Ergebnis in einer Projekt-Kachel (kompakter als im Website-Test) */
.speedtest__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.4rem;
}

/* ---------- Hoher Kontrast ----------
   Die uebrigen Kontrastregeln fuer .datencheck und .prio-item stehen in
   style.css: Sie teilen sich dort eine Deklaration mit .card, .project und den
   Formularfeldern. Herausgeloest waeren es zwei Stellen, an denen dieselbe
   Rahmenbreite gepflegt werden muesste. */

/* Das neutrale "wird geprüft"-Zeichen nutzt --color-line als Fläche und
   --color-ink-soft als Schrift - im Kontrastmodus sind beide weiß, das Zeichen
   wäre unsichtbar. Umrandet statt gefüllt, dann bleibt es neutral und sichtbar. */
:root[data-theme="contrast"] .datencheck__check.is-loading {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
}